IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 16:45:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: fixes explore responsive button ref

Browse Source
This commit is contained in:
Łukasz Siatka 2019-10-17 01:34:15 +02:00 committed by Lukas Siatka
parent 1cc1e545a0
commit 013179eebc
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
public/app/features/explore/ResponsiveButton.tsx
View File

@ -5,7 +5,7 @@ export enum IconSide {
right = 'right', right = 'right',
} }
type Props = { interface Props extends React.HTMLAttributes<HTMLDivElement> {
splitted: boolean; splitted: boolean;
title: string; title: string;
onClick: () => void; onClick: () => void;
@ -13,29 +13,41 @@ type Props = {
iconClassName?: string; iconClassName?: string;
iconSide?: IconSide; iconSide?: IconSide;
disabled?: boolean; disabled?: boolean;
}; }
function formatBtnTitle(title: string, iconSide?: string): string { function formatBtnTitle(title: string, iconSide?: string): string {
return iconSide === IconSide.left ? '\xA0' + title : iconSide === IconSide.right ? title + '\xA0' : title; return iconSide === IconSide.left ? '\xA0' + title : iconSide === IconSide.right ? title + '\xA0' : title;
} }
export const ResponsiveButton = forwardRef<HTMLButtonElement, Props>((props, ref) => { export const ResponsiveButton = forwardRef<HTMLDivElement, Props>((props, ref) => {
const defaultProps = { const defaultProps = {
iconSide: IconSide.left, iconSide: IconSide.left,
}; };
props = { ...defaultProps, ...props }; props = { ...defaultProps, ...props };
const { title, onClick, buttonClassName, iconClassName, splitted, iconSide, disabled } = props; const {
title,
onClick,
buttonClassName,
iconClassName,
splitted,
iconSide,
disabled,
onMouseEnter,
onMouseLeave,
} = props;
return ( return (
<button <div ref={ref} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`} <button
onClick={onClick} className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`}
disabled={disabled || false} onClick={onClick}
ref={ref} disabled={disabled || false}
> >
{iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null} {iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null}
<span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span> <span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
{iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null} {iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null}
</button> </button>
</div>
); );
}); });