@cqsjjb/jjb-react-admin-component 3.0.12 → 3.0.14

package/Table/index.d.ts

@@ -6,6 +6,10 @@ import type { TableProps } from 'antd';
 interface OverTableProps extends TableProps {
   // 是否禁用内容区滚动，默认true
   disabledResizer?: boolean;
+  // 当一个路由下存在多个表格的情况下
+  // 需要给每一个表格设置一个唯一存储索引
+  // 若没有设置则使用默认索引，请注意缓存数据会被覆盖
+  storeIndex?: string;
 }
 
 interface TableFc extends React.FC<OverTableProps> {

package/Table/index.js

@@ -6,9 +6,12 @@ import { getElementAbsRect, antPrefix, className, setTableSize, getTableSize, ge
 import './index.less';
 require('use-antd-resizable-header/dist/style.css');
 export default function TablePro(props) {
-  const [size, setSize] = React.useState(getTableSize() || 'default');
+  const {
+    storeIndex
+  } = props;
+  const [size, setSize] = React.useState(getTableSize(storeIndex) || 'default');
   const [tableHeight, setTableHeight] = React.useState(0);
-  const persistenceKey = getPersistenceKey();
+  const persistenceKey = getPersistenceKey(storeIndex);
   React.useEffect(() => {
     let observer;
     const table = document.querySelector(className('pro-table'));
@@ -21,7 +24,7 @@ export default function TablePro(props) {
           const tBodyNativeRect = tBody.getBoundingClientRect();
           const tFooterAbsRect = getElementAbsRect(tFooter);
           const tPaginationAbsRect = getElementAbsRect(tPagination);
-          const gap = 24;
+          const gap = 38;
           const height = window.innerHeight - (gap + tBodyNativeRect.y + tFooterAbsRect.absHeight + tPaginationAbsRect.absHeight);
           setTableHeight(height);
         }, 100);
@@ -36,7 +39,7 @@ export default function TablePro(props) {
     };
   }, []);
   React.useEffect(() => {
-    setTableSize(size);
+    setTableSize(size, storeIndex);
   }, [size]);
   const {
     components,

package/Table/index.mjs

@@ -10,10 +10,11 @@ import './index.less';
 require('use-antd-resizable-header/dist/style.css');
 
 export default function TablePro(props) {
-  const [ size, setSize ] = React.useState(getTableSize() || 'default');
+  const { storeIndex } = props;
+  const [ size, setSize ] = React.useState(getTableSize(storeIndex) || 'default');
   const [ tableHeight, setTableHeight ] = React.useState(0);
 
-  const persistenceKey = getPersistenceKey();
+  const persistenceKey = getPersistenceKey(storeIndex);
 
   React.useEffect(() => {
     let observer;
@@ -31,7 +32,7 @@ export default function TablePro(props) {
           const tFooterAbsRect = getElementAbsRect(tFooter);
           const tPaginationAbsRect = getElementAbsRect(tPagination);
 
-          const gap = 24;
+          const gap = 38;
 
           const height = window.innerHeight - (
             gap +
@@ -54,7 +55,7 @@ export default function TablePro(props) {
     };
   }, []);
   React.useEffect(() => {
-    setTableSize(size);
+    setTableSize(size, storeIndex);
   }, [ size ]);
 
   const {

package/Table/utils.js

@@ -80,20 +80,22 @@ export function className(name) {
   return `.${antPrefix}-${name}`;
 }
 
-export function getPersistenceKey() {
+export function getPersistenceKey(index) {
   const basename = process.env?.app?.basename;
   const pathname = decodeURIComponent(window.location.pathname);
+  const insertIndex = tools.isUndefined(index) ? '' : `#{${index}}`;
+  
   return {
-    size: `${basename}#${pathname}#size`,
-    resizable: `${basename}#${pathname}#resizable`,
-    columnState: `${basename}#${pathname}#columnState`
+    size: `${basename}#${pathname}${insertIndex}#size`,
+    resizable: `${basename}#${pathname}${insertIndex}#resizable`,
+    columnState: `${basename}#${pathname}${insertIndex}#columnState`
   };
 }
 
-export function getTableSize() {
-  return window.localStorage.getItem(getPersistenceKey().size);
+export function getTableSize(index) {
+  return window.localStorage.getItem(getPersistenceKey(index).size);
 }
 
-export function setTableSize(value) {
-  return window.localStorage.setItem(getPersistenceKey().size, value);
+export function setTableSize(value, index) {
+  return window.localStorage.setItem(getPersistenceKey(index).size, value);
 }

package/TableAction/index.d.ts

@@ -0,0 +1,16 @@
+// @ts-ignore
+import * as React from 'react';
+import { ComponentProps } from '../types';
+
+interface TableActionProps extends ComponentProps {
+  // 每行最多显示多少个操作项，默认3
+  maximum?: number;
+  // 每个操作项之间的间距，默认8
+  space?: number;
+}
+
+interface TableActionFc extends React.FC<TableActionProps> {
+}
+
+declare const TableAction: TableActionFc;
+export default TableAction;

package/TableAction/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { tools } from '@cqsjjb/jjb-common-lib';
+import { MoreOutlined } from '@ant-design/icons';
+import { Dropdown, Space } from 'antd';
+export default function TableAction(props) {
+  const maximum = props.maximum || 3;
+  const children = tools.isArray(props.children) ? props.children : [].concat(props.children);
+  const showArray = children.slice(0, maximum);
+  const hideArray = children.slice(maximum);
+  return /*#__PURE__*/React.createElement(Space, {
+    size: props.space
+  }, showArray, hideArray.length !== 0 && /*#__PURE__*/React.createElement(Dropdown, {
+    menu: {
+      items: hideArray.map((record, index) => {
+        return {
+          key: index,
+          label: record
+        };
+      })
+    }
+  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(MoreOutlined, null))));
+}

package/TableAction/index.mjs

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { tools } from '@cqsjjb/jjb-common-lib';
+import { MoreOutlined } from '@ant-design/icons';
+import { Dropdown, Space } from 'antd';
+
+export default function TableAction(props) {
+  const maximum = props.maximum || 3;
+  const children = (tools.isArray(props.children)
+    ? props.children
+    : [].concat(props.children));
+  const showArray = children.slice(0, maximum);
+  const hideArray = children.slice(maximum);
+
+  return (
+    <Space size={props.space}>
+      {showArray}
+      {hideArray.length !== 0 && (
+        <Dropdown
+          menu={{
+            items: hideArray.map((record, index) => {
+              return {
+                key: index,
+                label: record
+              };
+            })
+          }}
+        >
+          <a>
+            <MoreOutlined />
+          </a>
+        </Dropdown>
+      )}
+    </Space>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cqsjjb/jjb-react-admin-component",
-  "version": "3.0.12",
+  "version": "3.0.14",
   "description": "jjb-react-admin-组件库@new",
   "main": "index.js",
   "author": "jjb-front-team",