@hw-component/form 1.2.4 → 1.2.6

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

@@ -1,10 +1,11 @@
 import UpFormItem from "./UpFormItem";
 import RegularFormItem from "./RegularFormItem";
-import React, { useMemo } from "react";
+import type React from "react";
+import { useMemo } from "react";
 import type { HFormInstance, HItemProps } from "../modal";
 import type { LabelAlignModal } from "../modal";
 import { useClassName } from "../../hooks";
-import {HelperModal} from "../modal";
+import type {HelperModal} from "../modal";
 
 export const useFormItemDomControl = ({
   shouldUpdate,
@@ -54,6 +55,6 @@ export const usePositionClassName = (position: LabelAlignModal) => {
   return useClassName(className);
 };
 
-export const useFormItemLabel=(form:HFormInstance,label?:React.ReactNode|HelperModal,)=>{
+export const useFormItemLabel=(form: HFormInstance,label?: React.ReactNode|HelperModal,)=>{
    return  typeof label==="function"?label(form):label;
 }

package/src/components/Form/config.ts

@@ -27,6 +27,7 @@ export const placeholderConfig = {
     "buttonInput",
     "verificationCodeInput",
     "trimInput",
+    'urlUpload'
   ],
   selectType: ["select", "datePicker", "timePicker", "colorInput"],
 };

package/src/components/Form/index.less

@@ -17,12 +17,12 @@
   .@{ant-prefix}-hw-form-item-colon {
     text-align: left;
   }
-  .@{ant-prefix}-hw-form-item-required{
+  .@{ant-prefix}-hw-form-item-required {
     position: absolute;
     left: -10px;
-    top: 0px;
+    top: 0;
   }
-  .@{ant-prefix}-hw-form-label-item{
+  .@{ant-prefix}-hw-form-label-item {
     position: relative;
   }
 }
@@ -52,12 +52,12 @@
   .@{ant-prefix}-hw-form-item-colon {
     text-align: left;
   }
-  .@{ant-prefix}-hw-form-item-required{
+  .@{ant-prefix}-hw-form-item-required {
     position: absolute;
     left: -10px;
-    top: 0px;
+    top: 0;
   }
-  .@{ant-prefix}-hw-form-label-item{
+  .@{ant-prefix}-hw-form-label-item {
     position: relative;
   }
   .@{ant-prefix}-form-item-label > label {
@@ -65,7 +65,7 @@
   }
 }
 
-.@{ant-prefix}-hw-form-item-no-required{
+.@{ant-prefix}-hw-form-item-no-required {
   display: none;
 }
 .@{ant-prefix}-hw-form-item-required:before {
@@ -78,8 +78,8 @@
   content: "*";
   margin-right: 4px;
 }
-.@{ant-prefix}-hw-form-form-item{
- .@{ant-prefix}-form-item-label{
+.@{ant-prefix}-hw-form-form-item {
+ .@{ant-prefix}-form-item-label {
     overflow:visible
  }
 }

package/src/components/Form/modal.ts

@@ -34,6 +34,7 @@ import type { ForwardedRef } from "react";
 import type { DataFnProvider } from "../modal";
 import type { ColProps } from "antd/lib/grid/col";
 import type { Gutter } from "antd/lib/grid/row";
+import type {IUrlUploadProps} from "../Upload/modal";
 
 type RenderFun = (
   props: HItemProps,
@@ -54,7 +55,8 @@ export type ItemPropsType =
   | HTimePickerProps
   | TextAreaProps
   | IUpLoadProps
-  | CascaderProps<any>;
+  | CascaderProps<any>
+  | IUrlUploadProps
 
 export interface HoverModal {
   text?: string;
@@ -93,7 +95,7 @@ export interface HItemProps extends Omit<FormItemProps, "name" | "labelAlign"|"l
   itemSpan?: ColProps;
   hideLabel?: boolean;
   labelAlign?: LabelAlignModal;
-  label?:React.ReactNode|HelperModal;
+  label?: React.ReactNode|HelperModal;
 }
 export interface HFormProps<T = any, R = any>
   extends Omit<FormProps, "form" | "onFinish" | "labelAlign"> {

package/src/components/Input/VerificationCodeInput/hooks.ts

@@ -1,7 +1,7 @@
-import {ButtonProps} from "./index";
+import type {ButtonProps} from "./index";
 import {useEffect, useState} from "react";
 
-export const useDis=(buttonProps:ButtonProps)=>{
+export const useDis=(buttonProps: ButtonProps)=>{
     const {disabled}=buttonProps;
     const [btnDis,setBtnDis]=useState<boolean|undefined>(!!disabled);
     const [countdown, setCountdown] = useState<number>(0);

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,13 @@
+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]
+}

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,9 +20,13 @@ const Index = ({
   value = [],
   onChange,
   mediaType,
+  inputHelper,
+  style={},
+  exFiles,
   ...props
 }: IUrlUploadProps) => {
-  const { maxCount } = props;
+  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);
@@ -76,8 +81,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 +93,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

@@ -14,7 +14,7 @@ const checkFile = (item: UploadFile, oldFile: UploadFile[] = []) => {
 const matchFile = (
   newFile: UploadFile[],
   oldFile: UploadFile[] = [],
-  exFiles?: string[],
+  exFiles?: string[]|null,
   maxSize?: number
 ) => {
   const newResultFileList: UploadFile[] = [];
@@ -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/hooks/propsMaker.ts

@@ -5,7 +5,6 @@ export const useProps = ({ request, exFiles, maxSize }: IUpLoadProps) => {
   const configUploadProps = useFormConfigContext("uploadProps");
   const inputProps = {
     request,
-    exFiles,
     maxSize,
   };
   const keys = Object.keys(inputProps);
@@ -16,5 +15,10 @@ export const useProps = ({ request, exFiles, maxSize }: IUpLoadProps) => {
       return;
     }
   });
-  return resultProps;
+  const defaultExFiles=exFiles===undefined?resultProps.exFiles:exFiles;
+  console.log(defaultExFiles)
+  return {
+    ...resultProps,
+    exFiles:defaultExFiles
+  };
 };

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,9 +4,10 @@ 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[];
+  exFiles?: string[]|null;
   request?: (
     file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
   ) => Promise<{ url: 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

@@ -6,13 +6,17 @@ export const getFileExt = (file: UploadFile): string => {
   return name.substring(index + 1).toUpperCase();
 };
 
-export const checkFileType = (file: UploadFile, exFiles: string[] = []) => {
+export const checkFileType = (file: UploadFile, exFiles: string[]|null = []) => {
+  if (!exFiles){
+     return  true;
+  }
   const exName: string = getFileExt(file);
   return exFiles.indexOf(exName) !== -1;
 };
 
 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,22 @@ const formData = () => {
         manual:false
       },
     },
+    {
+      type: "urlUpload",
+      name:"urlUpload",
+      label:"测试",
+      helper:"123123",
+      itemProps: {
+        inputHelper:"fff",
+        style:{
+          width:368
+        },
+        exFiles:null,
+        mediaType:MediaTypeEnum.video,
+        maxSize:Number.MAX_SAFE_INTEGER,
+        thumbUrl:"https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000"
+      }
+    },
   ];
 };
 function Ttta({ form }) {