@hw-component/form 0.0.1-beta → 0.0.1-beta-v2

package/src/components/ModalForm/index.tsx

@@ -0,0 +1,69 @@
+import { Modal } from "antd";
+import type { ModalFormProps } from "@/components/ModalForm/modal";
+import HForm from "../Form";
+import { useCurrentForm, useModifyProps } from "./hooks";
+import { useEffect } from "react";
+export default ({
+  visible,
+  title,
+  onCancel,
+  configData,
+  infoRequest,
+  request,
+  afterClose,
+  modalForm,
+  initialValues = {},
+  ...props
+}: ModalFormProps) => {
+  const {
+    modalVisible,
+    modalFormData,
+    setModalVisible,
+    setModalFormData,
+    initValue,
+    setInitValue,
+  } = useModifyProps({ configData, visible, initialValues });
+
+  const currentForm = useCurrentForm(modalForm);
+  useEffect(() => {
+    currentForm.show = ({
+      configData: changeConfigData,
+      initialValues: changeInitialValues,
+    }) => {
+      if (!!changeConfigData) {
+        setModalFormData(changeConfigData);
+      }
+      setInitValue(changeInitialValues);
+      setModalVisible(true);
+    };
+    currentForm.hide = () => {
+      setModalVisible(false);
+    };
+  }, []);
+  const cancel = (e) => {
+    if (onCancel) {
+      return onCancel?.(e);
+    }
+    setModalVisible(false);
+  };
+  return (
+    <Modal
+      title={title}
+      visible={modalVisible}
+      onCancel={cancel}
+      afterClose={() => {
+        currentForm.resetFields();
+        afterClose?.();
+      }}
+      {...props}
+    >
+      <HForm
+        configData={modalFormData}
+        initialValues={initValue}
+        {...props}
+        form={currentForm}
+        infoRequest={infoRequest}
+      />
+    </Modal>
+  );
+};

package/src/components/ModalForm/modal.ts

@@ -0,0 +1,22 @@
+import type { HFormProps } from "@/components/Form/modal";
+import type { ModalProps } from "antd";
+import type { HFormInstance, HItemProps } from "@/components/Form/modal";
+
+type RootProps = HFormProps & ModalProps;
+
+export interface ModifyPropsModal {
+  configData: HItemProps[];
+  visible?: boolean;
+  initialValues?: Record<string, any>;
+}
+export interface ShowParamsModal extends Partial<ModifyPropsModal> {
+  initialValues?: Record<string, any>;
+}
+
+export interface HModalFormInstance extends HFormInstance {
+  show: (data: ShowParamsModal) => void;
+  hide: VoidFunction;
+}
+export interface ModalFormProps extends RootProps {
+  modalForm?: HModalFormInstance;
+}

package/src/components/index.tsx

@@ -3,6 +3,9 @@ import FormConfig from "./Form/config";
 import PageHandler from "./PageHandler";
 export { default as HForm } from "./Form";
 export { default as useHForm } from "./Form/hooks/useHForm";
+export { useHModalForm } from "./ModalForm/hooks";
+
+import ModalForm from "./ModalForm";
 export const HSelect = FormConfig.select;
 export const HInput = FormConfig.input;
 export const HSelectInput = FormConfig.selectInput;
@@ -19,3 +22,4 @@ export const HTimePicker = FormConfig.timePicker;
 export const HInputNumber = FormConfig.inputNumber;
 export const HPageHandler = PageHandler;
 export const HFormConfigProvider = FormConfig.formConfigProvider;
+export const HModalForm = ModalForm;

package/src/pages/ModalForm/index.tsx

@@ -0,0 +1,127 @@
+import { Button } from "antd";
+import { HModalForm, useHModalForm } from "../../components";
+const data = [
+  {
+    label: "输入框",
+    name: "name",
+    rules: [
+      () => {
+        return {
+          required: true,
+        };
+      },
+    ],
+  },
+  {
+    label: "数字",
+    name: "sz",
+    type: "inputNumber",
+    rules: [{ required: true }],
+  },
+  {
+    label: "下拉输入框",
+    name: "selectInput",
+    type: "selectInput",
+    rules: [{ required: true }],
+    itemProps: {
+      valueName: {
+        select: "op",
+        input: "opInput",
+      },
+      selectProps: {
+        options: [{ label: "测试", value: 1 }],
+      },
+    },
+  },
+  {
+    label: "按钮输入框",
+    name: "buttonInput",
+    type: "buttonInput",
+    children: "点击",
+    rules: [{ required: true }],
+  },
+  {
+    label: "选择",
+    name: "checkboxGroup",
+    type: "checkboxGroup",
+    rules: [{ required: true }],
+    helper: "帮助我",
+    options: [
+      { label: "选择1", value: "check1" },
+      { label: "选择2", value: "check2" },
+    ],
+  },
+  {
+    label: "开关",
+    name: "switch",
+    type: "switch",
+    rules: [{ required: true }],
+  },
+  {
+    label: "时间",
+    name: "datePicker",
+    type: "datePicker",
+    hover: "时间选择",
+    helper: "帮助我",
+    rules: [{ required: true }],
+  },
+  {
+    label: "时间段",
+    name: "rangePicker",
+    type: "rangePicker",
+    helper: "帮助我",
+    rules: [{ required: true }],
+    itemProps: {
+      valueMap: {
+        start: "testStart",
+        end: "testEnd",
+      },
+    },
+  },
+  {
+    label: "时分秒",
+    name: "timePicker",
+    type: "timePicker",
+    rules: [{ required: true }],
+  },
+  {
+    label: "文件",
+    name: "upload",
+    type: "upload",
+    rules: [{ required: true }],
+  },
+  {
+    label: "地址文件",
+    name: "urlUpload",
+    type: "urlUpload",
+    rules: [{ required: true }],
+  },
+];
+export default () => {
+  const modalForm = useHModalForm();
+  return (
+    <>
+      <Button
+        onClick={() => {
+          modalForm.show({
+            initialValues: {
+              check1: 1,
+              testStart: "1694747960",
+              testEnd: "1693538359",
+              op: 1,
+              opInput: "12121",
+            },
+          });
+        }}
+      >
+        打开
+      </Button>
+      <HModalForm
+        configData={data}
+        labelWidth={88}
+        modalForm={modalForm}
+        title="测试"
+      />
+    </>
+  );
+};

package/src/routes.tsx

@@ -8,7 +8,7 @@ import Switch from "./pages/Switch";
 import DatePicker from "./pages/DatePicker";
 import Upload from "./pages/Upload";
 import Form from "./pages/Form";
-
+import ModalForm from "./pages/ModalForm";
 export interface RouteModal {
   path?: string;
   name?: string;
@@ -63,6 +63,11 @@ const routes: RouteModal[] = [
     name: "表单",
     element: <Form />,
   },
+  {
+    path: "/modalForm",
+    name: "弹窗表单",
+    element: <ModalForm />,
+  },
 ];
 
 export default routes;