@douyinfe/semi-ui 2.38.3-alpha.2 → 2.38.3-alpha.4

package/lib/cjs/modal/confirm.d.ts

@@ -146,16 +146,16 @@ export declare function withError(props: ModalReactProps): {
     style?: React.CSSProperties;
     className?: string;
     motion?: boolean;
-    getPopupContainer?: () => HTMLElement;
-    footer?: React.ReactNode;
-    header?: React.ReactNode;
-    direction?: any;
     width?: string | number;
     height?: string | number;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
     mask?: boolean;
     visible?: boolean;
     content?: React.ReactNode;
     icon: string | number | boolean | React.ReactFragment | JSX.Element;
+    getPopupContainer?: () => HTMLElement;
+    direction?: any;
     onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     zIndex?: number;
     closeOnEsc?: boolean;

package/lib/cjs/overflowList/index.js

@@ -16,7 +16,7 @@ var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
 var _intersectionObserver = _interopRequireDefault(require("./intersectionObserver"));
 var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/overflowList/foundation"));
 require("@douyinfe/semi-foundation/lib/cjs/overflowList/overflowList.css");
-var _utils = require("../_utils");
+var _fastCopy = _interopRequireDefault(require("fast-copy"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /* eslint-disable arrow-body-style */
 
@@ -212,8 +212,8 @@ class OverflowList extends _baseComponent.default {
           maxCount = Math.min(maxCount, Math.floor(prevState.containerWidth / _constants.numbers.MINIMUM_HTML_ELEMENT_WIDTH));
         }
         const isCollapseFromStart = props.collapseFrom === Boundary.START;
-        const visible = isCollapseFromStart ? (0, _utils.cloneDeep)(props.items).reverse().slice(0, maxCount) : props.items.slice(0, maxCount);
-        const overflow = isCollapseFromStart ? (0, _utils.cloneDeep)(props.items).reverse().slice(maxCount) : props.items.slice(maxCount);
+        const visible = isCollapseFromStart ? (0, _fastCopy.default)(props.items).reverse().slice(0, maxCount) : props.items.slice(0, maxCount);
+        const overflow = isCollapseFromStart ? (0, _fastCopy.default)(props.items).reverse().slice(maxCount) : props.items.slice(maxCount);
         newState.visible = visible;
         newState.overflow = overflow;
         newState.maxCount = maxCount;

package/lib/cjs/table/TableCell.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _merge2 = _interopRequireDefault(require("lodash/merge"));
 var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+var _merge2 = _interopRequireDefault(require("lodash/merge"));
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
 var _set2 = _interopRequireDefault(require("lodash/set"));
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
@@ -82,6 +82,12 @@ class TableCell extends _baseComponent.default {
       expandIcon
     } = props;
     const cellInSelectionColumn = (0, _utils.isSelectionColumn)(column);
+    const {
+      shouldCellUpdate
+    } = column;
+    if (typeof shouldCellUpdate === 'function') {
+      return shouldCellUpdate(nextProps, props);
+    }
     // The expand button may be in a separate column or in the first data column
     const columnHasExpandIcon = (0, _utils.isExpandedColumn)(column) || expandIcon;
     if ((cellInSelectionColumn || columnHasExpandIcon) && !(0, _isEqual2.default)(nextProps, this.props)) {

package/lib/cjs/table/interface.d.ts

@@ -8,6 +8,7 @@ import { ArrayElement } from '../_base/base';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/table/constants';
 import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/cjs/table/foundation';
 import { ScrollDirection, CSSDirection } from 'react-window';
+import { TableCellProps } from './TableCell';
 export interface TableProps<RecordType extends Record<string, any> = any> extends BaseProps {
     bordered?: boolean;
     children?: ReactNode;
@@ -90,6 +91,10 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
     onHeaderCell?: OnHeaderCell<RecordType>;
     ellipsis?: BaseEllipsis;
+    /**
+     * self control whether to update cell for performance reasons
+     */
+    shouldCellUpdate?: (props: TableCellProps, prevProps: TableCellProps) => boolean;
 }
 export type Align = BaseAlign;
 export type SortOrder = BaseSortOrder;

package/lib/es/modal/confirm.d.ts

@@ -146,16 +146,16 @@ export declare function withError(props: ModalReactProps): {
     style?: React.CSSProperties;
     className?: string;
     motion?: boolean;
-    getPopupContainer?: () => HTMLElement;
-    footer?: React.ReactNode;
-    header?: React.ReactNode;
-    direction?: any;
     width?: string | number;
     height?: string | number;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
     mask?: boolean;
     visible?: boolean;
     content?: React.ReactNode;
     icon: string | number | boolean | React.ReactFragment | JSX.Element;
+    getPopupContainer?: () => HTMLElement;
+    direction?: any;
     onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
     zIndex?: number;
     closeOnEsc?: boolean;

package/lib/es/overflowList/index.js

@@ -11,7 +11,7 @@ import ResizeObserver from '../resizeObserver';
 import IntersectionObserver from './intersectionObserver';
 import OverflowListFoundation from '@douyinfe/semi-foundation/lib/es/overflowList/foundation';
 import '@douyinfe/semi-foundation/lib/es/overflowList/overflowList.css';
-import { cloneDeep } from '../_utils';
+import copy from 'fast-copy';
 const prefixCls = cssClasses.PREFIX;
 const Boundary = strings.BOUNDARY_MAP;
 const OverflowDirection = strings.OVERFLOW_DIR;
@@ -204,8 +204,8 @@ class OverflowList extends BaseComponent {
           maxCount = Math.min(maxCount, Math.floor(prevState.containerWidth / numbers.MINIMUM_HTML_ELEMENT_WIDTH));
         }
         const isCollapseFromStart = props.collapseFrom === Boundary.START;
-        const visible = isCollapseFromStart ? cloneDeep(props.items).reverse().slice(0, maxCount) : props.items.slice(0, maxCount);
-        const overflow = isCollapseFromStart ? cloneDeep(props.items).reverse().slice(maxCount) : props.items.slice(maxCount);
+        const visible = isCollapseFromStart ? copy(props.items).reverse().slice(0, maxCount) : props.items.slice(0, maxCount);
+        const overflow = isCollapseFromStart ? copy(props.items).reverse().slice(maxCount) : props.items.slice(maxCount);
         newState.visible = visible;
         newState.overflow = overflow;
         newState.maxCount = maxCount;

package/lib/es/table/TableCell.js

@@ -1,5 +1,5 @@
-import _merge from "lodash/merge";
 import _isEqual from "lodash/isEqual";
+import _merge from "lodash/merge";
 import _omit from "lodash/omit";
 import _set from "lodash/set";
 import _noop from "lodash/noop";
@@ -72,6 +72,12 @@ export default class TableCell extends BaseComponent {
       expandIcon
     } = props;
     const cellInSelectionColumn = isSelectionColumn(column);
+    const {
+      shouldCellUpdate
+    } = column;
+    if (typeof shouldCellUpdate === 'function') {
+      return shouldCellUpdate(nextProps, props);
+    }
     // The expand button may be in a separate column or in the first data column
     const columnHasExpandIcon = isExpandedColumn(column) || expandIcon;
     if ((cellInSelectionColumn || columnHasExpandIcon) && !_isEqual(nextProps, this.props)) {

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

@@ -8,6 +8,7 @@ import { ArrayElement } from '../_base/base';
 import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord, BaseEllipsis } from '@douyinfe/semi-foundation/lib/es/table/foundation';
 import { ScrollDirection, CSSDirection } from 'react-window';
+import { TableCellProps } from './TableCell';
 export interface TableProps<RecordType extends Record<string, any> = any> extends BaseProps {
     bordered?: boolean;
     children?: ReactNode;
@@ -90,6 +91,10 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
     onHeaderCell?: OnHeaderCell<RecordType>;
     ellipsis?: BaseEllipsis;
+    /**
+     * self control whether to update cell for performance reasons
+     */
+    shouldCellUpdate?: (props: TableCellProps, prevProps: TableCellProps) => boolean;
 }
 export type Align = BaseAlign;
 export type SortOrder = BaseSortOrder;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.38.3-alpha.2",
+    "version": "2.38.3-alpha.4",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,17 +17,18 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.38.3-alpha.2",
-        "@douyinfe/semi-animation-react": "2.38.3-alpha.2",
-        "@douyinfe/semi-foundation": "2.38.3-alpha.2",
-        "@douyinfe/semi-icons": "2.38.3-alpha.2",
-        "@douyinfe/semi-illustrations": "2.38.3-alpha.2",
-        "@douyinfe/semi-theme-default": "2.38.3-alpha.2",
+        "@douyinfe/semi-animation": "2.38.3-alpha.4",
+        "@douyinfe/semi-animation-react": "2.38.3-alpha.4",
+        "@douyinfe/semi-foundation": "2.38.3-alpha.4",
+        "@douyinfe/semi-icons": "2.38.3-alpha.4",
+        "@douyinfe/semi-illustrations": "2.38.3-alpha.4",
+        "@douyinfe/semi-theme-default": "2.38.3-alpha.4",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
         "date-fns": "^2.29.3",
         "date-fns-tz": "^1.3.8",
+        "fast-copy": "^3.0.1",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-resizable": "^1.8.0",
@@ -69,7 +70,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "2b95b13c9f2ddd1205647aef6f25ce70ea6e17a2",
+    "gitHead": "02d808a3ef1998dba39f5c204b5aec6a11335837",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",