snapshot of https://github.com/dream-num/univer.git (dev, 2026-09-16; blobs > 131072B omitted)

packages/design/src/components/checkbox-group/CheckboxGroup.stories.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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 { Meta } from '@storybook/react';
+import { useState } from 'react';
+import { Checkbox } from '../checkbox/Checkbox';
+import { CheckboxGroup } from './CheckboxGroup';
+
+const meta: Meta<typeof CheckboxGroup> = {
+    title: 'Components / CheckboxGroup',
+    component: CheckboxGroup,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Playground = {
+    render() {
+        const [value, setValue] = useState<string[]>([]);
+
+        function handleChange(value: Array<string | number | boolean>) {
+            setValue(value as string[]);
+        }
+
+        return (
+            <CheckboxGroup value={value} onChange={handleChange}>
+                <Checkbox value="test">test</Checkbox>
+                <Checkbox value="test1">test1</Checkbox>
+            </CheckboxGroup>
+        );
+    },
+};
+
+export const CheckboxGroupVertical = {
+    render() {
+        const [value, setValue] = useState<string[]>([]);
+
+        function handleChange(value: Array<string | number | boolean>) {
+            setValue(value as string[]);
+        }
+
+        return (
+            <CheckboxGroup value={value} onChange={handleChange} direction="vertical">
+                <Checkbox value="test">test</Checkbox>
+                <Checkbox value="test1">test1</Checkbox>
+            </CheckboxGroup>
+        );
+    },
+};

packages/design/src/components/checkbox-group/CheckboxGroup.tsx

@@ -0,0 +1,93 @@
+/**
+ * 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>
+    );
+}

packages/design/src/components/checkbox-group/__tests__/index.spec.tsx

@@ -0,0 +1,68 @@
+/**
+ * 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 { cleanup, fireEvent, render } from '@testing-library/react';
+import { useState } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { Checkbox } from '../../checkbox/Checkbox';
+import { CheckboxGroup } from '../CheckboxGroup';
+
+afterEach(cleanup);
+
+describe('CheckboxGroup', () => {
+    let active = ['0'];
+    const group = (
+        <CheckboxGroup
+            value={active}
+            onChange={(value) => {
+                active = value as string[];
+            }}
+        >
+            <Checkbox value="0">0</Checkbox>
+            <Checkbox value="1">1</Checkbox>
+        </CheckboxGroup>
+    );
+
+    it('click Checkbox', async () => {
+        render(group);
+
+        let result = ['0'];
+        function Demo() {
+            const [active, setActive] = useState(result);
+
+            return (
+                <CheckboxGroup
+                    value={active}
+                    onChange={(value) => {
+                        setActive(value as string[]);
+                        result = value as string[];
+                    }}
+                >
+                    <Checkbox value="0">x</Checkbox>
+                    <Checkbox value="1">y</Checkbox>
+                </CheckboxGroup>
+            );
+        }
+
+        const { getByText } = render(<Demo />);
+
+        fireEvent.click(getByText('y'));
+        fireEvent.click(getByText('y'));
+        fireEvent.click(getByText('y'));
+
+        expect(result).toEqual(['0', '1']);
+    });
+});