选择器

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="业务线" defaultValue="douyin" style={{ width: 120 }}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying" disabled>
                    剪映
                </Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="业务线" defaultValue="douyin" disabled style={{ width: 120 }}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="业务线" placeholder="请选择业务线" style={{ width: 120 }}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying" disabled>
                    剪映
                </Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    const list = [
        { value: 'douyin', label: '抖音', otherKey: 0 },
        { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
        { value: 'jianying', label: '剪映', otherKey: 2 },
        { value: 'toutiao', label: '今日头条', otherKey: 3 },
    ];
    return <Select aria-label="业务线" placeholder="请选择业务线" style={{ width: 180 }} optionList={list} />;
}

import { Select, Toast } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="Select 示例" multiple style={{ width: '320px' }} defaultValue={['douyin', 'ulikecam']}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="Select 示例" multiple maxTagCount={2} showRestTagsPopover restTagsPopoverProps={{ position: 'top' }} style={{ width: '320px' }} defaultValue={['douyin', 'ulikecam', 'jianying']}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>

            <br />
            <br />
            <Select aria-label="Select 示例" multiple style={{ width: '320px' }} defaultValue={['douyin']} max={2} onExceed={() => Toast.warning('最多只允许选择两项')}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="Select 示例" multiple maxTagCount={2} showRestTagsPopover restTagsPopoverProps={{ position: 'top' }} style={{ width: '220px' }} defaultValue={['xigua', 'ulikecam', 'jianying', 'douyin']} ellipsisTrigger expandRestTagsOnClick>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    return (
        <Select aria-label="地区" placeholder="" style={{ width: 180 }} filter>
            <Select.OptGroup label="Asia">
                <Select.Option value="a-1">China</Select.Option>
                <Select.Option value="a-2">Korea</Select.Option>
            </Select.OptGroup>
            <Select.OptGroup label="Europe">
                <Select.Option value="b-1">Germany</Select.Option>
                <Select.Option value="b-2">France</Select.Option>
            </Select.OptGroup>
            <Select.OptGroup label="South America">
                <Select.Option value="c-1">Peru</Select.Option>
            </Select.OptGroup>
        </Select>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    const data = [
        {
            label: 'Asia',
            children: [
                { value: 'a-1', label: 'China' },
                { value: 'a-2', label: 'Korea' },
            ],
        },
        {
            label: 'Europe',
            children: [
                { value: 'b-1', label: 'Germany' },
                { value: 'b-2', label: 'France' },
            ],
        },
        {
            label: 'South America',
            children: [{ value: 'c-1', label: 'Peru' }],
        },
    ];
    return (
        <Select aria-label="地区" placeholder="" style={{ width: 180 }} filter>
            {data.map((group, index) => (
                <Select.OptGroup label={group.label} key={`${index}-${group.label}`}>
                    {group.children.map((option, index2) => (
                        <Select.Option value={option.value} key={`${index2}-${group.label}`}>
                            {option.label}
                        </Select.Option>
                    ))}
                </Select.OptGroup>
            ))}
        </Select>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="small" placeholder="请选择业务线" style={{ width: '180px' }} size="small">
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="default" placeholder="请选择业务线" style={{ width: '180px' }}>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="large" placeholder="请选择业务线" style={{ width: '180px' }} size="large">
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="default" style={{ width: '180px' }}>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="warning" style={{ width: '180px' }} validateStatus="warning">
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="error" style={{ width: '180px' }} validateStatus="error">
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
            </Select>
        </>
    );
}

import { IconVigoLogo, IconGift } from '@fibrous/semi-icons-react';
import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="Select 示例" style={{ width: '320px' }} defaultValue="ulikecam" prefix={<IconVigoLogo />} showClear>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="Select 示例" style={{ width: '320px' }} defaultValue="ulikecam" prefix={<IconVigoLogo />} suffix={<IconGift />} showArrow={false}>
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    let innerSlotStyle = {
        backgroundColor: 'var(--color-white)',
        height: '36px',
        display: 'flex',
        alignItems: 'center',
        cursor: 'pointer',
        paddingLeft: 32,
        borderTop: '1px solid var(--semi-color-border)',
        borderRadius: '0 0 6px 6px',
        color: 'var(--semi-color-link)',
    };
    let innerSlotNode = <div style={innerSlotStyle}>点击加载更多</div>;
    let outSlotStyle = {
        backgroundColor: 'var(--semi-color-fill-0)',
        height: '36px',
        display: 'flex',
        paddingLeft: 32,
        color: 'var(--semi-color-link)',
        alignItems: 'center',
        cursor: 'pointer',
        borderTop: '1px solid var(--semi-color-border)',
        borderRadius: '0 0 6px 6px',
    };
    let outSlotNode = (
        <div style={outSlotStyle}>
            <span style={{ color: 'var(--semi-color-link)' }}>未找到应用?</span>
        </div>
    );

    return (
        <div>
            <p>outerBottomSlot:</p>
            <Select aria-label="outerBottomSlot" style={{ width: 300 }} dropdownStyle={{ width: 180 }} maxHeight={150} outerBottomSlot={outSlotNode} placeholder="自定义外侧底部slot，始终显示" defaultOpen autoAdjustOverflow={false} position="bottom">
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="duoshan">多闪</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <p style={{ marginTop: 200 }}>innerBottomSlot:</p>
            <Select aria-label="innerBottomSlot" style={{ width: 300 }} dropdownStyle={{ width: 180 }} maxHeight={150} innerBottomSlot={innerSlotNode} placeholder="自定义内侧底部slot，滚动至底部显示">
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="duoshan">多闪</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </div>
    );
}

import { useState } from 'react';
import { RadioGroup, Select } from '@fibrous/semi-ui-react';

interface Item {
    value: string;
    label: string;
}

export default function SelectDemo() {
    const list: Record<string, Item[]> = {
        component: [
            { value: 'select', label: '选择器' },
            { value: 'tabs', label: '标签' },
            { value: 'avatar', label: '头像' },
            { value: 'button', label: '按钮' },
        ],
        design: [
            { value: 'color', label: '颜色' },
            { value: 'dark', label: '暗色模式' },
            { value: 'icon', label: '图标' },
            { value: 'font', label: '字体' },
        ],
        feedback: [
            { value: 'faq', label: '常见问题' },
            { value: 'join', label: '加入用户群' },
            { value: 'hornbill', label: '犀鸟反馈问题' },
        ],
    };

    const [key, setKey] = useState('component');
    const [value, setValue] = useState<Item | undefined>({ value: 'faq', label: '常见问题' });

    const categoryWrapper = {
        padding: '8px 12px',
        borderBottom: '0.5px solid var(--semi-color-border)',
    };
    const categoryOptions = [
        { value: 'component', label: '组件' },
        { value: 'design', label: '设计' },
        { value: 'feedback', label: '反馈' },
    ];

    // The radio group switches with arrow keys, so categories need no tabpanel association
    const outerTopSlotNode = (
        <div style={categoryWrapper}>
            <RadioGroup type="button" buttonSize="small" aria-label="选项分类" options={categoryOptions} value={key} onChange={(e) => setKey(e.target.value)} />
        </div>
    );
    return <Select aria-label="选项" defaultOpen autoAdjustOverflow={false} value={value} onChangeWithObject onChange={(obj) => setValue(obj)} style={{ width: 200 }} outerTopSlot={outerTopSlotNode} optionList={list[key]} />;
}

import { useState } from 'react';
import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    let [value, setValue] = useState<string | undefined>('xigua');
    return (
        <>
            <Select aria-label="业务线" value={value} style={{ width: '300px' }} onChange={setValue} placeholder="受控的Select">
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
        </>
    );
}

import { useState } from 'react';
import { Select, Button } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    let [options, setOptions] = useState([1, 2, 3, 4]);
    function add() {
        let length = Math.ceil(Math.random() * 10);
        let newOptions = Array.from({ length }, (_v, i) => i + 1);
        setOptions(newOptions);
    }
    return (
        <>
            <Select aria-label="数字" style={{ width: '180px' }} placeholder="请选择" value={4}>
                {options.map((option) => (
                    <Select.Option value={option} key={option}>
                        {option}
                    </Select.Option>
                ))}
            </Select>
            <br />
            <br />
            <Button onClick={add}>changeOptions Dynamic</Button>
        </>
    );
}

import { useState } from 'react';
import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    const provinces = ['四川', '广东'];
    const maps: Record<string, string[]> = {
        四川: ['成都', '都江堰'],
        广东: ['广州', '深圳', '东莞'],
    };

    const [province, setProvince] = useState(provinces[0]);
    const citys = maps[province];
    const [city, setCity] = useState<string | undefined>(citys[0]);

    const provinceChange = (newProvince?: string) => {
        if (!newProvince) {
            return;
        }
        setProvince(newProvince);
        setCity(maps[newProvince][0]);
    };
    const cityChange = (newCity?: string) => setCity(newCity);

    return (
        <>
            <Select aria-label="省份" style={{ width: '150px', margin: '10px' }} onChange={provinceChange} value={province}>
                {provinces.map((pro) => (
                    <Select.Option value={pro} key={pro}>
                        {pro}
                    </Select.Option>
                ))}
            </Select>
            <Select aria-label="城市" style={{ width: '150px', margin: '10px' }} value={city} onChange={cityChange}>
                {citys.map((c) => (
                    <Select.Option value={c} key={c}>
                        {c}
                    </Select.Option>
                ))}
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="单选" filter style={{ width: 180 }} placeholder="带搜索功能的单选">
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="多选" filter multiple style={{ width: 300 }} placeholder="带搜索功能的多选" autoClearSearchValue={false}>
                <Select.Option value="semi-0">Semi-0</Select.Option>
                <Select.Option value="semi-1">Semi-1</Select.Option>
                <Select.Option value="semi-2">Semi-2</Select.Option>
                <Select.Option value="semi-3">Semi-3</Select.Option>
                <Select.Option value="semi-4">Semi-4</Select.Option>
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    return (
        <>
            <Select aria-label="单选" filter searchPosition="dropdown" style={{ width: 200 }} defaultValue="ulikecam" placeholder="我的搜索框在下拉菜单中" searchPlaceholder="带搜索功能的单选">
                <Select.Option value="douyin">抖音</Select.Option>
                <Select.Option value="ulikecam">轻颜相机</Select.Option>
                <Select.Option value="jianying">剪映</Select.Option>
                <Select.Option value="xigua">西瓜视频</Select.Option>
            </Select>
            <br />
            <br />
            <Select aria-label="多选" filter searchPosition="dropdown" multiple style={{ width: 300 }} defaultValue={['semi-1']} placeholder="我的搜索框在下拉菜单中" searchPlaceholder="带搜索功能的多选" autoClearSearchValue={false}>
                <Select.Option value="semi-0">Semi-0</Select.Option>
                <Select.Option value="semi-1">Semi-1</Select.Option>
                <Select.Option value="semi-2">Semi-2</Select.Option>
                <Select.Option value="semi-3">Semi-3</Select.Option>
                <Select.Option value="semi-4">Semi-4</Select.Option>
            </Select>
        </>
    );
}

import { useMemo, useState } from 'react';
import { debounce } from 'es-toolkit';
import { Select } from '@fibrous/semi-ui-react';

interface Item {
    value: string;
    label: string;
    type: number;
}

const mockSearch = (inputValue: string) => {
    const length = Math.ceil(Math.random() * 100);
    return Array.from({ length }, (_v, i) => {
        return { value: inputValue + i, label: `相近业务 ${inputValue}${i}`, type: i + 1 };
    });
};

export default function SelectDemo() {
    const [loading, setLoading] = useState(false);
    const optionList: Item[] = [
        { value: 'douyin', label: '抖音', type: 1 },
        { value: 'xingtu', label: '醒图', type: 2 },
        { value: 'jianying', label: '剪映', type: 3 },
        { value: 'toutiao', label: '今日头条', type: 4 },
    ];
    const [list, setList] = useState(optionList);
    const [value, setValue] = useState<Item[]>([]);

    const handleMultipleChange = (newValue: Item[]) => {
        setValue(newValue);
    };

    const handleSearch = useMemo(
        () =>
            debounce((inputValue: string) => {
                setLoading(true);
                if (inputValue) {
                    const result = mockSearch(inputValue);
                    setTimeout(() => {
                        setLoading(false);
                        setList(result);
                    }, 1000);
                } else {
                    setLoading(false);
                }
            }, 1000),
        []
    );

    return <Select aria-label="远程搜索" style={{ width: 300 }} filter remote onChangeWithObject multiple value={value} onSearch={handleSearch} optionList={list} loading={loading} onChange={handleMultipleChange} emptyContent={null} />;
}

import { Select, type SelectOptionProps } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    function searchLabel(sugInput: string, option: SelectOptionProps) {
        let label = String(option.label).toUpperCase();
        let sug = sugInput.toUpperCase();
        return label.includes(sug);
    }
    return (
        <Select aria-label="业务线" filter={searchLabel} style={{ width: '180px' }} placeholder="try douyin">
            <Select.Option value="douyin">douyin</Select.Option>
            <Select.Option value="ulikecam">HOTSOON</Select.Option>
            <Select.Option value="jianying">PIPIXIA</Select.Option>
            <Select.Option value="xigua">XIGUA</Select.Option>
        </Select>
    );
}

import { Select, Avatar, Tag, type SelectRenderMultipleSelectedItemFn as RenderMultipleSelectedItemFn, type SelectRenderSingleSelectedItemFn as RenderSingleSelectedItemFn } from '@fibrous/semi-ui-react';

interface ListItem {
    name: string;
    email: string;
    avatar: string;
}

export default function SelectDemo() {
    const list: ListItem[] = [
        {
            name: '夏可漫',
            email: 'xiakeman@example.com',
            avatar: '/assets/placeholder/avatar-a.svg',
        },
        {
            name: '申悦',
            email: 'shenyue@example.com',
            avatar: '/assets/root-web-sites/bag.jpeg',
        },
        {
            name: '曲晨一',
            email: 'quchenyi@example.com',
            avatar: '/assets/placeholder/avatar-c.svg',
        },
        {
            name: '文嘉茂',
            email: 'wenjiamao@example.com',
            avatar: '/assets/root-web-sites/6fbafc2d-e3e6-4cff-a1e2-17709c680624.png',
        },
    ];

    const renderSelectedItem: RenderSingleSelectedItemFn = (optionNode) => (
        <div key={optionNode.email} style={{ display: 'flex', alignItems: 'center' }}>
            <Avatar src={optionNode.avatar} alt="" size="small" />
            <span style={{ marginLeft: 8 }}>{optionNode.email}</span>
        </div>
    );

    const renderMultipleWithCustomTag: RenderMultipleSelectedItemFn = (optionNode, { onClose }) => {
        const content = (
            <Tag avatarSrc={optionNode.avatar} avatarShape="circle" closable onClose={onClose} size="large" key={optionNode.name}>
                {optionNode.name}
            </Tag>
        );
        return {
            isRenderInTag: false,
            content,
        };
    };

    const renderMultipleWithCustomTag2: RenderMultipleSelectedItemFn = (optionNode, { onClose }) => {
        const content = (
            <Tag avatarSrc={optionNode.avatar} avatarShape="square" closable onClose={onClose} size="large" key={optionNode.name}>
                {optionNode.name}
            </Tag>
        );
        return {
            isRenderInTag: false,
            content,
        };
    };

    const renderCustomOption = (item: ListItem) => {
        const optionStyle = {
            display: 'flex',
            paddingLeft: 24,
            paddingTop: 10,
            paddingBottom: 10,
        };
        return (
            <Select.Option value={item.name} style={optionStyle} showTick {...item} key={item.email}>
                <Avatar size="small" src={item.avatar} alt="" />
                <div style={{ marginLeft: 8 }}>
                    <div style={{ fontSize: 14 }}>{item.name}</div>
                    <div style={{ color: 'var(--color-text-2)', fontSize: 12, lineHeight: '16px', fontWeight: 'normal' }}>{item.email}</div>
                </div>
            </Select.Option>
        );
    };

    return (
        <>
            <Select placeholder="请选择" style={{ width: 280, height: 40 }} onChange={(v) => console.log(v)} defaultValue="申悦" renderSelectedItem={renderSelectedItem}>
                {list.map(renderCustomOption)}
            </Select>
            <Select placeholder="请选择" maxTagCount={2} style={{ width: 280, marginTop: 20 }} onChange={(v) => console.log(v)} defaultValue={['申悦', '曲晨一']} multiple renderSelectedItem={renderMultipleWithCustomTag}>
                {list.map(renderCustomOption)}
            </Select>
            <Select placeholder="请选择" maxTagCount={2} style={{ width: 280, marginTop: 20 }} onChange={(v) => console.log(v)} defaultValue={['申悦', '曲晨一']} multiple renderSelectedItem={renderMultipleWithCustomTag2}>
                {list.map(renderCustomOption)}
            </Select>
        </>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    return (
        <Select aria-label="业务线" placeholder="自定义弹出层样式的" style={{ width: 180 }} dropdownStyle={{ width: 250 }} dropdownClassName="test">
            <Select.Option value="douyin">抖音</Select.Option>
            <Select.Option value="ulikecam">轻颜相机</Select.Option>
            <Select.Option value="jianying">剪映</Select.Option>
            <Select.Option value="xigua">西瓜视频</Select.Option>
        </Select>
    );
}

import { useState } from 'react';
import { Select, TextArea } from '@fibrous/semi-ui-react';

interface Item {
    value: string;
    label: string;
    type: number;
}

export default function SelectDemo() {
    const list: Item[] = [
        { value: 'douyin', label: '抖音', type: 1 },
        { value: 'ulikecam', label: '轻颜相机', type: 2 },
        { value: 'jianying', label: '剪映', type: 3 },
        { value: 'toutiao', label: '今日头条', type: 4 },
    ];
    const [cbValue, setCbValue] = useState<Item>();
    const [multipleCbValue, setMultipleCbValue] = useState<Item[]>();

    const onChange = (value?: Item) => {
        setCbValue(value);
        console.log(value);
    };

    const onMultipleChange = (value: Item[]) => {
        setMultipleCbValue(value);
        console.log(value);
    };

    return (
        <div>
            <div>
                <Select aria-label="单选" style={{ width: 150 }} onChangeWithObject optionList={list} placeholder="单选" defaultValue={list[0]} onChange={onChange} />
                <h4 id="select-on-change-with-object-single">onChange回调:</h4>
                <TextArea aria-labelledby="select-on-change-with-object-single" style={{ width: 320, marginBottom: 48 }} autosize value={JSON.stringify(cbValue)} rows={2} />
            </div>
            <div>
                <Select aria-label="多选" style={{ width: 320 }} onChangeWithObject multiple optionList={list} onChange={onMultipleChange} placeholder="多选" />
                <h4 id="select-on-change-with-object-multiple">onChange回调:</h4>
                <TextArea aria-labelledby="select-on-change-with-object-multiple" style={{ width: 320 }} autosize value={JSON.stringify(multipleCbValue)} />
            </div>
        </div>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    const optionList = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'toutiao', label: '今日头条' },
    ];
    return (
        <>
            <Select aria-label="业务线" style={{ width: 400 }} optionList={optionList} allowCreate multiple filter onChange={(v) => console.log(v)} defaultActiveFirstOption />
            <br />
            <br />
            <Select
                aria-label="业务线"
                style={{ width: 400 }}
                optionList={optionList}
                allowCreate
                multiple
                filter
                placeholder="With renderCreateItem"
                renderCreateItem={(input, _isFocus, style) => <div style={{ padding: 10, ...style }}>Create Item：{input}</div>}
                onChange={(v) => console.log(v)}
                defaultActiveFirstOption
            />
        </>
    );
}

import { Select } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    const newOptions = Array.from({ length: 3000 }, (_v, i) => ({ label: `option-${i}`, value: i }));
    let virtualize = {
        height: 270,
        width: '100%',
        itemSize: 36, // px
    };
    return <Select aria-label="virtualize" placeholder="拥有3k个Option的Select" style={{ width: 260 }} filter virtualize={virtualize} optionList={newOptions} />;
}

import { useState } from 'react';
import { IconAppCenter, IconChevronDown } from '@fibrous/semi-icons-react';
import { Select, Tag, type SelectTriggerRenderProps } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    const [valList, setValList] = useState(['douyin', 'ulikecam']);
    const list = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'toutiao', label: '今日头条' },
    ];
    const triggerRender = ({ value }: SelectTriggerRenderProps) => {
        return (
            <div
                style={{
                    minWidth: '112px',
                    backgroundColor: 'var(--semi-color-primary-light-default)',
                    height: 32,
                    display: 'flex',
                    alignItems: 'center',
                    paddingLeft: 12,
                    borderRadius: 3,
                    color: 'var(--semi-color-primary)',
                }}
            >
                <div
                    style={{
                        fontWeight: 600,
                        flexShrink: 0,
                        fontSize: 14,
                    }}
                >
                    业务线
                </div>
                <div
                    style={{
                        margin: 4,
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        flexGrow: 1,
                        overflow: 'hidden',
                    }}
                >
                    {value.map((item) => item.label).join(' , ')}
                </div>
                <IconAppCenter style={{ marginRight: 8, flexShrink: 0 }} />
            </div>
        );
    };

    const triggerRender2 = ({ value }: SelectTriggerRenderProps) => {
        return (
            <div
                style={{
                    margin: 4,
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    flexGrow: 1,
                    overflow: 'hidden',
                    display: 'flex',
                    alignItems: 'center',
                }}
            >
                <Tag size="large" color="cyan" shape="circle" suffixIcon={<IconChevronDown />}>
                    {value.map((item) => item.label).join(' / ')}
                </Tag>
            </div>
        );
    };

    return (
        <div>
            <h4>不同背景色的触发器</h4>
            <Select aria-label="不同背景色的触发器" value={valList} triggerRender={triggerRender} optionList={list} onChange={(value) => setValList(value)} multiple filter searchPosition="dropdown" style={{ width: 240 }} />
            <br />
            <br />
            <h4>使用 circle Tag 作为触发器</h4>
            <Select aria-label="circle Tag 触发器" value={valList} onChange={(value) => setValList(value)} triggerRender={triggerRender2} optionList={list} filter multiple searchPosition="dropdown" style={{ width: 240, marginTop: 20, outline: 0 }} />
        </div>
    );
}

import { useState } from 'react';
import { Select, TagInput, type SelectTriggerRenderProps } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    const [valList, setValList] = useState(['douyin', 'ulikecam']);
    const [inputVal, setInputVal] = useState('');
    const list = [
        { value: 'douyin', label: '抖音' },
        { value: 'ulikecam', label: '轻颜相机' },
        { value: 'jianying', label: '剪映' },
        { value: 'toutiao', label: '今日头条' },
    ];

    const handleSort = (currentLabels: string[]) => {
        const newValue = currentLabels.flatMap((item) => list.find((i) => i.label === item)?.value ?? []);
        setValList(newValue);
    };

    const triggerRender = ({ value, onSearch }: SelectTriggerRenderProps) => {
        return (
            <div role="presentation" onKeyDown={(e) => e.stopPropagation()}>
                <TagInput
                    draggable
                    allowDuplicates={false}
                    value={value.map((item) => String(item.label))}
                    inputValue={inputVal}
                    onInputChange={(word) => {
                        onSearch(word);
                        setInputVal(word);
                    }}
                    onChange={handleSort}
                    showClear
                />
            </div>
        );
    };

    return (
        <>
            <h4>可对已选项拖拽重新排序的 Select </h4>
            <Select aria-label="可拖拽排序的 Select" value={valList} triggerRender={triggerRender} optionList={list} onChange={(value) => setValList(value)} multiple filter style={{ width: 240 }} />
        </>
    );
}

import { useState } from 'react';
import clsx from 'clsx';
import { Select, Checkbox, Highlight, type SelectOptionRenderProps } from '@fibrous/semi-ui-react';

export default function SelectDemo() {
    const [inputValue, setInputValue] = useState('');
    const renderOptionItem = ({ id, disabled, selected, label, focused, className, style, onMouseEnter, onClick }: SelectOptionRenderProps) => {
        const optionCls = clsx(className, {
            ['custom-option-render']: true,
            ['custom-option-render-focused']: focused,
            ['custom-option-render-disabled']: disabled,
            ['custom-option-render-selected']: selected,
        });
        const searchWords = [inputValue];

        // Put style on the outer DOM or the virtual list breaks; add selected/focused/disabled styles from props;
        // bind onMouseEnter and className on the outer DOM or arrow keys display wrongly; put id there so screen
        // readers announce the option the arrow keys reach

        return (
            <div id={id} role="option" aria-selected={selected} aria-disabled={disabled} style={style} className={optionCls} onClick={onClick} onMouseEnter={onMouseEnter}>
                <Checkbox checked={selected} />
                <div className="option-right">
                    <Highlight sourceString={label as string} searchWords={searchWords} />
                </div>
            </div>
        );
    };

    const optionList = [
        { value: 'douyin', label: '抖音', otherKey: 0 },
        { value: 'ulikecam', label: '轻颜相机', disabled: true, otherKey: 1 },
        { value: 'jianying', label: '剪映', otherKey: 2 },
        { value: 'toutiao', label: '今日头条', otherKey: 3 },
    ];

    return (
        <>
            <Select aria-label="单选" filter placeholder="单选" onSearch={(v) => setInputValue(v)} dropdownClassName="components-select-demo-renderOptionItem" optionList={optionList} style={{ width: 180 }} renderOptionItem={renderOptionItem} />
            <br />
            <br />
            <Select aria-label="多选" filter placeholder="多选" multiple onSearch={(v) => setInputValue(v)} dropdownClassName="components-select-demo-renderOptionItem" optionList={optionList} style={{ width: 320 }} renderOptionItem={renderOptionItem} />
        </>
    );
}