@douyinfe/semi-ui 2.3.0 → 2.4.1

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
+
+App.storyName = 'fixed z-index bug';
+export default function App() {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 150,
+            fixed: true,
+            filters: [
+                {
+                    text: 'King 3',
+                    value: 'King 3',
+                },
+                {
+                    text: 'King 4',
+                    value: 'King 4',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            width: 150,
+            sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+        },
+        {
+            title: 'Address',
+            width: 200,
+            dataIndex: 'address',
+        },
+        {
+            title: 'Description',
+            // width: 400,
+            dataIndex: 'description',
+        },
+        {
+            fixed: 'right',
+            width: 250,
+            render: (text, record) => <Tooltip content={record.description}><Tag color="green">Show Info</Tag></Tooltip>
+        }
+    ];
+
+    let data = [];
+
+    const rowSelection = {
+        onChange: (selectedRowKeys, selectedRows) => {
+            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Michael James', // Column configuration not to be checked
+            name: record.name,
+        }),
+        // fixed: true,
+    };
+
+    for (let i = 0; i < 46; i++) {
+        let age = (i * 1000) % 149;
+        let name = `Edward King ${i}`;
+        data.push({
+            key: `${ i}`,
+            name,
+            age,
+            address: `London, Park Lane no. ${i}`,
+            description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
+        });
+    }
+
+    const scroll = { y: 300, x: 1500 };
+
+    return (
+        <div style={{ position: 'relative', height: '100vh' }}>
+            <div style={{ height: 60, background: 'red', position: 'absolute', top: 0, left: 0, right: 0, zIndex: 2 }}>
+                Fixed Header
+            </div>
+            <Table
+                columns={columns}
+                dataSource={data}
+                scroll={scroll}
+                rowSelection={rowSelection}
+            />
+        </div>
+    );
+}

package/timePicker/TimePicker.tsx

@@ -90,6 +90,7 @@ export type TimePickerProps = {
     zIndex?: number | string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: TimePickerAdapter['notifyChange'];
+    onChangeWithDateFirst?: boolean;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onOpenChange?: (open: boolean) => void;
 };
@@ -187,6 +188,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         onFocus: noop,
         onBlur: noop,
         onChange: noop,
+        onChangeWithDateFirst: true,
         use12Hours: false,
         focusOnOpen: false,
         onKeyDown: noop,
@@ -257,7 +259,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
                 }
             },
             notifyOpenChange: (...args) => this.props.onOpenChange(...args),
-            notifyChange: (...args) => this.props.onChange && this.props.onChange(...args),
+            notifyChange: (agr1, arg2) => this.props.onChange && this.props.onChange(agr1, arg2),
             notifyFocus: (...args) => this.props.onFocus && this.props.onFocus(...args),
             notifyBlur: (...args) => this.props.onBlur && this.props.onBlur(...args),
             isRangePicker: () => this.props.type === strings.TYPE_TIME_RANGE_PICKER,
@@ -447,6 +449,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
             panelFooter,
             rangeSeparator,
             onOpenChange,
+            onChangeWithDateFirst,
             popupClassName: propPopupClassName,
             hideDisabledOptions,
             use12Hours,

package/timePicker/__test__/timePicker.test.js

@@ -22,11 +22,13 @@ describe(`TimePicker`, () => {
         const defaultMinute = 24;
         const defaultSeconds = 18;
 
-        const onFoucs = sinon.spy();
+        const onFocus = sinon.spy();
+        const onChange = sinon.spy();
 
         const elem = mount(
             <TimePicker
-                onFocus={onFoucs}
+                onChange={onChange}
+                onFocus={onFocus}
                 panelHeader={<strong>Select Time</strong>}
                 locale={Locale.TimePicker}
                 localeCode={Locale.code}
@@ -59,7 +61,7 @@ describe(`TimePicker`, () => {
         // focus
         elem.find(`input`).simulate('focus');
         await sleep(200);
-        expect(onFoucs.calledOnce).toBeTruthy();
+        expect(onFocus.calledOnce).toBeTruthy();
 
         // input value
         const newInputHour = 10;
@@ -82,6 +84,12 @@ describe(`TimePicker`, () => {
 
         await sleep(200);
         expect(elem.state('open')).toBe(false);
+
+        expect(onChange.called).toBeTruthy();
+        const args = onChange.getCall(0).args;
+        expect(args[0] instanceof Date).toBe(true);
+        expect(typeof args[1]).toBe('string');
+        elem.unmount();
     });
 
     it(`test controlled value`, async () => {
@@ -113,6 +121,7 @@ describe(`TimePicker`, () => {
         let currentDate0 = elem0.state('value')[0];
 
         expect(currentDate0.getMinutes()).toBe(defaultMinute);
+        elem0.unmount();
     });
 
     it(`test controlled value with onchange`, async () => {
@@ -149,6 +158,7 @@ describe(`TimePicker`, () => {
 
         let currentDate1 = elem1.state('value')[0];
         expect(currentDate1.getMinutes()).toBe(newInputMinute);
+        elem1.unmount();
     });
 
     it(`test controlled open`, async () => {
@@ -227,6 +237,7 @@ describe(`TimePicker`, () => {
         nextSelectedLi.simulate('click');
         await sleep(200);
         expect(elem.state('value')[0].getHours()).toBe(newHour);
+        elem.unmount();
     });
 
     it('test isTimeFormatLike function', () => {
@@ -279,5 +290,33 @@ describe(`TimePicker`, () => {
         const args = onChange.getCall(0).args;
         expect(args[0]).toBe(undefined);
         expect(args[1]).toBe('');
+        elem.unmount();
+    });
+
+    it('test onChangeWithDateFirst=false', async () => {
+        const onChange = sinon.spy();
+        let props = {
+            defaultValue: "10:23:15",
+            onChange,
+            defaultOpen: true,
+            onChangeWithDateFirst: false,
+            autofocus: true,
+            locale: Locale.TimePicker,
+            localeCode: Locale.code,
+            scrollItemProps: { cycled: false }
+        };
+        const elem = mount(<TimePicker {...props} />);
+        // click minute
+        const minuteUl = elem.find(`.${BASE_CLASS_PREFIX}-timepicker-panel-list-minute .${BASE_CLASS_PREFIX}-scrolllist-list-outer ul`);
+        const minuteLis = minuteUl.find(`li`);
+
+        minuteUl.simulate('click', { target: minuteLis.at(0).getDOMNode(), nativeEvent: null });
+        await sleep(200);
+
+        expect(onChange.called).toBeTruthy();
+        const args = onChange.getCall(0).args;
+        expect(typeof args[0]).toBe('string');
+        expect(args[1] instanceof Date).toBe(true);
+        elem.unmount();
     });
 });

package/timePicker/_story/timepicker.stories.js

@@ -262,3 +262,21 @@ export const ShowClear = () => (
     />
   </>
 );
+
+
+export const TimePickerWithOnChangeWithDateFirst = () => {
+  return (
+    <div>
+      onChangeWithDateFirst=true (default)
+      <TimePicker onChange={(...val) => console.log(...val)} />
+      <br />
+      onChangeWithDateFirst=false
+      <TimePicker onChangeWithDateFirst={false} onChange={(...val) => console.log(...val)} />
+      
+    </div>
+  );
+};
+
+TimePickerWithOnChangeWithDateFirst.story = {
+  name: 'OnChangeWithDateFirst',
+};

package/tree/treeNode.tsx

@@ -3,7 +3,7 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/tree/constants';
 import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
-import { debounce, isFunction, isString, get } from 'lodash';
+import { debounce, isFunction, isString, get, isEmpty } from 'lodash';
 import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@douyinfe/semi-icons';
 import { Checkbox } from '../checkbox';
 import TreeContext from './treeContext';
@@ -392,7 +392,14 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
                     ...dragProps
                 });
             } else {
-                return customLabel;
+                if (isEmpty(style)) {
+                    return customLabel;
+                } else {
+                    // In virtualization, props.style will contain location information
+                    return React.cloneElement(customLabel, {
+                        style: { ...get(customLabel, ['props', 'style']), ...style }
+                    });
+                }
             }
         }
         const labelCls = cls(`${prefixcls}-label`, {

package/treeSelect/__test__/treeSelect.test.js

@@ -97,6 +97,26 @@ const treeData2 = [
     }
 ];
 
+const treeData3 = [
+    {
+        label: '亚洲',
+        value: 'Asia',
+        key: '0',
+        children: [
+            {
+                label: '中国',
+                value: 'China',
+                key: '0-0',
+            },
+        ],
+    },
+    {
+        label: '北美洲',
+        value: 'North America',
+        key: '1',
+    }
+];
+
 let commonProps = {
     motion: false,
     motionExpand: false,
@@ -780,4 +800,141 @@ describe('TreeSelect', () => {
             done();
         }, 100);
     });
+
+    it('treeData is updated should not clear value when uncontrolled mode and single selection', () => {
+        const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => { } } }
+        const treeSelect = getTreeSelect({
+            defaultExpandAll: true
+        });
+        treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-option-list .${BASE_CLASS_PREFIX}-tree-option`)
+            .at(2)
+            .simulate('click', nativeEvent);
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeChildren});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeData2});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('');
+    });
+
+    it('treeData is updated should not clear value when uncontrolled mode and multiple selection', () => {
+        const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => { } } }
+        const treeSelect = getTreeSelect({
+            defaultExpandAll: true,
+            multiple: true,
+        });
+        treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-option-list .${BASE_CLASS_PREFIX}-tree-option`)
+            .at(2)
+            .simulate('click', nativeEvent);
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeChildren});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeData2});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .length
+        ).toEqual(0);
+    });
+
+    it('treeData is updated should not clear value when controlled mode and single selection', () => {
+        const treeSelect = getTreeSelect({
+            defaultExpandAll: true,
+            value: 'Beijing'
+        });
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeChildren});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeData3});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select .${BASE_CLASS_PREFIX}-tree-select-selection span`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('');
+    });
+
+    it('treeData is updated should not clear value when controlled mode and multiple selection', () => {
+        const treeSelect = getTreeSelect({
+            defaultExpandAll: true,
+            multiple: true,
+            value: 'Beijing'
+        });
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeChildren});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .getDOMNode()
+            .textContent
+        ).toEqual('北京');
+        treeSelect.setProps({ treeData: treeData3});
+        treeSelect.update();
+        expect(
+            treeSelect
+            .find(`.${BASE_CLASS_PREFIX}-tree-select-selection .${BASE_CLASS_PREFIX}-tag-group .${BASE_CLASS_PREFIX}-tag`)
+            .at(0)
+            .find(`.${BASE_CLASS_PREFIX}-tag-content`)
+            .length
+        ).toEqual(0);
+    });
+
 })

package/treeSelect/index.tsx

@@ -23,7 +23,8 @@ import {
     getValueOrKey,
     normalizeKeyList,
     calcDisabledKeys,
-    normalizeValue
+    normalizeValue,
+    updateKeys,
 } from '@douyinfe/semi-foundation/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/treeSelect/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
@@ -362,7 +363,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         if (
             treeData &&
             props.motion &&
-            !isEqual(new Set(Object.keys(newState.keyEntities)), new Set(Object.keys(prevState.keyEntities)))
+            !isEqual(Object.keys(newState.keyEntities), Object.keys(prevState.keyEntities))
         ) {
             if (prevProps && props.motion) {
                 newState.motionKeys = new Set([]);
@@ -432,11 +433,15 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 );
             } else if (treeData) {
                 // If `treeData` changed, we also need check it
-                newState.selectedKeys = findKeysForValues(
-                    normalizeValue(props.value, withObject) || '',
-                    valueEntities,
-                    isMultiple
-                );
+                if (props.value) {
+                    newState.selectedKeys = findKeysForValues(
+                        normalizeValue(props.value, withObject) || '',
+                        valueEntities,
+                        isMultiple
+                    );
+                } else {
+                    newState.selectedKeys = updateKeys(prevState.selectedKeys, keyEntities);
+                }
             }
         } else {
             // checkedKeys: multiple mode controlled || data changed
@@ -456,11 +461,15 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 );
             } else if (treeData) {
                 // If `treeData` changed, we also need check it
-                checkedKeyValues = findKeysForValues(
-                    normalizeValue(props.value, withObject) || [],
-                    valueEntities,
-                    isMultiple
-                );
+                if (props.value) {
+                    checkedKeyValues = findKeysForValues(
+                        normalizeValue(props.value, withObject) || [],
+                        valueEntities,
+                        isMultiple
+                    );
+                } else {
+                    checkedKeyValues = updateKeys(prevState.checkedKeys, keyEntities);
+                }
             }
 
             if (checkedKeyValues) {

package/typography/_story/typography.stories.js

@@ -309,6 +309,14 @@ export const EllipsisMultiple = () => (
       Web 应用。 区别于其他的设计系统而言，Semi Design
       以用户中心、内容优先、设计人性化为设计理念，具有四大优势。
     </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-line' }}>
+      {'这是一个多行截断的\n例子： Semi Design 是由互娱社区\n前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-wrap' }}>
+      {'这是一个多行截断的\n例子： Semi Des    ign 是由互               娱社区\n前端团队与 UED      团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
   </div>
 );
 

package/typography/util.tsx

@@ -63,7 +63,6 @@ const getRenderText = (
 
     // clean up css overflow
     ellipsisContainer.style.textOverflow = 'clip';
-    ellipsisContainer.style.whiteSpace = 'normal';
     ellipsisContainer.style.webkitLineClamp = 'none';
 
     // Render fake container