@hw-component/table 1.9.78 → 1.9.80

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

@@ -1,66 +1,62 @@
-import {HRowSelection} from "@/components/modal";
-import {useHTableContext} from "@/components/context";
-import {useMemo} from "react";
-import {Checkbox, Dropdown, Menu} from "antd";
-import {useAllChecked, useCheckControl} from "./hooks";
-export default  ({
-                                              allPageCheck = true,
-                                              onChange,
-                                              getCheckboxProps,
-                                          }: HRowSelection) => {
-    const {
-        data,
-        selectedRowData,
-        rowKey = "id",
-    } = useHTableContext();
-    const { records = [] } = data || {};
-    const newData = records?.filter((item) => {
-        const { disabled = false } = getCheckboxProps?.(item) || {};
-        return !disabled;
-    });
-    const { keys, selectAll } = selectedRowData;
-    const {checkChange,menuClick}=useCheckControl(newData,onChange);
-    const dataLen = newData?.length || 0;
-    const checked = useAllChecked(keys,newData);
-    const configItems = useMemo(() => {
-        const fsArray = checked
-            ? {
-                label: "取消此页数据",
-                key: "cancel",
-            }
-            : {
-                label: "选择此页数据",
-                key: "check",
-            };
-        const enArray = selectAll
-            ? {
-                label: "取消全部数据",
-                key: "cancelAll",
-            }
-            : {
-                label: "选择全部数据",
-                key: "checkAll",
-            };
-        return [fsArray, enArray];
-    }, [checked, selectAll]);
+import type { HRowSelection } from "@/components/modal";
+import { useHTableContext } from "@/components/context";
+import { useMemo } from "react";
+import { Checkbox, Dropdown, Menu } from "antd";
+import { useAllChecked, useCheckControl } from "./hooks";
+export default ({
+  allPageCheck = true,
+  onChange,
+  getCheckboxProps,
+}: HRowSelection) => {
+  const { data, selectedRowData, rowKey = "id" } = useHTableContext();
+  const { records = [] } = data || {};
+  const newData = records?.filter((item) => {
+    const { disabled = false } = getCheckboxProps?.(item) || {};
+    return !disabled;
+  });
+  const { keys, selectAll } = selectedRowData;
+  const { checkChange, menuClick } = useCheckControl(newData, onChange);
+  const dataLen = newData?.length || 0;
+  const checked = useAllChecked(keys, newData);
+  const configItems = useMemo(() => {
+    const fsArray = checked
+      ? {
+          label: "取消此页数据",
+          key: "cancel",
+        }
+      : {
+          label: "选择此页数据",
+          key: "check",
+        };
+    const enArray = selectAll
+      ? {
+          label: "取消全部数据",
+          key: "cancelAll",
+        }
+      : {
+          label: "选择全部数据",
+          key: "checkAll",
+        };
+    return [fsArray, enArray];
+  }, [checked, selectAll]);
 
-    const menu = () => {
-        const MenuEle = Menu as any;
-        return <MenuEle onClick={menuClick} items={configItems} />;
-    };
-    const disabled = dataLen === 0;
-    if (allPageCheck) {
-        return (
-            <Dropdown overlay={menu} arrow placement={"bottom"} disabled={disabled}>
-                <Checkbox
-                    checked={checked}
-                    onChange={checkChange}
-                    disabled={disabled}
-                />
-            </Dropdown>
-        );
-    }
+  const menu = () => {
+    const MenuEle = Menu as any;
+    return <MenuEle onClick={menuClick} items={configItems} />;
+  };
+  const disabled = dataLen === 0;
+  if (allPageCheck) {
     return (
-        <Checkbox checked={checked} onChange={checkChange} disabled={disabled} />
+      <Dropdown overlay={menu} arrow placement={"bottom"} disabled={disabled}>
+        <Checkbox
+          checked={checked}
+          onChange={checkChange}
+          disabled={disabled}
+        />
+      </Dropdown>
     );
-};
+  }
+  return (
+    <Checkbox checked={checked} onChange={checkChange} disabled={disabled} />
+  );
+};

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

@@ -1,68 +1,69 @@
-import {HTableProps} from "@/components/modal";
-import {Key} from "react";
-import {useHTableContext} from "@/components/context";
+import type { HTableProps } from "@/components/modal";
+import type { Key } from "react";
+import { useHTableContext } from "@/components/context";
 import type { HRowSelection } from "../../modal";
 
-const getRowKey=(item:any,index:number,rowKey:HTableProps["rowKey"])=>{
-    return typeof rowKey === "function" ? rowKey(item, index) : item[rowKey as string];
-}
-export const useAllChecked=(keys:Key[]=[],data:any[]=[])=>{
-    const {rowKey = "id"} = useHTableContext();
-    const len=data?.length;
-    if (!len){
-        return false
-    }
-    return data.every((item,index)=>{
-        const itemKey=getRowKey(item,index,rowKey);
-        return keys.indexOf(itemKey)!==-1;
-    })
-}
+const getRowKey = (item: any, index: number, rowKey: HTableProps["rowKey"]) => {
+  return typeof rowKey === "function"
+    ? rowKey(item, index)
+    : item[rowKey as string];
+};
+export const useAllChecked = (keys: Key[] = [], data: any[] = []) => {
+  const { rowKey = "id" } = useHTableContext();
+  const len = data?.length;
+  if (!len) {
+    return false;
+  }
+  return data.every((item, index) => {
+    const itemKey = getRowKey(item, index, rowKey);
+    return keys.indexOf(itemKey) !== -1;
+  });
+};
 
-export const useCheckControl=(data:any[]=[],onChange:HRowSelection["onChange"])=>{
-    const {
-        rowOnChange,
-        rowKey = "id",
-        allSelectChange,
-    } = useHTableContext();
-    const allCheck = () => {
-        const setKeys = data.map((item, index) => {
-            return getRowKey(item,index,rowKey);
-        });
-        rowOnChange(setKeys, data);
-        onChange?.(setKeys, data);
-    };
-    const allCancel = () => {
-        rowOnChange([], []);
-        onChange?.([], []);
-    };
+export const useCheckControl = (
+  data: any[] = [],
+  onChange: HRowSelection["onChange"]
+) => {
+  const { rowOnChange, rowKey = "id", allSelectChange } = useHTableContext();
+  const allCheck = () => {
+    const setKeys = data.map((item, index) => {
+      return getRowKey(item, index, rowKey);
+    });
+    rowOnChange(setKeys, data);
+    onChange?.(setKeys, data);
+  };
+  const allCancel = () => {
+    rowOnChange([], []);
+    onChange?.([], []);
+  };
 
-    const checkChange = (e) => {
-        const checked = e.target.checked;
-        if (checked) {
-            allCheck();
-            return;
-        }
-        allCancel();
-    };
-    const menuClick = ({ key }) => {
-        if (key === "check") {
-            allCheck();
-            return;
-        }
-        if (key === "cancel") {
-            allCancel();
-            return;
-        }
-        if (key === "checkAll") {
-            allSelectChange?.(true);
-            onChange?.([], []);
-            return;
-        }
-        allSelectChange?.(false);
-        onChange?.([], []);
-    };
-    return {
-        checkChange,
-        menuClick
+  const checkChange = (e) => {
+    const checked = e.target.checked;
+    if (checked) {
+      allCheck();
+      return;
+    }
+    allCancel();
+  };
+  const menuClick = ({ key }) => {
+    if (key === "check") {
+      allCheck();
+      return;
+    }
+    if (key === "cancel") {
+      allCancel();
+      return;
+    }
+    if (key === "checkAll") {
+      allSelectChange?.(true);
+      onChange?.([], []);
+      return;
     }
-}
+    allSelectChange?.(false);
+    onChange?.([], []);
+  };
+  return {
+    checkChange,
+    menuClick,
+  };
+};

package/src/components/HTableBody/RowRadioBoxSelection.tsx

@@ -1,27 +1,27 @@
-import {HRowSelection} from "@/components/modal";
-import {useHTableContext} from "@/components/context";
-import {Radio} from "antd";
+import type { HRowSelection } from "@/components/modal";
+import { useHTableContext } from "@/components/context";
+import { Radio } from "antd";
 
-interface RowRadioSelection {
-    data: any;
-    onChange?: HRowSelection["onChange"];
-    getCheckboxProps?: HRowSelection["getCheckboxProps"];
-    index: number;
+interface RowRadioSelectionProps {
+  data: any;
+  onChange?: HRowSelection["onChange"];
+  getCheckboxProps?: HRowSelection["getCheckboxProps"];
+  index: number;
 }
 export const RowRadioSelection = ({
-                                         data,
-                                         onChange,
-                                         index,
-                                         getCheckboxProps,
-                                     }: RowRadioSelection) => {
-    const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
-    const { keys = [] } = selectedRowData;
-    const key = typeof rowKey === "function" ? rowKey(data, index) : data[rowKey];
-    const add = () => {
-        rowOnChange([key], [data]);
-        onChange?.([key], [data]);
-    };
-    const { disabled = false } = getCheckboxProps?.(data) || {};
-    const checked = keys.indexOf(key) !== -1;
-    return <Radio checked={checked} onChange={add} disabled={disabled} />;
-};
+  data,
+  onChange,
+  index,
+  getCheckboxProps,
+}: RowRadioSelectionProps) => {
+  const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
+  const { keys = [] } = selectedRowData;
+  const key = typeof rowKey === "function" ? rowKey(data, index) : data[rowKey];
+  const add = () => {
+    rowOnChange([key], [data]);
+    onChange?.([key], [data]);
+  };
+  const { disabled = false } = getCheckboxProps?.(data) || {};
+  const checked = keys.indexOf(key) !== -1;
+  return <Radio checked={checked} onChange={add} disabled={disabled} />;
+};

package/src/components/HTableBody/hooks/colsMk.tsx

@@ -1,51 +1,51 @@
-import {HRowSelection} from "@/components/modal";
+import type { HRowSelection } from "@/components/modal";
 import React from "react";
-import {RowRadioSelection} from "@/components/HTableBody/RowRadioBoxSelection";
-import RowCheckBoxSelectionTitle from '@/components/HTableBody/RowCheckBox/Title';
-import RowCheckBoxSelection from '@/components/HTableBody/RowCheckBox/RowItem';
+import { RowRadioSelection } from "@/components/HTableBody/RowRadioBoxSelection";
+import RowCheckBoxSelectionTitle from "@/components/HTableBody/RowCheckBox/Title";
+import RowCheckBoxSelection from "@/components/HTableBody/RowCheckBox/RowItem";
 export const checkBoxSelectionCol = (rowSelection: HRowSelection) => {
-    const { allPageCheck, onChange, getCheckboxProps } = rowSelection;
-    return {
-        title: (
-            <RowCheckBoxSelectionTitle
-                allPageCheck={allPageCheck}
-                onChange={onChange}
-                getCheckboxProps={getCheckboxProps}
-            />
-        ),
-        width: 36,
-        rowSelectionTitle: true,
-        fixed: "left",
-        align: "center",
-        render: (dom, data, index) => {
-            return (
-                <RowCheckBoxSelection
-                    data={data}
-                    index={index}
-                    onChange={onChange}
-                    getCheckboxProps={getCheckboxProps}
-                />
-            );
-        },
-    };
+  const { allPageCheck, onChange, getCheckboxProps } = rowSelection;
+  return {
+    title: (
+      <RowCheckBoxSelectionTitle
+        allPageCheck={allPageCheck}
+        onChange={onChange}
+        getCheckboxProps={getCheckboxProps}
+      />
+    ),
+    width: 36,
+    rowSelectionTitle: true,
+    fixed: "left",
+    align: "center",
+    render: (dom, data, index) => {
+      return (
+        <RowCheckBoxSelection
+          data={data}
+          index={index}
+          onChange={onChange}
+          getCheckboxProps={getCheckboxProps}
+        />
+      );
+    },
+  };
 };
 
-export const  radioSelectionCol=(rowSelection: HRowSelection)=>{
-    const {  onChange, getCheckboxProps } = rowSelection;
-    return {
-        width: 36,
-        rowSelectionTitle: true,
-        fixed: "left",
-        align: "center",
-        render: (dom, data, index) => {
-            return (
-                <RowRadioSelection
-                    data={data}
-                    index={index}
-                    onChange={onChange}
-                    getCheckboxProps={getCheckboxProps}
-                />
-            );
-        },
-    };
-}
+export const radioSelectionCol = (rowSelection: HRowSelection) => {
+  const { onChange, getCheckboxProps } = rowSelection;
+  return {
+    width: 36,
+    rowSelectionTitle: true,
+    fixed: "left",
+    align: "center",
+    render: (dom, data, index) => {
+      return (
+        <RowRadioSelection
+          data={data}
+          index={index}
+          onChange={onChange}
+          getCheckboxProps={getCheckboxProps}
+        />
+      );
+    },
+  };
+};

package/src/components/HTableBody/hooks/useColData.tsx

@@ -14,14 +14,14 @@ import configRender from "@/components/render";
 import type { ColumnsState } from "@ant-design/pro-table/es/container";
 import { mkChangeValue, outColSetting } from "@/components/HTableBody/utils";
 import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
-import {radioSelectionCol,checkBoxSelectionCol} from './colsMk'
-const checkBoxMk=(rowSelection:HRowSelection)=>{
-    const {type}=rowSelection;
-    if (type==="radio"){
-      return  radioSelectionCol(rowSelection);
-    }
-    return  checkBoxSelectionCol(rowSelection);
-}
+import { radioSelectionCol, checkBoxSelectionCol } from "./colsMk";
+const checkBoxMk = (rowSelection: HRowSelection) => {
+  const { type } = rowSelection;
+  if (type === "radio") {
+    return radioSelectionCol(rowSelection);
+  }
+  return checkBoxSelectionCol(rowSelection);
+};
 export const useCols = ({
   configData,
   rowSelection,
@@ -68,7 +68,7 @@ export const useCols = ({
       return !item.hideInTable;
     });
     if (rowSelection !== false) {
-      colsArray.splice(0, 0, checkBoxMk(rowSelection||{}) as any);
+      colsArray.splice(0, 0, checkBoxMk(rowSelection || {}) as any);
     }
     return colsArray.map((item, index) => {
       const lastItem = colsArray[index - 1];

package/src/components/HTableBody/hooks/useControl.tsx

@@ -4,7 +4,7 @@ import type { SizeType } from "antd/lib/config-provider/SizeContext";
 import type { HTableBodyProps } from "../modal";
 import { useHTableContext } from "@/components/context";
 import type { GetRowKey } from "rc-table/lib/interface";
-import {RowObj} from "@/components/modal";
+import type { RowObj } from "@/components/modal";
 
 export const useSize = (size: SizeType) => {
   const [cuSize, setCuSize] = useState(size);
@@ -106,13 +106,15 @@ export const useSynchronousKeys = ({
   }, [selectedRowKeys, records, rowKey]);
 };
 
-
-export const useAlwaysShowAlert=(selectedRowData:RowObj,alwaysShowAlert?:boolean)=>{
+export const useAlwaysShowAlert = (
+  selectedRowData: RowObj,
+  alwaysShowAlert?: boolean
+) => {
   const { keys = [], selectAll } = selectedRowData;
-  return useMemo(()=>{
-        if (typeof alwaysShowAlert!=="undefined"){
-          return alwaysShowAlert
-        }
-        return   keys.length > 0 || selectAll;
-  },[selectedRowData,alwaysShowAlert])
-}
+  return useMemo(() => {
+    if (typeof alwaysShowAlert !== "undefined") {
+      return alwaysShowAlert;
+    }
+    return keys.length > 0 || selectAll;
+  }, [selectedRowData, alwaysShowAlert]);
+};

package/src/components/HTableBody/index.tsx

@@ -2,7 +2,8 @@ import ProTable from "@ant-design/pro-table";
 import {
   useSize,
   useTableChange,
-  useSynchronousKeys, useAlwaysShowAlert,
+  useSynchronousKeys,
+  useAlwaysShowAlert,
 } from "./hooks/useControl";
 import { useCols, useColumnsStateType } from "./hooks/useColData";
 import { useHTableContext } from "../context";
@@ -44,7 +45,8 @@ export default (bodyProps: HTableBodyProps) => {
     bordered,
     ...props
   } = bodyProps;
-  const { selectedRowKeys, alwaysShowAlert: configAlwaysShowAlert } = rowSelection || {};
+  const { selectedRowKeys, alwaysShowAlert: configAlwaysShowAlert } =
+    rowSelection || {};
   const {
     tableInstance: contextTableInstance,
     configData: contextConfigData,
@@ -88,8 +90,13 @@ export default (bodyProps: HTableBodyProps) => {
       reset={reset}
     />
   );
-  const defaultOptionsNode = optionsRender ? optionsRender(optionsNode) : optionsNode;
-  const alwaysShowAlert = useAlwaysShowAlert(selectedRowData,configAlwaysShowAlert);
+  const defaultOptionsNode = optionsRender
+    ? optionsRender(optionsNode)
+    : optionsNode;
+  const alwaysShowAlert = useAlwaysShowAlert(
+    selectedRowData,
+    configAlwaysShowAlert
+  );
   const className = useClassName("hw-table-body");
   const { tableStyle: defaultTableStyle } = useHTableConfigContext({
     tableStyle,
@@ -139,7 +146,9 @@ export default (bodyProps: HTableBodyProps) => {
             dataSource={records}
             pagination={false}
           />
-          {pagination === false?<div style={{paddingBottom:24}}/>:(
+          {pagination === false ? (
+            <div style={{ paddingBottom: 24 }} />
+          ) : (
             <HTablePagination
               onPageChange={onPageChange}
               paginationStyle={paginationStyle}

package/src/components/Table.tsx

@@ -44,18 +44,24 @@ export default ({
     reload,
   });
   const dispatch = useDispatch(action);
-  const { selectedRowData, rowOnChange, allSelectChange, setSelectedRowData,rowSelectionReload } = useRowObj(rowSelection);
+  const {
+    selectedRowData,
+    rowOnChange,
+    allSelectChange,
+    setSelectedRowData,
+    rowSelectionReload,
+  } = useRowObj(rowSelection);
   const [open, setOpen] = useState<boolean | undefined>();
   const tableInstance = useCurrentTable({
     table,
     reload: (params) => {
-        rowSelectionReload();
+      rowSelectionReload();
       return run(params);
     },
     changeRowData: rowOnChange,
     dispatch,
     reloadWithParams: (reloadParams = {}) => {
-        rowSelectionReload();
+      rowSelectionReload();
       return run({ ...saveParams.old, ...reloadParams });
     },
     getTableParams: () => {
@@ -78,7 +84,7 @@ export default ({
         action,
         configData,
         onFinish: (value) => {
-            rowSelectionReload();
+          rowSelectionReload();
           return run({ ...saveParams.old, ...value, current: 1 });
         },
         onPageChange: tableInstance.table.reloadWithParams,

package/src/components/hooks/useRowObj.ts

@@ -26,21 +26,21 @@ export default (rowSelection?: HRowSelection | false) => {
       selectAll: newChecked,
     });
   };
-  const rowSelectionReload=()=>{
-     if (rowSelection===false){
-       return;
-     }
-     const {preserveSelectedRowKeys}=rowSelection||{};
-     if (preserveSelectedRowKeys){
-       return;
-     }
-     rowOnChange([],[]);
-  }
+  const rowSelectionReload = () => {
+    if (rowSelection === false) {
+      return;
+    }
+    const { preserveSelectedRowKeys } = rowSelection || {};
+    if (preserveSelectedRowKeys) {
+      return;
+    }
+    rowOnChange([], []);
+  };
   return {
     rowOnChange,
     selectedRowData,
     allSelectChange,
     setSelectedRowData,
-    rowSelectionReload
+    rowSelectionReload,
   };
 };

package/src/components/index.less

@@ -115,16 +115,21 @@
   display: flex;
   position: relative;
   box-sizing: border-box;
-  overflow: auto;
   margin: -10px 0px;
   padding: 10px 0px;
-  margin-right: 12px;
  .@{ant-prefix}-hw-table-header-title-box-content {
     white-space: nowrap;
  }
 }
+.@{ant-prefix}-hw-table-header-title{
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
 .@{ant-prefix}-hw-table-header-right-node{
-
+  padding-left: 12px;
+  display: flex;
+  align-items: center;
 }
 
 .@{ant-prefix}-hw-table-render-copy{

package/src/components/modal.ts

@@ -159,7 +159,7 @@ export interface DwTableProps extends DrawerProps {
   contentRender?: (node: React.ReactNode) => React.ReactNode;
 }
 
-export interface ModalTableProps extends Omit<ModalProps,"onOk"> {
+export interface ModalTableProps extends Omit<ModalProps, "onOk"> {
   tableProps?: Omit<HTableProps, "configData" | "request">;
   dialogTable?: HDiaLogTableInstance;
   params?: Record<string, any>;
@@ -167,7 +167,7 @@ export interface ModalTableProps extends Omit<ModalProps,"onOk"> {
   request?: HTableProps["request"];
   contentRender?: (node: React.ReactNode) => React.ReactNode;
   dataSource?: any[];
-  onOk?:(e?: React.MouseEvent<HTMLElement>)=>void;
+  onOk?: (e?: React.MouseEvent<HTMLElement>) => void;
 }
 
 export type ValueTypeConfigRenderFn = (