chore: changing the download to be on the label

Author: Tshepo1103-lab

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

@@ -70,6 +70,7 @@ export const FileUpload: FC<IFileUploadProps> = ({
     model: {
       layout: listType === 'thumbnail' && !isDragger,
       isDragger,
+      hideFileName,
     },
   };
   const { styles } = useStyles(props);
@@ -150,11 +151,17 @@ export const FileUpload: FC<IFileUploadProps> = ({
             <DeleteOutlined title="Remove" />
           </a>
         )}
-        {
+        {isImageType(fileInfo?.type) ? (
           <a onClick={onPreview} style={{ color: color }}>
             <EyeOutlined title="Preview" />
           </a>
-        }
+        ) : (
+          hideFileName && (
+            <a onClick={() => downloadFile({ fileId: fileInfo?.id, fileName: fileInfo?.name })} style={{ color: color }}>
+              <DownloadOutlined title="Download" />
+            </a>
+          )
+        )}
       </Space>
     );
   };
@@ -163,7 +170,7 @@ export const FileUpload: FC<IFileUploadProps> = ({
     const { type, name } = fileInfo;
     if (isImageType(type)) {
       if (listType === 'thumbnail' && !isDragger) {
-        return <Image src={imageUrl} alt={name} preview={false} className={styles.thumbnailControls}/>;
+        return <Image src={imageUrl} alt={name} preview={false} className={styles.thumbnailControls} />;
       }
     }
 
@@ -175,7 +182,9 @@ export const FileUpload: FC<IFileUploadProps> = ({
       fileInfo && (
         <div className={styles.styledFileControls}>
           {iconRender(fileInfo)}
-          <div className={styles.overlayThumbnailControls} style={{fontSize: '15px'}}>{fileControls('#fff')}</div>
+          <div className={styles.overlayThumbnailControls} style={{ fontSize: '15px' }}>
+            {fileControls('#fff')}
+          </div>
         </div>
       )
     );
@@ -191,12 +200,14 @@ export const FileUpload: FC<IFileUploadProps> = ({
         <a title={file.name}>
           <Space>
             {isUploading ? (
-              <span><SyncOutlined spin /></span>
+              <span>
+                <SyncOutlined spin />
+              </span>
             ) : (
-              <>
-                {(listType === 'text' || !hideFileName) && `${file.name} (${filesize(file.size)})`}
+              <div className="thumbnail-item-name">
+                {(listType === 'text' || !hideFileName) && <a onClick={() => downloadFile({ fileId: file.id, fileName: file.name })}>{`${file.name} (${filesize(file.size)})`}</a>}
                 {showTextControls && fileControls(theme.application.primaryColor)}
-              </>
+              </div>
             )}
           </Space>
         </a>
@@ -239,7 +250,6 @@ export const FileUpload: FC<IFileUploadProps> = ({
     </Button>
   );
 
-  
   const renderStub = () => {
     if (isDragger) {
       return (
@@ -249,11 +259,22 @@ export const FileUpload: FC<IFileUploadProps> = ({
       );
     }
 
-    return <div className={listType === 'thumbnail' ? 'ant-upload-list-item-name ant-upload-list-item-name-stub thumbnail-stub' : ''}>{uploadButton}</div>;
+    return (
+      <>
+        <div
+          className={
+            listType === 'thumbnail' ? 'ant-upload-list-item-name ant-upload-list-item-name-stub thumbnail-stub' : ''
+          }
+        >
+          {uploadButton}
+        </div>
+        {listType === 'thumbnail' ? <div className="thumbnail-item-name">File name</div> : null}
+      </>
+    );
   };
 
   const renderUploader = () => {
-    const antListType = listType === 'thumbnail' ? 'picture-card' : 'text';    
+    const antListType = listType === 'thumbnail' ? 'picture-card' : 'text';
     if (isDragger && allowUpload) {
       return (
         <Dragger {...fileProps}>

shesha-reactjs/src/components/fileUpload/styles/styles.ts

@@ -42,7 +42,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
 
   } = style || {};
 
-  const { layout, isDragger } = model;
+  const { layout, isDragger, hideFileName } = model;
 
   const antUploadDragIcon = `${prefixCls}-upload-drag-icon`;
   const antUploadText = `${prefixCls}-upload-text`;
@@ -67,7 +67,6 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
     font-weight: ${fontWeight};
     text-align: ${textAlign};
   `;
-
   const shaStoredFilesRenderer = cx(
     'sha-stored-files-renderer',
     css`
@@ -103,7 +102,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
       }
 
       .ant-upload-list-picture-card {
-        height: calc(var(--thumbnail-height) + ${fontSize} * 2 + 32px) !important;
+        height: ${hideFileName ? 'var(--thumbnail-height) )' : `calc(var(--thumbnail-height) + ${fontSize} * 2 + 32px)`} !important;
         padding-bottom: 1rem;
       }
 
@@ -138,12 +137,10 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
       .ant-upload-list-item-thumbnail {
         border-radius: ${borderRadius} !important;
         padding: 0 !important;
-        background: ${background ?? backgroundImage ?? backgroundColor} !important;
         ${commonBorderStyles}
       }
 
       .ant-upload-list-item-name {
-        display: block;
         ${commonTextStyles}
         padding: 0 8px !important;
         width: ${(layout && width) ?? '54px'} !important;
@@ -153,6 +150,10 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
         max-width: 100%;
       }
 
+      .thumbnail-item-name{
+        ${commonTextStyles}
+      }
+
       .thumbnail-stub {
         display: flex;
         flex-direction: column;
@@ -201,6 +202,7 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
       }
 
       .ant-upload-list-item-container {
+        background: ${backgroundImage ?? (backgroundColor || '#fff')} !important;
         width: var(--thumbnail-width) !important;
         height: var(--thumbnail-height) !important;
         border-radius: ${borderRadius} !important;
@@ -258,17 +260,19 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
       padding: 4px;
 
       .ant-space {
-        display: grid !important;
-        grid-template-columns: repeat(2, minmax(24px, auto)) !important;
+        display: flex !important;
+        flex-wrap: wrap !important;
+        justify-content: center !important;
+        align-items: center !important;
         gap: 4px !important;
-        place-items: center !important;
-        place-content: center !important;
+        width: 100% !important;
       }
 
       .ant-space-item {
         display: flex;
         justify-content: center;
         align-items: center;
+        flex: 0 0 auto;
       }
 
       a {

shesha-reactjs/src/designer-components/link/index.tsx

@@ -114,7 +114,7 @@ const LinkComponent: IToolboxComponent<ILinkProps> = {
             return containerHolder();
           }
           return (
-            <a href={href} target={target} className="sha-link" style={getStyle(style, data)}>
+            <a href={href} target={target} className="sha-link">
               {containerHolder()}
             </a>
           );