@hw-component/form 0.0.8-beta-v6 → 0.0.8-beta-v8

package/src/components/DialogForm/ModalForm.tsx

@@ -20,6 +20,7 @@ export default ({
   onOk,
   onValuesChange,
   autoClear = true,
+  contentRender,
   ...props
 }: DialogFormProps) => {
   const currentForm = useCurrentForm(dialogForm);
@@ -47,6 +48,25 @@ export default ({
     setModalVisible(false);
   };
   const { loading, run } = useSub({ request, onFinish });
+  const node = (
+    <HForm
+      configData={modalFormData}
+      initialValues={initValue}
+      onValuesChange={onValuesChange}
+      onFinish={async (values, outParams) => {
+        const result = await run(values, outParams);
+        const close = onOk?.(result, outParams);
+        if (close === false) {
+          return;
+        }
+        cancel();
+      }}
+      {...props}
+      params={formParams}
+      form={currentForm}
+      infoRequest={infoRequest}
+    />
+  );
   return (
     <Modal
       title={modalTitle}
@@ -64,23 +84,7 @@ export default ({
       destroyOnClose={true}
     >
       <FormConfigProvider {...providerConfig}>
-        <HForm
-          configData={modalFormData}
-          initialValues={initValue}
-          onValuesChange={onValuesChange}
-          onFinish={async (values, outParams) => {
-            const result = await run(values, outParams);
-            const close = onOk?.(result, outParams);
-            if (close === false) {
-              return;
-            }
-            cancel();
-          }}
-          {...props}
-          params={formParams}
-          form={currentForm}
-          infoRequest={infoRequest}
-        />
+        {contentRender ? contentRender?.(node, currentForm) : node}
       </FormConfigProvider>
     </Modal>
   );

package/src/components/DialogForm/modal.ts

@@ -1,6 +1,7 @@
 import type { ModalProps } from "antd";
 import type { HFormInstance, HItemProps, HFormProps } from "../Form/modal";
 import type { PromiseFnResult } from "../modal";
+import type React from "react";
 
 type RootProps = HFormProps & ModalProps;
 
@@ -36,4 +37,8 @@ export interface DialogFormProps<P = any, T = any>
   onOk?: (data: T, params: P) => boolean | void;
   infoRequest?: (params: P) => Promise<T>;
   autoClear?: boolean;
+  contentRender?: (
+    dom: React.ReactNode,
+    form: HDialogFormInstance
+  ) => React.ReactNode;
 }

package/src/components/Form/config.ts

@@ -16,8 +16,9 @@ import HSubmit from "../Submit";
 import TextArea from "../TextArea";
 import ColorInput from "../Input/ColorInput";
 import Cascader from "../Cascader";
-import HVerificationCodeInput from "../Input/VerificationCodeInput";
-
+import VerificationCodeInput from "../Input/VerificationCodeInput";
+import TrimInput from "../Input/TrimInput";
+import TrimTextArea from "../TextArea/TrimTextArea";
 export const placeholderConfig = {
   inputType: [
     "input",
@@ -25,6 +26,8 @@ export const placeholderConfig = {
     "selectInput",
     "buttonInput",
     "verificationCodeInput",
+    "trimInput",
+    "",
   ],
   selectType: ["select", "datePicker", "timePicker", "colorInput"],
 };
@@ -47,7 +50,9 @@ const componentConfig = {
   textArea: TextArea,
   colorInput: ColorInput,
   cascader: Cascader,
-  verificationCodeInput: HVerificationCodeInput,
+  verificationCodeInput: VerificationCodeInput,
+  trimInput: TrimInput,
+  trimTextArea: TrimTextArea,
 };
 
 export default componentConfig;

package/src/components/Input/TrimInput.tsx

@@ -0,0 +1,26 @@
+import Input from "./index";
+import type { HInputProps } from "./modal";
+import HFormConnect from "../Form/HFormConnect";
+
+const Index = ({ addFormat, ...props }: HInputProps) => {
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name: valueName = "" } = item;
+        return {
+          [valueName]: initValue[valueName],
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name = "" } = item;
+        const { [name]: itemVal } = outputValue;
+        return {
+          [name]: itemVal?.trim(),
+        };
+      },
+    },
+  });
+  return <Input {...props} />;
+};
+
+export default HFormConnect(Index);

package/src/components/Input/VerificationCodeInput.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ButtonInput from "./ButtonInput";
 import { useRequest } from "ahooks";
-import type { HFormInstance } from "@/components/Form/modal";
+import type { HFormInstance } from "../Form/modal";
 import type { InputProps } from "antd";
-interface IVerificationCodeInputProps extends Omit<InputProps, "form"> {
-  request?: (value) => Promise<any>;
+export interface HVerificationCodeInputProps extends Omit<InputProps, "form"> {
+  request?: (value: any) => Promise<any>;
   form?: HFormInstance;
 }
 export default ({
@@ -13,7 +13,7 @@ export default ({
   form,
   onChange,
   ...props
-}: IVerificationCodeInputProps) => {
+}: HVerificationCodeInputProps) => {
   const [countdown, setCountdown] = useState<number>(0);
   const timer = useMemo<{ time: any }>(() => {
     return {

package/src/components/Input/modal.ts

@@ -10,6 +10,7 @@ export interface HInputProps<V = any>
   value?: V;
   defaultColor?: string;
   copy?: boolean;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
 }
 
 interface ValueNameModal {

package/src/components/Switch/index.tsx

@@ -3,12 +3,15 @@ import { Space, Switch } from "antd";
 import React, { useMemo } from "react";
 import { useMatchConfigProps } from "../hooks";
 import type { ValueSwitchMapModal } from "../modal";
+import type { addFormatItemModal } from "../Form/modal";
+import HFormConnect from "../Form/HFormConnect";
 
 export interface HSwitchProps extends Omit<SwitchProps, "onChange"> {
   valueMap?: ValueSwitchMapModal;
   value?: any;
   onChange?: (val: any) => void;
   beforeText?: React.ReactNode;
+  addFormat?: (format: Record<string, addFormatItemModal>) => void;
 }
 const Index: React.FC<HSwitchProps> = ({
   value,
@@ -18,6 +21,7 @@ const Index: React.FC<HSwitchProps> = ({
   unCheckedChildren = "关闭",
   checkedChildren = "开启",
   beforeText,
+  addFormat,
   ...props
 }) => {
   const { valueSwitchMap = {} } = useMatchConfigProps({
@@ -34,6 +38,28 @@ const Index: React.FC<HSwitchProps> = ({
     }
     onChange?.(subVal);
   };
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { close } = valueSwitchMap;
+        const { name: valueName = "" } = item;
+        let val = initValue[valueName];
+        if (typeof val === "undefined" || val === null) {
+          val = close;
+        }
+        console.log(val, "");
+        return {
+          [valueName]: val,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name = "" } = item;
+        return {
+          [name]: outputValue[name],
+        };
+      },
+    },
+  });
   return (
     <Space>
       {beforeText}
@@ -49,4 +75,4 @@ const Index: React.FC<HSwitchProps> = ({
   );
 };
 
-export default Index;
+export default HFormConnect(Index);

package/src/components/TextArea/TrimTextArea.tsx

@@ -0,0 +1,30 @@
+import TextArea from "./index";
+import type { TextAreaProps } from "antd/es/input";
+import type { addFormatItemModal } from "../Form/modal";
+import HFormConnect from "../Form/HFormConnect";
+
+interface TrimTextAreaProps extends TextAreaProps {
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}
+const Index = ({ addFormat, ...props }: TrimTextAreaProps) => {
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name: valueName = "" } = item;
+        return {
+          [valueName]: initValue[valueName],
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name = "" } = item;
+        const { [name]: itemVal } = outputValue;
+        return {
+          [name]: itemVal?.trim(),
+        };
+      },
+    },
+  });
+  return <TextArea {...props} />;
+};
+
+export default HFormConnect(Index);

package/src/components/index.tsx

@@ -29,4 +29,9 @@ export const HColorInput = FormConfig.colorInput;
 export const HModalForm = ModalForm;
 export const HDrawerForm = DrawerForm;
 export const HCascader = FormConfig.cascader;
+// @ts-ignore
 export const HVerificationCodeInput = FormConfig.verificationCodeInput;
+
+export const HTrimInput = FormConfig.trimInput;
+
+export const HTrimTextArea = FormConfig.trimTextArea;

package/src/pages/Form/index.tsx

@@ -82,6 +82,12 @@ const formData = (options) => {
       name: "switch",
       type: "switch",
       rules: [{ required: true }],
+      itemProps: {
+        valueMap: {
+          open: 1,
+          close: 0,
+        },
+      },
     },
     {
       label: "时间",
@@ -170,6 +176,16 @@ const formData = (options) => {
         },
       },
     },
+    {
+      label: "去空input",
+      type: "trimInput",
+      name: "trimInput",
+    },
+    {
+      label: "去空textArea",
+      type: "trimTextArea",
+      name: "trimTextArea",
+    },
     {
       type: "submit",
     },
@@ -201,6 +217,8 @@ export default () => {
           form={form}
           initialValues={{
             name: "fff",
+            trimInput: "trimInput",
+            trimTextArea: "trimTextArea",
           }}
           itemSpan={{ span: 12 }}
           onFinish={(value) => {
@@ -219,6 +237,8 @@ export default () => {
                   colorInput: "rgba(24, 144, 255,1)",
                   upload:
                     "https://img2.baidu.com/it/u=2048195462,703560066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
+                  trimInput: "trimInput",
+                  trimTextArea: "trimTextArea",
                 });
               }, 3000);
             });

package/src/pages/ModalForm/index.tsx

@@ -176,6 +176,14 @@ export default () => {
           configData={data}
           labelWidth={88}
           autoClear={false}
+          contentRender={(node, form) => {
+            return (
+              <div>
+                <div>测试一些</div>
+                {node}
+              </div>
+            );
+          }}
           request={(val, params) => {
             console.log(val, params);
           }}