linkmore-design 1.1.28 → 1.1.30

package/es/LmTable/hooks/useDndItems.js

@@ -0,0 +1,234 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { useState, useEffect } from 'react';
+import { treeFind } from '../common/index';
+
+function del(arr, target) {
+  if (!arr || !arr.length) {
+    return null;
+  }
+
+  var index = arr.findIndex(function (item) {
+    return item === target;
+  });
+
+  if (index !== -1) {
+    arr.splice(index, 1);
+  }
+}
+
+function getSortInsert(tableHeader, value, _ref) {
+  var columns = _ref.columns;
+
+  if (!tableHeader) {
+    return [];
+  }
+
+  var arr = new Array(columns.length);
+  tableHeader.push(value);
+  tableHeader.forEach(function (val) {
+    var index = columns.findIndex(function (item) {
+      return item.title === val;
+    });
+    columns[index].show = true;
+    arr.splice(index, 0, val);
+  });
+  return arr.filter(Boolean);
+}
+
+function getSortDndColumns(value, _ref2) {
+  var columns = _ref2.columns;
+  var tableHeader = value.tableHeader;
+  var hiddenArr = [];
+
+  if (value.row) {
+    hiddenArr = [].concat(_toConsumableArray(hiddenArr), _toConsumableArray(value.row));
+  }
+
+  if (value.col) {
+    hiddenArr = [].concat(_toConsumableArray(hiddenArr), _toConsumableArray(value.col));
+  }
+
+  if (!tableHeader || !tableHeader.length) {
+    return [];
+  }
+
+  var result = [];
+
+  var _loop = function _loop(i) {
+    var item = columns.find(function (item) {
+      return item.title === tableHeader[i];
+    });
+
+    if (item) {
+      item.order = i;
+      result.push(item);
+    }
+  };
+
+  for (var i = 0; i < tableHeader.length; i++) {
+    _loop(i);
+  }
+
+  var _loop2 = function _loop2(_i) {
+    var item = columns.find(function (item) {
+      return item.title === hiddenArr[_i];
+    });
+
+    if (item) {
+      item.show = false;
+      result.push(item);
+    }
+  };
+
+  for (var _i = 0; _i < hiddenArr.length; _i++) {
+    _loop2(_i);
+  }
+
+  return result;
+}
+
+function getDataIndexForTitle(row, columns) {
+  if (!row) {
+    return [];
+  }
+
+  return row.map(function (title) {
+    var col = columns.find(function (item) {
+      return item.title === title;
+    });
+
+    if (col) {
+      return col.dataIndex;
+    }
+  });
+}
+
+function useDndItems(props) {
+  var columns = props.columns,
+      colSortOpen = props.colSortOpen,
+      filterChange = props.filterChange,
+      openRowGroup = props.openRowGroup,
+      openColGroup = props.openColGroup,
+      customizeGroupRowKeys = props.customizeGroupRowKeys,
+      customizeGroupColKeys = props.customizeGroupColKeys;
+
+  var _useState = useState(columns),
+      _useState2 = _slicedToArray(_useState, 2),
+      dndColumns = _useState2[0],
+      setDndColumns = _useState2[1];
+
+  var _useState3 = useState(customizeGroupRowKeys || []),
+      _useState4 = _slicedToArray(_useState3, 2),
+      groupRowKeys = _useState4[0],
+      setGroupRowKeys = _useState4[1];
+
+  var _useState5 = useState(customizeGroupColKeys || []),
+      _useState6 = _slicedToArray(_useState5, 2),
+      groupColKeys = _useState6[0],
+      setGroupColKeys = _useState6[1];
+
+  useEffect(function () {
+    if (customizeGroupRowKeys) {
+      setGroupRowKeys(customizeGroupRowKeys);
+    }
+
+    if (customizeGroupColKeys) {
+      setGroupColKeys(customizeGroupColKeys);
+    }
+  }, [customizeGroupRowKeys, customizeGroupColKeys]); // 初始化
+
+  var defaultItems = {
+    tableHeader: []
+  };
+
+  if (openRowGroup) {
+    defaultItems.row = [];
+  }
+
+  if (openColGroup) {
+    defaultItems.col = [];
+  }
+
+  if (openColGroup || openRowGroup || colSortOpen) {
+    treeFind(columns, function (node) {
+      if (openRowGroup && groupRowKeys.includes(node.dataIndex)) {
+        defaultItems.row && defaultItems.row.push(node.title);
+      } else if (groupColKeys.includes(node.dataIndex)) {
+        defaultItems.col && defaultItems.col.push(node.title);
+      } else {
+        defaultItems.tableHeader.push(node.title);
+      }
+
+      return false;
+    });
+  }
+
+  var _useState7 = useState(defaultItems),
+      _useState8 = _slicedToArray(_useState7, 2),
+      items = _useState8[0],
+      setItems = _useState8[1];
+
+  useEffect(function () {
+    if (customizeGroupRowKeys || customizeGroupColKeys) {
+      columns.forEach(function (c) {
+        if (customizeGroupRowKeys.includes(c.dataIndex) || customizeGroupColKeys.includes(c.dataIndex)) {
+          c.show = false;
+        }
+      });
+    }
+
+    setDndColumns(columns);
+    setItems(defaultItems);
+  }, [columns]); // 更新
+
+  var updateItems = function updateItems(value, resume) {
+    var _a;
+
+    if (value.row) {
+      value.row = value === null || value === void 0 ? void 0 : value.row.filter(Boolean);
+    }
+
+    if (value.col) {
+      value.col = value.col.filter(Boolean);
+    }
+
+    if (resume) {
+      // 删除
+      del(value.row, resume);
+      del(value.col, resume);
+      value.tableHeader = getSortInsert(value.tableHeader, resume, {
+        columns: columns
+      });
+    } // 列分组进行覆盖，只允许存在一个
+
+
+    if (((_a = value === null || value === void 0 ? void 0 : value.col) === null || _a === void 0 ? void 0 : _a.length) >= 2) {
+      value.tableHeader = getSortInsert(value.tableHeader, items.col[0], {
+        columns: columns
+      });
+      value.col = value.col.filter(function (item) {
+        return item !== items.col[0];
+      });
+    }
+
+    setItems(value);
+    setGroupRowKeys(getDataIndexForTitle(value.row, columns));
+    setGroupColKeys(getDataIndexForTitle(value.col, columns));
+    var newColumns = getSortDndColumns(value, {
+      columns: columns
+    });
+    setDndColumns(newColumns);
+    filterChange === null || filterChange === void 0 ? void 0 : filterChange(newColumns);
+  };
+
+  return {
+    dndColumns: dndColumns,
+    items: items,
+    groupRowKeys: groupRowKeys,
+    groupColKeys: groupColKeys,
+    updateItems: updateItems
+  };
+}
+
+export default useDndItems;

package/es/LmTable/hooks/useGroupDataSource.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,36 +9,16 @@ var _react = require("react");
 
 var _util = require("../util");
 
-var _expression = _interopRequireDefault(require("../expression"));
-
 /** 行分组 */
 function useGroupDataSource(_ref) {
   var groupRowKeys = _ref.groupRowKeys,
-      customizeDataSource = _ref.customizeDataSource,
-      columnsRef = _ref.columnsRef;
+      customizeDataSource = _ref.customizeDataSource;
   var groupDataSource = (0, _react.useMemo)(function () {
     if (!(groupRowKeys === null || groupRowKeys === void 0 ? void 0 : groupRowKeys.length)) {
       return customizeDataSource;
     }
 
-    var source = (0, _util.transformWithRowGroup)(customizeDataSource, groupRowKeys); // 获取需要计算的key，生成数组
-
-    var needCalcKeys = columnsRef.current.filter(function (col) {
-      return col.expression;
-    }).map(function (col) {
-      return [col.dataIndex, col.expression];
-    });
-
-    var deepChildren = function deepChildren(arr) {
-      arr === null || arr === void 0 ? void 0 : arr.forEach(function (item) {
-        if (item === null || item === void 0 ? void 0 : item.children) {
-          deepChildren(item === null || item === void 0 ? void 0 : item.children);
-          (0, _expression.default)(item, needCalcKeys);
-        }
-      });
-    };
-
-    deepChildren(source);
+    var source = (0, _util.transformWithRowGroup)(customizeDataSource, groupRowKeys);
     return source;
   }, [customizeDataSource, groupRowKeys]);
   return [groupDataSource];

package/es/LmTable/hooks/useResizeObserver.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    left: number;
+    right: number;
+    bottom: number;
+    top: number;
+}
+export default function useResizeObserver(): (import("react").MutableRefObject<undefined> | Rect)[];
+export {};

package/es/LmTable/hooks/useResizeObserver.js

@@ -0,0 +1,49 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useRef, useState } from 'react';
+export default function useResizeObserver() {
+  var ref = useRef();
+
+  var _useState = useState({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      rect = _useState2[0],
+      setRect = _useState2[1];
+
+  console.log('useResizeObserver');
+  useEffect(function () {
+    var ro = new ResizeObserver(function (entries) {
+      // 遍历改变的元素属性
+      var _iterator = _createForOfIteratorHelper(entries),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          setRect(entry.target.getBoundingClientRect());
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+
+    if (ref.current) {
+      ro.observe(ref.current);
+    }
+
+    return function () {
+      ro.disconnect();
+    };
+  }, []);
+  return [ref, rect];
+}

package/es/LmTable/multipleContainersKeyboardCoordinates.d.ts

@@ -0,0 +1,3 @@
+import { KeyboardCoordinateGetter } from '@dnd-kit/core';
+declare const coordinateGetter: KeyboardCoordinateGetter;
+export default coordinateGetter;

package/es/LmTable/multipleContainersKeyboardCoordinates.js

@@ -0,0 +1,117 @@
+import { closestCorners, getFirstCollision, KeyboardCode } from '@dnd-kit/core';
+var directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+
+var coordinateGetter = function coordinateGetter(event, _ref) {
+  var _ref$context = _ref.context,
+      active = _ref$context.active,
+      droppableRects = _ref$context.droppableRects,
+      droppableContainers = _ref$context.droppableContainers,
+      collisionRect = _ref$context.collisionRect;
+
+  var _a;
+
+  if (directions.includes(event.code)) {
+    event.preventDefault();
+
+    if (!active || !collisionRect) {
+      return null;
+    }
+
+    var filteredContainers = [];
+    droppableContainers.getEnabled().forEach(function (entry) {
+      var _a;
+
+      if (!entry || (entry === null || entry === void 0 ? void 0 : entry.disabled)) {
+        return;
+      }
+
+      var rect = droppableRects.get(entry.id);
+
+      if (!rect) {
+        return;
+      }
+
+      var data = entry.data.current;
+
+      if (data) {
+        var type = data.type,
+            children = data.children;
+
+        if (type === 'container' && (children === null || children === void 0 ? void 0 : children.length) > 0) {
+          if (((_a = active.data.current) === null || _a === void 0 ? void 0 : _a.type) !== 'container') {
+            return;
+          }
+        }
+      }
+
+      switch (event.code) {
+        case KeyboardCode.Down:
+          if (collisionRect.top < rect.top) {
+            filteredContainers.push(entry);
+          }
+
+          break;
+
+        case KeyboardCode.Up:
+          if (collisionRect.top > rect.top) {
+            filteredContainers.push(entry);
+          }
+
+          break;
+
+        case KeyboardCode.Left:
+          if (collisionRect.left >= rect.left + rect.width) {
+            filteredContainers.push(entry);
+          }
+
+          break;
+
+        case KeyboardCode.Right:
+          if (collisionRect.left + collisionRect.width <= rect.left) {
+            filteredContainers.push(entry);
+          }
+
+          break;
+      }
+    });
+    var collisions = closestCorners({
+      active: active,
+      collisionRect: collisionRect,
+      droppableRects: droppableRects,
+      droppableContainers: filteredContainers,
+      pointerCoordinates: null
+    });
+    var closestId = getFirstCollision(collisions, 'id');
+
+    if (closestId != null) {
+      var newDroppable = droppableContainers.get(closestId);
+      var newNode = newDroppable === null || newDroppable === void 0 ? void 0 : newDroppable.node.current;
+      var newRect = newDroppable === null || newDroppable === void 0 ? void 0 : newDroppable.rect.current;
+
+      if (newNode && newRect) {
+        if (newDroppable.id === 'placeholder') {
+          return {
+            x: newRect.left + (newRect.width - collisionRect.width) / 2,
+            y: newRect.top + (newRect.height - collisionRect.height) / 2
+          };
+        }
+
+        if (((_a = newDroppable.data.current) === null || _a === void 0 ? void 0 : _a.type) === 'container') {
+          return {
+            x: newRect.left + 20,
+            y: newRect.top + 74
+          };
+        }
+
+        return {
+          x: newRect.left,
+          y: newRect.top
+        };
+      }
+    }
+  }
+
+  return null;
+};
+
+export default coordinateGetter;

package/es/LmTable/style/index.css

@@ -870,10 +870,15 @@ p {
 #lm_protable_warp .ant-table-wrapper,
 #lm_protable_warp .ant-spin-nested-loading,
 #lm_protable_warp .ant-spin-container,
-#lm_protable_warp .ant-table-container,
-#lm_protable_warp .ant-table-body {
+#lm_protable_warp .ant-table-container {
   height: 100%;
 }
+#lm_protable_warp.lm_protable_with_footer .ant-table-container {
+  height: auto;
+}
+#lm_protable_warp.lm_protable_with_footer .ant-table-footer {
+  background-color: #fff;
+}
 #lm_protable_warp .ant-card-body,
 #lm_protable_warp .ant-pro-card-body {
   padding: 0;
@@ -1661,3 +1666,9 @@ button.ant-table-row-expand-icon::after {
 .WeChatContactsAvatarTools .rightClickItems:last-child {
   border-bottom: 0;
 }
+.calc-select .ant-select-selection-item {
+  font-size: 12px !important;
+}
+.calc-select .ant-select-selection-placeholder {
+  font-size: 12px;
+}

package/es/LmTable/style/variables.css

@@ -358,10 +358,15 @@
 #lm_protable_warp .ant-table-wrapper,
 #lm_protable_warp .ant-spin-nested-loading,
 #lm_protable_warp .ant-spin-container,
-#lm_protable_warp .ant-table-container,
-#lm_protable_warp .ant-table-body {
+#lm_protable_warp .ant-table-container {
   height: 100%;
 }
+#lm_protable_warp.lm_protable_with_footer .ant-table-container {
+  height: auto;
+}
+#lm_protable_warp.lm_protable_with_footer .ant-table-footer {
+  background-color: #fff;
+}
 #lm_protable_warp .ant-card-body,
 #lm_protable_warp .ant-pro-card-body {
   padding: 0;
@@ -1149,3 +1154,9 @@ button.ant-table-row-expand-icon::after {
 .WeChatContactsAvatarTools .rightClickItems:last-child {
   border-bottom: 0;
 }
+.calc-select .ant-select-selection-item {
+  font-size: 12px !important;
+}
+.calc-select .ant-select-selection-placeholder {
+  font-size: 12px;
+}

package/es/LmTable/testDemos/group.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var createDataSource = function createDataSource(start) {
+  var arr = [];
+
+  for (var i = start; i < start + 30000; i += 1) {
+    var obj = {
+      key: "key_".concat(i),
+      name: "\u5C0F\u9EC4_".concat(i),
+      id: "id_".concat(i),
+      age: "87",
+      address: "\u676D\u5DDE_".concat(i),
+      height: i,
+      favorite2: "\u7BEE\u7403_".concat(i),
+      favorite: "\u8DB3\u7403_".concat(i),
+      sex: i % 3 === 0 ? '男' : '女'
+    };
+    arr.push(obj);
+  }
+
+  return arr;
+};
+
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  key: 'name',
+  width: 100
+}, {
+  title: '爱好',
+  dataIndex: 'favorite',
+  key: 'favorite',
+  width: 100
+}, {
+  title: '爱好2',
+  dataIndex: 'favorite2',
+  key: 'favorite2',
+  width: 100
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  key: 'age',
+  etype: 'number',
+  width: 100
+}, {
+  title: '薪水',
+  dataIndex: 'height',
+  key: 'height',
+  etype: 'number',
+  width: 100,
+  expression: 'sum'
+}, {
+  title: '住址',
+  dataIndex: 'address',
+  key: 'address',
+  width: 100
+}];
+
+var App = function App() {
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      dataSource = _useState2[0],
+      setDataSource = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setTimeout(function () {
+      if (dataSource.length >= 500) {
+        return;
+      }
+
+      var data = createDataSource(dataSource.length);
+      setDataSource([].concat((0, _toConsumableArray2.default)(dataSource), (0, _toConsumableArray2.default)(data)));
+    }, 500);
+  }, [dataSource]);
+
+  var dataChange = function dataChange(newDataSource) {
+    setDataSource((0, _toConsumableArray2.default)(newDataSource));
+  };
+
+  var config = {
+    pagination: false,
+    scroll: {
+      y: 300
+    },
+    virtual: true,
+    hiddenPage: true
+  };
+  return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Space, {
+    direction: "vertical",
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, "\u6570\u636E\u603B\u6570\uFF1A ", dataSource.length), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.LmTable, (0, _extends2.default)({}, config, {
+    dataSource: dataSource,
+    columns: columns // 表格行 key 的取值，可以是字符串或一个函数
+    ,
+    rowKey: "key",
+    size: "small",
+    dataChange: dataChange,
+    resizeable: true // 表头列宽度是否可拖动
+    ,
+    openRowGroup: true // 开启行分组
+    ,
+    rowGroupTitle: "\u884C\u5206\u7EC4\u6807\u9898",
+    openColGroup: true // 开启列分组
+    ,
+    colGroupTitle: "\u5217\u5206\u7EC4\u6807\u9898"
+  })));
+};
+
+var _default = App;
+exports.default = _default;