diff --git a/.changeset/gorgeous-pants-hunt.md b/.changeset/gorgeous-pants-hunt.md new file mode 100644 index 000000000..6d68590be --- /dev/null +++ b/.changeset/gorgeous-pants-hunt.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +fix(upload): 修复 disabled 不生效问题 diff --git a/.changeset/soft-guests-approve.md b/.changeset/soft-guests-approve.md new file mode 100644 index 000000000..b478b8780 --- /dev/null +++ b/.changeset/soft-guests-approve.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/upload": patch +--- + +fix: 修复 disabled 不生效问题 diff --git a/packages/ui/upload/src/AvatarUpload.tsx b/packages/ui/upload/src/AvatarUpload.tsx index 885ede6c5..f2d2329a3 100644 --- a/packages/ui/upload/src/AvatarUpload.tsx +++ b/packages/ui/upload/src/AvatarUpload.tsx @@ -53,7 +53,12 @@ export const AvatarUpload = forwardRef( const uploadSuccessText = i18n.get('upload.uploadSuccess') - const cls = cx(prefixCls, `${prefixCls}--avatar`, className) + const cls = cx( + prefixCls, + `${prefixCls}--avatar`, + disabled && `${prefixCls}--disabled`, + className + ) const [_fileList, uploadFiles, deleteFile] = useUpload({ fileList, @@ -69,6 +74,7 @@ export const AvatarUpload = forwardRef( beforeUpload, customUpload, method, + disabled, }) const { aspectRatio = 0, dragMode = 'move' } = avatarOptions @@ -210,42 +216,44 @@ export const AvatarUpload = forwardRef( }} > - {file.uploadState !== 'error' ? ( -
-
- - { - previewImage(file.url || '') - }} - /> + {!disabled ? ( + file.uploadState !== 'error' ? ( +
+
+ + { + previewImage(file.url || '') + }} + /> + + + { + e.stopPropagation() + deleteFile(file, 0) + }} + /> + +
+
+ ) : ( +
+ + - - { - e.stopPropagation() - deleteFile(file, 0) - }} - /> + { + e.stopPropagation() + deleteFile(file, 0) + }} + > +
-
- ) : ( -
- - - - { - e.stopPropagation() - deleteFile(file, 0) - }} - > - - -
- )} + ) + ) : null} ))} {!file && ( @@ -258,7 +266,7 @@ export const AvatarUpload = forwardRef( > {children === undefined ? (
  • ( customUpload, method, accept, + disabled, }) const nonInteractive = disabled || (!!maxCount && _fileList.length >= maxCount) @@ -150,6 +151,7 @@ export const DragUpload = forwardRef( onDelete={deleteFile} onDownload={onDownload} prefixCls={prefixCls} + disabled={disabled} /> )}
  • diff --git a/packages/ui/upload/src/FileList.tsx b/packages/ui/upload/src/FileList.tsx index ffcf49c78..5229b410c 100644 --- a/packages/ui/upload/src/FileList.tsx +++ b/packages/ui/upload/src/FileList.tsx @@ -33,7 +33,10 @@ const fileTypeMap = { } as Record export const FileList = forwardRef( - ({ prefixCls = UPLOAD_PREFIX, onDownload, onDelete, fileList, showPic, actionRender }, ref) => { + ( + { prefixCls = UPLOAD_PREFIX, onDownload, onDelete, fileList, showPic, actionRender, disabled }, + ref + ) => { const handleItemKeydown = useCallback( (e: React.KeyboardEvent, file: UploadFileItem, index: number) => { // ENTER @@ -55,17 +58,19 @@ export const FileList = forwardRef( // 如果 actionRender 返回 `true`,则使用默认 title const action = actionRender ? actionRender({ file, index }) : true - return action === true ? ( - - {file.uploadState === 'loading' ? ( - onDelete(file, index)} /> - ) : ( - onDelete(file, index)} /> - )} - - ) : ( - action - ) + return !disabled ? ( + action === true ? ( + + {file.uploadState === 'loading' ? ( + onDelete(file, index)} /> + ) : ( + onDelete(file, index)} /> + )} + + ) : ( + action + ) + ) : null } return ( diff --git a/packages/ui/upload/src/NormalUpload.tsx b/packages/ui/upload/src/NormalUpload.tsx index 26a0df68f..1a611eb2f 100644 --- a/packages/ui/upload/src/NormalUpload.tsx +++ b/packages/ui/upload/src/NormalUpload.tsx @@ -66,6 +66,7 @@ export const NormalUpload = forwardRef( beforeUpload, customUpload, method, + disabled, }) return ( @@ -98,6 +99,7 @@ export const NormalUpload = forwardRef( onDownload={onDownload} prefixCls={prefixCls} actionRender={actionRender} + disabled={disabled} /> )} diff --git a/packages/ui/upload/src/PictureListUpload.tsx b/packages/ui/upload/src/PictureListUpload.tsx index 13ce0768f..41ab06fe5 100644 --- a/packages/ui/upload/src/PictureListUpload.tsx +++ b/packages/ui/upload/src/PictureListUpload.tsx @@ -94,6 +94,7 @@ export const PictureListUpload = forwardRef( onDownload={onDownload} showPic prefixCls={prefixCls} + disabled={disabled} /> )} diff --git a/packages/ui/upload/src/PictureUpload.tsx b/packages/ui/upload/src/PictureUpload.tsx index 55612e9df..d1c520a0e 100644 --- a/packages/ui/upload/src/PictureUpload.tsx +++ b/packages/ui/upload/src/PictureUpload.tsx @@ -65,7 +65,12 @@ export const PictureUpload = forwardRef( const uploadSuccessText = i18n.get('upload.uploadSuccess') - const cls = cx(prefixCls, `${prefixCls}--photo`, className) + const cls = cx( + prefixCls, + `${prefixCls}--photo`, + disabled && `${prefixCls}--disabled`, + className + ) const [_fileList, uploadFiles, deleteFile] = useUpload({ fileList, @@ -81,6 +86,7 @@ export const PictureUpload = forwardRef( beforeUpload, customUpload, method, + disabled, }) const uploadRef = useRef(null) @@ -188,45 +194,48 @@ export const PictureUpload = forwardRef( className={cx(`${prefixCls}__item`, `${prefixCls}__item--${photoSize}`, { [`${prefixCls}__item--error`]: file.uploadState === 'error', })} + onClick={() => previewImage(index)} onKeyDown={(e) => handleItemKeydown(e, file, index)} > - {file.uploadState !== 'error' ? ( -
    -
    - - { - previewImage(index) - }} - /> + {!disabled ? ( + file.uploadState !== 'error' ? ( +
    +
    + + { + previewImage(index) + }} + /> + + + { + e.stopPropagation() + deleteFile(file, index) + }} + /> + +
    +
    + ) : ( +
    + + - - { - e.stopPropagation() - deleteFile(file, index) - }} - /> + { + e.stopPropagation() + deleteFile(file, index) + }} + > +
    -
    - ) : ( -
    - - - - { - e.stopPropagation() - deleteFile(file, index) - }} - > - - -
    - )} + ) + ) : null} ) } @@ -250,9 +259,7 @@ export const PictureUpload = forwardRef( onKeyDown={handleUploadKeydown} ref={uploadRef} > - + ) : ( children diff --git a/packages/ui/upload/src/hooks/use-upload.ts b/packages/ui/upload/src/hooks/use-upload.ts index fcc28ce04..3b78bbe57 100644 --- a/packages/ui/upload/src/hooks/use-upload.ts +++ b/packages/ui/upload/src/hooks/use-upload.ts @@ -22,6 +22,7 @@ const useUpload = ({ maxCount, method = 'POST', accept, + disabled, }: UploadProps): [ UploadFileItem[], (files: HTMLInputElement['files']) => Promise, @@ -43,6 +44,9 @@ const useUpload = ({ const deleteFile = useCallback( (file: UploadFileItem, index) => { + if (disabled) { + return + } if (file.abort) { file.abort() } diff --git a/packages/ui/upload/src/styles/upload.scss b/packages/ui/upload/src/styles/upload.scss index 643cebb3f..b34287ee7 100644 --- a/packages/ui/upload/src/styles/upload.scss +++ b/packages/ui/upload/src/styles/upload.scss @@ -3,10 +3,6 @@ $prefix: '#{$component-prefix}-upload' !default; .#{$prefix} { - &--disabled { - cursor: not-allowed; - } - &__tips { font-size: use-text-size('sm'); color: use-color('gray', 500); @@ -213,7 +209,7 @@ $prefix: '#{$component-prefix}-upload' !default; .drag-upload__title { font-size: use-text-size('normal'); - [class^=hi-v4-icon] { + [class^='hi-v4-icon'] { font-size: use-text-size('lg'); margin-right: use-spacing(4); } @@ -242,11 +238,12 @@ $prefix: '#{$component-prefix}-upload' !default; &--avatar, &--photo { &.#{$prefix}--disabled { - .photo-upload { + .#{$prefix}__item--upload { cursor: not-allowed; &, - &:hover { + &:hover, + &:focus { border-color: use-color('gray', 300); } } diff --git a/packages/ui/upload/src/types.ts b/packages/ui/upload/src/types.ts index 47ac536d2..d73b1c3cc 100644 --- a/packages/ui/upload/src/types.ts +++ b/packages/ui/upload/src/types.ts @@ -33,6 +33,7 @@ export interface UploadFileList { onDownload: UploadProps['onDownload'] showPic?: boolean actionRender?: (props: ActionRenderProps) => React.ReactNode + disabled?: boolean } export interface UploadRequestOption {