44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { Button } from 'antd';
|
|
import React from 'react';
|
|
|
|
interface CheckButtonsProps {
|
|
options: Global.BaseOption<string | number>[];
|
|
onChange: (value: string | number) => void;
|
|
cancelable?: boolean;
|
|
size?: 'small' | 'middle' | 'large';
|
|
type?: 'text' | 'primary' | 'default' | 'dashed' | 'link' | undefined;
|
|
}
|
|
|
|
const CheckButtons: React.FC<CheckButtonsProps> = (props) => {
|
|
const [type, setType] = React.useState(props.type || 'text');
|
|
const [active, setActive] = React.useState<string | number | null>(null);
|
|
const handleChange = (value: string | number) => {
|
|
props.onChange(value);
|
|
if (props.cancelable && active === value) {
|
|
setActive(null);
|
|
} else {
|
|
setActive(value);
|
|
}
|
|
};
|
|
return (
|
|
<div className="flex-center gap-6">
|
|
{props.options?.map?.((option, index) => {
|
|
return (
|
|
<Button
|
|
size={props.size}
|
|
key={option.value}
|
|
onClick={() => handleChange(option.value)}
|
|
variant="filled"
|
|
color={active === option.value ? 'default' : undefined}
|
|
type={type}
|
|
>
|
|
{option.label}
|
|
</Button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(CheckButtons);
|