优化通用组件-FeeweeUploadAttachment；

王强
1 parent 2add803f
Showing 1 changed file with 52 additions and 41 deletions
src/components/FeeweeUploadAttachment/index.tsx
 /*
  * @Date: 2021-01-05 14:24:23
  * @LastEditors: wangqiang@feewee.cn
- * @LastEditTime: 2022-10-10 17:54:30
+ * @LastEditTime: 2022-10-11 09:14:38
  */
 import React, { useEffect, useRef, useState } from "react";
 import { message, Popover, Spin, Upload } from "antd";
@@ -221,7 +221,14 @@ export default function FeeweeUploadAttachment({
               : props.listType === "picture"
               ? ListTypeOfPicture
               : ListTypeOfText;
-          return <DOM file={file} freezeItems={freezeItems} remove={remove} />;
+          return (
+            <DOM
+              file={file}
+              freezeItems={freezeItems}
+              remove={remove}
+              disabled={props.disabled}
+            />
+          );
           // return (
           //   <div
           //     id="FeeweeUploadAttachment"
@@ -243,15 +250,19 @@ export default function FeeweeUploadAttachment({
   );
 }
+interface ItemRenderProps {
+  file: UploadFile;
+  freezeItems?: string[];
+  remove: () => void;
+  disabled?: boolean;
+}
+
 const ListTypeOfText = ({
   file,
   freezeItems = [],
   remove,
-}: {
-  file: UploadFile;
-  freezeItems?: string[];
-  remove: () => void;
-}) => (
+  disabled,
+}: ItemRenderProps) => (
   <div
     id="FeeweeUploadAttachment"
     className={
@@ -314,14 +325,16 @@ const ListTypeOfText = ({
               <span>{file?.errMsg}</span>
             ) : null}
             <span className="ant-upload-list-item-card-actions">
-              <button
-                title="删除文件"
-                type="button"
-                onClick={() => remove()}
-                className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
-              >
-                <DeleteOutlined />
-              </button>
+              {!disabled ? (
+                <button
+                  title="删除文件"
+                  type="button"
+                  onClick={() => remove()}
+                  className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
+                >
+                  <DeleteOutlined />
+                </button>
+              ) : null}
             </span>
           </span>
         )}
@@ -348,11 +361,8 @@ const ListTypeOfPictureCard = ({
   file,
   freezeItems = [],
   remove,
-}: {
-  file: UploadFile;
-  freezeItems?: string[];
-  remove: () => void;
-}) => (
+  disabled,
+}: ItemRenderProps) => (
   <div
     id="FeeweeUploadAttachment"
     className={
@@ -459,14 +469,16 @@ const ListTypeOfPictureCard = ({
             >
               <EyeOutlined />
             </a>
-            <button
-              title="删除文件"
-              type="button"
-              onClick={() => remove()}
-              className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
-            >
-              <DeleteOutlined />
-            </button>
+            {!disabled ? (
+              <button
+                title="删除文件"
+                type="button"
+                onClick={() => remove()}
+                className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
+              >
+                <DeleteOutlined />
+              </button>
+            ) : null}
           </span>
         )}
       </div>
@@ -478,11 +490,8 @@ const ListTypeOfPicture = ({
   file,
   freezeItems = [],
   remove,
-}: {
-  file: UploadFile;
-  freezeItems?: string[];
-  remove: () => void;
-}) => (
+  disabled,
+}: ItemRenderProps) => (
   <div
     id="FeeweeUploadAttachment"
     className={
@@ -568,14 +577,16 @@ const ListTypeOfPicture = ({
               <span>{file?.errMsg}</span>
             ) : null}
             <span className="ant-upload-list-item-card-actions picture">
-              <button
-                title="删除文件"
-                type="button"
-                onClick={() => remove()}
-                className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
-              >
-                <DeleteOutlined />
-              </button>
+              {!disabled ? (
+                <button
+                  title="删除文件"
+                  type="button"
+                  onClick={() => remove()}
+                  className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
+                >
+                  <DeleteOutlined />
+                </button>
+              ) : null}
             </span>
           </span>
         )}