@douyinfe/semi-ui 2.10.1 → 2.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.10.1",
+    "version": "2.10.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.10.1",
-        "@douyinfe/semi-animation-react": "2.10.1",
-        "@douyinfe/semi-foundation": "2.10.1",
-        "@douyinfe/semi-icons": "2.10.1",
-        "@douyinfe/semi-illustrations": "2.10.1",
-        "@douyinfe/semi-theme-default": "2.10.1",
+        "@douyinfe/semi-animation": "2.10.2",
+        "@douyinfe/semi-animation-react": "2.10.2",
+        "@douyinfe/semi-foundation": "2.10.2",
+        "@douyinfe/semi-icons": "2.10.2",
+        "@douyinfe/semi-illustrations": "2.10.2",
+        "@douyinfe/semi-theme-default": "2.10.2",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "1c84b585ff43db35b286e8c24f8333e4170d015c",
+    "gitHead": "00b27ff43fe6ed5d775d5849bd0adc4c4c5ea231",
     "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.10.1",
+        "@douyinfe/semi-scss-compile": "2.10.2",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/scrollList/_story/ScrollList/index.js

@@ -11,7 +11,7 @@ class ScrollListDemo extends React.Component {
         };
 
         this.list = new Array(20).fill(0).map((itm, index) => {
-            return { value: index, disabled: Math.random() + 0.2 > 1 };
+            return { value: index };
         });
     }
 

package/select/index.tsx

@@ -28,6 +28,7 @@ import { isSemiIcon } from '../_utils';
 import { Subtract } from 'utility-types';
 
 import warning from '@douyinfe/semi-foundation/utils/warning';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
 import '@douyinfe/semi-foundation/select/select.scss';
 import { Locale } from '../locale/interface';
@@ -340,7 +341,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             isHovering: false,
         };
         /* Generate random string */
-        this.selectOptionListID = Math.random().toString(36).slice(2);
+        this.selectOptionListID = '';
         this.virtualizeListRef = React.createRef();
         this.inputRef = React.createRef();
         this.triggerRef = React.createRef();
@@ -559,6 +560,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
     componentDidMount() {
         this.foundation.init();
+        this.selectOptionListID = getUuidShort();
     }
 
     componentWillUnmount() {

package/table/Body/BaseRow.tsx

@@ -153,6 +153,21 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         this.foundation = new TableRowFoundation(this.adapter);
     }
 
+    componentDidMount() {
+        // fix #745
+        // didmount/willUnmount may be called twice when React.StrictMode is true in React 18, we need to ensure that this.cache.customRowProps is correct
+        const {
+            onRow,
+            index,
+            record,
+        } = this.props;
+        const customRowProps = this.adapter.getCache('customRowProps');
+        if (typeof customRowProps === 'undefined') {
+            const { className: customClassName, style: customStyle, ...rowProps } = onRow(record, index) || {};
+            this.adapter.setCache('customRowProps', { ...rowProps });
+        }
+    }
+
     shouldComponentUpdate(nextProps: BaseRowProps) {
         /**
           * Shallow comparison of incoming props to simulate PureComponent

package/table/HeadTable.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 
 import ColGroup from './ColGroup';
 import TableHeader from './TableHeader';
-import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps } from './interface';
+import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps, OnHeaderRow } from './interface';
 
 export interface HeadTableProps {
     [x: string]: any;
@@ -23,6 +23,7 @@ export interface HeadTableProps {
     selectedRowKeysSet: Set<any>;
     showHeader?: boolean;
     onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+    onHeaderRow?: OnHeaderRow<any>;
 }
 
 /**
@@ -46,6 +47,7 @@ class HeadTable extends React.PureComponent<HeadTableProps> {
         selectedRowKeysSet: PropTypes.instanceOf(Set).isRequired, // Useful when update is selected
         showHeader: PropTypes.bool,
         onDidUpdate: PropTypes.func,
+        onHeaderRow: PropTypes.func,
     };
 
     static defaultProps = {

package/table/Table.tsx

@@ -1089,6 +1089,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             components,
             headerRef,
             bodyRef,
+            onHeaderRow,
             rowSelection,
             dataSource,
             bodyHasScrollBar,
@@ -1110,6 +1111,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                     scroll={scroll}
                     showHeader={showHeader}
                     selectedRowKeysSet={selectedRowKeysSet}
+                    onHeaderRow={onHeaderRow}
                     dataSource={dataSource}
                     bodyHasScrollBar={bodyHasScrollBar}
                 />

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

@@ -0,0 +1,134 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { Table, Avatar, Toast } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+App.storyName = 'fix onHeaderRow';
+
+/**
+ * test with cypress
+ */
+export default function App() {
+    const [dataSource, setData] = useState([]);
+    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',
+            fixed: true,
+            width: 250,
+            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),
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            width: 200,
+            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
+            render: text => `${text} KB`,
+        },
+        {
+            title: '所有者',
+            dataIndex: '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',
+            width: 200,
+            sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
+            render: value => {
+                return dateFns.format(new Date(value), 'yyyy-MM-dd');
+            },
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            fixed: 'right',
+            align: 'center',
+            width: 100,
+        },
+    ];
+
+    const scroll = useMemo(() => ({ y: 300, x: 1200 }), []);
+    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,
+            }),
+            fixed: true,
+        }),
+        []
+    );
+
+    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().valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red',
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return (
+        <Table
+            onHeaderRow={(columns, index) => {
+                return {
+                    onClick: event => {
+                        console.log(event);
+                        Toast.info('header click');
+                    }, // 点击表头行
+                };
+            }}
+            columns={columns}
+            dataSource={dataSource}
+            rowSelection={rowSelection}
+            scroll={scroll}
+        />
+    );
+}

package/table/_story/v2/index.js

@@ -4,4 +4,5 @@ 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';

package/upload/_story/upload.stories.js

@@ -581,6 +581,7 @@ export const Draggable = () => (
     <Upload
       {...commonProps}
       style={{ marginTop: 10, height: 300 }}
+      // directory 
       draggable={true}
       dragMainText={'点击上传文件或拖拽文件到这里'}
     ></Upload>