@hw-component/table 1.9.61 → 1.9.63

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

@@ -0,0 +1,49 @@
+import { useHTableContext } from "../../context";
+import { Checkbox } from "antd";
+import type { HRowSelection } from "../../modal";
+
+
+interface RowSelectionBoxProps {
+    data: any;
+    onChange?: HRowSelection["onChange"];
+    getCheckboxProps?: HRowSelection["getCheckboxProps"];
+    index: number;
+}
+export default ({
+                                         data,
+                                         onChange,
+                                         index,
+                                         getCheckboxProps,
+                                     }: RowSelectionBoxProps) => {
+    const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
+    const { rowData = [], keys = [] } = selectedRowData;
+    const key = typeof rowKey === "function" ? rowKey(data, index) : data[rowKey];
+    const add = () => {
+        const newKeys = [...keys];
+        const newRowData = [...rowData];
+        newKeys.push(key);
+        newRowData.push(data);
+        rowOnChange(newKeys, newRowData);
+        onChange?.(newKeys, newRowData);
+    };
+    const cancel = () => {
+        const newKeys = [...keys];
+        const newRowData = [...rowData];
+        const keyIndex = newKeys.indexOf(key);
+        newKeys.splice(keyIndex, 1);
+        newRowData.splice(keyIndex, 1);
+        rowOnChange(newKeys, newRowData);
+        onChange?.(newKeys, newRowData);
+    };
+    const check = (e) => {
+        const checked = e.target.checked;
+        if (checked) {
+            add();
+            return;
+        }
+        cancel();
+    };
+    const { disabled = false } = getCheckboxProps?.(data) || {};
+    const checked = keys.indexOf(key) !== -1;
+    return <Checkbox checked={checked} onChange={check} disabled={disabled} />;
+};

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

@@ -0,0 +1,66 @@
+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]);
+
+    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>
+        );
+    }
+    return (
+        <Checkbox checked={checked} onChange={checkChange} disabled={disabled} />
+    );
+};

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

@@ -0,0 +1,64 @@
+import {HTableProps} from "@/components/modal";
+import {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();
+    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?.([], []);
+    };
+
+    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

@@ -0,0 +1,27 @@
+import {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;
+}
+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} />;
+};

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

@@ -0,0 +1,51 @@
+import {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';
+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}
+                />
+            );
+        },
+    };
+};
+
+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

@@ -1,6 +1,5 @@
 import { useHTableContext } from "@/components/context";
-import React, { useEffect, useMemo, useState } from "react";
-import { GetRowKey } from "rc-table/lib/interface";
+import { useEffect, useMemo, useState } from "react";
 import type {
   ConfigDataModal,
   ConfigItemModal,
@@ -12,41 +11,17 @@ import { useClassName } from "@/components/hooks";
 import { useHTableConfigContext } from "@/components/TableConfig";
 import { textTypes } from "@/components/render/config";
 import configRender from "@/components/render";
-import {
-  RowSelectionBox,
-  RowSelectionTitle,
-} from "@/components/HTableBody/RowSelection";
 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";
-
-const rowSelectionCol = (rowSelection?: HRowSelection) => {
-  const { allPageCheck, onChange, getCheckboxProps } = rowSelection || {};
-  return {
-    title: (
-      <RowSelectionTitle
-        allPageCheck={allPageCheck}
-        onChange={onChange}
-        getCheckboxProps={getCheckboxProps}
-      />
-    ),
-    width: 36,
-    rowSelectionTitle: true,
-    fixed: "left",
-    align: "center",
-    render: (dom, data, index) => {
-      return (
-        <RowSelectionBox
-          data={data}
-          index={index}
-          onChange={onChange}
-          getCheckboxProps={getCheckboxProps}
-        />
-      );
-    },
-  };
-};
-
+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,
@@ -93,7 +68,7 @@ export const useCols = ({
       return !item.hideInTable;
     });
     if (rowSelection !== false) {
-      colsArray.splice(0, 0, rowSelectionCol(rowSelection) as any);
+      colsArray.splice(0, 0, checkBoxMk(rowSelection||{}) as any);
     }
     return colsArray.map((item, index) => {
       const lastItem = colsArray[index - 1];
@@ -107,6 +82,7 @@ export const useCols = ({
     cols,
   };
 };
+
 interface useColumnsStateTypeModal {
   columnsState?: ColumnsStateType;
   columns: ConfigDataModal;

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

@@ -4,6 +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";
 
 export const useSize = (size: SizeType) => {
   const [cuSize, setCuSize] = useState(size);
@@ -104,3 +105,14 @@ export const useSynchronousKeys = ({
     }
   }, [selectedRowKeys, records, rowKey]);
 };
+
+
+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])
+}

package/src/components/HTableBody/index.tsx

@@ -2,7 +2,7 @@ import ProTable from "@ant-design/pro-table";
 import {
   useSize,
   useTableChange,
-  useSynchronousKeys,
+  useSynchronousKeys, useAlwaysShowAlert,
 } from "./hooks/useControl";
 import { useCols, useColumnsStateType } from "./hooks/useColData";
 import { useHTableContext } from "../context";
@@ -44,8 +44,7 @@ export default (bodyProps: HTableBodyProps) => {
     bordered,
     ...props
   } = bodyProps;
-  const { selectedRowKeys, alwaysShowAlert: configAlwaysShowAlert } =
-    rowSelection || {};
+  const { selectedRowKeys, alwaysShowAlert: configAlwaysShowAlert } = rowSelection || {};
   const {
     tableInstance: contextTableInstance,
     configData: contextConfigData,
@@ -89,11 +88,8 @@ export default (bodyProps: HTableBodyProps) => {
       reset={reset}
     />
   );
-  const { keys = [], selectAll } = selectedRowData;
-  const defaultOptionsNode = optionsRender
-    ? optionsRender(optionsNode)
-    : optionsNode;
-  const alwaysShowAlert = keys.length > 0 || selectAll || configAlwaysShowAlert;
+  const defaultOptionsNode = optionsRender ? optionsRender(optionsNode) : optionsNode;
+  const alwaysShowAlert = useAlwaysShowAlert(selectedRowData,configAlwaysShowAlert);
   const className = useClassName("hw-table-body");
   const { tableStyle: defaultTableStyle } = useHTableConfigContext({
     tableStyle,
@@ -104,6 +100,7 @@ export default (bodyProps: HTableBodyProps) => {
     table: tableInstance,
     localSorter,
   });
+
   return (
     <div style={defaultTableStyle} className={`hw_table_body  ${className}`}>
       <Space size={16} direction={"vertical"} style={{ width: "100%" }}>
@@ -138,7 +135,6 @@ export default (bodyProps: HTableBodyProps) => {
               paddingBottom: 0,
             }}
             options={false}
-            rowSelection={false}
             loading={loading}
             rowKey={rowKey}
             dataSource={records}

package/src/components/Table.tsx

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

package/src/components/hooks/useRowObj.ts

@@ -13,7 +13,6 @@ export default (rowSelection?: HRowSelection | false) => {
   };
   const [selectedRowData, setSelectedRowData] = useState<RowObj>({});
   const { selectAll = false } = selectedRowData;
-  const selectedRowDataSource = useMemo(() => {}, []);
   const rowOnChange = (keys: React.Key[], rowData: any[]) => {
     setSelectedRowData({
       keys,
@@ -27,10 +26,21 @@ export default (rowSelection?: HRowSelection | false) => {
       selectAll: newChecked,
     });
   };
+  const rowSelectionReload=()=>{
+     if (rowSelection===false){
+       return;
+     }
+     const {preserveSelectedRowKeys}=rowSelection||{};
+     if (preserveSelectedRowKeys){
+       return;
+     }
+     rowOnChange([],[]);
+  }
   return {
     rowOnChange,
     selectedRowData,
     allSelectChange,
     setSelectedRowData,
+    rowSelectionReload
   };
 };

package/src/pages/DwTable/index.tsx

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

package/src/pages/Table/index.tsx

@@ -181,6 +181,7 @@ export default () => {
     size: "10",
     current: "1",
   });
+  const [keys,setKeys]=useState([]);
   return (
     <HFormConfigProvider>
       <div>
@@ -192,12 +193,6 @@ export default () => {
         >
           获取
         </div>
-        {/*<ProTable*/}
-        {/*  columns={configData}*/}
-        {/*  scroll={{ x: 1000 }}*/}
-        {/*  loading={loading}*/}
-        {/*  dataSource={data}*/}
-        {/*/>*/}
         <HTable
           configData={configData}
           rowKey={(rowData, index) => {
@@ -212,6 +207,7 @@ export default () => {
           }}
           rowSelection={{
             allPageCheck: false,
+            preserveSelectedRowKeys:true,
           }}
           affixProps={{
             target: () => document.querySelector(".body"),
@@ -227,7 +223,6 @@ export default () => {
             mobileList: "mobileList",
           }}
           request={(params) => {
-            console.log(params);
             return Promise.resolve({
               current: 1,
               records: maker(`第${100}页`),

package/es/HTableBody/RowSelection.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import type { HRowSelection } from "../modal";
-export declare const RowSelectionTitle: ({ allPageCheck, onChange, getCheckboxProps, }: HRowSelection) => JSX.Element;
-interface RowSelectionBoxProps {
-    data: any;
-    onChange?: HRowSelection["onChange"];
-    getCheckboxProps?: HRowSelection["getCheckboxProps"];
-    index: number;
-}
-export declare const RowSelectionBox: ({ data, onChange, index, getCheckboxProps, }: RowSelectionBoxProps) => JSX.Element;
-export {};