@hw-component/table 1.1.8 → 1.1.9

package/src/components/HTableBody/hooks.tsx

@@ -4,14 +4,14 @@ import type {
   HRowSelection,
   ConfigDataModal,
 } from "../modal";
-import React, {useEffect, useMemo, 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";
+import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
+import type { ColumnsState } from "@ant-design/pro-table/es/container";
+import { mkChangeValue, outColSetting } from "./utils";
 const rowSelectionCol = (rowSelection?: HRowSelection) => {
   const { allPageCheck, onChange, getCheckboxProps } = rowSelection || {};
   return {
@@ -62,7 +62,7 @@ export const useCols = ({ configData, rowSelection, table }: HTableProps) => {
     setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
   return {
-    cols
+    cols,
   };
 };
 interface FilterKeysModal {
@@ -99,44 +99,47 @@ export const useSize = (size: SizeType) => {
   };
 };
 interface useColumnsStateTypeModal {
-  columnsState?:ColumnsStateType;
-    columns:ConfigDataModal
+  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]);
+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(() => {
-      setSelfValue(mkChangeValue(columnsState));
+    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  {
+  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
-  }
-}//设置选项
+    value: selfValue,
+    onChange: change,
+    reset,
+  };
+}; //设置选项

package/src/components/HTableBody/index.tsx

@@ -7,7 +7,12 @@ import type {
   HTableInstance,
   HRowSelection,
 } from "../modal";
-import {useCols, useColumnsStateType, 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";
@@ -18,8 +23,13 @@ import AlertMsg from "./AlertMsg";
 import type { AffixProps } from "antd/lib/affix";
 import Options from "./Options";
 import HeaderTitle from "./HeaderTitle";
+import {OptionConfig} from "@ant-design/pro-table/lib/components/ToolBar";
+
+export interface OptionModal extends OptionConfig {
+  settingRender?:()=>React.ReactNode
+}
 export interface HTableBodyProps
-  extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"> {
+  extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"|"options"> {
   configData?: ConfigDataModal;
   onPageChange?: (params: ParamsModal) => void;
   emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
@@ -36,6 +46,7 @@ export interface HTableBodyProps
   optionsRender?: (node: React.ReactNode) => React.ReactNode;
   paginationActionRender?: (tableInstance: HTableInstance) => React.ReactNode;
   localSorter?: boolean;
+  options?:OptionModal|false
 }
 const defaultRender = () => {
   return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
@@ -93,7 +104,10 @@ export default ({
     rowSelection,
   });
 
-  const {value,onChange,reset,...selfColStatus} = useColumnsStateType({columnsState,columns:cols});
+  const { value, onChange, reset, ...selfColStatus } = useColumnsStateType({
+    columnsState,
+    columns: cols,
+  });
   useSynchronousKeys({ selectedRowKeys, records, rowKey });
   const optionsNode = options && (
     <Options
@@ -104,7 +118,7 @@ export default ({
       size={cuSize}
       columns={cols}
       setSizeChange={setCuSize}
-      colStatusValue={value||{}}
+      colStatusValue={value || {}}
       onChange={onChange}
       reset={reset}
     />
@@ -171,6 +185,7 @@ export default ({
           rowKey={rowKey}
           dataSource={records}
           pagination={false}
+
         />
         {pagination !== false && (
           <HTablePagination

package/src/components/HTableBody/utils.ts

@@ -1,91 +1,93 @@
-import {ColumnsStateType} from "@ant-design/pro-table/es/typing";
-import {ConfigDataModal, ConfigItemModal} from "@/components/modal";
-import React from "react";
-import {getItemValue} from "./Options/utils";
+import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
+import type { ConfigDataModal, ConfigItemModal } from "@/components/modal";
+import type React from "react";
+import { getItemValue } from "./Options/utils";
 
-const strToJson=(str:string|null)=>{
-    if (!str){
-        return  {};
+const strToJson = (str: string | null) => {
+  if (!str) {
+    return {};
+  }
+  try {
+    const result = JSON.parse(str);
+    if (typeof result === "object") {
+      return result;
     }
-    try {
-        const result=JSON.parse(str);
-        if (typeof result==="object"){
-            return  result;
-        }
-        return {};
-    }catch (e) {
-        return {}
-    }
-}
-
-export const mkChangeValue=(columnsState?:ColumnsStateType)=>{
-    const {persistenceType,persistenceKey,value,defaultValue,onChange}=columnsState||{};
-    if (value){
-        return value
-    }
-    if (!persistenceKey){
-        return {};
-    }
-    const cuPersistenceType=persistenceType||"localStorage";
-    const saveValStr=window[cuPersistenceType].getItem(persistenceKey);
-    return  strToJson(saveValStr);
-}//获取默认值
+    return {};
+  } catch (e) {
+    return {};
+  }
+};
 
+export const mkChangeValue = (columnsState?: ColumnsStateType) => {
+  const { persistenceType, persistenceKey, value, defaultValue, onChange } =
+    columnsState || {};
+  if (value) {
+    return value;
+  }
+  if (!persistenceKey) {
+    return {};
+  }
+  const cuPersistenceType = persistenceType || "localStorage";
+  const saveValStr = window[cuPersistenceType].getItem(persistenceKey);
+  return strToJson(saveValStr);
+}; //获取默认值
 
 const childDataIndexProvider = (
-    data: ConfigItemModal[] | string[],
-    title?: string | React.ReactNode
+  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,
-    };
+  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 outColSetting=(columns:ConfigDataModal,columnsState:ColumnsStateType={})=>{
-    const keys: string[] = [];
-    const checkCols:ConfigDataModal=[];
-    columns.forEach((value) => {
-        const { dataIndex,titleStr,title, hideInTable, childrenDataIndex } =
-            value;
-        if (hideInTable || !dataIndex) {
-            return;
-        }
-        const {show=true}=columnsState[dataIndex.toString()]||{};
-        if (!show){
-            return;
-        }
-        if (childrenDataIndex) {
-          const { keys: childKeys, cols: childCols } = childDataIndexProvider(
-            childrenDataIndex,
-            titleStr || title
-          );
-            keys.push(...childKeys);
-          checkCols.push(...childCols);
-          return;
-        }
-        keys.push(dataIndex.toString());
-        checkCols.push(getItemValue(value));
-    });
-    return {
-        checkCols,
-        keys
-    };
-}
+export const outColSetting = (
+  columns: ConfigDataModal,
+  columnsState: ColumnsStateType = {}
+) => {
+  const keys: string[] = [];
+  const checkCols: ConfigDataModal = [];
+  columns.forEach((value) => {
+    const { dataIndex, titleStr, title, hideInTable, childrenDataIndex } =
+      value;
+    if (hideInTable || !dataIndex) {
+      return;
+    }
+    const { show = true } = columnsState[dataIndex.toString()] || {};
+    if (!show) {
+      return;
+    }
+    if (childrenDataIndex) {
+      const { keys: childKeys, cols: childCols } = childDataIndexProvider(
+        childrenDataIndex,
+        titleStr || title
+      );
+      keys.push(...childKeys);
+      checkCols.push(...childCols);
+      return;
+    }
+    keys.push(dataIndex.toString());
+    checkCols.push(getItemValue(value));
+  });
+  return {
+    checkCols,
+    keys,
+  };
+};

package/src/components/HTableHeader/Context.tsx

@@ -1,9 +1,9 @@
-import React, {useContext} from "react";
-import {IHeaderProps} from "./modal";
-const Context=React.createContext<IHeaderProps>({});
+import React, { useContext } from "react";
+import type { IHeaderProps } from "./modal";
+const Context = React.createContext<IHeaderProps>({});
 
-export const HeaderProvider=Context.Provider;
+export const HeaderProvider = Context.Provider;
 
-export const useHeaderContext=()=>{
-    return useContext(Context);
-}
+export const useHeaderContext = () => {
+  return useContext(Context);
+};

package/src/components/HTableHeader/defaultSubComponent.tsx

@@ -4,7 +4,7 @@ import { useHTableContext } from "../context";
 import React, { useMemo } from "react";
 import { DownOutlined, UpOutlined } from "@ant-design/icons";
 import type { RowProps } from "antd/lib/grid/row";
-import {useHeaderContext} from "./Context";
+import { useHeaderContext } from "./Context";
 interface IProps {
   form: HFormInstance;
 }
@@ -36,7 +36,7 @@ const OpenComponent = () => {
 };
 export const DefaultSubComponent = ({ form }: IProps) => {
   const { loading, headerOpen } = useHTableContext();
-  const {onReset}=useHeaderContext();
+  const { onReset } = useHeaderContext();
   const hide = typeof headerOpen === "undefined";
   const { justify, style } = useMemo(() => {
     if (headerOpen === true || hide) {
@@ -71,7 +71,11 @@ export const DefaultSubComponent = ({ form }: IProps) => {
         <Button
           style={{ borderRadius: 4 }}
           onClick={() => {
-            onReset?onReset():form.resetFields();
+            if (onReset) {
+              onReset();
+              return;
+            }
+            form.resetFields();
           }}
         >
           重置

package/src/components/HTableHeader/index.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { useClassName } from "../hooks";
 import type { IHeaderProps } from "./modal";
 import { useHideMoreTitle } from "./hooks";
-import {HeaderProvider} from "./Context";
+import { HeaderProvider } from "./Context";
 
 const defaultSearchSpan = {
   xxl: 4,
@@ -22,7 +22,7 @@ export default ({
   initValues,
   hideLabel,
   labelWidth,
-  onReset
+  onReset,
 }: IHeaderProps) => {
   const {
     tableInstance,
@@ -55,20 +55,20 @@ export default ({
       className={`hw_table_header ${className}`}
       bodyStyle={{ paddingBottom: 0 }}
     >
-      <HeaderProvider value={{onReset}}>
+      <HeaderProvider value={{ onReset }}>
         <HForm
-            itemSpan={searchSpan}
-            onFinish={subOnFinish}
-            submitLoading={loading}
-            gutter={[20, 0]}
-            initialValues={initValues}
-            hideLabel={
-              typeof tableHideLabel === "undefined" ? true : tableHideLabel
-            }
-            configData={nConfigData}
-            form={form}
-            colon={true}
-            labelWidth={tableLabelWidth}
+          itemSpan={searchSpan}
+          onFinish={subOnFinish}
+          submitLoading={loading}
+          gutter={[20, 0]}
+          initialValues={initValues}
+          hideLabel={
+            typeof tableHideLabel === "undefined" ? true : tableHideLabel
+          }
+          configData={nConfigData}
+          form={form}
+          colon={true}
+          labelWidth={tableLabelWidth}
         />
       </HeaderProvider>
     </Card>

package/src/components/HTableHeader/modal.ts

@@ -13,7 +13,7 @@ export interface IHeaderProps {
   initValues?: Record<string, any>;
   hideLabel?: boolean;
   labelWidth?: number;
-  onReset?:VoidFunction;
+  onReset?: VoidFunction;
 }
 
 export interface FormConfigDataItemProviderModal extends ConfigItemModal {

package/src/components/Table.tsx

@@ -55,7 +55,6 @@ export default ({
     },
     selectedRowData,
     dataSource: data,
-
   });
   return (
     <HTableContext.Provider

package/src/components/hooks/useHTable.tsx

@@ -20,12 +20,12 @@ export default (): HTableInstance => {
       getSelectedRowData: () => {
         return {};
       },
-      getTableSourceData:()=>{
+      getTableSourceData: () => {
         return [];
       },
-      getColSettingKeys:()=>{
-        return {}
-      }
+      getColSettingKeys: () => {
+        return {};
+      },
     };
   }, []);
   return {

package/src/components/modal.ts

@@ -9,6 +9,7 @@ import type React from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
+import {OptionModal} from "./HTableBody";
 
 export interface RowObj {
   keys?: React.Key[];
@@ -62,12 +63,6 @@ export type FooterBtnRenderFn = (
   setAllCheck: (row: RowObj) => void
 ) => React.ReactNode;
 export type actionFn = (...arg) => void;
-type FooterRenderFn = (
-  tableInstance: HTableInstance,
-  selectedRowData: RowObj,
-  data?: ResultModal
-) => React.ReactNode;
-
 export interface RowSelectionOuter {
   allPageCheck?: boolean;
 }
@@ -113,11 +108,12 @@ export interface HTableProps
   formInitValues?: Record<string, any>;
   labelWidth?: number;
   hideLabel?: boolean;
+  options?:OptionModal|false
 }
 interface ColCheckResultKeys {
   keys?: string[];
   checkCols?: ConfigDataModal;
-};
+}
 export interface TableInstance {
   reload: (params?: ParamsModal) => Promise<any>;
   setSelectedRowData: (keys: React.Key[], data: any) => void;
@@ -126,7 +122,7 @@ export interface TableInstance {
   getParams: () => any;
   getSelectedRowData: () => RowObj;
   getTableSourceData: () => any;
-  getColSettingKeys:()=>ColCheckResultKeys;
+  getColSettingKeys: () => ColCheckResultKeys;
 }
 export interface HTableInstance {
   form: HFormInstance;

package/src/pages/Table/index.tsx

@@ -1,6 +1,7 @@
 import { HTable, useHTable } from "@/components";
-import { Button } from "antd";
+import {Button, Tooltip} from "antd";
 import { HFormConfigProvider } from "@hw-component/form";
+import {SettingOutlined} from "@ant-design/icons";
 
 const configData = [
   {
@@ -79,10 +80,10 @@ export default () => {
           configData={configData}
           rowKey={"id"}
           table={hTable}
-          onReset={()=>{
-           hTable.form.setFieldsValue({
-             name1:"ffff"
-           })
+          onReset={() => {
+            hTable.form.setFieldsValue({
+              name1: "ffff",
+            });
           }}
           hideLabel={false}
           labelWidth={88}
@@ -101,20 +102,27 @@ export default () => {
             x: 1000,
           }}
           columnsState={{
-            persistenceKey:"test",
-            persistenceType:"localStorage"
+            persistenceKey: "test",
+            persistenceType: "localStorage",
           }}
           formInitValues={{
             name2: 1,
           }}
-          headerTitle={<Button type={"primary"} onClick={()=>{
-             console.log(hTable.table.getColSettingKeys());
-          }}>操作</Button>}
+          headerTitle={
+            <Button
+              type={"primary"}
+              onClick={() => {
+                console.log(hTable.table.getColSettingKeys());
+              }}
+            >
+              操作
+            </Button>
+          }
           paginationActionRender={() => {
             return <div>你大爷</div>;
           }}
           request={(params) => {
-            const { current = 1 ,size="10"} = params;
+            const { current = 1, size = "10" } = params;
             const arrayData = [];
             for (let i = 0; i < 100; i = i + 1) {
               arrayData.push({
@@ -126,7 +134,7 @@ export default () => {
               setTimeout(() => {
                 // reject(new Error("错误"));
                 resolve({
-                  size:size,
+                  size: size,
                   current: current.toString(10),
                   total: "1000",
                   records: arrayData,
@@ -134,6 +142,11 @@ export default () => {
               }, 2000);
             });
           }}
+          options={{
+            settingRender:()=>{
+              return <Tooltip title="321312312312321"><SettingOutlined width={24} /></Tooltip>
+            }
+          }}
         />
       </div>
     </HFormConfigProvider>

package/src/pages/TableCustomize/index.tsx

@@ -3,7 +3,8 @@ import {
   HTableHeader,
   HTableBody,
   HTableFooter,
-  HTablePagination, useHTable,
+  HTablePagination,
+  useHTable,
 } from "@/components";
 import { useRequest } from "ahooks";
 import { Space } from "antd";
@@ -28,7 +29,7 @@ const AddBtn = (props) => {
   return <div>fff</div>;
 };
 export default () => {
-  const hTable=useHTable();
+  const hTable = useHTable();
   const { run, loading, error, data } = useRequest(
     (params) => {
       const { current = 1 } = params;
@@ -65,14 +66,18 @@ export default () => {
       <Space direction={"vertical"} style={{ width: "100%" }}>
         <HTableHeader />
         <HTableBody
-            headerTitle={<div onClick={()=>{
-                console.log( hTable.table.getColSettingKeys())
-            }}>
+          headerTitle={
+            <div
+              onClick={() => {
+                console.log(hTable.table.getColSettingKeys());
+              }}
+            >
               点我获取
-            </div>}
+            </div>
+          }
           columnsState={{
-            persistenceKey:"zd",
-            persistenceType:"localStorage"
+            persistenceKey: "zd",
+            persistenceType: "localStorage",
           }}
           affixProps={{
             target: () => document.querySelector(".body"),