File size: 1,705 Bytes
41a71fd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import { ButtonHTMLAttributes, FC, ReactNode, useEffect, useRef } from 'react';
import { classNames } from '@/shared/lib/classNames/classNames';
import ButtonSpinner from '@/shared/assets/icons/buttonSpinner.svg?react';
import cls from './Button.module.scss';
export enum ButtonTheme {
PRIMARY = 'primary',
NAVIGATION = 'navigation',
}
export enum ButtonSize {
XL = 'xl',
L = 'l',
M = 'm',
S = 's',
NULL = 'null',
}
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
theme?: ButtonTheme;
size?: ButtonSize;
reverse?: boolean;
showSpinner?: boolean;
className?: string;
icon?: ReactNode;
width?: string;
}
export const Button: FC<ButtonProps> = (props) => {
const { className, children, reverse, theme = '', icon, showSpinner, width = 'auto', size = '', ...otherProps } = props;
const $button = useRef<HTMLButtonElement | null>(null);
useEffect(() => {
if ($button.current) $button.current.style.setProperty('--custom-width', width);
}, []);
const mods = {
[cls.reverse]: reverse,
};
return (
<button
type="button"
className={classNames(cls.Button, mods, [className, cls[theme], cls[size]])}
ref={$button}
{...otherProps}
>
{showSpinner && (
<span className={classNames(cls.spinnerBox, {}, [])}>
<ButtonSpinner className={cls.spinner} />
</span>
)}
{icon && <span className={classNames(cls.icon, {}, [])}>{icon}</span>}
{children && <span className={cls.text}>{children}</span>}
</button>
);
};
|