@hw-component/table 1.1.6 → 1.1.8

package/lib/HTableBody/index.js

@@ -25,7 +25,8 @@ var AlertMsg = require('./AlertMsg.js');
 var index = require('./Options/index.js');
 var index$2 = require('./HeaderTitle/index.js');
 
-var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size", "optionsRender", "paginationActionRender", "localSorter"];
+var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size", "optionsRender", "paginationActionRender", "localSorter", "columnsState"],
+  _excluded2 = ["value", "onChange", "reset"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultRender = function defaultRender() {
@@ -61,6 +62,7 @@ var Body = (function (_ref) {
     optionsRender = _ref.optionsRender,
     paginationActionRender = _ref.paginationActionRender,
     localSorter = _ref.localSorter,
+    columnsState = _ref.columnsState,
     props = _objectWithoutProperties(_ref, _excluded);
   var _ref2 = rowSelection || {},
     selectedRowKeys = _ref2.selectedRowKeys,
@@ -93,8 +95,15 @@ var Body = (function (_ref) {
       table: tableInstance,
       rowSelection: rowSelection
     }),
-    cols = _useCols.cols,
-    changeCols = _useCols.changeCols;
+    cols = _useCols.cols;
+  var _useColumnsStateType = hooks.useColumnsStateType({
+      columnsState: columnsState,
+      columns: cols
+    }),
+    value = _useColumnsStateType.value,
+    onChange = _useColumnsStateType.onChange,
+    reset = _useColumnsStateType.reset,
+    selfColStatus = _objectWithoutProperties(_useColumnsStateType, _excluded2);
   hooks.useSynchronousKeys({
     selectedRowKeys: selectedRowKeys,
     records: records,
@@ -108,7 +117,9 @@ var Body = (function (_ref) {
     size: cuSize,
     columns: cols,
     setSizeChange: setCuSize,
-    onChange: changeCols
+    colStatusValue: value || {},
+    onChange: onChange,
+    reset: reset
   }));
   var _selectedRowData$keys = _keysInstanceProperty(selectedRowData),
     keys = _selectedRowData$keys === void 0 ? [] : _selectedRowData$keys,
@@ -139,6 +150,9 @@ var Body = (function (_ref) {
         return tableEmptyRender === null || tableEmptyRender === void 0 ? void 0 : tableEmptyRender(tableInstance);
       },
       children: [jsxRuntime.jsx(ProTable, _objectSpread(_objectSpread({}, props), {}, {
+        columnsState: _objectSpread(_objectSpread({}, selfColStatus), {}, {
+          value: value
+        }),
         columns: cols,
         size: cuSize,
         search: false,
@@ -156,10 +170,10 @@ var Body = (function (_ref) {
             asc: asc
           });
         },
-        options: false,
         tableStyle: {
           paddingBottom: 0
         },
+        options: false,
         rowSelection: false,
         loading: loading,
         rowKey: rowKey,

package/lib/HTableBody/utils.d.ts

@@ -0,0 +1,7 @@
+import { ColumnsStateType } from "@ant-design/pro-table/es/typing";
+import { ConfigDataModal } from "@/components/modal";
+export declare const mkChangeValue: (columnsState?: ColumnsStateType) => any;
+export declare const outColSetting: (columns: ConfigDataModal, columnsState?: ColumnsStateType) => {
+    checkCols: ConfigDataModal;
+    keys: string[];
+};

package/lib/HTableBody/utils.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
+var _typeof = require('@babel/runtime-corejs3/helpers/typeof');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/for-each');
+var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/keys');
+require('core-js/modules/es.object.keys.js');
+require('core-js/modules/es.object.to-string.js');
+require('core-js/modules/es.regexp.to-string.js');
+var utils = require('./Options/utils.js');
+
+var strToJson = function strToJson(str) {
+  if (!str) {
+    return {};
+  }
+  try {
+    var result = JSON.parse(str);
+    if (_typeof(result) === "object") {
+      return result;
+    }
+    return {};
+  } catch (e) {
+    return {};
+  }
+};
+var mkChangeValue = function mkChangeValue(columnsState) {
+  var _ref = columnsState || {},
+    persistenceType = _ref.persistenceType,
+    persistenceKey = _ref.persistenceKey,
+    value = _ref.value;
+    _ref.defaultValue;
+    _ref.onChange;
+  if (value) {
+    return value;
+  }
+  if (!persistenceKey) {
+    return {};
+  }
+  var cuPersistenceType = persistenceType || "localStorage";
+  var saveValStr = window[cuPersistenceType].getItem(persistenceKey);
+  return strToJson(saveValStr);
+};
+var childDataIndexProvider = function childDataIndexProvider(data, title) {
+  var keys = [];
+  var cols = [];
+  _forEachInstanceProperty(data).call(data, function (value) {
+    if (typeof value === "string") {
+      keys.push(value);
+      cols.push(utils.getItemValue({
+        title: title,
+        dataIndex: value
+      }));
+      return;
+    }
+    keys.push(value.dataIndex);
+    cols.push(utils.getItemValue(value));
+  });
+  return {
+    keys: keys,
+    cols: cols
+  };
+};
+var outColSetting = function outColSetting(columns) {
+  var columnsState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var keys = [];
+  var checkCols = [];
+  _forEachInstanceProperty(columns).call(columns, function (value) {
+    var dataIndex = value.dataIndex,
+      titleStr = value.titleStr,
+      title = value.title,
+      hideInTable = value.hideInTable,
+      childrenDataIndex = value.childrenDataIndex;
+    if (hideInTable || !dataIndex) {
+      return;
+    }
+    var _ref2 = columnsState[dataIndex.toString()] || {},
+      _ref2$show = _ref2.show,
+      show = _ref2$show === void 0 ? true : _ref2$show;
+    if (!show) {
+      return;
+    }
+    if (childrenDataIndex) {
+      var _childDataIndexProvid = childDataIndexProvider(childrenDataIndex, titleStr || title),
+        childKeys = _keysInstanceProperty(_childDataIndexProvid),
+        childCols = _childDataIndexProvid.cols;
+      keys.push.apply(keys, _toConsumableArray(childKeys));
+      checkCols.push.apply(checkCols, _toConsumableArray(childCols));
+      return;
+    }
+    keys.push(dataIndex.toString());
+    checkCols.push(utils.getItemValue(value));
+  });
+  return {
+    checkCols: checkCols,
+    keys: keys
+  };
+};
+
+exports.mkChangeValue = mkChangeValue;
+exports.outColSetting = outColSetting;
+// powered by h

package/lib/hooks/useHTable.js

@@ -21,12 +21,14 @@ var useHTable = (function () {
       getParams: function getParams() {
         return {};
       },
-      settingKeys: {},
       getSelectedRowData: function getSelectedRowData() {
         return {};
       },
       getTableSourceData: function getTableSourceData() {
         return [];
+      },
+      getColSettingKeys: function getColSettingKeys() {
+        return {};
       }
     };
   }, []);

package/lib/index.css

@@ -10,6 +10,9 @@
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }
+.ant-hw-table-body .ant-hw-table-pagination .ant-select {
+  width: auto;
+}
 .ant-hw-table-body .ant-pro-card-body {
   padding-bottom: 0px;
 }

package/lib/modal.d.ts

@@ -76,18 +76,19 @@ export interface HTableProps extends Omit<ProTableProps<any, any>, "request" | "
     labelWidth?: number;
     hideLabel?: boolean;
 }
+interface ColCheckResultKeys {
+    keys?: string[];
+    checkCols?: ConfigDataModal;
+}
 export interface TableInstance {
     reload: (params?: ParamsModal) => Promise<any>;
     setSelectedRowData: (keys: React.Key[], data: any) => void;
     dispatch: (key: string, params: any) => void;
     reloadWithParams: (params?: ParamsModal) => Promise<any>;
     getParams: () => any;
-    settingKeys: {
-        keys?: string[];
-        checkCols?: ConfigDataModal;
-    };
     getSelectedRowData: () => RowObj;
     getTableSourceData: () => any;
+    getColSettingKeys: () => ColCheckResultKeys;
 }
 export interface HTableInstance {
     form: HFormInstance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

package/src/components/HTableBody/Options/Content.tsx

@@ -7,7 +7,7 @@ import { getItemValue } from "./utils";
 
 export const ColsSettingContent = ({
   columns,
-  onChange,
+  onCheck,
   checkKeys,
 }: ItemProps) => {
   const content = useClassName("hw-table-body-option-setting-content");
@@ -29,21 +29,17 @@ export const ColsSettingContent = ({
     });
     return treeData;
   }, [columns]);
-  const change = (key: string[]) => {
-    const newCols = [...columns];
-    newCols.forEach(({ dataIndex }, index) => {
-      if (!dataIndex) {
-        return;
-      }
-      const strDataIndex = dataIndex.toString();
-      const item = newCols[index];
-      newCols[index] = {
-        ...item,
-        hideInTable: key.indexOf(strDataIndex) == -1,
-      };
-    });
-    onChange(newCols);
-  };
+  const check=(keys:string[])=>{
+    const notCheck:string[]=[];
+    contentTreeData.forEach(({key})=>{
+       const cuKey=(key as string);
+       const index=keys.indexOf(cuKey);
+       if (index===-1){
+          notCheck.push(cuKey)
+       }
+    })
+    onCheck(keys,notCheck)
+  }
   return (
     <div className={content}>
       <div style={{ paddingTop: 6, paddingBottom: 6 }}>
@@ -51,8 +47,8 @@ export const ColsSettingContent = ({
           checkable
           className={treeClass}
           checkedKeys={checkKeys}
-          onCheck={(key) => {
-            change(key as string[]);
+          onCheck={(key)=>{
+            check((key as string[]))
           }}
           height={268}
           treeData={contentTreeData}

package/src/components/HTableBody/Options/Title.tsx

@@ -3,31 +3,28 @@ import { Checkbox, Row, Space, Typography } from "antd";
 import type { ItemProps } from "./modal";
 import { useMemo } from "react";
 const { Link } = Typography;
-export const Title = ({ columns, onChange, checkKeys }: ItemProps) => {
+export const Title = ({ columns, onCheck, checkKeys,reset }: ItemProps) => {
   const title = useClassName("hw-table-body-option-setting-title");
-  const relLen = useMemo(() => {
-    const relArray = columns.filter(({ dataIndex }) => {
-      return !!dataIndex;
-    });
-    return relArray.length;
-  }, [columns]);
-  const allChange = (hideInTable: boolean) => {
-    const newCols = [...columns];
-    columns.forEach((item, index) => {
-      const { dataIndex } = item;
-      if (!dataIndex) {
+  const relArrayKeys = useMemo(() => {
+    const keys:string[]=[];
+    columns.forEach((value)=>{
+      const {dataIndex,hideInTable}=value;
+      if (hideInTable || !dataIndex){
         return;
       }
-      newCols[index] = {
-        ...item,
-        hideInTable,
-      };
-    });
-    onChange(newCols);
-  };
-  const reset = () => {
-    allChange(false);
+      const dataIndexStr=dataIndex.toString();
+      keys.push(dataIndexStr);
+    })
+    return keys;
+  }, [columns]);
+  const allKeys=columns
+  const allCheck = () => {
+      onCheck(relArrayKeys,[]);
   };
+  const allNotCheck=()=>{
+    onCheck([],relArrayKeys);
+  }
+  const relLen=relArrayKeys.length;
   const indeterminate = relLen !== checkKeys.length && checkKeys.length > 0;
   return (
     <Row className={title} justify={"space-between"}>
@@ -36,7 +33,11 @@ export const Title = ({ columns, onChange, checkKeys }: ItemProps) => {
           checked={relLen === checkKeys.length}
           indeterminate={indeterminate}
           onChange={(e) => {
-            allChange(!e.target.checked);
+             if (e.target.checked){
+                allCheck();
+                return;
+             }
+             allNotCheck();
           }}
         />
         <span>列展示</span>

package/src/components/HTableBody/Options/hooks.ts

@@ -0,0 +1,21 @@
+import {useMemo} from "react";
+import {IProps} from "@/components/HTableBody/Options/modal";
+
+export const useCheckKeys=({columns,colStatusValue}:Pick<IProps, "colStatusValue"|"columns">)=>{
+    return useMemo(()=>{
+        const keys:string[]=[];
+        columns.forEach((value)=>{
+            const {dataIndex,hideInTable}=value;
+            if (hideInTable || !dataIndex){
+                return;
+            }
+            const dataIndexStr=dataIndex.toString();
+            const {show=true}=colStatusValue[dataIndexStr]||{};
+            if (!show){
+                return;
+            }
+            keys.push(dataIndexStr);
+        })
+        return keys;
+    },[colStatusValue,columns])
+}

package/src/components/HTableBody/Options/index.tsx

@@ -6,12 +6,11 @@ import {
   SettingOutlined,
 } from "@ant-design/icons";
 import type { SizeType } from "antd/lib/config-provider/SizeContext";
-import { useEffect, useRef, useState } from "react";
+import {useRef} from "react";
 import { ColsSettingContent } from "./Content";
 import { Title } from "./Title";
 import type { IProps } from "./modal";
-import { useHTableContext } from "../../context";
-import { defaultKeys } from "./utils";
+import {useCheckKeys} from "@/components/HTableBody/Options/hooks";
 export default ({
   reload,
   size = "middle",
@@ -19,22 +18,15 @@ export default ({
   setSizeChange,
   columns,
   onChange,
+                  colStatusValue,
+    reset
 }: IProps) => {
   const pointer = useClassName([
     "hw-table-pointer",
     "hw-table-body-option-icon",
   ]);
   const ref = useRef<HTMLDivElement>(null);
-  const [keys, setKeys] = useState<string[]>([]);
-  const { tableInstance } = useHTableContext();
-  useEffect(() => {
-    const { keys: changeKeys, allKeys, checkCols } = defaultKeys(columns);
-    tableInstance.table.settingKeys = {
-      keys: allKeys,
-      checkCols: checkCols,
-    };
-    setKeys(changeKeys);
-  }, [columns]); //同步改变
+  const checkKeys = useCheckKeys({columns,colStatusValue})
   const SizeItem = () => {
     const MenuComponent = Menu as any;
     const MenuItem = Menu.Item as any;
@@ -90,12 +82,12 @@ export default ({
             content={
               <ColsSettingContent
                 columns={columns}
-                checkKeys={keys}
-                onChange={onChange}
+                checkKeys={checkKeys}
+                onCheck={onChange}
               />
             }
             title={
-              <Title columns={columns} checkKeys={keys} onChange={onChange} />
+              <Title columns={columns} reset={reset} checkKeys={checkKeys} onCheck={onChange} />
             }
             placement="bottomLeft"
             getPopupContainer={() => ref.current || document.body}

package/src/components/HTableBody/Options/modal.d.ts

@@ -1,14 +1,20 @@
 import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
 import type { SizeType } from "antd/lib/config-provider/SizeContext";
 import type { ConfigDataModal } from "../../modal";
+import {ColumnsState} from "@ant-design/pro-table/es/container";
 
 export interface IProps extends OptionConfig {
   size?: SizeType;
   setSizeChange: (size: SizeType) => void;
   columns: ConfigDataModal;
-  onChange: (cols: ConfigDataModal) => void;
+  onChange: (keys:string[],notCheck:string[]) => void;
+  colStatusValue:Record<string, ColumnsState>
+  reset:VoidFunction;
 }
 
-export interface ItemProps extends Omit<IProps, "setSizeChange"> {
+export interface ItemProps {
   checkKeys: string[];
+  onCheck:(keys:string[],notCheck:string[])=>void;
+  columns: ConfigDataModal;
+  reset?:VoidFunction;
 }

package/src/components/HTableBody/Options/utils.ts

@@ -1,5 +1,6 @@
 import type { ConfigDataModal, ConfigItemModal } from "../../modal";
 import React from "react";
+import {ColumnsState} from "@ant-design/pro-table/es/container";
 export const getItemValue = (data: ConfigItemModal) => {
   const { dataIndex, title, titleStr, ...oData } = data;
   let resultTitle = React.isValidElement(title) ? title.props.children : title;
@@ -11,58 +12,4 @@ export const getItemValue = (data: ConfigItemModal) => {
     dataIndex,
     ...oData,
   };
-};
-const childDataIndexProvider = (
-  data: ConfigItemModal[] | string[],
-  title?: string | React.ReactNode
-) => {
-  const keys: string[] = [];
-  const cols: ConfigDataModal = [];
-  data.forEach((value) => {
-    if (typeof value === "string") {
-      keys.push(value);
-      cols.push(
-        getItemValue({
-          title,
-          dataIndex: value,
-        })
-      );
-      return;
-    }
-    keys.push(value.dataIndex);
-    cols.push(getItemValue(value));
-  });
-  return {
-    keys,
-    cols,
-  };
-};
-export const defaultKeys = (cols: ConfigDataModal) => {
-  const keys: string[] = [];
-  const allKeys: string[] = [];
-  const checkCols: ConfigDataModal = [];
-  cols.forEach((value) => {
-    const { title, titleStr, dataIndex, hideInTable, childrenDataIndex } =
-      value;
-    if (hideInTable || !dataIndex) {
-      return;
-    }
-    keys.push(dataIndex.toString());
-    if (childrenDataIndex) {
-      const { keys: childKeys, cols: childCols } = childDataIndexProvider(
-        childrenDataIndex,
-        titleStr || title
-      );
-      allKeys.push(...childKeys);
-      checkCols.push(...childCols);
-      return;
-    }
-    allKeys.push(dataIndex.toString());
-    checkCols.push(getItemValue(value));
-  });
-  return {
-    keys,
-    allKeys,
-    checkCols,
-  };
-};
+};

package/src/components/HTableBody/hooks.tsx

@@ -4,11 +4,14 @@ import type {
   HRowSelection,
   ConfigDataModal,
 } from "../modal";
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import { useHTableContext } from "../context";
 import type { GetRowKey } from "rc-table/lib/interface";
 import { RowSelectionBox, RowSelectionTitle } from "./RowSelection";
 import type { SizeType } from "antd/lib/config-provider/SizeContext";
+import {ColumnsStateType} from "@ant-design/pro-table/es/typing";
+import {ColumnsState} from "@ant-design/pro-table/es/container";
+import {mkChangeValue, outColSetting} from "./utils";
 const rowSelectionCol = (rowSelection?: HRowSelection) => {
   const { allPageCheck, onChange, getCheckboxProps } = rowSelection || {};
   return {
@@ -58,12 +61,8 @@ export const useCols = ({ configData, rowSelection, table }: HTableProps) => {
   useEffect(() => {
     setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
-  const changeCols = (cuCols: ConfigDataModal) => {
-    setCols(cuCols);
-  };
   return {
-    cols,
-    changeCols,
+    cols
   };
 };
 interface FilterKeysModal {
@@ -99,3 +98,45 @@ export const useSize = (size: SizeType) => {
     setCuSize,
   };
 };
+interface useColumnsStateTypeModal {
+  columnsState?:ColumnsStateType;
+    columns:ConfigDataModal
+}
+export const useColumnsStateType=({columnsState,columns}:useColumnsStateTypeModal)=>{
+    const {
+        tableInstance
+    } = useHTableContext();
+   const {persistenceType,persistenceKey,value,defaultValue,onChange}=columnsState||{};
+   const [selfValue,setSelfValue]=useState<Record<string, ColumnsState>|undefined>(defaultValue);
+    const initTableColsVal = useMemo(() => {
+           return selfValue;
+   }, []);
+    useEffect(() => {
+        tableInstance.table.getColSettingKeys=()=>{
+            return outColSetting(columns,selfValue);
+        }
+    }, [selfValue]);
+  useEffect(() => {
+      setSelfValue(mkChangeValue(columnsState));
+  }, [value]);
+
+
+   const change=(keys:string[],notCheck:string[])=>{
+      const newObj={};
+      notCheck.forEach((key)=>{
+           newObj[key]={show:false}
+      });
+      setSelfValue(newObj);
+       onChange?.(newObj);
+   }
+   const reset=()=>{
+       setSelfValue(initTableColsVal);
+   }
+  return  {
+    persistenceType,
+    persistenceKey,
+    value:selfValue,
+    onChange:change,
+      reset
+  }
+}//设置选项

package/src/components/HTableBody/index.tsx

@@ -7,7 +7,7 @@ import type {
   HTableInstance,
   HRowSelection,
 } from "../modal";
-import { useCols, useSize, useSynchronousKeys } from "./hooks";
+import {useCols, useColumnsStateType, useSize, useSynchronousKeys} from "./hooks";
 import { useHTableContext } from "../context";
 import React from "react";
 import { ConfigProvider, Empty, Alert } from "antd";
@@ -64,9 +64,9 @@ export default ({
   optionsRender,
   paginationActionRender,
   localSorter,
+  columnsState,
   ...props
 }: HTableBodyProps) => {
-  // @ts-ignore
   const { selectedRowKeys, alwaysShowAlert: configAlwaysShowAlert } =
     rowSelection || {};
   const {
@@ -86,12 +86,14 @@ export default ({
   const { cuSize, setCuSize } = useSize(size);
   const bodyConfigData = configData || contextConfigData;
   const { records } = data || {};
-  const { cols, changeCols } = useCols({
+
+  const { cols } = useCols({
     configData: bodyConfigData,
     table: tableInstance,
     rowSelection,
   });
 
+  const {value,onChange,reset,...selfColStatus} = useColumnsStateType({columnsState,columns:cols});
   useSynchronousKeys({ selectedRowKeys, records, rowKey });
   const optionsNode = options && (
     <Options
@@ -102,7 +104,9 @@ export default ({
       size={cuSize}
       columns={cols}
       setSizeChange={setCuSize}
-      onChange={changeCols}
+      colStatusValue={value||{}}
+      onChange={onChange}
+      reset={reset}
     />
   );
   const { keys = [], selectAll } = selectedRowData;
@@ -136,6 +140,10 @@ export default ({
       >
         <ProTable
           {...props}
+          columnsState={{
+            ...selfColStatus,
+            value,
+          }}
           columns={cols as any}
           size={cuSize}
           search={false}
@@ -154,10 +162,10 @@ export default ({
               asc,
             });
           }}
-          options={false}
           tableStyle={{
             paddingBottom: 0,
           }}
+          options={false}
           rowSelection={false}
           loading={loading}
           rowKey={rowKey}