feat: image comp supports string dimensions

ts/components/conversation/Image.tsx

@@ -1,19 +1,19 @@
-import React, { useCallback } from 'react';
 import classNames from 'classnames';
+import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { Spinner } from '../basic/Spinner';
-import { AttachmentType, AttachmentTypeWithPath } from '../../types/Attachment';
-import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { useDisableDrag } from '../../hooks/useDisableDrag';
+import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
+import { AttachmentType, AttachmentTypeWithPath } from '../../types/Attachment';
+import { Spinner } from '../basic/Spinner';
 
 type Props = {
   alt: string;
   attachment: AttachmentTypeWithPath | AttachmentType;
   url: string | undefined; // url is undefined if the message is not visible yet
 
-  height?: number;
+  height?: number | string;
-  width?: number;
+  width?: number | string;
 
   overlayText?: string;
 
@@ -46,7 +46,7 @@ export const Image = (props: Props) => {
     attachment,
     closeButton,
     darkOverlay,
-    height,
+    height: _height,
     onClick,
     onClickClose,
     onError,
@@ -56,7 +56,7 @@ export const Image = (props: Props) => {
     forceSquare,
     attachmentIndex,
     url,
-    width,
+    width: _width,
   } = props;
 
   const onErrorUrlFilterering = useCallback(() => {
@@ -78,6 +78,9 @@ export const Image = (props: Props) => {
   // data will be url if loading is finished and '' if not
   const srcData = !loading ? urlToLoad : '';
 
+  const width = typeof _width === 'number' ? `${_width}px` : _width;
+  const height = typeof _height === 'number' ? `${_height}px` : _height;
+
   return (
     <div
       role={role}
@@ -93,10 +96,10 @@ export const Image = (props: Props) => {
         softCorners ? 'module-image--soft-corners' : null
       )}
       style={{
-        maxHeight: `${height}px`,
+        maxHeight: height,
-        maxWidth: `${width}px`,
+        maxWidth: width,
-        minHeight: `${height}px`,
+        minHeight: height,
-        minWidth: `${width}px`,
+        minWidth: width,
       }}
       data-attachmentindex={attachmentIndex}
     >
@@ -104,11 +107,11 @@ export const Image = (props: Props) => {
         <div
           className="module-image__loading-placeholder"
           style={{
-            maxHeight: `${height}px`,
+            maxHeight: height,
-            maxWidth: `${width}px`,
+            maxWidth: width,
-            width: `${width}px`,
+            width,
-            height: `${height}px`,
+            height,
-            lineHeight: `${height}px`,
+            lineHeight: height,
             textAlign: 'center',
           }}
         >
@@ -123,12 +126,12 @@ export const Image = (props: Props) => {
           )}
           alt={alt}
           style={{
-            maxHeight: `${height}px`,
+            maxHeight: height,
-            maxWidth: `${width}px`,
+            maxWidth: width,
-            minHeight: `${height}px`,
+            minHeight: height,
-            minWidth: `${width}px`,
+            minWidth: width,
-            width: forceSquare ? `${width}px` : '',
+            width: forceSquare ? width : '',
-            height: forceSquare ? `${height}px` : '',
+            height: forceSquare ? height : '',
           }}
           src={srcData}
           onDragStart={disableDrag}
@@ -165,7 +168,7 @@ export const Image = (props: Props) => {
         </div>
       ) : null}
       {overlayText ? (
-        <div className="module-image__text-container" style={{ lineHeight: `${height}px` }}>
+        <div className="module-image__text-container" style={{ lineHeight: height }}>
           {overlayText}
         </div>
       ) : null}