linkmore-design 1.0.3

package/es/ProTable/Table.js

@@ -0,0 +1,321 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Summary = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));
+
+var _proTable = _interopRequireDefault(require("@ant-design/pro-table"));
+
+var _lodash = require("lodash");
+
+var _context = _interopRequireDefault(require("./context"));
+
+var _VList = require("./VList");
+
+var _resetConfig = _interopRequireDefault(require("./resetConfig"));
+
+var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading"];
+var Summary = _proTable.default.Summary;
+exports.Summary = Summary;
+var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var dataSource = props.dataSource,
+      autoSize = props.autoSize,
+      columns = props.columns,
+      rowClick = props.rowClick,
+      _onDoubleClick = props.onDoubleClick,
+      checkConfig = props.checkConfig,
+      _summary = props.summary,
+      pagination = props.pagination,
+      hiddenPage = props.hiddenPage,
+      loading = props.loading,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _resetProps$rowKey = resetProps.rowKey,
+      rowKey = _resetProps$rowKey === void 0 ? 'id' : _resetProps$rowKey;
+
+  var _useState = (0, _react.useState)({
+    selectedRows: []
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useSelectedRows = _useState2[0],
+      setSelectedRows = _useState2[1]; // 复选中的值
+
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useActiveKey = _useState4[0],
+      setActiveKey = _useState4[1]; // 行选中
+
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      useColumns = _useState6[0],
+      setColumns = _useState6[1]; // 列设置
+
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      columnsStateMap = _useState8[0],
+      setColumnsStateMap = _useState8[1]; // 原宽度，先宽度，序号
+
+
+  var handleResize = function handleResize(sc, size, index) {
+    var preCountW = (0, _lodash.sumBy)(useColumns, 'width') + 36;
+    var curCountW = preCountW - sc + size;
+    var scale = curCountW > preCountW ? (0, _lodash.subtract)(preCountW, size) / (0, _lodash.subtract)(preCountW, sc) : (0, _lodash.subtract)(autoSize.width, size) / (0, _lodash.subtract)(autoSize.width, sc);
+    var nValue = useColumns.map(function (v, idx) {
+      var w = curCountW < autoSize.width ? scale * v.width : v.width;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, v), {}, {
+        width: idx === index ? size : w
+      });
+    });
+    setColumns((0, _toConsumableArray2.default)(nValue));
+  };
+
+  var resetColumns = (0, _react.useCallback)(function () {
+    return useColumns.map(function (col, index) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, col), {}, {
+        width: col.width,
+        onHeaderCell: function onHeaderCell(column) {
+          return {
+            width: column.width,
+            onResize: function onResize(e, size) {
+              return handleResize(e, size, index);
+            }
+          };
+        }
+      });
+    });
+  }, [useColumns]); // 行点击事件
+
+  var onRecord = function onRecord(record) {
+    var _Object$assign = Object.assign(_resetConfig.default.checkConfig, checkConfig),
+        trigger = _Object$assign.trigger,
+        highlight = _Object$assign.highlight;
+
+    if (highlight) {
+      setActiveKey(record[rowKey]);
+    }
+
+    if (trigger === 'row') {
+      var selectedRows = useSelectedRows.selectedRows;
+      var selectedRowKeys = selectedRows.map(function (v) {
+        return v[rowKey];
+      });
+      var Idx = selectedRowKeys.indexOf(record[rowKey]);
+      Idx >= 0 ? selectedRows.splice(Idx, 1) : selectedRows.push(record);
+      setSelectedRows({
+        selectedRows: selectedRows
+      });
+    }
+
+    rowClick === null || rowClick === void 0 ? void 0 : rowClick(record);
+  }; // 重写表格，增加虚拟滚动
+
+
+  var vComponents = (0, _react.useMemo)(function () {
+    return (0, _VList.VList)({
+      height: autoSize.height // 此值和scrollY值相同. 必传.
+
+    });
+  }, [autoSize.height]); // 复选框配置
+
+  var config = (0, _react.useMemo)(function () {
+    return (0, _objectSpread2.default)({
+      defaultSize: 'small',
+      tableLayout: 'fixed',
+      rowKey: rowKey,
+      debounceTime: 300,
+      revalidateOnFocus: false,
+      options: {
+        setting: true,
+        density: false,
+        fullScreen: false,
+        reload: false
+      },
+      columnsState: {
+        value: columnsStateMap,
+        onChange: function onChange(k) {
+          setColumnsStateMap(k);
+        }
+      },
+      search: false,
+      tableAlertRender: false,
+      checkConfig: checkConfig,
+      // components: vComponents,
+      scroll: {
+        x: '100%',
+        y: _summary ? autoSize.height - 48 : autoSize.height
+      },
+      pagination: !hiddenPage && (0, _objectSpread2.default)({
+        showSizeChanger: true,
+        showQuickJumper: true,
+        showTotal: function showTotal(total) {
+          return "\u5171 ".concat(total, " \u6761");
+        }
+      }, pagination),
+      rowSelection: {
+        fixed: true,
+        type: 'checkbox',
+        columnWidth: 36,
+        selectedRowKeys: useSelectedRows.selectedRows.map(function (v) {
+          return v[rowKey];
+        }),
+        onChange: function onChange(selectedRowKeys, selectedRows) {
+          setSelectedRows({
+            selectedRows: selectedRows
+          });
+          rowClick === null || rowClick === void 0 ? void 0 : rowClick(selectedRows);
+        }
+      },
+      onRow: function onRow(record) {
+        return {
+          onClick: function onClick() {
+            onRecord(record);
+          },
+          onDoubleClick: function onDoubleClick() {
+            _onDoubleClick === null || _onDoubleClick === void 0 ? void 0 : _onDoubleClick(record);
+          }
+        };
+      },
+      rowClassName: function rowClassName(record) {
+        return record[rowKey] === useActiveKey ? 'row-active' : '';
+      },
+      columns: resetColumns()
+    }, resetProps);
+  }, [autoSize.height, useColumns, useSelectedRows, columnsStateMap, resetProps]);
+  var resultColumns = (0, _react.useMemo)(function () {
+    var result = useColumns.map(function (item, index) {
+      var _columnsStateMap$item, _columnsStateMap$item2, _columnsStateMap$item3, _columnsStateMap$item4;
+
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        colSort: (columnsStateMap === null || columnsStateMap === void 0 ? void 0 : (_columnsStateMap$item = columnsStateMap[item.dataIndex]) === null || _columnsStateMap$item === void 0 ? void 0 : _columnsStateMap$item.order) === undefined ? index : (columnsStateMap === null || columnsStateMap === void 0 ? void 0 : (_columnsStateMap$item2 = columnsStateMap[item.dataIndex]) === null || _columnsStateMap$item2 === void 0 ? void 0 : _columnsStateMap$item2.order) || index,
+        fixed: (columnsStateMap === null || columnsStateMap === void 0 ? void 0 : (_columnsStateMap$item3 = columnsStateMap[item.dataIndex]) === null || _columnsStateMap$item3 === void 0 ? void 0 : _columnsStateMap$item3.fixed) || item.fixed || undefined,
+        show: (columnsStateMap === null || columnsStateMap === void 0 ? void 0 : (_columnsStateMap$item4 = columnsStateMap[item.dataIndex]) === null || _columnsStateMap$item4 === void 0 ? void 0 : _columnsStateMap$item4.show) !== false
+      });
+    }).filter(function (item) {
+      return !!item.show;
+    });
+    result.sort(function (a, b) {
+      return (a.fixed === 'left' ? a.colSort : a.fixed === 'right' ? 500 + a.colSort : a.colSort + 50) - (b.fixed === 'left' ? b.colSort : b.fixed === 'right' ? 500 + b.colSort : b.colSort + 50);
+    });
+    return result;
+  }, [columnsStateMap, useColumns]);
+  (0, _react.useEffect)(function () {
+    var countW = (0, _lodash.sumBy)(columns, 'width') + 36;
+    var nValue = columns.map(function (col) {
+      var rw = countW < autoSize.width ? autoSize.width / countW * col.width : col.width;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, col), {}, {
+        width: (0, _lodash.round)(rw)
+      });
+    });
+    setColumns(nValue);
+  }, [columns, autoSize.width]);
+  (0, _react.useEffect)(function () {
+    var obj = {};
+    columns === null || columns === void 0 ? void 0 : columns.forEach(function (item) {
+      if (item.fixed) {
+        obj[item.dataIndex || item.key] = {
+          fixed: item.fixed
+        };
+      }
+    });
+    setColumnsStateMap(obj);
+  }, []);
+  (0, _react.useEffect)(function () {
+    rowClick === null || rowClick === void 0 ? void 0 : rowClick();
+  }, [useSelectedRows]); // 将节点方法给外部使用
+
+  _react.default.useImperativeHandle(ref, function () {
+    return {
+      getCheckboxRecords: function getCheckboxRecords() {
+        return useSelectedRows.selectedRows;
+      },
+      // 用于按钮触发事件
+      clearSelect: function clearSelect() {
+        return setSelectedRows({
+          selectedRows: []
+        });
+      }
+    };
+  }); // loading触发清空选中状态
+
+
+  (0, _react.useEffect)(function () {
+    setSelectedRows({
+      selectedRows: []
+    });
+  }, [loading]);
+  return /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
+    value: {
+      width: autoSize.width,
+      countW: (0, _lodash.sumBy)(useColumns, 'width') + 36
+    }
+  }, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
+    loading: loading,
+    dataSource: dataSource,
+    components: vComponents,
+    summary: function summary(pageData) {
+      return _summary && _summary(pageData, resultColumns);
+    }
+  })));
+}); // 监听大小: 这里的高度是整个表格的高度，表体需要减去列头和分页的高度
+
+var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var defaultRef = ref || (0, _react.useRef)(null);
+  var throttleSize = (0, _lodash.throttle)(function (_ref) {
+    var height = _ref.height,
+        width = _ref.width;
+
+    var resetHeight = function resetHeight() {
+      var h = height - 48;
+
+      if (!props.hiddenPage) {
+        h -= 28;
+      }
+
+      if (props.columns.some(function (v) {
+        return v.children;
+      })) {
+        h -= 31;
+      }
+
+      return h;
+    };
+
+    return /*#__PURE__*/_react.default.createElement(ResetTable, (0, _extends2.default)({
+      ref: defaultRef
+    }, props, {
+      autoSize: {
+        height: resetHeight(),
+        width: width
+      }
+    }));
+  }, 100);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactVirtualizedAutoSizer.default, {
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, throttleSize));
+});
+var _default = ResizeSize;
+exports.default = _default;