穿梭框

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

const data = Array.from({ length: 100 }, (_, i) => {
    return {
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    };
});

export default function TransferDemo() {
    return <Transfer style={{ width: '568px', height: '416px' }} dataSource={data} onChange={(values, items) => console.log(values, items)} />;
}

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

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 },
        ],
    },
];

export default function TransferDemo() {
    return <Transfer type="groupList" defaultValue={[6]} style={{ width: '568px' }} dataSource={dataWithGroup} onChange={(values, items) => console.log(values, items)} />;
}

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

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 },
];

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

export default function TransferDemo() {
    const [searchText, setSearchText] = createSignal('');

    const renderSourceItem = (item: TransferRenderSourceItemProps) => {
        return (
            <div class="components-transfer-demo-source-item">
                <Checkbox
                    onChange={() => {
                        item.onChange?.();
                    }}
                    checked={item.checked}
                    style={{ height: '52px', 'align-items': 'center' }}
                >
                    <Avatar color={item.color} size="small">
                        {item.abbr}
                    </Avatar>
                    <div class="info">
                        <div class="name">
                            <Highlight sourceString={String(item.label)} searchWords={[searchText()]} />
                        </div>
                        <div class="email">
                            <Highlight sourceString={String(item.value)} searchWords={[searchText()]} />
                        </div>
                    </div>
                </Checkbox>
            </div>
        );
    };

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

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

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

const data = Array.from({ length: 20 }, (_, i) => {
    return {
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    };
});

export default function TransferDemo() {
    return <Transfer style={{ width: '568px', height: '416px' }} disabled dataSource={data} defaultValue={[2, 4]} onChange={(values, items) => console.log(values, items)} />;
}

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

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

export default function TransferDemo() {
    return <Transfer style={{ width: '568px', height: '416px' }} dataSource={data} defaultValue={[2, 4]} draggable onChange={(values, items) => console.log(values, items)} />;
}

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

const data = Array.from({ length: 100 }, (_, i) => {
    return {
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    };
});

export default function TransferDemo() {
    return (
        <Transfer
            style={{ width: '568px', height: '416px' }}
            dataSource={data}
            pagination={{
                pageSize: 10,
            }}
            onChange={(values, items) => console.log(values, items)}
        />
    );
}

import { createSignal } from 'solid-js';
import { Transfer, ButtonGroup, Button } from '@fibrous/semi-ui-solid';

const data = Array.from({ length: 100 }, (_, i) => {
    return {
        label: `选项名称 ${i}`,
        value: i,
        disabled: false,
        key: `key-${i}`,
    };
});

export default function TransferDemo() {
    const [currentPage, setCurrentPage] = createSignal(1);
    return (
        <div>
            <ButtonGroup style={{ 'margin-bottom': '12px' }}>
                <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: '568px', height: '416px' }}
                dataSource={data}
                pagination={{
                    pageSize: 10,
                    currentPage: currentPage(),
                    onPageChange: (page) => setCurrentPage(page),
                }}
                onChange={(values, items) => console.log(values, items)}
            />
        </div>
    );
}

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

const renderSourceItem = (item: TransferRenderSourceItemProps) => {
    return (
        <div class="components-transfer-demo-source-item">
            <Checkbox
                onChange={() => {
                    item.onChange?.();
                }}
                checked={item.checked}
                style={{ height: '52px', 'align-items': 'center' }}
            >
                <Avatar color={item.color} size="small">
                    {item.abbr}
                </Avatar>
                <div class="info">
                    <div class="name">{item.label}</div>
                    <div class="email">{item.value}</div>
                </div>
            </Checkbox>
        </div>
    );
};

const renderSelectedItem = (item: TransferRenderSelectedItemProps) => {
    // the handle exists only with `draggable`, which this demo sets
    const DragHandle = item.sortableHandle?.(() => <IconHandle class="semi-right-item-drag-handler" />);
    return (
        <div class="components-transfer-demo-selected-item">
            {DragHandle && <DragHandle />}
            <Avatar color={item.color} size="small">
                {item.abbr}
            </Avatar>
            <div class="info">
                <div class="name">{item.label}</div>
                <div class="email">{item.value}</div>
            </div>
            <Button class="remove" theme="borderless" type="tertiary" size="small" icon={<IconClose />} aria-label={`移除 ${String(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 },
];

export default function TransferDemo() {
    return (
        <Transfer
            draggable
            style={{ width: '568px' }}
            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 TransferSelectedHeaderProps, type TransferSourceHeaderProps } from '@fibrous/semi-ui-solid';

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

// the headers read their live objects in the JSX, so each renders once and follows the state
const renderSourceHeader = (header: TransferSourceHeaderProps) => {
    return (
        <div style={{ margin: '10px 0 0 10px', height: '24px', display: 'flex', 'align-items': 'center' }}>
            <span>共 {header.num} 项</span>
            {header.showButton && (
                <Button theme="borderless" type="tertiary" size="small" onClick={() => header.onAllClick()}>
                    {header.allChecked ? '取消全选' : '全选'}
                </Button>
            )}
        </div>
    );
};

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

export default function TransferDemo() {
    return <Transfer style={{ width: '568px', height: '416px' }} dataSource={data} renderSourceHeader={renderSourceHeader} renderSelectedHeader={renderSelectedHeader} />;
}

import { For, Show } from 'solid-js';
import { IconSearch } from '@fibrous/semi-icons-solid';
import { Transfer, Input, Spin, Button, type TransferSelectedPanelProps as SelectedPanelProps, type TransferSourcePanelProps as SourcePanelProps } from '@fibrous/semi-ui-solid';

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

// the panels read their live objects in the JSX: the lists follow the state without a second render call
function renderSourcePanel(panel: SourcePanelProps) {
    return (
        <section class="source-panel">
            <div class="panel-header sp-font">门店列表</div>
            <div class="panel-main">
                <Input aria-label="搜索门店" style={{ width: '454px', margin: '12px 14px' }} prefix={<IconSearch />} onChange={(value) => panel.onSearch(value)} showClear />
                <div class="panel-controls sp-font">
                    <span>待选门店: {panel.filterData.length}</span>
                    <Button onClick={() => panel.onAllClick()} theme="borderless" size="small">
                        {panel.allChecked ? '取消全选' : '全选'}
                    </Button>
                </div>
                <div class="panel-list">
                    <Show when={!panel.loading} fallback={<Spin />}>
                        <Show when={!panel.noMatch} fallback={<div class="empty sp-font">{panel.inputValue ? '无搜索结果' : '暂无内容'}</div>}>
                            <For each={panel.filterData}>
                                {(item) => (
                                    <div class="semi-transfer-item panel-item">
                                        <p>{item.label}</p>
                                        <Button theme="borderless" type="primary" onClick={() => panel.onSelectOrRemove(item)} class="panel-item-remove" size="small">
                                            {panel.selectedItems.has(item.key) ? '删除' : '添加'}
                                        </Button>
                                    </div>
                                )}
                            </For>
                        </Show>
                    </Show>
                </div>
            </div>
        </section>
    );
}

function renderSelectedPanel(panel: SelectedPanelProps) {
    return (
        <section class="selected-panel">
            <div class="panel-header sp-font">
                <div>已选同步门店: {panel.length}</div>
                <Button theme="borderless" type="primary" onClick={() => panel.onClear()} size="small">
                    清空
                </Button>
            </div>
            <div class="panel-main">
                <Show when={panel.length > 0} fallback={<div class="empty sp-font">暂无数据，请从左侧筛选</div>}>
                    <For each={panel.selectedData}>
                        {(item) => (
                            <div class="semi-transfer-item panel-item">
                                <p>{item.label}</p>
                                <Button theme="borderless" type="primary" onClick={() => panel.onRemove(item)} class="panel-item-remove" size="small">
                                    删除
                                </Button>
                            </div>
                        )}
                    </For>
                </Show>
            </div>
        </section>
    );
}

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

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

interface SortableItemProps {
    id: string | number;
    index: number;
    items: TransferDataItem[];
    onRemove: (item: TransferDataItem) => void;
}

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

    // the rows are keyed by id, so a new selectedData array re-reads the item instead of remounting the row mid-drag
    const item = () => props.items.find((entry) => entry.key === props.id);

    return (
        <div ref={(node) => ref(node)}>
            <Show keyed when={item()}>
                {(current) => (
                    <div class="semi-transfer-item panel-item">
                        <span ref={(node) => handleRef(node)} aria-label={String(current.label)} style={{ 'line-height': '0' }}>
                            <IconHandle class="pane-item-drag-handler" />
                        </span>
                        <div class="panel-item-main" style={{ 'flex-grow': '1' }}>
                            <p style={{ margin: '0 12px' }}>{current.label}</p>
                            <Button theme="borderless" type="primary" onClick={() => props.onRemove(current)} class="panel-item-remove" size="small">
                                删除
                            </Button>
                        </div>
                    </div>
                )}
            </Show>
        </div>
    );
}

function SortableList(props: { items: TransferDataItem[]; onSortEnd: OnSortEnd; onRemove: (item: TransferDataItem) => void }) {
    const onDragEnd: DragDropProviderProps['onDragEnd'] = (event) => {
        const { source } = event.operation;
        if (!event.canceled && isSortable(source) && source.initialIndex !== source.index) {
            props.onSortEnd({ oldIndex: source.initialIndex, newIndex: source.index });
        }
    };

    return (
        <DragDropProvider onDragEnd={onDragEnd}>
            <div style={{ overflow: 'auto', display: 'flex', 'flex-direction': 'column', 'row-gap': '8px' }}>
                <For each={props.items.map((item) => item.key)}>{(id, index) => <SortableItem id={id} index={index()} items={props.items} onRemove={props.onRemove} />}</For>
            </div>
        </DragDropProvider>
    );
}

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

// the panels read their live objects in the JSX, as in the plain custom panel demo
function renderSourcePanel(panel: SourcePanelProps) {
    return (
        <section class="source-panel">
            <div class="panel-header sp-font">门店列表</div>
            <div class="panel-main">
                <Input aria-label="搜索门店" style={{ width: '454px', margin: '12px 14px' }} prefix={<IconSearch />} onChange={(value) => panel.onSearch(value)} showClear />
                <div class="panel-controls sp-font">
                    <span>待选门店: {panel.filterData.length}</span>
                    <Button onClick={() => panel.onAllClick()} theme="borderless" size="small">
                        {panel.allChecked ? '取消全选' : '全选'}
                    </Button>
                </div>
                <div class="panel-list">
                    <Show when={!panel.loading} fallback={<Spin />}>
                        <Show when={!panel.noMatch} fallback={<div class="empty sp-font">{panel.inputValue ? '无搜索结果' : '暂无内容'}</div>}>
                            <For each={panel.filterData}>
                                {(item) => (
                                    <div class="semi-transfer-item panel-item">
                                        <div class="panel-item-main" style={{ 'flex-grow': '1' }}>
                                            <p style={{ margin: '0 12px' }}>{item.label}</p>
                                            <Button theme="borderless" type="primary" onClick={() => panel.onSelectOrRemove(item)} class="panel-item-remove" size="small">
                                                {panel.selectedItems.has(item.key) ? '删除' : '添加'}
                                            </Button>
                                        </div>
                                    </div>
                                )}
                            </For>
                        </Show>
                    </Show>
                </div>
            </div>
        </section>
    );
}

function renderSelectedPanel(panel: SelectedPanelProps) {
    return (
        <section class="selected-panel">
            <div class="panel-header sp-font">
                <div>已选同步门店: {panel.length}</div>
                <Button theme="borderless" type="primary" onClick={() => panel.onClear()} size="small">
                    清空
                </Button>
            </div>
            <div class="panel-main" style={{ display: 'block' }}>
                <SortableList items={panel.selectedData} onSortEnd={panel.onSortEnd} onRemove={panel.onRemove} />
            </div>
        </section>
    );
}

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

import { createSignal } from 'solid-js';
import { Transfer } from '@fibrous/semi-ui-solid';

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',
            },
        ],
    },
];

export default function TransferDemo() {
    const [value, setValue] = createSignal<Array<string | number>>(['Shanghai']);

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

import { createSignal, Show } from 'solid-js';
import { Transfer, Button, type TransferSourceHeaderProps } from '@fibrous/semi-ui-solid';

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',
    },
];

// the header reads its live object in the JSX, so it renders once and follows the selection
const renderSourceHeader = (header: TransferSourceHeaderProps) => {
    return (
        <div
            style={{
                display: 'flex',
                'justify-content': 'space-between',
                'align-items': 'center',
                padding: '8px 12px',
                'border-bottom': '1px solid var(--semi-color-border)',
            }}
        >
            <span>
                <strong>文件总数：</strong>
                {header.leafOnlyNum !== undefined ? header.leafOnlyNum : header.num} 个文件
                <Show when={header.leafOnlyNum !== undefined}>
                    <span style={{ color: 'var(--semi-color-text-2)', 'margin-left': '8px', 'font-size': '12px' }}>（总节点数：{header.num}）</span>
                </Show>
            </span>
            <Show when={header.showButton}>
                <Button theme="borderless" type="tertiary" size="small" onClick={() => header.onAllClick()}>
                    {header.allChecked ? '取消全选' : '全选'}
                </Button>
            </Show>
        </div>
    );
};

export default function TransferDemo() {
    const [value, setValue] = createSignal<Array<string | number>>([]);

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