From c5478c98f376076bad7daa013b854a25a5d55a47 Mon Sep 17 00:00:00 2001 From: Femi Oladeji Date: Mon, 21 Sep 2020 19:38:26 +0200 Subject: [PATCH 1/3] remove proptypes dependency --- package-lock.json | 11 ++++++--- package.json | 1 - src/fade.js | 62 ++++++++++++++-------------------------------- src/props.js | 55 +++++++++++++++++++++++++++++++++++++++++ src/slide.js | 62 ++++++++++++++-------------------------------- src/zoom.js | 63 ++++++++++++++--------------------------------- 6 files changed, 120 insertions(+), 134 deletions(-) create mode 100644 src/props.js diff --git a/package-lock.json b/package-lock.json index 8f9cb35..02c8205 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10774,7 +10774,8 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "js-yaml": { "version": "3.13.1", @@ -11263,6 +11264,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -11922,7 +11924,8 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true }, "object-copy": { "version": "0.1.0", @@ -12656,6 +12659,7 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -12867,7 +12871,8 @@ "react-is": { "version": "16.9.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz", - "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==" + "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==", + "dev": true }, "react-router": { "version": "5.2.0", diff --git a/package.json b/package.json index 860ba48..12a51c4 100644 --- a/package.json +++ b/package.json @@ -81,7 +81,6 @@ }, "dependencies": { "@tweenjs/tween.js": "^18.1.2", - "prop-types": "^15.5.10", "resize-observer-polyfill": "^1.5.1" } } diff --git a/src/fade.js b/src/fade.js index 4148072..6300efc 100644 --- a/src/fade.js +++ b/src/fade.js @@ -1,7 +1,7 @@ import React, { Component, createRef } from 'react'; -import PropTypes from 'prop-types'; import TWEEN from '@tweenjs/tween.js'; import ResizeObserver from 'resize-observer-polyfill'; +import { validatePropTypes, propTypes, getProps } from './props'; import { getUnhandledProps, showNextArrow, @@ -39,6 +39,7 @@ class Fade extends Component { this.setWidth(); this.play(); this.initResizeObserver(); + validatePropTypes(this.props); } initResizeObserver() { @@ -50,26 +51,27 @@ class Fade 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.fadeImages(index + 1), - this.props.duration + duration ); } } 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(); } @@ -113,21 +115,21 @@ class Fade 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; } @@ -136,7 +138,7 @@ class Fade extends Component { goBack() { const { index } = this.state; - const { children, infinite } = this.props; + const { children, infinite } = getProps(this.props); if (!infinite && index === 0) { return; } @@ -162,9 +164,9 @@ class Fade extends Component { } render() { - const { indicators, children, arrows } = this.props; + const { indicators, children, arrows } = getProps(this.props); const { index } = this.state; - const unhandledProps = getUnhandledProps(Fade.propTypes, this.props); + const unhandledProps = getUnhandledProps(propTypes, this.props); return (
{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..95a322b --- /dev/null +++ b/src/props.js @@ -0,0 +1,55 @@ +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 => { + // const propKeys = Object.keys(propTypes) + 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]}`); + } + } + } + }; \ No newline at end of file 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 (
{arrows && - showPreviousArrow(this.props, this.state.index, this.preZoom)} + showPreviousArrow(getProps(this.props), this.state.index, this.preZoom)}
(this.wrapper = ref)} @@ -199,10 +201,10 @@ class Zoom extends Component { ))}
- {arrows && showNextArrow(this.props, this.state.index, this.preZoom)} + {arrows && showNextArrow(getProps(this.props), this.state.index, this.preZoom)}
{indicators && - showIndicators(this.props, this.state.index, this.navigate)} + showIndicators(getProps(this.props), this.state.index, this.navigate)} ); } @@ -218,7 +220,7 @@ class Zoom extends Component { duration, onChange, easing - } = this.props; + } = getProps(this.props); const existingTweens = this.tweenGroup.getAll(); if (!existingTweens.length) { if (!this.divsContainer.children[newIndex]) { @@ -278,31 +280,4 @@ class Zoom extends Component { } } -Zoom.defaultProps = { - duration: 5000, - transitionDuration: 1000, - defaultIndex: 0, - indicators: false, - arrows: true, - autoplay: true, - infinite: true, - pauseOnHover: true, - easing: 'linear' -}; - -Zoom.propTypes = { - duration: PropTypes.number, - transitionDuration: PropTypes.number, - defaultIndex: PropTypes.number, - indicators: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), - scale: PropTypes.number.isRequired, - 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 Zoom; From a32b1d3910fb29513a5bdfa4b2cc017a29966d0d Mon Sep 17 00:00:00 2001 From: Femi Oladeji Date: Mon, 21 Sep 2020 20:02:58 +0200 Subject: [PATCH 2/3] bump version --- package.json | 2 +- src/props.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 12a51c4..df86810 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-slideshow-image", - "version": "3.2.0", + "version": "3.3.0", "author": "Femi Oladeji", "description": "An image slideshow with react", "files": [ diff --git a/src/props.js b/src/props.js index 95a322b..f575744 100644 --- a/src/props.js +++ b/src/props.js @@ -33,7 +33,6 @@ const defaultProps = { }; export const validatePropTypes = props => { - // const propKeys = Object.keys(propTypes) for (const key in props) { const propValueType = typeof props[key]; if (propTypes[key]) { @@ -52,4 +51,4 @@ const defaultProps = { } } } - }; \ No newline at end of file + }; From eb45375cdfd548f8188fe5a6539c5e59fb61354d Mon Sep 17 00:00:00 2001 From: Femi Oladeji Date: Mon, 21 Sep 2020 20:19:30 +0200 Subject: [PATCH 3/3] Create CODE_OF_CONDUCT.md --- CODE_OF_CONDUCT.md | 76 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 CODE_OF_CONDUCT.md diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..da758ef --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,76 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or + advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at femidotexe@gmail.com. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see +https://www.contributor-covenant.org/faq