{arrows &&
- showPreviousArrow(this.props, this.state.index, this.preFade)}
+ showPreviousArrow(getProps(this.props), this.state.index, this.preFade)}
- {arrows && showNextArrow(this.props, this.state.index, this.preFade)}
+ {arrows && showNextArrow(getProps(this.props), this.state.index, this.preFade)}
{indicators &&
- showIndicators(this.props, this.state.index, this.navigate)}
+ showIndicators(getProps(this.props), this.state.index, this.navigate)}
);
}
@@ -215,7 +217,7 @@ class Fade extends Component {
transitionDuration,
onChange,
easing
- } = this.props;
+ } = getProps(this.props);
const existingTweens = this.tweenGroup.getAll();
if (!existingTweens.length) {
if (!this.divsContainer.children[newIndex]) {
@@ -264,30 +266,4 @@ class Fade extends Component {
}
}
-Fade.defaultProps = {
- duration: 5000,
- transitionDuration: 1000,
- defaultIndex: 0,
- indicators: false,
- arrows: true,
- autoplay: true,
- infinite: true,
- pauseOnHover: true,
- easing: 'linear'
-};
-
-Fade.propTypes = {
- duration: PropTypes.number,
- transitionDuration: PropTypes.number,
- defaultIndex: PropTypes.number,
- indicators: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
- arrows: PropTypes.bool,
- autoplay: PropTypes.bool,
- infinite: PropTypes.bool,
- onChange: PropTypes.func,
- pauseOnHover: PropTypes.bool,
- prevArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
- nextArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
- easing: PropTypes.string
-};
export default Fade;
diff --git a/src/props.js b/src/props.js
new file mode 100644
index 0000000..f575744
--- /dev/null
+++ b/src/props.js
@@ -0,0 +1,54 @@
+const defaultProps = {
+ duration: 5000,
+ transitionDuration: 1000,
+ defaultIndex: 0,
+ infinite: true,
+ autoplay: true,
+ indicators: false,
+ arrows: true,
+ pauseOnHover: true,
+ scale: 1,
+ easing: 'linear'
+ };
+
+ export const getProps = componentProps => ({
+ ...defaultProps,
+ ...componentProps
+ });
+
+ export const propTypes = {
+ duration: 'number',
+ transitionDuration: 'number',
+ defaultIndex: 'number',
+ infinite: 'boolean',
+ indicators: ['boolean', 'function'],
+ autoplay: 'boolean',
+ arrows: 'boolean',
+ onChange: 'function',
+ pauseOnHover: 'boolean',
+ prevArrow: ['object', 'function'],
+ nextArrow: ['object', 'function'],
+ scale: 'number',
+ easing: 'string'
+ };
+
+ export const validatePropTypes = props => {
+ for (const key in props) {
+ const propValueType = typeof props[key];
+ if (propTypes[key]) {
+ if (
+ Array.isArray(propTypes[key]) &&
+ !propTypes[key].includes(propValueType)
+ ) {
+ console.warn(
+ `${key} must be of one of type ${propTypes[key].join(', ')}`
+ );
+ } else if (
+ !Array.isArray(propTypes[key]) &&
+ propValueType !== propTypes[key]
+ ) {
+ console.warn(`${key} must be of type ${propTypes[key]}`);
+ }
+ }
+ }
+ };
diff --git a/src/slide.js b/src/slide.js
index b6e148d..ace5a26 100644
--- a/src/slide.js
+++ b/src/slide.js
@@ -1,7 +1,7 @@
import React, { Component, createRef } from 'react';
import TWEEN from '@tweenjs/tween.js';
import ResizeObserver from 'resize-observer-polyfill';
-import PropTypes from 'prop-types';
+import { validatePropTypes, propTypes, getProps } from './props';
import {
getUnhandledProps,
showNextArrow,
@@ -41,7 +41,8 @@ class Slideshow extends Component {
componentDidMount() {
this.setWidth();
this.initResizeObserver();
- const { autoplay, duration } = this.props;
+ validatePropTypes(this.props);
+ const { autoplay, duration } = getProps(this.props);
if (autoplay) {
this.timeout = setTimeout(() => this.goNext(), duration);
}
@@ -117,14 +118,15 @@ class Slideshow extends Component {
}
componentDidUpdate(props) {
- if (this.props.autoplay !== props.autoplay) {
- if (this.props.autoplay) {
- this.timeout = setTimeout(() => this.goNext(), this.props.duration);
+ const { autoplay, duration, children } = getProps(this.props);
+ if (autoplay !== props.autoplay) {
+ if (autoplay) {
+ this.timeout = setTimeout(() => this.goNext(), duration);
} else {
clearTimeout(this.timeout);
}
}
- if (this.props.children.length != props.children.length) {
+ if (children.length != props.children.length) {
this.setWidth();
}
}
@@ -140,18 +142,18 @@ class Slideshow extends Component {
}
pauseSlides() {
- if (this.props.pauseOnHover) {
+ if (getProps(this.props).pauseOnHover) {
clearTimeout(this.timeout);
}
}
startSlides() {
+ const { pauseOnHover, autoplay, duration } = getProps(this.props);
if (this.state.dragging) {
this.endSwipe()
} else {
- const { pauseOnHover, autoplay } = this.props;
if (pauseOnHover && autoplay) {
- this.timeout = setTimeout(() => this.goNext(), this.props.duration);
+ this.timeout = setTimeout(() => this.goNext(), duration);
}
}
}
@@ -174,7 +176,7 @@ class Slideshow extends Component {
goNext() {
const { index } = this.state;
- const { children, infinite } = this.props;
+ const { children, infinite } = getProps(this.props);
if (!infinite && index === children.length - 1) {
return;
}
@@ -183,7 +185,7 @@ class Slideshow extends Component {
goBack() {
const { index } = this.state;
- const { infinite } = this.props;
+ const { infinite } = getProps(this.props);
if (!infinite && index === 0) {
return;
}
@@ -191,8 +193,8 @@ class Slideshow extends Component {
}
render() {
- const { children, infinite, indicators, arrows } = this.props;
- const unhandledProps = getUnhandledProps(Slideshow.propTypes, this.props);
+ const { children, indicators, arrows } = getProps(this.props);
+ const unhandledProps = getUnhandledProps(propTypes, this.props);
const { index } = this.state;
const style = {
transform: `translate(-${(index + 1) * this.width}px)`
@@ -215,7 +217,7 @@ class Slideshow extends Component {
ref={this.reactSlideshowWrapper}
>
{arrows &&
- showPreviousArrow(this.props, this.state.index, this.moveSlides)}
+ showPreviousArrow(getProps(this.props), this.state.index, this.moveSlides)}
(this.wrapper = ref)}
@@ -253,10 +255,10 @@ class Slideshow extends Component {
{arrows &&
- showNextArrow(this.props, this.state.index, this.moveSlides)}
+ showNextArrow(getProps(this.props), this.state.index, this.moveSlides)}
{indicators &&
- showIndicators(this.props, this.state.index, this.goToSlide)}
+ showIndicators(getProps(this.props), this.state.index, this.goToSlide)}
);
}
@@ -270,7 +272,7 @@ class Slideshow extends Component {
duration,
onChange,
easing
- } = this.props;
+ } = getProps(this.props);
transitionDuration = animationDuration || transitionDuration;
const existingTweens = this.tweenGroup.getAll();
if (!existingTweens.length) {
@@ -325,30 +327,4 @@ class Slideshow extends Component {
}
}
-Slideshow.defaultProps = {
- duration: 5000,
- transitionDuration: 1000,
- defaultIndex: 0,
- infinite: true,
- autoplay: true,
- indicators: false,
- arrows: true,
- pauseOnHover: true,
- easing: 'linear'
-};
-
-Slideshow.propTypes = {
- duration: PropTypes.number,
- transitionDuration: PropTypes.number,
- defaultIndex: PropTypes.number,
- infinite: PropTypes.bool,
- indicators: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
- autoplay: PropTypes.bool,
- arrows: PropTypes.bool,
- onChange: PropTypes.func,
- pauseOnHover: PropTypes.bool,
- prevArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
- nextArrow: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
- easing: PropTypes.string
-};
export default Slideshow;
diff --git a/src/zoom.js b/src/zoom.js
index c82aa49..edb4ab5 100644
--- a/src/zoom.js
+++ b/src/zoom.js
@@ -1,7 +1,7 @@
import React, { Component, createRef } from 'react';
import ResizeObserver from 'resize-observer-polyfill';
-import PropTypes from 'prop-types';
import TWEEN from '@tweenjs/tween.js';
+import { validatePropTypes, propTypes, getProps } from './props';
import {
getUnhandledProps,
showNextArrow,
@@ -38,6 +38,7 @@ class Zoom extends Component {
this.setWidth();
this.play();
this.initResizeObserver();
+ validatePropTypes(this.props);
}
initResizeObserver() {
@@ -49,13 +50,13 @@ class Zoom extends Component {
}
play() {
- const { autoplay, children } = this.props;
+ const { autoplay, children, duration } = getProps(this.props);
const { index } = this.state;
if (autoplay && children.length > 1) {
clearTimeout(this.timeout);
this.timeout = setTimeout(
() => this.zoomTo(index + 1),
- this.props.duration
+ duration
);
}
}
@@ -77,14 +78,15 @@ class Zoom extends Component {
}
componentDidUpdate(props) {
- if (this.props.autoplay !== props.autoplay) {
- if (this.props.autoplay) {
+ const { autoplay, children } = getProps(this.props);
+ if (autoplay !== props.autoplay) {
+ if (autoplay) {
this.play();
} else {
clearTimeout(this.timeout);
}
}
- if (this.props.children.length != props.children.length) {
+ if (children.length != props.children.length) {
this.applyStyle();
this.play();
}
@@ -112,21 +114,21 @@ class Zoom extends Component {
}
pauseSlides() {
- if (this.props.pauseOnHover) {
+ if (getProps(this.props).pauseOnHover) {
clearTimeout(this.timeout);
}
}
startSlides() {
- const { pauseOnHover, autoplay } = this.props;
+ const { pauseOnHover, autoplay, duration } = getProps(this.props);
if (pauseOnHover && autoplay) {
- this.timeout = setTimeout(() => this.goNext(), this.props.duration);
+ this.timeout = setTimeout(() => this.goNext(), duration);
}
}
goNext() {
const { index } = this.state;
- const { children, infinite } = this.props;
+ const { children, infinite } = getProps(this.props);
if (!infinite && index === children.length - 1) {
return;
}
@@ -135,7 +137,7 @@ class Zoom extends Component {
goBack() {
const { index } = this.state;
- const { children, infinite } = this.props;
+ const { children, infinite } = getProps(this.props);
if (!infinite && index === 0) {
return;
}
@@ -161,9 +163,9 @@ class Zoom extends Component {
}
render() {
- const { indicators, arrows, children } = this.props;
+ const { indicators, arrows, children } = getProps(this.props);
const { index } = this.state;
- const unhandledProps = getUnhandledProps(Zoom.propTypes, this.props);
+ const unhandledProps = getUnhandledProps(propTypes, this.props);
return (