opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 16:48:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Forms: revamped select (#21092)

Browse Source
This commit is contained in:
Dominik Prokop
2020-01-07 09:20:06 +01:00
committed by GitHub
parent eac66813ca
commit 630f75d3ef
35 changed files with 1357 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,12 +18,13 @@ type CommonProps = {
};
type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
export const Button: React.FunctionComponent<ButtonProps> = props => {
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const theme = useContext(ThemeContext);
const { size, variant, icon, children, className, styles: stylesProp, ...buttonProps } = props;
// Default this to 'button', otherwise html defaults to 'submit' which then submits any form it is in.
buttonProps.type = buttonProps.type || 'button';
const styles: ButtonStyles =
stylesProp ||
getButtonStyles({
@ -32,14 +33,14 @@ export const Button: React.FunctionComponent<ButtonProps> = props => {
variant: variant || 'primary',
});
const buttonClassName = cx(styles.button, icon && styles.buttonWithIcon, icon && !children && styles.iconButton);
return (
<button className={cx(styles.button, className)} {...buttonProps}>
<ButtonContent iconClassName={styles.icon} className={styles.iconWrap} icon={icon}>
{children}
</ButtonContent>
<button className={buttonClassName} {...buttonProps} ref={ref}>
<ButtonContent icon={icon}>{children}</ButtonContent>
</button>
);
};
});
Button.displayName = 'Button';
type LinkButtonProps = CommonProps &
@ -48,7 +49,8 @@ type LinkButtonProps = CommonProps &
// disabled.
disabled?: boolean;
};
export const LinkButton: React.FunctionComponent<LinkButtonProps> = props => {
export const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>((props, ref) => {
const theme = useContext(ThemeContext);
const { size, variant, icon, children, className, styles: stylesProp, ...anchorProps } = props;
const styles: ButtonStyles =
@ -59,12 +61,11 @@ export const LinkButton: React.FunctionComponent<LinkButtonProps> = props => {
variant: variant || 'primary',
});
const buttonClassName = cx(styles.button, icon && styles.buttonWithIcon, icon && !children && styles.iconButton);
return (
<a className={cx(styles.button, className)} {...anchorProps}>
<ButtonContent iconClassName={styles.icon} className={styles.iconWrap} icon={icon}>
{children}
</ButtonContent>
<a className={buttonClassName} {...anchorProps} ref={ref}>
<ButtonContent icon={icon}>{children}</ButtonContent>
</a>
);
};
});
LinkButton.displayName = 'LinkButton';