leandrowd#98: Fixing bug where the Thumbs component would throw an error if a custom component was rendered inside it

Author: leandrowd

TROUBLESHOOTING.md

@@ -0,0 +1,48 @@
+# Thumbs not visible
+
+### Error message: 
+> No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components.
+
+Carousel will find the thumbs if they are rendered as direct children of the carousel or if they are inside a div or another normal html element in a way that it's possible to access the children of these elements from the carousel. 
+
+For performance reasons, it's not possible to get images inside custom components.
+
+Good:
+```javascript
+<Carousel showArrows={true} showThumbs={true}>
+{
+    images.map((url, index) => (
+        <div key={index}>
+           <img src={url} />
+           <p>Legend</p>
+        </div>
+    ))
+}
+</Carousel>
+```
+
+Good:
+```javascript
+<Carousel showArrows={true} showThumbs={true}>
+{
+    images.map((url, index) => (
+       <img key={index} src={url} />
+    ))
+}
+</Carousel>
+```
+
+Bad: 
+```javascript
+const ImgSlider = ({ url }) => (
+    <div>
+        <img src={url} />
+    </div>
+);
+
+<Carousel showArrows={true} showThumbs={true}>
+{
+    images.map((url, index) => <ImgSlider key={index} url={url}/>)
+}
+</Carousel>
+```

package.json

@@ -26,7 +26,7 @@
   "scripts": {
     "start": "node --harmony ./node_modules/gulp/bin/gulp",
     "test": "jest",
-    "prepare-snapshot": "jest --updateSnapshot",
+    "update-snapshots": "jest --updateSnapshot",
     "prebuild": "npm test",
     "build": "babel ./src -d lib --ignore '__tests__' && gulp styles:package copy:package",
     "prepublish-to-npm": "git pull && npm run build && git add . && git commit -m 'Prepare for publishing'",

src/__tests__/__snapshots__/Carousel.js.snap

@@ -193,6 +193,7 @@ exports[`Slider Snapshots custom class name 1`] = `
           onClick={[Function]}
         >
           <img
+            onLoad={[Function]}
             src="assets/1.jpeg"
           />
         </li>
@@ -448,6 +449,7 @@ exports[`Slider Snapshots custom width 1`] = `
           onClick={[Function]}
         >
           <img
+            onLoad={[Function]}
             src="assets/1.jpeg"
           />
         </li>
@@ -703,6 +705,7 @@ exports[`Slider Snapshots default 1`] = `
           onClick={[Function]}
         >
           <img
+            onLoad={[Function]}
             src="assets/1.jpeg"
           />
         </li>
@@ -958,6 +961,7 @@ exports[`Slider Snapshots no arrows 1`] = `
           onClick={[Function]}
         >
           <img
+            onLoad={[Function]}
             src="assets/1.jpeg"
           />
         </li>
@@ -1176,6 +1180,7 @@ exports[`Slider Snapshots no indicators 1`] = `
           onClick={[Function]}
         >
           <img
+            onLoad={[Function]}
             src="assets/1.jpeg"
           />
         </li>
@@ -1424,6 +1429,7 @@ exports[`Slider Snapshots no indicators 2`] = `
           onClick={[Function]}
         >
           <img
+            onLoad={[Function]}
             src="assets/1.jpeg"
           />
         </li>
@@ -1841,6 +1847,7 @@ exports[`Slider Snapshots vertical axis 1`] = `
           onClick={[Function]}
         >
           <img
+            onLoad={[Function]}
             src="assets/1.jpeg"
           />
         </li>

src/components/Thumbs.js

@@ -28,7 +28,8 @@ class Thumbs extends Component {
             initialized: false,
             selectedItem: props.selectedItem,
             hasMount: false,
-            firstItem: this.getFirstItem(props.selectedItem)
+            firstItem: this.getFirstItem(props.selectedItem),
+            images: []
         }
     }
 
@@ -66,15 +67,17 @@ class Thumbs extends Component {
         // issue #2 - image loading smaller
         window.addEventListener("DOMContentLoaded", this.updateSizes);
 
-        this.setState({
-            initialized: true
-        });
+        const images = this.getImages();
 
-        const defaultImg = this.getDefaultImage();
-        if (defaultImg) {
-            defaultImg.addEventListener('load', this.setMountState);
+        if (!images) {
+            return;
         }
 
+        this.setState({
+            initialized: true,
+            images
+        });
+
         // when the component is rendered we need to calculate
         // the container size to adjust the responsive behaviour
         this.updateSizes();
@@ -84,22 +87,6 @@ class Thumbs extends Component {
         // removing listeners
         window.removeEventListener("resize", this.updateSizes);
         window.removeEventListener("DOMContentLoaded", this.updateSizes);
-
-        const defaultImg = this.getDefaultImage();
-        if (defaultImg) {
-            defaultImg.removeEventListener('load', this.setMountState);
-        }
-    }
-
-    getDefaultImage () {
-        const firstItem = ReactDOM.findDOMNode(this.thumb0);
-
-        if (firstItem) {
-            const firstImage = firstItem.getElementsByTagName('img');
-            return firstImage && firstImage[0];
-        }
-
-        return null;
     }
 
     updateSizes = () => {
@@ -109,12 +96,37 @@ class Thumbs extends Component {
 
         const total = this.props.children.length;
         this.wrapperSize = this.itemsWrapper.clientWidth;
-        this.itemSize = outerWidth(this.thumb0);
+        this.itemSize = outerWidth(this.refs.thumb0);
         this.visibleItems = Math.floor(this.wrapperSize / this.itemSize);
         this.lastPosition = total - this.visibleItems;
         this.showArrows = this.visibleItems < total;
     }
 
+    getImages() {
+        const images = React.Children.map(this.props.children, (item, index) => {
+            let img = item;
+
+            // if the item is not an image, try to find the first image in the item's children.
+            if (item.type !== "img") {
+                img = React.Children.toArray(item.props.children).filter((children) => children.type === "img")[0];
+            }
+
+            if (!img || img.length === 0) {
+                return null;
+            }
+
+            return img;
+        });
+
+        if (images.filter(image => image !== null).length === 0) {
+            console.warn(`No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components. More info at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md`);
+
+            return null;
+        }
+
+        return images;
+    }
+
     setMountState = () => {
         this.setState({hasMount: true});
         this.updateSizes();
@@ -219,31 +231,32 @@ class Thumbs extends Component {
     }
 
     renderItems () {
-        return React.Children.map(this.props.children, (item, index) => {
+        return this.state.images.map((img, index) => {
             const itemClass = klass.ITEM(false, index === this.state.selectedItem && this.state.hasMount);
 
-            let img = item;
-
-            if (item.type !== "img") {
-                img = React.Children.toArray(item.props.children).filter((children) => children.type === "img")[0];
-            }
-
-            if (img.length) {
-                console.warn(img, img.length, "No images found! Can't build the thumb list. If you don't need thumbs, set showThumbs={false} in the Carousel");
-                return null;
+            const thumbProps = {
+                key: index,
+                ref: `thumb${index}`,
+                className: itemClass,
+                onClick: this.handleClickItem.bind(this, index, this.props.children[index])
+            };
+
+            if (index === 0) {
+                img = React.cloneElement(img, {
+                    onLoad: this.setMountState
+                });
             }
 
             return (
-                <li key={index} ref={node => this["thumb" + index] = node} className={itemClass}
-                    onClick={ this.handleClickItem.bind(this, index, item) }>
+                <li {...thumbProps}>
                     { img }
                 </li>
             );
         });
     }
 
     render () {
-        if (!this.props.children) {
+        if (!this.props.children || this.state.images.length === 0) {
             return null;
         }