@ccs-ui/rc-pro 2.3.5 → 2.3.6-alpha-2

package/es/pro-table/head.js

@@ -6,9 +6,9 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import { useUpdateEffect } from 'ahooks';
-import { Button, Card, Form, theme } from 'antd';
+import { Button, Form, theme } from 'antd';
 import _debounce from 'lodash.debounce';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CcsResizeObserver } from '..';
 import { getShowDpends } from "./_utils";
 import HeadFormItem from "./form-item";
@@ -17,10 +17,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 /** 操作按钮、查询，重置、列筛选、 */
 function HeadComponent(_ref) {
-  var form = _ref.form,
-    title = _ref.title,
-    toolbar = _ref.toolbar,
-    children = _ref.children,
+  var toolbar = _ref.toolbar,
     _ref$expandForm = _ref.expandForm,
     expandForm = _ref$expandForm === void 0 ? false : _ref$expandForm,
     _ref$formItems = _ref.formItems,
@@ -28,20 +25,29 @@ function HeadComponent(_ref) {
     formInitValues = _ref.formInitValues,
     formItemLabelWidth = _ref.formItemLabelWidth,
     tableOperation = _ref.tableOperation,
+    formRef = _ref.formRef,
     onSearch = _ref.onSearch;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
   var formItemsRef = useRef(null);
+  // 根据位置判断是否换行ref
+  var endItemRef = useRef(null);
   // 查询条件是否展开
   var _useState = useState(expandForm),
     _useState2 = _slicedToArray(_useState, 2),
     isExpand = _useState2[0],
     setIsExpand = _useState2[1];
-  var _useState3 = useState('hidden'),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    visible = _useState4[0],
-    setVisible = _useState4[1];
+    hasMore = _useState4[0],
+    onToggle = _useState4[1];
   useUpdateEffect(function () {
     setIsExpand(expandForm);
   }, [expandForm]);
+  useImperativeHandle(formRef, function () {
+    return form;
+  });
 
   // 处理form item 依赖
   var allFormItems = useMemo(function () {
@@ -54,33 +60,26 @@ function HeadComponent(_ref) {
     return formItems;
   }, [formItems]);
 
-  // 查询条件记录数
-  var itemLen = allFormItems.length;
-  var hasItem = itemLen > 0;
-
-  // 尺寸变化重设尺寸
-  var resizeFn = _debounce(function (hm) {
-    setVisible(hm);
-  }, 500);
+  // 判断是否有更多条件无法一行显示
+  var onEventMore = function onEventMore() {
+    var _endItemRef$current, _formItemsRef$current;
+    if (!endItemRef.current || !formItemsRef.current || isExpand) return;
+    var hasMore = ((_endItemRef$current = endItemRef.current) === null || _endItemRef$current === void 0 || (_endItemRef$current = _endItemRef$current.getClientRects()[0]) === null || _endItemRef$current === void 0 ? void 0 : _endItemRef$current.top) !== ((_formItemsRef$current = formItemsRef.current) === null || _formItemsRef$current === void 0 || (_formItemsRef$current = _formItemsRef$current.getClientRects()[0]) === null || _formItemsRef$current === void 0 ? void 0 : _formItemsRef$current.top);
+    onToggle(hasMore);
+  };
 
   // 监听dom尺寸变化
-  var onResize = function onResize() {
-    var _formItemsRef$current;
-    if (visible === 'hidden') return;
-    var scrollHeight = ((_formItemsRef$current = formItemsRef.current) === null || _formItemsRef$current === void 0 ? void 0 : _formItemsRef$current.scrollHeight) || 0;
-    if (scrollHeight === 0) return;
-    var hm = scrollHeight > 40 ? 'more' : 'visible';
-    resizeFn(hm);
+  var resizeFn = function resizeFn(e) {
+    if (e.width === 0) return;
+    onEventMore();
   };
+
+  // 监听容器尺寸变化
+  var onResize = _debounce(resizeFn, 500);
   useEffect(function () {
-    var _formItemsRef$current2;
-    var scrollHeight = ((_formItemsRef$current2 = formItemsRef.current) === null || _formItemsRef$current2 === void 0 ? void 0 : _formItemsRef$current2.scrollHeight) || 0;
-    setVisible(scrollHeight > 40 ? 'more' : 'visible');
+    onEventMore();
   }, []);
 
-  // 是否有更多
-  var hasMore = itemLen > 1 && visible === 'more';
-
   // 操作按钮
   var renderSearchBtn = /*#__PURE__*/_jsxs("div", {
     style: {
@@ -102,9 +101,6 @@ function HeadComponent(_ref) {
       onClick: function onClick() {
         return form.submit();
       },
-      style: {
-        marginLeft: !hasMore ? 10 : undefined
-      },
       children: "\u67E5\u8BE2"
     }), toolbar ? null : tableOperation]
   });
@@ -170,77 +166,35 @@ function HeadComponent(_ref) {
   // 获取Input的高度
   var token = theme.useToken().token;
   var controlHeight = token.rootValue ? "".concat((token.controlHeight / token.rootValue).toFixed(3), "rem") : token.controlHeight;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [hasItem && /*#__PURE__*/_jsxs(_Fragment, {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: allFormItems.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(CcsResizeObserver.Target, {
         targetRef: formItemsRef,
         onResize: onResize
-      }), /*#__PURE__*/_jsx(Card, {
-        className: "ccs-pl-adaptation",
-        style: {
-          boxShadow: 'none',
-          visibility: visible === 'hidden' ? 'hidden' : 'visible'
-        },
-        styles: {
-          body: {
-            padding: 16
-          }
-        },
-        bordered: false,
-        title: title,
-        children: /*#__PURE__*/_jsxs(Form, {
-          initialValues: formInitValues,
-          form: form,
-          onFinish: onSearch,
-          layout: "inline",
-          style: formStyles,
-          children: [/*#__PURE__*/_jsxs("div", {
-            style: {
-              justifyContent: isExpand && hasMore ? 'flex-start' : 'flex-end',
-              height: isExpand ? 'auto' : controlHeight
-            },
-            className: "ccs-pl-adaptation-form",
-            ref: formItemsRef,
-            children: [renderFormItems(), isExpand && renderSearchBtn]
-          }), !isExpand && /*#__PURE__*/_jsx("div", {
-            style: {
-              flex: '0 0 auto'
-            },
-            children: renderSearchBtn
-          })]
-        })
-      })]
-    }), toolbar && /*#__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,
-        borderBottom: 0,
-        borderRight: 0
-      },
-      children: [/*#__PURE__*/_jsx("div", {
-        style: {
-          flex: '1 1 auto'
-        },
-        children: toolbar
-      }), /*#__PURE__*/_jsx("div", {
-        style: {
-          flex: '0 0 auto'
-        },
-        children: tableOperation
+      }), /*#__PURE__*/_jsxs(Form, {
+        initialValues: formInitValues,
+        form: form,
+        onFinish: onSearch,
+        layout: "inline",
+        style: formStyles,
+        children: [/*#__PURE__*/_jsxs("div", {
+          style: {
+            justifyContent: isExpand && hasMore ? 'flex-start' : 'flex-end',
+            height: isExpand ? 'auto' : controlHeight
+          },
+          className: "ccs-pl-adaptation-form",
+          ref: formItemsRef,
+          children: [renderFormItems(), /*#__PURE__*/_jsx("div", {
+            ref: endItemRef
+          }), isExpand && renderSearchBtn]
+        }), !isExpand && /*#__PURE__*/_jsx("div", {
+          style: {
+            flex: '0 0 auto'
+          },
+          children: renderSearchBtn
+        })]
       })]
-    }), children]
+    })
   });
 }
 export default HeadComponent;

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

@@ -1,14 +1,11 @@
 import './index.less';
-import { CcsProTableProps, SearchEventType } from './table';
-type TableProps<T> = Omit<CcsProTableProps<T>, 'onSearchAfter' | 'parentFieldName'> & {
-    /** 请求后格式化结果 */
-    onSearchAfter?: (data: any, eventType?: SearchEventType) => any;
-};
-type TableTreeProps<T> = Omit<CcsProTableProps<T>, 'onSearchAfter'> & {
+import SelectionAlert from './selection-alert';
+import TableSummary from './summary';
+import { CcsProTableProps } from './table';
+type TableProps<T> = Omit<CcsProTableProps<T>, 'parentFieldName'>;
+type TableTreeProps<T> = CcsProTableProps<T> & {
     /** 父级值字段 */
     parentFieldName: string;
-    /** 请求后格式化结果 */
-    onSearchAfter?: (data: any, eventType?: SearchEventType) => any;
 };
 /**
  * 查询表格组件
@@ -19,5 +16,8 @@ type TableTreeProps<T> = Omit<CcsProTableProps<T>, 'onSearchAfter'> & {
 declare const ProTable: {
     <T extends object = any>(props: TableProps<T>): import("react/jsx-runtime").JSX.Element;
     Tree: <T_1 extends object = any>(props: TableTreeProps<T_1>) => import("react/jsx-runtime").JSX.Element;
+    SelectionAlert: typeof SelectionAlert;
+    Summary: typeof TableSummary;
+    displayName: string;
 };
 export default ProTable;

package/es/pro-table/index.js

@@ -5,6 +5,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import "./index.less";
+import SelectionAlert from "./selection-alert";
+import TableSummary from "./summary";
 import InternalProTable from "./table";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -24,9 +26,12 @@ var ProTable = function ProTable(props) {
  * @returns
  */
 var ProTableTree = function ProTableTree(props) {
-  return /*#__PURE__*/_jsx(InternalProTable, _objectSpread(_objectSpread({}, props), {}, {
-    onSearchAfter: props.onSearchAfter
-  }));
+  return /*#__PURE__*/_jsx(InternalProTable, _objectSpread({}, props));
 };
 ProTable.Tree = ProTableTree;
+ProTable.SelectionAlert = SelectionAlert;
+ProTable.Summary = TableSummary;
+if (process.env.NODE_ENV !== 'production') {
+  ProTable.displayName = 'CcsProTable';
+}
 export default ProTable;

package/es/pro-table/index.less

@@ -49,6 +49,10 @@
   &-table-content {
     position: relative;
     flex: auto;
+
+    .ant-table-title {
+      padding: 0 !important;
+    }
   }
 
   &-adaptation {
@@ -61,13 +65,14 @@
   &-adaptation-form {
     flex: 1 1 auto;
     display: flex;
+    justify-content: flex-end;
     flex-wrap: wrap;
     gap: 16px 10px;
     overflow: hidden;
 
-    // &::-webkit-scrollbar {
-    //   display: none;
-    // }
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   .ant-form-item {

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

@@ -0,0 +1,18 @@
+import { TagProps } from 'antd';
+import React from 'react';
+interface PropsType {
+    data: any[];
+    color?: TagProps['color'];
+    fieldNames: {
+        key: string;
+        label: string;
+    };
+    onClear: (key?: React.Key) => void;
+}
+/**
+ * 显示table行选中项
+ * @param PropsType
+ * @returns
+ */
+export default function SelectionAlert({ data, color, fieldNames, onClear, }: PropsType): import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/es/pro-table/selection-alert.js

@@ -0,0 +1,52 @@
+import { DeleteOutlined } from '@ant-design/icons';
+import { Button, Space, Tag } from 'antd';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 显示table行选中项
+ * @param PropsType
+ * @returns
+ */
+export default function SelectionAlert(_ref) {
+  var data = _ref.data,
+    color = _ref.color,
+    _ref$fieldNames = _ref.fieldNames,
+    fieldNames = _ref$fieldNames === void 0 ? {
+      key: 'key',
+      label: 'label'
+    } : _ref$fieldNames,
+    onClear = _ref.onClear;
+  if (!data || data.length === 0) {
+    return undefined;
+  }
+  return /*#__PURE__*/_jsxs(Space, {
+    size: 4,
+    style: {
+      padding: '6px 12px'
+    },
+    wrap: true,
+    children: [data.map(function () {
+      var row = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return /*#__PURE__*/_jsx(Tag, {
+        color: color,
+        closable: true,
+        onClose: function onClose(e) {
+          onClear(row[fieldNames.key]);
+          e.preventDefault();
+        },
+        children: row[fieldNames.label || 'name']
+      }, row[fieldNames.key || 'key']);
+    }), data.length > 1 && /*#__PURE__*/_jsx(Button, {
+      size: "small",
+      onClick: function onClick(e) {
+        onClear();
+        e.preventDefault();
+      },
+      icon: /*#__PURE__*/_jsx(DeleteOutlined, {}),
+      danger: true,
+      type: "text",
+      children: "\u6E05\u7A7A"
+    })]
+  });
+}

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

@@ -0,0 +1,8 @@
+import CCS from '..';
+interface PropsType {
+    data: Record<string, any>;
+    columns: CCS.TableColumns;
+    hasRowSelection: boolean;
+}
+export default function TableSummary({ data, columns, hasRowSelection, }: PropsType): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/pro-table/summary.js

@@ -0,0 +1,32 @@
+import { Table } from 'antd';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SummaryIndex = -1;
+export default function TableSummary(_ref) {
+  var _ref$data = _ref.data,
+    data = _ref$data === void 0 ? {} : _ref$data,
+    columns = _ref.columns,
+    hasRowSelection = _ref.hasRowSelection;
+  SummaryIndex = -1;
+  var renderCell = function renderCell(cs) {
+    return cs.map(function (d) {
+      if (d.children && d.children.length > 0) {
+        return renderCell(d.children);
+      }
+      SummaryIndex += 1;
+      return /*#__PURE__*/_jsx(Table.Summary.Cell, {
+        index: 0,
+        children: data[d.dataIndex]
+      }, SummaryIndex);
+    });
+  };
+  if (hasRowSelection) SummaryIndex += 1;
+  return /*#__PURE__*/_jsx(Table.Summary, {
+    fixed: true,
+    children: /*#__PURE__*/_jsxs(Table.Summary.Row, {
+      children: [hasRowSelection && /*#__PURE__*/_jsx(Table.Summary.Cell, {
+        index: SummaryIndex
+      }), renderCell(columns)]
+    })
+  });
+}

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

@@ -1,36 +1,52 @@
 import { TableProps } from 'antd';
 import { ColumnGroupType, ColumnType } from 'antd/es/table';
 import { TableSticky } from 'rc-table/lib/interface';
-import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import CCS from '..';
 import { PropsWithCss, PropsWithNodeChildren, TableColumns } from '../ccs';
 import { CcsFieldNamesType } from '../context';
+import { EllipsisProps } from '../ellipsis';
 import './index.less';
 type ParamType = Record<string, any>;
 export type ShowDependType = {
     name: string;
     value: any;
 };
-export type SearchEventType = 'search' | 'reset' | 'reload' | 'changePage' | 'initSearch';
-type SearchBeforeType = ParamType & {
-    query: ParamType;
-};
+export declare enum TableEvent {
+    Search = "search",
+    Reset = "reset",
+    Reload = "reload",
+    ChangePage = "changePage",
+    InitSearch = "initSearch",
+    FullScreen = "fullScreen",
+    ColumnFilter = "columnFilter",
+    SelectedRows = "SelectedRows"
+}
 export type TableColumn<RecordType = any> = (Omit<ColumnGroupType<RecordType>, 'ellipsis'> | Omit<ColumnType<RecordType>, 'ellipsis'>) & {
+    dataIndex?: keyof RecordType;
     /** 隐藏列 */
     hidden?: boolean;
     /** 省略显示行数,最大支持10行 */
-    ellipsis?: boolean | number;
+    ellipsis?: Omit<EllipsisProps, 'content'> | boolean | number;
 };
 type TableTitleType<T> = {
-    selectedRows: T[];
+    /** 选中Key */
+    selectedRowKeys?: React.Key[];
+    /** 选中记录 */
+    selectedRows?: T[];
+    /** table datasource */
     data: T[];
-    onClear: () => void;
+    /** 清空选择,传入key取消指定选中，否清空所有 */
+    onClear: (key?: React.Key) => void;
 };
-export type CcsTableProps<T> = Omit<TableProps<T>, 'columns' | 'title'> & {
+export type TableExtraNode<T> = ReactNode | (({ selectedRowKeys, selectedRows, data, onClear, }: TableTitleType<T>) => ReactNode);
+export type CcsTableProps<T> = Omit<TableProps<T>, 'columns' | 'title' | 'summary'> & {
     data?: CCS.TableData<T>;
+    /** 为空时,默认一条数据 */
+    emptyDefaultOne?: boolean;
     /** request 方法 */
     request?: (params: any) => Promise<any>;
-    /** request 额外参数 dataSource: ['data', 'result']; current: ['data', 'pageNo']; pageSize: ['data', 'pageSize']; total: ['data', 'totalNum'] */
+    /** request 额外参数  */
     requestParam?: ParamType;
     /** 接口字段指定,默认： */
     fieldNames?: CcsFieldNamesType;
@@ -43,9 +59,12 @@ export type CcsTableProps<T> = Omit<TableProps<T>, 'columns' | 'title'> & {
     /** 列配置 */
     columns?: TableColumns<T>;
     /** table title  */
-    title?: ({ selectedRows, data, onClear }: TableTitleType<T>) => ReactNode;
+    title?: TableExtraNode<T>;
+    /** table summary */
+    summary?: (data: readonly T[], columns: TableColumn<T>[]) => React.ReactNode;
 };
-export type CcsProTableProps<RecordType> = Pick<PropsWithCss, 'className'> & PropsWithNodeChildren & {
+export type TableEventHandle = (eventName: TableEvent, options?: any) => void;
+export type CcsProTableProps<RecordType = any> = Pick<PropsWithCss, 'className'> & PropsWithNodeChildren & {
     /** api权限标识 */
     auth?: string | 'ignore';
     /** 是否初始查询，默认true */
@@ -59,9 +78,9 @@ export type CcsProTableProps<RecordType> = Pick<PropsWithCss, 'className'> & Pro
     /** 查询form 初始值 */
     formInitValues?: ParamType;
     /** 按钮 操作部分 */
-    toolbar?: ReactElement;
-    /** 操作按钮扩展 */
-    toolbarExtra?: ReactElement;
+    toolbar?: TableExtraNode<RecordType>;
+    /** 边框 */
+    bordered?: boolean;
     /** 展开查询条件，默认false */
     expandForm?: boolean;
     /** table 数据区域 */
@@ -79,30 +98,18 @@ export type CcsProTableProps<RecordType> = Pick<PropsWithCss, 'className'> & Pro
     proRef?: CCS.TableInstanceRef<RecordType>;
     /** 显示序号 */
     showNumber?: boolean;
-    /** 执行search 后回调函数 */
-    searchEvent?: () => void;
-    /** 请求前格式化参数 */
-    onSearchBefore?: (params: SearchBeforeType, eventType?: SearchEventType) => SearchBeforeType;
-    /** 请求后格式化结果 */
-    onSearchAfter?: (result: any, eventType?: SearchEventType) => any;
-};
-export type TableEventType = {
-    key: 'columnFilter' | 'fullScreen';
-    columnHiddenKeys?: any;
-    full?: any;
+    /** table 事件 */
+    onEvent?: TableEventHandle;
 };
 export type TableStickyProps = boolean | (TableSticky & {
     isInDialog?: boolean;
 });
 export declare const classPrefix = "ccs-pl";
-export declare const TableSelectionContext: React.Context<{
-    selectedRows?: any[] | undefined;
-}>;
 /**
  * 布局组件 包括form、查询、toolbar、table 自动初始化数据
  * @param CcsProTableType
  * @param ref
  * @returns
  */
-declare const InternalProTable: <RecordType extends object = any>(props: CcsProTableProps<RecordType>) => import("react/jsx-runtime").JSX.Element;
+declare const InternalProTable: <RecordType_1 extends object = any>(props: CcsProTableProps<RecordType_1>) => import("react/jsx-runtime").JSX.Element;
 export default InternalProTable;