feffery_antd_components 0.4.4 → 0.4.5

package/src/lib/fragments/upload/AntdPictureUpload.react.js

@@ -18,40 +18,49 @@ import FormContext from '../../contexts/FormContext';
 // 状态管理
 import useFormStore from '../../store/formStore';
 // 参数类型
-import { propTypes, defaultProps } from '../../components/dataEntry/upload/AntdPictureUpload.react';
+import {
+    propTypes,
+    defaultProps,
+} from '../../components/dataEntry/upload/AntdPictureUpload.react';
 
 // 解析历史任务完成时间信息
 const parseHistoryTaskCompleteTime = (e) => {
-    let uid2CompleteTime = new Map()
+    const uid2CompleteTime = new Map();
     e.forEach((item) => {
-        uid2CompleteTime.set(item.uid, item.completeTimestamp)
-    })
-    return uid2CompleteTime
-}
+        uid2CompleteTime.set(item.uid, item.completeTimestamp);
+    });
+    return uid2CompleteTime;
+};
 
 const getBase64 = (file) => {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = () => resolve(reader.result);
-        reader.onerror = error => reject(error);
+        reader.onerror = (error) => reject(error);
     });
-}
+};
 
 const pictureUploadStatus2Style = new Map([
-    ['warning', {
-        border: "1px solid #faad14",
-        borderRadius: "2px",
-        padding: "6px 10px 0 10px",
-        transition: "border 0.3s"
-    }],
-    ['error', {
-        border: "1px solid #ff4d4f",
-        borderRadius: "2px",
-        padding: "6px 10px 0 10px",
-        transition: "border 0.3s"
-    }]
-])
+    [
+        'warning',
+        {
+            border: '1px solid #faad14',
+            borderRadius: '2px',
+            padding: '6px 10px 0 10px',
+            transition: 'border 0.3s',
+        },
+    ],
+    [
+        'error',
+        {
+            border: '1px solid #ff4d4f',
+            borderRadius: '2px',
+            padding: '6px 10px 0 10px',
+            transition: 'border 0.3s',
+        },
+    ],
+]);
 
 /**
  * 图片上传组件AntdPictureUpload
@@ -99,17 +108,19 @@ const AntdPictureUpload = (props) => {
     const [messageApi, messageContextHolder] = message.useMessage();
     const [modalApi, modalContextHolder] = Modal.useModal();
 
-    const context = useContext(PropsContext)
-    const formId = useContext(FormContext)
+    const context = useContext(PropsContext);
+    const formId = useContext(FormContext);
 
-    const updateItemValue = useFormStore((state) => state.updateItemValue)
-    const deleteItemValue = useFormStore((state) => state.deleteItemValue)
+    const updateItemValue = useFormStore((state) => state.updateItemValue);
+    const deleteItemValue = useFormStore((state) => state.deleteItemValue);
 
-    locale = (context && context.locale) || locale
-    downloadUrlFromBackend = downloadUrl ? false : downloadUrlFromBackend
+    locale = (context && context.locale) || locale;
+    downloadUrlFromBackend = downloadUrl ? false : downloadUrlFromBackend;
 
     // 收集当前组件相关表单值
-    const currentFormValue = useFormStore(state => state.values?.[formId]?.[name || id])
+    const currentFormValue = useFormStore(
+        (state) => state.values?.[formId]?.[name || id]
+    );
 
     // 针对上传类组件，特殊处理由表单值控制上传列表的清空
     useEffect(() => {
@@ -117,14 +128,14 @@ const AntdPictureUpload = (props) => {
         if (formId && (name || id) && enableBatchControl) {
             if (!currentFormValue || currentFormValue.length === 0) {
                 // 清空上传列表
-                updateFileList([])
+                updateFileList([]);
                 setProps({
                     listUploadTaskRecord: [],
-                    lastUploadTaskRecord: null
-                })
+                    lastUploadTaskRecord: null,
+                });
             }
         }
-    }, [currentFormValue])
+    }, [currentFormValue]);
 
     // 处理组件卸载后，对应表单项值的清除
     useEffect(() => {
@@ -132,207 +143,271 @@ const AntdPictureUpload = (props) => {
             // 若上文中存在有效表单id
             if (formId && (name || id) && enableBatchControl) {
                 // 表单值更新
-                deleteItemValue(formId, name || id)
+                deleteItemValue(formId, name || id);
             }
-        }
-    }, [name, id])
+        };
+    }, [name, id]);
 
-    listUploadTaskRecord = listUploadTaskRecord || []
+    listUploadTaskRecord = listUploadTaskRecord || [];
 
     // 更新已上传文件 -> 上传完成时间映射字典
-    const uploadedFile2CompleteTime = parseHistoryTaskCompleteTime(listUploadTaskRecord)
+    const uploadedFile2CompleteTime =
+        parseHistoryTaskCompleteTime(listUploadTaskRecord);
 
     useEffect(() => {
         // 初始化uploadId
         if (!uploadId) {
             if (defaultFileList && defaultFileList.length > 0) {
-                setProps({ uploadId: defaultFileList[0].taskId || uuidv4() })
+                setProps({ uploadId: defaultFileList[0].taskId || uuidv4() });
             } else {
-                setProps({ uploadId: uuidv4() })
+                setProps({ uploadId: uuidv4() });
             }
         }
-    }, [])
-
-    const [fileList, updateFileList] = useState(defaultFileList || listUploadTaskRecord.map((item) => {
-        return {
-            name: item.fileName,
-            status: item.taskStatus,
-            uid: item.uid,
-            url: item.url,
-            uploadResponse: item.uploadResponse,
-            fileSize: item.fileSize
-        };
-    }));
+    }, []);
+
+    const [fileList, updateFileList] = useState(
+        defaultFileList ||
+            listUploadTaskRecord.map((item) => {
+                return {
+                    name: item.fileName,
+                    status: item.taskStatus,
+                    uid: item.uid,
+                    url: item.url,
+                    uploadResponse: item.uploadResponse,
+                    fileSize: item.fileSize,
+                };
+            })
+    );
     const [previewVisible, setPreviewVisible] = useState(false);
     const [previewImage, setPreviewImage] = useState('');
     const [previewTitle, setPreviewTitle] = useState('');
 
     const handleCancel = () => setPreviewVisible(false);
 
-    const handlePreview = async file => {
+    const handlePreview = async (file) => {
         if (!file.url && !file.preview) {
             file.preview = await getBase64(file.originFileObj);
         }
 
-        setPreviewImage(file.url || file.preview)
-        setPreviewVisible(true)
-        setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1))
-
-    }
+        setPreviewImage(file.url || file.preview);
+        setPreviewVisible(true);
+        setPreviewTitle(
+            file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
+        );
+    };
 
     const uploadButton = (
         <div>
             <PlusOutlined />
-            <div style={{ marginTop: 8 }}>
-                {buttonContent}
-            </div>
+            <div style={{ marginTop: 8 }}>{buttonContent}</div>
         </div>
     );
 
-    let uploadProps = {
+    const uploadProps = {
         name: 'file',
         action: apiUrl + `?uploadId=${uploadId}`,
         headers: headers,
         data: {
             uploadId: uploadId,
-            ...apiUrlExtraParams
+            ...apiUrlExtraParams,
         },
         withCredentials: withCredentials,
         beforeUpload: (file) => {
             const sizeCheck = file.size / 1024 / 1024 < fileMaxSize;
             if (!sizeCheck) {
-                messageApi.error(`${file.name}${locale2text.Upload[locale].sizeError[0]}${fileMaxSize}${locale2text.Upload[locale].sizeError[1]}`);
+                messageApi.error(
+                    `${file.name}${locale2text.Upload[locale].sizeError[0]}${fileMaxSize}${locale2text.Upload[locale].sizeError[1]}`
+                );
             }
 
             if (fileTypes) {
-                if (fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) === -1) {
-                    messageApi.error(`${locale2text.Upload[locale].typeError[0]}${file.name}${locale2text.Upload[locale].typeError[1]}`);
+                if (
+                    fileTypes.indexOf(
+                        file.name.split('.')[file.name.split('.').length - 1]
+                    ) === -1
+                ) {
+                    messageApi.error(
+                        `${locale2text.Upload[locale].typeError[0]}${file.name}${locale2text.Upload[locale].typeError[1]}`
+                    );
                 }
 
-                return sizeCheck && fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) !== -1;
+                return (
+                    sizeCheck &&
+                    fileTypes.indexOf(
+                        file.name.split('.')[file.name.split('.').length - 1]
+                    ) !== -1
+                );
             }
 
             return sizeCheck;
         },
         onChange(info) {
-
             // 计算最近一次任务的子任务数量
-            let lastTaskCount
+            let lastTaskCount;
             if (info.file.status === 'removed') {
-                lastTaskCount = 0
+                lastTaskCount = 0;
             } else {
-                lastTaskCount = info.fileList.length - listUploadTaskRecord.length;
+                lastTaskCount =
+                    info.fileList.length - listUploadTaskRecord.length;
             }
 
             // 单文件上传模式
             // 若当前事件为removed
             if (info.file.status === 'removed') {
-
-                let _listUploadTaskRecord = info.fileList.map(
-                    (file) => {
-                        // 配置已完成上传文件下载链接
-                        let urlInfo = downloadUrlFromBackend ?
-                            (file.response ? { url: file.response.url } : {}) :
-                            (
-                                downloadUrl && (file.status === 'done' || file.status === 'success') ?
-                                    {
-                                        url: downloadUrl + `?taskId=${uploadId}&filename=${file.name}` + (
-                                            Object.keys(downloadUrlExtraParams).map(key => `&${key}=${downloadUrlExtraParams[key]}`).join('')
+                const _listUploadTaskRecord = info.fileList.map((file) => {
+                    // 配置已完成上传文件下载链接
+                    const urlInfo = downloadUrlFromBackend
+                        ? file.response
+                            ? { url: file.response.url }
+                            : {}
+                        : downloadUrl &&
+                            (file.status === 'done' ||
+                                file.status === 'success')
+                          ? {
+                                url:
+                                    downloadUrl +
+                                    `?taskId=${uploadId}&filename=${file.name}` +
+                                    Object.keys(downloadUrlExtraParams)
+                                        .map(
+                                            (key) =>
+                                                `&${key}=${downloadUrlExtraParams[key]}`
                                         )
-                                    } :
-                                    {}
-                            )
-                        // 配置已完成上传文件接口响应信息
-                        let responseInfo = file.response ? { uploadResponse: file.response } : {}
-                        return {
-                            fileName: file.name,
-                            fileSize: file.size,
-                            completeTimestamp: uploadedFile2CompleteTime.get(file.uid) || new Date().getTime(),
-                            taskStatus: (file.status === 'done' || file.status === 'success') ? 'success' : 'failed',
-                            taskId: uploadId,
-                            uid: file.uid,
-                            ...urlInfo,
-                            ...responseInfo
-                        }
-                    }
-                )
+                                        .join(''),
+                            }
+                          : {};
+                    // 配置已完成上传文件接口响应信息
+                    const responseInfo = file.response
+                        ? { uploadResponse: file.response }
+                        : {};
+                    return {
+                        fileName: file.name,
+                        fileSize: file.size,
+                        completeTimestamp:
+                            uploadedFile2CompleteTime.get(file.uid) ||
+                            new Date().getTime(),
+                        taskStatus:
+                            file.status === 'done' || file.status === 'success'
+                                ? 'success'
+                                : 'failed',
+                        taskId: uploadId,
+                        uid: file.uid,
+                        ...urlInfo,
+                        ...responseInfo,
+                    };
+                });
 
                 // AntdForm表单批量控制
                 if (formId && (name || id) && enableBatchControl) {
                     // 表单值更新
-                    updateItemValue(formId, name || id, _listUploadTaskRecord)
+                    updateItemValue(formId, name || id, _listUploadTaskRecord);
                 }
                 // 更新任务记录
                 setProps({
-                    listUploadTaskRecord: _listUploadTaskRecord
-                })
-            } else if (info.file.status === 'done' || info.file.status === 'success' || info.file.status === 'error' || !info.file.status) {
-                let _listUploadTaskRecord = info.fileList.map(
-                    (file) => {
-                        // 配置已完成上传文件下载链接
-                        let urlInfo = downloadUrlFromBackend ?
-                            (file.response ? { url: file.response.url } : {}) :
-                            (
-                                downloadUrl && (file.status === 'done' || file.status === 'success') ?
-                                    {
-                                        url: downloadUrl + `?taskId=${uploadId}&filename=${file.name}` + (
-                                            Object.keys(downloadUrlExtraParams).map(key => `&${key}=${downloadUrlExtraParams[key]}`).join('')
+                    listUploadTaskRecord: _listUploadTaskRecord,
+                });
+            } else if (
+                info.file.status === 'done' ||
+                info.file.status === 'success' ||
+                info.file.status === 'error' ||
+                !info.file.status
+            ) {
+                const _listUploadTaskRecord = info.fileList.map((file) => {
+                    // 配置已完成上传文件下载链接
+                    const urlInfo = downloadUrlFromBackend
+                        ? file.response
+                            ? { url: file.response.url }
+                            : {}
+                        : downloadUrl &&
+                            (file.status === 'done' ||
+                                file.status === 'success')
+                          ? {
+                                url:
+                                    downloadUrl +
+                                    `?taskId=${uploadId}&filename=${file.name}` +
+                                    Object.keys(downloadUrlExtraParams)
+                                        .map(
+                                            (key) =>
+                                                `&${key}=${downloadUrlExtraParams[key]}`
                                         )
-                                    } :
-                                    {}
-                            )
-                        // 配置已完成上传文件接口响应信息
-                        let responseInfo = file.response ? { uploadResponse: file.response } : {}
-                        return {
-                            fileName: file.name,
-                            fileSize: file.size,
-                            completeTimestamp: uploadedFile2CompleteTime.get(file.uid) || new Date().getTime(),
-                            taskStatus: (file.status === 'done' || file.status === 'success') ? 'success' : 'failed',
-                            taskId: uploadId,
-                            uid: file.uid,
-                            ...urlInfo,
-                            ...responseInfo
-                        }
-                    }
-                )
+                                        .join(''),
+                            }
+                          : {};
+                    // 配置已完成上传文件接口响应信息
+                    const responseInfo = file.response
+                        ? { uploadResponse: file.response }
+                        : {};
+                    return {
+                        fileName: file.name,
+                        fileSize: file.size,
+                        completeTimestamp:
+                            uploadedFile2CompleteTime.get(file.uid) ||
+                            new Date().getTime(),
+                        taskStatus:
+                            file.status === 'done' || file.status === 'success'
+                                ? 'success'
+                                : 'failed',
+                        taskId: uploadId,
+                        uid: file.uid,
+                        ...urlInfo,
+                        ...responseInfo,
+                    };
+                });
 
                 // AntdForm表单批量控制
                 if (formId && (name || id) && enableBatchControl) {
                     // 表单值更新
-                    updateItemValue(formId, name || id, _listUploadTaskRecord)
+                    updateItemValue(formId, name || id, _listUploadTaskRecord);
                 }
                 setProps({
                     lastUploadTaskRecord: {
                         fileName: info.file.name,
                         fileSize: info.file.size,
                         completeTimestamp: new Date().getTime(),
-                        taskStatus: (info.file.status === 'done' || info.file.status === 'success') ? 'success' : 'failed',
+                        taskStatus:
+                            info.file.status === 'done' ||
+                            info.file.status === 'success'
+                                ? 'success'
+                                : 'failed',
                         taskId: uploadId,
-                        ...(
-                            downloadUrlFromBackend ?
-                                (info.file.response ? { url: info.file.response.url } : {}) :
-                                (
-                                    downloadUrl && (info.file.status === 'done' || info.file.status === 'success') ?
-                                        {
-                                            url: downloadUrl + `?taskId=${uploadId}&filename=${info.file.name}` + (
-                                                Object.keys(downloadUrlExtraParams).map(key => `&${key}=${downloadUrlExtraParams[key]}`).join('')
+                        ...(downloadUrlFromBackend
+                            ? info.file.response
+                                ? { url: info.file.response.url }
+                                : {}
+                            : downloadUrl &&
+                                (info.file.status === 'done' ||
+                                    info.file.status === 'success')
+                              ? {
+                                    url:
+                                        downloadUrl +
+                                        `?taskId=${uploadId}&filename=${info.file.name}` +
+                                        Object.keys(downloadUrlExtraParams)
+                                            .map(
+                                                (key) =>
+                                                    `&${key}=${downloadUrlExtraParams[key]}`
                                             )
-                                        } :
-                                        {}
-                                )
-                        ),
-                        ...(
-                            info.file.response ? { uploadResponse: info.file.response } : {}
-                        )
+                                            .join(''),
+                                }
+                              : {}),
+                        ...(info.file.response
+                            ? { uploadResponse: info.file.response }
+                            : {}),
                     },
-                    listUploadTaskRecord: _listUploadTaskRecord
-                })
+                    listUploadTaskRecord: _listUploadTaskRecord,
+                });
             }
 
-            if ((info.file.status === 'done' || info.file.status === 'success') && showSuccessMessage) {
-                messageApi.success(`${info.file.name} ${locale2text.Upload[locale].uploadSuccess}`);
+            if (
+                (info.file.status === 'done' ||
+                    info.file.status === 'success') &&
+                showSuccessMessage
+            ) {
+                messageApi.success(
+                    `${info.file.name} ${locale2text.Upload[locale].uploadSuccess}`
+                );
             } else if (info.file.status === 'error' && showErrorMessage) {
-                messageApi.error(`${info.file.name} ${locale2text.Upload[locale].uploadFailed}`);
+                messageApi.error(
+                    `${info.file.name} ${locale2text.Upload[locale].uploadFailed}`
+                );
             }
 
             // 获取当前上传文件列表
@@ -344,137 +419,175 @@ const AntdPictureUpload = (props) => {
             }
 
             if (lastTaskCount !== 0) {
-                _fileList = _fileList.slice(0, _fileList.length - lastTaskCount)
+                _fileList = _fileList
+                    .slice(0, _fileList.length - lastTaskCount)
                     .concat(
-                        _fileList.slice(-lastTaskCount).map(
-                            item => {
-                                if (item.status === 'error' || !item.status) {
-
-                                    item.status = 'error'
-                                    item.response = failedTooltipInfo ? failedTooltipInfo : '上传失败'
-                                }
-                                return item
+                        _fileList.slice(-lastTaskCount).map((item) => {
+                            if (item.status === 'error' || !item.status) {
+                                item.status = 'error';
+                                item.response = failedTooltipInfo
+                                    ? failedTooltipInfo
+                                    : '上传失败';
                             }
-                        )
-                    )
+                            return item;
+                        })
+                    );
             }
 
             if (downloadUrl) {
                 updateFileList(
-                    _fileList.map(
-                        item => {
-                            // 配置已完成上传文件接口响应信息
-                            let responseInfo = item.response ? { uploadResponse: item.response } : {}
-                            return {
-                                ...item,
-                                url: downloadUrl + `?taskId=${uploadId}&filename=${item.name}` + (
-                                    Object.keys(downloadUrlExtraParams).map(key => `&${key}=${downloadUrlExtraParams[key]}`).join('')
-                                ),
-                                ...responseInfo
-                            }
-                        }
-                    )
-                )
+                    _fileList.map((item) => {
+                        // 配置已完成上传文件接口响应信息
+                        const responseInfo = item.response
+                            ? { uploadResponse: item.response }
+                            : {};
+                        return {
+                            ...item,
+                            url:
+                                downloadUrl +
+                                `?taskId=${uploadId}&filename=${item.name}` +
+                                Object.keys(downloadUrlExtraParams)
+                                    .map(
+                                        (key) =>
+                                            `&${key}=${downloadUrlExtraParams[key]}`
+                                    )
+                                    .join(''),
+                            ...responseInfo,
+                        };
+                    })
+                );
             } else if (downloadUrlFromBackend) {
                 updateFileList(
-                    _fileList.map(
-                        item => {
-                            if (item.response) {
-                                return {
-                                    ...item,
-                                    url: item.response.url,
-                                    uploadResponse: item.response
-                                }
-                            }
+                    _fileList.map((item) => {
+                        if (item.response) {
                             return {
-                                ...item
-                            }
+                                ...item,
+                                url: item.response.url,
+                                uploadResponse: item.response,
+                            };
                         }
-                    )
-                )
+                        return {
+                            ...item,
+                        };
+                    })
+                );
             } else {
-                updateFileList(_fileList)
+                updateFileList(_fileList);
             }
-        }
+        },
     };
 
     // 添加accept参数
     if (fileTypes && fileTypes.length != 0) {
-
-        Object.assign(uploadProps, { accept: '.' + fileTypes.join(',.') })
+        Object.assign(uploadProps, { accept: '.' + fileTypes.join(',.') });
     }
 
     if (editable) {
-
         return (
             <ConfigProvider locale={str2Locale.get(locale)}>
                 <div
                     // 提取具有data-*或aria-*通配格式的属性
-                    {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+                    {...pickBy(
+                        (_, k) =>
+                            k.startsWith('data-') || k.startsWith('aria-'),
+                        others
+                    )}
                     id={id}
                     className={
-                        isString(className) ?
-                            className :
-                            (className ? useCss(className) : undefined)
+                        isString(className)
+                            ? className
+                            : className
+                              ? useCss(className)
+                              : undefined
                     }
                     style={{
-                        border: "1px solid transparent",
-                        transition: "border 0.3s",
+                        border: '1px solid transparent',
+                        transition: 'border 0.3s',
                         ...pictureUploadStatus2Style.get(status),
-                        ...style
+                        ...style,
                     }}
-                    key={key}>
+                    key={key}
+                >
                     {messageContextHolder}
                     {modalContextHolder}
-                    <ImgCrop modalOk={locale2text.AntdPictureUpload[locale].imgCropModalOKText}
-                        modalCancel={locale2text.AntdPictureUpload[locale].imgCropModalCancelText}
-                        {...editConfig}>
-                        <Upload {...uploadProps}
+                    <ImgCrop
+                        modalOk={
+                            locale2text.AntdPictureUpload[locale]
+                                .imgCropModalOKText
+                        }
+                        modalCancel={
+                            locale2text.AntdPictureUpload[locale]
+                                .imgCropModalCancelText
+                        }
+                        {...editConfig}
+                    >
+                        <Upload
+                            {...uploadProps}
                             fileList={fileList}
                             listType="picture-card"
                             disabled={
-                                context && !isUndefined(context.componentDisabled) ?
-                                    context.componentDisabled :
-                                    disabled
+                                context &&
+                                !isUndefined(context.componentDisabled)
+                                    ? context.componentDisabled
+                                    : disabled
                             }
                             progress={
-                                progressProps || showPercent ?
-                                    {
-                                        strokeColor: progressProps && progressProps.strokeColor,
-                                        strokeWidth: (progressProps && progressProps.strokeWidth) || 2,
-                                        format: (
-                                            showPercent ? (
-                                                (percent) => percent && `${(progressProps && progressProps.prefix) || ''}${parseFloat(percent.toFixed(1))}${(progressProps && progressProps.suffix) || '%'}`
-                                            ) :
-                                                undefined
-                                        )
-                                    } :
-                                    undefined
+                                progressProps || showPercent
+                                    ? {
+                                          strokeColor:
+                                              progressProps &&
+                                              progressProps.strokeColor,
+                                          strokeWidth:
+                                              (progressProps &&
+                                                  progressProps.strokeWidth) ||
+                                              2,
+                                          format: showPercent
+                                              ? (percent) =>
+                                                    percent &&
+                                                    `${(progressProps && progressProps.prefix) || ''}${parseFloat(percent.toFixed(1))}${(progressProps && progressProps.suffix) || '%'}`
+                                              : undefined,
+                                      }
+                                    : undefined
                             }
                             showUploadList={{
                                 showRemoveIcon,
-                                showPreviewIcon
+                                showPreviewIcon,
                             }}
                             pastable={pastable}
                             onPreview={handlePreview}
                             onRemove={
-                                confirmBeforeDelete ?
-                                    () => {
-                                        return new Promise((resolve, reject) => {
-                                            modalApi.confirm({
-                                                title: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteTitle,
-                                                okText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteOkText,
-                                                cancelText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteCancelText,
-                                                onOk: () => {
-                                                    resolve(true);
-                                                },
-
-                                            });
-                                        });
-                                    } :
-                                    undefined
+                                confirmBeforeDelete
+                                    ? () => {
+                                          return new Promise(
+                                              (resolve, reject) => {
+                                                  modalApi.confirm({
+                                                      title: locale2text
+                                                          .AntdPictureUpload[
+                                                          locale
+                                                      ]
+                                                          .confirmBeforeDeleteTitle,
+                                                      okText: locale2text
+                                                          .AntdPictureUpload[
+                                                          locale
+                                                      ]
+                                                          .confirmBeforeDeleteOkText,
+                                                      cancelText:
+                                                          locale2text
+                                                              .AntdPictureUpload[
+                                                              locale
+                                                          ]
+                                                              .confirmBeforeDeleteCancelText,
+                                                      onOk: () => {
+                                                          resolve(true);
+                                                      },
+                                                  });
+                                              }
+                                          );
+                                      }
+                                    : undefined
                             }
-                            data-dash-is-loading={useLoading()}>
+                            data-dash-is-loading={useLoading()}
+                        >
                             {uploadButton}
                         </Upload>
                     </ImgCrop>
@@ -484,7 +597,11 @@ const AntdPictureUpload = (props) => {
                         footer={null}
                         onCancel={handleCancel}
                     >
-                        <img alt="" style={{ width: '100%' }} src={previewImage} />
+                        <img
+                            alt=""
+                            style={{ width: '100%' }}
+                            src={previewImage}
+                        />
                     </Modal>
                 </div>
             </ConfigProvider>
@@ -495,68 +612,86 @@ const AntdPictureUpload = (props) => {
         <ConfigProvider locale={str2Locale.get(locale)}>
             <div
                 // 提取具有data-*或aria-*通配格式的属性
-                {...pickBy((_, k) => k.startsWith('data-') || k.startsWith('aria-'), others)}
+                {...pickBy(
+                    (_, k) => k.startsWith('data-') || k.startsWith('aria-'),
+                    others
+                )}
                 id={id}
                 className={
-                    isString(className) ?
-                        className :
-                        (className ? useCss(className) : undefined)
+                    isString(className)
+                        ? className
+                        : className
+                          ? useCss(className)
+                          : undefined
                 }
                 style={{
-                    border: "1px solid transparent",
-                    transition: "border 0.3s",
+                    border: '1px solid transparent',
+                    transition: 'border 0.3s',
                     ...pictureUploadStatus2Style.get(status),
-                    ...style
+                    ...style,
                 }}
-                key={key}>
+                key={key}
+            >
                 {messageContextHolder}
                 {modalContextHolder}
-                <Upload {...uploadProps}
+                <Upload
+                    {...uploadProps}
                     fileList={fileList}
                     listType="picture-card"
                     disabled={
-                        context && !isUndefined(context.componentDisabled) ?
-                            context.componentDisabled :
-                            disabled
+                        context && !isUndefined(context.componentDisabled)
+                            ? context.componentDisabled
+                            : disabled
                     }
                     progress={
-                        progressProps || showPercent ?
-                            {
-                                strokeColor: progressProps && progressProps.strokeColor,
-                                strokeWidth: (progressProps && progressProps.strokeWidth) || 2,
-                                format: (
-                                    showPercent ? (
-                                        (percent) => percent && `${(progressProps && progressProps.prefix) || ''}${parseFloat(percent.toFixed(1))}${(progressProps && progressProps.suffix) || '%'}`
-                                    ) :
-                                        undefined
-                                )
-                            } :
-                            undefined
+                        progressProps || showPercent
+                            ? {
+                                  strokeColor:
+                                      progressProps &&
+                                      progressProps.strokeColor,
+                                  strokeWidth:
+                                      (progressProps &&
+                                          progressProps.strokeWidth) ||
+                                      2,
+                                  format: showPercent
+                                      ? (percent) =>
+                                            percent &&
+                                            `${(progressProps && progressProps.prefix) || ''}${parseFloat(percent.toFixed(1))}${(progressProps && progressProps.suffix) || '%'}`
+                                      : undefined,
+                              }
+                            : undefined
                     }
                     showUploadList={{
                         showRemoveIcon,
-                        showPreviewIcon
+                        showPreviewIcon,
                     }}
                     pastable={pastable}
                     onPreview={handlePreview}
                     onRemove={
-                        confirmBeforeDelete ?
-                            () => {
-                                return new Promise((resolve, reject) => {
-                                    modalApi.confirm({
-                                        title: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteTitle,
-                                        okText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteOkText,
-                                        cancelText: locale2text.AntdPictureUpload[locale].confirmBeforeDeleteCancelText,
-                                        onOk: () => {
-                                            resolve(true);
-                                        },
-
-                                    });
-                                });
-                            } :
-                            undefined
+                        confirmBeforeDelete
+                            ? () => {
+                                  return new Promise((resolve, reject) => {
+                                      modalApi.confirm({
+                                          title: locale2text.AntdPictureUpload[
+                                              locale
+                                          ].confirmBeforeDeleteTitle,
+                                          okText: locale2text.AntdPictureUpload[
+                                              locale
+                                          ].confirmBeforeDeleteOkText,
+                                          cancelText:
+                                              locale2text.AntdPictureUpload[
+                                                  locale
+                                              ].confirmBeforeDeleteCancelText,
+                                          onOk: () => {
+                                              resolve(true);
+                                          },
+                                      });
+                                  });
+                              }
+                            : undefined
                     }
-                    data-dash-is-loading={useLoading()}>
+                    data-dash-is-loading={useLoading()}
+                >
                     {uploadButton}
                 </Upload>
                 <Modal
@@ -570,9 +705,9 @@ const AntdPictureUpload = (props) => {
             </div>
         </ConfigProvider>
     );
-}
+};
 
 export default AntdPictureUpload;
 
 AntdPictureUpload.defaultProps = defaultProps;
-AntdPictureUpload.propTypes = propTypes;
+AntdPictureUpload.propTypes = propTypes;