穿梭框

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

export default function TransferDemo() {
    const data = Array.from({ length: 100 }, (_v, i) => {
        return {
            label: `选项名称 ${i}`,
            value: i,
            disabled: false,
            key: `key-${i}`,
        };
    });
    return <Transfer style={{ width: 568, height: 416 }} dataSource={data} onChange={(values, items) => console.log(values, items)} />;
}

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

export default function TransferDemo() {
    const dataWithGroup = [
        {
            title: '类别A',
            children: [
                { label: 'A-1', value: 1, disabled: false, key: 1 },
                { label: 'A-2', value: 2, disabled: false, key: 2 },
                { label: 'A-3', value: 3, disabled: false, key: 3 },
            ],
        },
        {
            title: '类别B',
            children: [
                { label: 'B-1', value: 4, disabled: false, key: 4 },
                { label: 'B-2', value: 5, disabled: false, key: 5 },
                { label: 'B-3（disabled）', value: 6, disabled: true, key: 6 },
            ],
        },
        {
            title: '类别C',
            children: [
                { label: 'C-1', value: 7, disabled: false, key: 7 },
                { label: 'C-2', value: 8, disabled: false, key: 8 },
                { label: 'C-3', value: 9, disabled: false, key: 9 },
                { label: 'C-4', value: 10, disabled: false, key: 10 },
                { label: 'C-5', value: 11, disabled: false, key: 11 },
                { label: 'C-6', value: 12, disabled: false, key: 12 },
                { label: 'C-7', value: 13, disabled: false, key: 13 },
            ],
        },
    ];
    return <Transfer type="groupList" defaultValue={[6]} style={{ width: 568 }} dataSource={dataWithGroup} onChange={(values, items) => console.log(values, items)} />;
}

import { useState } from 'react';
import { IconClose } from '@fibrous/semi-icons-react';
import { Transfer, Button, Checkbox, Avatar, Highlight, type TransferDataItem, type TransferRenderSelectedItemProps, type TransferRenderSourceItemProps } from '@fibrous/semi-ui-react';

export default function TransferDemo() {
    const [searchText, setSearchText] = useState('');
    const renderSourceItem = (item: TransferRenderSourceItemProps) => {
        return (
            <div className="components-transfer-demo-source-item" key={item.key}>
                <Checkbox
                    onChange={() => {
                        item.onChange?.();
                    }}
                    checked={item.checked}
                    style={{ height: 52, alignItems: 'center' }}
                >
                    <Avatar color={item.color} size="small">
                        {item.abbr}
                    </Avatar>
                    <div className="info">
                        <div className="name">
                            <Highlight sourceString={String(item.label)} searchWords={[searchText]} />
                        </div>
                        <div className="email">
                            <Highlight sourceString={String(item.value)} searchWords={[searchText]} />
                        </div>
                    </div>
                </Checkbox>
            </div>
        );
    };

    const renderSelectedItem = (item: TransferRenderSelectedItemProps) => {
        return (
            <div className="components-transfer-demo-selected-item" key={item.key}>
                <Avatar color={item.color} size="small">
                    {item.abbr}
                </Avatar>
                <div className="info">
                    <div className="name">{item.label}</div>
                    <div className="email">{item.value}</div>
                </div>
                <Button className="remove" theme="borderless" type="tertiary" size="small" icon={<IconClose />} aria-label={`移除 ${item.label}`} onClick={item.onRemove} />
            </div>
        );
    };

    const customFilter = (searchValue: string, item: TransferDataItem) => {
        return String(item.value).includes(searchValue) || String(item.label).includes(searchValue);
    };

    const data = [
        { label: '夏可漫', value: 'xiakeman@example.com', abbr: '夏', color: 'amber', area: 'US', key: 1 },
        { label: '申悦', value: 'shenyue@example.com', abbr: '申', color: 'indigo', area: 'UK', key: 2 },
        { label: '文嘉茂', value: 'wenjiamao@example.com', abbr: '文', color: 'cyan', area: 'HK', key: 3 },
        { label: '曲晨一', value: 'quchenyi@example.com', abbr: '曲', color: 'blue', area: 'India', key: 4 },
        { label: '曲晨二', value: 'quchener@example.com', abbr: '二', color: 'blue', area: 'India', key: 5 },
        { label: '曲晨三', value: 'quchensan@example.com', abbr: '三', color: 'blue', area: 'India', key: 6 },
    ];

    return (
        <Transfer
            style={{ width: 568 }}
            dataSource={data}
            filter={customFilter}
            defaultValue={['xiakeman@example.com', 'shenyue@example.com']}
            renderSelectedItem={renderSelectedItem}
            renderSourceItem={renderSourceItem}
            inputProps={{ placeholder: '搜索姓名或邮箱' }}
            onSearch={(searchText) => setSearchText(searchText)}
            onChange={(values, items) => console.log(values, items)}
        />
    );
}

import { Transfer } from '@fibrous/semi-ui-react';
export default function TransferDemo() {
    const data = Array.from({ length: 20 }, (_v, i) => {
        return {
            label: `选项名称 ${i}`,
            value: i,
            disabled: false,
            key: `key-${i}`,
        };
    });
    return <Transfer style={{ width: 568, height: 416 }} disabled dataSource={data} defaultValue={[2, 4]} onChange={(values, items) => console.log(values, items)} />;
}

import { Transfer } from '@fibrous/semi-ui-react';
export default function TransferDemo() {
    const data = Array.from({ length: 30 }, (_v, i) => {
        return {
            label: `选项名称 ${i}`,
            value: i,
            disabled: false,
            key: `key-${i}`,
        };
    });
    return <Transfer style={{ width: 568, height: 416 }} dataSource={data} defaultValue={[2, 4]} draggable onChange={(values, items) => console.log(values, items)} />;
}

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

export default function TransferDemo() {
    const data = Array.from({ length: 100 }, (_v, i) => {
        return {
            label: `选项名称 ${i}`,
            value: i,
            disabled: false,
            key: `key-${i}`,
        };
    });
    return (
        <Transfer
            style={{ width: 568, height: 416 }}
            dataSource={data}
            pagination={{
                pageSize: 10,
            }}
            onChange={(values, items) => console.log(values, items)}
        />
    );
}

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

export default function TransferDemo() {
    const [currentPage, setCurrentPage] = useState(1);
    const data = Array.from({ length: 100 }, (_v, i) => {
        return {
            label: `选项名称 ${i}`,
            value: i,
            disabled: false,
            key: `key-${i}`,
        };
    });
    return (
        <div>
            <ButtonGroup style={{ marginBottom: 12 }}>
                <Button onClick={() => setCurrentPage(1)}>第1页</Button>
                <Button onClick={() => setCurrentPage(2)}>第2页</Button>
                <Button onClick={() => setCurrentPage(5)}>第5页</Button>
                <Button onClick={() => setCurrentPage(10)}>第10页</Button>
            </ButtonGroup>
            <div>当前页码: {currentPage}</div>
            <Transfer
                style={{ width: 568, height: 416 }}
                dataSource={data}
                pagination={{
                    pageSize: 10,
                    currentPage,
                    onPageChange: (page) => setCurrentPage(page),
                }}
                onChange={(values, items) => console.log(values, items)}
            />
        </div>
    );
}

import { IconHandle, IconClose } from '@fibrous/semi-icons-react';
import { Transfer, Button, Checkbox, Avatar, type TransferDataItem, type TransferRenderSelectedItemProps, type TransferRenderSourceItemProps } from '@fibrous/semi-ui-react';

export default function TransferDemo() {
    const renderSourceItem = (item: TransferRenderSourceItemProps) => {
        return (
            <div className="components-transfer-demo-source-item" key={item.key}>
                <Checkbox
                    onChange={() => {
                        item.onChange?.();
                    }}
                    checked={item.checked}
                    style={{ height: 52, alignItems: 'center' }}
                >
                    <Avatar color={item.color} size="small">
                        {item.abbr}
                    </Avatar>
                    <div className="info">
                        <div className="name">{item.label}</div>
                        <div className="email">{item.value}</div>
                    </div>
                </Checkbox>
            </div>
        );
    };

    const renderSelectedItem = (item: TransferRenderSelectedItemProps) => {
        const { sortableHandle } = item;
        if (!sortableHandle) {
            return null;
        }
        const DragHandle = sortableHandle(() => <IconHandle className="semi-right-item-drag-handler" />);
        return (
            <div className="components-transfer-demo-selected-item" key={item.key}>
                <DragHandle />
                <Avatar color={item.color} size="small">
                    {item.abbr}
                </Avatar>
                <div className="info">
                    <div className="name">{item.label}</div>
                    <div className="email">{item.value}</div>
                </div>
                <Button className="remove" theme="borderless" type="tertiary" size="small" icon={<IconClose />} aria-label={`移除 ${item.label}`} onClick={item.onRemove} />
            </div>
        );
    };

    const customFilter = (searchValue: string, item: TransferDataItem) => {
        return String(item.value).includes(searchValue) || String(item.label).includes(searchValue);
    };

    const data = [
        { label: '夏可漫', value: 'xiakeman@example.com', abbr: '夏', color: 'amber', area: 'US', key: 1 },
        { label: '申悦', value: 'shenyue@example.com', abbr: '申', color: 'indigo', area: 'UK', key: 2 },
        { label: '文嘉茂', value: 'wenjiamao@example.com', abbr: '文', color: 'cyan', area: 'HK', key: 3 },
        { label: '曲晨一', value: 'quchenyi@example.com', abbr: '曲', color: 'blue', area: 'India', key: 4 },
        { label: '曲晨二', value: 'quchener@example.com', abbr: '二', color: 'blue', area: 'India', key: 5 },
        { label: '曲晨三', value: 'quchensan@example.com', abbr: '三', color: 'blue', area: 'India', key: 6 },
    ];

    return (
        <Transfer
            draggable
            style={{ width: 568 }}
            dataSource={data}
            filter={customFilter}
            defaultValue={['xiakeman@example.com', 'shenyue@example.com']}
            renderSelectedItem={renderSelectedItem}
            renderSourceItem={renderSourceItem}
            inputProps={{ placeholder: '搜索姓名或邮箱' }}
            onChange={(values, items) => console.log(values, items)}
        />
    );
}

import { Transfer, Button, type TransferProps } from '@fibrous/semi-ui-react';

export default function TransferDemo() {
    const data = Array.from({ length: 30 }, (_v, i) => {
        return {
            label: `选项名称 ${i}`,
            value: i,
            disabled: false,
            key: `key-${i}`,
        };
    });

    const renderSourceHeader: TransferProps['renderSourceHeader'] = ({ num, showButton, allChecked, onAllClick }) => {
        return (
            <div style={{ margin: '10px 0 0 10px', height: 24, display: 'flex', alignItems: 'center' }}>
                <span>共 {num} 项</span>
                {showButton && (
                    <Button theme="borderless" type="tertiary" size="small" onClick={onAllClick}>
                        {allChecked ? '取消全选' : '全选'}
                    </Button>
                )}
            </div>
        );
    };

    const renderSelectedHeader: TransferProps['renderSelectedHeader'] = ({ num, showButton, onClear }) => {
        return (
            <div style={{ margin: '10px 0 0 10px', height: 24, display: 'flex', alignItems: 'center' }}>
                <span>{num} 项已选</span>
                {showButton && (
                    <Button theme="borderless" type="tertiary" size="small" onClick={onClear}>
                        清空
                    </Button>
                )}
            </div>
        );
    };

    return <Transfer style={{ width: 568, height: 416 }} dataSource={data} renderSourceHeader={renderSourceHeader} renderSelectedHeader={renderSelectedHeader} />;
}

import { type ReactNode } from 'react';
import { IconSearch } from '@fibrous/semi-icons-react';
import { Transfer, Input, Spin, Button, type TransferDataItem, type TransferSelectedPanelProps as SelectedPanelProps, type TransferSourcePanelProps as SourcePanelProps } from '@fibrous/semi-ui-react';

const dataSource = Array.from({ length: 100 }, (_v, i) => ({
    label: `海底捞门店 ${i}`,
    value: i,
    disabled: false,
    key: `key-${i}`,
}));

function renderItem(type: 'source' | 'selected', item: TransferDataItem, onItemAction: (item: TransferDataItem) => void, selectedItems?: SourcePanelProps['selectedItems']) {
    let buttonText = '删除';
    if (type === 'source') {
        buttonText = selectedItems?.has(item.key) ? '删除' : '添加';
    }
    return (
        <div className="semi-transfer-item panel-item" key={item.key}>
            <p>{item.label}</p>
            <Button theme="borderless" type="primary" onClick={() => onItemAction(item)} className="panel-item-remove" size="small">
                {buttonText}
            </Button>
        </div>
    );
}

function renderSourcePanel({ loading, noMatch, filterData, selectedItems, allChecked, onAllClick, inputValue, onSearch, onSelectOrRemove }: SourcePanelProps) {
    let content: ReactNode;
    if (loading) {
        content = <Spin />;
    } else if (noMatch) {
        content = <div className="empty sp-font">{inputValue ? '无搜索结果' : '暂无内容'}</div>;
    } else {
        content = filterData.map((item) => renderItem('source', item, onSelectOrRemove, selectedItems));
    }
    return (
        <section className="source-panel">
            <div className="panel-header sp-font">门店列表</div>
            <div className="panel-main">
                <Input aria-label="搜索门店" style={{ width: 454, margin: '12px 14px' }} prefix={<IconSearch />} onChange={onSearch} showClear />
                <div className="panel-controls sp-font">
                    <span>待选门店: {filterData.length}</span>
                    <Button onClick={onAllClick} theme="borderless" size="small">
                        {allChecked ? '取消全选' : '全选'}
                    </Button>
                </div>
                <div className="panel-list">{content}</div>
            </div>
        </section>
    );
}

function renderSelectedPanel({ selectedData, onClear, onRemove }: SelectedPanelProps) {
    let mainContent: ReactNode = selectedData.map((item) => renderItem('selected', item, onRemove));

    if (!selectedData.length) {
        mainContent = <div className="empty sp-font">暂无数据，请从左侧筛选</div>;
    }

    return (
        <section className="selected-panel">
            <div className="panel-header sp-font">
                <div>已选同步门店: {selectedData.length}</div>
                <Button theme="borderless" type="primary" onClick={onClear} size="small">
                    清空
                </Button>
            </div>
            <div className="panel-main">{mainContent}</div>
        </section>
    );
}

export default function TransferDemo() {
    return <Transfer onChange={(values) => console.log(values)} className="component-transfer-demo-custom-panel" renderSourcePanel={renderSourcePanel} renderSelectedPanel={renderSelectedPanel} dataSource={dataSource} />;
}

import type { ReactNode } from 'react';
import { DragDropProvider, type DragEndEvent } from '@dnd-kit/react';
import { isSortable, useSortable } from '@dnd-kit/react/sortable';
import { IconSearch, IconHandle } from '@fibrous/semi-icons-react';
import { Transfer, Input, Spin, Button, type TransferDataItem, type TransferOnSortEnd as OnSortEnd, type TransferSelectedPanelProps as SelectedPanelProps, type TransferSourcePanelProps as SourcePanelProps } from '@fibrous/semi-ui-react';

type HandleRef = (element: Element | null) => void;
type RenderSortableItem = (props: { id: string | number; handleRef: HandleRef }) => ReactNode;

interface SortableListProps {
    items: Array<string | number>;
    onSortEnd: OnSortEnd;
    renderItem: RenderSortableItem;
}

function SortableList({ items, onSortEnd, renderItem }: SortableListProps) {
    const onDragEnd = (event: DragEndEvent) => {
        const { source } = event.operation;
        if (!event.canceled && isSortable(source) && source.initialIndex !== source.index) {
            onSortEnd({ oldIndex: source.initialIndex, newIndex: source.index });
        }
    };

    return (
        <DragDropProvider onDragEnd={onDragEnd}>
            <div style={{ overflow: 'auto', display: 'flex', flexDirection: 'column', rowGap: '8px' }}>
                {items.map((value, index) => (
                    <SortableItem key={value} id={value} index={index} renderItem={renderItem} />
                ))}
            </div>
        </DragDropProvider>
    );
}

interface SortableItemProps {
    id: string | number;
    index: number;
    renderItem: RenderSortableItem;
}

function SortableItem({ id, index, renderItem }: SortableItemProps) {
    // Only the handle drags; the Accessibility plugin gives it a button role and Tab stop for keyboard sorting
    const { ref, handleRef } = useSortable({ id, index });

    return <div ref={ref}>{renderItem({ id, handleRef })}</div>;
}

const dataSource = Array.from({ length: 100 }, (_v, i) => ({
    label: `海底捞门店 ${i}`,
    value: i,
    disabled: false,
    key: `key-${i}`,
}));

function renderItem(type: 'source' | 'selected', item: TransferDataItem, onItemAction: (item: TransferDataItem) => void, selectedItems?: SourcePanelProps['selectedItems'], handleRef?: HandleRef) {
    let buttonText = '删除';

    if (type === 'source') {
        let checked = selectedItems?.has(item.key);
        buttonText = checked ? '删除' : '添加';
    }

    return (
        <div className="semi-transfer-item panel-item" key={item.key}>
            {handleRef && (
                <span ref={handleRef} aria-label={String(item.label)} style={{ lineHeight: 0 }}>
                    <IconHandle className="pane-item-drag-handler" />
                </span>
            )}
            <div className="panel-item-main" style={{ flexGrow: 1 }}>
                <p style={{ margin: '0 12px' }}>{item.label}</p>
                <Button theme="borderless" type="primary" onClick={() => onItemAction(item)} className="panel-item-remove" size="small">
                    {buttonText}
                </Button>
            </div>
        </div>
    );
}

function renderSourcePanel({ loading, noMatch, filterData, selectedItems, allChecked, onAllClick, inputValue, onSearch, onSelectOrRemove }: SourcePanelProps) {
    let content: ReactNode;
    if (loading) {
        content = <Spin />;
    } else if (noMatch) {
        content = <div className="empty sp-font">{inputValue ? '无搜索结果' : '暂无内容'}</div>;
    } else {
        content = filterData.map((item) => renderItem('source', item, onSelectOrRemove, selectedItems));
    }
    return (
        <section className="source-panel">
            <div className="panel-header sp-font">门店列表</div>
            <div className="panel-main">
                <Input aria-label="搜索门店" style={{ width: 454, margin: '12px 14px' }} prefix={<IconSearch />} onChange={onSearch} showClear />
                <div className="panel-controls sp-font">
                    <span>待选门店: {filterData.length}</span>
                    <Button onClick={onAllClick} theme="borderless" size="small">
                        {allChecked ? '取消全选' : '全选'}
                    </Button>
                </div>
                <div className="panel-list">{content}</div>
            </div>
        </section>
    );
}

function renderSelectedPanel({ selectedData, onClear, onRemove, onSortEnd }: SelectedPanelProps) {
    const renderSelectItem: RenderSortableItem = ({ id, handleRef }) => {
        const item = selectedData.find((item) => id === item.key);
        return item ? renderItem('selected', item, onRemove, undefined, handleRef) : null;
    };

    const sortData = selectedData.map((item) => item.key);

    const mainContent = (
        <div className="panel-main" style={{ display: 'block' }}>
            <SortableList onSortEnd={onSortEnd} items={sortData} renderItem={renderSelectItem} />
        </div>
    );

    return (
        <section className="selected-panel">
            <div className="panel-header sp-font">
                <div>已选同步门店: {selectedData.length}</div>
                <Button theme="borderless" type="primary" onClick={onClear} size="small">
                    清空
                </Button>
            </div>
            {mainContent}
        </section>
    );
}

export default function TransferDemo() {
    return <Transfer defaultValue={[2, 4]} onChange={(values) => console.log(values)} className="component-transfer-demo-custom-panel" renderSourcePanel={renderSourcePanel} renderSelectedPanel={renderSelectedPanel} dataSource={dataSource} />;
}

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

export default function TransferDemo() {
    const treeData = [
        {
            label: 'Asia',
            value: 'Asia',
            key: '0',
            children: [
                {
                    label: 'China',
                    value: 'China',
                    key: '0-0',
                    children: [
                        {
                            label: 'Beijing',
                            value: 'Beijing',
                            key: '0-0-0',
                        },
                        {
                            label: 'Shanghai',
                            value: 'Shanghai',
                            key: '0-0-1',
                        },
                        {
                            label: 'Chengdu',
                            value: 'Chengdu',
                            key: '0-0-2',
                        },
                    ],
                },
                {
                    label: 'Japan',
                    value: 'Japan',
                    key: '0-1',
                    children: [
                        {
                            label: 'Osaka',
                            value: 'Osaka',
                            key: '0-1-0',
                        },
                    ],
                },
            ],
        },
        {
            label: 'North America',
            value: 'North America',
            key: '1',
            children: [
                {
                    label: 'United States',
                    value: 'United States',
                    key: '1-0',
                },
                {
                    label: 'Canada',
                    value: 'Canada',
                    key: '1-1',
                },
                {
                    label: 'Mexico',
                    value: 'Mexico',
                    disabled: true,
                    key: '1-2',
                },
                {
                    label: 'Cuba',
                    value: 'Cuba',
                    key: '1-3',
                },
            ],
        },
    ];

    const [v, $v] = useState<Array<string | number>>(['Shanghai']);

    return (
        <div style={{ margin: 10, padding: 10, width: 600 }}>
            <Transfer dataSource={treeData} type="treeList" value={v} onChange={$v} />
        </div>
    );
}

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

export default function TransferDemo() {
    const treeData = [
        {
            label: '文件夹 1',
            value: 'folder1',
            key: 'folder1',
            children: [
                {
                    label: '文件 1-1',
                    value: 'file1-1',
                    key: 'file1-1',
                },
                {
                    label: '文件 1-2',
                    value: 'file1-2',
                    key: 'file1-2',
                },
                {
                    label: '子文件夹 1',
                    value: 'subfolder1',
                    key: 'subfolder1',
                    children: [
                        {
                            label: '文件 1-1-1',
                            value: 'file1-1-1',
                            key: 'file1-1-1',
                        },
                        {
                            label: '文件 1-1-2',
                            value: 'file1-1-2',
                            key: 'file1-1-2',
                        },
                    ],
                },
            ],
        },
        {
            label: '文件夹 2',
            value: 'folder2',
            key: 'folder2',
            children: [
                {
                    label: '文件 2-1',
                    value: 'file2-1',
                    key: 'file2-1',
                },
                {
                    label: '文件 2-2',
                    value: 'file2-2',
                    key: 'file2-2',
                },
            ],
        },
        {
            label: '独立文件',
            value: 'file3',
            key: 'file3',
        },
    ];

    const [value, setValue] = useState<Array<string | number>>([]);

    const renderSourceHeader: TransferProps['renderSourceHeader'] = ({ num, leafOnlyNum, showButton, allChecked, onAllClick }) => {
        return (
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    padding: '8px 12px',
                    borderBottom: '1px solid var(--semi-color-border)',
                }}
            >
                <span>
                    <strong>文件总数：</strong>
                    {leafOnlyNum !== undefined ? leafOnlyNum : num} 个文件
                    {leafOnlyNum !== undefined && <span style={{ color: 'var(--semi-color-text-2)', marginLeft: 8, fontSize: 12 }}>（总节点数：{num}）</span>}
                </span>
                {showButton && (
                    <Button theme="borderless" type="tertiary" size="small" onClick={onAllClick}>
                        {allChecked ? '取消全选' : '全选'}
                    </Button>
                )}
            </div>
        );
    };

    return <Transfer style={{ width: 600 }} dataSource={treeData} type="treeList" value={value} onChange={setValue} renderSourceHeader={renderSourceHeader} />;
}