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

package/src/components/modal.ts

@@ -0,0 +1,130 @@
+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) => void;
+type FooterRenderFn = (
+  tableInstance: HTableInstance,
+  selectedRowData: RowObj,
+  data?: ResultModal
+) => React.ReactNode;
+
+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"];
+}

package/src/components/styles/local.less

@@ -0,0 +1 @@
+@ant-prefix: ant;

package/src/index.less

@@ -0,0 +1,21 @@
+.layout {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+}
+.menu {
+  width: 256px !important;
+  height: 100vh;
+}
+
+.body {
+  width: calc(100vw - 256px);
+  height: 100vh;
+  padding: 16px;
+  overflow: auto;
+  background-color: #ccc;
+
+}

package/src/index.tsx

@@ -0,0 +1,12 @@
+import { render } from "react-dom";
+import App from "./app";
+import React from "react";
+import "antd/dist/antd.css";
+import zhCN from "antd/es/locale/zh_CN";
+import { ConfigProvider } from "antd";
+render(
+  <ConfigProvider locale={zhCN}>
+    <App />
+  </ConfigProvider>,
+  document.getElementById("root")
+);

package/src/pages/ModalTable/index.tsx

@@ -0,0 +1,101 @@
+import { Button } from "antd";
+import { HModalTable, HTable, useHDialogTable } from "../../components";
+const configData = [
+  {
+    title: "座位",
+    showSearch: true,
+    searchType: "select",
+    dataIndex: "name",
+    itemProps: {
+      options: [{ label: "1", value: 1 }],
+    },
+  },
+  {
+    title: "操作",
+    name: "aaa",
+    fixed: "right",
+    width: 200,
+    showSearch: true,
+    render: () => {
+      return <div>fff</div>;
+    },
+  },
+];
+const req1 = (params) => {
+  console.log(params, "req1");
+  const { current = 1 } = params;
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // reject(new Error("错误"));
+      resolve({
+        size: "10",
+        current: current.toString(10),
+        total: "100",
+        records: [
+          {
+            id: 1,
+            name: "111",
+          },
+        ],
+      });
+    }, 2000);
+  });
+};
+
+const req2 = (params) => {
+  console.log(params, "req2");
+  const { current = 1 } = params;
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // reject(new Error("错误"));
+      resolve({
+        size: "10",
+        current: current.toString(10),
+        total: "100",
+        records: [
+          {
+            id: 1,
+            name: "111",
+          },
+        ],
+      });
+    }, 2000);
+  });
+};
+const Test = () => {
+  const dialogTable1 = useHDialogTable();
+
+  return (
+    <>
+      <HModalTable
+        dialogTable={dialogTable1}
+        title="111"
+        configData={configData}
+      />
+      <Button
+        onClick={() => {
+          dialogTable1.show();
+        }}
+      >
+        点我
+      </Button>
+    </>
+  );
+};
+export default () => {
+  const dialogTable = useHDialogTable();
+  const dialogTable1 = useHDialogTable();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          dialogTable.show({ title: "3333", request: req2 });
+        }}
+      >
+        点我333
+      </Button>
+      <HModalTable dialogTable={dialogTable} configData={configData} />
+      <HTable configData={[]} headerTitle={<Test />} />
+    </>
+  );
+};

package/src/pages/Table/index.tsx

@@ -0,0 +1,108 @@
+import { HTable, useHTable } from "../../components";
+import { Button } from "antd";
+import { HFormConfigProvider } from "@hw-component/form";
+
+const configData = [
+  {
+    title: "座位",
+    showSearch: true,
+    searchType: "select",
+    dataIndex: "name",
+    itemProps: {
+      options: [{ label: "1", value: 1 }],
+    },
+  },
+  {
+    title: "座位断开",
+    showSearch: true,
+    dataIndex: "name",
+    itemProps: {
+      options: [{ label: "1", value: 1 }],
+    },
+  },
+  {
+    title: "座位",
+    showSearch: true,
+    dataIndex: "name",
+    itemProps: {
+      options: [{ label: "1", value: 1 }],
+    },
+  },
+  {
+    title: "座位",
+    showSearch: true,
+    searchType: "select",
+    dataIndex: "name",
+    itemProps: {
+      options: [{ label: "1", value: 1 }],
+    },
+  },
+  {
+    title: "操作",
+    name: "aaa",
+    fixed: "right",
+    width: 200,
+    showSearch: true,
+    render: () => {
+      return <div>fff</div>;
+    },
+  },
+];
+const Test = ({ name, selectedRowData }) => {
+  console.log(selectedRowData);
+  return <div>{name}</div>;
+};
+export default () => {
+  const hTable = useHTable();
+  return (
+    <HFormConfigProvider>
+      <div>
+        <HTable
+          configData={configData}
+          rowKey={"id"}
+          table={hTable}
+          rowSelection={{
+            getCheckboxProps: (item) => {
+              return {
+                disabled: item.id === 2,
+              };
+            },
+          }}
+          affixProps={{
+            target: () => document.querySelector(".body"),
+          }}
+          options={{
+            reload: false,
+            setting: false,
+            density: false,
+          }}
+          actionRender={() => {
+            return <Button>你大爷</Button>;
+          }}
+          headerTitle={<Button type={"primary"}>操作</Button>}
+          request={(params) => {
+            const { current = 1 } = params;
+            const arrayData = [];
+            for (let i = 0; i < 100; i = i + 1) {
+              arrayData.push({
+                id: i,
+                name: "11",
+              });
+            }
+            return new Promise((resolve, reject) => {
+              setTimeout(() => {
+                // reject(new Error("错误"));
+                resolve({
+                  size: "100",
+                  current: current.toString(10),
+                  total: "100",
+                  records: arrayData,
+                });
+              }, 2000);
+            });
+          }}
+        />
+      </div>
+    </HFormConfigProvider>
+  );
+};

package/src/pages/TableCustomize/index.tsx

@@ -0,0 +1,79 @@
+import {
+  TableCustomize,
+  HTableHeader,
+  HTableBody,
+  HTableFooter,
+  HTablePagination,
+} from "../../components";
+import { useRequest } from "ahooks";
+import { Space } from "antd";
+
+const configData = [
+  {
+    title: "座位",
+    showSearch: true,
+    searchType: "select",
+    dataIndex: "name",
+  },
+  {
+    title: "操作",
+    name: "aaa",
+    showSearch: true,
+    fixed: "right",
+    searchType: "rangePicker",
+  },
+];
+const AddBtn = (props) => {
+  console.log(props);
+  return <div>fff</div>;
+};
+export default () => {
+  const { run, loading, error, data } = useRequest(
+    (params) => {
+      const { current = 1 } = params;
+      const arrayData = [];
+      for (let i = 0; i < 100; i = i + 1) {
+        arrayData.push({
+          id: i,
+          name: "11",
+        });
+      }
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          // reject(new Error("错误"));
+          resolve({
+            size: "10",
+            current: current.toString(10),
+            total: "100",
+            records: arrayData,
+          });
+        }, 2000);
+      });
+    },
+    { manual: true }
+  );
+  return (
+    <TableCustomize
+      configData={configData}
+      loading={loading}
+      error={error}
+      dataSource={data}
+      reload={run}
+    >
+      <Space direction={"vertical"} style={{ width: "100%" }}>
+        <HTableHeader />
+        <HTableBody
+          headerTitle={<AddBtn />}
+          affixProps={{
+            target: () => document.querySelector(".body"),
+          }}
+          rowSelection={{
+            onChange: () => {
+              console.log("rowSelection");
+            },
+          }}
+        />
+      </Space>
+    </TableCustomize>
+  );
+};

package/src/routes.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+import Table from "./pages/Table";
+import ModalTable from "./pages/ModalTable";
+import TableCustomize from "./pages/TableCustomize";
+export interface RouteModal {
+  path?: string;
+  name?: string;
+  children?: RouteModal[];
+  element?: JSX.Element;
+  index?: boolean;
+  errorElement?: JSX.Element;
+}
+
+const routes: RouteModal[] = [
+  {
+    index: true,
+    element: <Navigate to="/table" replace={true} />,
+  },
+  {
+    path: "/table",
+    name: "table",
+    element: <Table />,
+  },
+  {
+    path: "/tableCustomize",
+    name: "tableCustomize",
+    element: <TableCustomize />,
+  },
+  {
+    path: "/modalTable",
+    name: "ModalTable",
+    element: <ModalTable />,
+  },
+];
+
+export default routes;

package/src/typings.d.ts

@@ -0,0 +1,46 @@
+declare module "slash2";
+declare module "*.css";
+declare module "*.less";
+declare module "*.scss";
+declare module "*.sass";
+declare module "*.svg";
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.bmp";
+declare module "*.tiff";
+declare module "omit.js";
+declare module "numeral";
+declare module "@antv/data-set";
+declare module "mockjs";
+declare module "react-fittext";
+declare module "bizcharts-plugin-slider";
+
+// google analytics interface
+type GAFieldsObject = {
+  eventCategory: string;
+  eventAction: string;
+  eventLabel?: string;
+  eventValue?: number;
+  nonInteraction?: boolean;
+};
+
+interface Window {
+  ga: (
+    command: "send",
+    hitType: "event" | "pageview",
+    fieldsObject: GAFieldsObject | string
+  ) => void;
+  reloadAuthorized: () => void;
+}
+
+declare let ga: () => void;
+
+// preview.pro.ant.design only do not use in your production ;
+// preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
+declare let ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION:
+  | "site"
+  | undefined;
+
+declare const REACT_APP_ENV: "test" | "dev" | "pre" | false;