bcf6ef63ad
Some checks failed
📦 Build / build (push) Has been cancelled
🧪 CI Test / test shard (1/4) (push) Has been cancelled
🧪 CI Test / test shard (2/4) (push) Has been cancelled
🧪 CI Test / test shard (3/4) (push) Has been cancelled
🧪 CI Test / test shard (4/4) (push) Has been cancelled
🧪 CI Test / test (push) Has been cancelled
🧪 CI Test / eslint (push) Has been cancelled
🧪 CI Test / typecheck (push) Has been cancelled
🔫 Sync to Pro / dispatch-sync (push) Has been cancelled
🔮 Sync Mirror / sync (push) Has been cancelled
94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
/**
|
|
* Copyright 2023-present DreamNum Co., Ltd.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import type { CSSProperties, ReactNode } from 'react';
|
|
import type { ICheckboxProps } from '../checkbox/Checkbox';
|
|
import { Children, cloneElement, isValidElement } from 'react';
|
|
import { clsx } from '../../helper/clsx';
|
|
|
|
export interface ICheckboxGroupProps {
|
|
children: ReactNode[];
|
|
|
|
/**
|
|
* The class name of the checkbox group
|
|
*/
|
|
className?: string;
|
|
|
|
/**
|
|
* The style of the checkbox group
|
|
*/
|
|
style?: CSSProperties;
|
|
|
|
/**
|
|
* Define which checkbox is selected
|
|
*/
|
|
value: Array<string | number | boolean>;
|
|
|
|
/**
|
|
* Whether the checkbox is disabled
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Direction of the radio group
|
|
* @default 'horizontal'
|
|
*/
|
|
direction?: 'horizontal' | 'vertical';
|
|
|
|
/**
|
|
* The callback function triggered when switching options
|
|
*/
|
|
onChange: (value: Array<string | number | boolean>) => void;
|
|
}
|
|
|
|
/**
|
|
* CheckboxGroup Component
|
|
*/
|
|
export function CheckboxGroup(props: ICheckboxGroupProps) {
|
|
const { children, className, style, value, disabled, direction = 'horizontal', onChange } = props;
|
|
|
|
const handleChange = (item: string | number | boolean) => {
|
|
if (value.includes(item)) {
|
|
onChange(value.filter((i) => i !== item));
|
|
} else {
|
|
onChange([...value, item]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={clsx('univer-flex univer-gap-2', {
|
|
'univer-flex-col': direction === 'vertical',
|
|
}, className)}
|
|
style={style}
|
|
>
|
|
{Children.map(children, (child, index) => {
|
|
if (isValidElement<ICheckboxProps>(child)) {
|
|
return cloneElement(child, {
|
|
key: index,
|
|
children: child.props.children,
|
|
checked: child.props.value ? value.includes(child.props.value) : false,
|
|
disabled: disabled ?? child.props.disabled,
|
|
onChange: handleChange,
|
|
});
|
|
}
|
|
return child;
|
|
})}
|
|
</div>
|
|
);
|
|
}
|