@douyinfe/semi-ui 2.3.1 → 2.4.0-beta.0

package/input/textarea.tsx

@@ -295,7 +295,8 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
             className,
             `${prefixCls}-textarea-wrapper`,
             {
-                [`${prefixCls}-textarea-wrapper-disabled`]: disabled || readonly,
+                [`${prefixCls}-textarea-wrapper-disabled`]: disabled,
+                [`${prefixCls}-textarea-wrapper-readonly`]: readonly,
                 [`${prefixCls}-textarea-wrapper-${validateStatus}`]: Boolean(validateStatus),
                 [`${prefixCls}-textarea-wrapper-focus`]: isFocus,
                 // [`${prefixCls}-textarea-wrapper-resize`]: !autosize && resize,
@@ -305,7 +306,8 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
         const itemCls = cls(
             `${prefixCls}-textarea`,
             {
-                [`${prefixCls}-textarea-disabled`]: disabled || readonly,
+                [`${prefixCls}-textarea-disabled`]: disabled,
+                [`${prefixCls}-textarea-readonly`]: readonly,
                 [`${prefixCls}-textarea-autosize`]: autosize,
                 [`${prefixCls}-textarea-showClear`]: showClear,
             }
@@ -346,4 +348,4 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
 
 const ForwardTextarea = React.forwardRef<HTMLTextAreaElement, Omit<TextAreaProps, 'forwardRef'>>((props, ref) => <TextArea {...props} forwardRef={ref} />);
 
-export default ForwardTextarea;
+export default ForwardTextarea;

package/inputNumber/__test__/inputNumber.test.js

@@ -5,6 +5,7 @@ import sinon from 'sinon';
 import keyCode from '@douyinfe/semi-foundation/utils/keyCode';
 import * as _ from 'lodash';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+import { numbers } from '@douyinfe/semi-foundation/inputNumber/constants';
 import { Form, withField } from '../../index';
 
 const log = (...args) => console.log(...args);
@@ -216,8 +217,8 @@ describe(`InputNumber`, () => {
         const addCount = 3;
         const minusCount = 1;
 
-        _.times(addCount, () => addBtn.simulate('mousedown'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown'));
+        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
+        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
 
         expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
         expect(onUpClick.called).toBe(true);
@@ -243,8 +244,8 @@ describe(`InputNumber`, () => {
         const addCount = 3;
         const minusCount = 1;
 
-        _.times(addCount, () => addBtn.simulate('mousedown'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown'));
+        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
+        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
 
         expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
         expect(onUpClick.called).toBe(true);
@@ -283,9 +284,9 @@ describe(`InputNumber`, () => {
         // click button focus
         const addCount = 3;
         const minusCount = 1;
-        _.times(addCount, () => addBtn.simulate('mousedown'));
+        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
         _.times(addCount, () => addBtn.simulate('mouseup'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown'));
+        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
         _.times(minusCount, () => minusBtn.simulate('mouseup'));
         expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
         expect(inputNumber.find(BaseInputNumber).state('focusing')).toBeTruthy();
@@ -338,7 +339,7 @@ describe(`InputNumber`, () => {
         const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
         const inputElem = inputNumber.find('input');
         const addBtn = btns.first();
-        addBtn.simulate('mousedown');
+        addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT });
         expect(inputElem.instance().value).toBe("1");
     })
 
@@ -366,5 +367,32 @@ describe(`InputNumber`, () => {
         inputElem.simulate('change', newEvent);
         expect(onNumberChange.calledOnce).toBe(true);
         expect(inputElem.instance().value).toBe('123');
-    })
+    });
+
+    /**
+     * test buttons right click
+     */
+     it(`right click add/minus button`, async () => {
+        const defaultValue = 1000;
+        const onUpClick = sinon.spy();
+        const onDownClick = sinon.spy();
+        const MOUSE_BUTTON_RIGHT = 2;
+
+        const inputNumber = mount(
+            <InputNumber defaultValue={defaultValue} onUpClick={onUpClick} onDownClick={onDownClick} />
+        );
+        const inputElem = inputNumber.find('input');
+
+        const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
+
+        const addBtn = btns.first();
+        const minusBtn = btns.last();
+
+        _.times(1, () => addBtn.simulate('mousedown', { button: MOUSE_BUTTON_RIGHT  }));
+        _.times(3, () => minusBtn.simulate('mousedown', { button: MOUSE_BUTTON_RIGHT }));
+
+        expect(inputElem.instance().value).toBe(String(defaultValue));
+        expect(onUpClick.called).toBe(false);
+        expect(onDownClick.called).toBe(false);
+    });
 });

package/lib/cjs/input/textarea.js

@@ -267,14 +267,16 @@ class TextArea extends _baseComponent.default {
       minLength: stateMinLength
     } = this.state;
     const wrapperCls = (0, _classnames.default)(className, "".concat(prefixCls, "-textarea-wrapper"), {
-      ["".concat(prefixCls, "-textarea-wrapper-disabled")]: disabled || readonly,
+      ["".concat(prefixCls, "-textarea-wrapper-disabled")]: disabled,
+      ["".concat(prefixCls, "-textarea-wrapper-readonly")]: readonly,
       [(0, _concat.default)(_context = "".concat(prefixCls, "-textarea-wrapper-")).call(_context, validateStatus)]: Boolean(validateStatus),
       ["".concat(prefixCls, "-textarea-wrapper-focus")]: isFocus // [`${prefixCls}-textarea-wrapper-resize`]: !autosize && resize,
 
     }); // const ref = this.props.forwardRef || this.textAreaRef;
 
     const itemCls = (0, _classnames.default)("".concat(prefixCls, "-textarea"), {
-      ["".concat(prefixCls, "-textarea-disabled")]: disabled || readonly,
+      ["".concat(prefixCls, "-textarea-disabled")]: disabled,
+      ["".concat(prefixCls, "-textarea-readonly")]: readonly,
       ["".concat(prefixCls, "-textarea-autosize")]: autosize,
       ["".concat(prefixCls, "-textarea-showClear")]: showClear
     });

package/lib/cjs/select/index.js

@@ -563,7 +563,7 @@ class Select extends _baseComponent.default {
         role: "button",
         "aria-label": "Use the input box to create an optional item",
         onClick: e => this.onSelect(option, optionIndex, e),
-        key: new Date().valueOf()
+        key: option.key || option.label
       }, customCreateItem)
     );
   }

package/lib/cjs/table/Table.js

@@ -1294,15 +1294,18 @@ class Table extends _baseComponent.default {
       const _dataSource = [...dataSource];
       const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
       this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
-      states.dataSource = filteredSortedDataSource; // when dataSource has change, should reset currentPage
-
-      states.pagination = (0, _isObject2.default)(statePagination) ? (0, _assign.default)((0, _assign.default)({}, statePagination), {
-        currentPage: (0, _isObject2.default)(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
-      }) : statePagination;
+      states.dataSource = filteredSortedDataSource;
 
       if (this.props.groupBy) {
         states.groups = null;
       }
+    } // when dataSource has change, should reset currentPage
+
+
+    if (dataSource !== prevProps.dataSource) {
+      states.pagination = (0, _isObject2.default)(statePagination) ? (0, _assign.default)((0, _assign.default)({}, statePagination), {
+        currentPage: (0, _isObject2.default)(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
+      }) : statePagination;
     }
 
     if ((0, _keys.default)(states).length) {
@@ -1484,6 +1487,7 @@ class Table extends _baseComponent.default {
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: this.rootWrapRef,
       className: (0, _classnames.default)(className, "".concat(prefixCls, "-wrapper")),
+      "data-column-fixed": anyColumnFixed,
       style: wrapStyle,
       id: id
     }, /*#__PURE__*/_react.default.createElement(_TableContextProvider.default, (0, _assign.default)({}, tableContextValue), /*#__PURE__*/_react.default.createElement(_spin.default, {

package/lib/cjs/timePicker/TimePicker.d.ts

@@ -69,6 +69,7 @@ export declare type TimePickerProps = {
     zIndex?: number | string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: TimePickerAdapter['notifyChange'];
+    onChangeWithDateFirst?: boolean;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onOpenChange?: (open: boolean) => void;
 };
@@ -169,6 +170,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         onFocus: (...args: any[]) => void;
         onBlur: (...args: any[]) => void;
         onChange: (...args: any[]) => void;
+        onChangeWithDateFirst: boolean;
         use12Hours: boolean;
         focusOnOpen: boolean;
         onKeyDown: (...args: any[]) => void;

package/lib/cjs/timePicker/TimePicker.js

@@ -183,9 +183,7 @@ class TimePicker extends _baseComponent.default {
       notifyOpenChange: function () {
         return _this2.props.onOpenChange(...arguments);
       },
-      notifyChange: function () {
-        return _this2.props.onChange && _this2.props.onChange(...arguments);
-      },
+      notifyChange: (agr1, arg2) => this.props.onChange && this.props.onChange(agr1, arg2),
       notifyFocus: function () {
         return _this2.props.onFocus && _this2.props.onFocus(...arguments);
       },
@@ -503,6 +501,7 @@ TimePicker.defaultProps = (0, _assign.default)({
   onFocus: _noop2.default,
   onBlur: _noop2.default,
   onChange: _noop2.default,
+  onChangeWithDateFirst: true,
   use12Hours: false,
   focusOnOpen: false,
   onKeyDown: _noop2.default,

package/lib/cjs/timePicker/index.d.ts

@@ -91,6 +91,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         onFocus: (...args: any[]) => void;
         onBlur: (...args: any[]) => void;
         onChange: (...args: any[]) => void;
+        onChangeWithDateFirst: boolean;
         use12Hours: boolean;
         focusOnOpen: boolean;
         onKeyDown: (...args: any[]) => void;

package/lib/cjs/tree/treeNode.js

@@ -24,6 +24,8 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
+
 var _get2 = _interopRequireDefault(require("lodash/get"));
 
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
@@ -506,7 +508,14 @@ class TreeNode extends _react.PureComponent {
           ref: this.setRef
         }, dragProps));
       } else {
-        return customLabel;
+        if ((0, _isEmpty2.default)(style)) {
+          return customLabel;
+        } else {
+          // In virtualization, props.style will contain location information
+          return /*#__PURE__*/_react.default.cloneElement(customLabel, {
+            style: (0, _assign.default)((0, _assign.default)({}, (0, _get2.default)(customLabel, ['props', 'style'])), style)
+          });
+        }
       }
     }
 

package/lib/es/input/textarea.js

@@ -241,14 +241,16 @@ class TextArea extends BaseComponent {
       minLength: stateMinLength
     } = this.state;
     const wrapperCls = cls(className, "".concat(prefixCls, "-textarea-wrapper"), {
-      ["".concat(prefixCls, "-textarea-wrapper-disabled")]: disabled || readonly,
+      ["".concat(prefixCls, "-textarea-wrapper-disabled")]: disabled,
+      ["".concat(prefixCls, "-textarea-wrapper-readonly")]: readonly,
       [_concatInstanceProperty(_context = "".concat(prefixCls, "-textarea-wrapper-")).call(_context, validateStatus)]: Boolean(validateStatus),
       ["".concat(prefixCls, "-textarea-wrapper-focus")]: isFocus // [`${prefixCls}-textarea-wrapper-resize`]: !autosize && resize,
 
     }); // const ref = this.props.forwardRef || this.textAreaRef;
 
     const itemCls = cls("".concat(prefixCls, "-textarea"), {
-      ["".concat(prefixCls, "-textarea-disabled")]: disabled || readonly,
+      ["".concat(prefixCls, "-textarea-disabled")]: disabled,
+      ["".concat(prefixCls, "-textarea-readonly")]: readonly,
       ["".concat(prefixCls, "-textarea-autosize")]: autosize,
       ["".concat(prefixCls, "-textarea-showClear")]: showClear
     });

package/lib/es/select/index.js

@@ -506,7 +506,7 @@ class Select extends BaseComponent {
         role: "button",
         "aria-label": "Use the input box to create an optional item",
         onClick: e => this.onSelect(option, optionIndex, e),
-        key: new Date().valueOf()
+        key: option.key || option.label
       }, customCreateItem)
     );
   }

package/lib/es/table/Table.js

@@ -1238,15 +1238,18 @@ class Table extends BaseComponent {
       const _dataSource = [...dataSource];
       const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
       this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
-      states.dataSource = filteredSortedDataSource; // when dataSource has change, should reset currentPage
-
-      states.pagination = _isObject(statePagination) ? _Object$assign(_Object$assign({}, statePagination), {
-        currentPage: _isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
-      }) : statePagination;
+      states.dataSource = filteredSortedDataSource;
 
       if (this.props.groupBy) {
         states.groups = null;
       }
+    } // when dataSource has change, should reset currentPage
+
+
+    if (dataSource !== prevProps.dataSource) {
+      states.pagination = _isObject(statePagination) ? _Object$assign(_Object$assign({}, statePagination), {
+        currentPage: _isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1
+      }) : statePagination;
     }
 
     if (_Object$keys(states).length) {
@@ -1433,6 +1436,7 @@ class Table extends BaseComponent {
     return /*#__PURE__*/React.createElement("div", {
       ref: this.rootWrapRef,
       className: classnames(className, "".concat(prefixCls, "-wrapper")),
+      "data-column-fixed": anyColumnFixed,
       style: wrapStyle,
       id: id
     }, /*#__PURE__*/React.createElement(TableContextProvider, _Object$assign({}, tableContextValue), /*#__PURE__*/React.createElement(Spin, {

package/lib/es/timePicker/TimePicker.d.ts

@@ -69,6 +69,7 @@ export declare type TimePickerProps = {
     zIndex?: number | string;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
     onChange?: TimePickerAdapter['notifyChange'];
+    onChangeWithDateFirst?: boolean;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onOpenChange?: (open: boolean) => void;
 };
@@ -169,6 +170,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         onFocus: (...args: any[]) => void;
         onBlur: (...args: any[]) => void;
         onChange: (...args: any[]) => void;
+        onChangeWithDateFirst: boolean;
         use12Hours: boolean;
         focusOnOpen: boolean;
         onKeyDown: (...args: any[]) => void;

package/lib/es/timePicker/TimePicker.js

@@ -149,9 +149,7 @@ export default class TimePicker extends BaseComponent {
       notifyOpenChange: function () {
         return _this2.props.onOpenChange(...arguments);
       },
-      notifyChange: function () {
-        return _this2.props.onChange && _this2.props.onChange(...arguments);
-      },
+      notifyChange: (agr1, arg2) => this.props.onChange && this.props.onChange(agr1, arg2),
       notifyFocus: function () {
         return _this2.props.onFocus && _this2.props.onFocus(...arguments);
       },
@@ -469,6 +467,7 @@ TimePicker.defaultProps = _Object$assign({
   onFocus: _noop,
   onBlur: _noop,
   onChange: _noop,
+  onChangeWithDateFirst: true,
   use12Hours: false,
   focusOnOpen: false,
   onKeyDown: _noop,

package/lib/es/timePicker/index.d.ts

@@ -91,6 +91,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         onFocus: (...args: any[]) => void;
         onBlur: (...args: any[]) => void;
         onChange: (...args: any[]) => void;
+        onChangeWithDateFirst: boolean;
         use12Hours: boolean;
         focusOnOpen: boolean;
         onKeyDown: (...args: any[]) => void;

package/lib/es/tree/treeNode.js

@@ -1,3 +1,4 @@
+import _isEmpty from "lodash/isEmpty";
 import _get from "lodash/get";
 import _isString from "lodash/isString";
 import _isFunction from "lodash/isFunction";
@@ -470,7 +471,14 @@ export default class TreeNode extends PureComponent {
           ref: this.setRef
         }, dragProps));
       } else {
-        return customLabel;
+        if (_isEmpty(style)) {
+          return customLabel;
+        } else {
+          // In virtualization, props.style will contain location information
+          return /*#__PURE__*/React.cloneElement(customLabel, {
+            style: _Object$assign(_Object$assign({}, _get(customLabel, ['props', 'style'])), style)
+          });
+        }
       }
     }
 

package/package.json

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

package/select/index.tsx

@@ -739,7 +739,12 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
         return (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus
-            <div role="button" aria-label="Use the input box to create an optional item" onClick={e => this.onSelect(option, optionIndex, e)} key={new Date().valueOf()}>
+            <div
+                role="button"
+                aria-label="Use the input box to create an optional item"
+                onClick={e => this.onSelect(option, optionIndex, e)}
+                key={option.key || option.label}
+            >
                 {customCreateItem}
             </div>
         );

package/table/Table.tsx

@@ -534,7 +534,6 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             this.foundation.initExpandedRowKeys({ groups: stateGroups });
         }
 
-
         /**
          * After dataSource is updated || (cachedColumns || cachedChildren updated)
          * 1. Cache filtered sorted data and a collection of data rows, stored in this
@@ -547,17 +546,20 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             const filteredSortedDataSource = this.foundation.getFilteredSortedDataSource(_dataSource, stateQueries);
             this.foundation.setCachedFilteredSortedDataSource(filteredSortedDataSource);
             states.dataSource = filteredSortedDataSource;
-            // when dataSource has change, should reset currentPage
-            states.pagination = isObject(statePagination) ? {
-                ...statePagination,
-                currentPage: isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1,
-            } : statePagination;
 
             if (this.props.groupBy) {
                 states.groups = null;
             }
         }
 
+        // when dataSource has change, should reset currentPage
+        if (dataSource !== prevProps.dataSource) {
+            states.pagination = isObject(statePagination) ? {
+                ...statePagination,
+                currentPage: isObject(propsPagination) && propsPagination.currentPage ? propsPagination.currentPage : 1,
+            } : statePagination;
+        }
+
         if (Object.keys(states).length) {
             const {
                 // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -1372,6 +1374,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             <div
                 ref={this.rootWrapRef}
                 className={classnames(className, `${prefixCls}-wrapper`)}
+                data-column-fixed={anyColumnFixed}
                 style={wrapStyle}
                 id={id}
             >

package/table/_story/table.stories.js

@@ -76,6 +76,8 @@ export { default as ScrollBar } from './ScrollBar';
 export { default as TableSpan } from './TableSpan';
 export { default as FixRenderReturnProps } from './FixRenderReturnProps';
 export { default as WarnColumnWithoutDataIndex } from './WarnColumnWithoutDataIndex';
+export { default as FixedColumnsChange } from './v2/FixedColumnsChange';
+export { default as FixedZIndex } from './v2/FixedZIndex';
 
 // empty table
 

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

@@ -0,0 +1,104 @@
+import React, { useState, useMemo } from 'react';
+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 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;
+};
+
+const data = getData();
+
+/**
+ * fix https://github.com/DouyinFE/semi-design/issues/381
+ */
+App.storyName = 'fixed columns change';
+function App() {
+    const [dataSource, setData] = useState(data);
+    const [rowKeys, setRowKeys] = useState([]);
+
+    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),
+        },
+        {
+            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');
+            }
+        }
+    ];
+
+    return (
+        <Table
+            columns={columns}
+            dataSource={dataSource}
+            pagination={{
+                pageSize: 5,
+            }}
+            rowSelection={{
+                onChange: rowKeys => setRowKeys(rowKeys),
+                selectedRowKeys: rowKeys,
+            }}
+            scroll={{ y: 300 }}
+        />
+    );
+}
+
+export default App;