Skip to content

Commit

Permalink
Minor clean up and fix a styling issue in the demo (#638)
Browse files Browse the repository at this point in the history 
* prop clean up and ordering, add slideListMargin prop to demo for scroll3d, default was causing demo styling to look off

* update demo to default to scroll transition

* remove uneccessary test that was just testing the shared function and not the actual scroll3d component

* remove getSlideDirection test from scroll-transition, add utilities test file

* typo
  • Loading branch information
@sarmeyer
sarmeyer authored Jan 14, 2020
1 parent 5933fd7 commit 9ba2db3
Show file tree
Hide file tree
Showing 8 changed files with 119 additions and 196 deletions.
15 changes: 8 additions & 7 deletions demo/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,17 @@ class App extends React.Component {
return (
<div style={{ width: '50%', margin: 'auto' }}>
<Carousel
slidesToShow={this.state.slidesToShow}
animation={this.state.animation}
cellAlign={this.state.cellAlign}
heightMode={this.state.heightMode}
slideIndex={this.state.slideIndex}
slideListMargin={0}
slidesToScroll={this.state.slidesToScroll}
withoutControls={this.state.withoutControls}
slidesToShow={this.state.slidesToShow}
transitionMode={this.state.transitionMode}
cellAlign={this.state.cellAlign}
animation={this.state.animation}
zoomScale={Number(this.state.zoomScale || 0)}
withoutControls={this.state.withoutControls}
wrapAround={this.state.wrapAround}
slideIndex={this.state.slideIndex}
heightMode={this.state.heightMode}
zoomScale={Number(this.state.zoomScale || 0)}
renderTopCenterControls={({ currentSlide }) => (
<div
style={{
Expand Down
30 changes: 15 additions & 15 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1174,27 +1174,28 @@ Carousel.propTypes = {
beforeSlide: PropTypes.func,
cellAlign: PropTypes.oneOf(['left', 'center', 'right']),
cellSpacing: PropTypes.number,
enableKeyboardControls: PropTypes.bool,
keyCodeConfig: PropTypes.exact({
previousSlide: PropTypes.arrayOf(PropTypes.number),
nextSlide: PropTypes.arrayOf(PropTypes.number),
firstSlide: PropTypes.arrayOf(PropTypes.number),
lastSlide: PropTypes.arrayOf(PropTypes.number),
pause: PropTypes.arrayOf(PropTypes.number)
}),
disableAnimation: PropTypes.bool,
disableEdgeSwiping: PropTypes.bool,
dragging: PropTypes.bool,
easing: PropTypes.string,
edgeEasing: PropTypes.string,
enableKeyboardControls: PropTypes.bool,
frameOverflow: PropTypes.string,
framePadding: PropTypes.string,
height: PropTypes.string,
heightMode: PropTypes.oneOf(['first', 'current', 'max']),
initialSlideHeight: PropTypes.number,
initialSlideWidth: PropTypes.number,
keyCodeConfig: PropTypes.exact({
previousSlide: PropTypes.arrayOf(PropTypes.number),
nextSlide: PropTypes.arrayOf(PropTypes.number),
firstSlide: PropTypes.arrayOf(PropTypes.number),
lastSlide: PropTypes.arrayOf(PropTypes.number),
pause: PropTypes.arrayOf(PropTypes.number)
}),
onDragStart: PropTypes.func,
onResize: PropTypes.func,
opacityScale: PropTypes.number,
pauseOnHover: PropTypes.bool,
renderAnnounceSlideMessage: PropTypes.func,
renderBottomCenterControls: PropTypes.func,
Expand All @@ -1207,6 +1208,7 @@ Carousel.propTypes = {
renderTopLeftControls: PropTypes.func,
renderTopRightControls: PropTypes.func,
slideIndex: PropTypes.number,
slideListMargin: PropTypes.number,
slideOffset: PropTypes.number,
slidesToScroll: PropTypes.oneOfType([
PropTypes.number,
Expand All @@ -1220,9 +1222,7 @@ Carousel.propTypes = {
vertical: PropTypes.bool,
width: PropTypes.string,
withoutControls: PropTypes.bool,
wrapAround: PropTypes.bool,
opacityScale: PropTypes.number,
slideListMargin: PropTypes.number
wrapAround: PropTypes.bool
};

Carousel.defaultProps = {
Expand All @@ -1234,17 +1234,17 @@ Carousel.defaultProps = {
beforeSlide() {},
cellAlign: 'left',
cellSpacing: 0,
enableKeyboardControls: false,
keyCodeConfig: {},
disableAnimation: false,
disableEdgeSwiping: false,
dragging: true,
easing: 'easeCircleOut',
edgeEasing: 'easeElasticOut',
enableKeyboardControls: false,
frameOverflow: 'hidden',
framePadding: '0px',
height: 'inherit',
heightMode: 'max',
keyCodeConfig: {},
onDragStart() {},
onResize() {},
pauseOnHover: true,
Expand All @@ -1253,6 +1253,7 @@ Carousel.defaultProps = {
renderCenterLeftControls: props => <PreviousButton {...props} />,
renderCenterRightControls: props => <NextButton {...props} />,
slideIndex: 0,
slideListMargin: 10,
slideOffset: 25,
slidesToScroll: 1,
slidesToShow: 1,
Expand All @@ -1264,8 +1265,7 @@ Carousel.defaultProps = {
vertical: false,
width: '100%',
withoutControls: false,
wrapAround: false,
slideListMargin: 10
wrapAround: false
};

export { NextButton, PreviousButton, PagingDots };
87 changes: 36 additions & 51 deletions src/transitions/3d-scroll-transition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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),
Expand All @@ -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:
Expand All @@ -145,7 +129,7 @@ export default class ScrollTransition3D extends React.Component {
return 0;
}
} else {
return index - this.props.currentSlide;
return index - currentSlide;
}
}

Expand Down Expand Up @@ -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)
};
}

Expand Down Expand Up @@ -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 = {
Expand All @@ -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
};
24 changes: 5 additions & 19 deletions src/transitions/scroll-transition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,17 @@ import {
getSlideHeight,
getAlignmentOffset
} from '../utilities/style-utilities';
import { getSlideDirection } from '../utilities/utilities';

const MIN_ZOOM_SCALE = 0;
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;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 (
<li
className={`slider-slide${visible ? ' slide-visible' : ''}`}
Expand Down Expand Up @@ -220,8 +206,8 @@ ScrollTransition.propTypes = {
left: PropTypes.number,
slideCount: PropTypes.number,
slideHeight: PropTypes.number,
slidesToScroll: PropTypes.number,
slideOffset: PropTypes.number,
slidesToScroll: PropTypes.number,
slideWidth: PropTypes.number,
top: PropTypes.number,
vertical: PropTypes.bool,
Expand Down
13 changes: 13 additions & 0 deletions src/utilities/utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,19 @@ export const swipeDirection = (x1, x2, y1, y2, vertical) => {
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;

Expand Down
Loading

0 comments on commit 9ba2db3

Please sign in to comment.