linkmore-design 1.1.21 → 1.1.22-beta.1

package/lib/LmTable/hooks/useDndItems.js

@@ -0,0 +1,168 @@
+"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) {
+    if (resume) {
+      del(value.row, resume);
+      del(value.col, resume);
+      value.tableHeader = getSortInsert(value.tableHeader, resume, {
+        columns: columns
+      });
+    }
+
+    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/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,126 @@
+"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/style/index.css

@@ -870,8 +870,7 @@ 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 .ant-card-body,

package/lib/LmTable/style/variables.css

@@ -358,8 +358,7 @@
 #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 .ant-card-body,

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

package/lib/LmUpload/UploadList/ItemPictureCard.js

@@ -136,13 +136,13 @@ var PictureItem = function PictureItem(_ref) {
     });
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({
     className: (0, _classnames.default)('lm_upload_item', 'lm_upload_item_card', isError && 'lm_upload_item_error'),
     style: {
       height: size,
       width: size
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, listeners || {}), /*#__PURE__*/_react.default.createElement("div", {
     className: "lm_upload_item_thumb"
   }, isError || !isImg ? renderThumb(resetFile) : /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Image, {
     width: resetSize.width,
@@ -163,13 +163,6 @@ var PictureItem = function PictureItem(_ref) {
     style: {
       fontSize: resetSize.fontSize
     }
-  })), /*#__PURE__*/_react.default.createElement("div", Object.assign({
-    className: "action_preview"
-  }, listeners), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
-    type: "lmweb-drag",
-    style: {
-      fontSize: resetSize.fontSize
-    }
   })), !readOnly && /*#__PURE__*/_react.default.createElement("div", {
     className: "action_delete",
     onClick: function onClick() {

package/lib/LmUpload/UploadList/index.js

@@ -20,14 +20,14 @@ var _RenderItem = _interopRequireDefault(require("./RenderItem"));
 var LmUploadList = function LmUploadList(_ref) {
   var instance = _ref.instance;
   var uid = instance.uid,
-      dispatch = instance.dispatch,
       getFileHasValue = instance.getFileHasValue,
       getFileList = instance.getFileList,
       itemRender = instance.itemRender,
       listType = instance.listType,
       showUploadList = instance.showUploadList,
       enableDrag = instance.enableDrag,
-      fileNames = instance.fileNames;
+      fileNames = instance.fileNames,
+      move = instance.move;
   if (!showUploadList) return null;
   var fileList = (0, _react.useMemo)(function () {
     var _a;
@@ -54,10 +54,7 @@ var LmUploadList = function LmUploadList(_ref) {
 
         return v;
       });
-      dispatch({
-        type: 'changeFileList',
-        fileList: fileMap
-      });
+      move(active, over, fileMap);
     } catch (error) {
       console.log('移动出现了错误', error);
     }

package/lib/LmUpload/fns/index.d.ts

@@ -15,6 +15,7 @@ declare const useCoreOptions: ({ state, dispatch, props }: {
         remove: (file: any) => Promise<void>;
         preview: (file: any) => void;
         download: (file: any) => void;
+        move: (active: any, over: any, fileList: any) => void;
     };
     RefMethods: {
         getState: () => any;

package/lib/LmUpload/fns/index.js

@@ -484,7 +484,21 @@ var useCoreOptions = function useCoreOptions(_ref) {
     var _a;
 
     (_a = props.onDownload) === null || _a === void 0 ? void 0 : _a.call(props, file);
-  }, [props.onDownload]);
+  }, [props.onDownload]); // 拖拽移动事件
+
+  var move = (0, _react.useCallback)(function (active, over, fileList) {
+    var _a;
+
+    (_a = props.onMove) === null || _a === void 0 ? void 0 : _a.call(props, active, over, fileList);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      file: active,
+      fileList: fileList
+    });
+    dispatch({
+      type: 'changeFileList',
+      fileList: fileList
+    });
+  }, [props.onMove, onChange, dispatch]);
   var CoreMethods = {
     getIsMaxCount: getIsMaxCount,
     getFileHasValue: getFileHasValue,
@@ -494,7 +508,8 @@ var useCoreOptions = function useCoreOptions(_ref) {
     getUploadStatus: getUploadStatus,
     remove: remove,
     preview: preview,
-    download: download
+    download: download,
+    move: move
   };
   var RefMethods = {
     getState: function getState() {

package/lib/index.d.ts

@@ -51,6 +51,7 @@ export type { TooltipProps } from './Tooltip';
 export { default as Form } from './Form';
 export { default as Spin } from './Spin';
 export { default as LmEditTable } from './LmEditTable';
+export type { CountdownHandle, TLmEditTable } from './LmEditTable/EditTable';
 export { default as List } from './List';
 export { default as LMQuickMenu } from './QuickMenu';
 export { default as DatePicker } from './DatePicker';

package/lib/styles/variables.css

@@ -9937,6 +9937,9 @@ p {
 .lm_filter_basic_item .filter_item_icon.addon_before {
   color: var(--font-color);
 }
+.lm_filter_basic_item .filter_item_icon .icon_clear {
+  display: none;
+}
 .lm_filter_basic_item.expand .filter_item_icon.addon_after {
   transform: rotateX(180deg);
 }
@@ -9950,6 +9953,12 @@ p {
 .lm_filter_basic_item.active.lm_filter_complex_item .filter_item_label {
   color: var(--primary-color);
 }
+.lm_filter_basic_item.active:hover .icon_down {
+  display: none;
+}
+.lm_filter_basic_item.active:hover .icon_clear {
+  display: inline-block;
+}
 .ant-dropdown.filter_dropdown_container_cascader > div {
   transform: translateY(-4px);
 }
@@ -10953,8 +10962,7 @@ 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 .ant-card-body,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkmore-design",
-  "version": "1.1.21",
+  "version": "1.1.22-beta.1",
   "author": {
     "name": "nowthen",
     "email": "rnlvwyx@gmail.com"
@@ -73,8 +73,6 @@
     "antd-img-crop": "^4.2.5",
     "axios": "^0.21.0",
     "classnames": "^2.3.1",
-    "conventional-changelog": "^3.1.25",
-    "conventional-changelog-cli": "^2.2.2",
     "dayjs": "^1.9.7",
     "echarts": "^5.4.0",
     "hex-to-rgba": "^2.0.1",
@@ -139,6 +137,8 @@
     "react-copy-to-clipboard": "^5.1.0",
     "stylelint": "^13.8.0",
     "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^20.0.0"
+    "stylelint-config-standard": "^20.0.0",
+    "conventional-changelog": "^3.1.25",
+    "conventional-changelog-cli": "^2.2.2"
   }
 }

package/dist/LmTable/components/sortableItemCol.d.ts

@@ -1 +0,0 @@
-export default function SortableItem(props: any): JSX.Element;

package/es/LmTable/components/sortableItemCol.js

@@ -1,56 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SortableItem;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _sortable = require("@dnd-kit/sortable");
-
-var _utilities = require("@dnd-kit/utilities");
-
-var _excluded = ["children"];
-var Item = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _children$props;
-
-  var children = _ref.children,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({}, props, {
-    ref: ref
-  }), (children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children) || children);
-});
-
-function SortableItem(props) {
-  var _useSortable = (0, _sortable.useSortable)({
-    id: props.id
-  }),
-      attributes = _useSortable.attributes,
-      listeners = _useSortable.listeners,
-      setNodeRef = _useSortable.setNodeRef,
-      transform = _useSortable.transform,
-      transition = _useSortable.transition;
-
-  var style = {
-    position: 'relative',
-    transform: _utilities.CSS.Translate.toString(transform),
-    transition: transition,
-    padding: '8px',
-    touchAction: 'none',
-    height: '40px',
-    cursor: 'move'
-  };
-  return /*#__PURE__*/_react.default.createElement(Item, (0, _extends2.default)({
-    ref: setNodeRef,
-    style: style
-  }, attributes, listeners, props));
-}