Merge pull request #684 from glints-dev/feature/gm-2978

Gallery: Render children directly instead of creating new image tags

Author: vinhnglx

src/Display/Gallery/Gallery.test.tsx

@@ -36,6 +36,12 @@ const GalleryItemLessThanDefaultImagesDisplayed = () => (
   </Gallery>
 );
 
+const GalleryItemWithInvalidChildren = () => (
+  <Gallery>
+    <span>Content</span>
+  </Gallery>
+);
+
 describe('<Gallery /> focus', () => {
   it('Slider should be focused when Modal is open', () => {
     render(<Component />);
@@ -68,6 +74,14 @@ describe('<Gallery /> rendering', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should return console error when item is invalid children', () => {
+    const error = jest.spyOn(console, 'error').mockImplementation();
+    render(<GalleryItemWithInvalidChildren />);
+
+    expect(error).toBeCalledWith('Only img components allowed as children.');
+    error.mockRestore();
+  });
 });
 
 describe('<Gallery /> open and close Slider modal', () => {

src/Display/Gallery/Gallery.tsx

@@ -35,6 +35,13 @@ const Gallery = ({
 
   const getCurrentIndex = (index: number) => setCurrentIndex(index - 1);
 
+  const hasImage = React.Children.toArray(children).some(child => {
+    return React.isValidElement(child) && child.type === 'img';
+  });
+  if (!hasImage) {
+    console.error('Only img components allowed as children.');
+  }
+
   React.useEffect(function componentDidMount() {
     if (React.Children.count(children) > imagesDisplayed)
       setImageLeft(React.Children.count(children) - imagesDisplayed);
@@ -62,7 +69,9 @@ const Gallery = ({
               imageLeft={imageLeft}
               onClick={() => handleClick(index)}
             >
-              <img src={data.props.src} alt={index.toString(10)} />
+              {React.cloneElement(data, {
+                alt: index.toString(10),
+              })}
             </GalleryItem>
           ))}
       </GalleryItemWrapper>
@@ -84,11 +93,9 @@ const Gallery = ({
             (data: React.ReactElement<React.HTMLProps<'img'>>, index) => (
               <Slider.Item key={`${data.props.src}_${index}`}>
                 <GalleryImageWrapper role="banner" tabIndex={0}>
-                  <img
-                    src={data.props.src}
-                    key={`${data.props.src}_${index}`}
-                    alt={index.toString(10)}
-                  />
+                  {React.cloneElement(data, {
+                    alt: index.toString(10),
+                  })}
                 </GalleryImageWrapper>
               </Slider.Item>
             )
@@ -97,17 +104,21 @@ const Gallery = ({
         <GalleryThumbnailWrapper>
           {React.Children.map(
             children,
-            (data: React.ReactElement<React.HTMLProps<'img'>>, index) => (
+            (
+              data: React.ReactElement<
+                React.HTMLProps<'img'> & { 'data-testid': string }
+              >,
+              index
+            ) => (
               <div
                 key={`${data.props.src}_${index}`}
                 onClick={() => handleClickThumbs(index)}
               >
-                <img
-                  data-testid="gallery_thumbnail"
-                  src={data.props.src}
-                  alt={index.toString(10)}
-                  className={index === currentIndex ? 'active' : null}
-                />
+                {React.cloneElement(data, {
+                  className: index === currentIndex ? 'active' : null,
+                  'data-testid': 'gallery_thumbnail',
+                  alt: index.toString(10),
+                })}
               </div>
             )
           )}