@hw-component/form 1.4.8 → 1.5.0

package/src/components/Select/components/AllSelect.tsx

@@ -2,7 +2,7 @@ import type { HSelectProps } from "@/components/Select/modal";
 import { Checkbox, Space } from "antd";
 import { itemOpProvider } from "../utils";
 import { useClassName } from "../../hooks";
-import React, {useMemo} from "react";
+import React, { useMemo } from "react";
 
 interface IProps extends HSelectProps {
   checked?: boolean;
@@ -23,23 +23,23 @@ const Index: React.FC<IProps> = ({
   fieldNames = {},
   children,
 }) => {
-  const notDisOption=useMemo(()=>{
-      return options?.filter((item)=>{
-          return !item.disabled;
-      })
-  },[options]);
+  const notDisOption = useMemo(() => {
+    return options?.filter((item) => {
+      return !item.disabled;
+    });
+  }, [options]);
   const opLen = notDisOption?.length || 0;
   const checked = (value as any[])?.length >= opLen;
   const classNames = useRootClassName(checked);
   const optionsClassName = useClassName(classNames);
   const allCheckBox = useClassName("hw-all-check-box");
-  const allCheck=()=>{
-     const allCheckOption=options?.filter((item)=>{
-        return !item.disabled;
-     });
-    const subItemOps=itemOpProvider(allCheckOption,fieldNames);
+  const allCheck = () => {
+    const allCheckOption = options?.filter((item) => {
+      return !item.disabled;
+    });
+    const subItemOps = itemOpProvider(allCheckOption, fieldNames);
     onChange?.(allCheckOption, subItemOps);
-  }
+  };
   const change = () => {
     if (!checked) {
       allCheck();
@@ -47,7 +47,7 @@ const Index: React.FC<IProps> = ({
     }
     onChange?.([], []);
   };
-  if (!allSelect || mode !== "multiple" || serviceSearch||opLen===0) {
+  if (!allSelect || mode !== "multiple" || serviceSearch || opLen === 0) {
     return <>{children}</>;
   }
   return (

package/src/components/Select/components/CheckBoxOption.tsx

@@ -3,12 +3,12 @@ import React from "react";
 interface ICheckBoxOptionProps {
   label?: React.ReactNode;
   checked: boolean;
-  disabled?:boolean;
+  disabled?: boolean;
 }
-export default ({ label, checked ,disabled}: ICheckBoxOptionProps) => {
+export default ({ label, checked, disabled }: ICheckBoxOptionProps) => {
   return (
     <Space>
-      <Checkbox checked={checked} disabled={disabled}/>
+      <Checkbox checked={checked} disabled={disabled} />
       {label}
     </Space>
   );

package/src/components/Select/defaultConfig.tsx

@@ -9,10 +9,12 @@ export const defaultModeConfig: HSelectProps["modeConfig"] = {
       const checkVal = value?.map((itemVal) => {
         return itemVal.value;
       });
-      const {label,disabled,value:itemVal}=item;
+      const { label, disabled, value: itemVal } = item;
       const newVal = checkVal || [];
       const checked = newVal.indexOf(itemVal) !== -1;
-      return <CheckBoxOption disabled={disabled} label={label} checked={checked} />;
+      return (
+        <CheckBoxOption disabled={disabled} label={label} checked={checked} />
+      );
     },
   },
 };

package/src/components/Select/hooks/changeHooks.tsx

@@ -142,11 +142,11 @@ export const useValueChange = (params: PartialHSelectProps) => {
     onChange(newChangeVal, subItemOps);
   };
   useEffect(() => {
-    if (mode === "tags" ) {
+    if (mode === "tags") {
       setVal(value);
       return;
     }
-    if (value===null||value===undefined){
+    if (value === null || value === undefined) {
       setVal(undefined);
       return;
     }

package/src/components/Switch/index.tsx

@@ -43,7 +43,7 @@ const Index: React.FC<HSwitchProps> = ({
     float: {
       inputValue: (item, initValue) => {
         const { close } = valueSwitchMap;
-        const { name: valueName="" } = item;
+        const { name: valueName = "" } = item;
         let val = initValue[valueName];
         if (typeof val === "undefined" || val === null) {
           val = close;

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

@@ -9,13 +9,14 @@ import { message } from "antd";
 interface SubReqParamsModal {
   request?: (
     file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
-  ) => Promise<{ url: string }>;
+  ) => Promise<{ url: string ,thumbUrl?:string}>;
   file: RcFile;
 }
 interface ResultModal {
   url: string;
   status: UploadFileStatus;
   uid?: string;
+  thumbUrl?:string;
 }
 const subReq = async ({
   request,
@@ -28,9 +29,10 @@ const subReq = async ({
     };
   }
   try {
-    const { url } = await request(file);
+    const { url ,thumbUrl} = await request(file);
     return {
       url,
+      thumbUrl,
       status: "done",
     };
   } catch (err: any) {
@@ -42,17 +44,19 @@ const subReq = async ({
   }
 };
 const fileListProvider = (changeFile: ResultModal, files?: UploadFile[]) => {
-  const { status, url, uid } = changeFile;
+  const { status, url, uid,thumbUrl } = changeFile;
   if (status === "error") {
     return files?.filter((item) => {
       return item.uid !== uid;
     });
   }
   return files?.map((item) => {
+    const fileDefaultThumbUrl=item.thumbUrl||thumbUrl;
     const resultUrl = url || item.thumbUrl;
     if (item.uid === uid) {
       item.status = status;
       item.response = { url: resultUrl };
+      item.thumbUrl=fileDefaultThumbUrl;
       return item;
     }
     return item;

package/src/components/Upload/index.tsx

@@ -75,7 +75,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
             return {
               name: itemData,
               response: {
-                url:itemData,
+                url: itemData,
               },
               status: "done",
               uid: `init-${index}`,

package/src/pages/Form/index.tsx

@@ -1,21 +1,28 @@
-import {HForm, HFormConfigProvider, HSwitch, useHForm} from "../../components";
+import {
+  HForm,
+  HFormConfigProvider,
+  HSwitch,
+  useHForm,
+} from "../../components";
 import { useState } from "react";
-import {Button, DatePicker, Form, Input, Row} from "antd";
-const Test2=()=>{
-  return <Row style={{background:"red"}}>
-
-  </Row>
-}
-const Test3=({value,onChange})=>{
-     return <Input value={value.input}
-                   style={{width:100}}
-                   onChange={(e)=>{
-          onChange({
-              ...value,
-              input:e.target.value
-          })
-     }}/>
-}
+import { Button, DatePicker, Form, Input, Row } from "antd";
+const Test2 = () => {
+  return <Row style={{ background: "red" }} />;
+};
+const Test3 = ({ value, onChange }) => {
+  return (
+    <Input
+      value={value.input}
+      style={{ width: 100 }}
+      onChange={(e) => {
+        onChange({
+          ...value,
+          input: e.target.value,
+        });
+      }}
+    />
+  );
+};
 const formData = (options) => {
   const op = [
     {
@@ -28,20 +35,20 @@ const formData = (options) => {
     },
   ];
   return [
-      {
-          label: "12321",
-          className: "3",
-          name:"min",
-          type:"inputNumberGroup",
-          itemProps:{
-              addonAfter:<Test3/>
-          },
+    {
+      label: "12321",
+      className: "3",
+      name: "inputNumberGroup",
+      type: "inputNumberGroup",
+      itemProps: {
+        addonAfter: <Test3 />,
       },
+    },
     {
       label: "测试12312",
       className: "hdjd",
-        type: "colorInput",
-      name:"test",
+      type: "colorInput",
+      name: "test",
     },
   ];
 };
@@ -49,7 +56,6 @@ function Ttta({ form }) {
   return (
     <div
       onClick={() => {
-        console.log("form", form);
         form.setFieldsValue({ switch: 1 });
       }}
     >
@@ -94,13 +100,18 @@ export default () => {
           form={form}
           labelAlign={"right"}
           onFinish={(value) => {
-            console.log(value);
+            console.log(value, "fff");
           }}
           onValuesChange={(val) => {
             console.log(val, "onValuesChange");
           }}
           initialValues={{
             file: "https://img0.baidu.com/it/u=530540642,263790536&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667",
+            min: 1,
+            max: 2,
+            inputNumberGroup: {
+              input: "xxxxxxx",
+            },
           }}
           request={(params) => {
             return new Promise<any>((resolve) => {
@@ -113,19 +124,19 @@ export default () => {
       </HFormConfigProvider>
       <div
         onClick={async () => {
-           const result=await form.validateFields();
-           console.log(result);
+          const result = await form.validateFields();
+          console.log(result);
         }}
       >
         点我
       </div>
-        <div
-            onClick={async () => {
-               form.submit()
-            }}
-        >
-            提交
-        </div>
+      <div
+        onClick={() => {
+          form.submit();
+        }}
+      >
+        提交
+      </div>
       <div
         onClick={() => {
           form.resetFields();

package/src/pages/ModalForm/index.tsx

@@ -2,14 +2,15 @@ import { Button } from "antd";
 import {
   HModalForm,
   useHDialogForm,
-  HFormConfigProvider, HUrlUpload,
+  HFormConfigProvider,
+  HUrlUpload,
 } from "../../components";
 import { useState } from "react";
 import { ShowParamsModal } from "@/components/DialogForm/modal";
 
-const Test=(props)=>{
-  return <HUrlUpload {...props}/>
-}
+const Test = (props) => {
+  return <HUrlUpload {...props} />;
+};
 const data = [
   {
     label: "输入框",
@@ -109,9 +110,9 @@ const data = [
   {
     label: "地址文件",
     name: "urlUpload",
-    render:()=>{
-      return <Test/>
-    }
+    render: () => {
+      return <Test />;
+    },
   },
   {
     label: "下拉框",
@@ -154,9 +155,9 @@ export default () => {
             params: {
               name: num,
             },
-            initialValues:{
-              urlUpload:"ffff"
-            }
+            initialValues: {
+              urlUpload: "ffff",
+            },
           });
         }}
       >

package/src/pages/Select/index.tsx

@@ -14,7 +14,7 @@ export default () => {
       <HSelect
         fieldNames={{ label: "name", value: "value" }}
         options={[
-          { name: "测试1", value: 10, userId: 112321,disabled:true },
+          { name: "测试1", value: 10, userId: 112321, disabled: true },
           { name: "测试2", value: 20, userId: 112321 },
         ]}
         placeholder="多选"

package/src/pages/Upload/index.tsx

@@ -6,9 +6,21 @@ import { MediaTypeEnum } from "../../components/Upload/enums";
 export default () => {
   const [files, setFiles] = useState([]);
   const [files1, setFiles1] = useState([]);
+  console.log(files)
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
-      <HUpload value={files} onChange={setFiles} multiple={true} maxCount={3} />
+      <HUpload exFiles={null}
+               value={files}
+               request={()=>{
+                   return {
+                       url:"https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641",
+                       thumbUrl:"https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641"
+                   }
+               }}
+               onChange={setFiles}
+               multiple={true}
+               maxCount={3}
+               maxSize={Number.MAX_SAFE_INTEGER}/>
       <HUrlUpload
         value={files1}
         mediaType={MediaTypeEnum.file}