linkmore-design 1.1.24 → 1.1.25-beta.1

package/lib/LmTable/hooks/useDndItems.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _index = require("../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(target, value, _ref) {
+  var columns = _ref.columns;
+  if (!target) {
+    return [];
+  }
+  var arr = new Array(columns.length);
+  target.push(value);
+  target.forEach(function (val) {
+    var index = columns.findIndex(function (item) {
+      return item.title === val;
+    });
+    arr.splice(index, 0, val);
+  });
+  return arr.filter(Boolean);
+}
+function getSortDndColumns(arr, _ref2) {
+  var columns = _ref2.columns;
+  if (!arr || !arr.length) {
+    return [];
+  }
+  var result = [];
+  arr.forEach(function (val) {
+    var item = columns.find(function (item) {
+      return item.title === val;
+    });
+    if (item) {
+      result.push(item);
+    }
+  });
+  return result.map(function (item, index) {
+    item.order = index;
+    return item;
+  });
+}
+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;
+  var _useState = (0, _react.useState)(columns),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dndColumns = _useState2[0],
+    setDndColumns = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    groupRowKeys = _useState4[0],
+    setGroupRowKeys = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    groupColKeys = _useState6[0],
+    setGroupColKeys = _useState6[1];
+  // 初始化
+  var defaultItems = {};
+  if (openRowGroup) {
+    defaultItems.row = [];
+  }
+  if (openColGroup) {
+    defaultItems.col = [];
+  }
+  if (openColGroup || openRowGroup || colSortOpen) {
+    var tableHeader = [];
+    (0, _index.treeFind)(columns, function (node) {
+      tableHeader.push(node.title);
+      return false;
+    });
+    defaultItems.tableHeader = tableHeader;
+  }
+  var _useState7 = (0, _react.useState)(defaultItems),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    items = _useState8[0],
+    setItems = _useState8[1];
+  (0, _react.useEffect)(function () {
+    setDndColumns(columns);
+    setItems(defaultItems);
+  }, [columns]);
+  // 更新
+  var updateItems = function updateItems(value, resume) {
+    value.row = value.row.filter(Boolean);
+    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 (value.col.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.tableHeader, {
+      columns: columns
+    });
+    setDndColumns(newColumns);
+    filterChange === null || filterChange === void 0 ? void 0 : filterChange(newColumns);
+  };
+  return {
+    dndColumns: dndColumns,
+    items: items,
+    groupRowKeys: groupRowKeys,
+    groupColKeys: groupColKeys,
+    updateItems: updateItems
+  };
+}
+var _default = useDndItems;
+exports.default = _default;

package/lib/LmTable/hooks/useGroupDataSource.js

@@ -1,36 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 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,
+    columnsRef = _ref.columnsRef;
   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);
 
-    var source = (0, _util.transformWithRowGroup)(customizeDataSource, groupRowKeys); // 获取需要计算的key，生成数组
-
+    // 获取需要计算的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) {
@@ -39,12 +33,10 @@ function useGroupDataSource(_ref) {
         }
       });
     };
-
     deepChildren(source);
     return source;
   }, [customizeDataSource, groupRowKeys]);
   return [groupDataSource];
 }
-
 var _default = useGroupDataSource;
 exports.default = _default;

package/lib/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/lib/LmTable/hooks/useResizeObserver.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useResizeObserver;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+function useResizeObserver() {
+  var ref = (0, _react.useRef)();
+  var _useState = (0, _react.useState)({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    rect = _useState2[0],
+    setRect = _useState2[1];
+  console.log('useResizeObserver');
+  (0, _react.useEffect)(function () {
+    var ro = new ResizeObserver(function (entries) {
+      // 遍历改变的元素属性
+      var _iterator = (0, _createForOfIteratorHelper2.default)(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/lib/LmTable/hooks/useRowSelectControllableValue.js

@@ -4,23 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _utils = require("ahooks/lib/utils");
-
 var _ahooks = require("ahooks");
-
 function useControllableValue() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var defaultValue = options.defaultValue,
-      _options$defaultValue = options.defaultValuePropName,
-      defaultValuePropName = _options$defaultValue === void 0 ? 'defaultValue' : _options$defaultValue,
-      _options$valuePropNam = options.valuePropName,
-      valuePropName = _options$valuePropNam === void 0 ? 'value' : _options$valuePropNam,
-      _options$trigger = options.trigger,
-      trigger = _options$trigger === void 0 ? 'onChange' : _options$trigger;
+    _options$defaultValue = options.defaultValuePropName,
+    defaultValuePropName = _options$defaultValue === void 0 ? 'defaultValue' : _options$defaultValue,
+    _options$valuePropNam = options.valuePropName,
+    valuePropName = _options$valuePropNam === void 0 ? 'value' : _options$valuePropNam,
+    _options$trigger = options.trigger,
+    trigger = _options$trigger === void 0 ? 'onChange' : _options$trigger;
   var value = props[valuePropName];
   var isControlled = props === null || props === void 0 ? void 0 : props.hasOwnProperty(valuePropName);
   var isControlledOnChange = props[trigger];
@@ -28,40 +24,30 @@ function useControllableValue() {
     if (isControlled) {
       return value;
     }
-
     if (props === null || props === void 0 ? void 0 : props.hasOwnProperty(defaultValuePropName)) {
       return props[defaultValuePropName];
     }
-
     return defaultValue;
   }, []);
   var stateRef = (0, _react.useRef)(initialValue);
-
   if (isControlled && isControlledOnChange) {
     stateRef.current = value;
   }
-
   var update = (0, _ahooks.useUpdate)();
-
   function setState(v) {
     var r = (0, _utils.isFunction)(v) ? v(stateRef.current) : v;
-
     if (!isControlledOnChange) {
       stateRef.current = r;
       update();
     }
-
     if (props[trigger]) {
       for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
         args[_key - 1] = arguments[_key];
       }
-
       props[trigger].apply(props, [r].concat(args));
     }
   }
-
   return [stateRef.current, (0, _ahooks.useMemoizedFn)(setState)];
 }
-
 var _default = useControllableValue;
 exports.default = _default;

package/lib/LmTable/index.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _Table = _interopRequireWildcard(require("./Table"));
-
 _Table.default.Summary = _Table.Summary;
 var _default = _Table.default;
 exports.default = _default;

package/lib/LmTable/multipleContainersKeyboardCoordinates.d.ts

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

package/lib/LmTable/multipleContainersKeyboardCoordinates.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@dnd-kit/core");
+var directions = [_core.KeyboardCode.Down, _core.KeyboardCode.Right, _core.KeyboardCode.Up, _core.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 _core.KeyboardCode.Down:
+          if (collisionRect.top < rect.top) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case _core.KeyboardCode.Up:
+          if (collisionRect.top > rect.top) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case _core.KeyboardCode.Left:
+          if (collisionRect.left >= rect.left + rect.width) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case _core.KeyboardCode.Right:
+          if (collisionRect.left + collisionRect.width <= rect.left) {
+            filteredContainers.push(entry);
+          }
+          break;
+      }
+    });
+    var collisions = (0, _core.closestCorners)({
+      active: active,
+      collisionRect: collisionRect,
+      droppableRects: droppableRects,
+      droppableContainers: filteredContainers,
+      pointerCoordinates: null
+    });
+    var closestId = (0, _core.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;
+};
+var _default = coordinateGetter;
+exports.default = _default;

package/lib/LmTable/resetConfig.js

@@ -9,23 +9,23 @@ exports.default = void 0;
 var checkConfig = {
   trigger: 'row',
   highlight: false
-}; // 列排序
-
+};
+// 列排序
 var sortConfig = {
   trigger: 'default',
   checkRowIds: []
-}; // 列过滤
-
+};
+// 列过滤
 var filterConfig = {
   trigger: 'default',
   checkRowIds: []
-}; // 分页
-
+};
+// 分页
 var pagerConfig = {
   pageSize: 30,
   pageIndex: 0
-}; // 编辑配置
-
+};
+// 编辑配置
 var editConfig = {
   enabled: false
 };

package/lib/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;

package/lib/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;

package/lib/LmTable/testDemos/group.js

@@ -0,0 +1,115 @@
+"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/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/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;