Skip to content

Commit 17423d4

Browse files
authored
Expose Component Views (#473)
* fix tests * update docs * lint fixes
1 parent 5529d17 commit 17423d4

File tree

4 files changed

+46
-6
lines changed

4 files changed

+46
-6
lines changed

README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -706,6 +706,30 @@ const DecoratedComponent = WithStore<UpdateCheckProps>(InjectedComponent)
706706
const DecoratedComponent = WithStore(InjectedComponent)
707707
```
708708
709+
## Advanced Concept: Accessing the "View" Components Directly
710+
All the components in Pure React Carousel were designed using the model -> view approach.
711+
Meaning that the index file for each component gathers all the data required from sources external
712+
to that component (like context, or redux, or cookies, or fetched data from a rest api), organizes
713+
the data, and passes that data to the "view" component as a flattened props object.
714+
715+
For example, look at the structure of the Slide component folder:
716+
717+
```
718+
Slide/
719+
├─ index.js (model)
720+
├─ Slide.jsx (view)
721+
```
722+
723+
The index file (model) in this instance uses the WithRouter HOC to provide the Slide (view) with
724+
all the data it needs from the carousel state. Stuff like the current slide, size width, height,
725+
etc.
726+
727+
If, for some reason, you want direct access to the "view" for Slider, you can import it directly
728+
by adding "View" to the end of the component name. This works for all components except for
729+
CarouselProvider.
730+
731+
So to access the "view" of Slide, `import { SlideView } from 'pure-react-carousel'`
732+
709733
## More Documentation to Come
710734
711735
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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ describe('<Slide />', () => {
5858
const wrapper = shallow(<Slide {...props} orientation="vertical" />);
5959
expect(wrapper.find('.slide').prop('style').width).toBe('100%');
6060
});
61-
61+
6262
it('should apply any supplied classes to hidden slides', () => {
6363
const wrapper = shallow((
6464
<Slide
@@ -95,10 +95,10 @@ describe('<Slide />', () => {
9595
expect(wrapper.find('.slide').hasClass('i-be-visible')).toBe(true);
9696
expect(wrapper.find('.slide').hasClass('carousel__slide--visible')).toBe(true);
9797
});
98-
98+
9999
it('should correctly set styles, if isIntrinsicHeight is set', () => {
100100
// this is for testing only.
101-
101+
102102
const wrapper = shallow(<Slide {...props} isIntrinsicHeight />);
103103
const slideStyle = wrapper.find('.slide').prop('style');
104104
expect(slideStyle.paddingBottom).toBe('unset');

src/Slider/Slider.jsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,7 @@ const Slider = class Slider extends React.Component {
201201

202202
getSliderRef(el) {
203203
this.sliderTrayElement = el;
204+
/* istanbul ignore else */
204205
if (el && window) {
205206
// NOTE: we can't rely on the element itself to detect direction
206207
// as the direction of the slider is currently flipped to ltr
@@ -242,7 +243,9 @@ const Slider = class Slider extends React.Component {
242243
window.cancelAnimationFrame.call(window, this.moveTimer);
243244
this.moveTimer = window.requestAnimationFrame.call(window, () => {
244245
this.setState(state => ({
245-
deltaX: (screenX - state.startX) * (this.rtl ? -1 : 1),
246+
deltaX: (screenX - state.startX) * (
247+
this.rtl ? /* istanbul ignore next -- deprecated anyhow */ -1 : 1
248+
),
246249
deltaY: screenY - state.startY,
247250
preventingVerticalScroll: Math.abs(screenY - state.startY)
248251
<= this.props.verticalPixelThreshold
@@ -653,7 +656,6 @@ const Slider = class Slider extends React.Component {
653656
classNameTray,
654657
]);
655658

656-
657659

658660
// remove invalid div attributes
659661
const {
@@ -684,6 +686,8 @@ const Slider = class Slider extends React.Component {
684686
...filteredTrayProps
685687
} = trayProps;
686688

689+
// ignoring for now, this entire component is getting re-written anyhow soon.
690+
/* eslint-disable jsx-a11y/no-static-element-interactions */
687691
return (
688692
<div
689693
ref={(el) => { this.sliderElement = el; }}

src/index.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
11
export { default as ButtonBack } from './ButtonBack';
2+
export { default as ButtonBackView } from './ButtonBack/ButtonBack';
23
export { default as ButtonFirst } from './ButtonFirst';
3-
export { default as ButtonNext } from './ButtonNext';
4+
export { default as ButtonFirstView } from './ButtonFirst/ButtonFirst';
45
export { default as ButtonLast } from './ButtonLast';
6+
export { default as ButtonLastView } from './ButtonLast/ButtonLast';
7+
export { default as ButtonNext } from './ButtonNext';
8+
export { default as ButtonNextView } from './ButtonNext/ButtonNext';
59
export { default as ButtonPlay } from './ButtonPlay';
10+
export { default as ButtonPlayView } from './ButtonPlay/ButtonPlay';
611
export { default as CarouselProvider, CarouselContext } from './CarouselProvider';
712
export { default as Dot } from './Dot';
813
export { default as DotGroup } from './DotGroup';
14+
export { default as DotGroupView } from './DotGroup/DotGroup';
15+
export { default as DotView } from './Dot/Dot';
916
export { default as Image } from './Image';
17+
export { default as ImageView } from './Image/Image';
1018
export { default as ImageWithZoom } from './ImageWithZoom';
19+
export { default as ImageWithZoomView } from './ImageWithZoom/ImageWithZoom';
1120
export { default as Slide } from './Slide';
1221
export { default as Slider } from './Slider';
22+
export { default as SliderView } from './Slider/Slider';
23+
export { default as SlideView } from './Slide/Slide';
1324
export { default as Spinner } from './Spinner';
25+
export { default as SpinnerView } from './Spinner/Spinner';
1426
export { default as Store } from './Store/Store';
1527
export { default as WithStore } from './Store/WithStore';

0 commit comments

Comments
 (0)