@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/es/table/ColumnFilter.js

@@ -1,7 +1,5 @@
 import _noop from "lodash/noop";
-
 /* eslint-disable no-nested-ternary */
-
 /* eslint-disable eqeqeq */
 import React, { isValidElement } from 'react';
 import cls from 'classnames';
@@ -10,7 +8,6 @@ import { cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
 import Dropdown from '../dropdown';
 import { Radio } from '../radio';
 import { Checkbox } from '../checkbox';
-
 function renderDropdown() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let nestedElem = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -33,19 +30,16 @@ function renderDropdown() {
     render: /*#__PURE__*/React.createElement(Dropdown.Menu, null, Array.isArray(filters) && filters.map((filter, index) => {
       const changeFn = e => {
         const domEvent = e && e.nativeEvent;
-
         if (domEvent) {
           // Block this event to prevent the pop-up layer from closing
-          domEvent.stopImmediatePropagation(); // Prevent bubbling and default events to prevent label click events from triggering twice
-
+          domEvent.stopImmediatePropagation();
+          // Prevent bubbling and default events to prevent label click events from triggering twice
           domEvent.stopPropagation();
           domEvent.preventDefault();
         }
-
         let values = [...filteredValue];
         const included = values.includes(filter.value);
         const idx = values.indexOf(filter.value);
-
         if (idx > -1) {
           values.splice(idx, 1);
         } else if (filterMultiple) {
@@ -53,7 +47,6 @@ function renderDropdown() {
         } else {
           values = [filter.value];
         }
-
         return onSelect({
           value: filter.value,
           filteredValue: values,
@@ -61,7 +54,6 @@ function renderDropdown() {
           domEvent
         });
       };
-
       const checked = filteredValue.includes(filter.value);
       const {
         text
@@ -89,7 +81,6 @@ function renderDropdown() {
       }, text) : /*#__PURE__*/React.createElement(Radio, {
         checked: checked
       }, text));
-
       if (Array.isArray(filter.children) && filter.children.length) {
         const childrenDropdownProps = Object.assign(Object.assign({}, props), {
           filters: filter.children,
@@ -99,20 +90,16 @@ function renderDropdown() {
         delete childrenDropdownProps.filterDropdownVisible;
         item = renderDropdown(childrenDropdownProps, item, level + 1);
       }
-
       return item;
     }))
   });
-
   if (filterDropdownVisible != null) {
     dropdownProps.visible = filterDropdownVisible;
   }
-
   return /*#__PURE__*/React.createElement(Dropdown, Object.assign({}, dropdownProps, {
     key: `Dropdown_level_${level}`
   }), nestedElem);
 }
-
 export default function ColumnFilter() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
@@ -129,7 +116,6 @@ export default function ColumnFilter() {
     on: Array.isArray(filteredValue) && filteredValue.length
   });
   let iconElem;
-
   if (typeof filterIcon === 'function') {
     iconElem = filterIcon(Array.isArray(filteredValue) && filteredValue.length > 0);
   } else if ( /*#__PURE__*/isValidElement(filterIcon)) {
@@ -137,9 +123,7 @@ export default function ColumnFilter() {
   } else {
     iconElem = /*#__PURE__*/React.createElement("div", {
       className: finalCls
-    }, '\u200b'
-    /* ZWSP(zero-width space) */
-    , /*#__PURE__*/React.createElement(IconFilter, {
+    }, '\u200b' /* ZWSP(zero-width space) */, /*#__PURE__*/React.createElement(IconFilter, {
       role: "button",
       "aria-label": "Filter data with this column",
       "aria-haspopup": "listbox",
@@ -147,7 +131,6 @@ export default function ColumnFilter() {
       size: "default"
     }));
   }
-
   const renderProps = Object.assign(Object.assign({}, props), filterDropdownProps);
   filterDropdown = /*#__PURE__*/React.isValidElement(filterDropdown) ? filterDropdown : typeof renderFilterDropdown === 'function' ? renderFilterDropdown(renderProps, {
     iconElem

package/lib/es/table/ColumnSelection.js

@@ -1,5 +1,4 @@
 import _noop from "lodash/noop";
-
 /* eslint-disable max-len */
 import React from 'react';
 import BaseComponent from '../_base/baseComponent';
@@ -11,26 +10,20 @@ import { Checkbox } from '../checkbox';
 /**
  * render selection cell
  */
-
 export default class TableSelectionCell extends BaseComponent {
-  constructor(props) {
-    super(props);
-
-    this.handleChange = e => this.foundation.handleChange(e);
-
-    this.foundation = new TableSelectionCellFoundation(this.adapter);
-  }
-
   get adapter() {
     var _this = this;
-
     return Object.assign(Object.assign({}, super.adapter), {
       notifyChange: function () {
         return _this.props.onChange(...arguments);
       }
     });
   }
-
+  constructor(props) {
+    super(props);
+    this.handleChange = e => this.foundation.handleChange(e);
+    this.foundation = new TableSelectionCellFoundation(this.adapter);
+  }
   render() {
     const {
       selected,
@@ -47,11 +40,9 @@ export default class TableSelectionCell extends BaseComponent {
       indeterminate,
       checked: selected
     };
-
     if (typeof getCheckboxProps === 'function') {
       checkboxProps = Object.assign(Object.assign({}, checkboxProps), getCheckboxProps());
     }
-
     const wrapCls = classnames(`${prefixCls}-selection-wrap`, {
       [`${prefixCls}-selection-disabled`]: disabled
     }, className);
@@ -61,7 +52,6 @@ export default class TableSelectionCell extends BaseComponent {
       "aria-label": ariaLabel
     }, checkboxProps)));
   }
-
 }
 TableSelectionCell.propTypes = {
   columnTitle: PropTypes.string,

package/lib/es/table/ColumnSorter.js

@@ -49,7 +49,6 @@ export default class ColumnSorter extends PureComponent {
       size: iconBtnSize
     }))));
   }
-
 }
 ColumnSorter.propTypes = {
   className: PropTypes.string,

package/lib/es/table/CustomExpandIcon.js

@@ -1,5 +1,4 @@
 import _noop from "lodash/noop";
-
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -10,7 +9,6 @@ import CSSAnimation from "../_cssAnimation";
 /**
  * render expand icon
  */
-
 export default function CustomExpandIcon(props) {
   const {
     expanded,
@@ -23,7 +21,6 @@ export default function CustomExpandIcon(props) {
     motion = true
   } = props;
   let icon;
-
   if ( /*#__PURE__*/React.isValidElement(expandIcon)) {
     icon = expandIcon;
   } else if (typeof expandIcon === 'function') {
@@ -37,13 +34,11 @@ export default function CustomExpandIcon(props) {
   } else {
     icon = expanded && !motion ? /*#__PURE__*/React.createElement(IconChevronDown, null) : /*#__PURE__*/React.createElement(IconChevronRight, null);
   }
-
   const handleClick = useCallback(e => {
     if (typeof onClick === 'function') {
       onClick(!expanded, e);
     }
   }, [expanded]);
-
   if (motion) {
     const originIcon = icon;
     icon = /*#__PURE__*/React.createElement(CSSAnimation, {
@@ -58,7 +53,6 @@ export default function CustomExpandIcon(props) {
       });
     });
   }
-
   return /*#__PURE__*/React.createElement("span", {
     role: "button",
     "aria-label": "Expand this row",

package/lib/es/table/HeadTable.js

@@ -1,6 +1,5 @@
 import _noop from "lodash/noop";
 import _get from "lodash/get";
-
 /* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -10,7 +9,6 @@ import TableHeader from './TableHeader';
 /**
  * When there are fixed columns, the header is rendered as a separate Table
  */
-
 class HeadTable extends React.PureComponent {
   constructor() {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
@@ -18,7 +16,6 @@ class HeadTable extends React.PureComponent {
     };
     super(props);
   }
-
   render() {
     const {
       scroll,
@@ -34,26 +31,19 @@ class HeadTable extends React.PureComponent {
       bodyHasScrollBar,
       sticky
     } = this.props;
-
     if (!showHeader) {
       return null;
     }
-
     const Table = _get(components, 'header.outer', 'table');
-
     const x = _get(scroll, 'x');
-
     const headStyle = {};
     const tableStyle = {};
-
     if (x && !fixed) {
       tableStyle.width = x;
     }
-
     if (bodyHasScrollBar) {
       headStyle.overflowY = 'scroll';
     }
-
     const colgroup = /*#__PURE__*/React.createElement(ColGroup, {
       columns: columns,
       prefixCls: prefixCls
@@ -66,13 +56,10 @@ class HeadTable extends React.PureComponent {
     const headTableCls = classnames(`${prefixCls}-header`, {
       [`${prefixCls}-header-sticky`]: sticky
     });
-
     const stickyTop = _get(sticky, 'top', 0);
-
     if (typeof stickyTop === 'number') {
       headStyle.top = stickyTop;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       key: "headTable",
       style: headStyle,
@@ -86,9 +73,7 @@ class HeadTable extends React.PureComponent {
       })
     }, colgroup, tableHeader));
   }
-
 }
-
 HeadTable.propTypes = {
   tableLayout: PropTypes.string,
   bodyHasScrollBar: PropTypes.bool,

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

@@ -9,5 +9,5 @@ export interface ResizableHeaderCellProps {
 declare class ResizableHeaderCell extends React.PureComponent<ResizableHeaderCellProps> {
     render(): JSX.Element;
 }
-export declare type ResizeFn = (e: React.SyntheticEvent) => any;
+export type ResizeFn = (e: React.SyntheticEvent) => any;
 export default ResizableHeaderCell;

package/lib/es/table/ResizableHeaderCell.js

@@ -1,36 +1,30 @@
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 import React from 'react';
 import { Resizable } from 'react-resizable';
-
 class ResizableHeaderCell extends React.PureComponent {
   render() {
     const _a = this.props,
-          {
-      onResize,
-      onResizeStart,
-      onResizeStop,
-      width
-    } = _a,
-          restProps = __rest(_a, ["onResize", "onResizeStart", "onResizeStop", "width"]);
-
+      {
+        onResize,
+        onResizeStart,
+        onResizeStop,
+        width
+      } = _a,
+      restProps = __rest(_a, ["onResize", "onResizeStart", "onResizeStop", "width"]);
     if (typeof width !== 'number') {
       return /*#__PURE__*/React.createElement("th", Object.assign({}, restProps));
     }
-
     let {
       children
-    } = restProps; // Fragment must be used here, otherwise there will be an error (seemingly a react-resizable@1.9.0 problem)
-
+    } = restProps;
+    // Fragment must be used here, otherwise there will be an error (seemingly a react-resizable@1.9.0 problem)
     children = React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
     }, child));
@@ -45,7 +39,5 @@ class ResizableHeaderCell extends React.PureComponent {
       }
     }, /*#__PURE__*/React.createElement("th", Object.assign({}, restProps), children));
   }
-
 }
-
 export default ResizableHeaderCell;

package/lib/es/table/ResizableTable.js

@@ -2,28 +2,19 @@ import _noop from "lodash/noop";
 import _find from "lodash/find";
 import _get from "lodash/get";
 import _merge from "lodash/merge";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
 /* eslint-disable max-len */
-
 /* eslint-disable @typescript-eslint/no-shadow */
-
 /* eslint-disable react-hooks/exhaustive-deps */
-
 /* eslint-disable react/destructuring-assignment */
-
 /* eslint-disable max-lines-per-function */
-
-
 import React, { useState, useEffect, useMemo } from 'react';
 import { addClass, removeClass } from '@douyinfe/semi-foundation/lib/es/utils/classnames';
 import { strings, numbers } from '@douyinfe/semi-foundation/lib/es/table/constants';
@@ -32,24 +23,18 @@ import Table from './Table';
 import { cloneDeep, mergeColumns } from './utils';
 import getColumns from './getColumns';
 import ResizableHeaderCell from './ResizableHeaderCell';
-
 const ResizableTable = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let ref = arguments.length > 1 ? arguments[1] : undefined;
-
   const {
-    components: propComponents,
-    columns: propColumns,
-    resizable
-  } = props,
-        restProps = __rest(props, ["components", "columns", "resizable"]);
-
+      components: propComponents,
+      columns: propColumns,
+      resizable
+    } = props,
+    restProps = __rest(props, ["components", "columns", "resizable"]);
   const childrenColumnName = 'children';
-
   const onResize = _get(resizable, 'onResize', _noop);
-
   const onResizeStart = _get(resizable, 'onResizeStart', _noop);
-
   const onResizeStop = _get(resizable, 'onResizeStop', _noop);
   /**
    * 此处关于 columns 有三个存储
@@ -59,7 +44,6 @@ const ResizableTable = function () {
    * 这三个参数加入了【选择列】以及【展开列】
    * 3. columns 是当前组件中存储的 state，一般情况下与 newColumns 相等，但是会保存列当前伸缩的宽度
    */
-
   /**
     * There are three stores for columns here
     *
@@ -68,31 +52,25 @@ const ResizableTable = function () {
     * These three parameters have been added [Select Column] and [Expand Column]
     * 3. columns is the state stored in the current component, which is generally equal to newColumns, but it will save the current stretched width of the column
     */
-
-
   const parsedColumns = Array.isArray(propColumns) && propColumns.length ? propColumns : getColumns(props.children);
   const rawColumns = assignColumnKeys(cloneDeep(parsedColumns), childrenColumnName);
   const newColumns = assignColumnKeys(cloneDeep(parsedColumns), childrenColumnName);
-
   if (typeof props.expandedRowRender === 'function' && !props.hideExpandedColumn && !_find(rawColumns, item => item.key === strings.DEFAULT_KEY_COLUMN_EXPAND)) {
     newColumns.unshift({
       key: strings.DEFAULT_KEY_COLUMN_EXPAND,
       width: numbers.DEFAULT_WIDTH_COLUMN_EXPAND
     });
   }
-
   if (props.rowSelection && !_find(rawColumns, item => item.key === strings.DEFAULT_KEY_COLUMN_SELECTION)) {
     newColumns.unshift({
       width: _get(props, 'rowSelection.width', numbers.DEFAULT_WIDTH_COLUMN_SELECTION),
       key: strings.DEFAULT_KEY_COLUMN_SELECTION
     });
   }
-
   const [columns, setColumns] = useState(newColumns);
   useEffect(() => {
     // If there is a resize value, the width does not use the default value fix#1072
     const _newColumns = withResizeWidth(columns, newColumns);
-
     setColumns(mergeColumns(columns, _newColumns));
   }, [propColumns, props.expandedRowRender, props.hideExpandedColumn, props.rowSelection]);
   const components = useMemo(() => _merge({
@@ -100,9 +78,7 @@ const ResizableTable = function () {
       cell: ResizableHeaderCell
     }
   }, propComponents), [propComponents]);
-
   const handlerClassName = _get(resizable, 'handlerClassName', 'resizing');
-
   const handleResize = column => (e, _ref) => {
     let {
       size
@@ -117,7 +93,6 @@ const ResizableTable = function () {
     Object.assign(curColumn, nextColumn);
     setColumns(nextColumns);
   };
-
   const handleResizeStart = column => e => {
     const nextColumns = cloneDeep(columns);
     const curColumn = findColumn(nextColumns, column, childrenColumnName);
@@ -129,7 +104,6 @@ const ResizableTable = function () {
     Object.assign(curColumn, nextColumn);
     setColumns(nextColumns);
   };
-
   const handleResizeStop = column => e => {
     const nextColumns = cloneDeep(columns);
     const curColumn = findColumn(nextColumns, column, childrenColumnName);
@@ -141,7 +115,6 @@ const ResizableTable = function () {
     Object.assign(curColumn, nextColumn);
     setColumns(nextColumns);
   };
-
   const resizableRender = function (col, index) {
     let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
     return Object.assign(Object.assign({}, col), {
@@ -153,22 +126,18 @@ const ResizableTable = function () {
       })
     });
   };
-
   const assignResizableRender = function () {
     let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     return Array.isArray(columns) && columns.length ? columns.map((col, index) => {
       Object.assign(col, resizableRender(col, index, level));
       const children = col[childrenColumnName];
-
       if (Array.isArray(children) && children.length) {
         col[childrenColumnName] = assignResizableRender(children, level + 1);
       }
-
       return col;
     }) : [];
   };
-
   const finalColumns = useMemo(() => assignResizableRender(columns), [columns]);
   return /*#__PURE__*/React.createElement(Table, Object.assign({}, restProps, {
     columns: finalColumns,
@@ -176,5 +145,4 @@ const ResizableTable = function () {
     ref: ref
   }));
 };
-
 export default /*#__PURE__*/React.forwardRef(ResizableTable);

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

@@ -11,7 +11,7 @@ import { HeadTableProps } from './HeadTable';
 import { BodyProps } from './Body';
 import { ColumnProps, TablePaginationProps, BodyScrollEvent, BodyScrollPosition, ExpandIcon, Pagination, RenderPagination, TableProps, TableComponents, RowSelectionProps, Data } from './interface';
 import { ArrayElement } from '../_base/base';
-export declare type NormalTableProps<RecordType extends Record<string, any> = Data> = Omit<TableProps<RecordType>, 'resizable'>;
+export type NormalTableProps<RecordType extends Record<string, any> = Data> = Omit<TableProps<RecordType>, 'resizable'>;
 export interface NormalTableState<RecordType extends Record<string, any> = Data> {
     cachedColumns?: ColumnProps<RecordType>[];
     cachedChildren?: React.ReactNode;
@@ -41,7 +41,7 @@ export interface NormalTableState<RecordType extends Record<string, any> = Data>
      */
     allDisabledRowKeysSet?: Set<BaseRowKeyType>;
 }
-export declare type TableStateRowSelection<RecordType extends Record<string, any> = Data> = (RowSelectionProps<RecordType> & {
+export type TableStateRowSelection<RecordType extends Record<string, any> = Data> = (RowSelectionProps<RecordType> & {
     selectedRowKeysSet?: Set<(string | number)>;
 }) | boolean;
 export interface RenderTableProps<RecordType> extends HeadTableProps, BodyProps {