linkmore-design 1.1.25-beta.1 → 1.1.25-beta.2

package/es/LmTable/Table.js

@@ -34,7 +34,7 @@ var _useGroupDataSource3 = _interopRequireDefault(require("./hooks/useGroupDataS
 var _useDndItems2 = _interopRequireDefault(require("./hooks/useDndItems"));
 var _HeaderCol = _interopRequireDefault(require("./components/HeaderCol"));
 var _index = require("./common/index");
-var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "groupWidth", "onGroupChange", "emptyProps"],
+var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "groupWidth", "groupRowKeys", "groupColKeys", "onGroupChange", "emptyProps"],
   _excluded2 = ["className", "style"],
   _excluded3 = ["onResize", "width", "dataIndex", "onResizeStop"];
 var Summary = _proTable.default.Summary;
@@ -109,10 +109,15 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     openRowGroup = props.openRowGroup,
     rowGroupTitle = props.rowGroupTitle,
     groupWidth = props.groupWidth,
+    customizeGroupRowKeys = props.groupRowKeys,
+    customizeGroupColKeys = props.groupColKeys,
     _props$onGroupChange = props.onGroupChange,
     onGroupChange = _props$onGroupChange === void 0 ? function () {} : _props$onGroupChange,
     emptyProps = props.emptyProps,
     resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  if (!Array.isArray(customizeColumns) || !customizeColumns.length) {
+    return null;
+  }
   var _resetProps$rowKey = resetProps.rowKey,
     rowKey = _resetProps$rowKey === void 0 ? 'id' : _resetProps$rowKey;
   var _React$useContext = _react.default.useContext(ConfigContext),
@@ -135,8 +140,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     useActiveKey = _useState2[0],
     setActiveKey = _useState2[1]; // 行选中
   var tableWarpRef = (0, _react.useRef)(null);
+  /** 记录最原始数据 */
   var dataSourceRef = (0, _react.useRef)(null);
+  dataSourceRef.current = customizeDataSource;
   var columnsRef = (0, _react.useRef)(null);
+  columnsRef.current = customizeColumns;
+
   /** 右键的ref */
   var contentMenuRef = (0, _react.useRef)(null);
   /** 当前展开的列 */
@@ -154,7 +163,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       openColGroup: openColGroup,
       openRowGroup: openRowGroup,
       colSortOpen: colSortOpen,
-      filterChange: filterChange
+      filterChange: filterChange,
+      customizeGroupRowKeys: customizeGroupRowKeys,
+      customizeGroupColKeys: customizeGroupColKeys
     }),
     dndColumns = _useDndItems.dndColumns,
     items = _useDndItems.items,
@@ -163,14 +174,6 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     updateItems = _useDndItems.updateItems;
   onGroupChange && onGroupChange(groupRowKeys, groupColKeys);
 
-  /** 记录最原始数据 */
-  (0, _react.useEffect)(function () {
-    dataSourceRef.current = customizeDataSource;
-  }, [customizeDataSource]);
-  (0, _react.useEffect)(function () {
-    columnsRef.current = customizeColumns;
-  }, [customizeColumns]);
-
   /** 行分组 */
   var _useGroupDataSource = (0, _useGroupDataSource3.default)({
       groupRowKeys: groupRowKeys,
@@ -187,8 +190,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           columns: dndColumns
         };
       }
-      return (0, _util.transformWithColGroup)(dndColumns, groupDataSource, groupColKeys);
-    }, [dndColumns, groupDataSource, groupColKeys]),
+      return (0, _util.transformWithColGroup)(dndColumns, groupDataSource, groupColKeys, groupRowKeys);
+    }, [dndColumns, groupDataSource, groupColKeys, groupRowKeys]),
     columns = _useMemo.columns,
     dataSource = _useMemo.dataSource;
   (0, _react.useEffect)(function () {
@@ -859,21 +862,23 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var resetColumns = (0, _react.useCallback)(function () {
     var colIndex = 0;
     var traverseColumns = function traverseColumns(columns) {
-      columns === null || columns === void 0 ? void 0 : columns.forEach(function (col, index) {
+      var _loop = function _loop(_i) {
+        var col = columns[_i];
         if (col.show === false) {
-          return;
-        }
-        if (col.children && col.children.length) {
+          columns.splice(_i, 1);
+          _i -= 1;
+        } else if (col.children && col.children.length) {
           traverseColumns(col.children);
-          return;
         } else {
           // $_ 开头表示私有属性
           col.$_colIndex = colIndex;
+          // eslint-disable-next-line no-loop-func
           col.onHeaderCell = function (column) {
+            i = _i;
             return resizeable ? {
               width: column.width,
               dataIndex: column.dataIndex,
-              onResize: handleResize(index),
+              onResize: handleResize(_i),
               onResizeStop: endResize
             } : {
               width: column.width,
@@ -882,6 +887,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           };
           if (openSheet) {
             col.onCell = function (record, rowIndex) {
+              i = _i;
               return {
                 record: record,
                 rowKey: rowKey,
@@ -900,9 +906,13 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
               };
             };
           }
+          colIndex += 1;
         }
-        colIndex += 1;
-      });
+        i = _i;
+      };
+      for (var i = 0; i < columns.length; i += 1) {
+        _loop(i);
+      }
     };
     var innerColumns = (0, _lodash.cloneDeep)(useColumns.filter(function (item) {
       return item.show !== false;
@@ -1177,7 +1187,10 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     }, /*#__PURE__*/_react.default.createElement("th", restProps, /*#__PURE__*/_react.default.createElement(_HeaderCol.default, (0, _extends2.default)({
       column: column
-    }, props))));
+    }, props, {
+      openRowGroup: openRowGroup,
+      openColGroup: openColGroup
+    }))));
   };
   var colDraggableContainer = (0, _react.useCallback)(function (_ref4) {
     var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref4), _ref4));

package/es/LmTable/components/HeaderCol.js

@@ -12,7 +12,9 @@ var _utilities = require("@dnd-kit/utilities");
 var _Handle = _interopRequireDefault(require("./Item/components/Handle"));
 function HeaderCellContent(props) {
   var column = props.column,
-    children = props.children;
+    children = props.children,
+    openRowGroup = props.openRowGroup,
+    openColGroup = props.openColGroup;
   var rowGroup = column.rowGroup,
     colGroup = column.colGroup,
     _column$title = column.title,
@@ -33,6 +35,7 @@ function HeaderCellContent(props) {
     touchAction: 'none',
     display: 'flex'
   };
+  var isShow = openRowGroup && rowGroup || openColGroup && colGroup;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -42,7 +45,7 @@ function HeaderCellContent(props) {
     style: {
       flex: 1
     }
-  }, children), (rowGroup || colGroup) && /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({
+  }, children), isShow && /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({
     style: style,
     ref: setNodeRef
   }, attributes, listeners)));

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

@@ -6,8 +6,8 @@ interface IdndItems {
 declare function useDndItems(props: any): {
     dndColumns: any;
     items: IdndItems;
-    groupRowKeys: any[];
-    groupColKeys: any[];
+    groupRowKeys: any;
+    groupColKeys: any;
     updateItems: (value: IdndItems, resume: string) => void;
 };
 export default useDndItems;

package/es/LmTable/hooks/useDndItems.js

@@ -1,4 +1,5 @@
 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) {
@@ -12,39 +13,55 @@ function del(arr, target) {
     arr.splice(index, 1);
   }
 }
-function getSortInsert(target, value, _ref) {
+function getSortInsert(tableHeader, value, _ref) {
   var columns = _ref.columns;
-  if (!target) {
+  if (!tableHeader) {
     return [];
   }
   var arr = new Array(columns.length);
-  target.push(value);
-  target.forEach(function (val) {
+  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(arr, _ref2) {
+function getSortDndColumns(value, _ref2) {
   var columns = _ref2.columns;
-  if (!arr || !arr.length) {
+  var tableHeader = value.tableHeader;
+  var hiddenArr = [].concat(_toConsumableArray(value.row), _toConsumableArray(value.col)) || [];
+  if (!tableHeader || !tableHeader.length) {
     return [];
   }
   var result = [];
-  arr.forEach(function (val) {
+  var _loop = function _loop(i) {
     var item = columns.find(function (item) {
-      return item.title === val;
+      return item.title === tableHeader[i];
     });
     if (item) {
+      item.order = i;
       result.push(item);
     }
-  });
-  return result.map(function (item, index) {
-    item.order = index;
-    return 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) {
@@ -64,40 +81,53 @@ function useDndItems(props) {
     colSortOpen = props.colSortOpen,
     filterChange = props.filterChange,
     openRowGroup = props.openRowGroup,
-    openColGroup = props.openColGroup;
+    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([]),
+  var _useState3 = useState(customizeGroupRowKeys || []),
     _useState4 = _slicedToArray(_useState3, 2),
     groupRowKeys = _useState4[0],
     setGroupRowKeys = _useState4[1];
-  var _useState5 = useState([]),
+  var _useState5 = useState(customizeGroupColKeys || []),
     _useState6 = _slicedToArray(_useState5, 2),
     groupColKeys = _useState6[0],
     setGroupColKeys = _useState6[1];
+  useEffect(function () {
+    setGroupRowKeys(customizeGroupRowKeys);
+    setGroupColKeys(customizeGroupColKeys);
+  }, [customizeGroupRowKeys, customizeGroupColKeys]);
   // 初始化
-  var defaultItems = {};
-  if (openRowGroup) {
-    defaultItems.row = [];
-  }
-  if (openColGroup) {
-    defaultItems.col = [];
-  }
+  var defaultItems = {
+    row: [],
+    col: [],
+    tableHeader: []
+  };
   if (openColGroup || openRowGroup || colSortOpen) {
-    var tableHeader = [];
     treeFind(columns, function (node) {
-      tableHeader.push(node.title);
+      if (groupRowKeys.includes(node.dataIndex)) {
+        defaultItems.row.push(node.title);
+      } else if (groupColKeys.includes(node.dataIndex)) {
+        defaultItems.col.push(node.title);
+      } else {
+        defaultItems.tableHeader.push(node.title);
+      }
       return false;
     });
-    defaultItems.tableHeader = tableHeader;
   }
   var _useState7 = useState(defaultItems),
     _useState8 = _slicedToArray(_useState7, 2),
     items = _useState8[0],
     setItems = _useState8[1];
   useEffect(function () {
+    columns.forEach(function (c) {
+      if (customizeGroupRowKeys.includes(c.dataIndex) || customizeGroupColKeys.includes(c.dataIndex)) {
+        c.show = false;
+      }
+    });
     setDndColumns(columns);
     setItems(defaultItems);
   }, [columns]);
@@ -113,6 +143,7 @@ function useDndItems(props) {
         columns: columns
       });
     }
+    // 列分组进行覆盖，只允许存在一个
     if (value.col.length >= 2) {
       value.tableHeader = getSortInsert(value.tableHeader, items.col[0], {
         columns: columns
@@ -124,7 +155,7 @@ function useDndItems(props) {
     setItems(value);
     setGroupRowKeys(getDataIndexForTitle(value.row, columns));
     setGroupColKeys(getDataIndexForTitle(value.col, columns));
-    var newColumns = getSortDndColumns(value.tableHeader, {
+    var newColumns = getSortDndColumns(value, {
       columns: columns
     });
     setDndColumns(newColumns);

package/es/LmTable/util.js

@@ -64,13 +64,18 @@ function dataGroup(data, key) {
  * @param groupColKeys 列分组的keys
  * @returns
  */
-function transformWithColGroup(columns, dataSource, groupColKeys) {
+function transformWithColGroup(columns, dataSource, groupColKeys, groupRowKeys) {
   if (!Array.isArray(groupColKeys) || !groupColKeys.length) {
     return {
       columns: columns,
       dataSource: dataSource
     };
   }
+  columns.forEach(function (c) {
+    if (groupRowKeys.includes(c.dataIndex)) {
+      c.show = false;
+    }
+  });
   var columnsCopy = _lodash.default.cloneDeep(columns);
   var dataSourceCopy = _lodash.default.cloneDeep(dataSource);
 

package/lib/LmTable/Table.js

@@ -34,7 +34,7 @@ var _useGroupDataSource3 = _interopRequireDefault(require("./hooks/useGroupDataS
 var _useDndItems2 = _interopRequireDefault(require("./hooks/useDndItems"));
 var _HeaderCol = _interopRequireDefault(require("./components/HeaderCol"));
 var _index = require("./common/index");
-var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "groupWidth", "onGroupChange", "emptyProps"],
+var _excluded = ["columns", "dataSource", "autoSize", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "openSheet", "editSheet", "dataChange", "openColGroup", "colGroupTitle", "openRowGroup", "rowGroupTitle", "groupWidth", "groupRowKeys", "groupColKeys", "onGroupChange", "emptyProps"],
   _excluded2 = ["className", "style"],
   _excluded3 = ["onResize", "width", "dataIndex", "onResizeStop"];
 var Summary = _proTable.default.Summary;
@@ -109,10 +109,15 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     openRowGroup = props.openRowGroup,
     rowGroupTitle = props.rowGroupTitle,
     groupWidth = props.groupWidth,
+    customizeGroupRowKeys = props.groupRowKeys,
+    customizeGroupColKeys = props.groupColKeys,
     _props$onGroupChange = props.onGroupChange,
     onGroupChange = _props$onGroupChange === void 0 ? function () {} : _props$onGroupChange,
     emptyProps = props.emptyProps,
     resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  if (!Array.isArray(customizeColumns) || !customizeColumns.length) {
+    return null;
+  }
   var _resetProps$rowKey = resetProps.rowKey,
     rowKey = _resetProps$rowKey === void 0 ? 'id' : _resetProps$rowKey;
   var _React$useContext = _react.default.useContext(ConfigContext),
@@ -135,8 +140,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     useActiveKey = _useState2[0],
     setActiveKey = _useState2[1]; // 行选中
   var tableWarpRef = (0, _react.useRef)(null);
+  /** 记录最原始数据 */
   var dataSourceRef = (0, _react.useRef)(null);
+  dataSourceRef.current = customizeDataSource;
   var columnsRef = (0, _react.useRef)(null);
+  columnsRef.current = customizeColumns;
+
   /** 右键的ref */
   var contentMenuRef = (0, _react.useRef)(null);
   /** 当前展开的列 */
@@ -154,7 +163,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       openColGroup: openColGroup,
       openRowGroup: openRowGroup,
       colSortOpen: colSortOpen,
-      filterChange: filterChange
+      filterChange: filterChange,
+      customizeGroupRowKeys: customizeGroupRowKeys,
+      customizeGroupColKeys: customizeGroupColKeys
     }),
     dndColumns = _useDndItems.dndColumns,
     items = _useDndItems.items,
@@ -163,14 +174,6 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     updateItems = _useDndItems.updateItems;
   onGroupChange && onGroupChange(groupRowKeys, groupColKeys);
 
-  /** 记录最原始数据 */
-  (0, _react.useEffect)(function () {
-    dataSourceRef.current = customizeDataSource;
-  }, [customizeDataSource]);
-  (0, _react.useEffect)(function () {
-    columnsRef.current = customizeColumns;
-  }, [customizeColumns]);
-
   /** 行分组 */
   var _useGroupDataSource = (0, _useGroupDataSource3.default)({
       groupRowKeys: groupRowKeys,
@@ -187,8 +190,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           columns: dndColumns
         };
       }
-      return (0, _util.transformWithColGroup)(dndColumns, groupDataSource, groupColKeys);
-    }, [dndColumns, groupDataSource, groupColKeys]),
+      return (0, _util.transformWithColGroup)(dndColumns, groupDataSource, groupColKeys, groupRowKeys);
+    }, [dndColumns, groupDataSource, groupColKeys, groupRowKeys]),
     columns = _useMemo.columns,
     dataSource = _useMemo.dataSource;
   (0, _react.useEffect)(function () {
@@ -859,21 +862,23 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var resetColumns = (0, _react.useCallback)(function () {
     var colIndex = 0;
     var traverseColumns = function traverseColumns(columns) {
-      columns === null || columns === void 0 ? void 0 : columns.forEach(function (col, index) {
+      var _loop = function _loop(_i) {
+        var col = columns[_i];
         if (col.show === false) {
-          return;
-        }
-        if (col.children && col.children.length) {
+          columns.splice(_i, 1);
+          _i -= 1;
+        } else if (col.children && col.children.length) {
           traverseColumns(col.children);
-          return;
         } else {
           // $_ 开头表示私有属性
           col.$_colIndex = colIndex;
+          // eslint-disable-next-line no-loop-func
           col.onHeaderCell = function (column) {
+            i = _i;
             return resizeable ? {
               width: column.width,
               dataIndex: column.dataIndex,
-              onResize: handleResize(index),
+              onResize: handleResize(_i),
               onResizeStop: endResize
             } : {
               width: column.width,
@@ -882,6 +887,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           };
           if (openSheet) {
             col.onCell = function (record, rowIndex) {
+              i = _i;
               return {
                 record: record,
                 rowKey: rowKey,
@@ -900,9 +906,13 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
               };
             };
           }
+          colIndex += 1;
         }
-        colIndex += 1;
-      });
+        i = _i;
+      };
+      for (var i = 0; i < columns.length; i += 1) {
+        _loop(i);
+      }
     };
     var innerColumns = (0, _lodash.cloneDeep)(useColumns.filter(function (item) {
       return item.show !== false;
@@ -1177,7 +1187,10 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       }
     }, /*#__PURE__*/_react.default.createElement("th", restProps, /*#__PURE__*/_react.default.createElement(_HeaderCol.default, (0, _extends2.default)({
       column: column
-    }, props))));
+    }, props, {
+      openRowGroup: openRowGroup,
+      openColGroup: openColGroup
+    }))));
   };
   var colDraggableContainer = (0, _react.useCallback)(function (_ref4) {
     var props = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref4), _ref4));

package/lib/LmTable/components/HeaderCol.js

@@ -12,7 +12,9 @@ var _utilities = require("@dnd-kit/utilities");
 var _Handle = _interopRequireDefault(require("./Item/components/Handle"));
 function HeaderCellContent(props) {
   var column = props.column,
-    children = props.children;
+    children = props.children,
+    openRowGroup = props.openRowGroup,
+    openColGroup = props.openColGroup;
   var rowGroup = column.rowGroup,
     colGroup = column.colGroup,
     _column$title = column.title,
@@ -33,6 +35,7 @@ function HeaderCellContent(props) {
     touchAction: 'none',
     display: 'flex'
   };
+  var isShow = openRowGroup && rowGroup || openColGroup && colGroup;
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -42,7 +45,7 @@ function HeaderCellContent(props) {
     style: {
       flex: 1
     }
-  }, children), (rowGroup || colGroup) && /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({
+  }, children), isShow && /*#__PURE__*/_react.default.createElement(_Handle.default, (0, _extends2.default)({
     style: style,
     ref: setNodeRef
   }, attributes, listeners)));

package/lib/LmTable/hooks/useDndItems.d.ts

@@ -6,8 +6,8 @@ interface IdndItems {
 declare function useDndItems(props: any): {
     dndColumns: any;
     items: IdndItems;
-    groupRowKeys: any[];
-    groupColKeys: any[];
+    groupRowKeys: any;
+    groupColKeys: any;
     updateItems: (value: IdndItems, resume: string) => void;
 };
 export default useDndItems;