@chaoswise/ui 3.0.6 → 3.0.8

package/lib/CWSelect/index.js

@@ -0,0 +1,2 @@
+import Select from "../Antd5/select";
+export default Select;

package/lib/CWTable/CWTable.js

@@ -0,0 +1,605 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import _configHoc from "@chaoswise/ui/lib/configHoc";
+import _Pagination from "@chaoswise/ui/lib/Pagination";
+import _Table from "@chaoswise/ui/lib/Table";
+import _SearchBar from "@chaoswise/ui/lib/SearchBar";
+import _treeLoad from "@chaoswise/ui/lib/treeLoad";
+import _FilterDropDown from "@chaoswise/ui/lib/FilterDropDown";
+var _excluded = ["columns", "lazyLoading", "loadData", "dataSource", "rowSelection", "pagination", "onExpand", "searchBar", "showHeader", "bordered", "scroll", "size", "className", "columnFilter", "tableWapperClassName", "onColumnsExchange", "expandIcon", "frontPagination", "tableHeader", "tableHeaderClassName", "autoHeight", "expandedRowRender", "onScrollToBottom", "components", "onColumnsResizeEnd"],
+  _excluded2 = ["onSearch"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useState, useEffect, useRef, useMemo, forwardRef } from "react";
+import Icon, { LoadingOutlined, DownOutlined, RightOutlined } from "@ant-design/icons";
+import classnames from "classnames";
+import ResizeObserver from "resize-observer-polyfill";
+import { merge } from "lodash-es";
+import { HeaderCell } from "./header";
+import useStyle from "./index.style";
+var CWTable = function CWTable(_ref, ref) {
+  var _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    _ref$lazyLoading = _ref.lazyLoading,
+    lazyLoading = _ref$lazyLoading === void 0 ? false : _ref$lazyLoading,
+    loadData = _ref.loadData,
+    _ref$dataSource = _ref.dataSource,
+    dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+    rowSelection = _ref.rowSelection,
+    _ref$pagination = _ref.pagination,
+    pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$onExpand = _ref.onExpand,
+    _onExpand = _ref$onExpand === void 0 ? function () {} : _ref$onExpand,
+    _ref$searchBar = _ref.searchBar,
+    searchBar = _ref$searchBar === void 0 ? {} : _ref$searchBar,
+    _ref$showHeader = _ref.showHeader,
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$scroll = _ref.scroll,
+    scroll = _ref$scroll === void 0 ? {} : _ref$scroll,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    className = _ref.className,
+    _ref$columnFilter = _ref.columnFilter,
+    columnFilter = _ref$columnFilter === void 0 ? false : _ref$columnFilter,
+    tableWapperClassName = _ref.tableWapperClassName,
+    _ref$onColumnsExchang = _ref.onColumnsExchange,
+    _onColumnsExchange = _ref$onColumnsExchang === void 0 ? function () {} : _ref$onColumnsExchang,
+    expandIcon = _ref.expandIcon,
+    _ref$frontPagination = _ref.frontPagination,
+    frontPagination = _ref$frontPagination === void 0 ? false : _ref$frontPagination,
+    _ref$tableHeader = _ref.tableHeader,
+    tableHeader = _ref$tableHeader === void 0 ? null : _ref$tableHeader,
+    tableHeaderClassName = _ref.tableHeaderClassName,
+    _ref$autoHeight = _ref.autoHeight,
+    autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
+    expandedRowRender = _ref.expandedRowRender,
+    onScrollToBottom = _ref.onScrollToBottom,
+    tableComponents = _ref.components,
+    _ref$onColumnsResizeE = _ref.onColumnsResizeEnd,
+    onColumnsResizeEnd = _ref$onColumnsResizeE === void 0 ? function () {} : _ref$onColumnsResizeE,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var prefix = rest.getPrefixCls();
+  var _useStyle = useStyle("cw-common-table"),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollY = _useState2[0],
+    setScrollY = _useState2[1]; // Fixed: 0 header 元素丢失
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tableWrapperHeight = _useState4[0],
+    setTableWrapperHeight = _useState4[1];
+  //filterDropDown和表格联用控制表格的列是否显示
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showCols = _useState6[0],
+    setShowCols = _useState6[1];
+  //异步加载设置loading
+  var _useState7 = useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loading = _useState8[0],
+    setLoading = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    tableColumn = _useState10[0],
+    setTableColumn = _useState10[1];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    finalDataSource = _useState12[0],
+    setFinalDataSource = _useState12[1];
+
+  // 设置前端分页
+  var _useState13 = useState({
+      current: 1,
+      pageSize: 30
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    pageInfo = _useState14[0],
+    setPageInfo = _useState14[1];
+  // 设置搜索字段
+  var searchInfo = useRef({}); // 搜索信息
+  var watcher = useRef(null); // null
+
+  //table外部div容器的ref
+  var tableRef = useRef(null);
+  var searchContainerRef = useRef(null);
+  var extraHeaderContainerRef = useRef(null);
+  var paginationContainerRef = useRef(null);
+  var outContainerRef = useRef(null);
+
+  // 设置SearchBar信息
+  var _searchBar$onSearch = searchBar.onSearch,
+    _onSearch = _searchBar$onSearch === void 0 ? function () {} : _searchBar$onSearch,
+    searchBarRest = _objectWithoutProperties(searchBar, _excluded2);
+  var resizeColsRef = useRef(null);
+
+  // 存储默认搜索信息
+  var getDefaultSearchValues = function getDefaultSearchValues(searchFields) {
+    searchInfo.current = searchFields;
+  };
+
+  // search
+  var onSearchChange = function onSearchChange(searchFields) {
+    // 存储搜索信息
+    searchInfo.current = searchFields;
+    _onSearch(searchFields, pageInfo.current, pageInfo.pageSize);
+  };
+
+  // 设置过滤筛选
+  var columnsOptions = columnFilter.columnsOptions,
+    defaultShowColumns = columnFilter.defaultShowColumns,
+    showColumns = columnFilter.showColumns,
+    _columnFilter$onShowC = columnFilter.onShowColumnsChange,
+    _onShowColumnsChange = _columnFilter$onShowC === void 0 ? function () {} : _columnFilter$onShowC,
+    _columnFilter$onShowC2 = columnFilter.onShowColumnsDrag,
+    _onShowColumnsDrag = _columnFilter$onShowC2 === void 0 ? function () {} : _columnFilter$onShowC2,
+    _columnFilter$isDrag = columnFilter.isDrag,
+    isDrag = _columnFilter$isDrag === void 0 ? false : _columnFilter$isDrag,
+    colsFilterTitle = columnFilter.colsFilterTitle,
+    _columnFilter$isShowS = columnFilter.isShowSelectAll,
+    isShowSelectAll = _columnFilter$isShowS === void 0 ? false : _columnFilter$isShowS;
+  var getDataSource = function getDataSource() {
+    var _dataSource = _toConsumableArray(dataSource);
+    if (frontPagination) {
+      var _current = pagination.current,
+        _pageSize = pagination.pageSize,
+        _total = pagination.total;
+      var current = _current || pageInfo.current;
+      var pageSize = _pageSize || pageInfo.pageSize;
+      var total = _total || dataSource.length;
+      _dataSource = _dataSource.slice((current - 1) * pageSize, current * pageSize > total ? total : current * pageSize);
+    }
+    setFinalDataSource(_dataSource);
+  };
+  useEffect(getDataSource, [frontPagination, pagination, pageInfo, dataSource]);
+  useEffect(function () {
+    if (!autoHeight) {
+      return;
+    }
+    var outerHeight = 0;
+    var extraHeaderHeight = 0;
+    var searchBarHeight = 0;
+    var paginationHeight = 0;
+    var tableHeaderHeight = 0;
+    watcher.current = new ResizeObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          var _className = entry.target.className;
+          var height = entry.contentRect.height;
+          var offsetHeight = entry.target.offsetHeight;
+          if (_className.includes("cw-common-table")) {
+            outerHeight = height;
+          }
+          if (_className.includes("cw-table-extra-header-area")) {
+            extraHeaderHeight = offsetHeight; // padding不计算高度
+          }
+          if (_className.includes("".concat(prefix, "-search-bar-form"))) {
+            searchBarHeight = offsetHeight; // padding-bottom 16 不会计算到高度内
+          }
+          if (_className.includes("cw-table-pagination-box")) {
+            paginationHeight = offsetHeight;
+          }
+          if (_className.includes("-table-header")) {
+            tableHeaderHeight = height;
+          }
+        }
+        // 计算表格高度
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var tableWrapperHeight = outerHeight - searchBarHeight - extraHeaderHeight - paginationHeight;
+      var scrollY = tableWrapperHeight - tableHeaderHeight - 2;
+      setTableWrapperHeight(tableWrapperHeight);
+      setScrollY(scrollY);
+    });
+    watcher.current.observe(outContainerRef.current);
+    watcher.current.observe(extraHeaderContainerRef.current);
+    watcher.current.observe(searchContainerRef.current);
+    watcher.current.observe(paginationContainerRef.current);
+    return function () {
+      if (outContainerRef.current) {
+        var _watcher$current;
+        (_watcher$current = watcher.current) === null || _watcher$current === void 0 || _watcher$current.unobserve(outContainerRef.current);
+      }
+      if (extraHeaderContainerRef.current) {
+        var _watcher$current2;
+        (_watcher$current2 = watcher.current) === null || _watcher$current2 === void 0 || _watcher$current2.unobserve(extraHeaderContainerRef.current);
+      }
+      if (searchContainerRef.current) {
+        var _watcher$current3;
+        (_watcher$current3 = watcher.current) === null || _watcher$current3 === void 0 || _watcher$current3.unobserve(searchContainerRef.current);
+      }
+      if (paginationContainerRef.current) {
+        var _watcher$current4;
+        (_watcher$current4 = watcher.current) === null || _watcher$current4 === void 0 || _watcher$current4.unobserve(paginationContainerRef.current);
+      }
+    };
+  }, [autoHeight]);
+  useEffect(function () {
+    if (!autoHeight) {
+      return;
+    }
+    var tableHeaderDom;
+    if (showHeader) {
+      tableHeaderDom = tableRef.current.querySelector(".".concat(prefix, "-table-header"));
+      watcher.current.observe(tableHeaderDom);
+    }
+    return function () {
+      if (tableHeaderDom) {
+        var _watcher$current5;
+        (_watcher$current5 = watcher.current) === null || _watcher$current5 === void 0 || _watcher$current5.unobserve(tableHeaderDom);
+      }
+    };
+  }, [showHeader, autoHeight]);
+  // 设置当前列
+  useEffect(function () {
+    var tempColumns =
+    // bordered ?
+    columns.map(function (col, index) {
+      var col_ = _objectSpread({}, col);
+      if (col.isResize) {
+        //若不设置列宽，设置默认，否则不出现伸缩手柄
+        col_.width = parseInt(col.width) || 100;
+        //设置头部单元格属性
+        col_.onHeaderCell = function (column) {
+          return {
+            width: parseInt(column.minWidth) ? parseInt(column.width) > parseInt(column.minWidth) ? parseInt(column.width) : parseInt(column.minWidth) : parseInt(column.width),
+            onResize: handleResize(index)
+          };
+        };
+      }
+      return col_;
+    });
+    // : columns;
+    setTableColumn(tempColumns);
+    if (defaultShowColumns) {
+      setShowCols(defaultShowColumns);
+    } else {
+      setShowCols(columns.map(function (item) {
+        return item.dataIndex;
+      }));
+    }
+  }, [columns, defaultShowColumns]);
+  useEffect(function () {
+    resizeColsRef.current = tableColumn;
+  }, [tableColumn]);
+
+  // 设置分页页码
+  useEffect(function () {
+    if (pagination) {
+      setPageInfo(function (prePageInfo) {
+        var newPageInfo = _objectSpread({}, prePageInfo);
+        var defaultCurrent = pagination.defaultCurrent,
+          defaultPageSize = pagination.defaultPageSize;
+        if (defaultCurrent) {
+          newPageInfo.current = defaultCurrent;
+        }
+        if (defaultPageSize) {
+          newPageInfo.pageSize = defaultPageSize;
+        }
+        return newPageInfo;
+      });
+    }
+  }, [pagination]);
+  var _showCols = useMemo(function () {
+    return columnFilter.hasOwnProperty("showColumns") ? showColumns : showCols;
+  }, [showColumns, showCols]);
+  useEffect(function () {
+    if (!autoHeight) {
+      return;
+    }
+    var maxHeight = "".concat(scrollY, "px");
+    var tableBodyDom = tableRef.current.querySelector(".".concat(prefix, "-table-body"));
+    var tablePlaceholderDom = tableRef.current.querySelector(".".concat(prefix, "-table-placeholder"));
+    if (finalDataSource.length !== 0) {
+      if (tableBodyDom) {
+        tableBodyDom.style.height = maxHeight;
+      }
+    } else {
+      if (tableBodyDom) {
+        tableBodyDom.style.height = "unset";
+      }
+      if (tablePlaceholderDom) {
+        tablePlaceholderDom.style.height = maxHeight;
+      }
+    }
+  }, [scrollY, finalDataSource]);
+
+  // 表格滚动到底触发函数
+  useEffect(function () {
+    if (!onScrollToBottom) {
+      return;
+    }
+    if (onScrollToBottom) {
+      var tableBodyDom = tableRef.current.querySelector(".".concat(prefix, "-table-body"));
+      var scrollEvent = function scrollEvent() {
+        if (tableBodyDom.scrollTop + tableBodyDom.clientHeight == tableBodyDom.scrollHeight) {
+          onScrollToBottom();
+        }
+      };
+      if (tableBodyDom) {
+        tableBodyDom.addEventListener("scroll", scrollEvent);
+      }
+      return function () {
+        if (tableBodyDom) {
+          tableBodyDom === null || tableBodyDom === void 0 || tableBodyDom.removeEventListener("scroll", scrollEvent);
+        }
+      };
+    }
+  }, []);
+  var filterColumn = function filterColumn() {
+    if (columnsOptions) {
+      return columnsOptions;
+    }
+    return tableColumn.map(function (item) {
+      return {
+        id: item.dataIndex,
+        name: typeof item.title === "function" ? item.title() : item.title,
+        disabled: item.disabled ? item.disabled : false
+      };
+    });
+  };
+
+  // 渲染过滤筛选表格
+  var showFilter = function showFilter() {
+    return /*#__PURE__*/React.createElement(_FilterDropDown, {
+      className: "cw-table-search-filter",
+      options: filterColumn(),
+      selectItems: _showCols,
+      isDrag: isDrag,
+      onChange: onColumnsChange,
+      handleExchangeOptions: onChangeOption,
+      colsFilterTitle: colsFilterTitle,
+      isShowSelectAll: isShowSelectAll
+    });
+  };
+  var handleResize = function handleResize(index) {
+    return function (e, _ref2, isDragEnd) {
+      var size = _ref2.size;
+      var nextColumns = _toConsumableArray(resizeColsRef.current);
+      nextColumns[index] = _objectSpread(_objectSpread({}, nextColumns[index]), {}, {
+        width: size.width
+      });
+      setTableColumn(nextColumns);
+      if (isDragEnd) {
+        // 拖拽结束后将columns回传
+        onColumnsResizeEnd(nextColumns);
+      }
+    };
+  };
+  // 筛选表格列，拿到最新的列渲染
+  var getColumns = function getColumns() {
+    return tableColumn.filter(function (col) {
+      return _showCols.includes(col.dataIndex);
+    });
+  };
+  var bodyScroll = autoHeight ? merge({
+    y: scrollY
+  }, scroll) : scroll;
+
+  // 表格数据有children时点击展开的函数
+  var onExpand = function onExpand(expanded, record) {
+    _onExpand(expanded, record);
+    //开启了表格数据懒加载触发的函数
+    if (lazyLoading && expanded && record.children.length === 0) {
+      setLoading(record.value);
+      return new Promise(function (resolve) {
+        _treeLoad(finalDataSource, record.value, loadData, function () {
+          resolve();
+        });
+      }).then(function () {
+        setLoading("");
+      });
+    }
+  };
+
+  //默认表格数据展开的图标
+  var changeExpandIcon = function changeExpandIcon(props) {
+    var expanded = props.expanded;
+    var hasChildren = finalDataSource.some(function (item) {
+      return item.children;
+    });
+    // 如果expandIcon自定义了reactNode作为图标，就渲染此图标
+    var SelfDefinedIcon;
+    if (expandIcon) {
+      SelfDefinedIcon = function SelfDefinedIcon() {
+        return expandIcon(props);
+      };
+    }
+    var isLoading = loading === props.record.key;
+    var iconComponent = isLoading ? LoadingOutlined : expanded ? DownOutlined : RightOutlined;
+    var expandIconComponent = expandIcon && !isLoading ? /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: expandedRowRender ? 0 : "12px",
+        cursor: "pointer"
+      },
+      onClick: function onClick(e) {
+        props.onExpand(props.record, e);
+      }
+    }, /*#__PURE__*/React.createElement(SelfDefinedIcon, null)) : /*#__PURE__*/React.createElement(Icon, {
+      component: iconComponent,
+      style: {
+        marginRight: expandedRowRender ? 0 : "12px"
+      },
+      onClick: function onClick(e) {
+        if (isLoading) return;
+        props.onExpand(props.record, e);
+      }
+    });
+    if (props.record.children || expandedRowRender) {
+      return expandIconComponent;
+    } else {
+      return /*#__PURE__*/React.createElement("span", {
+        style: {
+          marginRight: hasChildren ? "24px" : 0
+        }
+      });
+    }
+  };
+
+  //筛选列的选中项改变触发
+  var onColumnsChange = function onColumnsChange(cols) {
+    setShowCols(cols);
+    _onShowColumnsChange(cols);
+  };
+
+  //拖拽筛选列调换顺序触发
+  var onChangeOption = function onChangeOption(dragIndex, hoverIndex, options) {
+    var list = tableColumn;
+    var tmp = list[dragIndex]; //临时储存文件
+    list.splice(dragIndex, 1); //移除拖拽项
+    list.splice(hoverIndex, 0, tmp); //插入放置项
+    setTableColumn(_toConsumableArray(list));
+    _onColumnsExchange(list, options);
+    _onShowColumnsDrag(list, options);
+  };
+
+  // 滚动到顶部
+  var scrollToTop = function scrollToTop() {
+    var tableBodyDom = tableRef.current.querySelector(".".concat(prefix, "-table-body"));
+    if (tableBodyDom) {
+      tableBodyDom.scrollTop = 0;
+    }
+  };
+
+  // 分页页码改变触发
+  var onCurrentChange = function onCurrentChange(page, pageSize) {
+    // 监听分页变化时表格body的滚动条到顶部
+    scrollToTop();
+    setPageInfo({
+      current: page,
+      pageSize: pageSize
+    });
+    if (pagination && pagination.onChange) {
+      pagination.onChange(page, pageSize, searchInfo.current);
+    }
+  };
+  // 每页条数改变触发
+  var onShowSizeChange = function onShowSizeChange(page, currentPageSize) {
+    // 监听分页变化时表格body的滚动条到顶部
+    scrollToTop();
+    setPageInfo({
+      current: page,
+      pageSize: currentPageSize
+    });
+    if (pagination && pagination.onShowSizeChange) {
+      pagination.onShowSizeChange(page, currentPageSize, searchInfo.current);
+    }
+  };
+
+  // 获取分页信息
+  var getPaginationOption = function getPaginationOption() {
+    if (pagination === false) {
+      return {};
+    }
+    var current = pagination.current,
+      pageSize = pagination.pageSize,
+      total = pagination.total,
+      size = pagination.size;
+    var common = _objectSpread(_objectSpread({}, pagination), {}, {
+      onChange: onCurrentChange,
+      onShowSizeChange: onShowSizeChange,
+      size: size == "small" ? "small" : ""
+    });
+    return _objectSpread(_objectSpread({}, common), {}, {
+      current: current || pageInfo.current,
+      pageSize: pageSize || pageInfo.pageSize,
+      total: total || dataSource.length
+    });
+  };
+
+  // 列拖拽,自定义排序
+  var components = {
+    header: {
+      cell: HeaderCell
+    }
+  };
+  components = merge(components, tableComponents);
+  var tableColumns = getColumns();
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+    className: classnames(hashId, cssVarCls, "cw-common-table", tableWapperClassName),
+    ref: outContainerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(_defineProperty({
+      "cw-table-extra-header-area": true,
+      "cw-table-extra-header-area-none": !(tableHeader || columnFilter)
+    }, tableHeaderClassName, true)),
+    ref: extraHeaderContainerRef
+  }, /*#__PURE__*/React.createElement("div", null, tableHeader && tableHeader), columnFilter && /*#__PURE__*/React.createElement("div", {
+    className: "cw-oprate-area"
+  }, showFilter())), /*#__PURE__*/React.createElement(_SearchBar, _extends({
+    getRef: function getRef(ref) {
+      return searchContainerRef.current = ref;
+    },
+    options: filterColumn(),
+    showColumns: _showCols,
+    dataSource: finalDataSource,
+    onColumnsChange: onColumnsChange,
+    onChangeOption: onChangeOption,
+    getDefaultSearchValues: getDefaultSearchValues,
+    onSearch: onSearchChange
+  }, searchBarRest, {
+    style: Object.keys(searchBar).length === 0 ? _objectSpread({
+      height: 0,
+      overflow: "hidden",
+      padding: 0
+    }, searchBarRest.style || {}) : searchBarRest.style || {}
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "cw-table-wrapper-main",
+    style: {
+      height: autoHeight ? tableWrapperHeight : "auto"
+    },
+    ref: tableRef
+  }, /*#__PURE__*/React.createElement(_Table, _extends({
+    ref: ref,
+    columns: tableColumns,
+    dataSource: finalDataSource,
+    rowSelection: rowSelection && _objectSpread({
+      columnWidth: 40
+    }, rowSelection),
+    pagination: false,
+    onExpand: onExpand,
+    showHeader: showHeader,
+    scroll: bodyScroll,
+    size: size,
+    bordered: bordered,
+    expandIcon: changeExpandIcon,
+    className: className,
+    components: components,
+    expandedRowRender: expandedRowRender,
+    loading: Boolean(loading)
+  }, rest))), /*#__PURE__*/React.createElement("div", {
+    className: classnames({
+      "cw-table-pagination-box": true,
+      "cw-table-pagination-box-none": !dataSource.length || !pagination
+    }),
+    ref: paginationContainerRef
+  }, /*#__PURE__*/React.createElement(_Pagination, getPaginationOption()))));
+};
+export default _configHoc( /*#__PURE__*/forwardRef(CWTable));

package/lib/CWTable/header.js

@@ -0,0 +1,55 @@
+var _excluded = ["onResize", "width", "onClick"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useRef } from "react";
+import { Resizable } from "react-resizable";
+// 自定义表头单元格
+export function HeaderCell(props) {
+  var _onResize = props.onResize,
+    width = props.width,
+    _props$onClick = props.onClick,
+    _onClick = _props$onClick === void 0 ? function () {} : _props$onClick,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var isResizeRef = useRef(null);
+  if (!width) {
+    return /*#__PURE__*/React.createElement("th", _extends({}, restProps, {
+      onClick: _onClick
+    }));
+  }
+  return /*#__PURE__*/React.createElement(Resizable, {
+    width: width,
+    height: 0,
+    onResize: function onResize(e, data) {
+      _onResize(e, data, false);
+    },
+    onResizeStart: function onResizeStart() {
+      // 页面选中功能禁用
+      document.body.onselectstart = function () {
+        return false;
+      };
+      isResizeRef.current = true;
+    },
+    onResizeStop: function onResizeStop(e, data) {
+      // 页面选中功能开启
+      document.body.onselectstart = function () {
+        return true;
+      };
+      // 第三个参数是拖拽是否结束
+      _onResize(e, data, true);
+      setTimeout(function () {
+        isResizeRef.current = false;
+      });
+    },
+    className: "cw-table-react-resizable",
+    draggableOpts: {
+      enableUserSelectHack: false
+    }
+  }, /*#__PURE__*/React.createElement("th", _extends({}, restProps, {
+    onClick: function onClick() {
+      if (!isResizeRef.current && _onClick) {
+        _onClick.apply(void 0, arguments);
+      }
+    }
+  })));
+}