60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { forwardRef } from 'react';
|
|
import { Icon } from '../../components';
|
|
import { FABProps } from './fab.types';
|
|
import { bool, oneOf, string } from 'prop-types';
|
|
import { ButtonLayout } from '../button-layout/button-layout';
|
|
|
|
/**
|
|
* FABs component
|
|
** description
|
|
*/
|
|
|
|
const sizes = {
|
|
small: 24,
|
|
default: 24,
|
|
large: 36,
|
|
extended: 24,
|
|
};
|
|
|
|
export const FAB = forwardRef<HTMLButtonElement, FABProps>(
|
|
(
|
|
{
|
|
icon = 'edit',
|
|
className = '',
|
|
size = 'default',
|
|
elevated = false,
|
|
disabled = false,
|
|
variant = 'surface',
|
|
centralRipple = false,
|
|
...props
|
|
},
|
|
ref,
|
|
) => (
|
|
<ButtonLayout
|
|
{...props}
|
|
centralRipple={centralRipple}
|
|
className={`m3-fab m3-${size}-fab${!elevated ? ' without-elevation' : ''} ${variant} ${className}`}
|
|
disabled={disabled}
|
|
ref={ref}
|
|
>
|
|
<Icon iconSize={sizes[size]} svgSize={sizes[size]}>
|
|
{icon}
|
|
</Icon>
|
|
{size === 'extended' ? (
|
|
<span className={'label-large'}>{props.children}</span>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</ButtonLayout>
|
|
),
|
|
);
|
|
|
|
FAB.propTypes = {
|
|
icon: string,
|
|
elevated: bool,
|
|
size: oneOf(['small', 'default', 'large', 'extended']),
|
|
variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
|
|
};
|