linkmore-design 1.0.38 → 1.0.39

package/es/CustomTableOption/index.js

@@ -88,12 +88,11 @@ var LMCustomTableOption = /*#__PURE__*/forwardRef(function (props, ref) {
     setVisible(false);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconFont, {
-    type: 'lmweb-setting',
-    style: {
-      fontSize: '20px'
-    },
-    onClick: openSetting
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: openSetting,
+    icon: /*#__PURE__*/React.createElement(IconFont, {
+      type: 'lmweb-setting'
+    })
   }), /*#__PURE__*/React.createElement(Drawer, {
     className: classNames(className, prefixCls),
     title: "\u4E2A\u6027\u5316\u8BBE\u7F6E",

package/es/LmTable/Table.js

@@ -13,29 +13,53 @@ require("antd/es/config-provider/style");
 
 var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 
+var _icons = require("@ant-design/icons");
+
 var _proTable = _interopRequireDefault(require("@ant-design/pro-table"));
 
+var _sortable = require("@dnd-kit/sortable");
+
 var _lodash = require("lodash");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactSortableHoc = require("react-sortable-hoc");
+
 var _empty = _interopRequireDefault(require("./assets/empty.png"));
 
 var _resetConfig = _interopRequireDefault(require("./resetConfig"));
 
-var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "customCheck", "rowSelection", "columnsState", "tableRowType"];
+var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "customCheck", "rowSelection", "columnsState", "tableRowType"],
+    _excluded2 = ["className", "style"];
 var Summary = _proTable.default.Summary;
 exports.Summary = Summary;
+var DragHandle = (0, _reactSortableHoc.SortableHandle)(function () {
+  return /*#__PURE__*/_react.default.createElement(_icons.MenuOutlined, {
+    style: {
+      cursor: 'grab',
+      color: '#999'
+    }
+  });
+});
+var sortDefaultColumnItem = {
+  title: '排序',
+  dataIndex: 'sort',
+  width: 60,
+  className: 'drag-visible',
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(DragHandle, null);
+  }
+};
 var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var dataSource = props.dataSource,
       autoSize = props.autoSize,
@@ -49,6 +73,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       loading = props.loading,
       _props$virtual = props.virtual,
       virtual = _props$virtual === void 0 ? false : _props$virtual,
+      _props$sortOpen = props.sortOpen,
+      sortOpen = _props$sortOpen === void 0 ? false : _props$sortOpen,
       customCheck = props.customCheck,
       rowSelection = props.rowSelection,
       columnsState = props.columnsState,
@@ -81,7 +107,48 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useState7 = (0, _react.useState)(),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       columnsStateMap = _useState8[0],
-      setColumnsStateMap = _useState8[1]; // 原宽度，先宽度，序号
+      setColumnsStateMap = _useState8[1];
+
+  var SortableItem = (0, _reactSortableHoc.SortableElement)(function (props) {
+    return /*#__PURE__*/_react.default.createElement("tr", props);
+  });
+  var SortContainer = (0, _reactSortableHoc.SortableContainer)(function (props) {
+    return /*#__PURE__*/_react.default.createElement("tbody", props);
+  });
+
+  var onSortEnd = function onSortEnd(_ref) {
+    var oldIndex = _ref.oldIndex,
+        newIndex = _ref.newIndex;
+
+    if (oldIndex !== newIndex) {
+      var newData = (0, _sortable.arrayMove)(dataSource, oldIndex, newIndex).filter(function (el) {
+        return !!el;
+      });
+      console.log(newData, 'nnnnnn'); // setDataSource([...newData])
+    }
+  };
+
+  var DraggableContainer = function DraggableContainer(props) {
+    return /*#__PURE__*/_react.default.createElement(SortContainer, (0, _extends2.default)({
+      useDragHandle: true,
+      disableAutoscroll: true,
+      helperClass: "row-dragging",
+      onSortEnd: onSortEnd
+    }, props));
+  };
+
+  var DraggableBodyRow = function DraggableBodyRow(props) {
+    var className = props.className,
+        style = props.style,
+        restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+    var index = dataSource.findIndex(function (x) {
+      return x[rowKey || 'index'] === restProps['data-row-key'];
+    });
+    console.log(dataSource, restProps, 222, index);
+    return /*#__PURE__*/_react.default.createElement(SortableItem, (0, _extends2.default)({
+      index: index
+    }, restProps));
+  }; // 原宽度，先宽度，序号
 
 
   var handleResize = function handleResize(sc, size, index) {
@@ -98,7 +165,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var resetColumns = (0, _react.useCallback)(function () {
-    return useColumns.filter(function (item) {
+    var result = useColumns.filter(function (item) {
       return item.show !== false;
     }).map(function (col, index) {
       return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, col), {}, {
@@ -113,7 +180,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }
       });
     });
-  }, [useColumns]);
+    console.log(sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(result)) : result, sortOpen, 111);
+    return sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(result)) : result;
+  }, [useColumns, sortOpen]);
   (0, _react.useEffect)(function () {
     setColumns(columns);
   }, [columns]); // 行点击事件
@@ -250,10 +319,10 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var obj = (0, _objectSpread2.default)({}, columnsState);
     columns === null || columns === void 0 ? void 0 : columns.forEach(function (item) {
       /** 目前支持三种 */
-      var _ref = obj[item.dataIndex || item.key] || {},
-          order = _ref.order,
-          show = _ref.show,
-          fixed = _ref.fixed;
+      var _ref2 = obj[item.dataIndex || item.key] || {},
+          order = _ref2.order,
+          show = _ref2.show,
+          fixed = _ref2.fixed;
 
       obj[item.dataIndex || item.key] = {
         fixed: fixed || item.fixed,
@@ -322,7 +391,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
     loading: loading,
     dataSource: dataSource,
-    components: virtual ? vComponents : null,
+    components: sortOpen ? {
+      body: {
+        wrapper: DraggableContainer,
+        row: DraggableBodyRow
+      }
+    } : null,
     tableClassName: "lm_protable",
     summary: function summary(pageData) {
       return _summary && _summary(pageData, resultColumns);

package/es/LmTable/style/style.css

@@ -1410,3 +1410,16 @@ html {
   height: 48px;
   display: flex;
 }
+.row-dragging {
+  background: var(--color-6);
+  border: 1px solid var(--color-6);
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+.row-dragging td {
+  padding: 16px;
+}
+.row-dragging .drag-visible {
+  visibility: visible;
+}

package/es/Radio/style/style.css

@@ -28,15 +28,15 @@
 }
 .lm-radio-group .ant-radio-button-wrapper {
   font-size: 12px;
-  line-height: 30px;
   height: 32px;
-  padding: 1px 12px;
+  padding: 0px 12px;
   color: var(--font-color);
   vertical-align: middle;
 }
 .lm-radio-group .ant-radio-button-wrapper .anticon {
   font-size: 16px;
   vertical-align: middle;
+  line-height: 1;
 }
 .lm-radio-group .ant-radio-button-wrapper:hover {
   color: var(--primary-color);
@@ -44,7 +44,6 @@
 .lm-radio-group .ant-radio-button-wrapper > span:last-child {
   display: inline-block;
   font-size: 12px;
-  line-height: 30px;
   max-width: 96px;
   overflow: hidden;
   white-space: nowrap;
@@ -73,7 +72,7 @@
 .lm-radio-group.ant-radio-group-small .ant-radio-button-wrapper {
   line-height: 22px;
   height: 24px;
-  padding: 1px 8px;
+  padding: 0px 8px;
 }
 .lm-radio-group.ant-radio-group-small .ant-radio-button-wrapper > span:last-child {
   line-height: 22px;

package/lib/CustomTableOption/index.js

@@ -104,12 +104,11 @@ var LMCustomTableOption = /*#__PURE__*/(0, _react.forwardRef)(function (props, r
     setVisible(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
-    type: 'lmweb-setting',
-    style: {
-      fontSize: '20px'
-    },
-    onClick: openSetting
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Button, {
+    onClick: openSetting,
+    icon: /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+      type: 'lmweb-setting'
+    })
   }), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Drawer, {
     className: (0, _classnames.default)(className, prefixCls),
     title: "\u4E2A\u6027\u5316\u8BBE\u7F6E",

package/lib/LmTable/Table.js

@@ -13,29 +13,53 @@ require("antd/es/config-provider/style");
 
 var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
 
-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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _icons = require("@ant-design/icons");
+
 var _proTable = _interopRequireDefault(require("@ant-design/pro-table"));
 
+var _sortable = require("@dnd-kit/sortable");
+
 var _lodash = require("lodash");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactSortableHoc = require("react-sortable-hoc");
+
 var _empty = _interopRequireDefault(require("./assets/empty.png"));
 
 var _resetConfig = _interopRequireDefault(require("./resetConfig"));
 
-var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "customCheck", "rowSelection", "columnsState", "tableRowType"];
+var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "customCheck", "rowSelection", "columnsState", "tableRowType"],
+    _excluded2 = ["className", "style"];
 var Summary = _proTable.default.Summary;
 exports.Summary = Summary;
+var DragHandle = (0, _reactSortableHoc.SortableHandle)(function () {
+  return /*#__PURE__*/_react.default.createElement(_icons.MenuOutlined, {
+    style: {
+      cursor: 'grab',
+      color: '#999'
+    }
+  });
+});
+var sortDefaultColumnItem = {
+  title: '排序',
+  dataIndex: 'sort',
+  width: 60,
+  className: 'drag-visible',
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(DragHandle, null);
+  }
+};
 var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var dataSource = props.dataSource,
       autoSize = props.autoSize,
@@ -49,6 +73,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       loading = props.loading,
       _props$virtual = props.virtual,
       virtual = _props$virtual === void 0 ? false : _props$virtual,
+      _props$sortOpen = props.sortOpen,
+      sortOpen = _props$sortOpen === void 0 ? false : _props$sortOpen,
       customCheck = props.customCheck,
       rowSelection = props.rowSelection,
       columnsState = props.columnsState,
@@ -81,7 +107,48 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useState7 = (0, _react.useState)(),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       columnsStateMap = _useState8[0],
-      setColumnsStateMap = _useState8[1]; // 原宽度，先宽度，序号
+      setColumnsStateMap = _useState8[1];
+
+  var SortableItem = (0, _reactSortableHoc.SortableElement)(function (props) {
+    return /*#__PURE__*/_react.default.createElement("tr", props);
+  });
+  var SortContainer = (0, _reactSortableHoc.SortableContainer)(function (props) {
+    return /*#__PURE__*/_react.default.createElement("tbody", props);
+  });
+
+  var onSortEnd = function onSortEnd(_ref) {
+    var oldIndex = _ref.oldIndex,
+        newIndex = _ref.newIndex;
+
+    if (oldIndex !== newIndex) {
+      var newData = (0, _sortable.arrayMove)(dataSource, oldIndex, newIndex).filter(function (el) {
+        return !!el;
+      });
+      console.log(newData, 'nnnnnn'); // setDataSource([...newData])
+    }
+  };
+
+  var DraggableContainer = function DraggableContainer(props) {
+    return /*#__PURE__*/_react.default.createElement(SortContainer, (0, _extends2.default)({
+      useDragHandle: true,
+      disableAutoscroll: true,
+      helperClass: "row-dragging",
+      onSortEnd: onSortEnd
+    }, props));
+  };
+
+  var DraggableBodyRow = function DraggableBodyRow(props) {
+    var className = props.className,
+        style = props.style,
+        restProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+    var index = dataSource.findIndex(function (x) {
+      return x[rowKey || 'index'] === restProps['data-row-key'];
+    });
+    console.log(dataSource, restProps, 222, index);
+    return /*#__PURE__*/_react.default.createElement(SortableItem, (0, _extends2.default)({
+      index: index
+    }, restProps));
+  }; // 原宽度，先宽度，序号
 
 
   var handleResize = function handleResize(sc, size, index) {
@@ -98,7 +165,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var resetColumns = (0, _react.useCallback)(function () {
-    return useColumns.filter(function (item) {
+    var result = useColumns.filter(function (item) {
       return item.show !== false;
     }).map(function (col, index) {
       return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, col), {}, {
@@ -113,7 +180,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }
       });
     });
-  }, [useColumns]);
+    console.log(sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(result)) : result, sortOpen, 111);
+    return sortOpen ? [sortDefaultColumnItem].concat((0, _toConsumableArray2.default)(result)) : result;
+  }, [useColumns, sortOpen]);
   (0, _react.useEffect)(function () {
     setColumns(columns);
   }, [columns]); // 行点击事件
@@ -250,10 +319,10 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var obj = (0, _objectSpread2.default)({}, columnsState);
     columns === null || columns === void 0 ? void 0 : columns.forEach(function (item) {
       /** 目前支持三种 */
-      var _ref = obj[item.dataIndex || item.key] || {},
-          order = _ref.order,
-          show = _ref.show,
-          fixed = _ref.fixed;
+      var _ref2 = obj[item.dataIndex || item.key] || {},
+          order = _ref2.order,
+          show = _ref2.show,
+          fixed = _ref2.fixed;
 
       obj[item.dataIndex || item.key] = {
         fixed: fixed || item.fixed,
@@ -322,7 +391,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
     loading: loading,
     dataSource: dataSource,
-    components: virtual ? vComponents : null,
+    components: sortOpen ? {
+      body: {
+        wrapper: DraggableContainer,
+        row: DraggableBodyRow
+      }
+    } : null,
     tableClassName: "lm_protable",
     summary: function summary(pageData) {
       return _summary && _summary(pageData, resultColumns);

package/lib/LmTable/style/style.css

@@ -1410,3 +1410,16 @@ html {
   height: 48px;
   display: flex;
 }
+.row-dragging {
+  background: var(--color-6);
+  border: 1px solid var(--color-6);
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+.row-dragging td {
+  padding: 16px;
+}
+.row-dragging .drag-visible {
+  visibility: visible;
+}

package/lib/Radio/style/style.css

@@ -28,15 +28,15 @@
 }
 .lm-radio-group .ant-radio-button-wrapper {
   font-size: 12px;
-  line-height: 30px;
   height: 32px;
-  padding: 1px 12px;
+  padding: 0px 12px;
   color: var(--font-color);
   vertical-align: middle;
 }
 .lm-radio-group .ant-radio-button-wrapper .anticon {
   font-size: 16px;
   vertical-align: middle;
+  line-height: 1;
 }
 .lm-radio-group .ant-radio-button-wrapper:hover {
   color: var(--primary-color);
@@ -44,7 +44,6 @@
 .lm-radio-group .ant-radio-button-wrapper > span:last-child {
   display: inline-block;
   font-size: 12px;
-  line-height: 30px;
   max-width: 96px;
   overflow: hidden;
   white-space: nowrap;
@@ -73,7 +72,7 @@
 .lm-radio-group.ant-radio-group-small .ant-radio-button-wrapper {
   line-height: 22px;
   height: 24px;
-  padding: 1px 8px;
+  padding: 0px 8px;
 }
 .lm-radio-group.ant-radio-group-small .ant-radio-button-wrapper > span:last-child {
   line-height: 22px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkmore-design",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "author": {
     "name": "nowthen",
     "email": "rnlvwyx@gmail.com"
@@ -66,6 +66,7 @@
     "react-cookies": "^0.1.1",
     "react-query": "^3.34.15",
     "react-resizable": "^3.0.4",
+    "react-sortable-hoc": "^2.0.0",
     "react-virtual": "^2.10.4",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",