Merge pull request #11609 from BeMxself/fix-inputfile-inputimage-stat…

…ic-mode-file-selector-issue fix(InputFile, InputImage): 修复静态模式下文件选择器仍然可操作的问题
baidu · Feb 17, 2025 · 884a816 · 884a816
2 parents 1265861 + eae40aa
commit 884a816
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 21 deletions.
diff --git a/packages/amis/src/renderers/Form/InputFile.tsx b/packages/amis/src/renderers/Form/InputFile.tsx
@@ -657,9 +657,9 @@ export default class FileControl extends React.Component<FileProps, FileState> {
   }
 
   handleSelect() {
-    const {disabled, multiple, maxLength} = this.props;
-    !disabled &&
-      !(multiple && maxLength && this.state.files.length >= maxLength) &&
+    const {disabled, multiple, maxLength, static: isStatic} = this.props;
+    !disabled && !isStatic;
+    !(multiple && maxLength && this.state.files.length >= maxLength) &&
       this.dropzone.current &&
       this.dropzone.current.open();
   }
@@ -1370,7 +1370,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       documentLink,
       env,
       container,
-      testIdBuilder
+      testIdBuilder,
+      static: isStatic
     } = this.props;
     let {files, uploading, error} = this.state;
     const nameField = this.props.nameField || 'name';
@@ -1404,7 +1405,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
         ) : null}
 
         <DropZone
-          disabled={disabled}
+          disabled={disabled || isStatic}
           key="drop-zone"
           ref={this.dropzone}
           onDrop={this.handleDrop}
@@ -1420,13 +1421,14 @@ export default class FileControl extends React.Component<FileProps, FileState> {
               className={cx('FileControl-dropzone', {
                 'disabled':
                   disabled ||
+                  isStatic ||
                   (multiple && !!maxLength && files.length >= maxLength),
                 'is-empty': !files.length,
                 'is-active': isDragActive
               })}
             >
               <input
-                disabled={disabled}
+                disabled={disabled || isStatic}
                 {...getInputProps()}
                 capture={capture as any}
                 {...testIdBuilder?.getChild('input').getTestId()}
@@ -1464,7 +1466,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                     </div>
                   ) : null}
                 </div>
-              ) : (
+              ) : !isStatic ? (
                 <>
                   <Button
                     level="enhance"
@@ -1491,7 +1493,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                     </span>
                   </Button>
                 </>
-              )}
+              ) : null}
             </div>
           )}
         </DropZone>
@@ -1566,7 +1568,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
                         </span>
                       )}
 
-                      {!disabled ? (
+                      {!disabled && !isStatic ? (
                         <a
                           data-tooltip={__('Select.clear')}
                           data-position="left"
@@ -1606,7 +1608,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
           </div>
         ) : null}
 
-        {!autoUpload && !hideUploadButton && files.length ? (
+        {!isStatic && !autoUpload && !hideUploadButton && files.length ? (
           <Button
             level="default"
             testIdBuilder={testIdBuilder?.getChild('upload')}

diff --git a/packages/amis/src/renderers/Form/InputImage.tsx b/packages/amis/src/renderers/Form/InputImage.tsx
@@ -1638,7 +1638,8 @@ export default class ImageControl extends React.Component<
       translate: __,
       draggable,
       draggableTip,
-      env
+      env,
+      static: isStatic
     } = this.props;
 
     const {
@@ -1658,7 +1659,12 @@ export default class ImageControl extends React.Component<
     const hasPending = files.some(file => file.state == 'pending');
 
     const enableDraggable =
-      !!multiple && draggable && !disabled && !hasPending && files.length > 1;
+      !!multiple &&
+      draggable &&
+      !disabled &&
+      !isStatic &&
+      !hasPending &&
+      files.length > 1;
 
     return (
       <div
@@ -1722,7 +1728,7 @@ export default class ImageControl extends React.Component<
             onFileDialogCancel={this.handleFileCancel}
             accept={accept}
             multiple={dropMultiple}
-            disabled={disabled}
+            disabled={disabled || isStatic}
           >
             {({
               getRootProps,
@@ -1736,7 +1742,7 @@ export default class ImageControl extends React.Component<
                   onClick: preventEvent,
                   onPaste: this.handlePaste,
                   className: cx('ImageControl-dropzone', {
-                    'is-disabled': disabled,
+                    'is-disabled': disabled || isStatic,
                     'is-empty': !files.length,
                     'is-active': isDragActive
                   })
@@ -1820,7 +1826,7 @@ export default class ImageControl extends React.Component<
                                         <Icon icon="upload" className="icon" />
                                       </a>
 
-                                      {!disabled ? (
+                                      {!disabled && !isStatic ? (
                                         <a
                                           data-tooltip={__('Select.clear')}
                                           data-position="bottom"
@@ -1928,7 +1934,8 @@ export default class ImageControl extends React.Component<
 
                                       {!!crop &&
                                       reCropable !== false &&
-                                      !disabled ? (
+                                      !disabled &&
+                                      !isStatic ? (
                                         <a
                                           data-tooltip={__('Image.crop')}
                                           data-position="bottom"
@@ -1944,7 +1951,7 @@ export default class ImageControl extends React.Component<
                                         </a>
                                       ) : null}
 
-                                      {!disabled ? (
+                                      {!disabled && !isStatic ? (
                                         <a
                                           data-tooltip={__('Select.upload')}
                                           data-position="bottom"
@@ -1959,7 +1966,7 @@ export default class ImageControl extends React.Component<
                                         </a>
                                       ) : null}
 
-                                      {!disabled ? (
+                                      {!disabled && !isStatic ? (
                                         <a
                                           data-tooltip={__('Select.clear')}
                                           data-position="bottom"
@@ -1998,8 +2005,9 @@ export default class ImageControl extends React.Component<
                       </div>
                     ) : null}
 
-                    {(multiple && (!maxLength || files.length < maxLength)) ||
-                    (!multiple && !files.length) ? (
+                    {!isStatic &&
+                    ((multiple && (!maxLength || files.length < maxLength)) ||
+                      (!multiple && !files.length)) ? (
                       <TooltipWrapper
                         placement="top"
                         trigger="hover"
@@ -2071,7 +2079,10 @@ export default class ImageControl extends React.Component<
                       </TooltipWrapper>
                     ) : null}
 
-                    {!autoUpload && !hideUploadButton && files.length ? (
+                    {!isStatic &&
+                    !autoUpload &&
+                    !hideUploadButton &&
+                    files.length ? (
                       <Button
                         level="default"
                         className={cx('ImageControl-uploadBtn')}