@ccs-ui/rc-pro 1.1.18 → 1.1.19-beta-2

package/es/pro-grid/index.d.ts

@@ -6,17 +6,16 @@ type ClassProps = {
     style?: CSSProperties;
 };
 type CcsProGridProps = ClassProps & {
-    bordered?: boolean;
+    gutter?: number;
     children?: ReactNode;
 };
 type ColProps = CardProps & {
-    colSpan?: string | number;
-    colStyle?: CSSProperties;
-    colClassName?: string;
+    colWidth?: number;
+    children?: ReactNode;
 };
 type GridInstance = FC<CcsProGridProps> & {
     Col: typeof GridCol;
 };
-declare const GridCol: ({ colSpan, colClassName, colStyle, ...otherProps }: ColProps) => import("react/jsx-runtime").JSX.Element;
+declare const GridCol: ({ children, colWidth, style, className, ...restProps }: ColProps) => import("react/jsx-runtime").JSX.Element;
 declare const ProGrid: GridInstance;
 export default ProGrid;

package/es/pro-grid/index.js

@@ -1,6 +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 = ["colSpan", "colClassName", "colStyle"],
-  _excluded2 = ["bordered", "children"];
+var _excluded = ["children", "colWidth", "style", "className"],
+  _excluded2 = ["children", "gutter"];
 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; }
@@ -8,48 +8,51 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Card } from 'antd';
-import classNames from 'classnames';
+import React from 'react';
 import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var GridCol = function GridCol(_ref) {
-  var colSpan = _ref.colSpan,
-    colClassName = _ref.colClassName,
-    colStyle = _ref.colStyle,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: classNames('ccs-pg-col', colClassName),
-      style: colSpan ? _objectSpread({
-        width: colSpan,
-        flexShrink: 0
-      }, colStyle) : _objectSpread({
-        display: 'flex',
-        width: 0,
-        flex: 'auto',
-        flexDirection: 'column'
-      }, colStyle),
-      children: /*#__PURE__*/_jsx(Card, _objectSpread({
-        bodyStyle: {
-          padding: 0
-        }
-      }, otherProps))
-    })
+  var children = _ref.children,
+    colWidth = _ref.colWidth,
+    style = _ref.style,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  console.log('restProps', restProps);
+  var styles = _objectSpread({}, style);
+  if (colWidth) {
+    styles.width = colWidth;
+    styles.flex = "0 0 ".concat(colWidth, "px");
+  } else {
+    styles.flex = "1 1 auto";
+  }
+  var _ref2 = restProps,
+    gutter = _ref2.gutter;
+  if (gutter) {
+    styles.marginLeft = gutter;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    style: styles,
+    className: className,
+    children: children
   });
 };
-var Grid = function Grid(_ref2) {
-  var bordered = _ref2.bordered,
-    children = _ref2.children,
-    restProps = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, restProps), {}, {
-    className: classNames({
-      'ccs-pg-border': bordered
-    }),
-    children: /*#__PURE__*/_jsx("div", {
-      className: "ccs-pl-table-content",
-      children: children
-    })
+var Grid = function Grid(_ref3) {
+  var children = _ref3.children,
+    gutter = _ref3.gutter,
+    restProps = _objectWithoutProperties(_ref3, _excluded2);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    style: {
+      display: 'flex'
+    }
+  }, restProps), {}, {
+    children: gutter ? React.Children.map(children, function (child, index) {
+      return /*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/React.isValidElement(child) && /*#__PURE__*/React.cloneElement(child, {
+          gutter: index !== 0 ? gutter : 0
+        })
+      });
+    }) : children
   }));
 };
 var ProGrid = Grid;

package/es/pro-grid/index.less

@@ -1,9 +1,4 @@
 .ccs-pg {
-  &-col:not(:first-child) {
-    // border-right: 1px solid #f0f0f0;
-    margin-left: 10px;
-  }
-
   &-col-title {
     font-size: 15px;
   }

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 || typeof width !== 'number') {
+    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: _objectSpread({
           total: totalNum,
           pageSize: pageSize,
           current: pageNo,
@@ -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-beta-2",
+  "description": "ProGrid 调整;ProTable 传入列宽度为number类型拖拽才生效;ProTable传入pagination分页显示异常",
   "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",