53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { forwardRef } from 'react';
|
||
|
|
import { Icon } from '../material-you-components';
|
||
|
|
import { IRippleProps } from '../ripple/ripple.types';
|
||
|
|
import { FABMainProps } from '../button-layout/button.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, FABMainProps & IRippleProps>(
|
||
|
|
(
|
||
|
|
{
|
||
|
|
variant,
|
||
|
|
disabled,
|
||
|
|
icon,
|
||
|
|
centralRipple = false,
|
||
|
|
size = 'default',
|
||
|
|
elevated,
|
||
|
|
...props
|
||
|
|
},
|
||
|
|
ref,
|
||
|
|
) => (
|
||
|
|
<ButtonLayout
|
||
|
|
{...props}
|
||
|
|
centralRipple={centralRipple}
|
||
|
|
className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
|
||
|
|
disabled={disabled}
|
||
|
|
ref={ref}
|
||
|
|
variant={variant ? variant : 'surface'}
|
||
|
|
>
|
||
|
|
<Icon iconSize={sizes[size]} svgSize={sizes[size]}>
|
||
|
|
{icon}
|
||
|
|
</Icon>
|
||
|
|
{size === 'extended' ? (
|
||
|
|
<span className={'label-large'}>{props.children}</span>
|
||
|
|
) : (
|
||
|
|
<></>
|
||
|
|
)}
|
||
|
|
</ButtonLayout>
|
||
|
|
),
|
||
|
|
);
|