Commit 013179ee by Łukasz Siatka Committed by Lukas Siatka

Explore: fixes explore responsive button ref

parent 1cc1e545
......@@ -5,7 +5,7 @@ export enum IconSide {
right = 'right',
}
type Props = {
interface Props extends React.HTMLAttributes<HTMLDivElement> {
splitted: boolean;
title: string;
onClick: () => void;
......@@ -13,29 +13,41 @@ type Props = {
iconClassName?: string;
iconSide?: IconSide;
disabled?: boolean;
};
}
function formatBtnTitle(title: string, iconSide?: string): string {
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 = {
iconSide: IconSide.left,
};
props = { ...defaultProps, ...props };
const { title, onClick, buttonClassName, iconClassName, splitted, iconSide, disabled } = props;
const {
title,
onClick,
buttonClassName,
iconClassName,
splitted,
iconSide,
disabled,
onMouseEnter,
onMouseLeave,
} = props;
return (
<button
className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`}
onClick={onClick}
disabled={disabled || false}
ref={ref}
>
{iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null}
<span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
{iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null}
</button>
<div ref={ref} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
<button
className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`}
onClick={onClick}
disabled={disabled || false}
>
{iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null}
<span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
{iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null}
</button>
</div>
);
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment