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

package/lib/es/upload/fileCard.js

@@ -4,9 +4,9 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/upload/constants';
 import { getFileSize } from '@douyinfe/semi-foundation/lib/es/upload/utils';
-import { IconAlertCircle, IconClose, IconFile, IconRefresh } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconClose, IconClear, IconFile, IconRefresh } from '@douyinfe/semi-icons';
 import LocaleConsumer from '../locale/localeConsumer';
-import IconButton from '../iconButton/index';
+import Button from '../button/index';
 import Progress from '../progress/index';
 import Tooltip from '../tooltip/index';
 import Spin from '../spin/index';
@@ -167,6 +167,7 @@ class FileCard extends PureComponent {
       onPreviewClick,
       showPicInfo,
       renderPicInfo,
+      renderPicPreviewIcon,
       renderThumbnail,
       name,
       index
@@ -174,6 +175,7 @@ class FileCard extends PureComponent {
     const showProgress = status === strings.FILE_STATUS_UPLOADING && percent !== 100;
     const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
     const showReplace = status === strings.FILE_STATUS_SUCCESS && this.props.showReplace;
+    const showPreview = status === strings.FILE_STATUS_SUCCESS && !this.props.showReplace;
     const filePicCardCls = cls({
       ["".concat(prefixCls, "-picture-file-card")]: true,
       ["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
@@ -181,7 +183,6 @@ class FileCard extends PureComponent {
       ["".concat(prefixCls, "-picture-file-card-error")]: status === strings.FILE_STATUS_UPLOAD_FAIL,
       ["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
     });
-    const closeCls = "".concat(prefixCls, "-picture-file-card-close");
     const retry = /*#__PURE__*/React.createElement("div", {
       role: "button",
       tabIndex: 0,
@@ -204,6 +205,17 @@ class FileCard extends PureComponent {
     }, /*#__PURE__*/React.createElement(ReplaceSvg, {
       className: "".concat(prefixCls, "-picture-file-card-icon-replace")
     })));
+    const preview = /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-picture-file-card-preview")
+    }, typeof renderPicPreviewIcon === 'function' ? renderPicPreviewIcon(this.props) : null);
+    const close = /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: "".concat(prefixCls, "-picture-file-card-close"),
+      onClick: e => this.onRemove(e)
+    }, /*#__PURE__*/React.createElement(IconClear, {
+      className: "".concat(prefixCls, "-picture-file-card-icon-close")
+    }));
     const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-picture-file-card-pic-info")
     }, index + 1);
@@ -222,14 +234,7 @@ class FileCard extends PureComponent {
       size: "small",
       orbitStroke: '#FFF',
       "aria-label": "uploading file progress"
-    }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/React.createElement("div", {
-      className: closeCls,
-      onClick: e => this.onRemove(e)
-    }, /*#__PURE__*/React.createElement(IconClose, {
-      tabIndex: 0,
-      role: "button",
-      size: "extra-small"
-    })), this.renderPicValidateMsg());
+    }) : null, showRetry ? retry : null, showReplace && replace, showPreview && preview, showPicInfo && picInfo, !disabled && close, this.renderPicValidateMsg());
   }
 
   renderFile(locale) {
@@ -244,7 +249,8 @@ class FileCard extends PureComponent {
       previewFile,
       status,
       style,
-      onPreviewClick
+      onPreviewClick,
+      renderFileOperation
     } = this.props;
     const fileCardCls = cls({
       ["".concat(prefixCls, "-file-card")]: true,
@@ -274,6 +280,14 @@ class FileCard extends PureComponent {
       previewContent = previewFile(this.props);
     }
 
+    const operation = typeof renderFileOperation === 'function' ? renderFileOperation(this.props) : /*#__PURE__*/React.createElement(Button, {
+      onClick: e => this.onRemove(e),
+      type: "tertiary",
+      icon: /*#__PURE__*/React.createElement(IconClose, null),
+      theme: "borderless",
+      size: "small",
+      className: closeCls
+    });
     return /*#__PURE__*/React.createElement("div", {
       role: "listitem",
       className: fileCardCls,
@@ -294,7 +308,7 @@ class FileCard extends PureComponent {
       position: "top",
       showArrow: false,
       content: locale.replace
-    }, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement(Button, {
       onClick: e => this.onReplace(e),
       type: "tertiary",
       theme: "borderless",
@@ -316,29 +330,22 @@ class FileCard extends PureComponent {
       tabIndex: 0,
       className: "".concat(infoCls, "-retry"),
       onClick: e => this.onRetry(e)
-    }, locale.retry) : null)), /*#__PURE__*/React.createElement(IconButton, {
-      onClick: e => this.onRemove(e),
-      type: "tertiary",
-      icon: /*#__PURE__*/React.createElement(IconClose, null),
-      theme: "borderless",
-      size: "small",
-      className: closeCls
-    }));
+    }, locale.retry) : null)), operation);
   }
 
   onRemove(e) {
     e.stopPropagation();
-    this.props.onRemove(this.props, e);
+    this.props.onRemove();
   }
 
   onReplace(e) {
     e.stopPropagation();
-    this.props.onReplace(this.props, e);
+    this.props.onReplace();
   }
 
   onRetry(e) {
     e.stopPropagation();
-    this.props.onRetry(this.props, e);
+    this.props.onRetry();
   }
 
   render() {

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

@@ -29,6 +29,7 @@ export interface UploadProps {
     fileList?: Array<FileItem>;
     fileName?: string;
     headers?: Record<string, any> | ((file: File) => Record<string, string>);
+    hotSpotLocation?: 'start' | 'end';
     itemStyle?: CSSProperties;
     limit?: number;
     listType?: UploadListType;
@@ -56,6 +57,8 @@ export interface UploadProps {
     renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
     showClear?: boolean;
     showPicInfo?: boolean;
     showReplace?: boolean;
@@ -99,6 +102,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         fileList: PropTypes.Requireable<any[]>;
         fileName: PropTypes.Requireable<string>;
         headers: PropTypes.Requireable<object>;
+        hotSpotLocation: PropTypes.Requireable<string>;
         itemStyle: PropTypes.Requireable<object>;
         limit: PropTypes.Requireable<number>;
         listType: PropTypes.Requireable<"picture" | "list">;
@@ -124,6 +128,8 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
         renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
+        renderPicPreviewIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        renderFileOperation: PropTypes.Requireable<(...args: any[]) => any>;
         renderPicInfo: PropTypes.Requireable<(...args: any[]) => any>;
         renderThumbnail: PropTypes.Requireable<(...args: any[]) => any>;
         showClear: PropTypes.Requireable<boolean>;

package/lib/es/upload/index.js

@@ -1,3 +1,4 @@
+import _pick from "lodash/pick";
 import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -111,14 +112,14 @@ class Upload extends BaseComponent {
         previewFile,
         listType,
         itemStyle,
-        showRetry,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderFileItem,
         renderThumbnail,
         disabled,
-        onPreviewClick,
-        showReplace
+        onPreviewClick
       } = this.props;
 
       const onRemove = () => this.remove(file);
@@ -131,20 +132,20 @@ class Upload extends BaseComponent {
         this.replace(index);
       };
 
-      const fileCardProps = _Object$assign(_Object$assign({}, file), {
+      const fileCardProps = _Object$assign(_Object$assign(_Object$assign({}, _pick(this.props, ['showRetry', 'showReplace', ''])), file), {
         previewFile,
         listType,
         onRemove,
         onRetry,
         index,
         key: uid || _concatInstanceProperty(_context = "".concat(name)).call(_context, index),
-        showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
         style: itemStyle,
         disabled,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderThumbnail,
-        showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
         onReplace,
         onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
       });
@@ -186,7 +187,8 @@ class Upload extends BaseComponent {
         limit,
         disabled,
         children,
-        draggable
+        draggable,
+        hotSpotLocation
       } = this.props;
       const {
         fileList: stateFileList,
@@ -244,7 +246,7 @@ class Upload extends BaseComponent {
         className: mainCls,
         role: "list",
         "aria-label": "picture list"
-      }, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+      }, showAddTriggerInList && hotSpotLocation === 'start' ? addContent : null, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList && hotSpotLocation === 'end' ? addContent : null)));
     };
 
     this.renderFileListDefault = () => {
@@ -584,6 +586,7 @@ Upload.propTypes = {
   fileList: PropTypes.array,
   fileName: PropTypes.string,
   headers: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  hotSpotLocation: PropTypes.oneOf(['start', 'end']),
   itemStyle: PropTypes.object,
   limit: PropTypes.number,
   listType: PropTypes.oneOf(strings.LIST_TYPE),
@@ -609,6 +612,8 @@ Upload.propTypes = {
   prompt: PropTypes.node,
   promptPosition: PropTypes.oneOf(strings.PROMPT_POSITION),
   renderFileItem: PropTypes.func,
+  renderPicPreviewIcon: PropTypes.func,
+  renderFileOperation: PropTypes.func,
   renderPicInfo: PropTypes.func,
   renderThumbnail: PropTypes.func,
   showClear: PropTypes.bool,
@@ -628,6 +633,7 @@ Upload.defaultProps = {
   defaultFileList: [],
   disabled: false,
   listType: 'list',
+  hotSpotLocation: 'end',
   multiple: false,
   onAcceptInvalid: _noop,
   onChange: _noop,

package/lib/es/upload/interface.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, MouseEvent } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 import { BaseFileItem } from '@douyinfe/semi-foundation/lib/es/upload/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/upload/constants';
 import { ArrayElement } from '../_base/base';
@@ -45,14 +45,16 @@ export interface RenderFileItemProps extends FileItem {
     index?: number;
     previewFile?: (fileItem: RenderFileItemProps) => ReactNode;
     listType: UploadListType;
-    onRemove: (props: RenderFileItemProps, e: MouseEvent) => void;
-    onRetry: (props: RenderFileItemProps, e: MouseEvent) => void;
-    onReplace: (props: RenderFileItemProps, e: MouseEvent) => void;
+    onRemove: () => void;
+    onRetry: () => void;
+    onReplace: () => void;
     key: string;
     showPicInfo?: boolean;
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
-    showRetry: boolean;
-    showReplace: boolean;
+    renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
+    showRetry?: boolean;
+    showReplace?: boolean;
     style?: CSSProperties;
     disabled: boolean;
     onPreviewClick: () => void;

package/navigation/Item.tsx

@@ -195,7 +195,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             itemChildren = children;
         } else {
             let placeholderIcons = null;
-            if (mode === strings.MODE_VERTICAL && !limitIndent) {
+            if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
                 const iconAmount = (icon && !indent) ? level : level - 1;
                 placeholderIcons = times(iconAmount, () => this.renderIcon(null, strings.ICON_POS_RIGHT, false));
             }

package/navigation/SubNav.tsx

@@ -237,7 +237,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         }
 
         let placeholderIcons = null;
-        if (mode === strings.MODE_VERTICAL && !limitIndent) {
+        if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
             /* Different icons' amount means different indents.*/
             const iconAmount = (icon && !indent) ? level : level - 1;
             placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, undefined, index));

package/package.json

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

package/scrollList/scrollItem.tsx

@@ -13,8 +13,10 @@ import { Motion } from '../_base/base';
 const msPerFrame = 1000 / 60;
 const blankReg = /^\s*$/;
 const wheelMode = 'wheel';
-
-type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
+interface DebounceSelectFn {
+    (e: React.UIEvent, newSelectedNode: HTMLElement): void;
+    cancel(): void
+}
 export interface ScrollItemProps<T extends Item> {
     mode?: string;
     cycled?: boolean;
@@ -110,7 +112,12 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
             scrollToCenter: this.scrollToCenter,
         };
     }
-
+    componentWillUnmount(){
+        if (this.props.cycled) {
+            this.throttledAdjustList.cancel();
+            this.debouncedSelect.cancel();
+        }
+    }
     componentDidMount() {
         this.foundation.init();
 

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/select/option.tsx

@@ -57,8 +57,8 @@ class Option extends PureComponent<OptionProps> {
 
     onClick({ value, label, children, ...rest }: Partial<OptionProps>, event: React.MouseEvent) {
         const { props } = this;
-        const isDisbled = props.disabled;
-        if (!isDisbled) {
+        const isDisabled = props.disabled;
+        if (!isDisabled) {
             props.onSelect({ ...rest, value, label: label || children }, event);
         }
     }

package/table/Table.tsx

@@ -424,11 +424,12 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             willUpdateStates.cachedColumns = props.columns;
             willUpdateStates.cachedChildren = null;
         } else if (props.children && props.children !== state.cachedChildren) {
-            const newFlattenColumns = flattenColumns(getColumns(props.children));
+            const newNestedColumns = getColumns(props.children);
+            const newFlattenColumns = flattenColumns(newNestedColumns);
             const columns = mergeColumns(state.queries, newFlattenColumns, null, false);
             willUpdateStates.flattenColumns = newFlattenColumns;
             willUpdateStates.queries = [...columns];
-            willUpdateStates.cachedColumns = [...columns];
+            willUpdateStates.cachedColumns = [...newNestedColumns];
             willUpdateStates.cachedChildren = props.children;
         }
 
@@ -534,7 +535,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 +547,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
@@ -941,11 +944,15 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                 titleArr.push(sorter);
             }
 
+            const stateFilteredValue = get(curQuery, 'filteredValue');
+            const defaultFilteredValue = get(curQuery, 'defaultFilteredValue');
+            const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
             if ((Array.isArray(column.filters) && column.filters.length) || isValidElement(column.filterDropdown)) {
                 const filter = (
                     <ColumnFilter
                         key={strings.DEFAULT_KEY_COLUMN_FILTER}
                         {...curQuery}
+                        filteredValue={filteredValue}
                         onFilterDropdownVisibleChange={(visible: boolean) => this.foundation.toggleShowFilter(dataIndex, visible)}
                         onSelect={(data: OnSelectData) => this.foundation.handleFilterSelect(dataIndex, data)}
                     />
@@ -1372,6 +1379,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,7 @@ 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 * from './v2';
 
 // 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('2022-01-01').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;