semi-design/packages/semi-ui/checkbox/_story/checkbox.stories.js

import React, {useCallback, useMemo, useState} from 'react';
import {storiesOf} from '@storybook/react'; // import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import Button from '../../button';
import Popover from '../../popover';
import Checkbox from '../index';
import CheckboxGroup from '../checkboxGroup';
import {Col, Input, Row} from '../../index';
import {IconClose} from '@douyinfe/semi-icons';

const stories = storiesOf('Checkbox', module); // stories.addDecorator(withKnobs);;

stories.add('checkbox default', () => {
    return (
        <div>
            <Checkbox onChange={e => console.log(e)} value={1} onChange={v => console.log(v)}>
                hello
            </Checkbox>
            <br/>
            <Checkbox checked>这是一个受控的checked=true的checkbox,没有配onChange</Checkbox>
            <br/>
            <Checkbox defaultChecked>这是一个不受控的defaultChecked=true的checkbox</Checkbox>
            <br/>
            <Checkbox disabled>这是一个受控的disabled=true的checkbox</Checkbox>
            <br/>
            <Checkbox checked disabled>
                既checked又disabled
            </Checkbox>
            <br/>
            <Checkbox indeterminate>indeterminate</Checkbox>
        </div>
    );
});
stories.add('checkbox without text', () => {
    return (
        <div>
            <Checkbox onChange={e => console.log(e)}/>
        </div>
    );
});

class CheckboxControl extends React.Component {
    state = {
        checked: true,
        disabled: false,
    };
    toggleChecked = () => {
        this.setState({
            checked: !this.state.checked,
        });
    };
    toggleDisable = () => {
        this.setState({
            disabled: !this.state.disabled,
        });
    };
    onChange = e => {
        console.log('checked = ', e.target.checked);
        this.setState({
            checked: e.target.checked,
        });
    };

    render() {
        const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
        return (
            <div>
                <p
                    style={{
                        marginBottom: '20px',
                    }}
                >
                    <Checkbox checked={this.state.checked} disabled={this.state.disabled} onChange={this.onChange}>
                        {label}
                    </Checkbox>
                </p>
                <p>
                    <Button type="primary" size="small" onClick={this.toggleChecked}>
                        {!this.state.checked ? 'Check' : 'Uncheck'}
                    </Button>
                    <Button
                        style={{
                            marginLeft: '10px',
                        }}
                        type="primary"
                        size="small"
                        onClick={this.toggleDisable}
                    >
                        {!this.state.disabled ? 'Disable' : 'Enable'}
                    </Button>
                </p>
            </div>
        );
    }
}

stories.add('checkbox controlled disabled & checked', () => <CheckboxControl/>);

class GroupDemo extends React.Component {
    constructor() {
        super();
        this.state = {
            value: [],
        };
        this.onChange = this.onChange.bind(this);
    }

    onChange(value) {
        console.log(value);
        this.setState({
            value: value,
        });
    }

    render() {
        let {value} = this.state;
        return (
            <>
                水平Group
                <Checkbox.Group direction="horizontal" onChange={v => console.log(v)}>
                    <Checkbox value="dy">抖音</Checkbox>
                    <Checkbox value="hotsoon">火山</Checkbox>
                    <Checkbox value="toutiao">今日头条</Checkbox>
                    <Checkbox value="xigua">西瓜视频</Checkbox>
                </Checkbox.Group>
                <br/>
                <br/>
                垂直Group
                <Checkbox.Group onChange={v => console.log(v)}>
                    <Checkbox value="dy">抖音</Checkbox>
                    <Checkbox value="hotsoon">火山</Checkbox>
                    <Checkbox value="toutiao">今日头条</Checkbox>
                    <Checkbox value="xigua">西瓜视频</Checkbox>
                </Checkbox.Group>
                <br/>
                <br/>
                默认Group
                <Checkbox.Group direction="horizontal" defaultValue={['xigua']} onChange={console.log}>
                    <Checkbox value="dy">抖音</Checkbox>
                    <Checkbox value="hotsoon">火山</Checkbox>
                    <Checkbox value="toutiao">今日头条</Checkbox>
                    <Checkbox value="xigua">西瓜视频</Checkbox>
                </Checkbox.Group>
                <br/>
                <br/>
                受控Group
                <Checkbox.Group direction="horizontal" value={value} onChange={console.log}>
                    <Checkbox value="dy">抖音</Checkbox>
                    <Checkbox value="hotsoon">火山</Checkbox>
                    <Checkbox value="toutiao">今日头条</Checkbox>
                    <Checkbox value="xigua">西瓜视频</Checkbox>
                </Checkbox.Group>
                <br/>
                <br/>
                受控Group+onChange
                <Checkbox.Group direction="horizontal" value={value} onChange={this.onChange}>
                    <Checkbox value="dy">抖音</Checkbox>
                    <Checkbox value="hotsoon">火山</Checkbox>
                    <Checkbox value="toutiao">今日头条</Checkbox>
                    <Checkbox value="xigua">西瓜视频</Checkbox>
                </Checkbox.Group>
                <br/>
                <br/>
                disabled
                <Checkbox.Group disabled>
                    <Checkbox value="dy">抖音</Checkbox>
                    <Checkbox value="hotsoon">火山</Checkbox>
                    <Checkbox value="toutiao">今日头条</Checkbox>
                    <Checkbox value="xigua">西瓜视频</Checkbox>
                </Checkbox.Group>
            </>
        );
    }
}

stories.add('checkbox group', () => <GroupDemo/>);
stories.add('checkbox group with options ', () => {
    function onChange(checkedValues) {
        console.log('checked = ', checkedValues);
    }

    const plainOptions = ['green', 'red', 'pink'];
    const options = [
        {
            label: 'green',
            value: 'green',
        },
        {
            label: 'red',
            value: 'red',
        },
        {
            label: 'pink',
            value: 'pink',
            disabled: true,
        },
    ];
    const optionsWithDisabled = [
        {
            label: 'green',
            value: 'green',
        },
        {
            label: 'red',
            value: 'red',
        },
        {
            label: 'pink',
            value: 'pink',
            disabled: false,
        },
    ];
    return (
        <div>
            default
            <CheckboxGroup options={plainOptions} defaultValue={['green']} onChange={onChange}/>
            <br/>
            <br/>
            受控
            <CheckboxGroup options={plainOptions} value={['green']} onChange={onChange}/>
            <br/>
            最后一个disabled
            <br/>
            <CheckboxGroup options={options} defaultValue={['red']} onChange={onChange}/>
            <br/>
            全体disabled， 优先父级disabled，次选子级disabled
            <br/>
            <CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['green']} onChange={onChange}/>
        </div>
    );
});
stories.add('checkboxGroup-直接后代是其他类型Node', () => {
    return (
        <CheckboxGroup>
            <div className="test">
                <Checkbox value="green" extra="苹果">
                    green
                </Checkbox>
                <Checkbox value="red" extra="梨">
                    red
                </Checkbox>
                <Checkbox value="pink" extra="橙子">
                    pink
                </Checkbox>
            </div>
        </CheckboxGroup>
    );
});
stories.add('checkbox 主文本+副文本', () => {
    let options = [
        {
            label: 'green',
            value: 'green',
            extra: '苹果',
        },
        {
            label: 'red',
            value: 'red',
            extra: '梨',
        },
        {
            label: 'pink',
            value: 'pink',
            disabled: true,
            extra: '橙子',
        },
    ];
    return (
        <div>
            checkbox
            <Checkbox
                onChange={e => console.log(e)}
                extra="我是副文本，这是辅助的文本，辅助文本会更长一些，甚至还可能换行"
            >
                我是主文本
            </Checkbox>
            <Checkbox
                style={{
                    width: 200,
                }}
                onChange={e => console.log(e)}
                extra="我是副文本，这是辅助的文本，辅助文本会更长一些，甚至还可能换行"
            >
                我是主文本
            </Checkbox>
            <br/>
            <br/>
            checkboxGroup
            <CheckboxGroup>
                <Checkbox value="green" extra="苹果">
                    green
                </Checkbox>
                <Checkbox value="red" extra="梨">
                    red
                </Checkbox>
                <Checkbox value="pink" extra="橙子">
                    pink
                </Checkbox>
            </CheckboxGroup>
            <br/>
            <br/>
            checkboxGroup with options
            <CheckboxGroup options={options}></CheckboxGroup>
        </div>
    );
});
stories.add('checkbox + grid', () => {
    return (
        <Checkbox.Group
            style={{
                width: '100%',
            }}
            onChange={v => console.log(v)}
        >
            <Row>
                <Col span={8}>
                    <Checkbox value="A">
                        无限长的一串字The Storybook webapp UI can be customised with this addon. It can be used to
                        change the header, show/hide various UI elements and to enable full-screen mode by default.
                    </Checkbox>
                </Col>
                <Col span={8}>
                    <Checkbox value="B">B</Checkbox>
                </Col>
                <Col span={8}>
                    <Checkbox value="C">C</Checkbox>
                </Col>
                <Col span={8}>
                    <Checkbox value="D">D</Checkbox>
                </Col>
                <Col span={8}>
                    <Checkbox value="E">E</Checkbox>
                </Col>
            </Row>
        </Checkbox.Group>
    );
});


const IndeterminateDemo = () => {
    const options = ['yellow', 'green', 'red'];
    const defaultCheckedColors = ['yellow', 'red'];

    const [checkedList, setCheckList] = useState(defaultCheckedColors);
    const [indeterminate, setIndeterminate] = useState(true);
    const [checkAll, setCheckAll] = useState(false);

    const onCheckListChange = checkedList => {
        setCheckList([...checkedList]);
        setIndeterminate(!!checkedList.length && checkedList.length < options.length);
        setCheckAll(checkedList.length === options.length)
    };

    const onCheckAllChange = e => {
        setCheckList([...(e.target.checked ? options : [])]);
        setIndeterminate(false);
        setCheckAll(e.target.checked)
    };


    return
    return (
        <div>
            <div
                style={{
                    borderBottom: '1px solid #E9E9E9',
                }}
            >
                <Checkbox
                    indeterminate={indeterminate}
                    onChange={onCheckAllChange}
                    checked={state.checkAll}
                >
                    Check all
                </Checkbox>
            </div>
            <br/>
            <CheckboxGroup options={options} value={checkedList} onChange={onCheckListChange}/>
        </div>
    );
}


stories.add('checkbox inderterminate联动', () => <IndeterminateDemo/>);
stories.add('checkbox render in div', () => (
    <>
        <div
            onClick={(...args) => {
                console.log('clicked checkbox outer: ', ...args);
            }}
        >
            <Checkbox
                onChange={(...args) => {
                    console.log('clicked checkbox: ', ...args);
                }}
            />
        </div>
    </>
));
stories.add(`checkbox in popover`, () => (
    <div>
        <Popover
            content={
                <div>
                    <Checkbox>选项一</Checkbox>
                    <Checkbox defaultChecked>选项二</Checkbox>
                    <Checkbox>选项三</Checkbox>
                </div>
            }
        >
            <Button>click me</Button>
        </Popover>
    </div>
));

const SwitchCheckedFromTrue2Undefined = () => {
    const [props, setProps] = useState();
    const [flag, setFlag] = useState(0);

    const change = () => {
        if (flag === 0) {
            setFlag(1);
            setProps({checked: true});
        } else {
            setFlag(0);
            setProps({checked: false});
        }
    };

    return <>
        <Checkbox {...props} >123</Checkbox>
        <Button onClick={() => change()}>switch</Button>
    </>
};

stories.add('checkbox switch checked: true => undefined', () => <SwitchCheckedFromTrue2Undefined/>);

const TransformSelect = props => {
    const {onChange, value, options = [], defaultValue = [], placeholder} = props;
    const [currentValue, setCurrentValue] = useState([]);
    const [inputValue, setInputValue] = useState(''); // 变化

    const onSelectChange = useCallback(() => {
        setCurrentValue(currentValue);
        onChange && onChange(currentValue);
    }, []); // 选择某一个

    const removeValue = useCallback(
        currentIndex => {
            currentValue.splice(currentIndex, 1);
            onSelectChange([...currentValue]);
        },
        [currentValue]
    ); // 选择所有

    const selectAllValue = useCallback(() => {
        const value = options.map(option => option.value);
        onSelectChange(value);
    }, [options]);
    const viewsOptions = useMemo(() => {
        if (inputValue) {
            const newOptions = options.filter(option => option.label.indexOf(inputValue) !== -1);
            return newOptions;
        }

        return options;
    }, [options, inputValue]);
    return (
        <div>
            <div>
                <div>
                    <Input
                        value={inputValue}
                        prefix="search"
                        clearable
                        onChange={value => setInputValue(value)}
                        placeholder={placeholder}
                    />
                </div>
                <div>
                    <span>{`共 ${options.length} 项`}</span>
                    <Button type="tertiary" size="small" theme="borderless" onClick={() => selectAllValue()}>
                        全选
                    </Button>
                </div>
                <div>
                    <CheckboxGroup
                        options={viewsOptions}
                        value={currentValue}
                        onChange={onSelectChange}
                        direction="vertical"
                    />
                </div>
            </div>
            <div>
                <div>
                    <span>{`已选 ${currentValue.length} 项`}</span>
                    <Button type="tertiary" size="small" theme="borderless" onClick={() => onSelectChange([])}>
                        清空
                    </Button>
                </div>
                <div>
                    {currentValue.length > 0 ? (
                        currentValue.map((value, idx) => {
                            // 不存在不需要展示
                            const option = options.find(option => option.value === value);
                            return (
                                <div key={option.key ? option.key : idx}>
                                    <span>{option.label}</span>
                                    <span onClick={() => removeValue(idx)}>
                                        <IconClose size="small"/>
                                    </span>
                                </div>
                            );
                        })
                    ) : (
                        <div>暂无内容，可从左侧勾选</div>
                    )}
                </div>
            </div>
        </div>
    );
};

stories.add(`bugDemo`, () => <TransformSelect/>);

stories.add(`checkboxGroup card style`, () => (
    <>
        <div>常见情况</div>
        <CheckboxGroup type='card' direction='horizontal' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>radio disabled</div>
        <CheckboxGroup type='card' direction='horizontal' defaultValue={['1']}>
            <Checkbox value='1' disabled extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>checkboxGroup disabled</div>
        <CheckboxGroup type='card' direction='horizontal' disabled defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>文字很长，并且没有设置宽度，因此换行显示</div>
        <CheckboxGroup type='card' direction='horizontal' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>设置了width=180</div>
        <CheckboxGroup type='card' direction='horizontal' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 180}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 180}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 180}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>没有extra，width=180</div>
        <CheckboxGroup type='card' direction='horizontal' defaultValue={['1']}>
            <Checkbox value='1' style={{width: 180}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' style={{width: 180}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' style={{width: 180}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>没有标题，width=380</div>
        <CheckboxGroup type='card' direction='horizontal' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <hr/>
        <div>下面是垂直的情况：</div>
        <div>常见情况</div>
        <CheckboxGroup direction='vertical' type='card' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>没有设置宽度</div>
        <CheckboxGroup direction='vertical' type='card' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>设置了width=380</div>
        <CheckboxGroup direction='vertical' type='card' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
    </>
));

stories.add(`checkboxGroup pureCard style`, () => (
    <>
        <div>常见情况</div>
        <CheckboxGroup type='pureCard' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>radio disabled</div>
        <CheckboxGroup type='pureCard' defaultValue={['1']}>
            <Checkbox value='1' disabled extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>checkboxGroup disabled</div>
        <CheckboxGroup type='pureCard' disabled defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>文字很长，并且没有设置宽度，因此换行显示</div>
        <CheckboxGroup type='pureCard' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>设置了width=180</div>
        <CheckboxGroup type='pureCard' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 180}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 180}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 180}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>没有extra，width=180</div>
        <CheckboxGroup type='pureCard' defaultValue={['1']}>
            <Checkbox value='1' style={{width: 180}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' style={{width: 180}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' style={{width: 180}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>没有标题，width=380</div>
        <CheckboxGroup type='pureCard' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <hr/>
        <div>下面是垂直的情况：</div>
        <div>常见情况</div>
        <CheckboxGroup direction='vertical' type='pureCard' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design' style={{width: 280}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>没有设置宽度</div>
        <CheckboxGroup direction='vertical' type='pureCard' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统'>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
        <br/>
        <br/>
        <div>设置了width=380</div>
        <CheckboxGroup direction='vertical' type='pureCard' defaultValue={['1']}>
            <Checkbox value='1' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
                多选框标题
            </Checkbox>
            <Checkbox value='2' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
                多选框标题
            </Checkbox>
            <Checkbox value='3' extra='Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统' style={{width: 380}}>
                多选框标题
            </Checkbox>
        </CheckboxGroup>
    </>
));