Merge pull request #21 from ItsMrAkhil/custom-dot-wrapper

Add custom dot wrapper

Author: ItsMrAkhil

README.md

@@ -78,6 +78,7 @@ Props | Type | Default Value | Description
 `showDots` | `Boolean` | `true` | Show navigation or pagination dots below the slider
 `infinite` | `Boolean` | `true` | Infinitely slide cards.
 `Dot` | `React Node` | Default | Customized pagination button (`Active slide Dot` will get `active` as `Boolean` prop.)
+`DotsWrapper` | `Styled Element` | Default | Customized wrapper for your <Dot /> component to change the view of dots wrapper like position, background, etc. `Note: It should be a styled ul, otherwise you may not see any Dot Components.`
 `LeftArrow` | `React Node` | Default | Customized left arrow button. It'll get `disabled Boolean` prop if first Dot is active and infinite is false.
 `RightArrow` | `React Node` | Default | Customized right arrow button. It'll get `disabled Boolean` prop if last Dot is active and infinite is false.
 `children` | `React Node` | null | Cards are components which you want to show in the carousel

src/components/Dots.js renamed to src/components/DotsWrapper.js

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
-const Dots = styled.ul`
+const DotsWrapper = styled.ul`
   display: block;
   list-style: none;
   text-align: center;
   padding: 0px;
   margin: 0px;
 `;
 
-export default Dots;
+export default DotsWrapper;

src/components/Slider.js

@@ -9,7 +9,7 @@ import DefaultRightArrow from './RightArrow';
 import DefaultLeftArrow from './LeftArrow';
 import SliderWrapper from './SliderWrapper';
 import SliderList from './SliderList';
-import Dots from './Dots';
+import DefaultDotsWrapper from './DotsWrapper';
 import DefaultDot from './Dot';
 import Timer from '../utils/Timer';
 
@@ -178,7 +178,7 @@ class Slider extends React.Component {
     const {
       children, cardsToShow,
       showDots, showArrows,
-      pauseOnMouseOver,
+      pauseOnMouseOver, DotsWrapper,
       ...otherProps
     } = this.props;
     const { initialCard, childWidth } = this.state;
@@ -196,9 +196,9 @@ class Slider extends React.Component {
           </SliderTrack>
           {showArrows && !this.state.hideArrows && this.renderRightArrow()}
         </SliderWrapper>
-        <Dots>
+        <DotsWrapper>
           {showDots && this.renderDots()}
-        </Dots>
+        </DotsWrapper>
       </div>
     );
   }
@@ -210,6 +210,7 @@ Slider.defaultProps = {
   LeftArrow: <DefaultLeftArrow />,
   RightArrow: <DefaultRightArrow />,
   Dot: <DefaultDot />,
+  DotsWrapper: DefaultDotsWrapper,
   cardsToShow: null,
   afterSlide: null,
   beforeSlide: null,
@@ -245,6 +246,7 @@ Slider.propTypes = {
   padding: PropTypes.string,
   margin: PropTypes.string,
   hideArrowsOnNoSlides: PropTypes.bool,
+  DotsWrapper: PropTypes.func,
 };
 
 export default Slider;

src/components/__tests__/Dots.js renamed to src/components/__tests__/DotsWrapper.js

@@ -1,26 +1,26 @@
 import React from 'react';
 
-import Dots from '../Dots';
+import DotsWrapper from '../DotsWrapper';
 
-describe('<Dots />', () => {
+describe('<DotsWrapper />', () => {
   it('Should render a <div> tag', () => {
-    const renderedComponent = shallow(<Dots />);
+    const renderedComponent = shallow(<DotsWrapper />);
     expect(renderedComponent.type()).toEqual('ul');
   });
 
   it('Should have a className attribute', () => {
-    const renderedComponent = shallow(<Dots />);
+    const renderedComponent = shallow(<DotsWrapper />);
     expect(renderedComponent.prop('className')).toBeDefined();
   });
 
   it('Should adopt a valid attribute', () => {
     const id = 'test-id';
-    const renderedComponent = shallow(<Dots id={id} />);
+    const renderedComponent = shallow(<DotsWrapper id={id} />);
     expect(renderedComponent.prop('id')).toEqual(id);
   });
 
   it('Should not adopt an invalid attribute', () => {
-    const renderedComponent = shallow(<Dots attribute="test" />);
+    const renderedComponent = shallow(<DotsWrapper attribute="test" />);
     expect(renderedComponent.prop('attribute')).toBeUndefined();
   });
 });

src/components/__tests__/__snapshots__/Slider.js.snap

@@ -6,6 +6,7 @@ ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <Slider
     Dot={<styled.li />}
+    DotsWrapper={[Function]}
     LeftArrow={<styled.button />}
     RightArrow={<styled.button />}
     afterSlide={null}
@@ -497,6 +498,7 @@ ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <Slider
     Dot={<styled.li />}
+    DotsWrapper={[Function]}
     LeftArrow={<styled.button />}
     RightArrow={<styled.button />}
     afterSlide={null}