@ccs-ui/rc-pro 1.1.25-beta-9 → 1.1.25-beta-11

package/es/ccs.d.ts

@@ -175,14 +175,14 @@ type ShowDependType = {
     name: string;
     value: any;
 };
-type TableFormItem = {
+export type TableFormItem = {
     /** label 标题 */
     label?: string;
     /** form name */
     name: string;
     /** form item element */
     value: ReactElement;
-    /** 主条件 */
+    /** @deprecated 主条件 */
     isMain?: boolean;
     /** 数据依赖、依赖项对应的name数组 */
     depends?: string[];

package/es/dialog/HookModal.js

@@ -25,13 +25,13 @@ var DragModal = function DragModal(_ref) {
   var modal = _ref.modal,
     dragState = _ref.dragState,
     onDragState = _ref.onDragState;
-  var draggleRef = useRef(null);
-  var _onStart = function onStart(event, uiData) {
-    var _draggleRef$current;
+  var nodeRef = useRef(null);
+  var onStart = function onStart(event, uiData) {
+    var _nodeRef$current;
     var _window$document$docu = window.document.documentElement,
       clientWidth = _window$document$docu.clientWidth,
       clientHeight = _window$document$docu.clientHeight;
-    var targetRect = (_draggleRef$current = draggleRef.current) === null || _draggleRef$current === void 0 ? void 0 : _draggleRef$current.getBoundingClientRect();
+    var targetRect = (_nodeRef$current = nodeRef.current) === null || _nodeRef$current === void 0 ? void 0 : _nodeRef$current.getBoundingClientRect();
     if (!targetRect) {
       return;
     }
@@ -47,13 +47,12 @@ var DragModal = function DragModal(_ref) {
     });
   };
   return /*#__PURE__*/_jsx(Draggable, {
+    nodeRef: nodeRef,
     disabled: dragState.disabled,
     bounds: dragState.bounds,
-    onStart: function onStart(event, uiData) {
-      return _onStart(event, uiData);
-    },
+    onStart: onStart,
     children: /*#__PURE__*/_jsx("div", {
-      ref: draggleRef,
+      ref: nodeRef,
       children: modal
     })
   });

package/es/pro-table/form-item.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TableFormItem } from '../ccs';
+import { FormItemRef } from './head';
+import { CcsProTableProps } from './table';
+type PropsType = TableFormItem & {
+    index: number;
+    dependParam?: any;
+    onSetShowNum: () => void;
+    formItemsRef: React.MutableRefObject<FormItemRef>;
+} & Pick<CcsProTableProps<any>, 'formItemLabelWidth'>;
+export default function HeadFormItem({ label, name, rules, value, index, dependParam, formItemsRef, formItemLabelWidth, onSetShowNum, }: PropsType): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/pro-table/form-item.js

@@ -0,0 +1,65 @@
+import { Form } from 'antd';
+import ResizeObserver from 'rc-resize-observer';
+import { cloneElement, useEffect, useRef } from 'react';
+import { classPrefix } from "./table";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function HeadFormItem(_ref) {
+  var label = _ref.label,
+    name = _ref.name,
+    rules = _ref.rules,
+    value = _ref.value,
+    index = _ref.index,
+    dependParam = _ref.dependParam,
+    formItemsRef = _ref.formItemsRef,
+    formItemLabelWidth = _ref.formItemLabelWidth,
+    onSetShowNum = _ref.onSetShowNum;
+  var ref = useRef(null);
+  var historyRef = useRef();
+  var onSaveRef = function onSaveRef() {
+    var _ref$current;
+    var hasIndex = formItemsRef.current.findIndex(function (f) {
+      return f.index === index;
+    });
+    var item = {
+      index: index,
+      width: ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientWidth) || 0,
+      ref: ref.current
+    };
+    if (hasIndex === -1) {
+      formItemsRef.current.push(item);
+      return;
+    }
+    formItemsRef.current[index] = item;
+    historyRef.current = item;
+  };
+  useEffect(function () {
+    onSaveRef();
+  }, []);
+
+  // 尺寸大小改变监听
+  var onResize = function onResize(size) {
+    var _index;
+    if ((size === null || size === void 0 ? void 0 : size.width) !== ((_index = formItemsRef.current[index]) === null || _index === void 0 ? void 0 : _index.width)) {
+      onSaveRef();
+      onSetShowNum();
+    }
+  };
+  return /*#__PURE__*/_jsx(ResizeObserver, {
+    onResize: onResize,
+    children: /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/_jsx(Form.Item, {
+        name: name,
+        rules: rules,
+        className: "".concat(classPrefix, "-form-label"),
+        label: formItemLabelWidth ? /*#__PURE__*/_jsx("div", {
+          style: {
+            width: formItemLabelWidth
+          },
+          children: label
+        }) : label,
+        children: dependParam ? /*#__PURE__*/cloneElement(value, dependParam) : value
+      })
+    })
+  });
+}

package/es/pro-table/head.d.ts

@@ -0,0 +1,22 @@
+import { FormInstance } from 'antd/lib/form';
+import { ReactElement } from 'react';
+import { CcsProTableProps } from './table';
+type PropsType<T> = Pick<CcsProTableProps<T>, 'toolbar' | 'formItems' | 'formInitValues' | 'expandForm' | 'title' | 'formItemLabelWidth'> & {
+    /** 更多查询条件 */
+    hasMore?: boolean;
+    /** 标题边框 */
+    titleBordered?: boolean;
+    form: FormInstance<any>;
+    children?: ReactElement;
+    /** table 操作栏 */
+    tableOperation: ReactElement;
+    onSearch: () => void;
+};
+export type FormItemRef = {
+    index: number;
+    ref: HTMLDivElement;
+    width: number;
+}[];
+/** 操作按钮、查询，重置、列筛选、 */
+declare function HeadComponent<T>({ form, title, toolbar, children, expandForm, titleBordered, formItems, formInitValues, formItemLabelWidth, tableOperation, onSearch, }: PropsType<T>): import("react/jsx-runtime").JSX.Element;
+export default HeadComponent;

package/es/pro-table/head.js

@@ -0,0 +1,270 @@
+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); }
+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; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { DownOutlined, UpOutlined } from '@ant-design/icons';
+import { useUpdateEffect } from 'ahooks';
+import { Button, Card, Form } from 'antd';
+import _debounce from 'lodash/debounce';
+import ResizeObserver from 'rc-resize-observer';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { getShowDpends } from "./_utils";
+import HeadFormItem from "./form-item";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function onShowMaxItem(nums, maxWidth) {
+  var newNums = 0;
+  for (var i = 0; i < nums.length; i++) {
+    if (newNums + nums[i] > maxWidth) {
+      return i - 1;
+    } else {
+      newNums += nums[i];
+    }
+  }
+  return nums.length - 1;
+}
+
+/** 操作按钮、查询，重置、列筛选、 */
+function HeadComponent(_ref) {
+  var form = _ref.form,
+    title = _ref.title,
+    toolbar = _ref.toolbar,
+    children = _ref.children,
+    _ref$expandForm = _ref.expandForm,
+    expandForm = _ref$expandForm === void 0 ? false : _ref$expandForm,
+    titleBordered = _ref.titleBordered,
+    _ref$formItems = _ref.formItems,
+    formItems = _ref$formItems === void 0 ? [] : _ref$formItems,
+    formInitValues = _ref.formInitValues,
+    formItemLabelWidth = _ref.formItemLabelWidth,
+    tableOperation = _ref.tableOperation,
+    onSearch = _ref.onSearch;
+  var cardRef = useRef(null);
+  var formItemsRef = useRef([]);
+  // 查询条件是否展开
+  var _useState = useState(expandForm),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpand = _useState2[0],
+    setIsExpand = _useState2[1];
+  // 显示查询条件数量
+  var _useState3 = useState(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showNum = _useState4[0],
+    setShowNum = _useState4[1];
+  useUpdateEffect(function () {
+    setIsExpand(expandForm);
+  }, [expandForm]);
+
+  // 设置最大显示条件数量
+  var onSetShowNum = function onSetShowNum() {
+    if (!cardRef.current) return;
+
+    // 单行查询条件可占空间
+    var maxWidth = cardRef.current.clientWidth - 32 - 64 * 2;
+    if (maxWidth < 0) return;
+
+    // 单行可显示的查询条件
+    var maxItems = onShowMaxItem(formItemsRef.current.map(function (f) {
+      return f.width;
+    }), maxWidth);
+    setShowNum(maxItems);
+  };
+  useEffect(function () {
+    onSetShowNum();
+  }, [isExpand]);
+
+  // 处理form item 依赖
+  var allFormItems = useMemo(function () {
+    formItems.forEach(function (item) {
+      var depend = item.showDepends || [];
+      if (depend && depend.length > 0) {
+        getShowDpends(formItems, item, depend);
+      }
+    });
+    return formItems;
+  }, [formItems]);
+
+  // 查询条件记录数
+  var itemLen = allFormItems.length;
+  var hasItem = itemLen > 0;
+  var hasMore = showNum > -1 && showNum < itemLen - 1;
+
+  // 操作按钮
+  var renderOperation = /*#__PURE__*/_jsxs("div", {
+    style: {
+      textAlign: 'right',
+      flex: isExpand ? '1 1 auto' : '0 0 auto'
+    },
+    children: [hasMore && /*#__PURE__*/_jsx(Button, {
+      type: "link",
+      icon: isExpand ? /*#__PURE__*/_jsx(UpOutlined, {}) : /*#__PURE__*/_jsx(DownOutlined, {}),
+      style: {
+        padding: '4px 6px'
+      },
+      onClick: function onClick() {
+        return setIsExpand(!isExpand);
+      },
+      children: isExpand ? '收起' : '展开'
+    }), /*#__PURE__*/_jsx(Button, {
+      type: "primary",
+      onClick: function onClick() {
+        return form.submit();
+      },
+      htmlType: "submit",
+      children: "\u67E5\u8BE2"
+    })]
+  });
+  var renderFormItems = function renderFormItems() {
+    return allFormItems.map(function (item, index) {
+      if (item.depends || item.showDepends) {
+        return /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [/*#__PURE__*/_jsx(Form.Item, {
+            noStyle: true,
+            shouldUpdate: function shouldUpdate(l, n) {
+              var _item$depends, _item$showDepends;
+              return ((_item$depends = item.depends) === null || _item$depends === void 0 ? void 0 : _item$depends.some(function (i) {
+                return l[i] !== n[i];
+              })) || ((_item$showDepends = item.showDepends) === null || _item$showDepends === void 0 ? void 0 : _item$showDepends.some(function (i) {
+                return l[i.name] !== n[i.name];
+              })) || false;
+            },
+            children: function children(_ref2) {
+              var _item$depends2;
+              var getFieldValue = _ref2.getFieldValue;
+              var dependParam = {};
+              (_item$depends2 = item.depends) === null || _item$depends2 === void 0 ? void 0 : _item$depends2.forEach(function (i) {
+                var value = getFieldValue(i);
+                dependParam[i] = value;
+              });
+              var isShow = true;
+              if (item.showDepends && item.showDepends.length > 0) {
+                var _item$showDepends2;
+                isShow = (_item$showDepends2 = item.showDepends) === null || _item$showDepends2 === void 0 ? void 0 : _item$showDepends2.every(function (i) {
+                  return getFieldValue(i.name) === i.value;
+                });
+              }
+              var itemContent = /*#__PURE__*/_jsx(HeadFormItem, {
+                index: index,
+                name: item.name,
+                label: item.label,
+                rules: item.rules,
+                value: item.value,
+                dependParam: dependParam,
+                onSetShowNum: onSetShowNum,
+                formItemsRef: formItemsRef,
+                formItemLabelWidth: formItemLabelWidth
+              });
+              if (!isShow) return null;
+              return itemContent;
+            }
+          }), showNum === index && !isExpand && renderOperation]
+        }, item.name);
+      }
+      var itemContent = /*#__PURE__*/_jsx(HeadFormItem, {
+        index: index,
+        name: item.name,
+        value: item.value,
+        rules: item.rules,
+        label: item.label,
+        onSetShowNum: onSetShowNum,
+        formItemsRef: formItemsRef,
+        formItemLabelWidth: formItemLabelWidth
+      });
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [itemContent, showNum === index && !isExpand && renderOperation]
+      }, item.name);
+    });
+  };
+
+  // 尺寸变化重设尺寸
+  var resizeFn = _debounce(function () {
+    onSetShowNum();
+  }, 500);
+
+  // 监听dom尺寸变化
+  var onResize = function onResize() {
+    resizeFn();
+  };
+
+  // table是否有边框
+  var hasBorder = titleBordered === true;
+  var formStyles = {
+    gap: 16
+  };
+  // 单行条件右对齐
+  if (!isExpand && (hasMore || formItemsRef.current.length - 1 === showNum)) {
+    formStyles.justifyContent = 'flex-end';
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [hasItem && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ResizeObserver, {
+        onResize: onResize,
+        children: /*#__PURE__*/_jsx("div", {})
+      }), /*#__PURE__*/_jsx(Card, {
+        className: "ccs-pl-adaptation",
+        style: _objectSpread({
+          borderRadius: 0,
+          boxShadow: 'none'
+        }, hasBorder ? {
+          borderBottom: 0
+        } : {}),
+        styles: {
+          body: {
+            padding: 16,
+            height: isExpand ? 'auto' : 64
+          }
+        },
+        bordered: hasBorder,
+        title: title,
+        ref: cardRef,
+        children: /*#__PURE__*/_jsxs(Form, {
+          initialValues: formInitValues,
+          form: form,
+          onFinish: onSearch,
+          layout: "inline",
+          style: formStyles,
+          children: [renderFormItems(), isExpand && renderOperation]
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(Card, {
+      styles: {
+        cover: {
+          borderRadius: 0
+        },
+        body: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%',
+          padding: '12px 16px',
+          alignContent: 'center'
+        }
+      },
+      style: {
+        borderRadius: 0,
+        borderLeft: 0,
+        borderRight: 0
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          flex: '1 1 auto'
+        },
+        children: toolbar
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          flex: '0 0 auto'
+        },
+        children: tableOperation
+      })]
+    }), children]
+  });
+}
+export default HeadComponent;

package/es/pro-table/index.less

@@ -45,6 +45,17 @@
     }
   }
 
+  &-adaptation {
+    .ant-form-item {
+      // margin-bottom: 0;
+      margin-inline-end: 0;
+    }
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+
   &-form {
     flex: 0 1 auto;
     overflow: hidden;
@@ -116,11 +127,6 @@
     line-height: 0;
   }
 
-  .ant-form-item {
-    margin-bottom: 0;
-    margin-inline-end: 0;
-  }
-
   .ant-input-number {
     width: 100%;
   }

package/es/pro-table/operation.d.ts

@@ -1,11 +1,14 @@
 /// <reference types="react" />
+import { TableProps } from 'antd';
 import { TableRefType } from '../table';
 type PropsType = {
-    /** 显示列 */ columns?: any;
-    /** 弹框中显示 */
+    /** 显示列 */
+    columns?: any;
+    tableRowSize: TableProps['size'];
     isInModalOrDrawer: boolean;
-    onReset: () => void;
     tableRef: React.MutableRefObject<TableRefType | undefined>;
+    onReset: () => void;
+    onChangeRowSize: (e: TableProps['size']) => void;
 };
-export default function TableOperation({ columns, tableRef, isInModalOrDrawer, onReset, }: PropsType): import("react/jsx-runtime").JSX.Element;
+export default function TableOperation({ columns, tableRef, tableRowSize, isInModalOrDrawer, onReset, onChangeRowSize, }: PropsType): import("react/jsx-runtime").JSX.Element;
 export {};

package/es/pro-table/operation.js

@@ -8,8 +8,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { RedoOutlined, SettingOutlined } from '@ant-design/icons';
-import { Button, Checkbox, Divider, Popover, Tooltip } from 'antd';
+import { ColumnHeightOutlined, RedoOutlined, SettingOutlined } from '@ant-design/icons';
+import { Button, Checkbox, Divider, Dropdown, Popover, Tooltip } from 'antd';
 import { useState } from 'react';
 import { CcsFullScreenButton } from '..';
 import { classPrefix } from "./table";
@@ -19,8 +19,10 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function TableOperation(_ref) {
   var columns = _ref.columns,
     tableRef = _ref.tableRef,
+    tableRowSize = _ref.tableRowSize,
     isInModalOrDrawer = _ref.isInModalOrDrawer,
-    onReset = _ref.onReset;
+    onReset = _ref.onReset,
+    onChangeRowSize = _ref.onChangeRowSize;
   var _useState = useState(columns),
     _useState2 = _slicedToArray(_useState, 2),
     filterColumns = _useState2[0],
@@ -158,6 +160,36 @@ export default function TableOperation(_ref) {
           }
         })
       })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "\u5BC6\u5EA6",
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        placement: "bottomRight",
+        menu: {
+          activeKey: tableRowSize,
+          items: [{
+            key: 'large',
+            label: '默认'
+          }, {
+            key: 'middle',
+            label: '中等'
+          }, {
+            key: 'small',
+            label: '紧凑'
+          }],
+          onClick: function onClick(e) {
+            onChangeRowSize(e.key);
+          }
+        },
+        children: /*#__PURE__*/_jsx(Button, {
+          icon: /*#__PURE__*/_jsx(ColumnHeightOutlined, {
+            className: "".concat(classPrefix, "-icon")
+          }),
+          type: "text",
+          style: {
+            width: 24
+          }
+        })
+      })
     }), !isInModalOrDrawer && /*#__PURE__*/_jsx(CcsFullScreenButton, {
       onFullScreen: onFullScreen
     })]

package/es/pro-table/search.js

@@ -61,12 +61,11 @@ function SearchComponent(props) {
   var _theme$useToken = theme.useToken(),
     token = _theme$useToken.token;
   var onHasMore = function onHasMore() {
-    if (props.formItemLayout === 'tradition') return false;
     var hasMain = formItems.filter(function (f) {
       return f.isMain;
     });
-    // 所有都是主条件
-    if (hasMain.length === formItems.length) {
+    // 所有都是主条件,tradition模式不显示more
+    if (props.formItemLayout === 'tradition' || hasMain.length === formItems.length) {
       // 收起已展开
       if (isShowMore === true) {
         setIsShowMore(false);

package/es/pro-table/table.d.ts

@@ -40,7 +40,7 @@ export type CcsTableProps<T> = Omit<TableProps<T>, 'columns' | 'title'> & {
     /** table title  */
     title?: ({ selectedRows, data, onClear }: TableTitleType<T>) => ReactNode;
 };
-type FormLayout = 'horizontal' | 'inline' | 'vertical' | 'tradition';
+type FormLayout = 'horizontal' | 'inline' | 'vertical' | 'adaptation';
 export type CcsProTableProps<T> = {
     /** api权限标识 */
     auth?: string | 'ignore';
@@ -50,9 +50,9 @@ export type CcsProTableProps<T> = {
     title?: string;
     /** 查询条件集合 */
     formItems?: CCS.TableFormItems;
-    /** 查询条件布局模式，默认：horizontal */
+    /** @deprecated 查询条件布局模式，默认：horizontal */
     formItemLayout?: FormLayout;
-    /** 查询条件栅格配置，默认：{ xs: 24, sm: 12, md: 8, lg: 8, xl: 6 } */
+    /** @deprecated 查询条件栅格配置，默认：{ xs: 24, sm: 12, md: 8, lg: 8, xl: 6 } */
     formItemCol?: ColProps | ColProps[];
     /** form item label 宽度 */
     formItemLabelWidth?: number | string;

package/es/pro-table/table.js

@@ -13,6 +13,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useUpdateEffect } from 'ahooks';
 import { Empty, Form, theme } from 'antd';
 import classNames from 'classnames';
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -20,12 +21,13 @@ import { CcsUtils, CcsWaterMark } from '..';
 import { useCcsPage } from "../";
 import CcsTable from "../table";
 import { getAllChildrenId, getDataById, onTableInModalOrDrawer, onTableInTabItem } from "./_utils";
+import HeadComponent from "./head";
 import "./index.less";
 import TableOperation from "./operation";
 import SearchComponent from "./search";
 import TableTree from "./tree";
 
-// 同 antd FormLayout; tradition为传统布局模式
+// 同 antd FormLayout; adaptation为自适应布局
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var classPrefix = 'ccs-pl';
@@ -99,6 +101,10 @@ var InternalProTable = function InternalProTable(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedRows = _useState4[0],
     setSelectedRows = _useState4[1];
+  var _useState5 = useState((table === null || table === void 0 ? void 0 : table.size) || 'middle'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tableRowSize = _useState6[0],
+    setTableRowSize = _useState6[1];
 
   // 权限判断
   var isAuth = useMemo(function () {
@@ -266,6 +272,8 @@ var InternalProTable = function InternalProTable(props) {
     var inMd = onTableInModalOrDrawer(tableContentRef.current);
     if (inMd) {
       stickyRef.current = inMd;
+      // 弹框中行尺寸默认设置为small
+      if (!(table !== null && table !== void 0 && table.size)) setTableRowSize('small');
       return;
     }
 
@@ -283,6 +291,11 @@ var InternalProTable = function InternalProTable(props) {
     // };
   }, []);
 
+  // size参数变化
+  useUpdateEffect(function () {
+    setTableRowSize((table === null || table === void 0 ? void 0 : table.size) || 'middle');
+  }, [table === null || table === void 0 ? void 0 : table.size]);
+
   // 初始查询
   useEffect(function () {
     if (init !== false && request) {
@@ -455,22 +468,22 @@ var InternalProTable = function InternalProTable(props) {
         }),
         treeRef: treeRef,
         tableRef: tableRef,
+        tableRowSize: tableRowSize,
         sticky: stickyRef.current || true,
         parentFieldName: parentFieldName,
         setData: setData,
         onSearchAfter: onSearchAfter,
         onSearchBefore: onSearchBefore,
-        handlePageChange: handlePageChange,
-        isInModalOrDrawer: isInModalOrDrawer
+        handlePageChange: handlePageChange
       });
     }
     return /*#__PURE__*/_jsx(CcsTable, _objectSpread(_objectSpread({
       data: data,
       tableRef: tableRef,
       onChange: handlePageChange,
-      size: isInModalOrDrawer ? 'small' : 'middle',
       sticky: stickyRef.current || true
     }, table), {}, {
+      size: tableRowSize,
       columns: columns,
       showSorterTooltip: true,
       rowSelection: rowSelection,
@@ -499,7 +512,7 @@ var InternalProTable = function InternalProTable(props) {
   var render = /*#__PURE__*/_jsxs("div", {
     className: classNames(classPrefix, className, _defineProperty({}, 'dark-table', isDark)),
     style: style,
-    children: [!(!formItems.length && !toolbar) && isAuth && /*#__PURE__*/_jsx(SearchComponent, {
+    children: [!(!formItems.length && !toolbar) && isAuth && props.formItemLayout !== 'adaptation' ? /*#__PURE__*/_jsx(SearchComponent, {
       form: form,
       title: title,
       titleBordered: table === null || table === void 0 ? void 0 : table.bordered,
@@ -511,8 +524,32 @@ var InternalProTable = function InternalProTable(props) {
       formItemLayout: props.formItemLayout,
       formItemCol: props.formItemCol,
       onSearch: _onSearch,
+      tableOperation: /*#__PURE__*/_jsx(TableOperation, {
+        tableRowSize: tableRowSize,
+        columns: columns,
+        tableRef: tableRef,
+        isInModalOrDrawer: isInModalOrDrawer,
+        onReset: _onReset,
+        onChangeRowSize: function onChangeRowSize(e) {
+          return setTableRowSize(e);
+        }
+      }),
+      children: newToolbarExtra
+    }) : /*#__PURE__*/_jsx(HeadComponent, {
+      form: form,
+      titleBordered: table === null || table === void 0 ? void 0 : table.bordered,
+      toolbar: newToolbar,
+      formItems: formItems,
+      expandForm: expandForm,
+      formInitValues: formInitValues,
+      formItemLabelWidth: props.formItemLabelWidth,
+      onSearch: _onSearch,
       tableOperation: /*#__PURE__*/_jsx(TableOperation, {
         isInModalOrDrawer: isInModalOrDrawer,
+        onChangeRowSize: function onChangeRowSize(e) {
+          return setTableRowSize(e);
+        },
+        tableRowSize: tableRowSize,
         onReset: _onReset,
         columns: columns,
         tableRef: tableRef

package/es/pro-table/tree.d.ts

@@ -1,3 +1,4 @@
+import { TableProps } from 'antd';
 import { TableSticky } from 'rc-table/lib/interface';
 import { RefObject } from 'react';
 import CCS from '..';
@@ -10,8 +11,8 @@ export type TreeInstance<T> = {
 };
 type TreeTableProps<T> = Pick<CcsProTableProps<T>, 'table' | 'onSearchBefore' | 'parentFieldName'> & {
     data: CCS.TableData<T>;
-    isInModalOrDrawer: boolean;
     sticky: boolean | TableSticky;
+    tableRowSize: TableProps['size'];
     treeRef: RefObject<TreeInstance<T>>;
     tableRef: React.MutableRefObject<TableRefType | undefined>;
     setData: React.Dispatch<React.SetStateAction<CCS.TableData<T>>>;
@@ -20,5 +21,5 @@ type TreeTableProps<T> = Pick<CcsProTableProps<T>, 'table' | 'onSearchBefore' |
         children: T[];
     })[]>;
 };
-declare const TableTree: <T extends object = any>({ data, table, sticky, treeRef, tableRef, setData, onSearchAfter, onSearchBefore, parentFieldName, handlePageChange, isInModalOrDrawer, }: TreeTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TableTree: <T extends object = any>({ data, table, sticky, treeRef, tableRef, tableRowSize, parentFieldName, handlePageChange, setData, onSearchAfter, onSearchBefore, }: TreeTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableTree;

package/es/pro-table/tree.js

@@ -26,12 +26,12 @@ var TableTree = function TableTree(_ref) {
     sticky = _ref.sticky,
     treeRef = _ref.treeRef,
     tableRef = _ref.tableRef,
-    setData = _ref.setData,
-    onSearchAfter = _ref.onSearchAfter,
-    onSearchBefore = _ref.onSearchBefore,
+    tableRowSize = _ref.tableRowSize,
     parentFieldName = _ref.parentFieldName,
     handlePageChange = _ref.handlePageChange,
-    isInModalOrDrawer = _ref.isInModalOrDrawer;
+    setData = _ref.setData,
+    onSearchAfter = _ref.onSearchAfter,
+    onSearchBefore = _ref.onSearchBefore;
   // async tree expand key
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -159,9 +159,9 @@ var TableTree = function TableTree(_ref) {
   return /*#__PURE__*/_jsx(CcsTable, _objectSpread(_objectSpread({
     onChange: handlePageChange,
     data: data,
-    tableRef: tableRef,
-    size: isInModalOrDrawer ? 'small' : 'middle'
+    tableRef: tableRef
   }, tableParams), {}, {
+    size: tableRowSize,
     columns: columns,
     showSorterTooltip: true,
     loading: tableParams.loading || data.loading || false

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ccs-ui/rc-pro",
-  "version": "1.1.25-beta-9",
-  "description": "验证码组件兼容暗黑模式;proTable封装rowselection代码;proTable添加传统布局模式;",
+  "version": "1.1.25-beta-11",
+  "description": "验证码组件兼容暗黑模式;proTable封装rowselection代码;proTable添加自适应布局模式;",
   "license": "MIT",
   "author": {
     "name": "Hong",