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

package/src/components/Form/hooks/useHForm.ts

@@ -1,13 +1,40 @@
 import { useMemo } from "react";
 import { Form } from "antd";
 import type { FormatItemModal, HFormInstance } from "../modal";
+import type { argsFn } from "../modal";
+
+interface DispatchItemData {
+  keysFn: Record<string, argsFn>;
+  defaultFn: argsFn[];
+}
 
 export default () => {
   const [form] = Form.useForm();
   return useMemo<HFormInstance>(() => {
     const formatSourceData: Record<string, FormatItemModal> = {};
-    let dispatchSourceData: Record<string, VoidFunction[]> = {};
+    let dispatchSourceData: Record<string, DispatchItemData> = {};
+    let cacheValues: Record<string, any> = {};
+    const norAddItemDispatch = (name, fn) => {
+      if (!name) {
+        return {
+          keysFn: {},
+          defaultFn: [fn],
+        };
+      }
+      return {
+        keysFn: {
+          [name]: fn,
+        },
+        defaultFn: [],
+      };
+    };
     return {
+      initValues() {
+        if (cacheValues) {
+          const newValue = this.formatValues(cacheValues);
+          form.setFieldsValue(newValue);
+        }
+      },
       addFormat(name: string, format?: FormatItemModal) {
         if (!format) {
           return;
@@ -39,41 +66,67 @@ export default () => {
         });
         return newValue;
       }, //转化方法
-      dispatch(key) {
+      dispatch(action, ...args) {
+        const { key, name } = action;
         const items = dispatchSourceData[key];
         if (!items) {
           return;
         }
-        items.forEach((fn) => {
-          fn();
+        const { keysFn, defaultFn } = items;
+        if (name) {
+          return keysFn[name]?.(...args);
+        }
+        const fnArrays = Object.keys(keysFn).map((itemKey) => {
+          return keysFn[itemKey];
+        }); //不存在name就合并
+        [...fnArrays, ...defaultFn].forEach((fn) => {
+          fn(...args);
         });
       },
-      addDispatchListener(key, fn) {
+      addDispatchListener(action, fn) {
+        const { key, name } = action;
         const items = dispatchSourceData[key];
         if (!items) {
-          dispatchSourceData[key] = [fn];
+          dispatchSourceData[key] = norAddItemDispatch(name, fn);
           return;
         }
-        items.push(fn);
-        dispatchSourceData[key] = items;
+        const { keysFn, defaultFn } = items;
+        if (name) {
+          keysFn[name] = fn;
+        } else {
+          defaultFn.push(fn);
+        }
+        dispatchSourceData[key] = {
+          keysFn,
+          defaultFn,
+        };
       },
-      removeDispatchListener(key) {
-        if (!key) {
+      removeDispatchListener(action) {
+        if (!action) {
           dispatchSourceData = {};
           return;
         }
+        const { key, name } = action;
+        const items = dispatchSourceData[key];
+        if (!items) {
+          return;
+        }
+        if (name) {
+          const { keysFn } = items;
+          Reflect.deleteProperty(keysFn, name);
+          items.keysFn = keysFn;
+          dispatchSourceData[key] = items;
+          return;
+        }
         Reflect.deleteProperty(dispatchSourceData, key);
       },
-      initValues(value = {}) {
-        const newValue = this.formatValues(value);
-        form.setFieldsValue(newValue);
-      },
       outputValues(value) {
         return this.formatValues(value, "outputValue");
       },
       ...form,
       setFieldsValue(values) {
         const newValue = this.formatValues(values);
+        cacheValues = values;
         form.setFieldsValue(newValue);
       },
       validateFields(nameList) {

package/src/components/Form/index.tsx

@@ -1,11 +1,14 @@
 import { Form } from "antd";
 import type { HFormProps } from "./modal";
 import Item from "./FormItem";
-import { useCurrentForm, useInit, useSub } from "./hooks";
+import { useCurrentForm, useSub } from "./hooks";
 import { FormContext } from "./Context";
 import PageHandler from "../PageHandler";
 import useInitConfigData from "./hooks/useInitConfigData";
+import { useEffect } from "react";
+import { useRequest } from "ahooks";
 import InitSet from "./InitSet";
+
 export default ({
   configData,
   labelWidth,
@@ -28,12 +31,27 @@ export default ({
     valueType,
     form: hForm,
   });
-
-  const { infoRun, infoLoading, infoErr, infoData } = useInit({
-    infoRequest,
-    initialValues,
+  const {
+    run: infoRun,
+    loading: infoLoading,
+    error: infoErr,
+    data: infoData,
+  } = useRequest(async () => {
+    let setValue = initialValues;
+    if (!initialValues && !infoRequest) {
+      return {};
+    }
+    if (infoRequest) {
+      setValue = await infoRequest();
+    }
+    hForm.setFieldsValue(setValue);
+    return setValue;
   });
-
+  useEffect(() => {
+    return () => {
+      hForm.removeDispatchListener();
+    };
+  }, []);
   return (
     <PageHandler
       loading={infoLoading}
@@ -53,8 +71,8 @@ export default ({
               />
             );
           })}
+          <InitSet />
         </Form>
-        <InitSet initValues={infoData} />
       </FormContext.Provider>
     </PageHandler>
   );

package/src/components/Form/modal.ts

@@ -53,18 +53,20 @@ type HelperModal = (form: HFormInstance) => React.ReactNode | string;
 
 export type HideModal = (form: HFormInstance) => boolean;
 
+export type AddDispatchListenerFn = (action: ActionModal, fn: argsFn) => void;
+
 export interface HItemProps extends Omit<FormItemProps, "name"> {
   type?: string;
   itemProps?: ItemPropsType;
   render?: RenderFun;
-  helper?: HelperModal;
+  helper?: HelperModal | string;
   hover?: string | HoverModal;
   // formItems?: HItemProps[]; 保留感觉没必要
   labelWidth?: number;
   hide?: boolean | HideModal;
   placeholder?: string | string[];
-  formatKeys?: string[];
-  name: string;
+  // formatKeys?: string[];
+  name?: string;
 }
 
 export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form"> {
@@ -82,7 +84,7 @@ export interface HFormItemProps extends HItemProps {
 export interface FormItemWithRender extends Omit<HFormItemProps, "render"> {
   render: (form: HFormInstance) => React.ReactNode;
 }
-
+export type argsFn = (...args: any[]) => void;
 export interface FormContextProps {
   loading?: boolean;
   form: HFormInstance;
@@ -102,18 +104,21 @@ export interface IFormConfigContextProps {
   dateRanges?: RangePickerProps["ranges"];
   uploadProps?: ConfigUploadProps;
 }
-
+interface ActionModal {
+  key: string;
+  name?: string;
+}
 export interface HFormInstance extends FormInstance {
   addFormat: (name: string, formats?: FormatItemModal) => void;
-  initValues: (values?: Record<string, any>) => void;
+  initValues: VoidFunction;
   formatValues: (
     values?: Record<string, any>,
     formatKey?: string
   ) => Record<string, any>;
-  dispatch: (key: string) => void;
+  dispatch: (action: ActionModal, ...args: any[]) => void;
   outputValues: (values?: Record<string, any>) => Record<string, any>;
-  addDispatchListener: (key: string, fn: VoidFunction) => void;
-  removeDispatchListener: (key?: string) => void;
+  addDispatchListener: AddDispatchListenerFn;
+  removeDispatchListener: (action?: ActionModal, fn?: argsFn) => void;
 }
 
 export interface ConnectConfigModal {
@@ -139,4 +144,5 @@ export interface addFormatItemModal {
 
 export interface ConnectResultProps {
   addFormat?: (format: Record<string, addFormatItemModal>) => void;
+  addDispatchListener?: (key: string, fn: argsFn) => void;
 }

package/src/components/Input/SelectInput.tsx

@@ -13,6 +13,7 @@ export const Index = ({
   onChange,
   valueName = defaultValueName,
   addFormat,
+  addDispatchListener,
   ...props
 }: HSelectInputProps) => {
   const { input = "", select = "" } = valueName;
@@ -31,7 +32,7 @@ export const Index = ({
   addFormat?.({
     float: {
       inputValue: (item, initValue) => {
-        const { name } = item;
+        const { name = "" } = item;
         const resultObj = {};
         Object.values(valueName).forEach((key) => {
           resultObj[key] = initValue[key];
@@ -41,7 +42,7 @@ export const Index = ({
         };
       },
       outputValue: (item, outputValue) => {
-        const { name } = item;
+        const { name = "" } = item;
         const { [name]: itemVal = {} } = outputValue;
         const newItemVal = { [itemVal[select]]: itemVal[input] };
         return {

package/src/components/Input/modal.ts

@@ -3,6 +3,7 @@ import type { HSelectProps } from "../Select/modal";
 import type { SelectInputType } from "./SelectInput";
 import type { PromiseFnResult } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
+import type { AddDispatchListenerFn } from "../Form/modal";
 
 export type HInputProps = InputProps;
 
@@ -18,6 +19,7 @@ export interface HSelectInputProps
   onChange?: (value: Record<string, any>, type: SelectInputType) => void;
   valueName?: ValueNameModal;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
+  addDispatchListener?: AddDispatchListenerFn;
 }
 export interface HButtonProps extends Omit<ButtonProps, "onClick"> {
   onClick: (

package/src/components/ModalForm/hooks.ts

@@ -0,0 +1,45 @@
+import { useEffect, useMemo, useState } from "react";
+import useHForm from "../Form/hooks/useHForm";
+import type {
+  HModalFormInstance,
+  ModifyPropsModal,
+} from "@/components/ModalForm/modal";
+
+export const useModifyProps = ({
+  visible,
+  configData,
+  initialValues,
+}: ModifyPropsModal) => {
+  const [modalVisible, setModalVisible] = useState(visible);
+  const [modalFormData, setModalFormData] = useState(configData);
+  const [initValue, setInitValue] = useState(initialValues);
+  useEffect(() => {
+    setModalVisible(visible);
+  }, [visible]);
+  useEffect(() => {
+    setModalFormData(configData);
+  }, [configData]);
+  return {
+    modalFormData,
+    modalVisible,
+    setModalVisible,
+    setModalFormData,
+    initValue,
+    setInitValue,
+  };
+};
+export const useHModalForm = () => {
+  const hForm = useHForm();
+  return useMemo<HModalFormInstance>(() => {
+    return {
+      ...hForm,
+      show: (params) => {},
+      hide: () => {},
+    };
+  }, []);
+};
+
+export const useCurrentForm = (hModalForm?: HModalFormInstance) => {
+  const defaultHModalForm = useHModalForm();
+  return hModalForm || defaultHModalForm;
+};

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/TDPicker/RangePicker.tsx

@@ -47,21 +47,23 @@ const HRangePicker: React.FC<HRangePickerProps> = ({
     }
     return ranges;
   }, [ranges]); //默认
-
   addFormat?.({
     float: {
       inputValue: (item, initValue) => {
-        const { name: valueName } = item;
+        const { name: valueName = "" } = item;
         const resultObj = {};
         Object.values(dateMapKeys).forEach((key) => {
-          resultObj[key] = initValue[key];
+          if (initValue[key]) {
+            resultObj[key] = initValue[key];
+          }
         });
+        const hasKeys = Object.keys(resultObj).length !== 0;
         return {
-          [valueName]: resultObj,
+          [valueName]: hasKeys ? resultObj : null,
         };
       },
       outputValue: (item, outputValue) => {
-        const { name: valueName } = item;
+        const { name: valueName = "" } = item;
         const { [valueName]: itemVal = {} } = outputValue;
         return {
           ...itemVal,

package/src/components/TDPicker/modal.ts

@@ -6,6 +6,7 @@ import type { TimePickerProps } from "antd";
 import type { DurationInputArg2 } from "moment";
 import type { DateRangePickerValueMapModal } from "../modal";
 import type { addFormatItemModal } from "@/components/Form/modal";
+import type { argsFn } from "@/components/Form/modal";
 export interface HDatePickerProps
   extends Omit<DatePickerProps, "onChange" | "format" | "ranges"> {
   onChange?: (time?: Moment | string | number) => void;

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/Form/index.tsx

@@ -124,8 +124,8 @@ export default () => {
               setTimeout(() => {
                 resolve({
                   check1: 1,
-                  // testStart: "1694747960",
-                  // testEnd: "1693538359",
+                  testStart: "1694747960",
+                  testEnd: "1693538359",
                   op: 1,
                   opInput: "12121",
                 });

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;