36 lines
1003 B
TypeScript
36 lines
1003 B
TypeScript
import { FC, useMemo } from 'react';
|
|
import { Flex, FlexProps } from './Flex';
|
|
import { ButtonSizeType, ColorVariantType } from './types';
|
|
|
|
export interface ButtonProps extends FlexProps
|
|
{
|
|
variant?: ColorVariantType;
|
|
size?: ButtonSizeType;
|
|
active?: boolean;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const Button: FC<ButtonProps> = props =>
|
|
{
|
|
const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], ...rest } = props;
|
|
|
|
const getClassNames = useMemo(() =>
|
|
{
|
|
const newClassNames: string[] = [ 'btn' ];
|
|
|
|
if(variant) newClassNames.push('btn-' + variant);
|
|
|
|
if(size) newClassNames.push('btn-' + size);
|
|
|
|
if(active) newClassNames.push('active');
|
|
|
|
if(disabled) newClassNames.push('disabled');
|
|
|
|
if(classNames.length) newClassNames.push(...classNames);
|
|
|
|
return newClassNames;
|
|
}, [ variant, size, active, disabled, classNames ]);
|
|
|
|
return <Flex center classNames={ getClassNames } { ...rest } />;
|
|
}
|