hwxc 1.0.0

package/README.md

@@ -0,0 +1,6 @@
+// 安装
+npm install hwxc
+
+// pos自定义搜索弹窗(enter跳转光标)
+import { PosSearchModal } from 'hwxc';
+import type { PosSearchModalProps } from 'hwxc';

package/dist/index.d.mts

@@ -0,0 +1,22 @@
+import { ProColumns } from '@ant-design/pro-table';
+import React from 'react';
+
+type Props = {
+    /** 是否显示弹窗 */
+    visible: boolean;
+    /** 关闭时是否销毁子元素 */
+    destroyOnClose?: boolean;
+    /** 自定义dom */
+    nodeDom?: React.ReactNode;
+    /** 取消回调 */
+    onCancle: () => void;
+    /** 确认回调，返回表单值 */
+    onOk: (res: any) => void;
+    /** ProTable 列配置，用于生成表单项 */
+    columns: ProColumns<any>[];
+    /** 确认按钮加载状态 */
+    loading?: boolean;
+};
+declare const PosSearchModal: (props: Props) => React.JSX.Element;
+
+export { PosSearchModal, Props as PosSearchModalProps };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import { ProColumns } from '@ant-design/pro-table';
+import React from 'react';
+
+type Props = {
+    /** 是否显示弹窗 */
+    visible: boolean;
+    /** 关闭时是否销毁子元素 */
+    destroyOnClose?: boolean;
+    /** 自定义dom */
+    nodeDom?: React.ReactNode;
+    /** 取消回调 */
+    onCancle: () => void;
+    /** 确认回调，返回表单值 */
+    onOk: (res: any) => void;
+    /** ProTable 列配置，用于生成表单项 */
+    columns: ProColumns<any>[];
+    /** 确认按钮加载状态 */
+    loading?: boolean;
+};
+declare const PosSearchModal: (props: Props) => React.JSX.Element;
+
+export { PosSearchModal, Props as PosSearchModalProps };

package/dist/index.js

@@ -0,0 +1,196 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PosSearchModal: () => PosSearchModal
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/PosSearchModal/index.tsx
+var import_antd = require("antd");
+var import_Form = require("antd/es/form/Form");
+var import_react = require("react");
+var import_ahooks = require("ahooks");
+var import_react2 = __toESM(require("react"));
+var { RangePicker } = import_antd.DatePicker;
+var PosSearchModal = (props) => {
+  const { visible, nodeDom, onCancle, onOk, columns, destroyOnClose, loading } = props;
+  const [form] = (0, import_Form.useForm)();
+  const confirmRef = (0, import_react.useRef)();
+  const searchList = columns.filter((item) => item.search !== false);
+  const renderFormItem = (item, index) => {
+    const type = item.valueType;
+    if (type === "select")
+      return /* @__PURE__ */ import_react2.default.createElement(import_antd.Select, __spreadValues({ style: { width: 400 } }, item.fieldProps));
+    if (type === "dateTimeRange")
+      return /* @__PURE__ */ import_react2.default.createElement(
+        RangePicker,
+        __spreadProps(__spreadValues({
+          style: { width: 400 }
+        }, item.fieldProps), {
+          showTime: true
+        })
+      );
+    if (type === "dateRange")
+      return /* @__PURE__ */ import_react2.default.createElement(
+        RangePicker,
+        __spreadProps(__spreadValues({
+          style: { width: 400 }
+        }, item.fieldProps), {
+          format: "YYYYMMDD",
+          placeholder: ["19990101", "19990101"]
+        })
+      );
+    if (type === "date")
+      return /* @__PURE__ */ import_react2.default.createElement(
+        import_antd.DatePicker,
+        __spreadValues({
+          style: { width: 400 }
+        }, item.fieldProps)
+      );
+    return /* @__PURE__ */ import_react2.default.createElement(import_antd.Input, __spreadValues({ style: { width: 400 } }, item.fieldProps));
+  };
+  const handleSubmit = (0, import_ahooks.useLockFn)(() => {
+    form.validateFields().then((res) => {
+      onOk(res);
+    });
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 2e3);
+    });
+  });
+  const enterJump = (e) => {
+    e.target.current = true;
+    const arr = Array.from(document.querySelectorAll("input"));
+    const index = arr.findIndex((item) => item.current);
+    const right = arr[index + 1];
+    if (e.key === "Enter") {
+      if (!e.target.closest(".ant-select-open")) {
+        e.stopPropagation();
+      }
+      if (right) {
+        right.select();
+      } else {
+        setTimeout(() => {
+          var _a;
+          (_a = confirmRef.current) == null ? void 0 : _a.focus();
+        }, 100);
+      }
+    }
+    e.target.current = false;
+  };
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (visible) {
+      setTimeout(() => {
+        var _a2, _b;
+        (_a2 = document.querySelector("#search-form")) == null ? void 0 : _a2.addEventListener("keydown", enterJump);
+        (_b = document.querySelector("#search-form input")) == null ? void 0 : _b.select();
+      }, 200);
+    } else {
+      (_a = document.querySelector("#search-form")) == null ? void 0 : _a.removeEventListener("keydown", enterJump);
+    }
+  }, [visible]);
+  const triggerDom = nodeDom ? import_react2.default.cloneElement(nodeDom) : "";
+  return /* @__PURE__ */ import_react2.default.createElement(
+    import_antd.Modal,
+    {
+      title: "\u67E5\u8BE2",
+      destroyOnClose,
+      visible,
+      onCancel: onCancle,
+      onOk: handleSubmit,
+      width: 600,
+      bodyStyle: { height: 400, overflowY: "auto" },
+      confirmLoading: loading,
+      footer: /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement(
+        "span",
+        {
+          style: {
+            float: "left",
+            color: "red"
+          }
+        },
+        "\u6E29\u99A8\u63D0\u793A: Enter\u56DE\u8F66\u952E\u5207\u6362\u5149\u6807"
+      ), /* @__PURE__ */ import_react2.default.createElement(import_antd.Button, { onClick: onCancle }, "\u53D6\u6D88"), /* @__PURE__ */ import_react2.default.createElement(import_antd.Button, { ref: confirmRef, type: "primary", onClick: handleSubmit }, "\u786E\u5B9A"))
+    },
+    /* @__PURE__ */ import_react2.default.createElement(
+      import_antd.Form,
+      {
+        id: "search-form",
+        form,
+        labelCol: { span: 6 },
+        labelAlign: "left",
+        preserve: false,
+        size: "middle"
+      },
+      searchList.map(
+        (item, index) => {
+          var _a;
+          return item.renderFormItem ? item.renderFormItem() : /* @__PURE__ */ import_react2.default.createElement(
+            import_antd.Form.Item,
+            {
+              key: item.dataIndex,
+              label: item.title,
+              name: item.dataIndex,
+              initialValue: item.initialValue,
+              rules: [{ required: (_a = item.fieldProps) == null ? void 0 : _a.required }]
+            },
+            renderFormItem(item, index)
+          );
+        }
+      )
+    ),
+    triggerDom
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PosSearchModal
+});

package/dist/index.mjs

@@ -0,0 +1,162 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/components/PosSearchModal/index.tsx
+import { Button, DatePicker, Form, Input, Modal, Select } from "antd";
+import { useForm } from "antd/es/form/Form";
+import { useEffect, useRef } from "react";
+import { useLockFn } from "ahooks";
+import React from "react";
+var { RangePicker } = DatePicker;
+var PosSearchModal = (props) => {
+  const { visible, nodeDom, onCancle, onOk, columns, destroyOnClose, loading } = props;
+  const [form] = useForm();
+  const confirmRef = useRef();
+  const searchList = columns.filter((item) => item.search !== false);
+  const renderFormItem = (item, index) => {
+    const type = item.valueType;
+    if (type === "select")
+      return /* @__PURE__ */ React.createElement(Select, __spreadValues({ style: { width: 400 } }, item.fieldProps));
+    if (type === "dateTimeRange")
+      return /* @__PURE__ */ React.createElement(
+        RangePicker,
+        __spreadProps(__spreadValues({
+          style: { width: 400 }
+        }, item.fieldProps), {
+          showTime: true
+        })
+      );
+    if (type === "dateRange")
+      return /* @__PURE__ */ React.createElement(
+        RangePicker,
+        __spreadProps(__spreadValues({
+          style: { width: 400 }
+        }, item.fieldProps), {
+          format: "YYYYMMDD",
+          placeholder: ["19990101", "19990101"]
+        })
+      );
+    if (type === "date")
+      return /* @__PURE__ */ React.createElement(
+        DatePicker,
+        __spreadValues({
+          style: { width: 400 }
+        }, item.fieldProps)
+      );
+    return /* @__PURE__ */ React.createElement(Input, __spreadValues({ style: { width: 400 } }, item.fieldProps));
+  };
+  const handleSubmit = useLockFn(() => {
+    form.validateFields().then((res) => {
+      onOk(res);
+    });
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve();
+      }, 2e3);
+    });
+  });
+  const enterJump = (e) => {
+    e.target.current = true;
+    const arr = Array.from(document.querySelectorAll("input"));
+    const index = arr.findIndex((item) => item.current);
+    const right = arr[index + 1];
+    if (e.key === "Enter") {
+      if (!e.target.closest(".ant-select-open")) {
+        e.stopPropagation();
+      }
+      if (right) {
+        right.select();
+      } else {
+        setTimeout(() => {
+          var _a;
+          (_a = confirmRef.current) == null ? void 0 : _a.focus();
+        }, 100);
+      }
+    }
+    e.target.current = false;
+  };
+  useEffect(() => {
+    var _a;
+    if (visible) {
+      setTimeout(() => {
+        var _a2, _b;
+        (_a2 = document.querySelector("#search-form")) == null ? void 0 : _a2.addEventListener("keydown", enterJump);
+        (_b = document.querySelector("#search-form input")) == null ? void 0 : _b.select();
+      }, 200);
+    } else {
+      (_a = document.querySelector("#search-form")) == null ? void 0 : _a.removeEventListener("keydown", enterJump);
+    }
+  }, [visible]);
+  const triggerDom = nodeDom ? React.cloneElement(nodeDom) : "";
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      title: "\u67E5\u8BE2",
+      destroyOnClose,
+      visible,
+      onCancel: onCancle,
+      onOk: handleSubmit,
+      width: 600,
+      bodyStyle: { height: 400, overflowY: "auto" },
+      confirmLoading: loading,
+      footer: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          style: {
+            float: "left",
+            color: "red"
+          }
+        },
+        "\u6E29\u99A8\u63D0\u793A: Enter\u56DE\u8F66\u952E\u5207\u6362\u5149\u6807"
+      ), /* @__PURE__ */ React.createElement(Button, { onClick: onCancle }, "\u53D6\u6D88"), /* @__PURE__ */ React.createElement(Button, { ref: confirmRef, type: "primary", onClick: handleSubmit }, "\u786E\u5B9A"))
+    },
+    /* @__PURE__ */ React.createElement(
+      Form,
+      {
+        id: "search-form",
+        form,
+        labelCol: { span: 6 },
+        labelAlign: "left",
+        preserve: false,
+        size: "middle"
+      },
+      searchList.map(
+        (item, index) => {
+          var _a;
+          return item.renderFormItem ? item.renderFormItem() : /* @__PURE__ */ React.createElement(
+            Form.Item,
+            {
+              key: item.dataIndex,
+              label: item.title,
+              name: item.dataIndex,
+              initialValue: item.initialValue,
+              rules: [{ required: (_a = item.fieldProps) == null ? void 0 : _a.required }]
+            },
+            renderFormItem(item, index)
+          );
+        }
+      )
+    ),
+    triggerDom
+  );
+};
+export {
+  PosSearchModal
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "hwxc",
+  "version": "1.0.0",
+  "description": "HWXC 组件库",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
+    "antd": ">=4.0.0",
+    "@ant-design/pro-table": ">=2.0.0",
+    "ahooks": ">=2.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "tsup": "^7.0.0"
+  },
+  "keywords": ["react", "antd", "pro-table", "modal"],
+  "author": "your-name",
+  "license": "MIT"
+}