TelegramPWA/src/components/ui/FloatingActionButton.tsx
Alexander Zinchuk 3afcde3217 Initial commit
2021-04-09 14:11:51 +03:00

50 lines
977 B
TypeScript

import React, { FC } from '../../lib/teact/teact';
import buildClassName from '../../util/buildClassName';
import Button, { OwnProps as ButtonProps } from './Button';
import './FloatingActionButton.scss';
type OwnProps = {
isShown: boolean;
className?: string;
color?: ButtonProps['color'];
ariaLabel?: ButtonProps['ariaLabel'];
disabled?: boolean;
onClick: () => void;
children: any;
};
const FloatingActionButton: FC<OwnProps> = ({
isShown,
className,
color = 'primary',
ariaLabel,
disabled,
onClick,
children,
}) => {
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}
>
{children}
</Button>
);
};
export default FloatingActionButton;