@douyinfe/semi-ui 2.17.0-beta.0 → 2.17.1

package/empty/index.tsx

@@ -79,17 +79,17 @@ export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
         const { className, image, description, style, title, imageStyle, children, layout, darkModeImage } = this.props;
 
         const alt = typeof description === 'string' ? description : 'empty';
-        const imgSrc = this.state.mode && darkModeImage ? darkModeImage : image;
+        const imgSrc = ((this.state.mode === 'dark') && darkModeImage) ? darkModeImage : image;
         let imageNode = null;
         if (typeof imgSrc === 'string') {
-            imageNode = <img alt={alt} src={imgSrc} />;
+            imageNode = <img alt={alt} src={imgSrc}/>;
         } else if (imgSrc && 'id' in (imgSrc as any)) {
             imageNode = (
                 <svg
                     // className={iconCls}
                     aria-hidden="true"
                 >
-                    <use xlinkHref={`#${(imgSrc as any).id}`} />
+                    <use xlinkHref={`#${(imgSrc as any).id}`}/>
                 </svg>
             );
         } else {

package/lib/cjs/autoComplete/index.js

@@ -227,7 +227,7 @@ class AutoComplete extends _baseComponent.default {
       selection
     } = this.state;
     const useCustomTrigger = typeof triggerRender === 'function';
-    const outerProps = (0, _assign.default)({
+    const outerProps = (0, _assign.default)((0, _assign.default)({
       style,
       className: useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)({
         [prefixCls]: true,
@@ -236,7 +236,10 @@ class AutoComplete extends _baseComponent.default {
       onClick: this.handleInputClick,
       ref: this.triggerRef,
       id
-    }, keyboardEventSet);
+    }, keyboardEventSet), {
+      // tooltip give tabindex 0 to children by default, autoComplete just need the input get focus, so outer div's tabindex set to -1
+      tabIndex: -1
+    });
     const innerProps = {
       disabled,
       placeholder,

package/lib/cjs/cascader/index.js

@@ -801,6 +801,33 @@ class Cascader extends _baseComponent.default {
       return firstInProps || treeDataHasChange;
     };
 
+    const getRealKeys = (realValue, keyEntities) => {
+      // normallizedValue is used to save the value in two-dimensional array format
+      let normallizedValue = [];
+
+      if ((0, _isArray.default)(realValue)) {
+        normallizedValue = (0, _isArray.default)(realValue[0]) ? realValue : [realValue];
+      } else {
+        if (realValue !== undefined) {
+          normallizedValue = [[realValue]];
+        }
+      } // formatValuePath is used to save value of valuePath
+
+
+      const formatValuePath = [];
+      (0, _forEach.default)(normallizedValue).call(normallizedValue, valueItem => {
+        const formatItem = onChangeWithObject ? (0, _map.default)(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
+        formatValuePath.push(formatItem);
+      }); // formatKeys is used to save key of value
+
+      const formatKeys = [];
+      (0, _forEach.default)(formatValuePath).call(formatValuePath, v => {
+        const formatKeyItem = (0, _util.findKeysForValues)(v, keyEntities);
+        !(0, _isEmpty2.default)(formatKeyItem) && formatKeys.push(formatKeyItem);
+      });
+      return formatKeys;
+    };
+
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
     const needUpdateValue = needUpdate('value') || (0, _isEmpty2.default)(prevProps) && defaultValue;
 
@@ -817,31 +844,15 @@ class Cascader extends _baseComponent.default {
         let realKeys = prevState.checkedKeys; // when data was updated
 
         if (needUpdateValue) {
-          // normallizedValue is used to save the value in two-dimensional array format
-          let normallizedValue = [];
-          const realValue = needUpdate('value') ? value : defaultValue; // eslint-disable-next-line max-depth
-
-          if ((0, _isArray.default)(realValue)) {
-            normallizedValue = (0, _isArray.default)(realValue[0]) ? realValue : [realValue];
-          } else {
-            if (realValue !== undefined) {
-              normallizedValue = [[realValue]];
-            }
-          } // formatValuePath is used to save value of valuePath
-
-
-          const formatValuePath = [];
-          (0, _forEach.default)(normallizedValue).call(normallizedValue, valueItem => {
-            const formatItem = onChangeWithObject ? (0, _map.default)(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
-            formatValuePath.push(formatItem);
-          }); // formatKeys is used to save key of value
-
-          const formatKeys = [];
-          (0, _forEach.default)(formatValuePath).call(formatValuePath, v => {
-            const formatKeyItem = (0, _util.findKeysForValues)(v, keyEntities);
-            !(0, _isEmpty2.default)(formatKeyItem) && formatKeys.push(formatKeyItem);
-          });
-          realKeys = formatKeys;
+          const realValue = needUpdate('value') ? value : defaultValue;
+          realKeys = getRealKeys(realValue, keyEntities);
+        } else {
+          // needUpdateValue is false
+          // if treeData is updated & Cascader is controlled, realKeys should be recalculated
+          if (needUpdateTreeData && 'value' in props) {
+            const realValue = value;
+            realKeys = getRealKeys(realValue, keyEntities);
+          }
         }
 
         if ((0, _isSet2.default)(realKeys)) {

package/lib/cjs/checkbox/checkbox.js

@@ -123,7 +123,10 @@ class Checkbox extends _baseComponent.default {
   }
 
   isInGroup() {
-    return Boolean(this.context && this.context.checkboxGroup);
+    // Why do we need to determine whether there is a value in props?
+    // If there is no value in the props of the checkbox in the context of the checkboxGroup, 
+    // it will be considered not to belong to the checkboxGroup。
+    return Boolean(this.context && this.context.checkboxGroup && 'value' in this.props);
   }
 
   focus() {

package/lib/cjs/empty/index.js

@@ -88,7 +88,7 @@ class Empty extends _baseComponent.default {
       darkModeImage
     } = this.props;
     const alt = typeof description === 'string' ? description : 'empty';
-    const imgSrc = this.state.mode && darkModeImage ? darkModeImage : image;
+    const imgSrc = this.state.mode === 'dark' && darkModeImage ? darkModeImage : image;
     let imageNode = null;
 
     if (typeof imgSrc === 'string') {

package/lib/es/autoComplete/index.js

@@ -195,7 +195,7 @@ class AutoComplete extends BaseComponent {
     } = this.state;
     const useCustomTrigger = typeof triggerRender === 'function';
 
-    const outerProps = _Object$assign({
+    const outerProps = _Object$assign(_Object$assign({
       style,
       className: useCustomTrigger ? cls(className) : cls({
         [prefixCls]: true,
@@ -204,7 +204,10 @@ class AutoComplete extends BaseComponent {
       onClick: this.handleInputClick,
       ref: this.triggerRef,
       id
-    }, keyboardEventSet);
+    }, keyboardEventSet), {
+      // tooltip give tabindex 0 to children by default, autoComplete just need the input get focus, so outer div's tabindex set to -1
+      tabIndex: -1
+    });
 
     const innerProps = {
       disabled,

package/lib/es/cascader/index.js

@@ -742,6 +742,37 @@ class Cascader extends BaseComponent {
       return firstInProps || treeDataHasChange;
     };
 
+    const getRealKeys = (realValue, keyEntities) => {
+      // normallizedValue is used to save the value in two-dimensional array format
+      let normallizedValue = [];
+
+      if (_Array$isArray(realValue)) {
+        normallizedValue = _Array$isArray(realValue[0]) ? realValue : [realValue];
+      } else {
+        if (realValue !== undefined) {
+          normallizedValue = [[realValue]];
+        }
+      } // formatValuePath is used to save value of valuePath
+
+
+      const formatValuePath = [];
+
+      _forEachInstanceProperty(normallizedValue).call(normallizedValue, valueItem => {
+        const formatItem = onChangeWithObject ? _mapInstanceProperty(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
+        formatValuePath.push(formatItem);
+      }); // formatKeys is used to save key of value
+
+
+      const formatKeys = [];
+
+      _forEachInstanceProperty(formatValuePath).call(formatValuePath, v => {
+        const formatKeyItem = findKeysForValues(v, keyEntities);
+        !_isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
+      });
+
+      return formatKeys;
+    };
+
     const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
     const needUpdateValue = needUpdate('value') || _isEmpty(prevProps) && defaultValue;
 
@@ -758,35 +789,15 @@ class Cascader extends BaseComponent {
         let realKeys = prevState.checkedKeys; // when data was updated
 
         if (needUpdateValue) {
-          // normallizedValue is used to save the value in two-dimensional array format
-          let normallizedValue = [];
-          const realValue = needUpdate('value') ? value : defaultValue; // eslint-disable-next-line max-depth
-
-          if (_Array$isArray(realValue)) {
-            normallizedValue = _Array$isArray(realValue[0]) ? realValue : [realValue];
-          } else {
-            if (realValue !== undefined) {
-              normallizedValue = [[realValue]];
-            }
-          } // formatValuePath is used to save value of valuePath
-
-
-          const formatValuePath = [];
-
-          _forEachInstanceProperty(normallizedValue).call(normallizedValue, valueItem => {
-            const formatItem = onChangeWithObject ? _mapInstanceProperty(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
-            formatValuePath.push(formatItem);
-          }); // formatKeys is used to save key of value
-
-
-          const formatKeys = [];
-
-          _forEachInstanceProperty(formatValuePath).call(formatValuePath, v => {
-            const formatKeyItem = findKeysForValues(v, keyEntities);
-            !_isEmpty(formatKeyItem) && formatKeys.push(formatKeyItem);
-          });
-
-          realKeys = formatKeys;
+          const realValue = needUpdate('value') ? value : defaultValue;
+          realKeys = getRealKeys(realValue, keyEntities);
+        } else {
+          // needUpdateValue is false
+          // if treeData is updated & Cascader is controlled, realKeys should be recalculated
+          if (needUpdateTreeData && 'value' in props) {
+            const realValue = value;
+            realKeys = getRealKeys(realValue, keyEntities);
+          }
         }
 
         if (_isSet(realKeys)) {

package/lib/es/checkbox/checkbox.js

@@ -98,7 +98,10 @@ class Checkbox extends BaseComponent {
   }
 
   isInGroup() {
-    return Boolean(this.context && this.context.checkboxGroup);
+    // Why do we need to determine whether there is a value in props?
+    // If there is no value in the props of the checkbox in the context of the checkboxGroup, 
+    // it will be considered not to belong to the checkboxGroup。
+    return Boolean(this.context && this.context.checkboxGroup && 'value' in this.props);
   }
 
   focus() {

package/lib/es/empty/index.js

@@ -67,7 +67,7 @@ export default class Empty extends BaseComponent {
       darkModeImage
     } = this.props;
     const alt = typeof description === 'string' ? description : 'empty';
-    const imgSrc = this.state.mode && darkModeImage ? darkModeImage : image;
+    const imgSrc = this.state.mode === 'dark' && darkModeImage ? darkModeImage : image;
     let imageNode = null;
 
     if (typeof imgSrc === 'string') {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.17.0-beta.0",
+    "version": "2.17.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.17.0-beta.0",
-        "@douyinfe/semi-foundation": "2.17.0-beta.0",
-        "@douyinfe/semi-icons": "2.17.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.17.1",
+        "@douyinfe/semi-foundation": "2.17.1",
+        "@douyinfe/semi-icons": "2.17.1",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.17.0-beta.0",
+        "@douyinfe/semi-theme-default": "2.17.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +66,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "471474bb6fe0a743bc3daba532279969cc9374a5",
+    "gitHead": "e2dfadcc7f24b9af6cab08b64ac0ead052219961",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.17.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.17.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

package/table/_story/v2/FixedFilter/index.tsx

@@ -0,0 +1,106 @@
+import React, { useState, useMemo, useEffect } from 'react';
+
+// eslint-disable-next-line semi-design/no-import
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+const columns = [
+    {
+        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,
+    },
+    {
+        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');
+        }
+    }
+];
+
+App.storyName = 'Fixed filter issue 1036';
+/**
+ * test with cypress, please don't modify this story
+ */
+export default function App() {
+    const [dataSource, setData] = useState([]);
+
+    const rowSelection = useMemo(() => ({
+        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,
+        }),
+    }), []);
+    const scroll = useMemo(() => ({ y: 300 }), []);
+
+    const getData = () => {
+        const data = [];
+        for (let i = 0; i < 46; 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('2022-08-11').valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red'
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} scroll={scroll} />;
+}

package/table/_story/v2/FixedSorter/index.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+// eslint-disable-next-line semi-design/no-import
+import { Table } from '@douyinfe/semi-ui';
+// eslint-disable-next-line semi-design/no-import
+import { ChangeInfo } from '@douyinfe/semi-ui/table';
+
+const data = [
+    {
+        key: 'a',
+        group: 'yes',
+        count: 3,
+    },
+    {
+        key: 'b',
+        group: 'no',
+        count: 3,
+    },
+    {
+        key: 'c',
+        group: 'no',
+        count: 1,
+    },
+    {
+        key: 'd',
+        group: 'yes',
+        count: 1,
+    },
+    {
+        key: 'e',
+        group: 'no',
+        count: 2,
+    },
+    {
+        key: 'f',
+        group: 'yes',
+        count: 2,
+    }
+];
+
+Demo.storyName = 'fixed sorter';
+/**
+ * 保持分组顺序不变的排序方式
+ */
+function Demo() {
+    const [filtered, setFiltered] = useState([...data]);
+    console.log(filtered);
+    const columns = [
+        {
+            title: 'ID',
+            dataIndex: 'key',
+        },
+        {
+            title: 'group',
+            dataIndex: 'Group',
+            sorter: (a, b) => a.group === 'yes' ? -1 : 1,
+            // sortOrder: 'ascend'
+        },
+        {
+            title: 'Count',
+            dataIndex: 'count',
+            // sorter: true
+            sorter: (a, b) => a.count - b.count > 0 ? 1 : -1,
+        },
+    ];
+
+    const onTableChange = ({ sorter }: ChangeInfo<any>) => {
+        if (sorter) {
+            const { dataIndex, sortOrder } = sorter;
+            setFiltered(prev => [...prev].sort((a, b) => {
+                if (a.group !== b.group) {
+                    return a.group === 'yes' ? -1 : 1;
+                }
+
+                let ascendValue = -1;
+                if (dataIndex === 'count') {
+                    ascendValue = a.count - b.count > 0 ? 1 : -1;
+                }
+
+                return sortOrder === 'ascend' ? ascendValue : -ascendValue;
+            }));
+        }
+    };
+
+
+    return (
+        <div style={{ padding: '20px 0px' }}>
+            <Table
+                dataSource={filtered}
+                onChange={onTableChange}
+                rowKey="key"
+                groupBy="group"
+                columns={columns}
+                renderGroupSection={groupKey => <strong>分组 {groupKey}</strong>}
+                expandAllGroupRows
+                scroll={{ y: 480 }}
+                pagination={{ pageSize: 4 }}
+            />
+        </div>
+    );
+}
+
+export default Demo;

package/table/_story/v2/index.js

@@ -4,7 +4,9 @@ export { default as FixedZIndex } from './FixedZIndex';
 export { default as FixedHeaderMerge } from './FixedHeaderMerge';
 export { default as FixedResizable } from './FixedResizable';
 export { default as FixedExpandedRow } from './FixedExpandedRow';
-export { default as FixedMemoryLeak  } from './FixedMemoryLeak';
+export { default as FixedMemoryLeak } from './FixedMemoryLeak';
 export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';
 export { default as RadioRowSelection } from './radioRowSelection';
-export { default as FixedVirtualizedEmpty } from './FixedVirtualizedEmpty';
+export { default as FixedVirtualizedEmpty } from './FixedVirtualizedEmpty';
+export { default as FixedFilter } from './FixedFilter';
+export { default as FixedSorter } from './FixedSorter';