@lingxiteam/ebe-utils 0.2.3 → 0.2.5

package/lib/h5public/src/components/factory/src/DformImagePicker/ImagePicker.tsx

@@ -1,10 +1,11 @@
 import { DformImagePicker } from '@lingxiteam/dform';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { DFormWrapper } from '../BasicComponents';
 import { useFormItem, UseFormItemProps } from '../utils/hooks/useFormItem';
 import UploadHandle from '../utils/upload';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { EngineApisType, LingxiForwardRef } from '@lingxiteam/types';
+import { Toast } from 'antd-mobile-5';
 // import { usePatchUploadImage } from './usePatchUploadImage';
 
 // @ts-ignore
@@ -30,6 +31,8 @@ export interface ImagePickerProps extends UseFormItemProps {
   appId: any;
   fileName?: string;
   newDefaultValue?: any; // 添加id和url的文件数据
+  synchronousDeletion?: boolean;
+  multiple?: boolean; // 是否支持多选
 }
 const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
   const {
@@ -51,15 +54,13 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
     columns,
     getEngineApis,
     newDefaultValue = [],
+    synchronousDeletion = false,
+    $$componentItem,
+    multiple = false,
     ...restProps
   } = props;
-  const {
-    api = '/app/file/uploadSingleFile',
-    _source,
-    _serviceId,
-  } = columns || {};
+  const { api = '/app/file/uploadSingleFile', _source, _serviceId } = columns || {};
   const uploadResultRef = useRef<any>();
-  const [selectable, setSelectable] = useState(props.selectable);
   const engineApis = getEngineApis?.();
 
   const {
@@ -124,40 +125,29 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
       uploadResultRef.current.setLocale(engineApis.getLocale);
     }
   }, [engineApis.getLocale]);
-  useEffect(() => {
-    // 修复当图片已选满，但是中途用户又用组件动作设置了图片数量，导致上传按钮不出现的问题
-    if (val) {
-      setSelectable(getSelectable(val));
-    }
-  }, [val]);
-  const getSelectable = useCallback(
-    (files) => {
-      if (props.selectable === false) {
-        return false;
-      }
-      if (maxLength && files?.length >= maxLength) {
-        return false;
-      }
-      return true;
-    },
-    [maxLength, props.selectable],
-  );
 
-  const onUpload = async (file: any) =>
+  const selectable = useMemo(() => {
+    if (props.selectable === false) {
+      return false;
+    }
+    if (maxLength && val?.length >= maxLength) {
+      return false;
+    }
+    return true;
+  }, [props.selectable, maxLength, val]);
+  const onUpload = async (file: Blob) =>
     new Promise((resolve, reject) => {
-      uploadResultRef.current.setProps({
-        file,
+      uploadResultRef.current.sendRequest({
         hooks: {
           uploadAfter(opts: unknown) {
             resolve(opts);
           },
           uploadError: () => {
-            setSelectable(true);
             reject();
           },
         },
+        file,
       });
-      uploadResultRef.current.sendRequest();
     });
 
   const getImgSize = (base64Str: string) => {
@@ -176,6 +166,13 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
 
   // eslint-disable-next-line consistent-return
   const onDelete = (file: any) => {
+    if (synchronousDeletion && file?.fileId) {
+      try {
+        engineApis?.service?.deleteFileInfoById(file.fileId);
+      } catch (error) {
+        console.log(error);
+      }
+    }
     if (props.onDelete) {
       return props.onDelete(file);
     }
@@ -190,14 +187,11 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
       //
       imgList = [];
     }
-    // cache(imgList);
-    setSelectable(getSelectable(imgList));
     onInputChange(imgList);
   };
 
   // 上传
   const handleUpload = (file: any, base64Url: any) => {
-    setSelectable(false);
     // 当上传方式修改base64时，不需要上传图片，只需要将图片转换成base64String
     if (uploadType === 'base64StringType' && base64Url) {
       let size = -1;
@@ -219,11 +213,12 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
       }
       return res?.url ? res : base64String;
     }
-    return uploadResultRef.current.queue([onUpload], [file]).then(() => {
-      const values = uploadResultRef.current.values();
+    return uploadResultRef.current.queue([onUpload], [file]).then((data: any) => {
+      const values = uploadResultRef.current.values([data]);
       if (props.onUpload) {
         props.onUpload(values);
       }
+      uploadResultRef.current?.clearValue();
       return values[0];
     });
   };
@@ -254,7 +249,7 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
             }
           }}
           rules={getRules()}
-          maxCount={maxLength}
+          maxLength={maxLength}
           required={required}
           preview={preview}
           defaultValue={val}
@@ -262,15 +257,8 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
           positionType="vertical"
           deletable={restProps.disableDelete}
           disabled={disabled}
-          getLocale={(
-            t: string,
-            tempValue: Record<string, any> | undefined,
-          ) => {
-            return engineApis?.getLocale(
-              `DformImagePicker.${t}`,
-              '',
-              tempValue,
-            );
+          getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
+            return engineApis?.getLocale(`DformImagePicker.${t}`, '', tempValue);
           }}
           selectable={selectable}
           onChange={onUploadChangeFile}
@@ -283,9 +271,8 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
       ) : (
         <ImgPicker
           {...restProps}
-          comp
           rules={getRules()}
-          maxCount={maxLength}
+          maxLength={maxLength}
           preview={preview}
           limitSize={imgLimitSize}
           onImageClick={(index: number, file: any, files: any) => {
@@ -293,8 +280,17 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
               onImageClick(index, files, file);
             }
           }}
+          beforeCheckMyFileLimit={(_: any, files: any[]) => {
+            const currenLength = val?.length || 0;
+            if (typeof maxLength === 'number' && maxLength > 0 && files.length + currenLength > maxLength) {
+              Toast.show(`最多选择 ${maxLength} 张图片，你多选了 ${files.length + currenLength - maxLength} 张`);
+              return null;
+            }
+            return true;
+          }}
           required={required}
           defaultValue={val}
+          multiple={multiple}
           accept="image/*,image/heic"
           deletable={restProps.disableDelete}
           positionType="vertical"
@@ -305,15 +301,8 @@ const ImagePicker = LingxiForwardRef<any, ImagePickerProps>((props, ref) => {
           onDelete={onDelete}
           uploadType={uploadType}
           readonly={readOnly}
-          getLocale={(
-            t: string,
-            tempValue: Record<string, any> | undefined,
-          ) => {
-            return engineApis?.getLocale(
-              `DformImagePicker.${t}`,
-              '',
-              tempValue,
-            );
+          getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
+            return engineApis?.getLocale(`DformImagePicker.${t}`, '', tempValue);
           }}
         />
       )}

package/lib/h5public/src/components/factory/src/DformImagePicker/index.tsx

@@ -13,80 +13,53 @@ export interface MyDformImagePickerProps extends UseFormItemProps {
   fileIdKey?: string;
 }
 
-const MyDformImagePicker = AppForwardRef<MyDformImagePickerProps>(
-  (props, ref) => {
-    const {
-      upload,
-      defaultValue,
-      fieldProps,
-      fieldName,
-      fileIdKey,
-      getEngineApis,
-    } = props;
-    const { isForm } = React.useContext(DFormContext) || {};
-    const engineApis = getEngineApis?.();
+const MyDformImagePicker = AppForwardRef<MyDformImagePickerProps>((props, ref) => {
+  const { upload, defaultValue, fieldProps, fieldName, fileIdKey, getEngineApis } = props;
+  const { isForm } = React.useContext(DFormContext) || {};
+  const engineApis = getEngineApis?.();
 
-    // 处理图片数据提前，修复在表单下有初始值的情况下，initialValue 取的是该页面设置的值，而非Core包的当中设置的初值值
-    const newDefaultValue = useMemo(() => {
-      if (defaultValue !== undefined && Array.isArray(defaultValue)) {
-        const mDefValue: any[] = [];
-        for (let index = 0; index < defaultValue.length; index += 1) {
-          const fileItem = defaultValue[index];
-          const mFile = { ...fileItem } as any;
-          const key = fileIdKey || 'fileId';
-          if (mFile?.[key]) {
-            // 如果key值局势base64的url
-            if (
-              typeof mFile?.[key] === 'string' &&
-              mFile?.[key].startsWith('data:')
-            ) {
-              mFile.url = mFile?.[key];
-              mFile.id = mFile?.[key];
-            } else if (engineApis?.getAppFileUrlById) {
-              mFile.url = engineApis.getAppFileUrlById(mFile?.[key]);
-              mFile.id = mFile?.[key];
-            }
+  // 处理图片数据提前，修复在表单下有初始值的情况下，initialValue 取的是该页面设置的值，而非Core包的当中设置的初值值
+  const newDefaultValue = useMemo(() => {
+    if (defaultValue !== undefined && Array.isArray(defaultValue)) {
+      const mDefValue: any[] = [];
+      for (let index = 0; index < defaultValue.length; index += 1) {
+        const fileItem = defaultValue[index];
+        const mFile = { ...fileItem } as any;
+        const key = fileIdKey || 'fileId';
+        if (mFile?.[key]) {
+          // 如果key值局势base64的url
+          if (typeof mFile?.[key] === 'string' && mFile?.[key].startsWith('data:')) {
+            mFile.url = mFile?.[key];
+            mFile.id = mFile?.[key];
+          } else if (engineApis?.getAppFileUrlById) {
+            mFile.url = engineApis.getAppFileUrlById(mFile?.[key]);
+            mFile.id = mFile?.[key];
           }
-          mDefValue.push(mFile);
         }
-        return mDefValue;
+        mDefValue.push(mFile);
       }
-      return defaultValue;
-    }, [JSON.stringify(defaultValue)]);
-
-    if (!isForm) {
-      return (
-        <FormItem>
-          {/** @ts-ignore */}
-          <ImagePicker
-            ref={ref}
-            {...props}
-            onUpload={upload}
-            newDefaultValue={newDefaultValue}
-          />
-        </FormItem>
-      );
+      return mDefValue;
     }
+    return defaultValue;
+  }, [JSON.stringify(defaultValue)]);
+
+  if (!isForm) {
     return (
       <FormItem>
-        {/* 统一由AddressPicker组件的hidden校验 */}
-        <Form.DFormField
-          name={fieldProps || fieldName}
-          initialValue={newDefaultValue}
-          params={{ formFlag: true, hidden: true }}
-        >
-          {/** @ts-ignore */}
-          <ImagePicker
-            {...props}
-            fieldProps={fieldProps || fieldName}
-            ref={ref}
-            onUpload={upload}
-            newDefaultValue={newDefaultValue}
-          />
-        </Form.DFormField>
+        {/** @ts-ignore */}
+        <ImagePicker ref={ref} {...props} onUpload={upload} newDefaultValue={newDefaultValue} />
       </FormItem>
     );
-  },
-);
+  }
+  return (
+    <FormItem>
+      {/* 统一由AddressPicker组件的hidden校验 */}
+      <Form.DFormField name={fieldProps || fieldName} initialValue={newDefaultValue} params={{ formFlag: true, hidden: true }}>
+        {/** @ts-ignore */}
+        <ImagePicker {...props} fieldProps={fieldProps || fieldName} ref={ref} onUpload={upload} newDefaultValue={newDefaultValue} />
+      </Form.DFormField>
+    </FormItem>
+  );
+});
 
 export default withTransformProps(MyDformImagePicker, transformProps);

package/lib/h5public/src/components/factory/src/DformImagePicker/transformProps.tsx

@@ -8,15 +8,7 @@ interface Props {
 }
 
 export default function transformProps(props: Props) {
-  const {
-    basicStatus,
-    fieldName,
-    name,
-    numberLimit = 5,
-    singleFileMaxSize = 50,
-    value,
-    ...restProps
-  } = props;
+  const { basicStatus, fieldName, name, numberLimit = 5, singleFileMaxSize = 50, value, ...restProps } = props;
   const newProps: Record<string, any> = {
     ...(restProps as any),
     fieldProps: fieldName,

package/lib/h5public/src/components/factory/src/DformInput/index.tsx

@@ -17,15 +17,7 @@ export interface MyDformInputProps extends UseFormItemProps {
 
 const MyDformInput = LingxiForwardRef<any, MyDformInputProps>((props, ref) => {
   const { getEngineApis, $$componentItem, ...restProps } = props;
-  const {
-    visible,
-    val,
-    disabled,
-    getRules,
-    onInputChange,
-    required,
-    readOnly,
-  } = useFormItem(ref, props);
+  const { visible, val, disabled, getRules, onInputChange, required, readOnly } = useFormItem(ref, props);
   const { getLocale } = getEngineApis?.() || {};
   return (
     <FormItem>
@@ -41,10 +33,7 @@ const MyDformInput = LingxiForwardRef<any, MyDformInputProps>((props, ref) => {
           required={required}
           readonly={readOnly}
           validateTrigger="onBlur"
-          getLocale={(
-            t: string,
-            tempValue: Record<string, any> | undefined,
-          ) => {
+          getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
             return getLocale(`DformInput.${t}`, '', tempValue);
           }}
         />