@hw-component/form 0.0.1

package/lib/Select/hooks/norHooks.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/map');
+var _Promise = require('@babel/runtime-corejs3/core-js/promise');
+var React = require('react');
+var ahooks = require('ahooks');
+
+var resultProvider = function resultProvider(data, fieldNames) {
+  return data === null || data === void 0 ? void 0 : _mapInstanceProperty(data).call(data, function (item) {
+    var _ref = fieldNames || {},
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? "label" : _ref$label,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? "value" : _ref$value;
+    return {
+      label: item[label],
+      value: item[value]
+    };
+  });
+};
+var useOptionReq = function useOptionReq(_ref2) {
+  var manual = _ref2.manual,
+    fieldNames = _ref2.fieldNames,
+    request = _ref2.request,
+    options = _ref2.options,
+    serviceSearch = _ref2.serviceSearch;
+  var _useState = React.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  var _useRequest = ahooks.useRequest( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var params,
+        type,
+        result,
+        resultOpt,
+        _args = arguments;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            params = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
+            type = _args.length > 1 && _args[1] !== undefined ? _args[1] : "init";
+            if (type === "init") {
+              setData(undefined);
+            }
+            if (!request) {
+              _context.next = 8;
+              break;
+            }
+            _context.next = 6;
+            return request(params);
+          case 6:
+            result = _context.sent;
+            return _context.abrupt("return", resultProvider(result, fieldNames));
+          case 8:
+            resultOpt = resultProvider(options, fieldNames);
+            return _context.abrupt("return", _Promise.resolve(resultOpt));
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })), {
+      manual: manual,
+      debounceInterval: 300,
+      onSuccess: function onSuccess(resultData) {
+        setData(resultData);
+      }
+    }),
+    run = _useRequest.run,
+    loading = _useRequest.loading,
+    error = _useRequest.error;
+  var onSearch = function onSearch(inputValue) {
+    if (!serviceSearch) {
+      return;
+    }
+    run({
+      inputValue: inputValue
+    });
+  };
+  return {
+    run: run,
+    loading: loading,
+    error: error,
+    data: data,
+    onSearch: onSearch
+  };
+};
+var useFilterOption = function useFilterOption(_ref4) {
+  var filterOption = _ref4.filterOption,
+    serviceSearch = _ref4.serviceSearch;
+  if (serviceSearch) {
+    return function () {
+      return true;
+    };
+  }
+  return filterOption;
+};
+
+exports.useFilterOption = useFilterOption;
+exports.useOptionReq = useOptionReq;
+// powered by h

package/lib/Select/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { HSelectProps } from "./modal";
+declare const _default: ({ style, mode, options, modeConfig, value, onChange, fieldNames, request, manual, optionLabelProp, filterProvider, optionFilterProp, serviceSearch, onSearch: propsOnSearch, filterOption, showSearch, labelInValue, noMatchItemRender, allSelect, ...props }: HSelectProps) => JSX.Element;
+export default _default;

package/lib/Select/index.js

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime-corejs3/helpers/extends');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/map');
+var antd = require('antd');
+var React = require('react');
+var norHooks = require('./hooks/norHooks.js');
+var changeHooks = require('./hooks/changeHooks.js');
+var defaultConfig = require('./defaultConfig.js');
+var DropdownComponent = require('./components/DropdownComponent.js');
+var AllSelect = require('./components/AllSelect.js');
+
+var _excluded = ["style", "mode", "options", "modeConfig", "value", "onChange", "fieldNames", "request", "manual", "optionLabelProp", "filterProvider", "optionFilterProp", "serviceSearch", "onSearch", "filterOption", "showSearch", "labelInValue", "noMatchItemRender", "allSelect"];
+var Option = antd.Select.Option;
+var index = (function (_ref) {
+  var _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {
+      width: "100%"
+    } : _ref$style,
+    mode = _ref.mode,
+    options = _ref.options,
+    _ref$modeConfig = _ref.modeConfig,
+    modeConfig = _ref$modeConfig === void 0 ? defaultConfig.defaultModeConfig : _ref$modeConfig,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$fieldNames = _ref.fieldNames,
+    fieldNames = _ref$fieldNames === void 0 ? defaultConfig.defaultFieldNames : _ref$fieldNames,
+    request = _ref.request,
+    manual = _ref.manual,
+    _ref$optionLabelProp = _ref.optionLabelProp,
+    optionLabelProp = _ref$optionLabelProp === void 0 ? "label" : _ref$optionLabelProp,
+    filterProvider = _ref.filterProvider,
+    _ref$optionFilterProp = _ref.optionFilterProp,
+    optionFilterProp = _ref$optionFilterProp === void 0 ? "filterlabel" : _ref$optionFilterProp,
+    serviceSearch = _ref.serviceSearch,
+    propsOnSearch = _ref.onSearch,
+    filterOption = _ref.filterOption,
+    showSearch = _ref.showSearch,
+    labelInValue = _ref.labelInValue,
+    _ref$noMatchItemRende = _ref.noMatchItemRender,
+    noMatchItemRender = _ref$noMatchItemRende === void 0 ? defaultConfig.defaultSelectConfig.noMatchItemRender : _ref$noMatchItemRende,
+    allSelect = _ref.allSelect,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _ref2 = (modeConfig === null || modeConfig === void 0 ? void 0 : modeConfig[mode || ""]) || {},
+    icon = _ref2.icon,
+    render = _ref2.render;
+  var selfFilterOption = norHooks.useFilterOption({
+    filterOption: filterOption,
+    serviceSearch: serviceSearch
+  });
+  var _useOptionReq = norHooks.useOptionReq({
+      options: options,
+      manual: manual,
+      fieldNames: fieldNames,
+      request: request,
+      serviceSearch: serviceSearch
+    }),
+    run = _useOptionReq.run,
+    loading = _useOptionReq.loading,
+    data = _useOptionReq.data,
+    error = _useOptionReq.error,
+    onSearch = _useOptionReq.onSearch;
+  var _useValueChange = changeHooks.useValueChange({
+      labelInValue: labelInValue,
+      onChange: onChange,
+      value: value,
+      options: data,
+      mode: mode,
+      noMatchItemRender: noMatchItemRender
+    }),
+    val = _useValueChange.val,
+    change = _useValueChange.change;
+  return /*#__PURE__*/React.createElement(antd.Select, _extends({
+    style: style,
+    mode: mode,
+    loading: loading,
+    value: val,
+    onSearch: propsOnSearch || onSearch,
+    onChange: change,
+    dropdownRender: function dropdownRender(node) {
+      return /*#__PURE__*/React.createElement(DropdownComponent.default, {
+        loading: loading,
+        reload: run,
+        error: error,
+        options: data
+      }, /*#__PURE__*/React.createElement(AllSelect.default, {
+        allSelect: allSelect,
+        options: data,
+        mode: mode,
+        value: val,
+        onChange: change
+      }), node);
+    },
+    optionLabelProp: optionLabelProp,
+    menuItemSelectedIcon: icon,
+    optionFilterProp: optionFilterProp,
+    filterOption: selfFilterOption,
+    showSearch: showSearch,
+    labelInValue: true
+  }, props), data === null || data === void 0 ? void 0 : _mapInstanceProperty(data).call(data, function (item) {
+    var optionValue = item.value,
+      label = item.label;
+    var result = (filterProvider === null || filterProvider === void 0 ? void 0 : filterProvider(item)) || label;
+    var filer = _defineProperty({}, optionFilterProp, result);
+    return /*#__PURE__*/React.createElement(Option, _extends({
+      value: optionValue,
+      key: optionValue,
+      label: label,
+      mode: mode
+    }, filer), render ? render(item, val) : label);
+  }));
+});
+
+exports.default = index;
+// powered by h

package/lib/Select/index.less.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = undefined;
+
+exports.default = styles;
+// powered by h

package/lib/Select/modal.d.ts

@@ -0,0 +1,30 @@
+import type { SelectProps } from "antd";
+import type React from "react";
+export type OptionType = Record<string, any>;
+export type PartialHSelectProps = Partial<HSelectProps>;
+export type RenderFn = (data: OptionType) => React.ReactNode;
+interface ModeConfigItem {
+    icon?: React.ReactNode | null;
+    render?: (item: OptionType, value: any[]) => React.ReactNode;
+}
+export interface ModeConfig {
+    multiple?: ModeConfigItem;
+    tags?: ModeConfigItem;
+}
+export interface HSelectProps extends Omit<SelectProps, "options"> {
+    style?: React.CSSProperties;
+    request?: (params: any) => Promise<OptionType[]>;
+    manual?: boolean;
+    modeConfig?: ModeConfig;
+    onChange?: (val: any) => void;
+    filterProvider?: (item: any) => string;
+    serviceSearch?: boolean;
+    options?: OptionType[];
+    noMatchItemRender?: RenderFn;
+    allSelect?: boolean;
+}
+export interface FilterDataModal {
+    value: any;
+    index: number;
+}
+export {};

package/lib/index.css

@@ -0,0 +1,3 @@
+.option:hover {
+  background-color: #f5f5f5;
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export { default as HSelect } from './Select';

package/lib/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var index = require('./Select/index.js');
+
+
+
+exports.HSelect = index.default;
+// powered by h

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@hw-component/form",
+  "version": "0.0.1",
+  "description": "基于antd二次开发",
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/hdj_wq/hw-components.git"
+  },
+  "license": "ISC",
+  "author": "hdj",
+  "main": "lib/index.js",
+  "module": "es/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": {
+    "ahooks": "2.10.9",
+    "antd": "4.19.0",
+    "react": "16.14.0",
+    "react-dom": "17.0.2",
+    "react-router-dom": "^6.11.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.5",
+    "@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.14",
+    "@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.2",
+    "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"
+}

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,80 @@
+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 postcss = require("rollup-plugin-postcss");
+const autoprefixer = require("autoprefixer");
+const inject = require("@rollup/plugin-inject");
+const url = require("@rollup/plugin-url");
+const pkg = require("../package.json");
+const prefix = pkg.cssPrefix;
+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 ww-building-blocks-tmp",
+      footer: "// powered by ww",
+      entryFileNames: "[name].js",
+      exports: "named",
+      preserveModules: true,
+    },
+  ],
+  plugins: [
+    clear({
+      targets: [outDir, esOutDir],
+    }),
+    url({
+      fileName: "[dirname][hash][extname]",
+    }),
+    postcss({
+      extract: "index.css",
+      modules: {
+        generateScopedName: `${prefix}_[local]`,
+      },
+      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",
+    }),
+    inject({
+      React: "react",
+    }),
+    nodeResolve({
+      resolveOnly: ["node_modules"], //定义为模块
+    }),
+    commonjs({
+      include: ["node_modules"],
+    }),
+  ],
+};

package/scripts/webpack.config.js

@@ -0,0 +1,72 @@
+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$/,
+        exclude: /node_modules/,
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+            options: {
+              modules: true,
+            },
+          },
+          "less-loader",
+        ],
+      },
+    ],
+  },
+  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 styles from "./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={styles.layout}>
+      <Menu
+        className={styles.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={styles.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/Select/components/AllSelect.tsx

@@ -0,0 +1,38 @@
+import type { HSelectProps } from "@/components/Select/modal";
+import { Checkbox, Space } from "antd";
+import styles from "../index.less";
+interface IProps extends HSelectProps {
+  checked?: boolean;
+}
+export default ({
+  allSelect,
+  mode,
+  onChange,
+  value,
+  serviceSearch,
+  options,
+}: IProps) => {
+  if (!allSelect || mode !== "multiple" || serviceSearch) {
+    return null;
+  }
+  const opLen = options?.length || 0;
+  const checked = (value as any[])?.length >= opLen;
+  const change = () => {
+    if (!checked) {
+      onChange?.(options);
+      return;
+    }
+    onChange?.([]);
+  };
+  return (
+    <div
+      className={`ant-select-item ant-select-item-option ${styles.option}`}
+      onClick={change}
+    >
+      <Space>
+        <Checkbox checked={checked} />
+        全部
+      </Space>
+    </div>
+  );
+};