@ccs-ui/rc-pro 1.1.25-beta-3 → 1.1.25-beta-4

package/es/pro-table/table.js

@@ -13,89 +13,21 @@ 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 { useEventEmitter } from 'ahooks';
 import { Empty, Form, theme } from 'antd';
 import classNames from 'classnames';
-import _isArray from 'lodash/isArray';
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CcsUtils, CcsWaterMark } from '..';
 import { useCcsPage } from "../";
 import CcsTable from "../table";
+import { getAllChildrenId, getDataById, isComponent, onTableInModalOrDrawer, onTableInTabItem } from "./_utils";
 import "./index.less";
+import TableOperation from "./operation";
 import SearchComponent from "./search";
 import TableTree from "./tree";
+
+// 同 antd FormLayout; tradition为传统布局模式
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-// 判断组件所处dom
-var onTableInModalOrDrawer = function onTableInModalOrDrawer(node) {
-  var _parent$classList, _parent$classList2, _parent$classList3, _parent$classList4, _parent$classList5;
-  var parent = node.parentNode;
-  if (!parent) return false;
-  if (
-  // 通过指定dom吸顶
-  (_parent$classList = parent.classList) !== null && _parent$classList !== void 0 && _parent$classList.contains('ccs-trigger-container') || (_parent$classList2 = parent.classList) !== null && _parent$classList2 !== void 0 && _parent$classList2.contains('ccs-drawer-content') || (_parent$classList3 = parent.classList) !== null && _parent$classList3 !== void 0 && _parent$classList3.contains('ant-drawer-body')) {
-    return {
-      getContainer: function getContainer() {
-        return parent;
-      },
-      isInDialog: true
-    };
-  }
-
-  // 在弹出框中吸顶top
-  if ((_parent$classList4 = parent.classList) !== null && _parent$classList4 !== void 0 && _parent$classList4.contains('ant-modal') || (_parent$classList5 = parent.classList) !== null && _parent$classList5 !== void 0 && _parent$classList5.contains('ant-drawer')) {
-    return {
-      offsetHeader: 0,
-      isInDialog: true
-    };
-  }
-  return onTableInModalOrDrawer(parent);
-};
-var onTableInTabItem = function onTableInTabItem(node) {
-  var _parent$classList6;
-  var parent = node.parentNode;
-  if (!parent) return false;
-  if ( // 通过指定dom吸顶
-  (_parent$classList6 = parent.classList) !== null && _parent$classList6 !== void 0 && _parent$classList6.contains('ccs-table-item-scroll')) {
-    return {
-      getContainer: function getContainer() {
-        return node;
-      }
-    };
-  }
-
-  //  if (
-  //    // 通过指定dom吸顶
-  //    parent.classList?.contains('ccs-single-page')
-  //  ) {
-  //    return { getContainer: () => node };
-  //  }
-
-  return onTableInTabItem(parent);
-};
-
-// 根据ID查找树形节点
-var getDataById = function getDataById(data, rowKey, id) {
-  if (!_isArray(data)) return;
-  for (var i = 0; i < data.length; i += 1) {
-    if (data[i][rowKey] === id) {
-      return data[i];
-    }
-    if (data[i].children) {
-      var v = getDataById(data[i].children, rowKey, id);
-      if (v) return v;
-    }
-  }
-};
-var getAllChildrenId = function getAllChildrenId(data, rowKey) {
-  return data.reduce(function (keys, item) {
-    keys.push(item[rowKey]);
-    if (item.children && _isArray(item.children)) {
-      return keys.concat(getAllChildrenId(item.children, rowKey));
-    }
-    return keys;
-  }, []);
-};
 export var classPrefix = 'ccs-pl';
 
 /**
@@ -126,7 +58,6 @@ var InternalProTable = function InternalProTable(props) {
     formInitValues = _props$formInitValues === void 0 ? {} : _props$formInitValues,
     onSearchBefore = props.onSearchBefore,
     onSearchAfter = props.onSearchAfter;
-  var tableRef = useRef(null);
   var _useCcsPage = useCcsPage(),
     onAuth = _useCcsPage.onAuth;
   var _ref = table || {},
@@ -140,6 +71,10 @@ var InternalProTable = function InternalProTable(props) {
   var stickyRef = useRef(false);
   // column filter
   var filtersRef = useRef({});
+  // table content
+  var tableContentRef = useRef(null);
+  // table ref
+  var tableRef = useRef();
   // 查询form
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -154,10 +89,13 @@ var InternalProTable = function InternalProTable(props) {
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
     setData = _useState2[1];
-  var event$ = useEventEmitter();
   var treeRef = useRef(null);
   var _theme$useToken = theme.useToken(),
     token = _theme$useToken.token;
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectedRows = _useState4[0],
+    setSelectedRows = _useState4[1];
 
   // 权限判断
   var isAuth = useMemo(function () {
@@ -322,14 +260,14 @@ var InternalProTable = function InternalProTable(props) {
 
   useEffect(function () {
     // 判断是否在弹出框中
-    var inMd = onTableInModalOrDrawer(tableRef.current);
+    var inMd = onTableInModalOrDrawer(tableContentRef.current);
     if (inMd) {
       stickyRef.current = inMd;
       return;
     }
 
     // 判断在tab中
-    var inTab = onTableInTabItem(tableRef.current);
+    var inTab = onTableInTabItem(tableContentRef.current);
     if (inTab) {
       stickyRef.current = inTab;
       return;
@@ -380,6 +318,9 @@ var InternalProTable = function InternalProTable(props) {
   // form 数据 查询，重载，重置方法
   useImperativeHandle(proRef, function () {
     return {
+      data: data,
+      selectedRows: selectedRows,
+      formValues: form.getFieldsValue(),
       onSearch: function onSearch() {
         _onSearch();
       },
@@ -393,8 +334,9 @@ var InternalProTable = function InternalProTable(props) {
         _onReset();
       },
       onChangeData: setData,
-      formValues: form.getFieldsValue(),
-      data: data
+      onClearSelected: function onClearSelected() {
+        return setSelectedRows([]);
+      }
     };
   });
 
@@ -478,13 +420,38 @@ var InternalProTable = function InternalProTable(props) {
       }
     }
 
+    // selection
+    var rowSelection = table.rowSelection && CcsUtils.isEmpty(table.rowSelection) ? {
+      selectedRowKeys: selectedRows.map(function (k) {
+        return k[rowKey];
+      }),
+      onChange: function onChange(_, rows) {
+        return setSelectedRows(rows);
+      },
+      preserveSelectedRowKeys: true
+    } : table.rowSelection;
+
+    // table title
+    var tableTitle = table.title ? table.title({
+      selectedRows: selectedRows,
+      data: data.result || [],
+      onClear: function onClear() {
+        return setSelectedRows([]);
+      }
+    }) : undefined;
+
     // 异步树
     if (parentFieldName) {
       return /*#__PURE__*/_jsx(TableTree, {
         data: data,
-        table: table,
-        event$: event$,
+        table: _objectSpread(_objectSpread({}, table), {}, {
+          rowSelection: rowSelection,
+          title: tableTitle ? function () {
+            return tableTitle;
+          } : undefined
+        }),
         treeRef: treeRef,
+        tableRef: tableRef,
         sticky: stickyRef.current || true,
         parentFieldName: parentFieldName,
         setData: setData,
@@ -495,18 +462,32 @@ var InternalProTable = function InternalProTable(props) {
       });
     }
     return /*#__PURE__*/_jsx(CcsTable, _objectSpread(_objectSpread({
-      onChange: handlePageChange,
       data: data,
-      event$: event$,
+      tableRef: tableRef,
+      onChange: handlePageChange,
       size: isInModalOrDrawer ? 'small' : 'middle',
       sticky: stickyRef.current || true
     }, table), {}, {
       columns: columns,
       showSorterTooltip: true,
+      rowSelection: rowSelection,
+      showNumber: props.showNumber,
       loading: table.loading || data.loading || false,
-      showNumber: props.showNumber
+      title: tableTitle ? function () {
+        return tableTitle;
+      } : undefined
     }));
   };
+  var isAuthGroupToolbar = isComponent(toolbar, 'AuthGroup');
+  var isAuthGroupToolbarExtra = isComponent(toolbarExtra, 'AuthGroup');
+  var newToolbar = isAuthGroupToolbar ? /*#__PURE__*/React.cloneElement(toolbar, {
+    selectedRows: selectedRows
+  }) : toolbar;
+  var newToolbarExtra = isAuthGroupToolbarExtra ? /*#__PURE__*/React.cloneElement(toolbarExtra, {
+    selectedRows: selectedRows
+  }) : toolbarExtra;
+
+  // 暗黑模式
   var isDark = token._appTheme === 'dark';
   var render = /*#__PURE__*/_jsxs("div", {
     className: classNames(classPrefix, className, _defineProperty({}, 'dark-table', isDark)),
@@ -515,23 +496,25 @@ var InternalProTable = function InternalProTable(props) {
       form: form,
       title: title,
       titleBordered: table === null || table === void 0 ? void 0 : table.bordered,
-      toolbar: toolbar,
-      columns: columns,
+      toolbar: newToolbar,
       formItems: formItems,
       expandForm: expandForm,
       formInitValues: formInitValues,
-      isInModalOrDrawer: isInModalOrDrawer,
       formItemLabelWidth: props.formItemLabelWidth,
       formItemLayout: props.formItemLayout,
       formItemCol: props.formItemCol,
-      event$: event$,
       onSearch: _onSearch,
-      onReset: _onReset,
-      children: toolbarExtra
+      tableOperation: /*#__PURE__*/_jsx(TableOperation, {
+        isInModalOrDrawer: isInModalOrDrawer,
+        onReset: _onReset,
+        columns: columns,
+        tableRef: tableRef
+      }),
+      children: newToolbarExtra
     }), /*#__PURE__*/_jsxs("div", {
-      className: "".concat(classPrefix, "-table-content"),
+      className: "".concat(classPrefix, "-table-content ").concat(props.formItemLayout),
       style: tableStyle,
-      ref: tableRef,
+      ref: tableContentRef,
       children: [renderTable(), children]
     })]
   });

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

@@ -1,8 +1,8 @@
-import { EventEmitter } from 'ahooks/lib/useEventEmitter';
 import { TableSticky } from 'rc-table/lib/interface';
 import { RefObject } from 'react';
 import CCS from '..';
 import { HttpResult } from '../ccs';
+import { TableRefType } from '../table';
 import { CcsProTableProps, SearchEventType } from './table';
 export type TreeInstance<T> = {
     onRequestTree: (query: any, record: T | any) => void;
@@ -10,17 +10,15 @@ export type TreeInstance<T> = {
 };
 type TreeTableProps<T> = Pick<CcsProTableProps<T>, 'table' | 'onSearchBefore' | 'parentFieldName'> & {
     data: CCS.TableData<T>;
-    event$: EventEmitter<{
-        key: 'formFilter' | 'columnFilter' | 'columnFilter';
-    }>;
-    treeRef: RefObject<TreeInstance<T>>;
     isInModalOrDrawer: boolean;
     sticky: boolean | TableSticky;
+    treeRef: RefObject<TreeInstance<T>>;
+    tableRef: React.MutableRefObject<TableRefType | undefined>;
     setData: React.Dispatch<React.SetStateAction<CCS.TableData<T>>>;
     handlePageChange: any;
     onSearchAfter: (data: HttpResult<T[]>, eventType?: SearchEventType) => HttpResult<(T & {
         children: T[];
     })[]>;
 };
-declare const TableTree: <T extends object = any>({ data, table, event$, treeRef, sticky, 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, setData, onSearchAfter, onSearchBefore, parentFieldName, handlePageChange, isInModalOrDrawer, }: TreeTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableTree;

package/es/pro-table/tree.js

@@ -23,9 +23,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var TableTree = function TableTree(_ref) {
   var data = _ref.data,
     table = _ref.table,
-    event$ = _ref.event$,
-    treeRef = _ref.treeRef,
     sticky = _ref.sticky,
+    treeRef = _ref.treeRef,
+    tableRef = _ref.tableRef,
     setData = _ref.setData,
     onSearchAfter = _ref.onSearchAfter,
     onSearchBefore = _ref.onSearchBefore,
@@ -150,8 +150,6 @@ var TableTree = function TableTree(_ref) {
       }));
     }
   };
-
-  // 添加吸顶
   var tableParams = _objectSpread(_objectSpread({
     sticky: sticky
   }, table), {}, {
@@ -161,7 +159,7 @@ var TableTree = function TableTree(_ref) {
   return /*#__PURE__*/_jsx(CcsTable, _objectSpread(_objectSpread({
     onChange: handlePageChange,
     data: data,
-    event$: event$,
+    tableRef: tableRef,
     size: isInModalOrDrawer ? 'small' : 'middle'
   }, tableParams), {}, {
     columns: columns,

package/es/table/index.d.ts

@@ -1,5 +1,13 @@
+/// <reference types="react" />
 import { CcsProTableProps, CcsTableProps } from '../pro-table/table';
 import './index.less';
-type TableProps<T> = Omit<CcsTableProps<T>, 'request' | 'requestParam'> & Pick<CcsProTableProps<T>, 'showNumber'>;
+type TableProps<T> = Omit<CcsTableProps<T>, 'request' | 'requestParam' | 'title'> & Pick<CcsProTableProps<T>, 'showNumber'> & {
+    title?: any;
+    tableRef?: React.MutableRefObject<TableRefType | undefined>;
+};
+export type TableRefType = {
+    onColumnFilter: (e: any) => void;
+    onFullScreen: () => void;
+};
 declare const CustomTable: <T extends object = any>(props: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default CustomTable;

package/es/table/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 = ["onResize", "width"],
-  _excluded2 = ["data", "style", "scroll", "event$", "rowKey", "columns", "pagination", "rowSelection", "className"];
+  _excluded2 = ["data", "style", "scroll", "rowKey", "columns", "tableRef", "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,7 +11,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import { useDebounceFn, useEventListener, useUpdate, useUpdateEffect } from 'ahooks';
 import { Table, Tooltip, theme } from 'antd';
 import classNames from 'classnames';
-import { useRef } from 'react';
+import { useImperativeHandle, useRef } from 'react';
 import { Resizable } from 'react-resizable';
 import CcsResult from "../result";
 import "./index.less";
@@ -50,9 +50,9 @@ var CustomTable = function CustomTable(props) {
   var data = props.data,
     style = props.style,
     scroll = props.scroll,
-    event$ = props.event$,
     rowKey = props.rowKey,
     columns = props.columns,
+    tableRef = props.tableRef,
     pagination = props.pagination,
     rowSelection = props.rowSelection,
     _props$className = props.className,
@@ -71,29 +71,30 @@ var CustomTable = function CustomTable(props) {
   // table 固定表头，内容滚动
   var _useDebounceFn = useDebounceFn(function () {
       if ((scroll === null || scroll === void 0 ? void 0 : scroll.y) === 'auto') {
-        var _ref$current, _ref$current2, _ref$current3, _ref$current4;
-        var _ref2 = (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect()) || {
+        var _ref$current, _ref$current2;
+        var tableBody = ref.current.getElementsByClassName('ant-table-body')[0];
+        if (!tableBody) return;
+        var _ref2 = tableBody.getBoundingClientRect() || {
             top: 0
           },
           top = _ref2.top;
         var bodyHeight = document.body.clientHeight;
-        var theadHeight = 0;
-        var pageHeight = 0;
-        var thead = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getElementsByClassName('ant-table-thead');
-        if (thead && thead.length > 0) {
-          theadHeight = thead[0].clientHeight;
-        }
-        var _pagination = (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.getElementsByClassName('ant-pagination');
+        var pageHeight = 0,
+          footerHeight = 0;
+        var _pagination = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getElementsByClassName('ant-pagination');
         if (_pagination && _pagination.length > 0) {
           pageHeight = _pagination[0].clientHeight;
         }
-        var scrollHeight = bodyHeight - top - 16 - theadHeight - pageHeight - (restProps.title ? 46 : 0) - (restProps.footer ? 46 : 0);
+        var footer = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getElementsByClassName('ant-table-footer');
+        if (footer && footer.length > 0) {
+          footerHeight = footer[0].clientHeight;
+        }
+
+        // 计算table数据区高度
+        var scrollHeight = bodyHeight - top - pageHeight - footerHeight - 16;
 
         // 固定tbody高度
-        var tbody = (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.getElementsByClassName('ant-table-body');
-        if (tbody && tbody.length > 0 && tbody[0].style) {
-          tbody[0].style.height = "".concat(scrollHeight, "px");
-        }
+        tableBody.style.height = "".concat(scrollHeight, "px");
       }
     }, {
       wait: 500,
@@ -110,16 +111,16 @@ var CustomTable = function CustomTable(props) {
   });
 
   // 监听列筛选事件
-  event$ === null || event$ === void 0 ? void 0 : event$.useSubscription(function (e) {
-    if (e.key === 'columnFilter') {
-      columns === null || columns === void 0 ? void 0 : columns.forEach(function (c) {
-        c.hidden = e.columnHiddenKeys.includes(c.dataIndex);
-      });
-      update();
-    }
-    if (e.key === 'fullScreen') {
-      onFixedThead();
-    }
+  useImperativeHandle(tableRef, function () {
+    return {
+      onColumnFilter: function onColumnFilter(e) {
+        columns === null || columns === void 0 ? void 0 : columns.forEach(function (c) {
+          c.hidden = e.columnHiddenKeys.includes(c.dataIndex);
+        });
+        update();
+      },
+      onFullScreen: onFixedThead
+    };
   });
 
   // 改变列宽

package/package.json

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