@ccs-ui/rc-pro 1.1.18 → 1.1.19

package/es/table/index.js

@@ -1,5 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["data", "style", "scroll", "event$", "rowKey", "columns", "pagination", "rowSelection", "className"];
+var _excluded = ["onResize", "width"],
+  _excluded2 = ["data", "style", "scroll", "event$", "rowKey", "columns", "pagination", "rowSelection", "className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -11,6 +12,7 @@ import { useDebounceFn, useEventListener, useUpdate, useUpdateEffect } from 'aho
 import { Table, Tooltip, theme } from 'antd';
 import classNames from 'classnames';
 import { useRef } from 'react';
+import { Resizable } from 'react-resizable';
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 var DEFAULT_PAGE = {
@@ -19,6 +21,29 @@ var DEFAULT_PAGE = {
   pageSize: 10,
   pageNo: 1
 };
+var ResizableTitle = function ResizableTitle(props) {
+  var onResize = props.onResize,
+    width = props.width,
+    restProps = _objectWithoutProperties(props, _excluded);
+  if (!width) {
+    return /*#__PURE__*/_jsx("th", _objectSpread({}, restProps));
+  }
+  return /*#__PURE__*/_jsx(Resizable, {
+    width: width,
+    height: 0,
+    handle: /*#__PURE__*/_jsx("span", {
+      className: "react-resizable-handle",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      }
+    }),
+    onResize: onResize,
+    draggableOpts: {
+      enableUserSelectHack: false
+    },
+    children: /*#__PURE__*/_jsx("th", _objectSpread({}, restProps))
+  });
+};
 var CustomTable = function CustomTable(props) {
   var data = props.data,
     style = props.style,
@@ -30,7 +55,7 @@ var CustomTable = function CustomTable(props) {
     rowSelection = props.rowSelection,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
-    restProps = _objectWithoutProperties(props, _excluded);
+    restProps = _objectWithoutProperties(props, _excluded2);
 
   // 固定表头获取table可视高度
   var ref = useRef(null);
@@ -95,6 +120,18 @@ var CustomTable = function CustomTable(props) {
     }
   });
 
+  // 改变列宽
+  var onResize = function onResize(dataIndex) {
+    return function (_, _ref3) {
+      var size = _ref3.size;
+      var column = columns === null || columns === void 0 ? void 0 : columns.find(function (c) {
+        return c.dataIndex === dataIndex;
+      });
+      column.width = size.width;
+      update();
+    };
+  };
+
   // 列过滤
   var filterColumns = function filterColumns() {
     var cls = columns === null || columns === void 0 ? void 0 : columns.filter(function (t) {
@@ -116,6 +153,13 @@ var CustomTable = function CustomTable(props) {
           });
         };
       }
+      // 拖拽头部改变列宽响应
+      c.onHeaderCell = function (column) {
+        return {
+          width: column.width,
+          onResize: onResize(c.dataIndex)
+        };
+      };
     });
     return cls;
   };
@@ -128,10 +172,10 @@ var CustomTable = function CustomTable(props) {
     }),
     children: /*#__PURE__*/_jsx("div", {
       ref: ref,
-      children: /*#__PURE__*/_jsx(Table, _objectSpread({}, _objectSpread(_objectSpread({
+      children: /*#__PURE__*/_jsx(Table, _objectSpread(_objectSpread({
         rowKey: rowKey,
         dataSource: result,
-        pagination: pagination === false ? false : _objectSpread({
+        pagination: pagination !== null && pagination !== void 0 ? pagination : _objectSpread({
           total: totalNum,
           pageSize: pageSize,
           current: pageNo,
@@ -143,7 +187,7 @@ var CustomTable = function CustomTable(props) {
           pageSizeOptions: ['10', '20', '30', '50', '100'],
           size: restProps.size === 'small' ? 'small' : 'default',
           simple: restProps.size === 'small'
-        }, pagination),
+        }, pagination || {}),
         rowSelection: rowSelection ? _objectSpread(_objectSpread({}, rowSelection), {}, {
           columnWidth: 60
         }) : undefined,
@@ -151,8 +195,13 @@ var CustomTable = function CustomTable(props) {
       }, restProps), {}, {
         size: restProps.size || 'middle',
         className: classNames(!totalNum ? 'ccs-table-nodata' : '', className),
-        scroll: scroll
-      })))
+        scroll: scroll,
+        components: {
+          header: {
+            cell: ResizableTitle
+          }
+        }
+      }))
     })
   });
 };

package/es/table/index.less

@@ -87,6 +87,21 @@
     .ant-table-sticky-holder {
       z-index: 100;
     }
+
+    .react-resizable {
+      position: relative;
+      background-clip: padding-box;
+    }
+
+    .react-resizable-handle {
+      position: absolute;
+      right: -5px;
+      bottom: 0;
+      z-index: 1;
+      width: 15px;
+      height: 100%;
+      cursor: col-resize;
+    }
   }
 
   &-nodata {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ccs-ui/rc-pro",
-  "version": "1.1.18",
-  "description": "测试更新说明;测试更新说明2;测试更新说明3",
+  "version": "1.1.19",
+  "description": " ProTable支持拖拽改变宽度，需设置列宽",
   "license": "MIT",
   "author": {
     "name": "Hong",
@@ -68,6 +68,7 @@
     "react-color": "^2.19.3",
     "react-custom-scrollbars": "^4.2.1",
     "react-draggable": "^4.4.5",
+    "react-resizable": "^3.0.5",
     "react-router": "^6.11.2",
     "react-router-dom": "^6.11.2",
     "shortid": "^2.2.16"
@@ -80,7 +81,9 @@
     "@types/react-color": "^3.0.6",
     "@types/react-custom-scrollbars": "^4.0.10",
     "@types/react-dom": "^18.0.0",
+    "@types/react-resizable": "^3.0.7",
     "@types/shortid": "^0.0.29",
+    "@types/throttle-debounce": "^5.0.2",
     "@umijs/lint": "^4.0.0",
     "cross-env": "^7.0.3",
     "dumi": "^2.2.0",