npm - @hw-component/table - Versions diffs - 0.0.1-beta-v1 - Mend

@hw-component/table 0.0.1-beta-v1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/.babelrc +23 -0
package/.eslintrc.js +8 -0
package/.husky/pre-commit +4 -0
package/.stylelintrc.js +5 -0
package/README.en.md +36 -0
package/README.md +37 -0
package/es/Body/hooks.d.ts +1167 -0
package/es/Body/hooks.js +51 -0
package/es/Body/index.d.ts +12 -0
package/es/Body/index.js +117 -0
package/es/Footer/index.d.ts +6 -0
package/es/Footer/index.js +65 -0
package/es/Header/index.d.ts +9 -0
package/es/Header/index.js +42 -0
package/es/Header/utils.d.ts +7 -0
package/es/Header/utils.js +67 -0
package/es/Table.d.ts +3 -0
package/es/Table.js +98 -0
package/es/TableConfig.d.ts +13 -0
package/es/TableConfig.js +29 -0
package/es/context.d.ts +12 -0
package/es/context.js +11 -0
package/es/hooks/useCurrentTable.d.ts +7 -0
package/es/hooks/useCurrentTable.js +17 -0
package/es/hooks/useHTable.d.ts +8 -0
package/es/hooks/useHTable.js +21 -0
package/es/hooks/useRowObj.d.ts +7 -0
package/es/hooks/useRowObj.js +23 -0
package/es/index.d.ts +3 -0
package/es/index.js +5 -0
package/es/modal.d.ts +45 -0
package/lib/Body/hooks.d.ts +1167 -0
package/lib/Body/hooks.js +53 -0
package/lib/Body/index.d.ts +12 -0
package/lib/Body/index.js +120 -0
package/lib/Footer/index.d.ts +6 -0
package/lib/Footer/index.js +68 -0
package/lib/Header/index.d.ts +9 -0
package/lib/Header/index.js +45 -0
package/lib/Header/utils.d.ts +7 -0
package/lib/Header/utils.js +69 -0
package/lib/Table.d.ts +3 -0
package/lib/Table.js +101 -0
package/lib/TableConfig.d.ts +13 -0
package/lib/TableConfig.js +34 -0
package/lib/context.d.ts +12 -0
package/lib/context.js +13 -0
package/lib/hooks/useCurrentTable.d.ts +7 -0
package/lib/hooks/useCurrentTable.js +20 -0
package/lib/hooks/useHTable.d.ts +8 -0
package/lib/hooks/useHTable.js +24 -0
package/lib/hooks/useRowObj.d.ts +7 -0
package/lib/hooks/useRowObj.js +26 -0
package/lib/index.d.ts +3 -0
package/lib/index.js +12 -0
package/lib/modal.d.ts +45 -0
package/package.json +89 -0
package/public/index.html +19 -0
package/scripts/rollup.config.js +90 -0
package/scripts/webpack.config.js +75 -0
package/src/Layout.tsx +61 -0
package/src/app.tsx +33 -0
package/src/components/Body/hooks.ts +44 -0
package/src/components/Body/index.tsx +85 -0
package/src/components/Footer/index.tsx +43 -0
package/src/components/Header/index.tsx +45 -0
package/src/components/Header/utils.ts +58 -0
package/src/components/Table.tsx +65 -0
package/src/components/TableConfig.tsx +30 -0
package/src/components/context.ts +17 -0
package/src/components/hooks/useCurrentTable.ts +16 -0
package/src/components/hooks/useHTable.tsx +18 -0
package/src/components/hooks/useRowObj.ts +17 -0
package/src/components/index.tsx +3 -0
package/src/components/modal.ts +58 -0
package/src/index.less +20 -0
package/src/index.tsx +12 -0
package/src/pages/Test/index.tsx +55 -0
package/src/routes.tsx +26 -0
package/tsconfig.json +29 -0

package/src/components/Header/utils.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import type { ConfigDataModal, ConfigItemModal } from "../modal";
+import type { HItemProps } from "@hw-component/form/lib/Form/modal";
+const defaultSubItem = {
+  type: "submit",
+  itemProps: {
+    extraList: ["submit", "reset"],
+    style: { padding: "4px 24px", borderRadius: "4px" },
+  },
+};
+export function formConfigDataFilter(arr: ConfigDataModal) {
+  let subConfigData: HItemProps = defaultSubItem;
+  const realConfigData = arr.filter((item) => {
+    const { showSearch, searchType } = item;
+    if (searchType === "submit" && showSearch) {
+      subConfigData = formConfigDataItemProvider(item);
+      return false;
+    }
+    if (showSearch) {
+      return true;
+    }
+    return false;
+  });
+  return {
+    realConfigData,
+    subConfigData,
+  };
+}
+export function formConfigDataProvider(configData: ConfigDataModal) {
+  const { realConfigData, subConfigData } = formConfigDataFilter(configData);
+  const nConfigData = realConfigData.map((item) =>
+    formConfigDataItemProvider(item)
+  );
+  return [...nConfigData, subConfigData];
+}
+function formConfigDataItemProvider({
+  colon = false,
+  searchType,
+  title,
+  name,
+  dataIndex,
+  itemProps,
+  searchRender,
+}: ConfigItemModal): HItemProps {
+  return {
+    itemProps,
+    label: title,
+    colon,
+    type: searchType,
+    name: name || (dataIndex as string),
+    render: searchRender,
+  };
+}

package/src/components/Table.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import Header from "./Header";
+import Body from "./Body";
+import { useRequest } from "ahooks";
+import { useMemo } from "react";
+import useCurrentTable from "./hooks/useCurrentTable";
+import Footer from "./Footer";
+import useRowObj from "./hooks/useRowObj";
+import { HTableContext } from "./context";
+import { Space } from "antd";
+import type { HTableProps } from "./modal";
+export default ({
+  request,
+  configData,
+  searchSpan,
+  table,
+  actionRender,
+  ...props
+}: HTableProps) => {
+  const saveParams = useMemo(() => {
+    return {
+      params: {},
+    };
+  }, []);
+  const { run, loading, data, error } = useRequest((params = {}) => {
+    const { size = "10", current = "1", ...oParams } = params;
+    const reqParams = { size, current, ...oParams };
+    saveParams.params = reqParams;
+    return request(reqParams);
+  });
+  const cuTable = useCurrentTable({
+    table,
+    reload: () => {
+      run({ ...saveParams.params });
+    },
+  });
+  const { selectedRowData, rowOnChange } = useRowObj();
+  return (
+    <HTableContext.Provider
+      value={{
+        table: cuTable,
+        selectedRowData,
+        rowOnChange,
+        data,
+        error,
+      }}
+    >
+      <Space size={20} direction={"vertical"} style={{ width: "100%" }}>
+        <Header
+          configData={configData}
+          onFinish={run}
+          searchSpan={searchSpan}
+        />
+        <Body
+          loading={loading}
+          configData={configData}
+          onPageChange={(page) => {
+            run({ ...saveParams.params, ...page });
+          }}
+          {...props}
+        />
+        <Footer actionRender={actionRender} />
+      </Space>
+    </HTableContext.Provider>
+  );
+};

package/src/components/TableConfig.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import React, { useContext } from "react";
+import type { HTableInstance } from "./modal";
+interface HTableConfigContextModal {
+  emptyRender?: (table: HTableInstance) => React.ReactNode;
+  errorRender?: (table: HTableInstance) => React.ReactNode;
+}
+export const HTableConfigContext =
+  React.createContext<HTableConfigContextModal | null>(null);
+export const useHTableConfigContext = ({
+  emptyRender,
+  errorRender,
+}: HTableConfigContextModal) => {
+  const { errorRender: configErrorRender, emptyRender: configEmptyRender } =
+    useContext(HTableConfigContext) || {};
+  return {
+    errorRender: errorRender || configErrorRender,
+    emptyRender: emptyRender || configEmptyRender,
+  };
+};
+const Index: React.FC<HTableConfigContextModal> = ({ children, ...props }) => {
+  return (
+    <HTableConfigContext.Provider value={props}>
+      {children}
+    </HTableConfigContext.Provider>
+  );
+};
+export default Index;

package/src/components/context.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import React, { useContext } from "react";
+import type { ResultModal, RowObj, HTableInstance } from "./modal";
+interface HContextModal {
+  table: HTableInstance;
+  data?: ResultModal;
+  selectedRowData: RowObj;
+  rowOnChange: (keys: React.Key[], rowData: any[]) => void;
+  error?: Error;
+}
+export const HTableContext = React.createContext<HContextModal | null>(null);
+export const useHTableContext = () => {
+  const result = useContext(HTableContext);
+  return (result || {}) as HContextModal;
+};

package/src/components/hooks/useCurrentTable.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+import type { ParamsModal, HTableInstance } from "../modal";
+import useHTable from "../hooks/useHTable";
+interface currentTableParams {
+  table?: HTableInstance;
+  reload: (params: ParamsModal) => void;
+}
+export default ({ table, reload }: currentTableParams) => {
+  const useCurrentTable = useHTable();
+  return useMemo(() => {
+    const resultTable = table || useCurrentTable;
+    resultTable.table.reload = reload;
+    return resultTable;
+  }, [table]);
+};

package/src/components/hooks/useHTable.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import type { ParamsModal } from "../modal";
+import { useHForm } from "@hw-component/form";
+export default () => {
+  const form = useHForm();
+  const table = useMemo(() => {
+    return {
+      reload: (params: ParamsModal) => {
+        return params;
+      },
+    };
+  }, []);
+  return {
+    form,
+    table,
+  };
+};

package/src/components/hooks/useRowObj.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type React from "react";
+import { useState } from "react";
+import type { RowObj } from "../modal";
+export default () => {
+  const [selectedRowData, setSelectedRowData] = useState<RowObj>({});
+  const rowOnChange = (keys: React.Key[], rowData: any[]) => {
+    setSelectedRowData({
+      keys,
+      rowData,
+    });
+  };
+  return {
+    rowOnChange,
+    selectedRowData,
+  };
+};

package/src/components/index.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+export { default as HTable } from "./Table";
+export { default as useHTable } from "./hooks/useHTable";
+export { default as HTableConfig } from "./TableConfig";

package/src/components/modal.ts ADDED Viewed

@@ -0,0 +1,58 @@
+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";
+export interface RowObj {
+  keys?: React.Key[];
+  rowData?: any[];
+}
+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,
+    table: 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 = (
+  allCheck: boolean,
+  selectedRowKeys: RowObj,
+  xjTable: HTableInstance
+) => React.ReactNode;
+export interface HTableProps extends Omit<ProTableProps<any, any>, "request"> {
+  request: (params: ParamsModal) => Promise<ResultModal>;
+  configData: ConfigDataModal;
+  searchSpan?: ColProps;
+  table?: HTableInstance;
+  actionRender?: ActionRenderFn;
+  emptyRender?: (table: HTableInstance) => React.ReactNode;
+  errorRender?: (table: HTableInstance) => React.ReactNode;
+}
+export interface TableInstance {
+  reload: (params: ParamsModal) => void;
+}
+export interface HTableInstance {
+  form: HFormInstance;
+  table: TableInstance;
+}

package/src/index.less ADDED Viewed

@@ -0,0 +1,20 @@
+.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: hidden;
+  background-color: #ccc;
+}

package/src/index.tsx ADDED Viewed

@@ -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/Test/index.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+import { HTable, HTableConfig } from "../../components";
+import { Button } from "antd";
+const configData = [
+  {
+    title: "座位",
+    showSearch: true,
+    searchType: "select",
+    dataIndex: "name",
+  },
+  {
+    title: "操作",
+    name: "aaa",
+    showSearch: true,
+    searchType: "rangePicker",
+  },
+];
+export default () => {
+  return (
+    <HTableConfig
+      emptyRender={() => {
+        return <div>红</div>;
+      }}
+    >
+      <HTable
+        configData={configData}
+        rowKey={"id"}
+        emptyRender={() => {
+          return <div>无数据</div>;
+        }}
+        actionRender={(allCheck, selectedRowKeys, xjTable) => {
+          console.log(allCheck, selectedRowKeys, xjTable);
+          return <Button>点我</Button>;
+        }}
+        request={(a) => {
+          console.log("aaa", a);
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                records: [
+                  { name: "ddd", id: 1 },
+                  { name: "ddd", id: 2 },
+                  { name: "ddd", id: 3 },
+                ],
+                size: "10",
+                current: "1",
+                total: "1000",
+              });
+            }, 2000);
+          });
+        }}
+      />
+    </HTableConfig>
+  );
+};

package/src/routes.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import React from "react";
+import { Navigate } from "react-router-dom";
+import Select from "./pages/Test";
+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="/select" replace={true} />,
+  },
+  {
+    path: "/select",
+    name: "下拉框",
+    element: <Select />,
+  },
+];
+export default routes;

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "allowUnreachableCode": true,
+    "allowUnusedLabels": false,
+    "alwaysStrict": false,
+    "baseUrl": ".",
+    "experimentalDecorators": true,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "module": "ESNext",
+    "noImplicitAny": false,
+    "removeComments": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "Node",
+    "strict": true,
+    "types": ["node"],
+    "target": "ESNext",
+    "outDir": "./build",
+    "declaration": true,
+    "allowJs": true,
+    "lib": ["es5", "es2015", "es2016", "es2017", "es2018", "dom"],
+    "typeRoots": ["./node_modules/@types/", "./src/typings.d.ts"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*.spec.ts", "**/*.css", "**/*.less"]
+}