@douyinfe/semi-ui 2.1.0-beta.3 → 2.1.0-next.3

package/lib/cjs/table/ColumnSorter.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+class ColumnSorter extends _react.PureComponent {
+  render() {
+    const {
+      prefixCls,
+      onClick,
+      sortOrder,
+      style
+    } = this.props;
+    const iconBtnSize = 'small';
+    const upCls = (0, _classnames.default)("".concat(prefixCls, "-column-sorter-up"), {
+      on: sortOrder === _constants.strings.SORT_DIRECTIONS[0]
+    });
+    const downCls = (0, _classnames.default)("".concat(prefixCls, "-column-sorter-down"), {
+      on: sortOrder === _constants.strings.SORT_DIRECTIONS[1]
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: style,
+      className: "".concat(prefixCls, "-column-sorter"),
+      onClick: onClick
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(upCls)
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconCaretup, {
+      size: iconBtnSize
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(downCls)
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconCaretdown, {
+      size: iconBtnSize
+    })));
+  }
+
+}
+
+exports.default = ColumnSorter;
+ColumnSorter.propTypes = {
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  onClick: _propTypes.default.func,
+  prefixCls: _propTypes.default.string,
+  sortOrder: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
+};
+ColumnSorter.defaultProps = {
+  prefixCls: _constants.cssClasses.PREFIX,
+  onClick: _noop2.default,
+  sortOrder: false
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export interface CustomExpandIconProps {
+    expanded?: boolean;
+    componentType?: 'tree' | 'expand';
+    onClick?: (nextExpand: boolean, e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+    expandIcon?: ((expanded?: boolean) => React.ReactNode) | React.ReactNode;
+    prefixCls?: string;
+    motion?: boolean;
+}
+/**
+ * render expand icon
+ */
+declare function CustomExpandIcon(props: CustomExpandIconProps): JSX.Element;
+declare namespace CustomExpandIcon {
+    var propTypes: {
+        expanded: PropTypes.Requireable<boolean>;
+        componentType: PropTypes.Requireable<string>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
+        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
+        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        prefixCls: PropTypes.Requireable<string>;
+        motion: PropTypes.Requireable<boolean>;
+    };
+    var defaultProps: {
+        componentType: string;
+        onClick: (...args: any[]) => void;
+        onMouseEnter: (...args: any[]) => void;
+        onMouseLeave: (...args: any[]) => void;
+        prefixCls: "semi-table";
+    };
+}
+export default CustomExpandIcon;

package/lib/cjs/table/CustomExpandIcon.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = CustomExpandIcon;
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
+
+var _Rotate = _interopRequireDefault(require("../motions/Rotate"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable react-hooks/exhaustive-deps */
+
+/**
+ * render expand icon
+ */
+function CustomExpandIcon(props) {
+  const {
+    expanded,
+    componentType,
+    onClick = _noop2.default,
+    onMouseEnter = _noop2.default,
+    onMouseLeave = _noop2.default,
+    expandIcon,
+    prefixCls = _constants.cssClasses.PREFIX,
+    motion = true
+  } = props;
+  let icon;
+
+  if ( /*#__PURE__*/_react.default.isValidElement(expandIcon)) {
+    icon = expandIcon;
+  } else if (typeof expandIcon === 'function') {
+    icon = expandIcon(expanded);
+  } else if (componentType === 'tree') {
+    icon = expanded && !motion ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconTreeTriangleDown, {
+      size: "small"
+    }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconTreeTriangleRight, {
+      size: "small"
+    });
+  } else {
+    icon = expanded && !motion ? /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, null) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronRight, null);
+  }
+
+  const handleClick = (0, _react.useCallback)(e => {
+    if (typeof onClick === 'function') {
+      onClick(!expanded, e);
+    }
+  }, [expanded]);
+
+  if (motion) {
+    icon = /*#__PURE__*/_react.default.createElement(_Rotate.default, {
+      isOpen: expanded,
+      enterDeg: 90
+    }, icon);
+  }
+
+  return /*#__PURE__*/_react.default.createElement("span", {
+    onClick: handleClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    className: "".concat(prefixCls, "-expand-icon")
+  }, icon);
+}
+
+CustomExpandIcon.propTypes = {
+  expanded: _propTypes.default.bool,
+  componentType: _propTypes.default.oneOf(['tree', 'expand']),
+  onClick: _propTypes.default.func,
+  onMouseEnter: _propTypes.default.func,
+  onMouseLeave: _propTypes.default.func,
+  expandIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  prefixCls: _propTypes.default.string,
+  motion: _propTypes.default.bool
+};
+CustomExpandIcon.defaultProps = {
+  componentType: 'expand',
+  onClick: _noop2.default,
+  onMouseEnter: _noop2.default,
+  onMouseLeave: _noop2.default,
+  prefixCls: _constants.cssClasses.PREFIX
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps } from './interface';
+export interface HeadTableProps {
+    [x: string]: any;
+    anyColumnFixed?: boolean;
+    bodyHasScrollBar?: boolean;
+    columns?: ColumnProps[];
+    components?: TableComponents;
+    dataSource?: Record<string, any>[];
+    fixed?: Fixed;
+    handleBodyScroll?: React.EventHandler<BodyScrollEvent>;
+    prefixCls?: string;
+    forwardedRef?: React.MutableRefObject<HTMLDivElement> | ((instance: any) => void);
+    scroll?: Scroll;
+    selectedRowKeysSet: Set<any>;
+    showHeader?: boolean;
+    onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<Pick<HeadTableProps, keyof HeadTableProps> & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/cjs/table/HeadTable.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ColGroup = _interopRequireDefault(require("./ColGroup"));
+
+var _TableHeader = _interopRequireDefault(require("./TableHeader"));
+
+/* eslint-disable max-len */
+
+/**
+ * When there are fixed columns, the header is rendered as a separate Table
+ */
+class HeadTable extends _react.default.PureComponent {
+  constructor() {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+      selectedRowKeysSet: new _set.default()
+    };
+    super(props);
+  }
+
+  render() {
+    const {
+      scroll,
+      prefixCls,
+      fixed,
+      forwardedRef,
+      handleBodyScroll,
+      columns,
+      components,
+      onDidUpdate,
+      showHeader,
+      anyColumnFixed,
+      bodyHasScrollBar
+    } = this.props;
+
+    if (!showHeader) {
+      return null;
+    }
+
+    const Table = (0, _get2.default)(components, 'header.outer', 'table');
+    const x = (0, _get2.default)(scroll, 'x');
+    const headStyle = {};
+    const tableStyle = {};
+
+    if (x && !fixed) {
+      tableStyle.width = x;
+    }
+
+    if (bodyHasScrollBar) {
+      headStyle.overflowY = 'scroll';
+    }
+
+    const colgroup = /*#__PURE__*/_react.default.createElement(_ColGroup.default, {
+      columns: columns,
+      prefixCls: prefixCls
+    });
+
+    const tableHeader = /*#__PURE__*/_react.default.createElement(_TableHeader.default, (0, _assign.default)({}, this.props, {
+      columns: columns,
+      components: components,
+      onDidUpdate: onDidUpdate
+    }));
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "headTable",
+      style: headStyle,
+      className: "".concat(prefixCls, "-header"),
+      ref: forwardedRef,
+      onScroll: handleBodyScroll
+    }, /*#__PURE__*/_react.default.createElement(Table, {
+      style: tableStyle,
+      className: (0, _classnames.default)(prefixCls, {
+        ["".concat(prefixCls, "-fixed")]: anyColumnFixed
+      })
+    }, colgroup, tableHeader));
+  }
+
+}
+
+HeadTable.propTypes = {
+  anyColumnFixed: _propTypes.default.bool,
+  bodyHasScrollBar: _propTypes.default.bool,
+  columns: _propTypes.default.array,
+  components: _propTypes.default.object,
+  dataSource: _propTypes.default.array,
+  fixed: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  handleBodyScroll: _propTypes.default.func,
+  prefixCls: _propTypes.default.string,
+  forwardedRef: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
+  scroll: _propTypes.default.shape({
+    x: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.bool]),
+    y: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  }),
+  selectedRowKeysSet: _propTypes.default.instanceOf(_set.default).isRequired,
+  showHeader: _propTypes.default.bool,
+  onDidUpdate: _propTypes.default.func
+};
+HeadTable.defaultProps = {
+  handleBodyScroll: _noop2.default
+};
+
+var _default = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(HeadTable, (0, _assign.default)({}, props, {
+  forwardedRef: ref
+})));
+
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ResizableHeaderCellProps {
+    [x: string]: any;
+    onResize?: ResizeFn;
+    onResizeStart?: ResizeFn;
+    onResizeStop?: ResizeFn;
+    width?: number | string;
+}
+declare class ResizableHeaderCell extends React.PureComponent<ResizableHeaderCellProps> {
+    render(): JSX.Element;
+}
+export declare type ResizeFn = (e: React.SyntheticEvent) => any;
+export default ResizableHeaderCell;

package/lib/cjs/table/ResizableHeaderCell.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactResizable = require("react-resizable");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+class ResizableHeaderCell extends _react.default.PureComponent {
+  render() {
+    var _context;
+
+    const _a = this.props,
+          {
+      onResize,
+      onResizeStart,
+      onResizeStop,
+      width
+    } = _a,
+          restProps = __rest(_a, ["onResize", "onResizeStart", "onResizeStop", "width"]);
+
+    if (typeof width !== 'number') {
+      return /*#__PURE__*/_react.default.createElement("th", (0, _assign.default)({}, restProps));
+    }
+
+    let {
+      children
+    } = restProps; // Fragment must be used here, otherwise there will be an error (seemingly a react-resizable@1.9.0 problem)
+
+    children = (0, _map.default)(_context = _react.default.Children).call(_context, children, (child, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: index
+    }, child));
+    return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
+      width: width,
+      height: 0,
+      onResize: onResize,
+      onResizeStart: onResizeStart,
+      onResizeStop: onResizeStop,
+      draggableOpts: {
+        enableUserSelectHack: false
+      }
+    }, /*#__PURE__*/_react.default.createElement("th", (0, _assign.default)({}, restProps), children));
+  }
+
+}
+
+var _default = ResizableHeaderCell;
+exports.default = _default;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import Table from './Table';
+import { TableProps } from './interface';
+declare const _default: React.ForwardRefExoticComponent<TableProps<any> & React.RefAttributes<Table<any>>>;
+export default _default;

package/lib/cjs/table/ResizableTable.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _find2 = _interopRequireDefault(require("lodash/find"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _merge2 = _interopRequireDefault(require("lodash/merge"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = require("@douyinfe/semi-foundation/lib/cjs/utils/classnames");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
+
+var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
+
+var _Table = _interopRequireDefault(require("./Table"));
+
+var _utils2 = require("./utils");
+
+var _getColumns = _interopRequireDefault(require("./getColumns"));
+
+var _ResizableHeaderCell = _interopRequireDefault(require("./ResizableHeaderCell"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, 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 */
+
+
+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"]);
+
+  const childrenColumnName = 'children';
+  const onResize = (0, _get2.default)(resizable, 'onResize', _noop2.default);
+  const onResizeStart = (0, _get2.default)(resizable, 'onResizeStart', _noop2.default);
+  const onResizeStop = (0, _get2.default)(resizable, 'onResizeStop', _noop2.default);
+  /**
+   * 此处关于 columns 有三个存储
+   *
+   * 1. rawColumns 是根据 props.columns 或者 props.children 解析出来的原始 columns
+   * 2. newColumns 是 rawColumns 的深拷贝，同时根据 props.expandedRowRender、props.hideExpandedColumn 和 props.rowSelection
+   * 这三个参数加入了【选择列】以及【展开列】
+   * 3. columns 是当前组件中存储的 state，一般情况下与 newColumns 相等，但是会保存列当前伸缩的宽度
+   */
+
+  /**
+    * There are three stores for columns here
+    *
+    * 1. rawColumns are the original columns parsed according to props.columns or props.children
+    * 2. newColumns is a deep copy of rawColumns, based on props.expandedRowRender, props.hideExpandedColumn and props.rowSelection
+    * 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 = (0, _isArray.default)(propColumns) && propColumns.length ? propColumns : (0, _getColumns.default)(props.children);
+  const rawColumns = (0, _utils.assignColumnKeys)((0, _utils2.cloneDeep)(parsedColumns), childrenColumnName);
+  const newColumns = (0, _utils.assignColumnKeys)((0, _utils2.cloneDeep)(parsedColumns), childrenColumnName);
+
+  if (typeof props.expandedRowRender === 'function' && !props.hideExpandedColumn && !(0, _find2.default)(rawColumns, item => item.key === _constants.strings.DEFAULT_KEY_COLUMN_EXPAND)) {
+    newColumns.unshift({
+      key: _constants.strings.DEFAULT_KEY_COLUMN_EXPAND,
+      width: _constants.numbers.DEFAULT_WIDTH_COLUMN_EXPAND
+    });
+  }
+
+  if (props.rowSelection && !(0, _find2.default)(rawColumns, item => item.key === _constants.strings.DEFAULT_KEY_COLUMN_SELECTION)) {
+    newColumns.unshift({
+      width: (0, _get2.default)(props, 'rowSelection.width', _constants.numbers.DEFAULT_WIDTH_COLUMN_SELECTION),
+      key: _constants.strings.DEFAULT_KEY_COLUMN_SELECTION
+    });
+  }
+
+  const [columns, setColumns] = (0, _react.useState)(newColumns);
+  (0, _react.useEffect)(() => {
+    // If there is a resize value, the width does not use the default value fix#1072
+    const _newColumns = (0, _utils.withResizeWidth)(columns, newColumns);
+
+    setColumns((0, _utils.mergeColumns)(columns, _newColumns));
+  }, [propColumns, props.expandedRowRender, props.hideExpandedColumn, props.rowSelection]);
+  const components = (0, _react.useMemo)(() => (0, _merge2.default)({
+    header: {
+      cell: _ResizableHeaderCell.default
+    }
+  }, propComponents), [propComponents]);
+  const handlerClassName = (0, _get2.default)(resizable, 'handlerClassName', 'resizing');
+
+  const handleResize = column => (e, _ref) => {
+    let {
+      size
+    } = _ref;
+    const nextColumns = (0, _utils2.cloneDeep)(columns);
+    const curColumn = (0, _utils.findColumn)(nextColumns, column, childrenColumnName);
+    let nextColumn = (0, _assign.default)((0, _assign.default)({}, curColumn), {
+      width: size.width
+    });
+    const customProps = onResize(nextColumn) || {};
+    nextColumn = (0, _assign.default)((0, _assign.default)({}, nextColumn), customProps);
+    (0, _assign.default)(curColumn, nextColumn);
+    setColumns(nextColumns);
+  };
+
+  const handleResizeStart = column => e => {
+    const nextColumns = (0, _utils2.cloneDeep)(columns);
+    const curColumn = (0, _utils.findColumn)(nextColumns, column, childrenColumnName);
+    let nextColumn = (0, _assign.default)((0, _assign.default)({}, curColumn), {
+      className: (0, _classnames.addClass)(curColumn.className, handlerClassName)
+    });
+    const customProps = onResizeStart(nextColumn) || {};
+    nextColumn = (0, _assign.default)((0, _assign.default)({}, nextColumn), customProps);
+    (0, _assign.default)(curColumn, nextColumn);
+    setColumns(nextColumns);
+  };
+
+  const handleResizeStop = column => e => {
+    const nextColumns = (0, _utils2.cloneDeep)(columns);
+    const curColumn = (0, _utils.findColumn)(nextColumns, column, childrenColumnName);
+    let nextColumn = (0, _assign.default)((0, _assign.default)({}, curColumn), {
+      className: (0, _classnames.removeClass)(curColumn.className, handlerClassName)
+    });
+    const customProps = onResizeStop(nextColumn) || {};
+    nextColumn = (0, _assign.default)((0, _assign.default)({}, nextColumn), customProps);
+    (0, _assign.default)(curColumn, nextColumn);
+    setColumns(nextColumns);
+  };
+
+  const resizableRender = function (col, index) {
+    let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    return (0, _assign.default)((0, _assign.default)({}, col), {
+      onHeaderCell: column => ({
+        width: column.width,
+        onResize: handleResize(column),
+        onResizeStart: handleResizeStart(column),
+        onResizeStop: handleResizeStop(column)
+      })
+    });
+  };
+
+  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 (0, _isArray.default)(columns) && columns.length ? (0, _map.default)(columns).call(columns, (col, index) => {
+      (0, _assign.default)(col, resizableRender(col, index, level));
+      const children = col[childrenColumnName];
+
+      if ((0, _isArray.default)(children) && children.length) {
+        col[childrenColumnName] = assignResizableRender(children, level + 1);
+      }
+
+      return col;
+    }) : [];
+  };
+
+  const finalColumns = (0, _react.useMemo)(() => assignResizableRender(columns), [columns]);
+  return /*#__PURE__*/_react.default.createElement(_Table.default, (0, _assign.default)({}, restProps, {
+    columns: finalColumns,
+    components: components,
+    ref: ref
+  }));
+};
+
+var _default = /*#__PURE__*/_react.default.forwardRef(ResizableTable);
+
+exports.default = _default;