handle empty array as children

Author: sagiv.bengiat

package.json

@@ -19,8 +19,8 @@
   "scripts": {
     "start": "concurrently -r -k -s all \"docz dev\" \"yarn run lint:watch\"",
     "demo": "concurrently -r -k -s all \"rollup --config rollup.config.demo.js --watch\" \"yarn run lint:watch\"",
-    "lint:fix": "eslint src/. --fix",
-    "lint:watch": "esw --watch --fix src/.",
+    "lint:fix": "eslint src/* --fix",
+    "lint:watch": "esw --watch --fix src/*",
     "test": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
     "prebuild": "yarn run lint:fix",

src/react-elastic-carousel/components/Carousel.js

@@ -243,7 +243,8 @@ class Carousel extends React.Component {
     /* based on slider container's width, get num of items to show
         * and calculate child's width (and update it in state)
         */
-    const childrenLength = Children.toArray(children).length;
+    const childrenLength = Children.toArray(children).length || 1;
+
     let childWidth = 0;
     if (verticalMode) {
       childWidth = sliderContainerWidth;
@@ -284,7 +285,7 @@ class Carousel extends React.Component {
           children
         } = this.getDerivedPropsFromBreakPoint();
 
-        const childrenLength = Children.toArray(children).length;
+        const childrenLength = Children.toArray(children).length || 1;
 
         this.setState(
           currentState => {
@@ -345,7 +346,7 @@ class Carousel extends React.Component {
       itemsToShow,
       itemsToScroll
     } = this.getDerivedPropsFromBreakPoint();
-    const childrenLength = Children.toArray(children).length;
+    const childrenLength = Children.toArray(children).length || 1;
     const notEnoughItemsToShow = itemsToShow > childrenLength;
     let limit = getPrev ? 0 : childrenLength - itemsToShow;
 
@@ -393,7 +394,7 @@ class Carousel extends React.Component {
       const childWidth = this.calculateChildWidth();
 
       // determine how far can user swipe
-      const childrenLength = Children.toArray(children).length;
+      const childrenLength = Children.toArray(children).length || 1;
       const goingNext =
         (!verticalMode && dir === "Left" && !isRTL) ||
         (!verticalMode && dir === "Right" && isRTL) ||

src/react-elastic-carousel/index.d.ts

@@ -1,3 +1,5 @@
+/* eslint no-unused-vars: 0 */ // --> OFF
+/* eslint no-undef: 0 */ // --> OFF
 import * as React from "react";
 
 export type RenderArrowProps = {
@@ -32,7 +34,7 @@ export interface ReactElasticCarouselProps {
   // Defaults to false
   verticalMode?: boolean;
   // Defaults to false
-  isRTL: boolean,
+  isRTL: boolean;
   // Defaults to true
   pagination?: boolean;
   // Defaults to 500
@@ -108,6 +110,6 @@ export interface ReactElasticCarouselProps {
 
 declare class ReactElasticCarousel extends React.Component<
   ReactElasticCarouselProps
-  > { }
+> {}
 
 export default ReactElasticCarousel;