@hw-component/form 1.3.3 → 1.3.5

package/src/components/Input/VerificationCodeInput/index.tsx

@@ -2,95 +2,97 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ButtonInput from "../ButtonInput";
 import { useRequest } from "ahooks";
 import type { HFormInstance } from "../../Form/modal";
-import type {HButtonInputProps} from "../modal";
+import type { HButtonInputProps } from "../modal";
 import HFormConnect from "../../Form/HFormConnect";
-import type {argsFn} from "../../Form/modal";
-import {useDis} from "./hooks";
+import type { argsFn } from "../../Form/modal";
+import { useDis } from "./hooks";
 
-type disabledFn=(data: any) => boolean;
-export interface ButtonProps extends Omit<HButtonInputProps["buttonProps"],"disabled">{
-    disabled?: boolean|disabledFn;
+type disabledFn = (data: any) => boolean;
+export interface ButtonProps
+  extends Omit<HButtonInputProps["buttonProps"], "disabled"> {
+  disabled?: boolean | disabledFn;
 }
 
-export interface HVerificationCodeInputProps extends Omit<HButtonInputProps, "form"|"buttonProps"> {
-    request?: (value: any) => Promise<any>;
-    form?: HFormInstance;
-    addDispatchListener?: (key: string, fn: argsFn) => void;
-    buttonProps?: ButtonProps;
+export interface HVerificationCodeInputProps
+  extends Omit<HButtonInputProps, "form" | "buttonProps"> {
+  request?: (value: any) => Promise<any>;
+  form?: HFormInstance;
+  addDispatchListener?: (key: string, fn: argsFn) => void;
+  buttonProps?: ButtonProps;
 }
-const Index= ({
-                  value,
-                  request,
-                  form,
-                  onChange,
-                  addDispatchListener,
-                  buttonProps={},
-                  ...props
-              }: HVerificationCodeInputProps) => {
-    const {disabled,setBtnDisabled,countdown,setCountdown}=useDis(buttonProps);
-    const timer = useMemo<{ time: any }>(() => {
-        return {
-            time: undefined,
-        };
-    }, []);
-    const timerControl = useCallback(() => {
-        timer.time = setInterval(() => {
-            setCountdown((oldVal = 0) => {
-                const newVal = oldVal - 1;
-                if (newVal <= 0) {
-                    clearInterval(timer.time);
-                }
-                return newVal;
-            });
-        }, 1000);
-    }, []);
-    const { run, loading } = useRequest(
-        async () => {
-            if (!request) {
-                return Promise.resolve({});
-            }
-            const val = form?.getFieldsValue();
-            const result = await request?.(val);
-            if (result) {
-                setCountdown(60);
-            }
-            timerControl();
-            return result;
-        },
-        { manual: true }
-    );
-    useEffect(() => {
-        return () => {
-            clearInterval(timer.time);
-        };
-    }, []);
-    const text = () => {
-        if (!countdown) {
-            return "获取验证码";
-        }
-        let countdownStr = `${countdown}`;
-        if (countdown < 10) {
-            countdownStr = `0${countdownStr}`;
+const Index = ({
+  value,
+  request,
+  form,
+  onChange,
+  addDispatchListener,
+  buttonProps = {},
+  ...props
+}: HVerificationCodeInputProps) => {
+  const { disabled, setBtnDisabled, countdown, setCountdown } =
+    useDis(buttonProps);
+  const timer = useMemo<{ time: any }>(() => {
+    return {
+      time: undefined,
+    };
+  }, []);
+  const timerControl = useCallback(() => {
+    timer.time = setInterval(() => {
+      setCountdown((oldVal = 0) => {
+        const newVal = oldVal - 1;
+        if (newVal <= 0) {
+          clearInterval(timer.time);
         }
-        return `${countdownStr}秒后重新获取`;
+        return newVal;
+      });
+    }, 1000);
+  }, []);
+  const { run, loading } = useRequest(
+    async () => {
+      if (!request) {
+        return Promise.resolve({});
+      }
+      const val = form?.getFieldsValue();
+      const result = await request?.(val);
+      if (result) {
+        setCountdown(60);
+      }
+      timerControl();
+      return result;
+    },
+    { manual: true }
+  );
+  useEffect(() => {
+    return () => {
+      clearInterval(timer.time);
     };
-
-    const defaultButtonProps={
-        onClick: run,
-        loading,
+  }, []);
+  const text = () => {
+    if (!countdown) {
+      return "获取验证码";
     }
-    addDispatchListener?.("disabled",setBtnDisabled);
-    return (
-        <ButtonInput
-            value={value}
-            onChange={onChange}
-            buttonProps={{...defaultButtonProps,...buttonProps,disabled}}
-            {...props}
-        >
-            {text()}
-        </ButtonInput>
-    );
+    let countdownStr = `${countdown}`;
+    if (countdown < 10) {
+      countdownStr = `0${countdownStr}`;
+    }
+    return `${countdownStr}秒后重新获取`;
+  };
+
+  const defaultButtonProps = {
+    onClick: run,
+    loading,
+  };
+  addDispatchListener?.("disabled", setBtnDisabled);
+  return (
+    <ButtonInput
+      value={value}
+      onChange={onChange}
+      buttonProps={{ ...defaultButtonProps, ...buttonProps, disabled }}
+      {...props}
+    >
+      {text()}
+    </ButtonInput>
+  );
 };
 
 export default HFormConnect(Index);
-

package/src/components/Select/index.tsx

@@ -105,12 +105,12 @@ const Index: React.FC<HSelectProps> = ({
       {...props}
     >
       {data?.map((item) => {
-        const { value: optionValue, label ,...oItem} = item;
+        const { value: optionValue, label, ...oItem } = item;
         const result = filterProvider?.(item) || label;
         const filter = { [optionFilterProp]: result };
         return (
           <Option
-              {...oItem}
+            {...oItem}
             value={optionValue}
             key={optionValue}
             label={label}

package/src/components/Upload/UrlUpload/hooks.ts

@@ -1,13 +1,16 @@
-import type {IUrlUploadProps} from "../modal";
-import {MediaTypeEnum} from '../enums';
+import type { IUrlUploadProps } from "../modal";
+import { MediaTypeEnum } from "../enums";
 
-const defaultExFiles={
-   [MediaTypeEnum.video]:["MP4"],
-   [MediaTypeEnum.audio]:["MP3"],
-}
-export const useDefaultExFiles=({mediaType=MediaTypeEnum.img,exFiles}: IUrlUploadProps)=>{
-   if (exFiles||exFiles===null){
-       return exFiles;
-   };
-   return defaultExFiles[mediaType]
-}
+const defaultExFiles = {
+  [MediaTypeEnum.video]: ["MP4"],
+  [MediaTypeEnum.audio]: ["MP3"],
+};
+export const useDefaultExFiles = ({
+  mediaType = MediaTypeEnum.img,
+  exFiles,
+}: IUrlUploadProps) => {
+  if (exFiles || exFiles === null) {
+    return exFiles;
+  }
+  return defaultExFiles[mediaType];
+};

package/src/components/Upload/UrlUpload/index.tsx

@@ -1,12 +1,12 @@
-import { message, Space ,Typography} from "antd";
+import { message, Space, Typography } from "antd";
 import Input from "antd/es/input/Input";
 import Upload from "../index";
 import type { IUploadRefModal, IUrlUploadProps } from "../modal";
 import TypeEle from "../MediaTypeEle/TypeEle";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { RcFile, UploadFile } from "antd/es/upload/interface";
-import {useDefaultExFiles} from "./hooks";
-const {Text}=Typography;
+import { useDefaultExFiles } from "./hooks";
+const { Text } = Typography;
 const mkSubFileList = (fileList: UploadFile[], maxCount = 1) => {
   const len = fileList.length;
   if (len > maxCount) {
@@ -21,12 +21,15 @@ const Index = ({
   onChange,
   mediaType,
   inputHelper,
-  style={},
+  style = {},
   exFiles,
   ...props
 }: IUrlUploadProps) => {
-  const { maxCount} = props;
-  const defaultExFiles: string[]|null=useDefaultExFiles({mediaType,exFiles});
+  const { maxCount } = props;
+  const defaultExFiles: string[] | null = useDefaultExFiles({
+    mediaType,
+    exFiles,
+  });
   const [url, setUrl] = useState("");
   const [load, setLoad] = useState<boolean>(false);
   const ref = useRef<IUploadRefModal | null>(null);
@@ -81,10 +84,13 @@ const Index = ({
     setUrl("");
     setLoad(false);
   };
-  const upProps={exFiles:defaultExFiles,...props};
-  console.log(value,"urlUpload")
+  const upProps = { exFiles: defaultExFiles, ...props };
   return (
-    <Space direction={"vertical"} style={{width:"100%",...style}} size={"middle"}>
+    <Space
+      direction={"vertical"}
+      style={{ width: "100%", ...style }}
+      size={"middle"}
+    >
       <Input
         placeholder={placeholder}
         onBlur={onBlur}
@@ -94,8 +100,8 @@ const Index = ({
           setUrl(e.target.value);
         }}
       />
-      {inputHelper&&<Text type={"secondary"}>{inputHelper}</Text>}
-      <Upload {...upProps}  ref={ref} value={value} onChange={onChange} />
+      {inputHelper && <Text type={"secondary"}>{inputHelper}</Text>}
+      <Upload {...upProps} ref={ref} value={value} onChange={onChange} />
       {load && (
         <div style={{ display: "none" }}>
           <TypeEle

package/src/components/Upload/hooks/change.ts

@@ -14,7 +14,7 @@ const checkFile = (item: UploadFile, oldFile: UploadFile[] = []) => {
 const matchFile = (
   newFile: UploadFile[],
   oldFile: UploadFile[] = [],
-  exFiles?: string[]|null,
+  exFiles?: string[] | null,
   maxSize?: number
 ) => {
   const newResultFileList: UploadFile[] = [];
@@ -50,7 +50,7 @@ export const useChange = ({
   request,
   exFiles,
   maxSize,
-  thumbUrl
+  thumbUrl,
 }: IUpLoadProps) => {
   const customRequest = useCustomRequest({ request, onChange, value });
 
@@ -68,11 +68,11 @@ export const useChange = ({
       if (errList.length) {
         message.error(errList[0].message);
       }
-      const changeFile=newFileList?.map((item)=>{
-         return {
-           thumbUrl,
-           ...item
-         }
+      const changeFile = newFileList?.map((item) => {
+        return {
+          thumbUrl,
+          ...item,
+        };
       });
       onChange?.(changeFile);
       customRequest(addFile);

package/src/components/Upload/hooks/propsMaker.ts

@@ -15,9 +15,9 @@ export const useProps = ({ request, exFiles, maxSize }: IUpLoadProps) => {
       return;
     }
   });
-  const defaultExFiles=exFiles===undefined?resultProps.exFiles:exFiles;
+  const defaultExFiles = exFiles === undefined ? resultProps.exFiles : exFiles;
   return {
     ...resultProps,
-    exFiles:defaultExFiles
+    exFiles: defaultExFiles,
   };
 };

package/src/components/Upload/index.tsx

@@ -1,4 +1,9 @@
-import React, { useImperativeHandle, useMemo, useState } from "react";
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "react";
 import type { IUpLoadProps, IUploadRefModal } from "./modal";
 import { useProps } from "./hooks/propsMaker";
 import type { IPreviewProps } from "./Preview";
@@ -32,7 +37,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
     value,
     maxCount,
     onChange,
-    thumbUrl
+    thumbUrl,
   });
   useImperativeHandle(ref, () => {
     return {
@@ -61,21 +66,23 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
   addFormat?.({
     float: {
       inputValue: (item, initValue) => {
-        console.log("inputValue")
         const { name = "" } = item;
         const initFileList = initValue[name] || [];
         const relInitFileList =
           typeof initFileList === "string" ? [initFileList] : initFileList;
-        const fileList = relInitFileList.map((url, index) => {
-          return {
-            name: url,
-            response: {
-              url,
-            },
-            status: "done",
-            uid: `init-${index}`,
-            thumbUrl: thumbUrl||url,
-          };
+        const fileList = relInitFileList.map((itemData, index) => {
+          if (typeof itemData === "string") {
+            return {
+              name: itemData,
+              response: {
+                itemData,
+              },
+              status: "done",
+              uid: `init-${index}`,
+              thumbUrl: thumbUrl || itemData,
+            };
+          }
+          return { ...itemData };
         });
         return {
           [name]: fileList,
@@ -93,8 +100,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
       },
     },
   });
-  const relVal=Array.isArray(value)?value:[];
-
+  const relVal = Array.isArray(value) ? value : [];
   return (
     <div style={contentStyle}>
       <Upload

package/src/components/Upload/modal.ts

@@ -7,7 +7,7 @@ import type { addFormatItemModal } from "@/components/Form/modal";
 import type React from "react";
 
 export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
-  exFiles?: string[]|null;
+  exFiles?: string[] | null;
   request?: (
     file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
   ) => Promise<{ url: string }>;
@@ -32,5 +32,5 @@ export interface IUploadRefModal {
 export interface IUrlUploadProps extends IUpLoadProps {
   placeholder?: string;
   mediaType?: MediaTypeEnum;
-  inputHelper?: React.ReactNode
+  inputHelper?: React.ReactNode;
 }

package/src/components/Upload/util.ts

@@ -6,9 +6,12 @@ export const getFileExt = (file: UploadFile): string => {
   return name.substring(index + 1).toUpperCase();
 };
 
-export const checkFileType = (file: UploadFile, exFiles: string[]|null = []) => {
-  if (!exFiles){
-     return  true;
+export const checkFileType = (
+  file: UploadFile,
+  exFiles: string[] | null = []
+) => {
+  if (!exFiles) {
+    return true;
   }
   const exName: string = getFileExt(file);
   return exFiles.indexOf(exName) !== -1;

package/src/pages/DrawerForm/index.tsx

@@ -1,107 +1,34 @@
 import { Button } from "antd";
 import { HDrawerForm, useHDialogForm } from "../../components";
-import {MediaTypeEnum} from "../../components/Upload/enums";
+import { MediaTypeEnum } from "../../components/Upload/enums";
 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",
+    type: "radioGroup",
     rules: [{ required: true }],
     helper: "帮助我",
     options: [
-      { label: "选择1", value: "check1" },
-      { label: "选择2", value: "check2" },
+      { label: "选择1", value: 0 },
+      { label: "选择2", value: 1 },
     ],
   },
-  {
-    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 }],
+    hide: (form) => {
+      const check = form.getFieldValue("checkboxGroup");
+      return check !== 0;
+    },
     itemProps: {
       style: { width: 368 },
-      placeholder: '粘贴图片地址鼠标移出输入框自动保存',
+      placeholder: "粘贴图片地址鼠标移出输入框自动保存",
       maxSize: 1024 * 1024 * 10,
-      thumbUrl:"http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
-      mediaType:MediaTypeEnum.video
+      thumbUrl:
+        "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
+      mediaType: MediaTypeEnum.video,
     },
   },
   {
@@ -125,11 +52,17 @@ export default () => {
           num++;
           modalForm.show({
             initialValues: {
-              check1: 1,
-              op: 1,
-              opInput: num,
-              upload:"fff",
-              urlUpload:"fff"
+              checkboxGroup: 1,
+              urlUpload: [
+                {
+                  name: "https://yzimage.52youzai.net/eeff9ae7fded45b7bdca95c6fc72ba3c.mp4",
+                  response: {
+                    url: "https://yzimage.52youzai.net/eeff9ae7fded45b7bdca95c6fc72ba3c.mp4",
+                  },
+                  status: "done",
+                  uid: `init-${num}`,
+                },
+              ],
             },
           });
         }}
@@ -148,11 +81,11 @@ export default () => {
         labelWidth={88}
         labelAlign={"left"}
         dialogForm={modalForm}
-        afterClose={()=>{
-          console.log("afterClose")
+        afterClose={() => {
+          console.log("afterClose");
         }}
-        contentRender={(node)=>{
-          return <div>{node}</div>
+        contentRender={(node) => {
+          return <div>{node}</div>;
         }}
         title="测试"
       />