fix(#121): fixed display bug for detail view image

gasserandreas · May 21, 2019 · e525860 · e525860
1 parent 95768c1
commit e525860
Show file tree

Hide file tree

Showing 5 changed files with 1,505 additions and 3 deletions.
diff --git a/src/images/detail/Image.jsx b/src/images/detail/Image.jsx
@@ -168,7 +168,14 @@ const ImageContainer = ({ image: { meta, path }, selectedFace, selectedLabel })
             ))}
           </span>
         )}
-        <StyledAsyncImage src={getImageSrc(path)} fit="contain" />
+        <StyledAsyncImage
+          src={getImageSrc(path)}
+          fit="contain"
+          wrapperStyles={`
+            position: relative;
+            display: inline;
+          `}
+        />
       </StyledImageWrapper>
     </StyledImageContainer>
   );

diff --git a/src/images/detail/__tests__/__snapshots__/Image.test.js.snap b/src/images/detail/__tests__/__snapshots__/Image.test.js.snap
@@ -87,6 +87,8 @@ exports[`Image test suite should render ImageContainer consistently 1`] = `
   justify-content: center;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
+  position: relative;
+  display: inline;
 }
 
 .c5 img {
@@ -1708,6 +1710,8 @@ string",
   justify-content: center;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
+  position: relative;
+  display: inline;
 }
 
 .c4 img {
@@ -7624,6 +7628,10 @@ string",
                         <Styled(AsyncImage)
                           fit="contain"
                           src="https://s3.amazonaws.com/529821714029-rekognition-backend-dev-image-bucket/your/image/test/path"
+                          wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                         >
                           <StyledComponent
                             fit="contain"
@@ -7656,13 +7664,21 @@ string",
                             }
                             forwardedRef={null}
                             src="https://s3.amazonaws.com/529821714029-rekognition-backend-dev-image-bucket/your/image/test/path"
+                            wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                           >
                             <AsyncImage
                               className="c4"
                               fit="contain"
                               neverHideImg={false}
                               onLoad={null}
                               src="https://s3.amazonaws.com/529821714029-rekognition-backend-dev-image-bucket/your/image/test/path"
+                              wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                             >
                               <Styled(WithTheme(Box))
                                 direction="column"
@@ -8546,6 +8562,10 @@ string",
                                     },
                                   }
                                 }
+                                wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                               >
                                 <StyledComponent
                                   direction="column"
@@ -9960,6 +9980,10 @@ string",
                                       },
                                     }
                                   }
+                                  wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                                 >
                                   <WithTheme(Box)
                                     className="c5"
@@ -10844,6 +10868,10 @@ string",
                                         },
                                       }
                                     }
+                                    wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                                   >
                                     <Box
                                       className="c5"
@@ -11728,6 +11756,10 @@ string",
                                           },
                                         }
                                       }
+                                      wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                                     >
                                       <Box
                                         className="c5"
@@ -12613,6 +12645,10 @@ string",
                                             },
                                           }
                                         }
+                                        wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                                       >
                                         <StyledBox
                                           className="c5"
@@ -13497,6 +13533,10 @@ string",
                                               },
                                             }
                                           }
+                                          wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                                         >
                                           <StyledComponent
                                             className="c5"
@@ -14448,6 +14488,10 @@ string",
                                                 },
                                               }
                                             }
+                                            wrapperStyles="
+            position: relative;
+            display: inline;
+          "
                                           >
                                             <div
                                               className="c5 c6"

diff --git a/src/ui/async/AsyncImage.jsx b/src/ui/async/AsyncImage.jsx
@@ -9,13 +9,14 @@ import LoadingIndicator from './LoadingIndicator';
 export const StyledAsyncImage = styled(Box)`
   justify-content: center;
   transition: all 0.5s ease;
+  ${props => props.wrapperStyles || ''}
   img {
     opacity: ${props => (props.loaded ? '1' : '0')};
     display: ${props => (props.loaded || props.neverHideImg ? 'flex' : 'none')};
   }
 `;
 
-const AsyncImage = ({ onLoad, ...props }) => {
+const AsyncImage = ({ onLoad, wrapperStyles, ...props }) => {
   const [loaded, setLoaded] = useState(false);
 
   const handleOnImageLoad = (e) => {
@@ -28,7 +29,7 @@ const AsyncImage = ({ onLoad, ...props }) => {
   };
 
   return (
-    <StyledAsyncImage loaded={loaded}>
+    <StyledAsyncImage wrapperStyles={wrapperStyles} loaded={loaded}>
       {!loaded && <LoadingIndicator />}
       <Image {...props} onLoad={handleOnImageLoad} />
     </StyledAsyncImage>
@@ -39,11 +40,13 @@ AsyncImage.propTypes = {
   src: PropTypes.string.isRequired,
   neverHideImg: PropTypes.bool,
   onLoad: PropTypes.func,
+  wrapperStyles: PropTypes.string,
 };
 
 AsyncImage.defaultProps = {
   neverHideImg: false,
   onLoad: null,
+  wrapperStyles: null,
 };
 
 export default AsyncImage;
diff --git a/src/ui/async/__tests__/AsyncImage.test.js b/src/ui/async/__tests__/AsyncImage.test.js
@@ -17,6 +17,17 @@ it('Async image should shown with neverHideImg flag set', () => {
   expect(toJson(wrapper.dive())).toMatchSnapshot();
 });
 
+it('Async image should add additional styles if provided', () => {
+  const wrapper = shallow(
+    <AsyncImage
+      src=""
+      wrapperStyles="display: relative"
+      neverHideImg
+    />
+  );
+  expect(toJson(wrapper.dive())).toMatchSnapshot();
+});
+
 it('should show loading spinner while loading only', () => {
   const wrapper = mount(<AsyncImage src="" />);