@hw-component/table 0.0.1-beta-v1

package/lib/hooks/useRowObj.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var React = require('react');
+
+var useRowObj = (function () {
+  var _useState = React.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRowData = _useState2[0],
+    setSelectedRowData = _useState2[1];
+  var rowOnChange = function rowOnChange(keys, rowData) {
+    setSelectedRowData({
+      keys: keys,
+      rowData: rowData
+    });
+  };
+  return {
+    rowOnChange: rowOnChange,
+    selectedRowData: selectedRowData
+  };
+});
+
+exports.default = useRowObj;
+// powered by h

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var Table = require('./Table.js');
+var useHTable = require('./hooks/useHTable.js');
+var TableConfig = require('./TableConfig.js');
+
+
+
+exports.HTable = Table.default;
+exports.useHTable = useHTable.default;
+exports.HTableConfig = TableConfig.default;
+// powered by h

package/lib/modal.d.ts

@@ -0,0 +1,45 @@
+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;
+}
+export {};

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@hw-component/table",
+  "version": "0.0.1-beta-v1",
+  "description": "基于antd二次开发table组件",
+  "keywords": [
+    "table"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/hdj_wq/hw-component-table.git"
+  },
+  "license": "ISC",
+  "author": "hdj",
+  "main": "index.js",
+  "scripts": {
+    "build": "rollup --config ./scripts/rollup.config.js",
+    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
+    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
+    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
+    "prepare": "husky install",
+    "start": "webpack-dev-server --config ./scripts/webpack.config.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "lint-staged": {
+    "**/*.less": "npm run lint:style",
+    "**/*.{js,jsx,ts,tsx}": "npm run lint:fix",
+    "**/*.{js,jsx,tsx,ts,less,md,json}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/pro-table": "2.70.0",
+    "@hw-component/form": "0.0.9-beta-v7",
+    "ahooks": "2.10.9",
+    "antd": "4.20.7",
+    "core-js": "3",
+    "react": "17.0.0",
+    "react-dom": "17.0.2",
+    "react-router-dom": "^6.11.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
+    "@babel/runtime-corejs3": "^7.21.5",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-inject": "^5.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-url": "^8.0.1",
+    "@types/react": "17.0.17",
+    "@types/react-dom": "17.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@umijs/fabric": "^2.14.1",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.4",
+    "eslint": "^8.41.0",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "html-webpack-plugin": "^5.5.1",
+    "husky": "^8.0.3",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "lint-staged": "10.5.4",
+    "postcss": "^8.4.23",
+    "postcss-less": "^6.0.0",
+    "rollup": "^3.23.0",
+    "rollup-plugin-clear": "^2.0.7",
+    "rollup-plugin-postcss": "4.0.0",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "style-loader": "^3.3.3",
+    "stylelint": "13.13.1",
+    "typescript": "5.0.4",
+    "webpack": "^5.83.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
+    "webpackbar": "^5.0.2"
+  },
+  "cssPrefix": "hw",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="webpack5">
+    <title>hw-components</title>
+    <style>
+        body{
+            margin: 0px;
+            padding: 0px;
+        }
+    </style>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>

package/scripts/rollup.config.js

@@ -0,0 +1,90 @@
+const path = require("path");
+const clear = require("rollup-plugin-clear");
+const { nodeResolve } = require("@rollup/plugin-node-resolve");
+const { babel } = require("@rollup/plugin-babel");
+const commonjs = require("@rollup/plugin-commonjs");
+const typescript = require("rollup-plugin-typescript2");
+const autoprefixer = require("autoprefixer");
+const inject = require("@rollup/plugin-inject");
+const url = require("@rollup/plugin-url");
+const postcss = require("rollup-plugin-postcss");
+const input = path.resolve(__dirname, "../src/components/index.tsx");
+const outDir = path.resolve(__dirname, "../lib");
+const esOutDir = path.resolve(__dirname, "../es");
+module.exports = {
+  input,
+  output: [
+    {
+      dir: outDir,
+      format: "cjs",
+      footer: "// powered by h",
+      entryFileNames: "[name].js",
+      exports: "named",
+      preserveModules: true,
+    },
+    {
+      dir: esOutDir,
+      format: "es",
+      banner: "// welcome to hoo hoo hoo",
+      footer: "// powered by hdj",
+      entryFileNames: "[name].js",
+      exports: "named",
+      preserveModules: true,
+    },
+  ],
+  plugins: [
+    clear({
+      targets: [outDir, esOutDir],
+    }),
+    url({
+      fileName: "[dirname][hash][extname]",
+    }),
+    postcss({
+      extract: "index.css",
+      plugins: [
+        autoprefixer({
+          overrideBrowserslist: [
+            "last 10 Chrome versions",
+            "last 5 Firefox versions",
+            "Safari >= 6",
+            "ie> 8",
+          ],
+        }),
+      ],
+    }),
+    typescript({
+      tsconfigOverride: {
+        include: [`src/components/**/*`],
+      },
+    }),
+    babel({
+      exclude: "node_modules/**",
+      extensions: [".ts", ".tsx", ".js", ".jsx"],
+      babelHelpers: "runtime",
+      presets: [
+        [
+          "@babel/preset-env",
+          {
+            targets: {
+              chrome: "58",
+              ie: "11",
+              ios: "11",
+            },
+            useBuiltIns: "usage",
+            corejs: 3,
+            modules: false,
+          },
+        ],
+      ],
+    }),
+    inject({
+      React: "react",
+    }),
+    nodeResolve({
+      resolveOnly: ["node_modules"], //定义为模块
+    }),
+    commonjs({
+      include: ["node_modules"],
+    }),
+  ],
+};

package/scripts/webpack.config.js

@@ -0,0 +1,75 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const WebpackBar = require("webpackbar");
+const webpack = require("webpack");
+
+module.exports = {
+  mode: "development",
+  devtool: "cheap-module-source-map",
+  entry: {
+    app: path.resolve(__dirname, "../src/index.tsx"),
+  },
+  output: {
+    path: path.resolve("dist"),
+    publicPath: "/",
+    clean: true, //每次打包前清空目录
+  },
+  devServer: {
+    port: 3000,
+    compress: true,
+    open: true,
+    hot: true,
+    historyApiFallback: {
+      disableDotRule: true,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(tsx?|ts)$/,
+        loader: "babel-loader",
+        options: { cacheDirectory: true },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+          },
+          {
+            loader: "less-loader",
+            options: {
+              lessOptions: {
+                javascriptEnabled: true,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src/components"),
+    },
+    extensions: [".tsx", ".ts", ".js", ".json"],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "../public/index.html"),
+    }),
+    new WebpackBar({
+      name: "hw components",
+      color: "#52c41a",
+    }),
+    new webpack.ProvidePlugin({
+      React: "react",
+    }),
+  ],
+};

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/Body/hooks.ts

@@ -0,0 +1,44 @@
+import type { ConfigDataModal, HTableInstance } from "../modal";
+import type React from "react";
+import { useEffect, useMemo } from "react";
+import { useHTableContext } from "../context";
+import type { GetRowKey } from "rc-table/lib/interface";
+
+export const useCols = (cols: ConfigDataModal, table: HTableInstance) => {
+  return useMemo(() => {
+    return cols.map((item) => {
+      const { render } = item;
+      return {
+        ...item,
+        render: (dom: React.ReactNode, data: any, index: number) => {
+          if (!render) {
+            return dom;
+          }
+          return render(dom, data, index, table);
+        },
+      };
+    });
+  }, [cols, table]);
+};
+interface FilterKeysModal {
+  selectedRowKeys?: React.Key[];
+  records?: any[];
+  rowKey?: string | GetRowKey<any>;
+}
+export const useSynchronousKeys = ({
+  selectedRowKeys,
+  records,
+  rowKey,
+}: FilterKeysModal) => {
+  const { rowOnChange } = useHTableContext();
+  useEffect(() => {
+    if (selectedRowKeys && records && rowKey) {
+      const resultData = records.filter((item, index) => {
+        const id =
+          typeof rowKey === "function" ? rowKey(item, index) : item[rowKey];
+        return selectedRowKeys.indexOf(id) !== -1;
+      });
+      rowOnChange(selectedRowKeys, resultData);
+    }
+  }, [selectedRowKeys, records, rowKey]);
+};

package/src/components/Body/index.tsx

@@ -0,0 +1,85 @@
+import type { ProTableProps } from "@ant-design/pro-table";
+import ProTable from "@ant-design/pro-table";
+import type { ConfigDataModal, ParamsModal } from "../modal";
+import { useCols, useSynchronousKeys } from "../Body/hooks";
+import { useHTableContext } from "../context";
+import React from "react";
+import { ConfigProvider, Empty } from "antd";
+import type { HTableInstance } from "../modal";
+import { useHTableConfigContext } from "../TableConfig";
+
+interface HTableBodyProps extends Omit<ProTableProps<any, any>, "dataSource"> {
+  configData: ConfigDataModal;
+  onPageChange: (params: ParamsModal) => void;
+  emptyRender?: (table: HTableInstance) => React.ReactNode;
+  errorRender?: (table: HTableInstance) => React.ReactNode;
+}
+const defaultRender = () => {
+  return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+};
+export default ({
+  loading,
+  configData,
+  pagination = {},
+  onPageChange,
+  rowSelection = {},
+  rowKey = "id",
+  emptyRender,
+  errorRender,
+  ...props
+}: HTableBodyProps) => {
+  // @ts-ignore
+  const { selectedRowKeys, onChange } = rowSelection;
+  const { table, data, selectedRowData, rowOnChange, error } =
+    useHTableContext();
+  const {
+    emptyRender: tableEmptyRender = defaultRender,
+    errorRender: tableErrorRender = defaultRender,
+  } = useHTableConfigContext({ emptyRender, errorRender });
+  const { records, size, current, total } = data || {};
+  const cols = useCols(configData, table);
+  const change = (key: React.Key[], rowData: any[]) => {
+    if (onChange) {
+      return onChange(key, rowData);
+    }
+    rowOnChange(key, rowData);
+  };
+  useSynchronousKeys({ selectedRowKeys, records, rowKey });
+  return (
+    <div style={{ borderRadius: 4, overflow: "hidden" }}>
+      <ConfigProvider
+        renderEmpty={() => {
+          if (error) {
+            return tableErrorRender?.(table);
+          }
+          return tableEmptyRender?.(table);
+        }}
+      >
+        <ProTable
+          {...props}
+          columns={cols}
+          search={false}
+          rowSelection={{
+            ...rowSelection,
+            selectedRowKeys: selectedRowData.keys,
+            onChange: change,
+          }}
+          loading={loading}
+          rowKey={rowKey}
+          dataSource={records}
+          onChange={(paginationData) => {
+            const { pageSize: ps, current: pn } = paginationData;
+            onPageChange({ size: ps, current: pn });
+          }}
+          pagination={{
+            current: Number.parseInt(current || "1", 10),
+            total: Number.parseInt(total || "0", 10),
+            pageSize: Number.parseInt(size || "10", 10),
+            showQuickJumper: true,
+            ...pagination,
+          }}
+        />
+      </ConfigProvider>
+    </div>
+  );
+};

package/src/components/Footer/index.tsx

@@ -0,0 +1,43 @@
+import { Card, Affix, Row, Space, Button } from "antd";
+import { Typography } from "antd";
+import type { ActionRenderFn } from "../modal";
+import { useHTableContext } from "../context";
+import React, { useState } from "react";
+
+const { Text, Link } = Typography;
+interface IFooterProps {
+  actionRender?: ActionRenderFn;
+}
+export default ({ actionRender }: IFooterProps) => {
+  const { data, selectedRowData, table } = useHTableContext();
+  const [allCheck, setAllCheck] = useState<boolean>(false);
+  const { total } = data || {};
+  const num = allCheck ? total : 0;
+  const dom = (
+    <Card style={{ borderRadius: 4 }} bordered={false}>
+      <Row justify="space-between">
+        <Space size={20}>
+          <Button
+            type={"primary"}
+            ghost
+            style={{ padding: "4px 24px", borderRadius: "4px" }}
+            onClick={() => {
+              setAllCheck(!allCheck);
+            }}
+          >
+            {!allCheck ? "选择全部" : "取消选择"}
+          </Button>
+          <Text type={"secondary"}>共{total}条</Text>
+          <Text type={"secondary"}>
+            已选择<Link>{num}</Link>条
+          </Text>
+        </Space>
+        {actionRender?.(allCheck, selectedRowData, table)}
+      </Row>
+    </Card>
+  );
+  if (!data) {
+    return dom;
+  }
+  return <Affix offsetBottom={10}>{dom}</Affix>;
+};

package/src/components/Header/index.tsx

@@ -0,0 +1,45 @@
+import type { ColProps } from "antd";
+import { Card } from "antd";
+import type { ConfigDataModal } from "../modal";
+import { useHTableContext } from "../context";
+import { HForm } from "@hw-component/form";
+import { useMemo } from "react";
+import { formConfigDataProvider } from "./utils";
+import type { HItemProps } from "@hw-component/form/lib/Form/modal";
+
+interface IHeaderProps {
+  configData: ConfigDataModal;
+  onFinish: (value: Record<string, any>) => Promise<any>;
+  searchSpan?: ColProps;
+}
+
+export default ({
+  configData,
+  onFinish,
+  searchSpan = { span: 6 },
+}: IHeaderProps) => {
+  const { table } = useHTableContext();
+  const { form } = table;
+
+  const nConfigData: HItemProps[] = useMemo(
+    () => formConfigDataProvider(configData),
+    [configData]
+  );
+
+  return (
+    <Card
+      style={{ borderRadius: 4 }}
+      bordered={false}
+      bodyStyle={{ paddingBottom: 0 }}
+    >
+      <HForm
+        itemSpan={searchSpan}
+        request={onFinish}
+        gutter={[20, 0]}
+        hideLabel={true}
+        configData={nConfigData}
+        form={form}
+      />
+    </Card>
+  );
+};