Feature/dotgroup tuning

README.md

@@ -1,7 +1,7 @@
 [![Build Status](https://travis-ci.org/express-labs/pure-react-carousel.svg?branch=master)](https://travis-ci.org/express-labs/pure-react-carousel)
 [![Known Vulnerabilities](https://snyk.io/test/github/express-labs/pure-react-carousel/badge.svg)](https://snyk.io/test/github/express-labs/pure-react-carousel)
 
-Created by  
+Created by
 [![Express Logo](https://raw.github.com/express-labs/pure-react-carousel/master/dev/media/express-logo.svg?sanitize=true)](http://www.express.com)
 
 # pure-react-carousel
@@ -293,6 +293,8 @@ A compound component that creates a bunch of Dot's automatically for you.
 | children | [string|node|null] | null | No | Any JSX wrapped by this component will appear AFTER the dots. |
 | className | [string|null] | null | No | Optional className string that will be appended to the component's className string. |
 | dotNumbers | boolean | false | No | Setting to true automatically adds text numbers the dot buttons starting at 1. |
+| disableActiveDots | boolean | true | No | Setting to true make all dots, including active dots, enabled. |
+| showAsSelectedForCurrentSlideOnly | boolean | false | No | Setting to true show only the current slide dot as selected. |
 
 #### The DotGroup component creates the following pseudo HTML by default:
 

src/DotGroup/DotGroup.jsx

@@ -13,22 +13,39 @@ const DotGroup = class DotGroup extends React.Component {
     totalSlides: PropTypes.number.isRequired,
     visibleSlides: PropTypes.number.isRequired,
     dotNumbers: PropTypes.bool,
+    disableActiveDots: PropTypes.bool,
+    showAsSelectedForCurrentSlideOnly: PropTypes.bool,
   }
 
   static defaultProps = {
     children: null,
     className: null,
     dotNumbers: false,
+    disableActiveDots: true,
+    showAsSelectedForCurrentSlideOnly: false,
   }
 
   renderDots() {
-    const { currentSlide, totalSlides, visibleSlides } = this.props;
+    const {
+      currentSlide,
+      totalSlides,
+      visibleSlides,
+      disableActiveDots,
+      showAsSelectedForCurrentSlideOnly,
+    } = this.props;
     const dots = [];
     for (let i = 0; i < totalSlides; i += 1) {
-      const selected = i >= currentSlide && i < (currentSlide + visibleSlides);
+      const multipleSelected = i >= currentSlide && i < (currentSlide + visibleSlides);
+      const singleSelected = i === currentSlide;
+      const selected = showAsSelectedForCurrentSlideOnly ? singleSelected : multipleSelected;
       const slide = i >= totalSlides - visibleSlides ? totalSlides - visibleSlides : i;
       dots.push(
-        <Dot key={i} slide={slide} selected={selected} disabled={selected}>
+        <Dot
+          key={i}
+          slide={slide}
+          selected={selected}
+          disabled={disableActiveDots ? selected : false}
+        >
           <span className={cn['carousel__dot-group-dot']}>{this.props.dotNumbers && i + 1}</span>
         </Dot>,
       );
@@ -38,7 +55,15 @@ const DotGroup = class DotGroup extends React.Component {
 
   render() {
     const {
-      carouselStore, children, className, currentSlide, dotNumbers, totalSlides, visibleSlides,
+      carouselStore,
+      children,
+      className,
+      currentSlide,
+      dotNumbers,
+      totalSlides,
+      visibleSlides,
+      disableActiveDots,
+      showAsSelectedForCurrentSlideOnly,
       ...props
     } = this.props;
 

src/DotGroup/__tests__/DotGroup.test.jsx

@@ -34,4 +34,28 @@ describe('<DotGroup />', () => {
     expect(wrapper.find('span').at(1).text()).toEqual('');
     expect(wrapper.find('span').at(2).text()).toEqual('');
   });
+  it('should render enabled active dots if disableActiveDots prop is false', () => {
+    const wrapper = shallow(<DotGroup {...props} disableActiveDots={false} />);
+    expect(wrapper.children().at(0).prop('disabled')).toEqual(false);
+    expect(wrapper.children().at(1).prop('disabled')).toEqual(false);
+    expect(wrapper.children().at(2).prop('disabled')).toEqual(false);
+  });
+  it('should render DISABLED dots if disableActiveDots prop is not set', () => {
+    const wrapper = shallow(<DotGroup {...props} />);
+    expect(wrapper.children().at(0).prop('disabled')).toEqual(false);
+    expect(wrapper.children().at(1).prop('disabled')).toEqual(true);
+    expect(wrapper.children().at(2).prop('disabled')).toEqual(true);
+  });
+  it('should render only current slide dot as selected if showAsSelectedForCurrentSlideOnly prop is true', () => {
+    const wrapper = shallow(<DotGroup {...props} showAsSelectedForCurrentSlideOnly />);
+    expect(wrapper.children().at(0).prop('selected')).toEqual(false);
+    expect(wrapper.children().at(1).prop('selected')).toEqual(true);
+    expect(wrapper.children().at(2).prop('selected')).toEqual(false);
+  });
+  it('should render all visible slides dot as selected if showAsSelectedForCurrentSlideOnly prop is not set', () => {
+    const wrapper = shallow(<DotGroup {...props} />);
+    expect(wrapper.children().at(0).prop('selected')).toEqual(false);
+    expect(wrapper.children().at(1).prop('selected')).toEqual(true);
+    expect(wrapper.children().at(2).prop('selected')).toEqual(true);
+  });
 });