@hw-component/form 1.3.4 → 1.3.5

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,9 +84,13 @@ const Index = ({
     setUrl("");
     setLoad(false);
   };
-  const upProps={exFiles:defaultExFiles,...props};
+  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}
@@ -93,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 {
@@ -65,16 +70,19 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
         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,
@@ -92,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="测试"
       />