46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { Checkbox } from '@taroify/core';
|
|
import { CheckboxProps, CheckboxGroupProps } from '@taroify/core/checkbox';
|
|
import CheckboxGroupContext from '@taroify/core/checkbox/checkbox-group.context';
|
|
import { useContext } from 'react';
|
|
|
|
import './index.less';
|
|
|
|
interface IProps extends CheckboxProps {
|
|
text: string;
|
|
}
|
|
|
|
interface IGroupProps extends CheckboxGroupProps {
|
|
value: BL.Anything[];
|
|
}
|
|
|
|
const PREFIX = 'profile-checkbox';
|
|
|
|
export function BlCheckboxGroup({ value, onChange, children }: IGroupProps) {
|
|
return (
|
|
<Checkbox.Group className={`${PREFIX}__group`} value={value} onChange={onChange}>
|
|
{children}
|
|
</Checkbox.Group>
|
|
);
|
|
}
|
|
|
|
export function BlCheckbox(props: IProps) {
|
|
const { name, text } = props;
|
|
const { value: names = [], onChange: onNamesChange } = useContext(CheckboxGroupContext);
|
|
const checked = names.includes(name);
|
|
const handleClick = () => {
|
|
if (!name) return;
|
|
|
|
if (checked) {
|
|
onNamesChange?.(names.filter(aName => aName !== name));
|
|
} else {
|
|
onNamesChange?.([...names, name]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Checkbox className={`${PREFIX}__item ${checked ? 'active' : ''}`} name={name} icon={null} onClick={handleClick}>
|
|
{text}
|
|
</Checkbox>
|
|
);
|
|
}
|