@hw-component/form 1.11.0 → 1.11.2

package/src/components/TDPicker/RangePicker.tsx

@@ -5,7 +5,7 @@ import {
   useRangePickerTimeVal,
   useRangeValueProvider,
 } from "./hooks";
-import React, { useMemo } from "react";
+import React, {useMemo, useState} from "react";
 import type { RangePickerProps } from "antd/es/date-picker";
 import { useMatchConfigProps } from "../hooks";
 import type { HItemProps } from "../Form/modal";
@@ -15,6 +15,8 @@ import InputGroup from "../InputGroup";
 
 const RangePicker = DatePicker.RangePicker as any;
 
+type RangeValue = (Moment|null) [];
+
 const PickerContent: React.ForwardRefRenderFunction<
   HRangePickerPropsRef,
   HRangePickerProps
@@ -38,6 +40,7 @@ const PickerContent: React.ForwardRefRenderFunction<
     valueRangePickerValueMap: valueMap,
     dateRanges: undefined,
   });
+  const [dates, setDates] = useState<RangeValue>([null,null]);
   const dateMapKeys = useGetTimeKey({
     valueMap: valueRangePickerValueMap,
     name,
@@ -102,6 +105,13 @@ const PickerContent: React.ForwardRefRenderFunction<
     });
     onChange?.(paramsProvider(subVal));
   };
+  const onOpenChange = (open: boolean) => {
+    if (open) {
+      setDates(timeVal);
+    } else {
+      setDates([null,null]);
+    }
+  };
   return (
     <RangePicker
       value={timeVal}
@@ -109,10 +119,11 @@ const PickerContent: React.ForwardRefRenderFunction<
       style={{ width: "100%", ...style }}
       onChange={change}
       showTime={showTime}
-      onCalendarChange={change}
+      onCalendarChange={val => setDates(val)}
+      onOpenChange={onOpenChange}
       ranges={defaultRanges as RangePickerProps["ranges"]}
       disabledDate={(currentDate) => {
-        return !!disabledDate?.(currentDate, timeVal);
+        return !!disabledDate?.(currentDate, dates);
       }}
       {...props}
     />
@@ -126,7 +137,7 @@ const HRangePicker: React.ForwardRefRenderFunction<
 > = (props, ref) => {
   return (
     <InputGroup {...props}>
-      <Content ref={ref} />
+      <Content ref={ref}/>
     </InputGroup>
   );
 };

package/src/components/TDPicker/modal.ts

@@ -38,7 +38,7 @@ export interface HRangePickerProps
   valueMap?: DateRangePickerValueMapModal;
   ranges?: RangePickerProps["ranges"] | boolean;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
-  disabledDate?: DisabledDateFnModal<Moment[] | undefined>;
+  disabledDate?: DisabledDateFnModal<(Moment|null) []>;
 }
 
 export interface HTimePickerProps

package/src/components/Upload/ImgCropUpload.tsx

@@ -0,0 +1,50 @@
+import ImgCrop from 'antd-img-crop';
+import {message, Upload} from "antd";
+import Btn from "./Btn";
+import React, {useState} from "react";
+import type {IUpLoadProps} from "./modal";
+import {checkFileType} from "./util";
+import Preview, {type IPreviewProps} from "./Preview";
+
+export default ({value,onChange,maxCount=1,exFiles=["PNG","JPEG","JPG","GIF"]}:IUpLoadProps)=>{
+    const [previewModal, setPreviewModal] = useState<IPreviewProps>({});
+    const change=({file,fileList})=>{
+        if (!checkFileType(file, exFiles)) {
+            return message.error(new Error("文件格式错误!"));
+        }
+         if (maxCount===1){
+          onChange?.([file]);
+          return ;
+         }
+         onChange?.(fileList);
+    }
+    const { visible, file: previewFile } = previewModal;
+    const preview = (file) => {
+        setPreviewModal({
+            visible: true,
+            file,
+        });
+    };
+    return  <>
+        <ImgCrop rotate>
+            <Upload
+                customRequest={({onSuccess})=>{
+                    onSuccess?.({});
+                }}
+                fileList={value}
+                listType="picture-card"
+                onChange={change}
+                onPreview={preview}
+            >
+                <Btn value={value} maxCount={maxCount} listType="picture-card"/>
+            </Upload>
+        </ImgCrop>
+        <Preview
+            visible={visible}
+            file={previewFile}
+            onCancel={() => {
+                setPreviewModal({});
+            }}
+        />
+    </>
+}

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

@@ -28,7 +28,7 @@ export default ({ file, onReady, onError }: IMediaTypeEleProps) => {
       onError={onError}
       onReady={onReady}
       mediaType={mediaType}
-      url={file.response.url}
+      url={file.response?.url||file.thumbUrl}
     />
   );
 };

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

@@ -24,7 +24,6 @@ const matchFile = (
       return errList.push(new Error("超出限制大小!"));
     }
     if (!checkFileType(item, exFiles)) {
-      console.log(item, "item");
       return errList.push(new Error("文件格式错误!"));
     }
     if (checkFile(item, oldFile)) {

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

@@ -4,7 +4,6 @@ import type { RcFile } from "antd/lib/upload";
 import { useEffect, useMemo } from "react";
 import type { UploadFileStatus } from "antd/es/upload/interface";
 import { message } from "antd";
-import { useRequest } from "ahooks";
 
 interface SubReqParamsModal {
   request?: IUpLoadProps["request"];

package/src/components/Upload/util.ts

@@ -3,7 +3,6 @@ import type { UploadFile } from "antd/es/upload/interface";
 export const getFileExt = (file: UploadFile): string => {
   const { name } = file;
   const index = name.lastIndexOf(".");
-  console.log(index, name, file);
   return name.substring(index + 1).toUpperCase();
 };
 
@@ -11,7 +10,6 @@ export const checkFileType = (
   file: UploadFile,
   exFiles: string[] | null = []
 ) => {
-  console.log(file);
   if (!exFiles) {
     return true;
   }

package/src/components/index.tsx

@@ -12,6 +12,8 @@ export { default as HInputGroup } from "./InputGroup";
 import ModalForm from "./DialogForm/ModalForm";
 import DrawerForm from "./DialogForm/DrawerForm";
 export const HSelect = FormConfig.select;
+export const HImgCropUpload = FormConfig.imgCropUpload;
+
 export const HInput = FormConfig.input;
 export const HRichEditor = FormConfig.richEditor;
 

package/src/pages/DatePicker/index.tsx

@@ -26,7 +26,8 @@ export default () => {
         />
         <HRangePicker
           value={timeVal}
-          addonBefore="你好"
+          allowEmpty={[true, false]}
+          addonBefore="你好1"
           valueMap={{ start: "start1", end: "end2" }}
           onChange={(val) => {
             console.log(val);

package/src/pages/Form/index.tsx

@@ -6,9 +6,11 @@ import {
   HBasicForm,
   HRangePicker,
   HSelectInput,
+  HUpload
 } from "../../components";
 import { useEffect, useState } from "react";
 import { Button, Col, Form, Input, Row, Space } from "antd";
+import ImgCrop from 'antd-img-crop';
 
 const Test3 = ({ value = {}, onChange }) => {
   const { fs, end } = value;
@@ -143,6 +145,25 @@ const TestItem1 = ({ value, onChange }) => {
   );
 };
 
+const HeaderImg=({ value=[], onChange }) => {
+    console.log(value);
+    return (
+        <ImgCrop rotate>
+            <HUpload
+                value={value}
+                request={null}
+                onChange={(info)=>{
+                    console.log(info,"info")
+                    onChange(info.fileList)
+                }}
+
+            >
+                天际
+            </HUpload>
+        </ImgCrop>
+    );
+};
+
 export default () => {
   const form = useHForm();
   const [id, setId] = useState(1);
@@ -226,7 +247,9 @@ export default () => {
                 label: "你好啊",
                 type: "rangePicker",
                 hover: ["123123213", "22222"],
-                  rules:[{required: true, message: "Please input your password!", }],
+                rules: [
+                  { required: true, message: "Please input your password!" },
+                ],
                 itemProps: {
                   valueMap: {
                     start: "start",
@@ -237,14 +260,14 @@ export default () => {
               {
                 name: "num1",
                 label: "必填",
-                  rules:[{required: true, message: "Please input your password!", }],
+                type:"imgCropUpload",
                 dependencies: ["num"],
               },
             ]}
             dismissOnPressEnter={false}
             form={form}
             initialValues={{
-              num1:"23123"
+
             }}
             labelAlign={"top"}
             onValuesChange={(val) => {