From 64c080e066188cb4a9a93d9153a6e8a0f7f6b248 Mon Sep 17 00:00:00 2001 From: Matthew Toledo Date: Fri, 25 Oct 2024 11:30:34 -0400 Subject: [PATCH 1/3] fix tests --- src/Slider/Slider.jsx | 6 ++++-- src/index.js | 14 +++++++++++++- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/Slider/Slider.jsx b/src/Slider/Slider.jsx index 91c74012..856db795 100644 --- a/src/Slider/Slider.jsx +++ b/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 { diff --git a/src/index.js b/src/index.js index bb5b80e0..0883b87b 100644 --- a/src/index.js +++ b/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'; From 841b909c0d485c08c29ced226855b41fca415240 Mon Sep 17 00:00:00 2001 From: Matthew Toledo Date: Fri, 25 Oct 2024 11:48:25 -0400 Subject: [PATCH 2/3] update docs --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 31265bb4..4f54d85d 100644 --- a/README.md +++ b/README.md @@ -706,6 +706,30 @@ const DecoratedComponent = WithStore(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. From 8015cad392fa0002552159a95d02d9234ef22a2d Mon Sep 17 00:00:00 2001 From: Matthew Toledo Date: Fri, 25 Oct 2024 12:00:07 -0400 Subject: [PATCH 3/3] lint fixes --- src/Slide/__tests__/Slide.test.jsx | 6 +++--- src/Slider/Slider.jsx | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Slide/__tests__/Slide.test.jsx b/src/Slide/__tests__/Slide.test.jsx index f60373aa..32fbfb39 100644 --- a/src/Slide/__tests__/Slide.test.jsx +++ b/src/Slide/__tests__/Slide.test.jsx @@ -58,7 +58,7 @@ describe('', () => { const wrapper = shallow(); expect(wrapper.find('.slide').prop('style').width).toBe('100%'); }); - + it('should apply any supplied classes to hidden slides', () => { const wrapper = shallow(( ', () => { 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(); const slideStyle = wrapper.find('.slide').prop('style'); expect(slideStyle.paddingBottom).toBe('unset'); diff --git a/src/Slider/Slider.jsx b/src/Slider/Slider.jsx index 856db795..8b181548 100644 --- a/src/Slider/Slider.jsx +++ b/src/Slider/Slider.jsx @@ -686,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 (
{ this.sliderElement = el; }}