@douyinfe/semi-ui 2.4.0 → 2.5.0

package/table/_story/v2/FixedResizable/index.jsx

@@ -0,0 +1,114 @@
+import React, { useState } from 'react';
+import { Table, Avatar, Button, Space } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+const columns = [
+    {
+        title: '标题',
+        dataIndex: 'name',
+        width: 300,
+        key: 'name',
+        render: (text, record, index) => {
+            return (
+                <div>
+                    <Avatar size="small" shape="square" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>
+                    {text}
+                </div>
+            );
+        },
+    },
+    {
+        title: '大小',
+        dataIndex: 'size',
+        key: 'size',
+        width: 200,
+    },
+    {
+        title: '所有者',
+        dataIndex: 'owner',
+        key: 'owner',
+        width: 200,
+        render: (text, record, index) => {
+            return (
+                <div>
+                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
+                        {typeof text === 'string' && text.slice(0, 1)}
+                    </Avatar>
+                    {text}
+                </div>
+            );
+        },
+    },
+    {
+        title: '更新日期',
+        dataIndex: 'updateTime',
+        key: 'updateTime',
+        width: 200,
+    },
+    {
+        title: '',
+        dataIndex: 'operate',
+        key: 'operate',
+        render: () => {
+            return <IconMore />;
+        },
+    },
+];
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/650
+ */
+App.storyName = 'fixed resizable column width bug';
+App.parameters = { chromatic: { disableSnapshot: true } };
+function App() {
+    const [cols, setCols] = useState(columns);
+
+    const onClickHandle = () => {
+        const localCols = [...cols].filter((i, index) => index !== 1);
+        setCols(localCols);
+    };
+
+    const data = [
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red',
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        },
+    ];
+
+    return (
+        <>
+            <Space>
+                <Button onClick={onClickHandle}>减少一列</Button>
+                <Button theme="solid" onClick={() => setCols(columns)}>
+                    reset
+                </Button>
+            </Space>
+            <Table columns={cols} dataSource={data} pagination={false} resizable />
+        </>
+    );
+}
+
+export default App;

package/table/_story/v2/defaultFilteredValue.tsx

@@ -0,0 +1,123 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Table, Avatar, Button } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+import { ColumnProps, ChangeInfoFilter } from '@douyinfe/semi-ui/table';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+function App() {
+    const [dataSource, setData] = useState([]);
+    const [filteredValue, setFilteredValue] = useState(['Semi Pro 设计稿']);
+
+    const scroll = useMemo(() => ({ y: 300 }), []);
+
+    const columns: ColumnProps[] = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            filters: [
+                {
+                    text: 'Semi Design 设计稿',
+                    value: 'Semi Design 设计稿',
+                },
+                {
+                    text: 'Semi Pro 设计稿',
+                    value: 'Semi Pro 设计稿',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+            sorter: (a, b) => a.name.length - b.name.length > 0 ? 1 : -1,
+            // filterMultiple: false,
+            // filteredValue: filteredValue,
+            defaultFilteredValue: filteredValue,
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+            render: (text) => `${text} KB`
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>{typeof text === 'string' && text.slice(0, 1)}</Avatar>
+                        {text}
+                    </div>
+                );
+            }
+    
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+            sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1,
+            render: (value) => {
+                return dateFns.format(new Date(value), 'yyyy-MM-dd');
+            }
+        }
+    ];
+
+    const getData = (total) => {
+        const data = [];
+        for (let i = 0; i < total; i++) {
+            const isSemiDesign = i % 2 === 0;
+            const randomNumber = (i * 1000) % 199;
+            data.push({
+                key: '' + i,
+                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                updateTime: new Date().valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red'
+            });
+        }
+        return data;
+    };
+
+    const handleFilterChange = (filters: ChangeInfoFilter<any>[]) => {
+        console.log('filters', filters);
+        if (Array.isArray(filters) && filters.length) {
+            const { filteredValue } = filters.find(filter => filter.dataIndex === 'name');
+            setFilteredValue(filteredValue);
+        }
+    };
+
+    const handleChange = (options) => {
+        const { filters } = options;
+        handleFilterChange(filters);
+    };
+
+    const toggleChangeData = () => {
+        const length = dataSource.length;
+        const newData = getData(length === 46 ? 25 : 46);
+        setData(newData);
+    };
+
+    useEffect(() => {
+        const data = getData(46);
+        setData(data);
+    }, []);
+
+    return (
+        <div>
+            <Button onClick={toggleChangeData}>toggle change dataSource (46/25)</Button>
+            <Table columns={columns} dataSource={dataSource} scroll={scroll} onChange={handleChange} />
+        </div>
+    );
+}
+
+App.storyName = 'defaultFilteredValue';
+export default App;

package/table/_story/v2/index.js

@@ -0,0 +1,5 @@
+export { default as DefaultFilteredValue } from './defaultFilteredValue';
+export { default as FixedColumnsChange } from './FixedColumnsChange';
+export { default as FixedZIndex } from './FixedZIndex';
+export { default as FixedHeaderMerge } from './FixedHeaderMerge';
+export { default as FixedResizable } from './FixedResizable';

package/table/interface.ts

@@ -79,6 +79,7 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     className?: string;
     colSpan?: number;
     dataIndex?: string;
+    defaultFilteredValue?: any[];
     defaultSortOrder?: SortOrder;
     filterChildrenRecord?: boolean;
     filterDropdown?: React.ReactNode;

package/tabs/interface.ts

@@ -58,7 +58,7 @@ export interface TabBarProps {
 export interface TabPaneProps {
     className?: string;
     disabled?: boolean;
-    icon?: string;
+    icon?: ReactNode;
     itemKey?: string;
     style?: CSSProperties;
     tab?: ReactNode;

package/timePicker/TimePicker.tsx

@@ -449,6 +449,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
             panelFooter,
             rangeSeparator,
             onOpenChange,
+            onChangeWithDateFirst,
             popupClassName: propPopupClassName,
             hideDisabledOptions,
             use12Hours,

package/tooltip/__test__/tooltip.test.js

@@ -72,8 +72,8 @@ describe(`Tooltip`, () => {
         expect(elem.state(`visible`)).toBe(true);
 
         // click outside
-        document.body.click();
-        // document.dispatchEvent(new Event('mousedown', { bubbles: true, cancelable: true }));
+        // document.body.click();
+        document.dispatchEvent(new Event('mousedown', { bubbles: true, cancelable: true }));
         // demo.find(`#${triggerId}`)
         //     .at(0)
         //     .simulate(`mouseDown`);
@@ -88,7 +88,8 @@ describe(`Tooltip`, () => {
         // unmount elem
         demo.unmount();
         await sleep(100);
-        document.body.click();
+        // document.body.click();
+        document.dispatchEvent(new Event('mousedown', { bubbles: true, cancelable: true }));
         expect(document.getElementsByClassName(`${BASE_CLASS_PREFIX}-tooltip-wrapper`).length).toBe(0);
     });
 
@@ -165,7 +166,8 @@ describe(`Tooltip`, () => {
         expect(refFn.called).toBeTruthy();
 
         // click outside
-        document.body.click();
+        // document.body.click();
+        document.dispatchEvent(new Event('mousedown', { bubbles: true, cancelable: true }));
         await sleep(100);
         expect(
             demo
@@ -290,6 +292,48 @@ describe(`Tooltip`, () => {
             expect(document.querySelector(`.${BASE_CLASS_PREFIX}-tooltip-wrapper`).getAttribute('x-placement')).toBe(position);
         }
     });
+
+  it(`test click outside handler`, async () => {
+    const containerId = `container`;
+
+    const demo = mount(
+      <div style={{ height: 480, width: 320 }}>
+        <div id={containerId}>Hello Semi</div>
+        <Tooltip
+          content='Content'
+          trigger='click'
+        >
+          <Button >Click here</Button>
+        </Tooltip>
+      </div>
+    );
+
+    const toolTipElem = demo.find(Tooltip);
+    const buttonElem = demo.find(Button);
+    // click inside
+    buttonElem.simulate('click');
+    toolTipElem.update();
+    await sleep(100);
+    expect(toolTipElem.state(`visible`)).toBe(true);
+
+    // click outside
+    // document.body.click();
+    document.dispatchEvent(new Event('mousedown', { bubbles: true, cancelable: true }));
+    toolTipElem.update();
+    await sleep(100);
+    expect(toolTipElem.state('visible')).toBe(false);
+
+    // click button to show tooltip
+    buttonElem.simulate('click');
+    toolTipElem.update();
+    await sleep(100);
+    expect(toolTipElem.state('visible')).toBe(true);
+
+    document.getElementById(containerId).dispatchEvent(new Event('mousedown', { bubbles: true, cancelable: true }));
+    toolTipElem.update();
+    await sleep(100);
+    expect(toolTipElem.state('visible')).toBe(false);
+  });
 });
 
 it('wrapperClassName', () => {

package/tooltip/_story/tooltip.stories.js

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import Tooltip from '../index';
 import './story.scss';
-import { Tag, Icon, IconButton, Switch, Checkbox, Radio, Button, Select, InputNumber } from '@douyinfe/semi-ui';
+import { Tag, Icon, IconButton, Switch, Checkbox, Radio, Button, Select, InputNumber, Space } from '@douyinfe/semi-ui';
 
 import InTableDemo from './InTable';
 import EdgeDemo from './Edge';
@@ -736,3 +736,85 @@ export const AutoAdjustWithSpacing = () => {
 AutoAdjustWithSpacing.story = {
   name: 'AutoAdjustWithSpacing',
 };
+
+/**
+ * Chromatic UI test
+ */
+export const leftTopOverDemo = () => {
+    const [visible, setVisible] = useState(true);
+    const content = (
+        <div style={{ height: 200, width: 200 }}>
+            Semi Design
+        </div>
+    );
+
+    const commonProps = {
+        content,
+        trigger: 'click',
+        showArrow: false,
+        visible,
+        trigger: 'custom',
+        motion: false,
+    };
+    const buttonStyle = {
+        width: 200,
+    };
+
+    return (
+        <div data-cy='wrapper'>
+            <Button onClick={() => setVisible(!visible)}>toggle visible</Button>
+            <div style={{ paddingTop: 200 }}>
+                <Space spacing={80}>
+                    <Tooltip {...commonProps} position='leftTopOver' >
+                        <Button data-cy='leftTopOver' style={buttonStyle}>leftTopOver</Button>
+                    </Tooltip>
+                    <Tooltip {...commonProps} position='leftBottomOver'>
+                        <Button data-cy='leftBottomOver' style={buttonStyle}>leftBottomOver</Button>
+                    </Tooltip>
+                    <Tooltip {...commonProps} position='rightTopOver'>
+                        <Button data-cy='rightTopOver' style={buttonStyle}>rightTopOver</Button>
+                    </Tooltip>
+                    <Tooltip {...commonProps} position='rightBottomOver'>
+                        <Button data-cy='rightBottomOver' style={buttonStyle}>rightBottomOver</Button>
+                    </Tooltip>
+                </Space>
+            </div>
+        </div>
+    )
+};
+leftTopOverDemo.storyName = `leftTopOver visible`;
+leftTopOverDemo.parameters = { 
+    chromatic: {
+        disableSnapshot: false,
+        delay: 3000,
+        viewports: [1200]
+    }
+};
+
+/**
+ * Cypress test
+ */
+export const leftTopOverAutoAdjustOverflow = () => {
+    const content = (
+        <div style={{ height: 200, width: 200 }}>
+            Semi Design
+        </div>
+    );
+
+    const commonProps = {
+        content,
+        trigger: 'click',
+        showArrow: false,
+    };
+
+    return (
+        <div data-cy='wrapper' style={{ width: '200vw', height: '200vw', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div>
+                <Tooltip {...commonProps} position='leftTopOver' >
+                    <Button data-cy='leftTopOver' style={{ width: 200 }}>leftTopOver</Button>
+                </Tooltip>
+            </div>
+        </div>
+    )
+};
+leftTopOverAutoAdjustOverflow.storyName = `leftTopOver autoAdjustOverflow`;

package/tooltip/index.tsx

@@ -280,7 +280,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
             getDocumentElementBounding: () => document.documentElement.getBoundingClientRect(),
             setPosition: ({ position, ...style }: { position: Position }) => {
                 this.setState(
-                    { 
+                    {
                         containerStyle: { ...this.state.containerStyle, ...style },
                         placement: position,
                         isPositionUpdated: true
@@ -326,11 +326,11 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                         cb();
                     }
                 };
-                document.addEventListener('click', this.clickOutsideHandler, false);
+                document.addEventListener('mousedown', this.clickOutsideHandler, { capture: true });
             },
             unregisterClickOutsideHandler: () => {
                 if (this.clickOutsideHandler) {
-                    document.removeEventListener('click', this.clickOutsideHandler, false);
+                    document.removeEventListener('mousedown', this.clickOutsideHandler, { capture: true });
                     this.clickOutsideHandler = null;
                 }
             },
@@ -661,4 +661,4 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     }
 }
 
-export { Position };
+export { Position };

package/tree/__test__/treeMultiple.test.js

@@ -357,6 +357,100 @@ describe('Tree', () => {
         ).toEqual(true);
     });
 
+    it('unRelated', () => {
+        const spyOnChange = sinon.spy(() => { });
+        const tree = getTree({
+            defaultExpandAll: true,
+            onChange: spyOnChange,
+            checkRelation: 'unRelated',
+        });
+        const nodelevel2 = tree.find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`);
+        const selectedNode = nodelevel2.at(0);
+        selectedNode.simulate('click');
+        expect(spyOnChange.calledOnce).toBe(true);
+        expect(spyOnChange.calledWithMatch(['Zhongguo'])).toEqual(true);
+        // Note: selectedNode cannot be used directly here. selectedNode is the original node in the unselected state
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-checked`)
+        ).toEqual(true);
+        const nodelevel3 = tree.find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-3`);
+        expect(
+            nodelevel3
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-unChecked` )
+        ).toEqual(true);
+        expect(
+            nodelevel3
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-unChecked` )
+        ).toEqual(true);  
+    });
+
+    it('unRelated + value', () => {
+        const tree = getTree({
+            defaultExpandAll: true,
+            checkRelation: 'unRelated',
+            value: 'Zhongguo'
+        });
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-checked`)
+        ).toEqual(true);
+        const nodelevel3 = tree.find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-3`);
+        expect(
+            nodelevel3
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-unChecked` )
+        ).toEqual(true);
+        expect(
+            nodelevel3
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-unChecked` )
+        ).toEqual(true);  
+    });
+
+    it('unRelated + defaultValue', () => {
+        const tree = getTree({
+            defaultExpandAll: true,
+            checkRelation: 'unRelated',
+            defaultValue: 'Zhongguo'
+        });
+        expect(
+            tree
+            .find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-checked`)
+        ).toEqual(true);
+        const nodelevel3 = tree.find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-3`);
+        expect(
+            nodelevel3
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-unChecked` )
+        ).toEqual(true);
+        expect(
+            nodelevel3
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-unChecked` )
+        ).toEqual(true);  
+    });
+
+    it('unRelated + onSelect', () => {
+        const spyOnSelect = sinon.spy(() => { });
+        const tree = getTree({
+            defaultExpandAll: true,
+            onSelect: spyOnSelect,
+            checkRelation: 'unRelated',
+        });
+        const nodelevel2 = tree.find(`.${BASE_CLASS_PREFIX}-tree-option.${BASE_CLASS_PREFIX}-tree-option-level-2`);
+        const selectedNode = nodelevel2.at(0);
+        selectedNode.simulate('click');
+        expect(spyOnSelect.calledOnce).toBe(true);
+        // onSelect first args is key, not value
+        expect(spyOnSelect.calledWithMatch('zhongguo')).toEqual(true);
+    });
+
     it('controlled: leaf values show correct', () => {
         let tree = getTree({
             value: 'Beijing'