@hw-component/table 1.9.93 → 1.9.95

package/src/components/DialogTable/DwEditTable.tsx

@@ -0,0 +1,111 @@
+import { Drawer } from "antd";
+import type { DwTableProps } from "../modal";
+import { useCurrentTable, useTableProps, useVisible } from "./hooks";
+import { EditTableContent } from "./Content";
+import { CloseOutlined } from "@ant-design/icons";
+import { useClassName } from "../hooks";
+import { ProColumns } from "@ant-design/pro-table/lib/typing";
+
+export default ({
+  configData: configDataProps,
+  request: requestProps,
+  editTableProps = {},
+  dialogTable,
+  visible = false,
+  bodyStyle = {},
+  onClose,
+  afterVisibleChange,
+  contentRender,
+  width = 888,
+  footer = null,
+  ...props
+}: DwTableProps<ProColumns[]>) => {
+  const { modalVisible, setModalVisible } = useVisible(visible);
+  const className = useClassName("hw-table-pointer-not-hover");
+  const { modalTableParams, setModalTableParams } = useTableProps({
+    ...props,
+    configData: configDataProps,
+    request: requestProps,
+  });
+  const currentTable = useCurrentTable({
+    show: (showParams) => {
+      if (showParams) {
+        setModalTableParams((oldParams) => {
+          const {
+            configData,
+            request,
+            title,
+            params: oldP,
+            dataSource: oldDataSource,
+          } = oldParams;
+          const {
+            title: showTitle = title,
+            configData: showConfigData = configData,
+            request: showReq = request,
+            params = oldP,
+            dataSource = oldDataSource,
+          } = showParams;
+          currentTable.params = params;
+          return {
+            title: showTitle,
+            request: showReq,
+            configData: showConfigData as any,
+            params,
+            dataSource,
+          };
+        });
+      }
+      setModalVisible(true);
+    },
+    hide: () => {
+      setModalVisible(false);
+    },
+    dialogTable,
+  });
+  const { configData, request, dataSource, title, params } = modalTableParams;
+  const req = request
+    ? (reqParams) => {
+        return request({ ...params, ...reqParams });
+      }
+    : undefined;
+  return (
+    <Drawer
+      {...props}
+      footer={footer}
+      visible={modalVisible}
+      onClose={(e) => {
+        setModalVisible(false);
+        onClose?.(e);
+      }}
+      destroyOnClose
+      title={title}
+      closable={false}
+      extra={
+        <CloseOutlined
+          className={className}
+          onClick={(e) => {
+            setModalVisible(false);
+            onClose?.(e as any);
+          }}
+        />
+      }
+      width={width}
+      bodyStyle={{ padding: 0, paddingBottom: 12, ...bodyStyle }}
+      afterVisibleChange={(changeVisible) => {
+        if (!changeVisible) {
+          currentTable.form.resetFields();
+        }
+        afterVisibleChange?.(changeVisible);
+      }}
+    >
+      <EditTableContent
+        contentRender={contentRender}
+        editTableProps={editTableProps}
+        configData={configData || []}
+        dialogTable={currentTable}
+        request={req}
+        dataSource={dataSource}
+      />
+    </Drawer>
+  );
+};

package/src/components/DialogTable/DwTable.tsx

@@ -1,9 +1,10 @@
 import { Drawer } from "antd";
 import type { DwTableProps } from "../modal";
 import { useCurrentTable, useTableProps, useVisible } from "./hooks";
-import Content from "./Content";
+import { TableContent } from "./Content";
 import { CloseOutlined } from "@ant-design/icons";
 import { useClassName } from "../hooks";
+
 export default ({
   configData: configDataProps,
   request: requestProps,
@@ -96,7 +97,7 @@ export default ({
         afterVisibleChange?.(changeVisible);
       }}
     >
-      <Content
+      <TableContent
         contentRender={contentRender}
         tableProps={tableProps}
         configData={configData || []}

package/src/components/DialogTable/ModalEditTable.tsx

@@ -0,0 +1,99 @@
+import { Modal } from "antd";
+import type { ModalTableProps } from "../modal";
+import { useCurrentTable, useTableProps, useVisible } from "./hooks";
+import { EditTableContent } from "./Content";
+import { ProColumns } from "@ant-design/pro-table/lib/typing";
+
+export default ({
+  configData: configDataProps,
+  request: requestProps,
+  editTableProps = {},
+  dialogTable,
+  visible = false,
+  onCancel,
+  bodyStyle = {},
+  afterClose,
+  contentRender,
+  width = 666,
+  footer = null,
+  ...props
+}: ModalTableProps<ProColumns[]>) => {
+  const { modalVisible, setModalVisible } = useVisible(visible);
+  const { modalTableParams, setModalTableParams } = useTableProps<ProColumns[]>(
+    {
+      ...props,
+      configData: configDataProps,
+      request: requestProps,
+    }
+  );
+  const currentTable = useCurrentTable({
+    show: (showParams) => {
+      if (showParams) {
+        setModalTableParams((oldParams) => {
+          const {
+            configData,
+            request,
+            title,
+            params: oldP,
+            dataSource: oldDataSource,
+          } = oldParams;
+          const {
+            title: showTitle = title,
+            configData: showConfigData = configData,
+            request: showReq = request,
+            dataSource = oldDataSource,
+            params = oldP,
+          } = showParams;
+          currentTable.params = params;
+          return {
+            title: showTitle,
+            request: showReq,
+            configData: showConfigData as any,
+            params,
+            dataSource,
+          };
+        });
+      }
+      setModalVisible(true);
+    },
+    hide: () => {
+      setModalVisible(false);
+    },
+    dialogTable,
+  });
+
+  const { configData, dataSource, request, title, params } = modalTableParams;
+  const req = request
+    ? (reqParams) => {
+        return request({ ...params, ...reqParams });
+      }
+    : undefined;
+  return (
+    <Modal
+      {...props}
+      footer={footer}
+      visible={modalVisible}
+      onCancel={(e) => {
+        setModalVisible(false);
+        onCancel?.(e);
+      }}
+      destroyOnClose
+      title={title}
+      width={width}
+      bodyStyle={{ padding: "0px 0px 12px", ...bodyStyle }}
+      afterClose={() => {
+        currentTable.form.resetFields();
+        afterClose?.();
+      }}
+    >
+      <EditTableContent
+        contentRender={contentRender}
+        editTableProps={editTableProps}
+        configData={configData || []}
+        dialogTable={currentTable}
+        request={req}
+        dataSource={dataSource}
+      />
+    </Modal>
+  );
+};

package/src/components/DialogTable/ModalTable.tsx

@@ -1,7 +1,8 @@
 import { Modal } from "antd";
 import type { ModalTableProps } from "../modal";
 import { useCurrentTable, useTableProps, useVisible } from "./hooks";
-import Content from "./Content";
+import { TableContent } from "./Content";
+
 export default ({
   configData: configDataProps,
   request: requestProps,
@@ -82,7 +83,7 @@ export default ({
         afterClose?.();
       }}
     >
-      <Content
+      <TableContent
         contentRender={contentRender}
         tableProps={tableProps}
         configData={configData || []}

package/src/components/DialogTable/hooks.ts

@@ -21,14 +21,17 @@ export const useHDialogTable = () => {
 interface ParamsModal extends HOnDiaLogTableInstance {
   dialogTable?: HDiaLogTableInstance;
 }
-export const useTableProps = ({
+
+type TablePropsModal<T> = Omit<ModalTableProps<T>, "tableProps">;
+
+export function useTableProps<T>({
   configData,
   params,
   title,
   request,
   dataSource,
-}: Omit<ModalTableProps, "tableProps">) => {
-  const [modalTableParams, setModalTableParams] = useState({
+}: TablePropsModal<T>) {
+  const [modalTableParams, setModalTableParams] = useState<TablePropsModal<T>>({
     params,
     title,
     configData,
@@ -45,11 +48,19 @@ export const useTableProps = ({
       });
     }
   }, [configData]);
+  useEffect(() => {
+    setModalTableParams((oldVal) => {
+      return {
+        ...oldVal,
+        dataSource,
+      };
+    });
+  }, [dataSource]);
   return {
     modalTableParams,
     setModalTableParams,
   };
-};
+}
 export const useCurrentTable = ({ show, hide, dialogTable }: ParamsModal) => {
   const cuDialogTableInstance = useHDialogTable();
   const dialogTableInstance = dialogTable || cuDialogTableInstance;

package/src/components/EditTable/hooks.ts

@@ -0,0 +1,43 @@
+import { useRequest } from "ahooks";
+import { EditTableProps } from "./modal";
+import { MutableRefObject, useMemo, useRef } from "react";
+import type { ActionType } from "@ant-design/pro-table";
+import { EditableFormInstance } from "@ant-design/pro-table/lib/components/EditableTable";
+
+export const useListRequest = ({ request, dataSource }: EditTableProps) => {
+  const saveParams = useMemo(() => {
+    return {
+      params: {},
+    };
+  }, []);
+  return useRequest(
+    async (params) => {
+      const newParams = {
+        ...saveParams.params,
+        ...params,
+      };
+      saveParams.params = newParams;
+      if (request) {
+        return request(newParams);
+      }
+      if (Array.isArray(dataSource)) {
+        return dataSource;
+      }
+      return dataSource;
+    },
+    { manual: true, refreshDeps: [dataSource] }
+  );
+};
+
+export const useCuRef = ({ actionRef, editableFormRef }: EditTableProps) => {
+  const defaultActionRef = useRef<ActionType>();
+  const defaultTableRef = useRef<EditableFormInstance>();
+  const cuActionRef = (actionRef ||
+    defaultActionRef) as MutableRefObject<ActionType>;
+  const cuEditableFormRef = (editableFormRef ||
+    defaultTableRef) as MutableRefObject<EditableFormInstance>;
+  return {
+    cuActionRef,
+    cuEditableFormRef,
+  };
+};

package/src/components/EditTable/index.tsx

@@ -0,0 +1,118 @@
+import { EditableProTable } from "@ant-design/pro-table";
+import { EditTableProps } from "./modal";
+import { useClassName } from "@/components/hooks";
+import HTablePagination from "../HTablePagination";
+import { ConfigProvider } from "antd";
+import {
+  emptyDefaultRender,
+  errorDefaultRender,
+} from "@/components/HTableBody/defaultRender";
+import { useHTableConfigContext } from "@/components/TableConfig";
+import { useCuRef, useListRequest } from "./hooks";
+import React from "react";
+
+export default ({
+  configData,
+  rowKey = "id",
+  creatorButtonText = "新增一列",
+  recordCreatorProps = {},
+  defaultRecordValue = {},
+  pagination,
+  editable = {},
+  dataSource,
+  request,
+  manual,
+  emptyRender,
+  errorRender,
+  onAdd,
+  onEdit,
+  actionRef,
+  editableFormRef,
+  ...props
+}: EditTableProps) => {
+  const tableBody = useClassName("hw-table-body");
+  const { loading, data, error, run } = useListRequest({
+    request,
+    dataSource,
+  });
+  const {
+    emptyRender: tableEmptyRender = emptyDefaultRender,
+    errorRender: tableErrorRender = errorDefaultRender,
+  } = useHTableConfigContext({ emptyRender, errorRender });
+
+  const isLocalData = Array.isArray(data);
+  const values = isLocalData ? data : data?.record;
+  const { cuActionRef, cuEditableFormRef } = useCuRef({
+    actionRef,
+    editableFormRef,
+  });
+
+  return (
+    <div className={tableBody}>
+      <ConfigProvider
+        renderEmpty={() => {
+          if (error) {
+            return tableErrorRender?.({
+              reload: cuActionRef.current.reload,
+              error,
+            });
+          }
+          return tableEmptyRender?.();
+        }}
+      >
+        <EditableProTable
+          columns={configData as any}
+          loading={loading}
+          rowKey={rowKey}
+          editableFormRef={cuEditableFormRef}
+          manualRequest={manual}
+          request={run}
+          actionRef={cuActionRef}
+          value={values}
+          recordCreatorProps={{
+            position: "bottom",
+            record: () => ({ id: "add" }),
+            creatorButtonText,
+            ...recordCreatorProps,
+          }}
+          editable={{
+            type: "single",
+            onCancel: async (keys) => {
+              cuEditableFormRef.current?.resetFields([keys]);
+            },
+            actionRender: (trow, tconfig, defaultDoms) => {
+              return [defaultDoms.save, defaultDoms.cancel];
+            },
+            onSave: async (key, row) => {
+              const { index, id, ...oRow } = row;
+              if (key === "add") {
+                await onAdd?.(oRow);
+                cuEditableFormRef.current?.resetFields(["add"]);
+                cuActionRef.current?.reload();
+                return;
+              }
+              await onEdit?.({
+                id,
+                ...oRow,
+              });
+              cuEditableFormRef.current?.resetFields(["key"]);
+              cuActionRef.current?.reload();
+            },
+            ...editable,
+          }}
+          {...props}
+        />
+      </ConfigProvider>
+      <HTablePagination
+        data={isLocalData ? null : data}
+        {...pagination}
+        onChange={(page, pageSize) => {
+          run({
+            size: pageSize,
+            current: page,
+          });
+        }}
+      />
+    </div>
+  );
+};

package/src/components/EditTable/modal.ts

@@ -0,0 +1,26 @@
+import { EditableProTableProps } from "@ant-design/pro-table/lib/components/EditableTable";
+import { ParamsType } from "@ant-design/pro-provider";
+import { IPaginationProps } from "../HTablePagination";
+import { EmptyPageRender, ErrorPageRender } from "../modal";
+import { ProColumns } from "@ant-design/pro-table/lib/typing";
+
+export interface EditTableProps<T = any>
+  extends Omit<
+    EditableProTableProps<T, ParamsType>,
+    "recordCreatorProps" | "request" | "pagination"
+  > {
+  creatorButtonText?: string;
+  defaultRecordValue?: T;
+  recordCreatorProps?: Partial<
+    EditableProTableProps<T, ParamsType>["recordCreatorProps"]
+  >;
+  dataSource?: any[];
+  request?: (params: Record<string, any>) => Promise<T>;
+  pagination?: IPaginationProps;
+  manual?: boolean;
+  emptyRender?: EmptyPageRender;
+  errorRender?: ErrorPageRender;
+  onAdd?: (data: T) => Promise<void>;
+  onEdit?: (data: T) => Promise<void>;
+  configData?: ProColumns<T>[];
+}

package/src/components/HTableBody/defaultRender.tsx

@@ -10,19 +10,29 @@ const pubProps = {
 export const emptyDefaultRender = () => {
   return <Empty image={empty_bg} description="暂无数据~" {...pubProps} />;
 };
-export const errorDefaultRender = (
-  tableInstance: HTableInstance,
-  error: Error
-) => {
+interface errorDefaultRenderParams {
+  reload?: () => void;
+  error: Error;
+  tableInstance?: HTableInstance;
+}
+export const errorDefaultRender = ({
+  error,
+  tableInstance,
+  reload,
+}: errorDefaultRenderParams) => {
+  const pageReload = () => {
+    if (tableInstance) {
+      return tableInstance.table.reloadWithParams();
+    }
+    return reload?.();
+  };
   return (
     <Empty image={errorBg} description={error.message} {...pubProps}>
       <Button
         type={"primary"}
         ghost
         style={{ borderRadius: 16 }}
-        onClick={() => {
-          tableInstance.table.reloadWithParams();
-        }}
+        onClick={pageReload}
       >
         刷新
       </Button>

package/src/components/HTableBody/index.tsx

@@ -129,7 +129,7 @@ export default (bodyProps: HTableBodyProps) => {
         <ConfigProvider
           renderEmpty={() => {
             if (error) {
-              return tableErrorRender?.(tableInstance, error);
+              return tableErrorRender?.({ tableInstance, error });
             }
             return tableEmptyRender?.(tableInstance);
           }}

package/src/components/HTableBody/modal.ts

@@ -2,13 +2,15 @@ import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar"
 import type { Key } from "react";
 import type React from "react";
 import type { ProTableProps } from "@ant-design/pro-table";
-import type {
+import {
   ActionRenderFn,
   ConfigDataModal,
+  EmptyPageRender,
+  ErrorPageRender,
   HRowSelection,
   HTableInstance,
   ParamsModal,
-} from "@/components/modal";
+} from "../modal";
 import type { AffixProps } from "antd/lib/affix";
 import type { IPaginationProps } from "@/components/HTablePagination";
 
@@ -22,11 +24,8 @@ export interface HTableBodyProps
   > {
   configData?: ConfigDataModal;
   onPageChange?: (params: ParamsModal) => void;
-  emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
-  errorRender?: (
-    tableInstance: HTableInstance,
-    error: Error
-  ) => React.ReactNode;
+  emptyRender?: EmptyPageRender;
+  errorRender?: ErrorPageRender;
   tableStyle?: React.CSSProperties;
   paginationStyle?: React.CSSProperties;
   actionRender?: ActionRenderFn;

package/src/components/HTablePagination/index.tsx

@@ -7,6 +7,7 @@ import React, { useState } from "react";
 import type { AffixProps } from "antd/lib/affix";
 import GoTop from "../GoTop";
 import { useHTableConfigContext } from "@/components/TableConfig";
+
 export interface IPaginationProps extends Omit<PaginationProps, "showTotal"> {
   onPageChange?: (params: ParamsModal) => void;
   paginationStyle?: React.CSSProperties;
@@ -15,6 +16,7 @@ export interface IPaginationProps extends Omit<PaginationProps, "showTotal"> {
   actionRender?: (tableInstance: HTableInstance) => React.ReactNode;
   table?: HTableInstance;
   showTotal?: false | PaginationProps["showTotal"];
+  data?: Record<string, any>;
 }
 const defaultShowTotal = (totalNum: number, [showCurrent, showCurrentEnd]) => {
   return `第${showCurrent}-${showCurrentEnd}/总共${totalNum}条`;
@@ -27,26 +29,28 @@ export default ({
   actionRender,
   table,
   showTotal = defaultShowTotal,
+  data,
   ...props
 }: IPaginationProps) => {
   const {
     onPageChange: contextOnPageChange,
-    data,
+    data: contextData,
     tableInstance: contextTableInstance,
   } = useHTableContext();
   const { paginationStyle: defaultPaginationStyle } = useHTableConfigContext({
     paginationStyle,
   });
+  const cuData = data || contextData;
   const tableInstance = table || contextTableInstance;
   const tableOnPageChange = onPageChange || contextOnPageChange;
-  const { size, current, total } = data || {};
+  const { size, current, total } = cuData || {};
   const pageCurrent = Number.parseInt(current || "1", 10);
   const pageSize = Number.parseInt(size || "10", 10);
   const pageTotal = Number.parseInt(total || "0", 10);
   const className = useClassName("hw-table-pagination");
   const [style, setStyle] = useState({});
   const cuShowTotal = showTotal === false ? undefined : showTotal;
-  if (!data) {
+  if (!cuData) {
     return <></>;
   }
   if (affixProps === false) {

package/src/components/Table.tsx

@@ -8,6 +8,7 @@ import useReq from "./hooks/useReq";
 import useDispatch from "./hooks/useDispatch";
 import { useState } from "react";
 import { useClassName } from "./hooks";
+
 export default ({
   request,
   configData,

package/src/components/TableConfig.tsx

@@ -1,9 +1,13 @@
 import React, { useContext } from "react";
-import type { HTableInstance, ValueTypeConfigModal } from "./modal";
+import {
+  EmptyPageRender,
+  ErrorPageRender,
+  ValueTypeConfigModal,
+} from "./modal";
 
 interface HTableConfigContextModal {
-  emptyRender?: (table: HTableInstance) => React.ReactNode;
-  errorRender?: (table: HTableInstance, error: Error) => React.ReactNode;
+  emptyRender?: EmptyPageRender;
+  errorRender?: ErrorPageRender;
   headerStyle?: React.CSSProperties;
   tableStyle?: React.CSSProperties;
   paginationStyle?: React.CSSProperties;

package/src/components/index.tsx

@@ -12,3 +12,6 @@ export { default as HModalTable } from "./DialogTable/ModalTable";
 export { useHDialogTable } from "./DialogTable/hooks";
 export { default as HDwTable } from "./DialogTable/DwTable";
 export { DefaultSubComponent as HTableHeaderSubBtn } from "./HTableHeader/defaultSubComponent";
+export { default as EditTable } from "./EditTable";
+export { default as HModalEditTable } from "./DialogTable/ModalEditTable";
+export { default as HDwEditTable } from "./DialogTable/DwEditTable";