From 4904d7be262937aced40ae0138f489ae2c1220f8 Mon Sep 17 00:00:00 2001 From: hope-yu-fivestars <31780240+hope-yu-fivestars@users.noreply.github.com> Date: Tue, 25 Aug 2020 13:43:46 -0700 Subject: [PATCH] Add custom params for spread and opacity, add flag to enable cards to be swiped (#1) --- .npmignore | 2 +- build/index.js | 1 + package-lock.json | 62 ++++++++++++++++++++++++++++++++--------------- package.json | 4 ++- src/Cards.jsx | 21 ++++++++++------ src/constants.js | 5 ++-- src/styles.js | 23 +++++++++++++----- 7 files changed, 81 insertions(+), 37 deletions(-) create mode 100644 build/index.js diff --git a/.npmignore b/.npmignore index 2c36c52..bf38ce2 100644 --- a/.npmignore +++ b/.npmignore @@ -3,4 +3,4 @@ demo .babelrc webpack.config.js .eslintrc.json -.gitignore \ No newline at end of file +.gitignore diff --git a/build/index.js b/build/index.js new file mode 100644 index 0000000..62ce840 --- /dev/null +++ b/build/index.js @@ -0,0 +1 @@ +module.exports=function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t,n){e.exports=n(5)()},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.POSITION={PREV:"prev",NEXT:"next",CURRENT:"current",HIDDEN:"hidden"},t.ALIGNMENT={HORIZONTAL:"horizontal",VERTICAL:"vertical"},t.SPREAD={CUSTOM:"custom",NARROW:"narrow",MEDIUM:"medium",WIDE:"wide"}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t1||e((function(e,n){n.trackMouse&&(document.addEventListener(T,r),document.addEventListener(_,i));var o=t.touches?t.touches[0]:t,a=I([o.clientX,o.clientY],n.rotationAngle);return u({},e,s,{eventData:{initial:[].concat(a),first:!0},xy:a,start:t.timeStamp||0})}))},r=function(t){e((function(e,n){if(!e.xy[0]||!e.xy[1]||t.touches&&t.touches.length>1)return e;var r=t.touches?t.touches[0]:t,o=I([r.clientX,r.clientY],n.rotationAngle),a=o[0],i=o[1],c=e.xy[0]-a,s=e.xy[1]-i,h=Math.abs(c),v=Math.abs(s),O=(t.timeStamp||0)-e.start,T=Math.sqrt(h*h+v*v)/(O||1);if(ht?n>0?l:f:r>0?p:d}(h,v,c,s),y=u({},e.eventData,{event:t,absX:h,absY:v,deltaX:c,deltaY:s,velocity:T,dir:_});n.onSwiping&&n.onSwiping(y);var E=!1;return(n.onSwiping||n.onSwiped||n["onSwiped"+_])&&(E=!0),E&&n.preventDefaultTouchmoveEvent&&n.trackTouch&&t.cancelable&&t.preventDefault(),u({},e,{eventData:u({},y,{first:!1}),swiping:!0})}))},o=function(t){e((function(e,n){var r;return e.swiping&&(r=u({},e.eventData,{event:t}),n.onSwiped&&n.onSwiped(r),n["onSwiped"+r.dir]&&n["onSwiped"+r.dir](r)),u({},e,s,{eventData:r})}))},a=function(){document.removeEventListener(T,r),document.removeEventListener(_,i)},i=function(e){a(),o(e)},c=function(e){if(e&&e.addEventListener){var t=[[h,n],[v,r],[O,o]];return t.forEach((function(t){var n=t[0],r=t[1];return e.addEventListener(n,r)})),function(){return t.forEach((function(t){var n=t[0],r=t[1];return e.removeEventListener(n,r)}))}}},y={ref:function(t){null!==t&&e((function(e,n){if(e.el===t)return e;var r={};return e.el&&e.el!==t&&e.cleanUpTouch&&(e.cleanUpTouch(),r.cleanUpTouch=null),n.trackTouch&&t&&(r.cleanUpTouch=c(t)),u({},e,{el:t},r)}))}};return t.trackMouse&&(y.onMouseDown=n),[y,c]}function E(e,t,n){var r={};return!t.trackTouch&&e.cleanUpTouch?(e.cleanUpTouch(),r.cleanUpTouch=null):t.trackTouch&&!e.cleanUpTouch&&e.el&&(r.cleanUpTouch=n(e.el)),u({},e,r)}function b(e){var t=e.trackMouse,n=o.a.useRef(u({},s,{type:"hook"})),r=o.a.useRef();r.current=u({},c,e);var a=o.a.useMemo((function(){return y((function(e){return n.current=e(n.current,r.current)}),{trackMouse:t})}),[t]),i=a[0],l=a[1];return n.current=E(n.current,r.current,l),i}var S=function(e){var t,n;function r(t){var n;return(n=e.call(this,t)||this)._set=function(e){n.transientState=e(n.transientState,n.props)},n.transientState=u({},s,{type:"class"}),n}return n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,t.__proto__=n,r.prototype.render=function(){var e=this.props,t=e.className,n=e.style,r=e.nodeName,a=void 0===r?"div":r,i=e.innerRef,c=e.children,s=e.trackMouse,l=y(this._set,{trackMouse:s}),f=l[0],p=l[1];this.transientState=E(this.transientState,this.props,p);var d=i?function(e){return i(e),f.ref(e)}:f.ref;return o.a.createElement(a,u({},f,{className:t,style:n,ref:d}),c)},r}(o.a.PureComponent);S.propTypes={onSwiped:i.a.func,onSwiping:i.a.func,onSwipedUp:i.a.func,onSwipedRight:i.a.func,onSwipedDown:i.a.func,onSwipedLeft:i.a.func,delta:i.a.number,preventDefaultTouchmoveEvent:i.a.bool,nodeName:i.a.string,trackMouse:i.a.bool,trackTouch:i.a.bool,innerRef:i.a.func,rotationAngle:i.a.number},S.defaultProps=c},function(e,t,n){"use strict";var r=n(6);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,i){if(i!==r){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:a,resetWarningCache:o};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.STYLES=void 0,t.getOpacity=function(e,t){if(t)return t[e];return e===r.POSITION.HIDDEN?0:1},t.getZIndex=function(e){return e===r.POSITION.HIDDEN?0:e===r.POSITION.CURRENT?2:1},t.getTransform=function(e,t,n,o){var a=function(e,t){var n=void 0,o=void 0;e===r.SPREAD.MEDIUM?(n="-85%",o="-15%"):e===r.SPREAD.NARROW?(n="-75%",o="-25%"):e===r.SPREAD.WIDE&&(n="-95%",o="-5%");if(e===r.SPREAD.CUSTOM&&t)return t;return{prev:n,next:o}}(n,o),i=a.prev,u=a.next;if(t===r.ALIGNMENT.HORIZONTAL){if(e===r.POSITION.PREV)return"translate("+i+", -50%) scale(0.82)";if(e===r.POSITION.NEXT)return"translate("+u+", -50%) scale(0.82)"}if(t===r.ALIGNMENT.VERTICAL){if(e===r.POSITION.PREV)return"translate(-50%, "+i+") scale(0.82)";if(e===r.POSITION.NEXT)return"translate(-50%, "+u+") scale(0.82)"}return e===r.POSITION.HIDDEN?"translate(-50%, -50%) scale(0.5)":"translate(-50%, -50%)"},t.getBoxShadow=function(e,t,n){if(!n&&e===r.POSITION.CURRENT){if(t===r.ALIGNMENT.HORIZONTAL)return"30px 0px 20px -20px rgba(0, 0, 0, .4), -30px 0px 20px -20px rgba(0, 0, 0, .4)";if(t===r.ALIGNMENT.VERTICAL)return"0px 30px 20px -20px rgba(0, 0, 0, .4), 0px -30px 20px -20px rgba(0, 0, 0, .4)"}return"unset"},t.getCursor=function(e,t){if(e===r.POSITION.NEXT){if(t===r.ALIGNMENT.HORIZONTAL)return"e-resize";if(t===r.ALIGNMENT.VERTICAL)return"s-resize"}if(e===r.POSITION.PREV){if(t===r.ALIGNMENT.HORIZONTAL)return"w-resize";if(t===r.ALIGNMENT.VERTICAL)return"n-resize"}return"unset"};var r=n(2);t.STYLES={CONTAINER:{positive:"relative",width:"100%",height:"100%",margin:0,padding:0},CARD:{position:"absolute",left:"50%",top:"50%",transition:"all 0.6s"}}}]); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9f5958a..c437f79 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-card-carousel", - "version": "1.0.0-rc.1", + "version": "1.1.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3825,7 +3825,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3846,12 +3847,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3866,17 +3869,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3993,7 +3999,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4005,6 +4012,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4019,6 +4027,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4026,12 +4035,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -4050,6 +4061,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4130,7 +4142,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4142,6 +4155,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4227,7 +4241,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4263,6 +4278,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4282,6 +4298,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4325,12 +4342,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -5482,8 +5501,7 @@ "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "js-yaml": { "version": "3.13.1", @@ -5625,7 +5643,6 @@ "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" } @@ -6074,8 +6091,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -6574,7 +6590,6 @@ "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", @@ -6770,8 +6785,15 @@ "react-is": { "version": "16.10.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz", - "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==", - "dev": true + "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==" + }, + "react-swipeable": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-5.5.1.tgz", + "integrity": "sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==", + "requires": { + "prop-types": "^15.6.2" + } }, "readable-stream": { "version": "2.3.6", diff --git a/package.json b/package.json index a1252d5..280317f 100644 --- a/package.json +++ b/package.json @@ -46,5 +46,7 @@ "webpack-cli": "^3.3.9", "webpack-dev-server": "^3.9.0" }, - "dependencies": {} + "dependencies": { + "react-swipeable": "^5.5.1" + } } diff --git a/src/Cards.jsx b/src/Cards.jsx index 5fb2fae..475efb1 100644 --- a/src/Cards.jsx +++ b/src/Cards.jsx @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import { Swipeable } from 'react-swipeable' import PropTypes from 'prop-types'; import { STYLES, @@ -28,11 +29,14 @@ class Cards extends Component { static propTypes = { alignment: PropTypes.oneOf([ALIGNMENT.HORIZONTAL, ALIGNMENT.VERTICAL]), - spread: PropTypes.oneOf([SPREAD.NARROW, SPREAD.MEDIUM, SPREAD.WIDE]), + spread: PropTypes.oneOf([SPREAD.NARROW, SPREAD.MEDIUM, SPREAD.WIDE, SPREAD.CUSTOM]), + spread_custom: PropTypes.object, + opacity_custom: PropTypes.object, initial_index: PropTypes.number, disable_keydown: PropTypes.bool, disable_box_shadow: PropTypes.bool, disable_fade_in: PropTypes.bool, + enable_swipe: PropTypes.bool, autoplay: PropTypes.bool, autoplay_speed: PropTypes.number, afterChange: PropTypes.func, @@ -45,6 +49,7 @@ class Cards extends Component { disable_keydown: false, disable_box_shadow: false, disable_fade_in: false, + enable_swipe: false, autoplay: false, autoplay_speed: 5000, afterChange: () => {}, @@ -195,7 +200,7 @@ class Cards extends Component { * @returns {React.Node} */ ChildComponents = () => { - const { alignment, spread, disable_box_shadow } = this.props; + const { alignment, spread, disable_box_shadow, spread_custom, enable_swipe, opacity_custom } = this.props; return React.Children.map( this.props.children, (child, index) => { @@ -203,20 +208,22 @@ class Cards extends Component { const position = this._getCardClass(index); return ( -
this._cardOnClick(position) } style={{ ...STYLES.CARD, - opacity: getOpacity(position), + opacity: getOpacity(position, opacity_custom), zIndex: getZIndex(position), - transform: getTransform(position, alignment, spread), + transform: getTransform(position, alignment, spread, spread_custom), boxShadow: getBoxShadow(position, alignment, disable_box_shadow), cursor: getCursor(position, alignment), }} > { child } -
+ ); }); } @@ -230,4 +237,4 @@ class Cards extends Component { } } -export default Cards; \ No newline at end of file +export default Cards; diff --git a/src/constants.js b/src/constants.js index f9c15ab..afefdca 100644 --- a/src/constants.js +++ b/src/constants.js @@ -23,7 +23,8 @@ export const ALIGNMENT ={ * @returns {Object} */ export const SPREAD ={ + 'CUSTOM': 'custom', 'NARROW': 'narrow', 'MEDIUM': 'medium', - 'WIDE': 'wide' -}; \ No newline at end of file + 'WIDE': 'wide', +}; diff --git a/src/styles.js b/src/styles.js index 1ff0c88..bdade91 100644 --- a/src/styles.js +++ b/src/styles.js @@ -19,9 +19,17 @@ export const STYLES = { /** * @param {String} position + * @param {Object} custom - { 'prev': Number, + * 'next': Number, + * 'current': Number, + * 'hidden': Number} * @returns {Number} */ -export function getOpacity(position) { +export function getOpacity(position, custom) { + if (custom) { + return custom[position]; + } + if (position === POSITION.HIDDEN) return 0; return 1; } @@ -40,8 +48,8 @@ export function getZIndex(position) { * @param {String} position * @returns {String} */ -export function getTransform(position, alignment, spread) { - const { prev, next } = _getTranslationDistances(spread); +export function getTransform(position, alignment, spread, custom) { + const { prev, next } = _getTranslationDistances(spread, custom); if (alignment === ALIGNMENT.HORIZONTAL) { if (position === POSITION.PREV) return `translate(${ prev }, -50%) scale(0.82)`; @@ -91,9 +99,10 @@ export function getCursor(position, alignment) { /** * @param {String} spread + * @param {Object} custom (optional) - controls spread between the cards {prev: String, next: String} * @returns {Object} */ -function _getTranslationDistances(spread) { +function _getTranslationDistances(spread, custom) { let prev, next; if (spread === SPREAD.MEDIUM) { prev = '-85%'; @@ -107,6 +116,8 @@ function _getTranslationDistances(spread) { prev = '-95%'; next = '-5%'; } - + if (spread === SPREAD.CUSTOM && custom) { + return custom + } return { prev, next }; -} \ No newline at end of file +}