linkmore-design 1.0.18 → 1.0.21

package/lib/LmTable/Table.js

@@ -0,0 +1,390 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Summary = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _proTable = _interopRequireDefault(require("@ant-design/pro-table"));
+
+var _lodash = require("lodash");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _resetConfig = _interopRequireDefault(require("./resetConfig"));
+
+var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "customCheck"];
+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,
+      _props$virtual = props.virtual,
+      virtual = _props$virtual === void 0 ? false : _props$virtual,
+      customCheck = props.customCheck,
+      resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  console.log(virtual, '--virtual', autoSize);
+  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 ? subtract(preCountW, size) / subtract(preCountW, sc) : subtract(autoSize.width, size) / 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]);
+  (0, _react.useEffect)(function () {
+    setColumns(columns);
+  }, [columns]); // 行点击事件
+
+  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);
+  }; // 重写表格，增加虚拟滚动
+  // const vComponents = useMemo(() => {
+  //   return 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: (0, _objectSpread2.default)({
+        y: autoSize.height
+      }, props.scroll),
+      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, t, s) {
+          setSelectedRows({
+            selectedRows: selectedRows
+          });
+          rowClick === null || rowClick === void 0 ? void 0 : rowClick(selectedRows);
+        }
+      },
+      onRow: function onRow(record) {
+        return {
+          onClick: function onClick(e) {
+            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);
+  }, [useColumns, useSelectedRows, columnsStateMap, resetProps, autoSize.height]);
+  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]); // useEffect(() => {
+  //   const countW = sumBy(columns, 'width') + 36
+  //   const nValue = columns.map((col) => {
+  //     const rw = countW < autoSize.width ? (autoSize.width / countW) * col.width : col.width
+  //     return {
+  //       ...col,
+  //       width: 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);
+  }, []); // useEffect(() => {
+  //   rowClick?.()
+  // }, [useSelectedRows])
+  // 将节点方法给外部使用
+
+  _react.default.useImperativeHandle(ref, function () {
+    return {
+      getCheckboxRecords: function getCheckboxRecords() {
+        return useSelectedRows.selectedRows;
+      },
+      // 用于按钮触发事件
+      clearSelect: function clearSelect() {
+        setSelectedRows({
+          selectedRows: []
+        });
+        rowClick === null || rowClick === void 0 ? void 0 : rowClick([]);
+      },
+      customSetCheckboxRecords: function customSetCheckboxRecords(value) {
+        setSelectedRows({
+          selectedRows: value
+        });
+        rowClick === null || rowClick === void 0 ? void 0 : rowClick(value);
+      }
+    };
+  }); // loading触发清空选中状态
+
+
+  (0, _react.useEffect)(function () {
+    setSelectedRows({
+      selectedRows: []
+    });
+  }, [loading]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: '100%',
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
+    loading: loading,
+    dataSource: dataSource,
+    components: virtual ? vComponents : null,
+    tableClassName: "lm_protable",
+    summary: function summary(pageData) {
+      return _summary && _summary(pageData, resultColumns);
+    }
+  })), !!customCheck && /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_customCheck"
+  }, customCheck));
+}); // 监听大小: 这里的高度是整个表格的高度，表体需要减去列头和分页的高度
+
+/** 1: 使用scroll.x y 来控制宽高 默认都是100% */
+
+var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _useState9 = (0, _react.useState)({
+    width: '100%',
+    height: '100%'
+  }),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      tableSize = _useState10[0],
+      setTableSize = _useState10[1];
+
+  var defaultRef = ref || (0, _react.useRef)(null);
+  var tableWarpRef = (0, _react.useRef)(null);
+  var resizeRef = (0, _react.useRef)(null);
+  var resetHeight = (0, _react.useMemo)(function () {
+    var height = tableSize.height;
+    console.log(3);
+    var h = height - 48;
+
+    if (!props.hiddenPage || props.customCheck) {
+      h -= 32;
+    }
+
+    if (props.columns.some(function (v) {
+      return v.children;
+    })) {
+      h -= 32;
+    }
+
+    return h;
+  }, [props.hiddenPage, props.customCheck, props.column, tableSize]);
+  var throttleSize = (0, _react.useCallback)(function () {
+    var width = tableSize.width,
+        height = tableSize.height;
+    return /*#__PURE__*/_react.default.createElement(ResetTable, (0, _extends2.default)({
+      ref: defaultRef
+    }, props, {
+      autoSize: {
+        height: resetHeight,
+        width: width
+      }
+    }));
+  }, [tableSize, props]);
+
+  var changeSize = function changeSize() {
+    var _tableWarpRef$current4;
+
+    var value = props.summary ? 48 : 0;
+
+    var _tableWarpRef$current = (_tableWarpRef$current4 = tableWarpRef.current) === null || _tableWarpRef$current4 === void 0 ? void 0 : _tableWarpRef$current4.getBoundingClientRect(),
+        _tableWarpRef$current2 = _tableWarpRef$current.width,
+        width = _tableWarpRef$current2 === void 0 ? '100%' : _tableWarpRef$current2,
+        _tableWarpRef$current3 = _tableWarpRef$current.height,
+        height = _tableWarpRef$current3 === void 0 ? '100%' : _tableWarpRef$current3;
+
+    setTableSize({
+      width: width,
+      height: typeof height === 'string' ? "calc(".concat(height, " - ").concat(value, "px)") : height - value
+    });
+  };
+
+  var handResize = (0, _lodash.throttle)(changeSize, 600);
+  (0, _react.useEffect)(function () {
+    var _tableWarpRef$current8;
+
+    var hiddenPage = props.hiddenPage,
+        customCheck = props.customCheck,
+        summary = props.summary;
+
+    var _tableWarpRef$current5 = (_tableWarpRef$current8 = tableWarpRef.current) === null || _tableWarpRef$current8 === void 0 ? void 0 : _tableWarpRef$current8.getBoundingClientRect(),
+        _tableWarpRef$current6 = _tableWarpRef$current5.width,
+        width = _tableWarpRef$current6 === void 0 ? '100%' : _tableWarpRef$current6,
+        _tableWarpRef$current7 = _tableWarpRef$current5.height,
+        height = _tableWarpRef$current7 === void 0 ? '100%' : _tableWarpRef$current7;
+
+    console.log(width, height, '--tableWarpReftableWarpRef', tableWarpRef.current);
+    var value = summary ? 48 : 0;
+    resizeRef.current = window.addEventListener('resize', handResize);
+    setTableSize({
+      width: width,
+      height: typeof height === 'string' ? "calc(".concat(height, " - ").concat(value, "px)") : height - value - 32
+    });
+    return function () {
+      window.removeEventListener('resize', handResize);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: tableWarpRef,
+    id: "lm_protable_warp",
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, throttleSize());
+});
+
+var _default = /*#__PURE__*/(0, _react.memo)(ResizeSize);
+
+exports.default = _default;