Merge pull request #4180 from czwe-01/thulasizwe/fix/4098

Thulasizwe/fix/4098

Author: IvanIlyichev

shesha-reactjs/src/components/customFile/index.tsx

@@ -45,28 +45,26 @@ export const CustomFile: FC<ICustomFileProps> = (props) => {
   const { backendUrl } = useSheshaApplication();
 
   return (
-    <div className="stored-files-renderer-wrapper">
-      <StoredFilesRendererBase
-        {...props}
-        isStub={props.isStub}
-        disabled={props.disabled || !props.allowAdd}
-        isDragger={props?.isDragger}
-        fileList={fileList?.map(({ url, ...rest }) => ({ url: `${backendUrl}${url}`, ...rest }))}
-        allowUpload={false}
-        allowDelete={props.allowDelete}
-        deleteFile={deleteFile}
-        uploadFile={props.uploadFile ?? uploadFile}
-        downloadZipFile={downloadZipFile}
-        downloadZip={props.downloadZip}
-        downloadFile={downloadFile}
-        isDownloadingFileListZip={downloadZip}
-        isDownloadZipSucceeded={downloadZipSuccess}
-        allowedFileTypes={props?.allowedFileTypes}
-        maxHeight={props?.maxHeight}
-        layout={props?.filesLayout}
-        listType={props?.listType}
-      />
-    </div>
+    <StoredFilesRendererBase
+      {...props}
+      isStub={props.isStub}
+      disabled={props.disabled || !props.allowAdd}
+      isDragger={props?.isDragger}
+      fileList={fileList?.map(({ url, ...rest }) => ({ url: `${backendUrl}${url}`, ...rest }))}
+      allowUpload={false}
+      allowDelete={props.allowDelete}
+      deleteFile={deleteFile}
+      uploadFile={props.uploadFile ?? uploadFile}
+      downloadZipFile={downloadZipFile}
+      downloadZip={props.downloadZip}
+      downloadFile={downloadFile}
+      isDownloadingFileListZip={downloadZip}
+      isDownloadZipSucceeded={downloadZipSuccess}
+      allowedFileTypes={props?.allowedFileTypes}
+      maxHeight={props?.maxHeight}
+      layout={props?.filesLayout}
+      listType={props?.listType}
+    />
   );
 };
 

shesha-reactjs/src/components/storedFilesRendererBase/index.tsx

@@ -122,6 +122,7 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
       hideFileName: rest.hideFileName && listType === 'thumbnail',
       isDragger,
       isStub,
+      downloadZip,
     },
   });
 
@@ -284,71 +285,69 @@ export const StoredFilesRendererBase: FC<IStoredFilesRendererBaseProps> = ({
   };
 
   return (
-    <div className={`${styles.shaStoredFilesRenderer} ${layout === 'horizontal' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererHorizontal
-      : layout === 'vertical' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererVertical
-        : layout === 'grid' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererGrid : ''}`}
-    >
-      {isStub
-        ? (isDragger
-          ? <Dragger disabled><DraggerStub styles={styles} /></Dragger>
-          : (
-            <div
-              className={listType === 'thumbnail' ? 'ant-upload-list-item-thumbnail ant-upload-list-item thumbnail-stub' : ''}
-            >
-              {renderUploadContent()}
-              {listType !== 'text' && !rest.hideFileName && (
-                <span className="ant-upload-list-item-name ant-upload-list-item-name-stub">
-                  file name
-                </span>
-              )}
-            </div>
-          ))
-        : (props.disabled && fileList.length === 0
-          ? (
-            <div className={listType === 'thumbnail' ? styles.thumbnailReadOnly : ''}>
-              {renderUploadContent()}
-            </div>
-          )
-          : props.disabled
-            ? <Upload {...props} style={model?.allStyles?.fullStyle} listType={listTypeAndLayout} />
-            : isDragger
-              ? (
-                <Dragger {...props}>
-                  <DraggerStub styles={styles} />
-                </Dragger>
-              )
-              : <Upload {...props} listType={listTypeAndLayout}>{renderUploadContent()}</Upload>)}
-      {previewImage && (
-        <Image
-          wrapperStyle={{ display: 'none' }}
-          preview={{
-            visible: previewOpen,
-            onVisibleChange: (visible) => setPreviewOpen(visible),
-            afterOpenChange: (visible) => !visible && setPreviewImage(null),
-            toolbarRender: (original) => {
-              return <div style={{ display: 'flex', flexDirection: 'row-reverse' }}><DownloadOutlined className={styles.antPreviewDownloadIcon} onClick={() => downloadFile({ fileId: previewImage.uid, fileName: previewImage.name })} />{original}</div>;
-            },
-          }}
-          src={previewImage.url}
-        />
-      )}
-
-      {fetchFilesError && (
-        <Alert message="Error" description="Sorry, an error occurred while trying to fetch file list." type="error" />
-      )}
-
-      {downloadZipFileError && (
-        <Alert message="Error" description="Sorry, an error occurred while trying to download zip file." type="error" />
-      )}
-
-      {downloadZip && hasFiles && !!downloadZipFile && (
-        <div className={styles.storedFilesRendererBtnContainer}>
-          <Button size="small" type="link" icon onClick={() => downloadZipFile()} loading={isDownloadingFileListZip}>
-            {!isDownloadingFileListZip && <FileZipOutlined />} Download Zip
-          </Button>
-        </div>
-      )}
-
+    <div className={styles.storedFilesRendererWrapper}>
+      <div className={`${styles.shaStoredFilesRenderer} ${layout === 'horizontal' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererHorizontal
+        : layout === 'vertical' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererVertical
+          : layout === 'grid' && listTypeAndLayout !== 'text' ? styles.shaStoredFilesRendererGrid : ''}`}
+      >
+        {isStub
+          ? (isDragger
+            ? <Dragger disabled><DraggerStub styles={styles} /></Dragger>
+            : (
+              <div
+                className={listType === 'thumbnail' ? 'ant-upload-list-item-thumbnail ant-upload-list-item thumbnail-stub' : ''}
+              >
+                {renderUploadContent()}
+                {listType !== 'text' && !rest.hideFileName && (
+                  <span className="ant-upload-list-item-name ant-upload-list-item-name-stub">
+                    file name
+                  </span>
+                )}
+              </div>
+            ))
+          : (props.disabled && fileList.length === 0
+            ? null
+            : props.disabled
+              ? <Upload {...props} style={model?.allStyles?.fullStyle} listType={listTypeAndLayout} />
+              : isDragger
+                ? (
+                  <Dragger {...props}>
+                    <DraggerStub styles={styles} />
+                  </Dragger>
+                )
+                : <Upload {...props} listType={listTypeAndLayout}>{renderUploadContent()}</Upload>)}
+        {previewImage && (
+          <Image
+            wrapperStyle={{ display: 'none' }}
+            preview={{
+              visible: previewOpen,
+              onVisibleChange: (visible) => setPreviewOpen(visible),
+              afterOpenChange: (visible) => !visible && setPreviewImage(null),
+              toolbarRender: (original) => {
+                return <div style={{ display: 'flex', flexDirection: 'row-reverse' }}><DownloadOutlined className={styles.antPreviewDownloadIcon} onClick={() => downloadFile({ fileId: previewImage.uid, fileName: previewImage.name })} />{original}</div>;
+              },
+            }}
+            src={previewImage.url}
+          />
+        )}
+
+        {fetchFilesError && (
+          <Alert message="Error" description="Sorry, an error occurred while trying to fetch file list." type="error" />
+        )}
+
+        {downloadZipFileError && (
+          <Alert message="Error" description="Sorry, an error occurred while trying to download zip file." type="error" />
+        )}
+
+        {downloadZip && hasFiles && !!downloadZipFile && (
+          <div className={styles.storedFilesRendererBtnContainer}>
+            <Button size="small" type="link" icon onClick={() => downloadZipFile()} loading={isDownloadingFileListZip}>
+              {!isDownloadingFileListZip && <FileZipOutlined />} Download Zip
+            </Button>
+          </div>
+        )}
+
+      </div>
     </div>
   );
 };