@hw-component/table 1.9.79 → 1.9.80

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 = (

package/src/components/render/CopyComponent.tsx

@@ -2,7 +2,7 @@ import copy from "copy-to-clipboard";
 import { message, Typography } from "antd";
 import type { EllipsisConfig } from "antd/lib/typography/Base";
 import { useClassName } from "../hooks";
-import {useMemo} from "react";
+import { useMemo } from "react";
 const { Paragraph } = Typography;
 interface IProps {
   text: string;
@@ -12,14 +12,14 @@ interface IProps {
 }
 export default ({ cpText, text, successMsg, ellipsis }: IProps) => {
   const className = useClassName("hw-table-render-copy");
-  const propsEllipsis=useMemo(()=>{
-       if (ellipsis===true){
-          return  {
-               tooltip:text
-           }
-       }
-       return ellipsis;
-  },[ellipsis,text]);
+  const propsEllipsis = useMemo(() => {
+    if (ellipsis === true) {
+      return {
+        tooltip: text,
+      };
+    }
+    return ellipsis;
+  }, [ellipsis, text]);
   return (
     <Paragraph
       ellipsis={propsEllipsis}

package/src/components/render/TagsComponent.tsx

@@ -13,9 +13,9 @@ interface IProps {
   fieldNames?: { label?: string; value?: string };
   tableInstance?: HTableInstance;
   maxLen?: number | null;
-  popoverContentRender?:(node:React.ReactNode)=>React.ReactNode;
-  contentItemRender?:(item:any)=>React.ReactNode;
-  extra?:React.ReactNode;
+  popoverContentRender?: (node: React.ReactNode) => React.ReactNode;
+  contentItemRender?: (item: any) => React.ReactNode;
+  extra?: React.ReactNode;
 }
 const getTooltipProps = (
   title: string,
@@ -48,7 +48,7 @@ const TagsComponent = (props: IProps) => {
     tableInstance,
     maxLen,
     popoverContentRender,
-    extra
+    extra,
   } = props;
   const { label = "label", value = "value" } = fieldNames;
   const { tagData, moreTag } = useMemo(() => {
@@ -65,7 +65,7 @@ const TagsComponent = (props: IProps) => {
     };
   }, [data, maxLen]);
   const moreLen = moreTag?.length;
-  const {contentItemRender,...childProps}=props;
+  const { contentItemRender, ...childProps } = props;
   return (
     <Row gutter={[0, 8]}>
       {tagData?.map((tagItem, index) => {
@@ -88,7 +88,7 @@ const TagsComponent = (props: IProps) => {
                   onClose?.(indexKey, tableInstance);
                 }}
               >
-                {contentItemRender?contentItemRender(tagItem):tagItem}
+                {contentItemRender ? contentItemRender(tagItem) : tagItem}
               </Tag>
             </Tooltip>
           );
@@ -110,13 +110,23 @@ const TagsComponent = (props: IProps) => {
                 cuTagProps?.onClose(cuKey, tableInstance);
               }}
             >
-              {contentItemRender?contentItemRender(tagLabel):tagLabel}
+              {contentItemRender ? contentItemRender(tagLabel) : tagLabel}
             </Tag>
           </Tooltip>
         );
       })}
       {!moreLen ? null : (
-        <Popover content={popoverContentRender?popoverContentRender(<TagsComponent {...childProps} maxLen={null} />):<TagsComponent {...childProps} maxLen={null} />}>
+        <Popover
+          content={
+            popoverContentRender ? (
+              popoverContentRender(
+                <TagsComponent {...childProps} maxLen={null} />
+              )
+            ) : (
+              <TagsComponent {...childProps} maxLen={null} />
+            )
+          }
+        >
           <Tag>...等{data.length}个</Tag>
         </Popover>
       )}

package/src/pages/DwTable/index.tsx

@@ -1,5 +1,5 @@
 import { Button } from "antd";
-import {HDwTable, HModalTable, HTable, useHDialogTable} from "@/components";
+import { HDwTable, HModalTable, HTable, useHDialogTable } from "@/components";
 const configData = [
   {
     title: "座位",
@@ -100,9 +100,9 @@ const Test = () => {
         title="111"
         configData={configData}
         tableProps={{
-          rowSelection:{
-            type:"radio"
-          }
+          rowSelection: {
+            type: "radio",
+          },
         }}
         request={req2}
         contentRender={(node) => {