diff --git a/demo/app.js b/demo/app.js index 6275371b..cb832cb0 100644 --- a/demo/app.js +++ b/demo/app.js @@ -40,16 +40,17 @@ class App extends React.Component { return (
(
, renderCenterRightControls: props => , slideIndex: 0, + slideListMargin: 10, slideOffset: 25, slidesToScroll: 1, slidesToShow: 1, @@ -1264,8 +1265,7 @@ Carousel.defaultProps = { vertical: false, width: '100%', withoutControls: false, - wrapAround: false, - slideListMargin: 10 + wrapAround: false }; export { NextButton, PreviousButton, PagingDots }; diff --git a/src/transitions/3d-scroll-transition.js b/src/transitions/3d-scroll-transition.js index bfedeb03..6a84b46e 100644 --- a/src/transitions/3d-scroll-transition.js +++ b/src/transitions/3d-scroll-transition.js @@ -8,23 +8,9 @@ const MAX_ZOOM_SCALE = 1; export default class ScrollTransition3D extends React.Component { constructor(props) { super(props); - this.getListStyles = this.getListStyles.bind(this); } - getSlideDirection(start, end, isWrapping) { - let direction = 0; - if (start === end) return direction; - - if (isWrapping) { - direction = start < end ? -1 : 1; - } else { - direction = start < end ? 1 : -1; - } - - return direction; - } - /* eslint-disable complexity */ getSlideTargetPosition(index) { let targetPosition = 0; @@ -61,8 +47,9 @@ export default class ScrollTransition3D extends React.Component { /* eslint-enable complexity */ formatChildren(children) { - const { top, left, currentSlide, slidesToShow } = this.props; - const positionValue = this.props.vertical ? top : left; + const { top, left, currentSlide, slidesToShow, vertical } = this.props; + const positionValue = vertical ? top : left; + return React.Children.map(children, (child, index) => { const visible = this.getDistanceToCurrentSlide(index) <= slidesToShow / 2; const current = currentSlide === index; @@ -103,31 +90,28 @@ export default class ScrollTransition3D extends React.Component { } getDistanceToCurrentSlide(index) { - return this.props.wrapAround + const { wrapAround, currentSlide, slideCount } = this.props; + return wrapAround ? Math.min( Math.min( this.getDistance(index, 0) + - this.getDistance(this.props.currentSlide, this.props.slideCount), - this.getDistance(index, this.props.slideCount) + - this.getDistance(this.props.currentSlide, 0) + this.getDistance(currentSlide, slideCount), + this.getDistance(index, slideCount) + + this.getDistance(currentSlide, 0) ), - this.getDistance(index, this.props.currentSlide) + this.getDistance(index, currentSlide) ) - : this.getDistance(index, this.props.currentSlide); + : this.getDistance(index, currentSlide); } getRelativeDistanceToCurrentSlide(index) { - if (this.props.wrapAround) { + const { wrapAround, currentSlide, slideCount } = this.props; + if (wrapAround) { const distanceByLeftEge = - this.getDistance(index, 0) + - this.getDistance(this.props.currentSlide, this.props.slideCount); + this.getDistance(index, 0) + this.getDistance(currentSlide, slideCount); const distanceByRightEdge = - this.getDistance(index, this.props.slideCount) + - this.getDistance(this.props.currentSlide, 0); - const absoluteDirectDistance = this.getDistance( - index, - this.props.currentSlide - ); + this.getDistance(index, slideCount) + this.getDistance(currentSlide, 0); + const absoluteDirectDistance = this.getDistance(index, currentSlide); const minimumDistance = Math.min( Math.min(distanceByLeftEge, distanceByRightEdge), @@ -136,7 +120,7 @@ export default class ScrollTransition3D extends React.Component { switch (minimumDistance) { case absoluteDirectDistance: - return index - this.props.currentSlide; + return index - currentSlide; case distanceByLeftEge: return distanceByLeftEge; case distanceByRightEdge: @@ -145,7 +129,7 @@ export default class ScrollTransition3D extends React.Component { return 0; } } else { - return index - this.props.currentSlide; + return index - currentSlide; } } @@ -174,29 +158,30 @@ export default class ScrollTransition3D extends React.Component { } getSlideStyles(index, positionValue) { + const { vertical, slideCount, cellSpacing, slideWidth } = this.props; const targetPosition = this.getSlideTargetPosition(index, positionValue); const transformScale = this.getTransformScale(index); return { - zIndex: this.props.slideCount - this.getDistanceToCurrentSlide(index), boxSizing: 'border-box', - display: this.props.vertical ? 'block' : 'inline-block', + display: vertical ? 'block' : 'inline-block', height: getSlideHeight(this.props), - left: this.props.vertical ? 0 : targetPosition, + left: vertical ? 0 : targetPosition, listStyleType: 'none', - marginBottom: this.props.vertical ? this.props.cellSpacing / 2 : 'auto', - marginLeft: this.props.vertical ? 'auto' : this.props.cellSpacing / 2, - marginRight: this.props.vertical ? 'auto' : this.props.cellSpacing / 2, - marginTop: this.props.vertical ? this.props.cellSpacing / 2 : 'auto', + marginBottom: vertical ? cellSpacing / 2 : 'auto', + marginLeft: vertical ? 'auto' : cellSpacing / 2, + marginRight: vertical ? 'auto' : cellSpacing / 2, + marginTop: vertical ? cellSpacing / 2 : 'auto', MozBoxSizing: 'border-box', + opacity: this.getOpacityScale(index), position: 'absolute', - top: this.props.vertical ? targetPosition : 0, + top: vertical ? targetPosition : 0, transform: `scale(${transformScale})`, transition: 'left 0.4s ease-out, transform 0.4s ease-out, opacity 0.4s ease-out', verticalAlign: 'top', - width: this.props.vertical ? '100%' : this.props.slideWidth, - opacity: this.getOpacityScale(index) + width: vertical ? '100%' : slideWidth, + zIndex: slideCount - this.getDistanceToCurrentSlide(index) }; } @@ -241,17 +226,17 @@ ScrollTransition3D.propTypes = { heightMode: PropTypes.oneOf(['first', 'current', 'max']), isWrappingAround: PropTypes.bool, left: PropTypes.number, + opacityScale: PropTypes.number, slideCount: PropTypes.number, slideHeight: PropTypes.number, + slideListMargin: PropTypes.number, slideOffset: PropTypes.number, + slidesToShow: PropTypes.number, slideWidth: PropTypes.number, top: PropTypes.number, vertical: PropTypes.bool, wrapAround: PropTypes.bool, - zoomScale: PropTypes.number, - opacityScale: PropTypes.number, - slidesToShow: PropTypes.number, - slideListMargin: PropTypes.number + zoomScale: PropTypes.number }; ScrollTransition3D.defaultProps = { @@ -261,14 +246,14 @@ ScrollTransition3D.defaultProps = { heightMode: 'max', isWrappingAround: false, left: 0, + opacityScale: 0.65, slideCount: 0, slideHeight: 0, + slideListMargin: 0, + slidesToShow: 3, slideWidth: 0, top: 0, vertical: false, wrapAround: true, - zoomScale: 0.75, - opacityScale: 0.65, - slidesToShow: 3, - slideListMargin: 10 + zoomScale: 0.75 }; diff --git a/src/transitions/scroll-transition.js b/src/transitions/scroll-transition.js index bcc598fc..f13e7e60 100644 --- a/src/transitions/scroll-transition.js +++ b/src/transitions/scroll-transition.js @@ -4,6 +4,7 @@ import { getSlideHeight, getAlignmentOffset } from '../utilities/style-utilities'; +import { getSlideDirection } from '../utilities/utilities'; const MIN_ZOOM_SCALE = 0; const MAX_ZOOM_SCALE = 1; @@ -11,23 +12,9 @@ const MAX_ZOOM_SCALE = 1; export default class ScrollTransition extends React.Component { constructor(props) { super(props); - this.getListStyles = this.getListStyles.bind(this); } - getSlideDirection(start, end, isWrapping) { - let direction = 0; - if (start === end) return direction; - - if (isWrapping) { - direction = start < end ? -1 : 1; - } else { - direction = start < end ? 1 : -1; - } - - return direction; - } - /* eslint-disable complexity */ getSlideTargetPosition(currentSlideIndex, positionValue) { let offset = 0; @@ -68,7 +55,7 @@ export default class ScrollTransition extends React.Component { let slidesOutOfViewBefore = Math.floor(slidesOutOfView / 2); let slidesOutOfViewAfter = slidesOutOfView - slidesOutOfViewBefore; - const direction = this.getSlideDirection( + const direction = getSlideDirection( startSlideIndex, this.props.currentSlide, this.props.isWrappingAround @@ -111,13 +98,12 @@ export default class ScrollTransition extends React.Component { /* eslint-enable complexity */ formatChildren(children) { - const { top, left, currentSlide, slidesToShow } = this.props; - const positionValue = this.props.vertical ? top : left; + const { top, left, currentSlide, slidesToShow, vertical } = this.props; + const positionValue = vertical ? top : left; return React.Children.map(children, (child, index) => { const visible = index >= currentSlide && index < currentSlide + slidesToShow; - return (
  • { return 0; }; +export const getSlideDirection = (start, end, isWrapping) => { + let direction = 0; + + if (start === end) return direction; + if (isWrapping) { + direction = start < end ? -1 : 1; + } else { + direction = start < end ? 1 : -1; + } + + return direction; +}; + export const shouldUpdate = (curr, next, keys) => { let update = false; diff --git a/test/specs/3d-scroll-transition.test.js b/test/specs/3d-scroll-transition.test.js index 4dc92d71..7d6d2a9b 100644 --- a/test/specs/3d-scroll-transition.test.js +++ b/test/specs/3d-scroll-transition.test.js @@ -2,58 +2,6 @@ import Scroll3DTransition from '../../src/transitions/3d-scroll-transition'; describe('', () => { - describe('#getSlideDirection', () => { - let instance; - - beforeEach(async () => { - const wrapper = mount( - -

    Slide 1

    -

    Slide 2

    -

    Slide 3

    -     - ); - instance = wrapper.instance(); - }); - - it('should return zero if start and end slide are the same regardless of isWrapping', () => { - expect(instance.getSlideDirection(2, 2, true)).toEqual(0); - expect(instance.getSlideDirection(2, 2, false)).toEqual(0); - }); - - it('should return -1 if isWrapping is true and start is less than end', () => { - const isWrapping = true; - const start = 0; - const end = 6; - - expect(instance.getSlideDirection(start, end, isWrapping)).toEqual(-1); - }); - - it('should return 1 if isWrapping is true and start is greater than end', () => { - const isWrapping = true; - const start = 6; - const end = 0; - - expect(instance.getSlideDirection(start, end, isWrapping)).toEqual(1); - }); - - it('should return 1 if isWrapping is false and start is less than end', () => { - const isWrapping = false; - const start = 0; - const end = 6; - - expect(instance.getSlideDirection(start, end, isWrapping)).toEqual(1); - }); - - it('should return -1 if isWrapping is false and start is greater than end', () => { - const isWrapping = false; - const start = 6; - const end = 0; - - expect(instance.getSlideDirection(start, end, isWrapping)).toEqual(-1); - }); - }); - describe('#getDistanceToCurrentSlide', () => { it('should calculate all distances in a linear fashion when wrapAround is false', () => { const wrapper = mount( diff --git a/test/specs/scroll-transition.test.js b/test/specs/scroll-transition.test.js index 2b58450f..4d1672bd 100644 --- a/test/specs/scroll-transition.test.js +++ b/test/specs/scroll-transition.test.js @@ -2,58 +2,6 @@ import ScrollTransition from '../../src/transitions/scroll-transition'; describe('', () => { - describe('#getSlideDirection', () => { - let instance; - - beforeEach(async () => { - const wrapper = mount( - -

    Slide 1

    -

    Slide 2

    -

    Slide 3

    -     - ); - instance = wrapper.instance(); - }); - - it('should return zero if start and end slide are the same regardless of isWrapping', () => { - expect(instance.getSlideDirection(2, 2, true)).toEqual(0); - expect(instance.getSlideDirection(2, 2, false)).toEqual(0); - }); - - it('should return -1 if isWrapping is true and start is less than end', () => { - const isWrapping = true; - const start = 0; - const end = 6; - - expect(instance.getSlideDirection(start, end, isWrapping)).toEqual(-1); - }); - - it('should return 1 if isWrapping is true and start is greater than end', () => { - const isWrapping = true; - const start = 6; - const end = 0; - - expect(instance.getSlideDirection(start, end, isWrapping)).toEqual(1); - }); - - it('should return 1 if isWrapping is false and start is less than end', () => { - const isWrapping = false; - const start = 0; - const end = 6; - - expect(instance.getSlideDirection(start, end, isWrapping)).toEqual(1); - }); - - it('should return -1 if isWrapping is false and start is greater than end', () => { - const isWrapping = false; - const start = 6; - const end = 0; - - expect(instance.getSlideDirection(start, end, isWrapping)).toEqual(-1); - }); - }); - describe('#getSlideStyles', () => { describe('calculating zoomScale', () => { it('should return a scale of 1 for all slides when animation !== zoom , ', () => { diff --git a/test/specs/utilities.test.js b/test/specs/utilities.test.js new file mode 100644 index 00000000..c0198f2a --- /dev/null +++ b/test/specs/utilities.test.js @@ -0,0 +1,42 @@ +import { getSlideDirection } from '../../src/utilities/utilities'; + +describe('Utilities', () => { + describe('#getSlideDirection', () => { + it('should return zero if start and end slide are the same regardless of isWrapping', () => { + expect(getSlideDirection(2, 2, true)).toEqual(0); + expect(getSlideDirection(2, 2, false)).toEqual(0); + }); + + it('should return -1 if isWrapping is true and start is less than end', () => { + const isWrapping = true; + const start = 0; + const end = 6; + + expect(getSlideDirection(start, end, isWrapping)).toEqual(-1); + }); + + it('should return 1 if isWrapping is true and start is greater than end', () => { + const isWrapping = true; + const start = 6; + const end = 0; + + expect(getSlideDirection(start, end, isWrapping)).toEqual(1); + }); + + it('should return 1 if isWrapping is false and start is less than end', () => { + const isWrapping = false; + const start = 0; + const end = 6; + + expect(getSlideDirection(start, end, isWrapping)).toEqual(1); + }); + + it('should return -1 if isWrapping is false and start is greater than end', () => { + const isWrapping = false; + const start = 6; + const end = 0; + + expect(getSlideDirection(start, end, isWrapping)).toEqual(-1); + }); + }); +});