59 lines
1.2 KiB
TypeScript
59 lines
1.2 KiB
TypeScript
import type { IconName } from '../../types/icons';
|
|
import type { OwnProps as ButtonProps } from './Button';
|
|
|
|
import buildClassName from '../../util/buildClassName';
|
|
|
|
import useOldLang from '../../hooks/useOldLang';
|
|
|
|
import IconWithSpinner from '../common/IconWithSpinner';
|
|
import Button from './Button';
|
|
|
|
import './FloatingActionButton.scss';
|
|
|
|
type OwnProps = {
|
|
isShown: boolean;
|
|
iconName: IconName;
|
|
className?: string;
|
|
color?: ButtonProps['color'];
|
|
ariaLabel?: ButtonProps['ariaLabel'];
|
|
disabled?: boolean;
|
|
isLoading?: boolean;
|
|
onClick: () => void;
|
|
};
|
|
|
|
const FloatingActionButton = ({
|
|
isShown,
|
|
iconName,
|
|
className,
|
|
color = 'primary',
|
|
ariaLabel,
|
|
disabled,
|
|
isLoading,
|
|
onClick,
|
|
}: OwnProps) => {
|
|
const lang = useOldLang();
|
|
|
|
const buttonClassName = buildClassName(
|
|
'FloatingActionButton',
|
|
isShown && 'revealed',
|
|
className,
|
|
);
|
|
|
|
return (
|
|
<Button
|
|
className={buttonClassName}
|
|
color={color}
|
|
round
|
|
disabled={disabled}
|
|
onClick={isShown && !disabled ? onClick : undefined}
|
|
ariaLabel={ariaLabel}
|
|
tabIndex={-1}
|
|
isRtl={lang.isRtl}
|
|
>
|
|
<IconWithSpinner iconName={iconName} isLoading={isLoading} />
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default FloatingActionButton;
|