@hw-component/form 1.2.3 → 1.2.5

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

@@ -2,21 +2,21 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ButtonInput from "../ButtonInput";
 import { useRequest } from "ahooks";
 import type { HFormInstance } from "../../Form/modal";
-import {HButtonInputProps} from "../modal";
+import type {HButtonInputProps} from "../modal";
 import HFormConnect from "../../Form/HFormConnect";
-import {argsFn} from "../../Form/modal";
+import type {argsFn} from "../../Form/modal";
 import {useDis} from "./hooks";
 
-type disabledFn=(data:any)=>boolean;
+type disabledFn=(data: any) => boolean;
 export interface ButtonProps extends Omit<HButtonInputProps["buttonProps"],"disabled">{
-    disabled?:boolean|disabledFn;
+    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;
+    buttonProps?: ButtonProps;
 }
 const Index= ({
                   value,

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

@@ -0,0 +1,16 @@
+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)=>{
+   console.log(exFiles,"exFiles")
+   if (exFiles){
+       return exFiles;
+   };
+   console.log(defaultExFiles,mediaType===MediaTypeEnum.video,"mediaType")
+
+   return defaultExFiles[mediaType]
+}

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

@@ -1,11 +1,12 @@
-import { message, Space } 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 type { RcFile, UploadFile } from "antd/es/upload/interface";
-
+import {useDefaultExFiles} from "./hooks";
+const {Text}=Typography;
 const mkSubFileList = (fileList: UploadFile[], maxCount = 1) => {
   const len = fileList.length;
   if (len > maxCount) {
@@ -19,12 +20,17 @@ const Index = ({
   value = [],
   onChange,
   mediaType,
+  inputHelper,
+  style={},
+  exFiles,
   ...props
 }: IUrlUploadProps) => {
-  const { maxCount } = props;
+  const { maxCount} = props;
+  const defaultExFiles: string[]=useDefaultExFiles({mediaType,exFiles});
   const [url, setUrl] = useState("");
   const [load, setLoad] = useState<boolean>(false);
   const ref = useRef<IUploadRefModal | null>(null);
+
   const onReady = () => {
     const newFileList = [...value];
     newFileList.push({
@@ -76,8 +82,9 @@ const Index = ({
     setUrl("");
     setLoad(false);
   };
+  const upProps={exFiles:defaultExFiles,...props};
   return (
-    <Space direction={"vertical"} style={{ width: "100%" }} size={"middle"}>
+    <Space direction={"vertical"} style={{width:"100%",...style}} size={"middle"}>
       <Input
         placeholder={placeholder}
         onBlur={onBlur}
@@ -87,7 +94,8 @@ const Index = ({
           setUrl(e.target.value);
         }}
       />
-      <Upload {...props} 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

@@ -50,6 +50,7 @@ export const useChange = ({
   request,
   exFiles,
   maxSize,
+  thumbUrl
 }: IUpLoadProps) => {
   const customRequest = useCustomRequest({ request, onChange, value });
 
@@ -67,7 +68,13 @@ export const useChange = ({
       if (errList.length) {
         message.error(errList[0].message);
       }
-      onChange?.(newFileList);
+      const changeFile=newFileList?.map((item)=>{
+         return {
+           thumbUrl,
+           ...item
+         }
+      });
+      onChange?.(changeFile);
       customRequest(addFile);
     },
     { manual: true, debounceInterval: 100 }

package/src/components/Upload/index.tsx

@@ -20,6 +20,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
     request,
     maxSize,
     addFormat,
+    thumbUrl,
     ...props
   },
   ref
@@ -31,6 +32,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
     value,
     maxCount,
     onChange,
+      thumbUrl
   });
   useImperativeHandle(ref, () => {
     return {
@@ -90,7 +92,6 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
       },
     },
   });
-  console.log(onPreview, "onPreview");
   return (
     <div style={contentStyle}>
       <Upload

package/src/components/Upload/modal.ts

@@ -4,6 +4,7 @@ import type { BeforeUploadFileType, RcFile } from "rc-upload/lib/interface";
 import type { UploadChangeParam } from "antd/lib/upload/interface";
 import type { MediaTypeEnum } from "@/components/Upload/enums";
 import type { addFormatItemModal } from "@/components/Form/modal";
+import type React from "react";
 
 export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
   exFiles?: string[];
@@ -16,6 +17,7 @@ export interface IUpLoadProps extends Omit<UploadProps, "onChange"> {
   maxRowNum?: number;
   maxSize?: number;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
+  thumbUrl?: string;
 }
 export interface IMediaTypeEleProps {
   file?: UploadFile;
@@ -30,4 +32,5 @@ export interface IUploadRefModal {
 export interface IUrlUploadProps extends IUpLoadProps {
   placeholder?: string;
   mediaType?: MediaTypeEnum;
+  inputHelper?: React.ReactNode
 }

package/src/components/Upload/util.ts

@@ -13,6 +13,7 @@ export const checkFileType = (file: UploadFile, exFiles: string[] = []) => {
 
 export const checkFileSize = (file: UploadFile, maxSize = 0) => {
   const { size = 0 } = file;
+
   return size <= maxSize;
 };
 

package/src/pages/Form/index.tsx

@@ -2,6 +2,7 @@ import { HForm, HFormConfigProvider, useHForm } from "../../components";
 import { Button, Form, Input } from "antd";
 import React from "react";
 import {useRequest} from "ahooks";
+import {MediaTypeEnum} from "../../components/Upload/enums";
 
 const formData = () => {
   return [
@@ -109,6 +110,21 @@ const formData = () => {
         manual:false
       },
     },
+    {
+      type: "urlUpload",
+      name:"urlUpload",
+      label:"测试",
+      helper:"123123",
+      itemProps: {
+        inputHelper:"fff",
+        style:{
+          width:368
+        },
+        mediaType:MediaTypeEnum.video,
+        maxSize:1024*1024*10,
+        thumbUrl:"https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000"
+      }
+    },
   ];
 };
 function Ttta({ form }) {