@hw-component/table 1.9.90 → 1.9.92

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

@@ -0,0 +1,79 @@
+import React, { useEffect, useMemo, useState } from "react";
+import type { IProps, ItemProps } from "@/components/HTableBody/Options/modal";
+import type { ConfigDataModal } from "@/components/modal";
+import { getItemValue } from "@/components/HTableBody/Options/utils";
+import { useClassName } from "@/components/hooks";
+
+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]);
+};
+
+interface UseContentTreeModal {
+  columns: ConfigDataModal;
+  matchKey?: "right" | "left";
+}
+interface ColDataNode {
+  title: React.ReactNode;
+  key: string;
+}
+export const useContentTree = ({ columns, matchKey }: UseContentTreeModal) => {
+  const titleClass = useClassName("hw-table-body-option-setting-content-title");
+  return useMemo<ColDataNode[]>(() => {
+    const treeData: ColDataNode[] = [];
+    columns.forEach(({ dataIndex, title, titleStr, fixed }) => {
+      if (!dataIndex) {
+        return;
+      }
+      if (fixed !== matchKey) {
+        return;
+      }
+      const { title: cuTitleStr } = getItemValue({
+        titleStr,
+        title,
+      });
+      treeData.push({
+        title: <div className={titleClass}>{cuTitleStr}</div>,
+        key: dataIndex.toString(),
+      });
+    });
+    return treeData;
+  }, [columns]);
+};
+interface UseTreeKeysModal {
+  treeData:ColDataNode[];
+  checkKeys:string[];
+}
+
+export const useTreeKeys = ({
+  treeData,
+  checkKeys,
+}: UseTreeKeysModal) => {
+  return  useMemo(()=>{
+    const newKeys: string[] = [];
+    treeData.forEach(({ key }) => {
+      const index = checkKeys.indexOf(key);
+      if (index !== -1) {
+        newKeys.push(key);
+      }
+    });
+    return newKeys;
+  },[treeData, checkKeys])
+};

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

@@ -11,6 +11,7 @@ import { ColsSettingContent } from "./Content";
 import { Title } from "./Title";
 import type { IProps } from "./modal";
 import { useCheckKeys } from "@/components/HTableBody/Options/hooks";
+
 export default ({
   reload,
   size = "middle",
@@ -21,6 +22,7 @@ export default ({
   colStatusValue,
   reset,
   settingRender,
+  onDrop,
 }: IProps) => {
   const pointer = useClassName([
     "hw-table-pointer",
@@ -84,6 +86,7 @@ export default ({
               columns={columns}
               checkKeys={checkKeys}
               onCheck={onChange}
+              onDrop={onDrop}
             />
           }
           title={

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

@@ -12,6 +12,7 @@ export interface IProps extends OptionConfig {
   colStatusValue: Record<string, ColumnsState>;
   reset: VoidFunction;
   settingRender?: () => React.ReactNode;
+  onDrop: (columns: ConfigDataModal) => void;
 }
 
 export interface ItemProps {
@@ -19,4 +20,5 @@ export interface ItemProps {
   onCheck: (keys: string[], notCheck: string[]) => void;
   columns: ConfigDataModal;
   reset?: VoidFunction;
+  onDrop: (columns: ConfigDataModal) => void;
 }

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

@@ -13,3 +13,31 @@ export const getItemValue = (data: ConfigItemModal) => {
     ...oData,
   };
 };
+
+interface MoveColProps {
+  startKey: string;
+  endKey: string;
+  data: ConfigDataModal;
+}
+
+export const moveCol = ({ startKey, endKey, data }: MoveColProps) => {
+  const indexArray = [-1, -1];
+  data.forEach((item, index) => {
+    const { dataIndex } = item;
+    if (!dataIndex) {
+      return;
+    }
+    if (dataIndex === startKey) {
+      indexArray[0] = index;
+    }
+    if (dataIndex === endKey) {
+      indexArray[1] = index;
+    }
+  });
+  const [oldIndex, newIndex] = indexArray;
+  const newData = [...data];
+  const oldItem = data[oldIndex];
+  newData.splice(oldIndex, 1);
+  newData.splice(newIndex, 0, oldItem);
+  return newData;
+};

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

@@ -1,6 +1,6 @@
 import { useHTableContext } from "../../context";
 import { Checkbox } from "antd";
-import {RowRadioSelectionProps} from "@/components/HTableBody/modal";
+import type { RowRadioSelectionProps } from "@/components/HTableBody/modal";
 
 export default ({
   data,

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

@@ -1,7 +1,7 @@
 import type { HTableProps } from "@/components/modal";
 import type { Key } from "react";
 import { useHTableContext } from "@/components/context";
-import {RowRadioSelectionProps} from '../modal';
+import type { RowRadioSelectionProps } from "../modal";
 
 const getRowKey = (item: any, index: number, rowKey: HTableProps["rowKey"]) => {
   return typeof rowKey === "function"

package/src/components/HTableBody/RowRadioBoxSelection.tsx

@@ -1,6 +1,6 @@
 import { useHTableContext } from "@/components/context";
 import { Radio } from "antd";
-import {RowRadioSelectionProps} from './modal';
+import type { RowRadioSelectionProps } from "./modal";
 
 export const RowRadioSelection = ({
   data,

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

@@ -78,8 +78,13 @@ export const useCols = ({
   useEffect(() => {
     setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
+  const resetCols = () => {
+    setCols(changeConfigData(configData));
+  };
   return {
     cols,
+    setCols,
+    resetCols,
   };
 };
 
@@ -98,6 +103,7 @@ export const useColumnsStateType = ({
   const [selfValue, setSelfValue] = useState<
     Record<string, ColumnsState> | undefined
   >(defaultValue);
+
   const initTableColsVal = useMemo(() => {
     return selfValue || {};
   }, []);
@@ -118,7 +124,8 @@ export const useColumnsStateType = ({
     setSelfValue(newObj);
     onChange?.(newObj);
   };
-  const reset = () => {
+
+  const resetCheckCol = () => {
     setSelfValue(initTableColsVal);
   };
   return {
@@ -126,6 +133,6 @@ export const useColumnsStateType = ({
     persistenceKey,
     value: selfValue,
     onChange: change,
-    reset,
+    resetCheckCol,
   };
 }; //设置选项

package/src/components/HTableBody/index.tsx

@@ -65,19 +65,20 @@ export default (bodyProps: HTableBodyProps) => {
   const bodyConfigData = configData || contextConfigData;
   const { records } = data || {};
   const tableInstance = table || contextTableInstance;
-  const { cols } = useCols({
+
+  const { cols, setCols, resetCols } = useCols({
     configData: bodyConfigData,
     table: tableInstance,
     rowSelection,
     bordered,
   });
-
-  const { value, onChange, reset, ...selfColStatus } = useColumnsStateType({
-    columnsState,
-    columns: cols,
-  });
-
+  const { value, onChange, resetCheckCol, ...selfColStatus } =
+    useColumnsStateType({
+      columnsState,
+      columns: cols,
+    });
   useSynchronousKeys({ selectedRowKeys, records, rowKey });
+
   const optionsNode = options && (
     <Options
       reload={() => {
@@ -89,7 +90,11 @@ export default (bodyProps: HTableBodyProps) => {
       setSizeChange={setCuSize}
       colStatusValue={value || {}}
       onChange={onChange}
-      reset={reset}
+      reset={() => {
+        resetCheckCol();
+        resetCols();
+      }}
+      onDrop={setCols}
     />
   );
   const defaultOptionsNode = optionsRender
@@ -131,7 +136,7 @@ export default (bodyProps: HTableBodyProps) => {
         >
           <ProTable
             {...props}
-            rowClassName={(rowClassNameFn as any)}
+            rowClassName={rowClassNameFn as any}
             bordered={bordered}
             columnsState={{
               ...selfColStatus,

package/src/components/HTableBody/modal.ts

@@ -1,5 +1,6 @@
 import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
-import React, {Key} from "react";
+import type { Key } from "react";
+import type React from "react";
 import type { ProTableProps } from "@ant-design/pro-table";
 import type {
   ActionRenderFn,
@@ -42,7 +43,7 @@ export interface HTableBodyProps
 
 export interface RowRadioSelectionProps {
   data: any;
-  onChange?:(keys:Key[],data:any[])=>void;
+  onChange?: (keys: Key[], data: any[]) => void;
   getCheckboxProps?: HRowSelection["getCheckboxProps"];
   index: number;
-}
+}

package/src/components/hooks/useRowObj.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import {  useState } from "react";
+import { useState } from "react";
 import type { RowObj } from "../modal";
 import type { HRowSelection } from "../modal";
 

package/src/components/index.less

@@ -85,6 +85,10 @@
 .@{ant-prefix}-hw-table-body-option-setting-content-title{
   display: flex;
 }
+.@{ant-prefix}-hw-table-op-tree-content{
+  padding: 6px 6px 6px 0px;
+  width: 100%;
+}
 .@{ant-prefix}-hw-table-body-option-tree{
   .@{ant-prefix}-tree-treenode{
      width: 100%;

package/src/components/modal.ts

@@ -5,7 +5,8 @@ import type {
   HFormInstance,
 } from "@hw-component/form/es/Form/modal";
 import type { ColProps, FormInstance } from "antd";
-import React, {Key} from "react";
+import type { Key } from "react";
+import type React from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
@@ -72,7 +73,7 @@ export type actionFn = (...arg) => void;
 
 export interface RowSelectionOuter {
   allPageCheck?: boolean;
-  onChange?:(keys:Key[],data:any[])=>void;
+  onChange?: (keys: Key[], data: any[]) => void;
 }
 export type HRowSelection = RowSelectionOuter &
   (TableProps<any>["rowSelection"] & {

package/src/pages/Table/index.tsx

@@ -5,7 +5,16 @@ import {
   HTableHeaderSubBtn,
   HTableHeader,
 } from "@/components";
-import { Button, Card, Tooltip, Typography, Tag, Row, Space } from "antd";
+import {
+  Button,
+  Card,
+  Tooltip,
+  Typography,
+  Tag,
+  Row,
+  Space,
+  Table,
+} from "antd";
 import { HFormConfigProvider, HRangePicker } from "@hw-component/form";
 import { SettingOutlined } from "@ant-design/icons";
 import ProTable from "@ant-design/pro-table";
@@ -58,11 +67,41 @@ export const configData = [
     dataIndex: "img",
     width: 120,
     valueType: "image",
+  },
+  {
+    title: "图片123",
+    dataIndex: "img123",
+    width: 120,
+    valueType: "image",
     valueTypeProps: {
       fallback:
         "data:image/png;base64,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",
     },
   },
+  {
+    title: "操作",
+    dataIndex: "op",
+    width: 120,
+    fixed: "right",
+  },
+  {
+    title: "操作1",
+    dataIndex: "op1",
+    width: 120,
+    fixed: "right",
+  },
+  {
+    title: "操作2",
+    dataIndex: "op2",
+    width: 120,
+    fixed: "left",
+  },
+  {
+    title: "操作3",
+    dataIndex: "op3",
+    width: 120,
+    fixed: "left",
+  },
 ];
 const maker = (name) => {
   const data = [];
@@ -77,7 +116,7 @@ const maker = (name) => {
 };
 export default () => {
   const hTable = useHTable();
-  const [width,setWidth]=useState(0);
+  const [width, setWidth] = useState(0);
   const { loading, data } = useRequest(() => {
     const arrayData: any[] = [];
     for (let i = 0; i < 10; i = i + 1) {
@@ -155,29 +194,20 @@ export default () => {
             headerTitle={
               <Space size={8}>
                 <Button
-                    onClick={() => {
-                      setTimeout(()=>{
-                        setWidth(1000);
-                      },1000)
-                      console.log(hTable.table.getColSettingKeys());
-                    }}
+                  onClick={() => {
+                    setTimeout(() => {
+                      setWidth(1000);
+                    }, 1000);
+                    console.log(hTable.table.getColSettingKeys());
+                  }}
                 >
                   操作
                 </Button>
-               <div>
-                 <div style={{width,height:50,backgroundColor:"red"}}></div>
-               </div>
+                <div>
+                  <div style={{ width, height: 50, backgroundColor: "red" }} />
+                </div>
               </Space>
             }
-            options={{
-              settingRender: () => {
-                return (
-                  <Tooltip title="321312312312321">
-                    <SettingOutlined width={24} />
-                  </Tooltip>
-                );
-              },
-            }}
             pagination={false}
           />
         </HTableConfig>

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

@@ -1,24 +0,0 @@
-import { useMemo } from "react";
-import type { 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]);
-};