linkmore-design 1.0.44 → 1.0.45

package/lib/LmTable/Table.js

@@ -13,10 +13,10 @@ require("antd/es/config-provider/style");
 
 var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -29,18 +29,23 @@ var _proTable = _interopRequireDefault(require("@ant-design/pro-table"));
 
 var _sortable = require("@dnd-kit/sortable");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _lodash = require("lodash");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactResizable = require("react-resizable");
+
 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", "sortOpen", "customCheck", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size"],
-    _excluded2 = ["className", "style"];
+var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "resizeable", "customCheck", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size"],
+    _excluded2 = ["className", "style"],
+    _excluded3 = ["onResize", "width", "onResizeStop"];
 var Summary = _proTable.default.Summary;
 exports.Summary = Summary;
 var DragHandle = (0, _reactSortableHoc.SortableHandle)(function () {
@@ -75,6 +80,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       virtual = _props$virtual === void 0 ? false : _props$virtual,
       _props$sortOpen = props.sortOpen,
       sortOpen = _props$sortOpen === void 0 ? false : _props$sortOpen,
+      _props$resizeable = props.resizeable,
+      resizeable = _props$resizeable === void 0 ? false : _props$resizeable,
       customCheck = props.customCheck,
       rowSelection = props.rowSelection,
       columnsState = props.columnsState,
@@ -127,8 +134,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (oldIndex !== newIndex) {
       var newData = (0, _sortable.arrayMove)(dataSource, oldIndex, newIndex).filter(function (el) {
         return !!el;
-      });
-      console.log(newData, 'nnnnnn'); // setDataSource([...newData])
+      }); // setDataSource([...newData])
     }
   };
 
@@ -153,19 +159,46 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       index: index
     }, restProps));
   }; // 原宽度，先宽度，序号
-
-
-  var handleResize = function handleResize(sc, size, index) {
-    var preCountW = (0, _lodash.sumBy)(useColumns, 'width') + 36;
-    var curCountW = preCountW - sc + size;
-    var scale = curCountW > preCountW ? subtract(preCountW, size) / subtract(preCountW, sc) : subtract(autoSize.width, size) / subtract(autoSize.width, sc);
-    var nValue = useColumns.map(function (v, idx) {
-      var w = curCountW < autoSize.width ? scale * v.width : v.width;
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, v), {}, {
-        width: idx === index ? size : w
+  // const handleResize = (sc, size, index) => {
+  //   // const preCountW = sumBy(useColumns, 'width') + 36
+  //   // const curCountW = preCountW - sc + size
+  //   // const scale =
+  //   //   curCountW > preCountW
+  //   //     ? subtract(preCountW, size) / subtract(preCountW, sc)
+  //   //     : subtract(autoSize.width, size) / subtract(autoSize.width, sc)
+  //   // const nValue = useColumns.map((v, idx) => {
+  //   //   const w = curCountW < autoSize.width ? scale * v.width : v.width
+  //   //   return {
+  //   //     ...v,
+  //   //     width: idx === index ? size : w,
+  //   //   }
+  //   // })
+  //   // setColumns([...nValue])
+  //   console.log(sc, size, index, 666)
+  //   const nextColumns = [...useColumns]
+  //   nextColumns[index] = {
+  //     ...nextColumns[index],
+  //     width: size.width,
+  //   }
+  //   setColumns(nextColumns)
+  // }
+
+
+  var handleResize = function handleResize(index) {
+    return function (e, _ref2) {
+      var size = _ref2.size;
+      var nextColumns = (0, _toConsumableArray2.default)(useColumns);
+      nextColumns[index] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, nextColumns[index]), {}, {
+        width: size.width
       });
+      setColumns(nextColumns);
+    };
+  };
+
+  var endResize = function endResize(e, data) {
+    setTimeout(function () {
+      filterChange === null || filterChange === void 0 ? void 0 : filterChange(useColumns);
     });
-    setColumns((0, _toConsumableArray2.default)(nValue));
   };
 
   var resetColumns = (0, _react.useCallback)(function () {
@@ -177,9 +210,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         onHeaderCell: function onHeaderCell(column) {
           return {
             width: column.width,
-            onResize: function onResize(e, size) {
-              return handleResize(e, size, index);
-            }
+            // onResize: (e, size) => handleResize(e, size, index),
+            onResize: handleResize(index),
+            onResizeStop: endResize
           };
         }
       });
@@ -322,10 +355,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 _ref2 = obj[item.dataIndex || item.key] || {},
-          order = _ref2.order,
-          show = _ref2.show,
-          fixed = _ref2.fixed;
+      var _ref3 = obj[item.dataIndex || item.key] || {},
+          order = _ref3.order,
+          show = _ref3.show,
+          fixed = _ref3.fixed;
 
       obj[item.dataIndex || item.key] = {
         fixed: fixed || item.fixed,
@@ -401,7 +434,54 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     filterChange === null || filterChange === void 0 ? void 0 : filterChange(resultColumns);
     onChange === null || onChange === void 0 ? void 0 : onChange(pagination, filters, sorter, extra);
   };
+  /** 排序的表头 */
+
+
+  var ResizableTitle = function ResizableTitle(props) {
+    var onResize = props.onResize,
+        width = props.width,
+        onResizeStop = props.onResizeStop,
+        restProps = (0, _objectWithoutProperties2.default)(props, _excluded3);
+
+    if (!width) {
+      return /*#__PURE__*/_react.default.createElement("th", restProps);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable, {
+      width: width,
+      height: 0,
+      handle: /*#__PURE__*/_react.default.createElement("span", {
+        className: "react-resizable-handle",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+        }
+      }),
+      onResize: onResize,
+      onResizeStop: onResizeStop,
+      draggableOpts: {
+        enableUserSelectHack: false
+      }
+    }, /*#__PURE__*/_react.default.createElement("th", restProps));
+  };
+
+  var tableComponents = (0, _react.useMemo)(function () {
+    var obj = {};
+
+    if (sortOpen) {
+      obj['body'] = {
+        wrapper: DraggableContainer,
+        row: DraggableBodyRow
+      };
+    }
+
+    if (resizeable) {
+      obj['header'] = {
+        cell: ResizableTitle
+      };
+    }
 
+    return obj;
+  }, [sortOpen, resizeable]);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '100%',
@@ -412,14 +492,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
     loading: loading,
     dataSource: dataSource,
-    components: sortOpen ? {
-      body: {
-        wrapper: DraggableContainer,
-        row: DraggableBodyRow
-      }
-    } : null,
+    components: tableComponents,
     onChange: onTableChange,
-    tableClassName: "lm_protable",
+    tableClassName: (0, _classnames.default)('lm_protable', resizeable && 'lm_resizeable'),
     summary: function summary(pageData) {
       return _summary && _summary(pageData, resultColumns);
     }

package/lib/LmTable/style/style.css

@@ -830,6 +830,9 @@ html {
 #lm_protable_warp .lm_protable .ant-table {
   font-size: 12px;
 }
+#lm_protable_warp .lm_protable.lm_resizeable table {
+  table-layout: inherit !important;
+}
 #lm_protable_warp .lm_protable .ant-card-body,
 #lm_protable_warp .lm_protable .ant-pro-card-body {
   padding: 0;
@@ -1450,3 +1453,12 @@ html {
 .ant-table.ant-table-middle tfoot > tr > td {
   padding: 12px 8px;
 }
+.react-resizable-handle {
+  position: absolute;
+  right: -5px;
+  bottom: 0;
+  z-index: 1;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkmore-design",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "author": {
     "name": "nowthen",
     "email": "rnlvwyx@gmail.com"