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

package/src/components/DialogForm/DrawerForm/Footer.tsx

@@ -0,0 +1,19 @@
+import { Row, Space, Button } from "antd";
+import type { DialogFormProps } from "../modal";
+
+export default ({
+  onCancel,
+  onOk,
+  confirmLoading,
+}: Omit<DialogFormProps, "configData">) => {
+  return (
+    <Row justify={"end"}>
+      <Space size={"middle"}>
+        <Button onClick={onCancel}>关闭</Button>
+        <Button type={"primary"} onClick={onOk} loading={confirmLoading}>
+          确定
+        </Button>
+      </Space>
+    </Row>
+  );
+};

package/src/components/DialogForm/DrawerForm/Title.tsx

@@ -0,0 +1,12 @@
+import type { ModalProps } from "antd";
+import { Row } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+
+export default ({ title, closable, onCancel }: ModalProps) => {
+  return (
+    <Row justify={"space-between"}>
+      <div>{title}</div>
+      {closable && <CloseOutlined onClick={onCancel} />}
+    </Row>
+  );
+};

package/src/components/DialogForm/DrawerForm/index.tsx

@@ -0,0 +1,85 @@
+import { Drawer } from "antd";
+import type { DialogFormProps } from "../modal";
+import { useCurrentForm, useModifyProps, useSub } from "../hooks";
+import HForm from "../../Form";
+import Title from "./Title";
+import Footer from "./Footer";
+export default ({
+  visible,
+  title,
+  onCancel,
+  configData,
+  infoRequest,
+  request,
+  afterClose,
+  dialogForm,
+  closable = true,
+  initialValues = {},
+  labelWidth,
+  onOk,
+  onFinish,
+  size,
+  form,
+  footer,
+  ...props
+}: DialogFormProps) => {
+  const currentForm = useCurrentForm(dialogForm);
+  const {
+    modalVisible,
+    modalFormData,
+    setModalVisible,
+    initValue,
+    onAfterClose,
+  } = useModifyProps({
+    configData,
+    visible,
+    initialValues,
+    dialogForm: currentForm,
+  });
+  const cancel = (e) => {
+    onAfterClose();
+    if (onCancel) {
+      return onCancel?.(e);
+    }
+    setModalVisible(false);
+  };
+  const { loading, run } = useSub({ request, onFinish });
+  const footerComponent = () => {
+    if (footer === null) {
+      return null;
+    }
+    return (
+      footer || (
+        <Footer
+          onCancel={cancel}
+          onOk={currentForm.submit}
+          confirmLoading={loading}
+        />
+      )
+    );
+  };
+  return (
+    <Drawer
+      visible={modalVisible}
+      title={<Title title={title} closable={closable} onCancel={cancel} />}
+      {...props}
+      onClose={cancel}
+      closable={false}
+      destroyOnClose={true}
+      footer={footerComponent()}
+    >
+      <HForm
+        configData={modalFormData}
+        initialValues={initValue}
+        {...props}
+        form={currentForm}
+        onFinish={async (values) => {
+          await run(values);
+          setModalVisible(false);
+        }}
+        infoRequest={infoRequest}
+        labelWidth={labelWidth}
+      />
+    </Drawer>
+  );
+};

package/src/components/DialogForm/ModalForm.tsx

@@ -0,0 +1,60 @@
+import { Modal } from "antd";
+import type { DialogFormProps } from "./modal";
+import HForm from "../Form";
+import { useCurrentForm, useModifyProps, useSub } from "./hooks";
+export default ({
+  visible,
+  title,
+  onCancel,
+  configData,
+  infoRequest,
+  request,
+  afterClose,
+  dialogForm,
+  initialValues = {},
+  onFinish,
+  ...props
+}: DialogFormProps) => {
+  const currentForm = useCurrentForm(dialogForm);
+  const { modalVisible, modalFormData, setModalVisible, initValue } =
+    useModifyProps({
+      configData,
+      visible,
+      initialValues,
+      dialogForm: currentForm,
+    });
+  const cancel = (e) => {
+    if (onCancel) {
+      return onCancel?.(e);
+    }
+    setModalVisible(false);
+  };
+  const { loading, run } = useSub({ request, onFinish });
+  return (
+    <Modal
+      title={title}
+      visible={modalVisible}
+      onCancel={cancel}
+      confirmLoading={loading}
+      afterClose={() => {
+        currentForm.resetFields();
+        afterClose?.();
+      }}
+      {...props}
+      onOk={currentForm.submit}
+      destroyOnClose={true}
+    >
+      <HForm
+        configData={modalFormData}
+        initialValues={initValue}
+        onFinish={async (values) => {
+          await run(values);
+          setModalVisible(false);
+        }}
+        {...props}
+        form={currentForm}
+        infoRequest={infoRequest}
+      />
+    </Modal>
+  );
+};

package/src/components/DialogForm/hooks.ts

@@ -0,0 +1,87 @@
+import { useEffect, useMemo, useState } from "react";
+import useHForm from "../Form/hooks/useHForm";
+import type {
+  DialogFormProps,
+  HDialogFormInstance,
+  ModifyPropsModal,
+} from "./modal";
+import { useRequest } from "ahooks";
+
+export const useModifyProps = ({
+  visible,
+  configData,
+  initialValues,
+  dialogForm,
+  afterClose,
+}: ModifyPropsModal) => {
+  const [modalVisible, setModalVisible] = useState(visible);
+  const [modalFormData, setModalFormData] = useState(configData);
+  const [initValue, setInitValue] = useState(initialValues);
+  const onAfterClose = () => {
+    setTimeout(() => {
+      dialogForm.resetFields();
+      afterClose?.();
+    }, 0);
+  };
+  useEffect(() => {
+    setModalVisible(visible);
+  }, [visible]);
+  useEffect(() => {
+    setModalFormData(configData);
+  }, [configData]);
+  useEffect(() => {
+    dialogForm.show = (params = {}) => {
+      const {
+        configData: changeConfigData,
+        initialValues: changeInitialValues,
+      } = params;
+      if (!!changeConfigData) {
+        setModalFormData(changeConfigData);
+      }
+      setInitValue(changeInitialValues);
+      setModalVisible(true);
+    };
+    dialogForm.hide = () => {
+      setModalVisible(false);
+      onAfterClose();
+    };
+  }, [afterClose]);
+  return {
+    modalFormData,
+    modalVisible,
+    setModalVisible,
+    setModalFormData,
+    initValue,
+    setInitValue,
+    onAfterClose,
+  };
+};
+export const useHDialogForm = () => {
+  const hForm = useHForm();
+  return useMemo<HDialogFormInstance>(() => {
+    return {
+      ...hForm,
+      show: (params) => {},
+      hide: () => {},
+    };
+  }, []);
+};
+
+export const useCurrentForm = (hDialogForm?: HDialogFormInstance) => {
+  const defaultHModalForm = useHDialogForm();
+  return hDialogForm || defaultHModalForm;
+};
+
+export const useSub = ({ request, onFinish }: Partial<DialogFormProps>) => {
+  return useRequest(
+    async (values) => {
+      if (onFinish) {
+        return onFinish(values);
+      }
+      if (request) {
+        return request(values);
+      }
+    },
+    { manual: true }
+  );
+};

package/src/components/DialogForm/modal.ts

@@ -0,0 +1,27 @@
+import type { ModalProps } from "antd";
+import type { HFormInstance, HItemProps, HFormProps } from "../Form/modal";
+import type { PromiseFnResult } from "../modal";
+
+type RootProps = HFormProps & ModalProps;
+
+export interface ModifyPropsModal {
+  configData: HItemProps[];
+  visible?: boolean;
+  initialValues?: Record<string, any>;
+  dialogForm: HDialogFormInstance;
+  afterClose?: VoidFunction;
+}
+export interface ShowParamsModal {
+  configData?: HItemProps[];
+  visible?: boolean;
+  initialValues?: Record<string, any>;
+}
+
+export interface HDialogFormInstance extends HFormInstance {
+  show: (data?: ShowParamsModal) => void;
+  hide: VoidFunction;
+}
+export interface DialogFormProps extends Omit<RootProps, "onFinish"> {
+  dialogForm?: HDialogFormInstance;
+  onFinish?: PromiseFnResult;
+}

package/src/components/Form/FormItem/Helper.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import type { HItemProps } from "@/components/Form/modal";
-import type { FormInstance } from "antd";
-import { Typography, Row } from "antd";
+import type { HItemProps, HFormInstance } from "@/components/Form/modal";
+import { Typography } from "antd";
 import { useFormContext } from "../Context";
 
 interface HelperProps {
@@ -16,7 +15,7 @@ const Index: React.FC<HelperProps> = ({ helper }) => {
   if (typeof helper === "function") {
     return (
       <Typography.Text type={"secondary"}>
-        {helper(form as FormInstance)}
+        {helper(form as HFormInstance)}
       </Typography.Text>
     );
   }

package/src/components/Form/HFormConnect.tsx

@@ -4,6 +4,7 @@ import React, { useEffect } from "react";
 import type { ConnectConfigModal } from "@/components/Form/modal";
 import type { addFormatItemModal } from "@/components/Form/modal";
 import type { ConnectResultProps } from "@/components/Form/modal";
+import type { argsFn } from "@/components/Form/modal";
 
 const formatMaker = (
   itemProps: HFormItemProps,
@@ -24,12 +25,18 @@ const formatMaker = (
 };
 
 export default (
-  Component: React.FunctionComponent | React.ComponentClass,
+  component:
+    | React.FunctionComponent
+    | React.ComponentClass
+    | React.ForwardRefRenderFunction<any, any>,
   config: ConnectConfigModal = {}
 ) => {
   const { format = {} } = config;
-  return (props: HFormItemProps) => {
-    const { name } = props;
+  const Index: React.ForwardRefRenderFunction<any, HFormItemProps> = (
+    props: HFormItemProps,
+    ref
+  ) => {
+    const { name = "" } = props;
 
     const { form, valueType = "float" } = useFormContext();
 
@@ -40,10 +47,21 @@ export default (
     const addFormat = (aFormat: Record<string, addFormatItemModal>) => {
       form?.addFormat(name, formatMaker(props, aFormat[valueType]));
     };
-
-    return React.createElement<ConnectResultProps>(Component, {
-      ...props,
-      addFormat,
-    });
+    const addDispatchListener = (key: string, fn: argsFn) => {
+      form?.addDispatchListener({ key, name }, fn);
+    };
+    const Component = component as React.ForwardRefRenderFunction<
+      any,
+      ConnectResultProps
+    >;
+    return (
+      <Component
+        {...props}
+        addFormat={addFormat}
+        addDispatchListener={addDispatchListener}
+        ref={ref}
+      />
+    );
   };
+  return React.forwardRef(Index);
 };

package/src/components/Form/InitSet.tsx

@@ -1,12 +1,10 @@
 import { useFormContext } from "./Context";
 import { useEffect } from "react";
-interface InitSetProps {
-  initValues?: Record<string, any>;
-}
-export default ({ initValues }: InitSetProps) => {
+
+export default () => {
   const { form } = useFormContext();
   useEffect(() => {
-    form.initValues(initValues);
+    form.initValues();
   }, []);
   return <></>;
 };

package/src/components/Form/config.ts

@@ -14,7 +14,7 @@ import HUpload from "../Upload";
 import HUrlUpload from "../Upload/UrlUpload";
 import HSubmit from "../Submit";
 import FormConfigProvider from "../Form/Context/FormConfigProvider";
-
+import TextArea from "../TextArea";
 export const placeholderConfig = {
   inputType: ["input", "inputNumber", "selectInput", "buttonInput"],
   selectType: ["select", "datePicker", "timePicker"],
@@ -37,4 +37,5 @@ export default {
   urlUpload: HUrlUpload,
   submit: HSubmit,
   formConfigProvider: FormConfigProvider,
+  textArea: TextArea,
 };

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

@@ -20,23 +20,3 @@ export const useSub = ({ request, onFinish, form }: ParamsModal) => {
     { manual: true }
   );
 }; //提交
-
-export const useInit = ({ infoRequest, initialValues = {} }: ParamsModal) => {
-  const {
-    run: infoRun,
-    loading: infoLoading,
-    error: infoErr,
-    data: infoData,
-  } = useRequest(async () => {
-    if (infoRequest) {
-      return infoRequest();
-    }
-    return initialValues;
-  });
-  return {
-    infoRun,
-    infoLoading,
-    infoErr,
-    infoData,
-  };
-}; //初始化

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.less

@@ -2,7 +2,7 @@
 .@{ant-prefix}-hw-form-item-colon:after {
   position: relative;
   top: -0.5px;
-  margin: 0 8px 0 2px;
+  margin: 0 0 0 2px;
   content: ":";
 }
 .@{ant-prefix}-hw-form-item-required:before {

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>
   );