feat(dots): Implemented dots and dotClass

Author: vramana

examples/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Slider, Slides, PrevArrow, NextArrow } from '../src';
+import { Slider, Slides, PrevArrow, NextArrow, Dots } from '../src';
 
 import './index.css';
 
@@ -53,6 +53,7 @@ class NonInfinite extends Component {
         </Slides>
         <NextArrow activeClassName="non-infinite-right--active"
                     inactiveClassName="non-infinite-right--inactive" />
+        <Dots />
       </Slider>
     );
   }
@@ -73,6 +74,7 @@ class Infinite extends Component {
           <div style={slideStyle}><h1>6</h1></div>
         </Slides>
         <NextArrow />
+        <Dots />
       </Slider>
     );
   }

src/Dots.js

@@ -0,0 +1,41 @@
+import React, { Component, PropTypes } from 'react';
+
+const range = n => [...Array(n)].map((_, i) => i);
+
+class Dots extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    currentSlide: PropTypes.number,
+    slideCount: PropTypes.number,
+    handleSlideShift: PropTypes.func
+  }
+
+  render() {
+    const { className, slideCount, currentSlide } = this.props;
+    const dotStyle = { display: 'flex', justifyContent: 'center'};
+
+    const dots = range(slideCount).map((x, i) => {
+      const isActive = i === currentSlide;
+      const style = {
+        width: 8,
+        height: 8,
+        borderRadius: 8,
+        backgroundColor: 'black',
+        opacity: isActive ? 1 : 0.2,
+        margin: 3
+      };
+
+      return (
+        <div className={isActive ? 'active' : ''} style={style} key={i} />
+      );
+    });
+
+    return (
+      <div style={dotStyle} className={className ? className : 'slick-dots'} >
+        {dots}
+      </div>
+    );
+  }
+}
+
+export default Dots;

src/Slider.js

@@ -281,29 +281,29 @@ class Slider extends Component {
     const { children, vertical, infinite, swipe, draggable } = this.props;
     const { transitionSpeed, transitionTimingFn } = this.props;
     const { beforeChange, afterChange } = this.props;
-    const [ leftArrow, slides, rightArrow ] = children;
+    const [ leftArrow, slides, rightArrow, customComponent ] = children;
     const { currentSlide, translateXOffset, translateYOffset } = this.state;
     const slideCount = Children.count(slides.props.children);
 
     // onClick is passed as a props so that dom elements can be custom arrows
 
-    const newLeftArrow = cloneElement(leftArrow, {
+    const newLeftArrow = leftArrow !== undefined ? cloneElement(leftArrow, {
       key: 0,
       handleClick: () => { this.handleSlideShift(-1); },
       onClick: () => { this.handleSlideShift(-1); },
       currentSlide,
       infinite
-    });
+    }) : null;
 
     // Need to pass slideCount to check if end of slide has been reached.
-    const newRightArrow = cloneElement(rightArrow, {
+    const newRightArrow = rightArrow !== undefined ? cloneElement(rightArrow, {
       key: 2,
       handleClick: () => { this.handleSlideShift(1); },
       onClick: () => { this.handleSlideShift(1); },
       currentSlide,
       infinite,
       slideCount
-    });
+    }) : null;
 
     // TODO Show a warning if transitionSpeed prop is declared on Slides.
     const newSlides = cloneElement(slides, {
@@ -329,11 +329,20 @@ class Slider extends Component {
       translateYOffset
     });
 
+    const newCustomComponent = customComponent !== undefined ? cloneElement(customComponent, {
+      currentSlide,
+      slideCount,
+      handleSlideShift: ::this.handleSlideShift
+    }) : null;
+
     return (
-      <div ref="slider" style={{ display: 'flex', alignItems: 'center'}}>
-        {newLeftArrow}
-        {newSlides}
-        {newRightArrow}
+      <div>
+        <div ref="slider" style={{ display: 'flex', alignItems: 'center'}}>
+          {newLeftArrow}
+          {newSlides}
+          {newRightArrow}
+        </div>
+        {newCustomComponent}
       </div>
     );
   }

src/index.js

@@ -1,3 +1,4 @@
 export Slider from './Slider.js';
 export Slides from './Slides.js';
 export { PrevArrow, NextArrow } from './Arrows.js';
+export Dots from './Dots.js';