@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/transfer/__test__/transfer.test.js

@@ -1,324 +0,0 @@
-import * as _ from 'lodash';
-import { spy } from 'sinon';
-import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/base/constants';
-
-import Transfer from '../index';
-
-const defaultItems = [
-    {
-        label: 'item1',
-        value: '1',
-        key: 'a',
-    },
-    {
-        label: 'item2',
-        value: '2',
-        key: 'b',
-    },
-];
-
-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 },
-        ],
-    },
-];
-
-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',
-                        disabled: true,
-                    },
-                    {
-                        label: 'Shanghai',
-                        value: 'Shanghai',
-                        key: '0-0-1',
-                    },
-                    {
-                        label: 'Chengdu',
-                        value: 'Chengdu',
-                        key: '0-0-2',
-                    },
-                    {
-                        label: 'Chongqing',
-                        value: 'Chongqing',
-                        key: '0-0-3',
-                    },
-                ],
-            },
-            {
-                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',
-            },
-        ],
-    },
-];
-
-function getTransfer(props) {
-    return mount(<Transfer {...props} />, { attachTo: document.getElementById('container') });
-}
-
-describe(`Transfer`, () => {
-    beforeEach(() => {
-        // Avoid `attachTo: document.body` Warning
-        const div = document.createElement('div');
-        div.setAttribute('id', 'container');
-        document.body.appendChild(div);
-    });
-
-    afterEach(() => {
-        const div = document.getElementById('container');
-        if (div) {
-            document.body.removeChild(div);
-        }
-        document.body.innerHTML = '';
-    });
-
-    it('custom className & style', () => {
-        let props = {
-            className: 'test',
-            style: {
-                color: 'red',
-            },
-        };
-        const wrapper = getTransfer(props);
-        expect(wrapper.hasClass('test')).toEqual(true);
-        expect(wrapper.find('div.test')).toHaveStyle('color', 'red');
-    });
-
-    it('defaultValue effective', () => {
-        let props = {
-            dataSource: defaultItems,
-            defaultValue: ['1'],
-        };
-        const wrapper = getTransfer(props);
-        expect(wrapper.state().selectedItems.has('a')).toEqual(true);
-    });
-
-    it('search effect while data change', () => {
-        let props = {
-            dataSource: [],
-        };
-        const wrapper = getTransfer(props);
-        const searchIn = wrapper.find(`.${BASE_CLASS_PREFIX}-input`);
-        const env = { target: { value: '2' } };
-        searchIn.simulate('change', env);
-        wrapper.setProps({
-            dataSource: [
-                { label: '1', value: 1, key: 1 },
-                { label: '2', value: 2, key: 2 },
-            ],
-        });
-        expect(wrapper.state().searchResult.has(2)).toEqual(true);
-        expect(wrapper.state().searchResult.size === 1).toEqual(true);
-        expect(wrapper.state().inputValue === '2').toEqual(true);
-    });
-
-    it('search', () => {
-        const spyOnSearch = spy();
-        let props = {
-            dataSource: defaultItems,
-            onSearch: spyOnSearch,
-        };
-
-        const transfer = getTransfer(props);
-
-        const inputNode = transfer.find(`.${BASE_CLASS_PREFIX}-transfer-filter input`).at(0);
-        const env = { target: { value: '1' } };
-
-        inputNode.simulate('change', env);
-
-        expect(spyOnSearch.calledOnce).toEqual(true);
-        expect(spyOnSearch.firstCall.args).toHaveLength(1);
-        expect(spyOnSearch.firstCall.args[0] === '1').toEqual(true);
-    });
-
-    it('select and change', () => {
-        const spyOnChange = spy();
-        const spyOnSelect = spy();
-        const spyOnDeselect = spy();
-        let props = {
-            dataSource: defaultItems,
-            onChange: spyOnChange,
-            onSelect: spyOnSelect,
-            onDeselect: spyOnDeselect,
-        };
-
-        const transfer = getTransfer(props);
-
-        // select first item -> deselect first item
-        const firstItem = transfer.find(`span.${BASE_CLASS_PREFIX}-transfer-item`).at(0);
-        firstItem.simulate('click');
-        firstItem.simulate('click');
-
-        expect(spyOnSelect.calledOnce).toEqual(true);
-        expect(spyOnDeselect.calledOnce).toEqual(true);
-        expect(spyOnChange.calledTwice).toEqual(true);
-
-        expect(spyOnChange.firstCall.args).toHaveLength(2);
-        expect(Array.isArray(spyOnChange.firstCall.args[0])).toEqual(true);
-        expect(spyOnChange.firstCall.args[0]).toHaveLength(1);
-        expect(spyOnChange.firstCall.args[0][0]).toEqual(defaultItems[0].value);
-        expect(Array.isArray(spyOnChange.firstCall.args[1])).toEqual(true);
-        expect(spyOnChange.firstCall.args[1]).toHaveLength(1);
-        expect(spyOnChange.firstCall.args[1][0]).toMatchObject(defaultItems[0]);
-
-        expect(spyOnChange.secondCall.args).toHaveLength(2);
-        expect(Array.isArray(spyOnChange.secondCall.args[0])).toEqual(true);
-        expect(spyOnChange.secondCall.args[0]).toHaveLength(0);
-        expect(Array.isArray(spyOnChange.secondCall.args[1])).toEqual(true);
-        expect(spyOnChange.secondCall.args[1]).toHaveLength(0);
-
-    });
-
-    it('de/select all', () => {
-        const spyOnChange = spy();
-        let props = {
-            dataSource: defaultItems,
-            onChange: spyOnChange,
-        };
-        const transfer = getTransfer(props);
-
-        const selectAllNode = transfer.find(`button.${BASE_CLASS_PREFIX}-transfer-header-all`).at(0);
-
-        selectAllNode.simulate('click');
-        selectAllNode.simulate('click');
-
-        expect(spyOnChange.calledTwice).toEqual(true);
-        expect(spyOnChange.firstCall.args).toHaveLength(2);
-        expect(spyOnChange.firstCall.args[0]).toHaveLength(defaultItems.length);
-        expect(spyOnChange.firstCall.args[1]).toHaveLength(defaultItems.length);
-
-        expect(spyOnChange.secondCall.args).toHaveLength(2);
-        expect(spyOnChange.secondCall.args[0]).toHaveLength(0);
-        expect(spyOnChange.secondCall.args[1]).toHaveLength(0);
-
-    });
-
-    it('clear all', () => {
-        const spyOnChange = spy();
-        let props = {
-            dataSource: defaultItems,
-            onChange: spyOnChange,
-            defaultValue: defaultItems.map(i=>i.value),
-        };
-        const transfer = getTransfer(props);
-        const clearAllNode = transfer.find(`button.${BASE_CLASS_PREFIX}-transfer-header-all`).at(1);
-        clearAllNode.simulate('click');
-
-        expect(spyOnChange.calledOnce).toEqual(true);
-        expect(spyOnChange.firstCall.args).toHaveLength(2);
-        expect(spyOnChange.firstCall.args[0]).toHaveLength(0);
-        expect(spyOnChange.firstCall.args[1]).toHaveLength(0);
-    });
-
-    it('group transfer render', () => {
-        const spyOnChange = spy();
-        const spyOnSearch = spy();
-        const props = {
-            type: 'groupList',
-            defaultValue: [6],
-            dataSource: dataWithGroup,
-            onChange: spyOnChange,
-            onSearch: spyOnSearch,
-        };
-        const transfer = getTransfer(props);
-        expect(transfer.exists(`.${BASE_CLASS_PREFIX}-transfer`)).toEqual(true);
-    });
-
-    it('tree transfer render', () => {
-        const spyOnChange = spy();
-        const spyOnSearch = spy();
-        const props = {
-            type: 'treeList',
-            draggable: true,
-            dataSource: treeData,
-            value: ['Shanghai'],
-            showPath: true,
-            onChange: spyOnChange,
-            onSearch: spyOnSearch,
-        };
-        const transfer = getTransfer(props);
-
-        const treeNode = transfer.find(`li.${BASE_CLASS_PREFIX}-tree-option`).at(0);
-
-        treeNode.simulate('click');
-
-        const inputNode = transfer.find(`.${BASE_CLASS_PREFIX}-transfer-filter input`).at(0);
-        const env = { target: { value: '1' } };
-
-        inputNode.simulate('change', env);
-
-        expect(transfer.exists(`.${BASE_CLASS_PREFIX}-transfer`)).toEqual(true);
-
-        expect(spyOnChange.calledOnce).toEqual(true);
-        expect(spyOnChange.firstCall.args).toHaveLength(2);
-        expect(spyOnChange.firstCall.args[0]).toHaveLength(4);
-        expect(spyOnChange.firstCall.args[1]).toHaveLength(4);
-
-        expect(spyOnSearch.calledOnce).toEqual(true);
-        expect(spyOnSearch.firstCall.args).toHaveLength(1);
-        expect(spyOnSearch.firstCall.args[0] === '1').toEqual(true);
-    });
-});

package/transfer/_story/transfer.scss

@@ -1,124 +0,0 @@
-.components-transfer-demo-selected-item {
-    .semi-icons-close {
-        visibility: hidden;
-        color: var(--semi-color-tertiary);
-    }
-    &:hover {
-        .semi-icons-close {
-            visibility: visible;
-        }
-    }
-}
-
-.components-transfer-demo-selected-item,
-.components-transfer-demo-source-item {
-    height: 52px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 12px;
-    &:hover {
-        background-color: var(--semi-color-fill-0);
-    }
-    .info {
-        margin-left: 8px;
-        flex-grow: 1;
-    }
-    .name {
-        font-size: 14px;
-        line-height: 20px;
-    }
-    .email {
-        font-size: 12px;
-        line-height: 16px;
-        color: var(--semi-color-text-2);
-    }
-}
-
-.component-transfer-demo-custom-panel {
-    .sp-font {
-        color: rgba(var(--semi-grey-9), 1);
-        font-size: 12px;
-        font-weight: 500;
-        line-height: 20px;
-    }
-    .empty {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    .panel-item {
-        width: 176px;
-        height: 56px;
-        border-radius: 4px;
-        margin-bottom: 8px;
-        padding: 8px 12px;
-        flex-wrap: wrap;
-        background-color: rgba(22, 24, 35, 0.03);
-        p {
-            margin: 0 12px;
-            flex-basis: 100%;
-        }
-        .panel-item-remove {
-            cursor: pointer;
-            color: var(--semi-color-primary);
-        }
-    }
-    .source-panel {
-        width: 482px;
-        height: 353px;
-        border: 1px solid var(--semi-color-border);
-        border-top: none;
-        .panel-list {
-            overflow-y: auto;
-            height: 202px;
-            display: flex;
-            margin-left: 12px;
-            margin-right: 12px;
-            flex-wrap: wrap;
-        }
-        .panel-controls {
-            margin: 10px 12px;
-            font-size: 12px;
-            line-height: 20px;
-            .semi-button {
-                margin-left: 8px;
-                font-size: 12px;
-            }
-        }
-        .panel-item {
-            margin-right: 8px;
-        }
-        margin-right: 16px;
-    }
-    .selected-panel {
-        width: 200px;
-        height: 353px;
-        .panel-main {
-            overflow-y: auto;
-            padding: 12px;
-            border: 1px solid var(--semi-color-border);
-            border-top: none;
-            height: 315px;
-            box-sizing: border-box;
-        }
-    }
-    .panel-header {
-        padding: 10px 12px;
-        border: 1px solid rgba(22, 24, 35, 0.16);
-        border-radius: 4px 4px 0 0;
-        height: 38px;
-        box-sizing: border-box;
-        background-color: var(--semi-color-tertiary-light-default);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .clear {
-            cursor: pointer;
-            color: var(--semi-color-primary);
-        }
-    }
-}