@hw-component/table 0.0.6-beta-v9 → 0.0.6-beta-v10

package/es/src/components/HTableHeader/index.d.ts

@@ -0,0 +1,3 @@
+import type { IHeaderProps } from "./modal";
+declare const _default: ({ configData, onFinish, searchSpan, headerStyle, }: IHeaderProps) => JSX.Element;
+export default _default;

package/es/src/components/Table.d.ts

@@ -0,0 +1,3 @@
+import type { HTableProps } from "./modal";
+declare const _default: ({ request, configData, searchSpan, table, hideHeader, headerStyle, tableStyle, action, spaceSize, className, paginationStyle, rowKey, ...props }: HTableProps) => JSX.Element;
+export default _default;

package/es/src/components/context.d.ts

@@ -0,0 +1,23 @@
+import type { Dispatch, SetStateAction } from "react";
+import React from "react";
+import type { ResultModal, RowObj, HTableInstance } from "./modal";
+import type { HTableProps } from "./modal";
+interface HContextModal extends Omit<HTableProps, "request"> {
+    tableInstance: HTableInstance;
+    data?: ResultModal;
+    selectedRowData: RowObj;
+    rowOnChange: (keys: React.Key[], rowData: any[]) => void;
+    error?: Error;
+    loading?: boolean;
+    allSelectChange?: (checked?: boolean) => void;
+    params?: any;
+    onFinish: (value: Record<string, any>) => Promise<any>;
+    onPageChange: (value: Record<string, any>) => Promise<any>;
+    setSelectedRowData: (row: RowObj) => void;
+    rowKey?: string;
+    headerOpen?: boolean;
+    setHeaderOpen: Dispatch<SetStateAction<boolean | undefined>>;
+}
+export declare const HTableContext: React.Context<HContextModal | null>;
+export declare const useHTableContext: () => HContextModal;
+export {};

package/es/src/components/hooks/index.d.ts

@@ -0,0 +1 @@
+export declare const useClassName: (className: string | string[]) => string;

package/es/src/components/index.d.ts

@@ -0,0 +1,11 @@
+import "./index.less";
+export { default as HTable } from "./Table";
+export { default as useHTable } from "./hooks/useHTable";
+export { default as HTableConfig } from "./TableConfig";
+export { default as TableCustomize } from "./TableCustomize";
+export { default as HTableBody } from "./HTableBody";
+export { default as HTableFooter } from "./HTableFooter";
+export { default as HTableHeader } from "./HTableHeader";
+export { default as HTablePagination } from "./HTablePagination";
+export { default as HModalTable } from "./ModalTable";
+export { useHDialogTable } from "./ModalTable/hooks";

package/es/src/components/modal.d.ts

@@ -0,0 +1,100 @@
+import type { ProColumns } from "@ant-design/pro-table/lib/typing";
+import type { ProTableProps } from "@ant-design/pro-table";
+import type { HItemProps, HFormInstance } from "@hw-component/form/es/Form/modal";
+import type { ColProps } from "antd";
+import type React from "react";
+import type { ModalProps } from "antd";
+import type { TableProps } from "antd/lib/table";
+import type { AffixProps } from "antd/lib/affix";
+export interface RowObj {
+    keys?: React.Key[];
+    rowData?: any[];
+    selectAll?: boolean;
+}
+export interface ResultModal {
+    records: any[];
+    current: string;
+    size: string;
+    total: string;
+}
+export interface ParamsModal extends Record<string, any> {
+    size?: number;
+    current?: number;
+}
+interface HColumns extends Omit<ProColumns, "render"> {
+    render?: (dom: React.ReactNode, data: any, index: number, tableInstance: HTableInstance) => React.ReactNode;
+    showSearch?: boolean;
+    searchType?: HItemProps["type"];
+    searchRender?: HItemProps["render"];
+}
+export type ConfigItemModal = Omit<HItemProps, "render" | "type"> & HColumns;
+export type ConfigDataModal = ConfigItemModal[];
+export type ActionRenderFn = (selectedRowKeys: RowObj, tableInstance: HTableInstance) => React.ReactNode;
+export type FooterBtnRenderFn = (dom: React.ReactNode, total: string, selectedRowKeys: RowObj, setAllCheck: (row: RowObj) => void) => React.ReactNode;
+export type actionFn = (...arg: any[]) => void;
+export interface RowSelectionOuter {
+    allPageCheck?: boolean;
+}
+export type HRowSelection = RowSelectionOuter & (TableProps<any>["rowSelection"] & {
+    alwaysShowAlert?: boolean;
+});
+export interface HTableProps extends Omit<ProTableProps<any, any>, "request" | "dataSource" | "rowKey" | "rowSelection"> {
+    request?: (params: ParamsModal) => Promise<ResultModal>;
+    configData: ConfigDataModal;
+    searchSpan?: ColProps;
+    table?: HTableInstance;
+    actionRender?: ActionRenderFn;
+    emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
+    errorRender?: (tableInstance: HTableInstance, error: Error) => React.ReactNode;
+    hideHeader?: boolean;
+    action?: Record<string, actionFn>;
+    headerStyle?: React.CSSProperties;
+    tableStyle?: React.CSSProperties;
+    spaceSize?: number;
+    className?: string;
+    error?: Error;
+    reload?: (params: any) => Promise<any>;
+    manual?: boolean;
+    dataSource?: ResultModal;
+    paginationStyle?: React.CSSProperties;
+    rowKey?: string;
+    allPageCheck?: boolean;
+    rowSelection?: HRowSelection | false;
+    affixProps?: AffixProps | false;
+    goTop?: boolean;
+}
+export interface TableInstance {
+    reload: (params?: ParamsModal) => Promise<any>;
+    setSelectedRowData: (keys: React.Key[], data: any) => void;
+    dispatch: (key: string, params: any) => void;
+    reloadWithParams: (params?: ParamsModal) => Promise<any>;
+    getParams: () => any;
+}
+export interface HTableInstance {
+    form: HFormInstance;
+    table: TableInstance;
+}
+export interface DialogParamsModal {
+    configData?: HTableProps["configData"];
+    request?: HTableProps["request"];
+    params?: Record<string, any>;
+    title?: string;
+}
+export interface HOnDiaLogTableInstance {
+    show: (params?: DialogParamsModal) => void;
+    hide: () => void;
+}
+export interface HDiaLogTableInstance {
+    form: HFormInstance;
+    table: TableInstance;
+    show: (params?: DialogParamsModal) => void;
+    hide: () => void;
+}
+export interface ModalTableProps extends ModalProps {
+    tableProps?: Omit<HTableProps, "configData" | "request">;
+    dialogTable?: HDiaLogTableInstance;
+    params?: Record<string, any>;
+    configData?: HTableProps["configData"];
+    request?: HTableProps["request"];
+}
+export {};

package/lib/src/components/HTableHeader/index.d.ts

@@ -0,0 +1,3 @@
+import type { IHeaderProps } from "./modal";
+declare const _default: ({ configData, onFinish, searchSpan, headerStyle, }: IHeaderProps) => JSX.Element;
+export default _default;

package/lib/src/components/Table.d.ts

@@ -0,0 +1,3 @@
+import type { HTableProps } from "./modal";
+declare const _default: ({ request, configData, searchSpan, table, hideHeader, headerStyle, tableStyle, action, spaceSize, className, paginationStyle, rowKey, ...props }: HTableProps) => JSX.Element;
+export default _default;

package/lib/src/components/context.d.ts

@@ -0,0 +1,23 @@
+import type { Dispatch, SetStateAction } from "react";
+import React from "react";
+import type { ResultModal, RowObj, HTableInstance } from "./modal";
+import type { HTableProps } from "./modal";
+interface HContextModal extends Omit<HTableProps, "request"> {
+    tableInstance: HTableInstance;
+    data?: ResultModal;
+    selectedRowData: RowObj;
+    rowOnChange: (keys: React.Key[], rowData: any[]) => void;
+    error?: Error;
+    loading?: boolean;
+    allSelectChange?: (checked?: boolean) => void;
+    params?: any;
+    onFinish: (value: Record<string, any>) => Promise<any>;
+    onPageChange: (value: Record<string, any>) => Promise<any>;
+    setSelectedRowData: (row: RowObj) => void;
+    rowKey?: string;
+    headerOpen?: boolean;
+    setHeaderOpen: Dispatch<SetStateAction<boolean | undefined>>;
+}
+export declare const HTableContext: React.Context<HContextModal | null>;
+export declare const useHTableContext: () => HContextModal;
+export {};

package/lib/src/components/hooks/index.d.ts

@@ -0,0 +1 @@
+export declare const useClassName: (className: string | string[]) => string;

package/lib/src/components/index.d.ts

@@ -0,0 +1,11 @@
+import "./index.less";
+export { default as HTable } from "./Table";
+export { default as useHTable } from "./hooks/useHTable";
+export { default as HTableConfig } from "./TableConfig";
+export { default as TableCustomize } from "./TableCustomize";
+export { default as HTableBody } from "./HTableBody";
+export { default as HTableFooter } from "./HTableFooter";
+export { default as HTableHeader } from "./HTableHeader";
+export { default as HTablePagination } from "./HTablePagination";
+export { default as HModalTable } from "./ModalTable";
+export { useHDialogTable } from "./ModalTable/hooks";

package/lib/src/components/modal.d.ts

@@ -0,0 +1,100 @@
+import type { ProColumns } from "@ant-design/pro-table/lib/typing";
+import type { ProTableProps } from "@ant-design/pro-table";
+import type { HItemProps, HFormInstance } from "@hw-component/form/es/Form/modal";
+import type { ColProps } from "antd";
+import type React from "react";
+import type { ModalProps } from "antd";
+import type { TableProps } from "antd/lib/table";
+import type { AffixProps } from "antd/lib/affix";
+export interface RowObj {
+    keys?: React.Key[];
+    rowData?: any[];
+    selectAll?: boolean;
+}
+export interface ResultModal {
+    records: any[];
+    current: string;
+    size: string;
+    total: string;
+}
+export interface ParamsModal extends Record<string, any> {
+    size?: number;
+    current?: number;
+}
+interface HColumns extends Omit<ProColumns, "render"> {
+    render?: (dom: React.ReactNode, data: any, index: number, tableInstance: HTableInstance) => React.ReactNode;
+    showSearch?: boolean;
+    searchType?: HItemProps["type"];
+    searchRender?: HItemProps["render"];
+}
+export type ConfigItemModal = Omit<HItemProps, "render" | "type"> & HColumns;
+export type ConfigDataModal = ConfigItemModal[];
+export type ActionRenderFn = (selectedRowKeys: RowObj, tableInstance: HTableInstance) => React.ReactNode;
+export type FooterBtnRenderFn = (dom: React.ReactNode, total: string, selectedRowKeys: RowObj, setAllCheck: (row: RowObj) => void) => React.ReactNode;
+export type actionFn = (...arg: any[]) => void;
+export interface RowSelectionOuter {
+    allPageCheck?: boolean;
+}
+export type HRowSelection = RowSelectionOuter & (TableProps<any>["rowSelection"] & {
+    alwaysShowAlert?: boolean;
+});
+export interface HTableProps extends Omit<ProTableProps<any, any>, "request" | "dataSource" | "rowKey" | "rowSelection"> {
+    request?: (params: ParamsModal) => Promise<ResultModal>;
+    configData: ConfigDataModal;
+    searchSpan?: ColProps;
+    table?: HTableInstance;
+    actionRender?: ActionRenderFn;
+    emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
+    errorRender?: (tableInstance: HTableInstance, error: Error) => React.ReactNode;
+    hideHeader?: boolean;
+    action?: Record<string, actionFn>;
+    headerStyle?: React.CSSProperties;
+    tableStyle?: React.CSSProperties;
+    spaceSize?: number;
+    className?: string;
+    error?: Error;
+    reload?: (params: any) => Promise<any>;
+    manual?: boolean;
+    dataSource?: ResultModal;
+    paginationStyle?: React.CSSProperties;
+    rowKey?: string;
+    allPageCheck?: boolean;
+    rowSelection?: HRowSelection | false;
+    affixProps?: AffixProps | false;
+    goTop?: boolean;
+}
+export interface TableInstance {
+    reload: (params?: ParamsModal) => Promise<any>;
+    setSelectedRowData: (keys: React.Key[], data: any) => void;
+    dispatch: (key: string, params: any) => void;
+    reloadWithParams: (params?: ParamsModal) => Promise<any>;
+    getParams: () => any;
+}
+export interface HTableInstance {
+    form: HFormInstance;
+    table: TableInstance;
+}
+export interface DialogParamsModal {
+    configData?: HTableProps["configData"];
+    request?: HTableProps["request"];
+    params?: Record<string, any>;
+    title?: string;
+}
+export interface HOnDiaLogTableInstance {
+    show: (params?: DialogParamsModal) => void;
+    hide: () => void;
+}
+export interface HDiaLogTableInstance {
+    form: HFormInstance;
+    table: TableInstance;
+    show: (params?: DialogParamsModal) => void;
+    hide: () => void;
+}
+export interface ModalTableProps extends ModalProps {
+    tableProps?: Omit<HTableProps, "configData" | "request">;
+    dialogTable?: HDiaLogTableInstance;
+    params?: Record<string, any>;
+    configData?: HTableProps["configData"];
+    request?: HTableProps["request"];
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "0.0.6-beta-v9",
+  "version": "0.0.6-beta-v10",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

package/src/Layout.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import { Menu } from "antd";
+import "./index.less";
+import type { RouteModal } from "./routes";
+import routes from "./routes";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
+
+const menuItem = (item: RouteModal) => {
+  const { name, path, children } = item;
+  if (!path) {
+    return null;
+  }
+  if (children) {
+    return (
+      <Menu.SubMenu title={name} key={path}>
+        {children.map((childItem) => {
+          return menuItem(childItem);
+        })}
+      </Menu.SubMenu>
+    );
+  }
+  return <Menu.Item key={path}>{name}</Menu.Item>;
+};
+export default () => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const [keys, setKeys] = useState(["/form/select"]);
+  const [openKey, setOpenKey] = useState(["/form"]);
+  useEffect(() => {
+    setKeys([pathname]);
+    const pathOpenKeys = pathname.split("/");
+    const openKeys = pathOpenKeys.map((path) => {
+      return "/" + path;
+    });
+    setOpenKey(openKeys);
+  }, [pathname]);
+  return (
+    <div className="layout">
+      <Menu
+        className="menu"
+        selectedKeys={keys}
+        openKeys={openKey}
+        onOpenChange={(openKeys) => {
+          setOpenKey(openKeys);
+        }}
+        onSelect={(e) => {
+          navigate(e.key);
+        }}
+        mode={"inline"}
+        theme="dark"
+      >
+        {routes.map((item) => {
+          return menuItem(item);
+        })}
+      </Menu>
+      <div className="body">
+        <Outlet />
+      </div>
+    </div>
+  );
+};

package/src/app.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import routes from "./routes";
+import {
+  createBrowserRouter,
+  Navigate,
+  RouterProvider,
+  useRouteError,
+} from "react-router-dom";
+import type { RouteObject } from "react-router";
+import Layout from "./Layout";
+const Error = () => {
+  const error = useRouteError();
+  if (error.status === 404) {
+    return <Navigate to="/form/select" replace />;
+  }
+  return <div>错误</div>;
+};
+const rootRoute = [
+  {
+    path: "/",
+    element: <Layout />,
+    errorElement: <Error />,
+    children: routes,
+  },
+];
+const router = () => {
+  return createBrowserRouter(rootRoute as RouteObject[]);
+};
+export default () => {
+  return (
+    <RouterProvider router={router()} fallbackElement={<p>Loading...</p>} />
+  );
+};

package/src/components/GoTop/index.tsx

@@ -0,0 +1,37 @@
+import type { IPaginationProps } from "../HTablePagination/index";
+import { useClassName } from "../hooks";
+import { useEffect, useState } from "react";
+export default ({ affixProps }: IPaginationProps) => {
+  const className = useClassName("hw-top-btn");
+  const { target } = affixProps || {};
+  const [style, setStyle] = useState({ display: "none" });
+  const dom = target?.();
+  const cuDom = dom || document.body;
+  const goTopFn = () => {
+    cuDom.scrollTo({ top: 0 });
+  };
+  useEffect(() => {
+    const scroll = (e) => {
+      const top = e.target.scrollTop;
+      if (top > 10) {
+        setStyle({ display: "block" });
+        return;
+      }
+      setStyle({ display: "none" });
+    };
+    cuDom.addEventListener("scroll", scroll);
+    return () => {
+      cuDom.removeEventListener("scroll", scroll);
+    };
+  }, [dom]);
+  useEffect(() => {
+    const top = (cuDom as HTMLElement).scrollTop;
+    if (top > 10) {
+      setStyle({ display: "block" });
+      return;
+    }
+    setStyle({ display: "none" });
+  }, []);
+
+  return <div className={className} style={style} onClick={goTopFn} />;
+};

package/src/components/HTableBody/AlertMsg.tsx

@@ -0,0 +1,37 @@
+import { Button, Row, Typography } from "antd";
+import React from "react";
+import { useHTableContext } from "../context";
+import type { ActionRenderFn } from "../modal";
+const { Text, Link } = Typography;
+interface IProps {
+  actionRender?: ActionRenderFn;
+}
+export default ({ actionRender }: IProps) => {
+  const { data, selectedRowData, rowOnChange, tableInstance } =
+    useHTableContext();
+  const { total = "0" } = data || {};
+  const { keys = [], selectAll } = selectedRowData;
+  const totalNum = Number.parseInt(total, 10);
+  const showTotalNum = Number.isNaN(totalNum) ? 0 : totalNum;
+  const num = selectAll ? showTotalNum : keys.length;
+
+  return (
+    <Row justify={"space-between"} align={"middle"}>
+      <Text>
+        已选择<Link>{num}</Link>条
+      </Text>
+      <div>
+        {actionRender?.(selectedRowData, tableInstance)}
+        <Button
+          type={"link"}
+          size={"small"}
+          onClick={() => {
+            rowOnChange([], []);
+          }}
+        >
+          取消选择
+        </Button>
+      </div>
+    </Row>
+  );
+};

package/src/components/HTableBody/RowSelection.tsx

@@ -0,0 +1,143 @@
+import { useHTableContext } from "../context";
+import { Checkbox, Dropdown, Menu } from "antd";
+import { useMemo } from "react";
+import type { HRowSelection } from "../modal";
+export const RowSelectionTitle = ({
+  allPageCheck = true,
+  onChange,
+  getCheckboxProps,
+}: HRowSelection) => {
+  const {
+    data,
+    selectedRowData,
+    rowOnChange,
+    allSelectChange,
+    rowKey = "id",
+  } = useHTableContext();
+  const { records = [] } = data || {};
+  const newData = records?.filter((item) => {
+    const { disabled = false } = getCheckboxProps?.(item) || {};
+    return !disabled;
+  });
+  const { keys, selectAll } = selectedRowData;
+  const allCheck = () => {
+    const setKeys = newData.map((item) => {
+      return item[rowKey];
+    });
+    rowOnChange(setKeys, newData);
+    onChange?.(setKeys, newData);
+  };
+  const allCancel = () => {
+    rowOnChange([], []);
+    onChange?.([], []);
+  };
+  const checkChange = (e) => {
+    const checked = e.target.checked;
+    if (checked) {
+      allCheck();
+      return;
+    }
+    allCancel();
+  };
+  const change = ({ key }) => {
+    if (key === "check") {
+      allCheck();
+      return;
+    }
+    if (key === "cancel") {
+      allCancel();
+      return;
+    }
+    if (key === "checkAll") {
+      allSelectChange?.(true);
+      onChange?.([], []);
+      return;
+    }
+    allSelectChange?.(false);
+    onChange?.([], []);
+  };
+  const len = keys?.length || 0;
+  const dataLen = newData?.length || 0;
+  const checked = len === dataLen && len !== 0;
+  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={change} 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} />
+  );
+};
+
+interface RowSelectionBoxProps {
+  data: any;
+  onChange?: HRowSelection["onChange"];
+  getCheckboxProps?: HRowSelection["getCheckboxProps"];
+}
+export const RowSelectionBox = ({
+  data,
+  onChange,
+  getCheckboxProps,
+}: RowSelectionBoxProps) => {
+  const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
+  const { rowData = [], keys = [] } = selectedRowData;
+  const key = data[rowKey];
+  const check = (e) => {
+    const checked = e.target.checked;
+    const newKeys = [...keys];
+    const newRowData = [...rowData];
+    if (checked) {
+      newKeys.push(key);
+      newRowData.push(data);
+      rowOnChange(newKeys, newRowData);
+      onChange?.(newKeys, newRowData);
+      return;
+    }
+    const index = newKeys.indexOf(key);
+    newKeys.splice(index, 1);
+    newRowData.splice(index, 1);
+    rowOnChange(newKeys, newRowData);
+    onChange?.(newKeys, newRowData);
+  };
+  const { disabled = false } = getCheckboxProps?.(data) || {};
+  return (
+    <Checkbox
+      checked={keys.indexOf(key) !== -1}
+      onChange={check}
+      disabled={disabled}
+    />
+  );
+};