Expose Component Views (#473)

* fix tests

* update docs

* lint fixes

Author: mrbinky3000

README.md

@@ -706,6 +706,30 @@ const DecoratedComponent = WithStore<UpdateCheckProps>(InjectedComponent)
 const DecoratedComponent = WithStore(InjectedComponent)
 ```
 
+## Advanced Concept: Accessing the "View" Components Directly
+All the components in Pure React Carousel were designed using the model -> view approach.
+Meaning that the index file for each component gathers all the data required from sources external
+to that component (like context, or redux, or cookies, or fetched data from a rest api), organizes
+the data, and passes that data to the "view" component as a flattened props object.
+
+For example, look at the structure of the Slide component folder:
+
+```
+Slide/
+├─ index.js (model)
+├─ Slide.jsx (view)
+```
+
+The index file (model) in this instance uses the WithRouter HOC to provide the Slide (view) with
+all the data it needs from the carousel state. Stuff like the current slide, size width, height,
+etc.
+
+If, for some reason, you want direct access to the "view" for Slider, you can import it directly
+by adding "View" to the end of the component name.  This works for all components except for
+CarouselProvider.
+
+So to access the "view" of Slide, `import { SlideView } from 'pure-react-carousel'`
+
 ## More Documentation to Come
 
 I promise to add docs for every component.  In the meantime, feel free to download and run the demo app.  Looking at the code might help you out.

src/Slide/__tests__/Slide.test.jsx

@@ -58,7 +58,7 @@ describe('<Slide />', () => {
     const wrapper = shallow(<Slide {...props} orientation="vertical" />);
     expect(wrapper.find('.slide').prop('style').width).toBe('100%');
   });
-  
+
   it('should apply any supplied classes to hidden slides', () => {
     const wrapper = shallow((
       <Slide
@@ -95,10 +95,10 @@ describe('<Slide />', () => {
     expect(wrapper.find('.slide').hasClass('i-be-visible')).toBe(true);
     expect(wrapper.find('.slide').hasClass('carousel__slide--visible')).toBe(true);
   });
-  
+
   it('should correctly set styles, if isIntrinsicHeight is set', () => {
     // this is for testing only.
-    
+
     const wrapper = shallow(<Slide {...props} isIntrinsicHeight />);
     const slideStyle = wrapper.find('.slide').prop('style');
     expect(slideStyle.paddingBottom).toBe('unset');

src/Slider/Slider.jsx

@@ -201,6 +201,7 @@ const Slider = class Slider extends React.Component {
 
   getSliderRef(el) {
     this.sliderTrayElement = el;
+    /* istanbul ignore else */
     if (el && window) {
       // NOTE: we can't rely on the element itself to detect direction
       // as the direction of the slider is currently flipped to ltr
@@ -242,7 +243,9 @@ const Slider = class Slider extends React.Component {
     window.cancelAnimationFrame.call(window, this.moveTimer);
     this.moveTimer = window.requestAnimationFrame.call(window, () => {
       this.setState(state => ({
-        deltaX: (screenX - state.startX) * (this.rtl ? -1 : 1),
+        deltaX: (screenX - state.startX) * (
+          this.rtl ? /* istanbul ignore next -- deprecated anyhow */ -1 : 1
+        ),
         deltaY: screenY - state.startY,
         preventingVerticalScroll: Math.abs(screenY - state.startY)
           <= this.props.verticalPixelThreshold
@@ -653,7 +656,6 @@ const Slider = class Slider extends React.Component {
       classNameTray,
     ]);
 
-  
 
     // remove invalid div attributes
     const {
@@ -684,6 +686,8 @@ const Slider = class Slider extends React.Component {
       ...filteredTrayProps
     } = trayProps;
 
+    // ignoring for now, this entire component is getting re-written anyhow soon.
+    /* eslint-disable jsx-a11y/no-static-element-interactions */
     return (
       <div
         ref={(el) => { this.sliderElement = el; }}

src/index.js

@@ -1,15 +1,27 @@
 export { default as ButtonBack } from './ButtonBack';
+export { default as ButtonBackView } from './ButtonBack/ButtonBack';
 export { default as ButtonFirst } from './ButtonFirst';
-export { default as ButtonNext } from './ButtonNext';
+export { default as ButtonFirstView } from './ButtonFirst/ButtonFirst';
 export { default as ButtonLast } from './ButtonLast';
+export { default as ButtonLastView } from './ButtonLast/ButtonLast';
+export { default as ButtonNext } from './ButtonNext';
+export { default as ButtonNextView } from './ButtonNext/ButtonNext';
 export { default as ButtonPlay } from './ButtonPlay';
+export { default as ButtonPlayView } from './ButtonPlay/ButtonPlay';
 export { default as CarouselProvider, CarouselContext } from './CarouselProvider';
 export { default as Dot } from './Dot';
 export { default as DotGroup } from './DotGroup';
+export { default as DotGroupView } from './DotGroup/DotGroup';
+export { default as DotView } from './Dot/Dot';
 export { default as Image } from './Image';
+export { default as ImageView } from './Image/Image';
 export { default as ImageWithZoom } from './ImageWithZoom';
+export { default as ImageWithZoomView } from './ImageWithZoom/ImageWithZoom';
 export { default as Slide } from './Slide';
 export { default as Slider } from './Slider';
+export { default as SliderView } from './Slider/Slider';
+export { default as SlideView } from './Slide/Slide';
 export { default as Spinner } from './Spinner';
+export { default as SpinnerView } from './Spinner/Spinner';
 export { default as Store } from './Store/Store';
 export { default as WithStore } from './Store/WithStore';