Commit ca760b7f3a7b5dac93055ed851ff1631d6f472fb
1 parent
2add803f
优化 通用组件-FeeweeUploadAttachment;
Showing
1 changed file
with
52 additions
and
41 deletions
src/components/FeeweeUploadAttachment/index.tsx
1 | 1 | /* |
2 | 2 | * @Date: 2021-01-05 14:24:23 |
3 | 3 | * @LastEditors: wangqiang@feewee.cn |
4 | - * @LastEditTime: 2022-10-10 17:54:30 | |
4 | + * @LastEditTime: 2022-10-11 09:14:38 | |
5 | 5 | */ |
6 | 6 | import React, { useEffect, useRef, useState } from "react"; |
7 | 7 | import { message, Popover, Spin, Upload } from "antd"; |
... | ... | @@ -221,7 +221,14 @@ export default function FeeweeUploadAttachment({ |
221 | 221 | : props.listType === "picture" |
222 | 222 | ? ListTypeOfPicture |
223 | 223 | : ListTypeOfText; |
224 | - return <DOM file={file} freezeItems={freezeItems} remove={remove} />; | |
224 | + return ( | |
225 | + <DOM | |
226 | + file={file} | |
227 | + freezeItems={freezeItems} | |
228 | + remove={remove} | |
229 | + disabled={props.disabled} | |
230 | + /> | |
231 | + ); | |
225 | 232 | // return ( |
226 | 233 | // <div |
227 | 234 | // id="FeeweeUploadAttachment" |
... | ... | @@ -243,15 +250,19 @@ export default function FeeweeUploadAttachment({ |
243 | 250 | ); |
244 | 251 | } |
245 | 252 | |
253 | +interface ItemRenderProps { | |
254 | + file: UploadFile; | |
255 | + freezeItems?: string[]; | |
256 | + remove: () => void; | |
257 | + disabled?: boolean; | |
258 | +} | |
259 | + | |
246 | 260 | const ListTypeOfText = ({ |
247 | 261 | file, |
248 | 262 | freezeItems = [], |
249 | 263 | remove, |
250 | -}: { | |
251 | - file: UploadFile; | |
252 | - freezeItems?: string[]; | |
253 | - remove: () => void; | |
254 | -}) => ( | |
264 | + disabled, | |
265 | +}: ItemRenderProps) => ( | |
255 | 266 | <div |
256 | 267 | id="FeeweeUploadAttachment" |
257 | 268 | className={ |
... | ... | @@ -314,14 +325,16 @@ const ListTypeOfText = ({ |
314 | 325 | <span>{file?.errMsg}</span> |
315 | 326 | ) : null} |
316 | 327 | <span className="ant-upload-list-item-card-actions"> |
317 | - <button | |
318 | - title="删除文件" | |
319 | - type="button" | |
320 | - onClick={() => remove()} | |
321 | - className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" | |
322 | - > | |
323 | - <DeleteOutlined /> | |
324 | - </button> | |
328 | + {!disabled ? ( | |
329 | + <button | |
330 | + title="删除文件" | |
331 | + type="button" | |
332 | + onClick={() => remove()} | |
333 | + className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" | |
334 | + > | |
335 | + <DeleteOutlined /> | |
336 | + </button> | |
337 | + ) : null} | |
325 | 338 | </span> |
326 | 339 | </span> |
327 | 340 | )} |
... | ... | @@ -348,11 +361,8 @@ const ListTypeOfPictureCard = ({ |
348 | 361 | file, |
349 | 362 | freezeItems = [], |
350 | 363 | remove, |
351 | -}: { | |
352 | - file: UploadFile; | |
353 | - freezeItems?: string[]; | |
354 | - remove: () => void; | |
355 | -}) => ( | |
364 | + disabled, | |
365 | +}: ItemRenderProps) => ( | |
356 | 366 | <div |
357 | 367 | id="FeeweeUploadAttachment" |
358 | 368 | className={ |
... | ... | @@ -459,14 +469,16 @@ const ListTypeOfPictureCard = ({ |
459 | 469 | > |
460 | 470 | <EyeOutlined /> |
461 | 471 | </a> |
462 | - <button | |
463 | - title="删除文件" | |
464 | - type="button" | |
465 | - onClick={() => remove()} | |
466 | - className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" | |
467 | - > | |
468 | - <DeleteOutlined /> | |
469 | - </button> | |
472 | + {!disabled ? ( | |
473 | + <button | |
474 | + title="删除文件" | |
475 | + type="button" | |
476 | + onClick={() => remove()} | |
477 | + className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" | |
478 | + > | |
479 | + <DeleteOutlined /> | |
480 | + </button> | |
481 | + ) : null} | |
470 | 482 | </span> |
471 | 483 | )} |
472 | 484 | </div> |
... | ... | @@ -478,11 +490,8 @@ const ListTypeOfPicture = ({ |
478 | 490 | file, |
479 | 491 | freezeItems = [], |
480 | 492 | remove, |
481 | -}: { | |
482 | - file: UploadFile; | |
483 | - freezeItems?: string[]; | |
484 | - remove: () => void; | |
485 | -}) => ( | |
493 | + disabled, | |
494 | +}: ItemRenderProps) => ( | |
486 | 495 | <div |
487 | 496 | id="FeeweeUploadAttachment" |
488 | 497 | className={ |
... | ... | @@ -568,14 +577,16 @@ const ListTypeOfPicture = ({ |
568 | 577 | <span>{file?.errMsg}</span> |
569 | 578 | ) : null} |
570 | 579 | <span className="ant-upload-list-item-card-actions picture"> |
571 | - <button | |
572 | - title="删除文件" | |
573 | - type="button" | |
574 | - onClick={() => remove()} | |
575 | - className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" | |
576 | - > | |
577 | - <DeleteOutlined /> | |
578 | - </button> | |
580 | + {!disabled ? ( | |
581 | + <button | |
582 | + title="删除文件" | |
583 | + type="button" | |
584 | + onClick={() => remove()} | |
585 | + className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn" | |
586 | + > | |
587 | + <DeleteOutlined /> | |
588 | + </button> | |
589 | + ) : null} | |
579 | 590 | </span> |
580 | 591 | </span> |
581 | 592 | )} | ... | ... |