opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-30 23:52:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor buttons (#17611)

Browse Source
This commit is contained in:
Tobias Skarhed
2019-06-17 16:15:49 +02:00
committed by GitHub
parent 8192fa538e
commit 6de75de755
8 changed files with 30 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -1,36 +1,7 @@
import React, { useContext } from 'react';
import { AbstractButton, ButtonProps, ButtonSize, LinkButtonProps } from './AbstractButton';
import { AbstractButton, ButtonProps, LinkButtonProps } from './AbstractButton';
import { ThemeContext } from '../../themes';
const getSizeNameComponentSegment = (size: ButtonSize) => {
switch (size) {
case ButtonSize.ExtraSmall:
return 'ExtraSmall';
case ButtonSize.Small:
return 'Small';
case ButtonSize.Large:
return 'Large';
case ButtonSize.ExtraLarge:
return 'ExtraLarge';
default:
return 'Medium';
}
};
const buttonFactory: <T>(renderAs: string, size: ButtonSize, displayName: string) => React.ComponentType<T> = (
renderAs,
size,
displayName
) => {
const ButtonComponent: React.FunctionComponent<any> = props => {
const theme = useContext(ThemeContext);
return <AbstractButton {...props} size={size} renderAs={renderAs} theme={theme} />;
};
ButtonComponent.displayName = displayName;
return ButtonComponent;
};
export const Button: React.FunctionComponent<ButtonProps> = props => {
const theme = useContext(ThemeContext);
return <AbstractButton {...props} renderAs="button" theme={theme} />;
@ -42,45 +13,3 @@ export const LinkButton: React.FunctionComponent<LinkButtonProps> = props => {
return <AbstractButton {...props} renderAs="a" theme={theme} />;
};
LinkButton.displayName = 'LinkButton';
export const ExtraSmallButton = buttonFactory<ButtonProps>(
'button',
ButtonSize.ExtraSmall,
`${getSizeNameComponentSegment(ButtonSize.ExtraSmall)}Button`
);
export const SmallButton = buttonFactory<ButtonProps>(
'button',
ButtonSize.Small,
`${getSizeNameComponentSegment(ButtonSize.Small)}Button`
);
export const LargeButton = buttonFactory<ButtonProps>(
'button',
ButtonSize.Large,
`${getSizeNameComponentSegment(ButtonSize.Large)}Button`
);
export const ExtraLargeButton = buttonFactory<ButtonProps>(
'button',
ButtonSize.ExtraLarge,
`${getSizeNameComponentSegment(ButtonSize.ExtraLarge)}Button`
);
export const ExtraSmallLinkButton = buttonFactory<LinkButtonProps>(
'a',
ButtonSize.ExtraSmall,
`${getSizeNameComponentSegment(ButtonSize.ExtraSmall)}LinkButton`
);
export const SmallLinkButton = buttonFactory<LinkButtonProps>(
'a',
ButtonSize.Small,
`${getSizeNameComponentSegment(ButtonSize.Small)}LinkButton`
);
export const LargeLinkButton = buttonFactory<LinkButtonProps>(
'a',
ButtonSize.Large,
`${getSizeNameComponentSegment(ButtonSize.Large)}LinkButton`
);
export const ExtraLargeLinkButton = buttonFactory<LinkButtonProps>(
'a',
ButtonSize.ExtraLarge,
`${getSizeNameComponentSegment(ButtonSize.ExtraLarge)}LinkButton`
);