@hw-component/form 0.0.8-beta-v7 → 0.0.8-beta-v9

package/src/components/DialogForm/modal.ts

@@ -1,7 +1,7 @@
 import type { ModalProps } from "antd";
 import type { HFormInstance, HItemProps, HFormProps } from "../Form/modal";
 import type { PromiseFnResult } from "../modal";
-import React from "react";
+import type React from "react";
 
 type RootProps = HFormProps & ModalProps;
 
@@ -37,5 +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;
+  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 {
@@ -25,6 +26,7 @@ export interface HSelectInputProps
   valueName?: ValueNameModal;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
   addDispatchListener?: AddDispatchListenerFn;
+  subParams?: (formatValue: Record<string, any>) => any;
 }
 export interface HButtonProps extends Omit<ButtonProps, "onClick"> {
   onClick: (

package/src/components/Submit/components.tsx

@@ -0,0 +1,57 @@
+import { Button } from "antd";
+import { useFormContext } from "../Form/Context";
+import React from "react";
+import type {
+  ISubmitProps,
+  SubmitBarExtraType,
+} from "@/components/Submit/index";
+interface ControlFooterProps extends ISubmitProps {
+  action: SubmitBarExtraType;
+}
+function ResetBtn({ form, ...props }) {
+  return (
+    <Button
+      {...props}
+      onClick={() => {
+        form.resetFields();
+      }}
+    >
+      重置
+    </Button>
+  );
+}
+
+function SubBtn({
+  type = "primary",
+  form,
+  text = "提交",
+  loading,
+  ...props
+}: ISubmitProps) {
+  const { loading: formSubLoading = loading } = useFormContext();
+
+  return (
+    <Button
+      {...props}
+      type={type as any}
+      onClick={form.submit}
+      loading={formSubLoading}
+    >
+      {text}
+    </Button>
+  );
+}
+
+export const ControlFooter = ({ action, ...props }: ControlFooterProps) => {
+  const { form } = props;
+  if (action === "reset") {
+    return <ResetBtn {...props} />;
+  }
+  if (action === "submit") {
+    return <SubBtn {...props} />;
+  }
+  if (typeof action === "string") {
+    return <>{action}</>;
+  }
+  return React.cloneElement(action as any, { form });
+};

package/src/components/Submit/hooks.ts

@@ -0,0 +1,31 @@
+import type {
+  ISubmitProps,
+  SubmitBarExtraType,
+} from "@/components/Submit/index";
+import { useMemo } from "react";
+
+const getBarComKeyList = (extraList: SubmitBarExtraType[]) => {
+  return extraList.map((item, index) => {
+    return {
+      action: item,
+      key: `${index}`,
+    };
+  });
+};
+
+export const useBarSortList = (
+  props: Pick<ISubmitProps, "reset" | "extraList">
+) => {
+  const { extraList, reset = false } = props;
+  const list = useMemo(() => {
+    if (!extraList) {
+      const defaultList: SubmitBarExtraType[] = reset
+        ? ["reset", "submit"]
+        : ["submit"];
+      return getBarComKeyList(defaultList);
+    }
+    return getBarComKeyList(extraList);
+  }, [extraList, reset]);
+
+  return list;
+};

package/src/components/Submit/index.tsx

@@ -1,45 +1,32 @@
-import { Button, Row, Space } from "antd";
+import { Row, Space } from "antd";
 import React from "react";
-import { useFormContext } from "../Form/Context";
 import type { ButtonProps, FormInstance } from "antd/es";
+import { useBarSortList } from "./hooks";
+import { ControlFooter } from "./components";
+
+export type SubmitBarExtraType = "submit" | "reset" | React.ReactDOM;
 
 export interface ISubmitProps extends Omit<ButtonProps, "form"> {
   text?: string;
   form: FormInstance;
   reset?: boolean;
   position?: "start" | "end";
+  extraList?: SubmitBarExtraType[];
 }
 export default ({
-  text = "提交",
-  type = "primary",
-  form,
-  loading,
   position = "start",
   reset,
+  extraList,
   ...props
 }: ISubmitProps) => {
-  const { loading: formSubLoading = loading } = useFormContext();
+  const barList = useBarSortList({ reset, extraList });
+
   return (
     <Row justify={position} style={{ width: "100%" }}>
       <Space>
-        {reset && (
-          <Button
-            {...props}
-            onClick={() => {
-              form.resetFields();
-            }}
-          >
-            重置
-          </Button>
-        )}
-        <Button
-          {...props}
-          type={type}
-          onClick={form.submit}
-          loading={formSubLoading}
-        >
-          {text}
-        </Button>
+        {barList?.map(({ action, key }) => {
+          return <ControlFooter {...props} key={key} action={action} />;
+        })}
       </Space>
     </Row>
   );

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

@@ -1,5 +1,6 @@
 import { HForm, HFormConfigProvider, useHForm } from "../../components";
 import { useState } from "react";
+import { Button } from "antd";
 
 const formData = (options) => {
   const op = [
@@ -82,6 +83,12 @@ const formData = (options) => {
       name: "switch",
       type: "switch",
       rules: [{ required: true }],
+      itemProps: {
+        valueMap: {
+          open: 1,
+          close: 0,
+        },
+      },
     },
     {
       label: "时间",
@@ -170,11 +177,70 @@ const formData = (options) => {
         },
       },
     },
+    {
+      label: "去空input",
+      type: "trimInput",
+      name: "trimInput",
+    },
+    {
+      label: "去空textArea",
+      type: "trimTextArea",
+      name: "trimTextArea",
+    },
+    {
+      type: "submit",
+    },
+    {
+      type: "submit",
+      itemProps: {
+        extraList: [
+          <Button
+            key="wh"
+            onClick={() => {
+              console.log("起飞");
+            }}
+          >
+            芜湖
+          </Button>,
+          "666",
+          "reset",
+        ],
+      },
+    },
     {
       type: "submit",
+      itemProps: {
+        extraList: [
+          <Button
+            key="wh"
+            onClick={() => {
+              console.log("起飞");
+            }}
+          >
+            芜湖
+          </Button>,
+          <Ttta key="aa" />,
+          "666",
+          "submit",
+          "reset",
+        ],
+      },
     },
   ];
 };
+function Ttta({ form }) {
+  return (
+    <div
+      onClick={() => {
+        console.log("form", form);
+        form.setFieldsValue({ switch: 1 });
+      }}
+    >
+      ttta
+    </div>
+  );
+}
+
 const Test = (props) => {
   return <div>ffff</div>;
 };
@@ -201,6 +267,8 @@ export default () => {
           form={form}
           initialValues={{
             name: "fff",
+            trimInput: "trimInput",
+            trimTextArea: "trimTextArea",
           }}
           itemSpan={{ span: 12 }}
           onFinish={(value) => {
@@ -219,6 +287,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,11 +176,13 @@ export default () => {
           configData={data}
           labelWidth={88}
           autoClear={false}
-          contentRender={(node,form)=>{
-            return <div>
-              <div>测试一些</div>
-              {node}
-            </div>
+          contentRender={(node, form) => {
+            return (
+              <div>
+                <div>测试一些</div>
+                {node}
+              </div>
+            );
           }}
           request={(val, params) => {
             console.log(val, params);