fix(ObjectPage): render image in ObjectPage as img tag when a string …

…is passed in (#191) [ci skip]
SAP · Oct 18, 2019 · b2f6f1a · b2f6f1a
1 parent 9446155
commit b2f6f1a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx b/packages/main/src/components/ObjectPage/CollapsedAvatar.tsx
@@ -1,8 +1,6 @@
 import React, { ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createUseStyles } from 'react-jss';
-import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
 import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
-import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 
 const styles = {
@@ -16,6 +14,16 @@ const styles = {
   visible: {
     transition: 'opacity 0.5s',
     opacity: 1
+  },
+  imageContainer: {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    maxWidth: '3rem',
+    maxHeight: '3rem'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
   }
 };
 
@@ -39,11 +47,12 @@ export const CollapsedAvatar = (props: CollapsedAvatarPropTypes) => {
 
     if (typeof image === 'string') {
       return (
-        <Avatar
-          size={AvatarSize.S}
-          shape={imageShapeCircle ? AvatarShape.Circle : AvatarShape.Square}
-          image={image as string}
-        />
+        <span
+          className={classes.imageContainer}
+          style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
+        >
+          <img className={classes.image} src={image} alt="Company Logo" />
+        </span>
       );
     } else {
       // @ts-ignore

diff --git a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
@@ -205,6 +205,10 @@ const styles = ({ parameters }: JSSTheme) => ({
     display: 'inline-block',
     marginRight: '2rem',
     marginBottom: '1rem'
+  },
+  image: {
+    width: '100%',
+    height: '100%'
   }
 });
 

diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
@@ -234,12 +234,12 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
     if (image) {
       if (typeof image === 'string') {
         avatar = (
-          <Avatar
+          <span
             className={classes.headerImage}
-            image={image}
-            size={AvatarSize.L}
-            shape={imageShapeCircle ? AvatarShape.Circle : AvatarShape.Square}
-          />
+            style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
+          >
+            <img src={image} className={classes.image} alt="Company Logo" />
+          </span>
         );
       } else {
         // @ts-ignore