react-leaf-carousel
Advanced tools
Comparing version 1.2.2 to 2.0.0
135
.eslintrc.js
| module.exports = { | ||
| "parser": "babel-eslint", | ||
| "env": { | ||
| "browser": true, | ||
| "commonjs": true, | ||
| "es6": true, | ||
| "node": true | ||
| parser: 'babel-eslint', | ||
| env: { | ||
| browser: true, | ||
| node: true, | ||
| es6: true, | ||
| jest: true, | ||
| }, | ||
| "parserOptions": { | ||
| "ecmaFeatures": { | ||
| "jsx": true, | ||
| "modules": true, | ||
| "experimentalObjectRestSpread": true | ||
| settings: { | ||
| 'import/resolver': { | ||
| node: { | ||
| extensions: ['.js', '.jsx', '.ts', '.tsx'], | ||
| }, | ||
| }, | ||
| "sourceType": "module" | ||
| }, | ||
| "plugins": [ | ||
| "react" | ||
| extends: [ | ||
| 'airbnb', | ||
| 'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array. | ||
| 'prettier/react', | ||
| 'prettier/standard', | ||
| ], | ||
| "extends": "airbnb", | ||
| "rules": { | ||
| "semi": ["warn", "always"], | ||
| "eqeqeq": "warn", | ||
| "indent": ["warn", 2, { "SwitchCase": 1 }], | ||
| "no-console": ["warn", { "allow": ["warn", "error"] }], | ||
| "no-const-assign": "warn", | ||
| "no-this-before-super": "warn", | ||
| "no-undef": "warn", | ||
| "no-unreachable": "warn", | ||
| "no-else-return": "warn", | ||
| "no-unused-vars": "warn", | ||
| "constructor-super": "warn", | ||
| "array-bracket-spacing": ["warn", "never"], | ||
| "block-spacing": "warn", | ||
| "brace-style": "warn", | ||
| "valid-typeof": "warn", | ||
| "jsx-quotes": ["error", "prefer-single"], | ||
| "no-var": "warn", | ||
| "no-duplicate-imports": "warn", | ||
| "no-unused-expressions": "warn", | ||
| "class-methods-use-this": ["error", { | ||
| "exceptMethods": [ | ||
| "render", | ||
| "getInitialState", | ||
| "getDefaultProps", | ||
| "componentWillMount", | ||
| "componentDidMount", | ||
| "componentWillReceiveProps", | ||
| "shouldComponentUpdate", | ||
| "componentWillUpdate", | ||
| "componentDidUpdate", | ||
| "componentWillUnmount" | ||
| ] | ||
| }], | ||
| "react/display-name": 1, | ||
| "react/jsx-boolean-value": 1, | ||
| "react/jsx-closing-bracket-location": 1, | ||
| "react/jsx-curly-spacing": 1, | ||
| "react/jsx-handler-names": 0, | ||
| "react/jsx-indent-props": 1, | ||
| "react/jsx-key": 1, | ||
| "react/jsx-max-props-per-line": 1, | ||
| "react/jsx-no-bind": 1, | ||
| "react/jsx-no-duplicate-props": 1, | ||
| "react/jsx-no-literals": 1, | ||
| "react/jsx-no-undef": 1, | ||
| "react/jsx-pascal-case": 1, | ||
| "react/jsx-sort-props": [1, { | ||
| "callbacksLast": true, | ||
| "ignoreCase": false, | ||
| "shorthandFirst": true | ||
| }], | ||
| "react/jsx-uses-react": 1, | ||
| "react/jsx-uses-vars": 1, | ||
| "react/no-danger": 0, | ||
| "react/no-did-mount-set-state": 1, | ||
| "react/no-did-update-set-state": 1, | ||
| "react/no-direct-mutation-state": 1, | ||
| "react/no-multi-comp": 1, | ||
| "react/no-set-state": 0, | ||
| "react/no-unknown-property": 1, | ||
| "react/no-unused-prop-types":1, | ||
| "react/prefer-es6-class": 1, | ||
| "react/prop-types": 1, | ||
| "react/react-in-jsx-scope": 1, | ||
| "react/require-extension": 0, | ||
| "react/self-closing-comp": 1, | ||
| "react/sort-comp": 1, | ||
| "react/jsx-wrap-multilines": 1, | ||
| "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], | ||
| "react/forbid-prop-types":1 | ||
| } | ||
| }; | ||
| plugins: ['prettier'], | ||
| rules: { | ||
| 'jsx-a11y/href-no-hash': 'off', | ||
| 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], | ||
| 'react/prefer-stateless-function': [1, { ignorePureComponents: true }], | ||
| 'function-paren-newline': ['error', 'consistent'], | ||
| 'arrow-body-style': [1, 'as-needed'], | ||
| 'no-unused-vars': ['error', { vars: 'all', args: 'all', ignoreRestSiblings: false }], | ||
| 'prefer-destructuring': ['error', { object: true, array: true }], | ||
| 'react/forbid-prop-types': ['error', { forbid: [] }], | ||
| 'react/prop-types': 1, | ||
| 'max-len': [ | ||
| 2, | ||
| 150, | ||
| 2, | ||
| { | ||
| ignoreUrls: true, | ||
| ignoreComments: false, | ||
| tabWidth: 2, | ||
| }, | ||
| ], | ||
| 'no-underscore-dangle': ['error', { allow: ['__PRELOADED_STATE__'] }], | ||
| 'no-unused-expressions': 1, | ||
| 'react/no-unused-prop-types': 1, | ||
| 'no-unneeded-ternary': 2, | ||
| 'import/prefer-default-export': 1, | ||
| 'react/destructuring-assignment': [1, 'always'], | ||
| 'linebreak-style': 1, | ||
| 'import/no-extraneous-dependencies': ['error', { devDependencies: true }], | ||
| }, | ||
| }; |
@@ -1,6 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.InfiniteCarousel=t(require("react")):e.InfiniteCarousel=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=5)}([function(t,n){t.exports=e},function(e,t,n){(function(t){if("production"!==t.env.NODE_ENV){var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r};e.exports=n(6)(o,!0)}else e.exports=n(9)()}).call(t,n(2))},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(c===setTimeout)return setTimeout(e,0);if((c===n||!c)&&setTimeout)return c=setTimeout,setTimeout(e,0);try{return c(e,0)}catch(t){try{return c.call(null,e,0)}catch(t){return c.call(this,e,0)}}}function i(e){if(d===clearTimeout)return clearTimeout(e);if((d===r||!d)&&clearTimeout)return d=clearTimeout,clearTimeout(e);try{return d(e)}catch(t){try{return d.call(null,e)}catch(t){return d.call(this,e)}}}function s(){v&&p&&(v=!1,p.length?h=p.concat(h):g=-1,h.length&&a())}function a(){if(!v){var e=o(s);v=!0;for(var t=h.length;t;){for(p=h,h=[];++g<t;)p&&p[g].run();g=-1,t=h.length}p=null,v=!1,i(e)}}function l(e,t){this.fun=e,this.array=t}function u(){}var c,d,f=e.exports={};!function(){try{c="function"==typeof setTimeout?setTimeout:n}catch(e){c=n}try{d="function"==typeof clearTimeout?clearTimeout:r}catch(e){d=r}}();var p,h=[],v=!1,g=-1;f.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];h.push(new l(e,t)),1!==h.length||v||o(a)},l.prototype.run=function(){this.fun.apply(null,this.array)},f.title="browser",f.browser=!0,f.env={},f.argv=[],f.version="",f.versions={},f.on=u,f.addListener=u,f.once=u,f.off=u,f.removeListener=u,f.removeAllListeners=u,f.emit=u,f.prependListener=u,f.prependOnceListener=u,f.listeners=function(e){return[]},f.binding=function(e){throw new Error("process.binding is not supported")},f.cwd=function(){return"/"},f.chdir=function(e){throw new Error("process.chdir is not supported")},f.umask=function(){return 0}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t){function n(e,t){var n=0,r=e.length;for(n;n<r&&!1!==t(e[n],n);n++);}function r(e){return"[object Array]"===Object.prototype.toString.apply(e)}function o(e){return"function"==typeof e}e.exports={isFunction:o,isArray:r,each:n}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=n(0),c=r(u),d=n(1),f=r(d),p=n(10),h=n(18),v=n(19),g=r(v),y=n(20),m=r(y),b=n(21),w=r(b),S=function(e){function t(e){i(this,t);var n=s(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.setupBreakpointSettings=function(e){var t=e.map(function(e){return e.breakpoint}),r={};if(e.forEach(function(e){r[e.breakpoint]=e.settings}),t.length>0){t.sort(h.sortNumber),t.forEach(function(e,o){var i=void 0,s=void 0;0===o?(i=0,s=e-1):(i=t[o-1],s=e-1);var a={minWidth:i,maxWidth:s};(0,p.media)(a,function(){var t=n.props.scrollOnDevice&&(0,h.isTouchDevice)(),o=t?n.state.scrollOnDeviceProps:{},a=Object.assign({},n.defaultProps,n.props,r[e],o),l=n.getChildrenList(n.props.children,a.slidesToShow);n.setState({settings:a,children:l,lowerBreakpoint:i,higherBreakpoint:s},n.setDimensions)})}),t.reverse();var o={minWidth:t[0]};(0,p.media)(o,function(){var e=n.props.scrollOnDevice&&(0,h.isTouchDevice)(),t=e?n.state.scrollOnDeviceProps:{},r=Object.assign({},n.defaultProps,n.props,t),o=n.getChildrenList(n.props.children,r.slidesToShow);n.setState({settings:r,children:o,lowerBreakpoint:void 0,higherBreakpoint:void 0},n.setDimensions)})}},n.getSideSize=function(e,t,r){var o=n.state.settings.incrementalSides;if(void 0!==e&&void 0!==t&&o){return 50*(r-e)/(t-e)/100}return n.state.settings.sideSize},n.setDimensions=function(){var e=n.state,t=e.settings,r=e.lowerBreakpoint,o=e.higherBreakpoint,i=n.props.scrollOnDevice&&(0,h.isTouchDevice)(),s=(0,h.getScreenWidth)(),a=n.getSideSize(r,o,s),l=u.Children.count(n.props.children),c=i?l:u.Children.count(n.state.children),d=(0,h.getElementWidth)(n.frame),f=n.props.showSides,p=f?t.slidesToShow+2*a:t.slidesToShow,v=d/p-2*t.slidesSpacing,g=n.props.children.length,y=Math.ceil(n.state.currentIndex/t.slidesToShow),m=Math.ceil(g/t.slidesToShow),b=g>t.slidesToShow?m:1,w=b<=1,S=void 0,T=void 0;w||i?(S=n.state.children.map(function(e,t){return t}),T=n.state.children.map(function(e,t){return t})):(S=n.getLazyLoadedIndexes(n.props.children,n.state.currentIndex),T=n.getVisibleIndexes(n.props.children,n.state.currentIndex)),n.setState({activePage:y,childrenCount:l,slidesCount:c,slidesWidth:v,slidePages:b,singlePage:w,lazyLoadedList:S,visibleSlideList:T,sideSize:a})},n.getVisibleIndexes=function(e,t){var r=[],o=void 0,i=void 0,s=n.state.settings,a=s.showSides?1:0;if(o=e.length+s.slidesToShow+a,0===t){i=o+s.slidesToShow-1;for(var l=o;l<=i;l+=1)r.push(l)}if(o=0+a,t===e.length-s.slidesToShow){i=o+s.slidesToShow-1;for(var u=o;u<=i;u+=1)r.push(u)}o=t+n.state.settings.slidesToShow+a,i=o+(n.state.settings.slidesToShow-1);for(var c=o;c<=i;c+=1)r.push(c);return r},n.getLazyLoadedIndexes=function(e,t){var r=n.state.lazyLoadedList,o=void 0,i=void 0,s=n.state.settings,a=s.showSides?1:0;if(o=e.length+s.slidesToShow+a,0===t&&n.state.lazyLoadedList.indexOf(o)<0){i=o+s.slidesToShow+a-1;for(var l=o;l<=i;l+=1)r.push(l)}o=0;var u=t===e.length-s.slidesToShow,c=r.indexOf(o)<0;if(u&&c){i=o+s.slidesToShow+a-1;for(var d=o;d<=i;d+=1)r.push(d)}o=t+s.slidesToShow+a,i=o+(s.slidesToShow-1),n.state.settings.showSides&&(o-=1,i+=1);for(var f=o;f<=i;f+=1)n.state.lazyLoadedList.indexOf(f)<0&&r.push(f);return r},n.getChildrenList=function(e,t){return Array.isArray(e)?n.props.scrollOnDevice&&(0,h.isTouchDevice)()?e:e.length>t&&n.props.showSides?[].concat(o(e.slice(e.length-t-1,e.length)),o(e),o(e.slice(0,t+1))):e.length>t?[].concat(o(e.slice(e.length-t,e.length)),o(e),o(e.slice(0,t))):e:[e]},n.getTargetIndex=function(e,t){var r=n.state.childrenCount%t;return e<0?0===n.state.currentIndex?n.state.childrenCount-t:0:e>=n.state.childrenCount?0!==r?0:e-n.state.childrenCount:0!==r&&e===n.state.childrenCount-r?e-(t-r):e},n.onDotClick=function(e){if(e.preventDefault(),!n.state.animating){n.state.settings.autoCycle&&n.state.autoCycleTimer&&(clearInterval(n.state.autoCycleTimer),n.setState({autoCycleTimer:null}));var t=n.state.settings,r=t.slidesToShow,o=e.target.parentElement.getAttribute("data-index"),i=n.getTargetIndex(o*r,r);n.handleTrack(o*r,i),n.state.settings.autoCycle&&n.playAutoCycle()}},n.onWindowResized=function(){n.setDimensions()},n.onMouseEnter=function(){n.state.settings.autoCycle&&n.state.settings.pauseOnHover&&n.pauseAutoCycle()},n.onMouseOver=function(){n.state.settings.autoCycle&&n.state.settings.pauseOnHover&&n.pauseAutoCycle()},n.onMouseLeave=function(){n.state.settings.autoCycle&&n.state.settings.pauseOnHover&&n.playAutoCycle()},n.onSwipeStart=function(e){if(!(!1===n.state.settings.swipe||"ontouchend"in document&&!1===n.state.settings.swipe||!1===n.state.settings.draggable&&-1!==e.type.indexOf("mouse"))){var t=void 0!==e.touches?e.touches[0].pageX:e.clientX,r=void 0!==e.touches?e.touches[0].pageY:e.clientY;n.setState({dragging:!0,touchObject:{startX:t,startY:r}})}},n.onSwipeMove=function(e){if(!n.state.dragging)return void e.preventDefault();if(!n.state.animating){var t=void 0!==e.touches?e.touches[0].pageX:e.clientX,r=void 0!==e.touches?e.touches[0].pageY:e.clientY,o=n.state.touchObject,i=(0,h.getSwipeDirection)(o.startX,t,o.startY,r);0!==i&&e.preventDefault();var s=Math.round(Math.sqrt(Math.pow(t-o.startX,2)));n.setState({touchObject:{startX:o.startX,startY:o.startY,endX:t,endY:r,length:s,direction:i}})}},n.onSwipeEnd=function(){var e=n.state.touchObject.length;if(0!==e&&e>n.state.slidesWidth/2){n.state.settings.autoCycle&&n.state.autoCycleTimer&&(clearInterval(n.state.autoCycleTimer),n.setState({autoCycleTimer:null}));var t=n.state.settings,r=void 0,o=void 0;1===n.state.touchObject.direction?(r=n.state.currentIndex+t.slidesToScroll,o=n.getTargetIndex(r,t.slidesToScroll)):(r=n.state.currentIndex-t.slidesToScroll,o=n.getTargetIndex(r,t.slidesToScroll),r<0&&0!==n.state.currentIndex&&(r=0)),n.handleTrack(r,o),n.state.settings.autoCycle&&n.playAutoCycle()}else{var i=function(){setTimeout(function(){n.setState({animating:!1,dragging:!1,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1}})},n.state.settings.animationDuration)};n.setState({animating:!0,touchObject:{direction:-1*n.state.touchObject.direction}},i)}},n.getTrackStyles=function(){var e=n.state.settings,t=n.state.touchObject,r=n.state.slidesWidth+2*e.slidesSpacing;r*=n.state.slidesCount+2*e.slidesToShow;var o=n.state.slidesWidth+2*e.slidesSpacing,i=e.showSides?1:0,s=o*(e.slidesToShow+i),a=n.state.animating?"transform "+e.animationDuration+"ms ease":"",l=e.swipe&&t.length,u=l?t.length*t.direction:0,c=o*n.state.currentIndex,d=s+c+u,f=o*n.state.sideSize;return e.showSides&&(d-=f),{position:"relative",display:"block",width:n.state.singlePage?"100%":r,height:"auto",padding:0,transition:a,transform:n.state.singlePage?"none":"translate("+-d+"px, 0px)",boxSizing:"border-box",MozBoxSizing:"border-box",marginLeft:n.state.singlePage&&e.showSides?f+"px":"0px"}},n.getScrollTrackStyles={clear:"both",position:"relative",display:"block",width:"100%",height:"auto",padding:0,boxSizing:"border-box",MozBoxSizing:"border-box"},n.getSlideStyles=function(e){var t=n.state.slidesWidth,r=n.props.scrollOnDevice&&(0,h.isTouchDevice)(),o=r?"none":"left",i=e?"1":n.state.settings.sidesOpacity;return{position:"relative",float:o,display:"inline-block",width:Number.isNaN(t)?1:t,height:"auto",margin:"0 "+n.state.settings.slidesSpacing+"px",opacity:i}},n.getFormatedChildren=function(e,t,r){return u.Children.map(e,function(e,o){var i=n.state.settings,s=r.indexOf(o)>=0;return!i.lazyLoad||t.indexOf(o)>=0?c.default.createElement("li",{className:w.default.InfiniteCarouselSlide,key:o,style:n.getSlideStyles(s)},e):c.default.createElement("li",{className:w.default.InfiniteCarouselSlide,key:o,style:n.getSlideStyles(s)},c.default.createElement("img",{alt:"placeholder",src:i.placeholderImageSrc}))})},n.autoCycle=function(){var e=n.state.settings,t=n.state.currentIndex+e.slidesToScroll,r=n.getTargetIndex(t,e.slidesToScroll);n.handleTrack(t,r)},n.playAutoCycle=function(){if(n.state.settings.autoCycle){var e=setInterval(n.autoCycle,n.state.settings.cycleInterval);n.setState({autoCycleTimer:e})}},n.pauseAutoCycle=function(){n.state.autoCycleTimer&&(clearInterval(n.state.autoCycleTimer),n.setState({autoCycleTimer:null}))},n.handleTrack=function(e,t){var r=n.state.settings,o=Math.ceil(t/r.slidesToShow),i=n.getLazyLoadedIndexes(n.props.children,t),s=n.getVisibleIndexes(n.props.children,t),a=function(){setTimeout(function(){n.setState({currentIndex:t,animating:!1,dragging:!1})},r.animationDuration)},l=function(){setTimeout(function(){n.setState({animating:!1,dragging:!1})},r.animationDuration)};e<0?n.setState({currentIndex:e,activePage:o,animating:!0,lazyLoadedList:i,visibleSlideList:s,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1}},a):e>=n.props.children.length?n.setState({currentIndex:e,activePage:o,animating:!0,lazyLoadedList:i,visibleSlideList:s,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1}},a):n.setState({currentIndex:t,activePage:o,animating:!0,lazyLoadedList:i,visibleSlideList:s,dragging:!1,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1}},l),n.props.onSlideChange&&n.props.onSlideChange(o)},n.moveToNext=function(e){if(e.preventDefault(),n.props.onNextClick&&n.props.onNextClick(e),!n.state.animating){n.state.settings.autoCycle&&n.state.autoCycleTimer&&(clearInterval(n.state.autoCycleTimer),n.setState({autoCycleTimer:null}));var t=n.state.settings,r=n.state.currentIndex+t.slidesToScroll,o=n.getTargetIndex(r,t.slidesToScroll);n.handleTrack(r,o),n.state.settings.autoCycle&&n.playAutoCycle()}},n.moveToPrevious=function(e){if(e.preventDefault(),n.props.onPreviousClick&&n.props.onPreviousClick(e),!n.state.animating){n.state.settings.autoCycle&&n.state.autoCycleTimer&&(clearInterval(n.state.autoCycleTimer),n.setState({autoCycleTimer:null}));var t=n.state.settings,r=n.state.currentIndex-t.slidesToScroll,o=n.getTargetIndex(r,t.slidesToScroll);r<0&&0!==n.state.currentIndex&&(r=0),n.handleTrack(r,o),n.state.settings.autoCycle&&n.playAutoCycle()}},n.init=function(){var e=n.getChildrenList(n.props.children,n.props.slidesToShow),t=void 0;t=n.props.scrollOnDevice&&(0,h.isTouchDevice)()?Object.assign({},n.defaultProps,n.props,n.state.scrollOnDeviceProps):Object.assign({},n.defaultProps,n.props),n.setState({children:e,settings:t},function(){n.playAutoCycle()}),n.props.responsive&&n.setupBreakpointSettings(n.props.breakpoints)},n.storeFrameRef=function(e){null!==e&&(n.frame=e)},n.state={currentIndex:0,activePage:0,children:[],lazyLoadedList:[],visibleSlideList:[],childrenCount:0,slidesCount:0,slidesWidth:1,slidePages:1,singlePage:!0,settings:{},autoCycleTimer:null,dragging:!1,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1},scrollOnDeviceProps:{arrows:!1,dots:!1,lazyLoad:!1,autoCycle:!1},lowerBreakpoint:void 0,higherBreakpoint:void 0},n}return a(t,e),l(t,[{key:"componentDidMount",value:function(){this.init(),this.setDimensions(),window&&(window.addEventListener?window.addEventListener("resize",this.onWindowResized):window.attachEvent("onresize",this.onWindowResized))}},{key:"componentWillUnmount",value:function(){window.addEventListener?window.removeEventListener("resize",this.onWindowResized):window.detachEvent("onresize",this.onWindowResized),this.state.autoCycleTimer&&clearInterval(this.state.autoCycleTimer)}},{key:"render",value:function(){var e=this.props.scrollOnDevice&&(0,h.isTouchDevice)(),t=this.state.settings,n=void 0,r=void 0,o=void 0;if(t.arrows&&!this.state.singlePage&&!e){if(null==t.prevArrow)n=c.default.createElement(g.default,{next:!1,styles:w.default,onClick:this.moveToPrevious});else{var i={onClick:this.moveToPrevious};n=c.default.cloneElement(t.prevArrow,i)}if(null==t.nextArrow)r=c.default.createElement(g.default,{styles:w.default,onClick:this.moveToNext});else{var s={onClick:this.moveToNext};r=c.default.cloneElement(t.nextArrow,s)}}!t.dots||this.state.singlePage||e||(o=c.default.createElement(m.default,{activePage:this.state.activePage,numberOfDots:this.state.slidePages,styles:w.default,onClick:this.onDotClick})),!t.paging||this.state.singlePage||e||(o=c.default.createElement("span",{className:w.default.InfiniteCarouselPaging},this.state.activePage+1+" "+this.props.pagingSeparator+" "+this.state.slidePages));var a=this.state,l=a.children,u=a.lazyLoadedList,d=a.visibleSlideList,f=this.getFormatedChildren(l,u,d),p=void 0,v=void 0;this.props.scrollOnDevice&&(0,h.isTouchDevice)()?(p=Object.assign({},this.getScrollTrackStyles),v=w.default.InfiniteCarouselScrollTrack):(p=this.getTrackStyles(),v="");var y=this.props.scrollOnDevice&&(0,h.isTouchDevice)();return c.default.createElement("div",{className:w.default.InfiniteCarousel,onFocus:this.onMouseOver,onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave,onMouseOver:this.onMouseOver},n,c.default.createElement("div",{className:w.default.InfiniteCarouselFrame,ref:this.storeFrameRef},c.default.createElement("ul",{className:v,style:p,onMouseDown:y?null:this.onSwipeStart,onMouseLeave:this.state.dragging||!y?this.onSwipeEnd:null,onMouseMove:this.state.dragging||!y?this.onSwipeMove:null,onMouseUp:y?null:this.onSwipeEnd,onTouchCancel:this.state.dragging||!y?this.onSwipeEnd:null,onTouchEnd:y?null:this.onSwipeEnd,onTouchMove:this.state.dragging||!y?this.onSwipeMove:null,onTouchStart:y?null:this.onSwipeStart},f)),r,o)}}]),t}(u.Component);S.propTypes={children:f.default.oneOfType([f.default.arrayOf(f.default.node),f.default.node]),arrows:f.default.bool,dots:f.default.bool,paging:f.default.bool,pagingSeparator:f.default.string,lazyLoad:f.default.bool,swipe:f.default.bool,draggable:f.default.bool,animationDuration:f.default.number,slidesToShow:f.default.number,slidesToScroll:f.default.number,slidesSpacing:f.default.number,autoCycle:f.default.bool,cycleInterval:f.default.number,pauseOnHover:f.default.bool,responsive:f.default.bool,breakpoints:f.default.arrayOf(f.default.object),placeholderImageSrc:f.default.string,nextArrow:f.default.element,prevArrow:f.default.element,scrollOnDevice:f.default.bool,showSides:f.default.bool,sidesOpacity:f.default.number,sideSize:f.default.number,incrementalSides:f.default.bool,onSlideChange:f.default.func,onNextClick:f.default.func,onPreviousClick:f.default.func},S.defaultProps={children:[],arrows:!0,dots:!1,paging:!1,lazyLoad:!1,swipe:!0,draggable:!1,animationDuration:500,slidesToShow:1,slidesToScroll:1,slidesSpacing:10,autoCycle:!1,cycleInterval:5e3,pauseOnHover:!0,responsive:!0,breakpoints:[],placeholderImageSrc:"",pagingSeparator:"/",nextArrow:null,prevArrow:null,scrollOnDevice:!1,showSides:!1,sidesOpacity:1,sideSize:.5,incrementalSides:!1,onSlideChange:void 0,onNextClick:void 0,onPreviousClick:void 0},t.default=S},function(e,t,n){"use strict";(function(t){function r(){return null}var o=n(7),i=n(3),s=n(8),a=function(){};"production"!==t.env.NODE_ENV&&(a=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}),e.exports=function(e,n){function l(e){var t=e&&(I&&e[I]||e[E]);if("function"==typeof t)return t}function u(e,t){return e===t?0!==e||1/e==1/t:e!==e&&t!==t}function c(e){this.message=e,this.stack=""}function d(e){function r(r,l,u,d,f,p,h){if(d=d||k,p=p||u,h!==i){if(n){var v=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 v.name="Invariant Violation",v}if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var g=d+":"+u;!o[g]&&s<3&&(a("You are manually calling a React.PropTypes validation function for the `"+p+"` prop on `"+d+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),o[g]=!0,s++)}}return null==l[u]?r?new c(null===l[u]?"The "+f+" `"+p+"` is marked as required in `"+d+"`, but its value is `null`.":"The "+f+" `"+p+"` is marked as required in `"+d+"`, but its value is `undefined`."):null:e(l,u,d,f,p)}if("production"!==t.env.NODE_ENV)var o={},s=0;var l=r.bind(null,!1);return l.isRequired=r.bind(null,!0),l}function f(e){function t(t,n,r,o,i,s){var a=t[n];if(T(a)!==e)return new c("Invalid "+o+" `"+i+"` of type `"+x(a)+"` supplied to `"+r+"`, expected `"+e+"`.");return null}return d(t)}function p(e){function t(t,n,r,o,s){if("function"!=typeof e)return new c("Property `"+s+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var a=t[n];if(!Array.isArray(a)){return new c("Invalid "+o+" `"+s+"` of type `"+T(a)+"` supplied to `"+r+"`, expected an array.")}for(var l=0;l<a.length;l++){var u=e(a,l,r,o,s+"["+l+"]",i);if(u instanceof Error)return u}return null}return d(t)}function h(e){function t(t,n,r,o,i){if(!(t[n]instanceof e)){var s=e.name||k;return new c("Invalid "+o+" `"+i+"` of type `"+O(t[n])+"` supplied to `"+r+"`, expected instance of `"+s+"`.")}return null}return d(t)}function v(e){function n(t,n,r,o,i){for(var s=t[n],a=0;a<e.length;a++)if(u(s,e[a]))return null;return new c("Invalid "+o+" `"+i+"` of value `"+s+"` supplied to `"+r+"`, expected one of "+JSON.stringify(e)+".")}return Array.isArray(e)?d(n):("production"!==t.env.NODE_ENV&&a("Invalid argument supplied to oneOf, expected an instance of array."),r)}function g(e){function t(t,n,r,o,s){if("function"!=typeof e)return new c("Property `"+s+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var a=t[n],l=T(a);if("object"!==l)return new c("Invalid "+o+" `"+s+"` of type `"+l+"` supplied to `"+r+"`, expected an object.");for(var u in a)if(a.hasOwnProperty(u)){var d=e(a,u,r,o,s+"."+u,i);if(d instanceof Error)return d}return null}return d(t)}function y(e){function n(t,n,r,o,s){for(var a=0;a<e.length;a++){if(null==(0,e[a])(t,n,r,o,s,i))return null}return new c("Invalid "+o+" `"+s+"` supplied to `"+r+"`.")}if(!Array.isArray(e))return"production"!==t.env.NODE_ENV&&a("Invalid argument supplied to oneOfType, expected an instance of array."),r;for(var o=0;o<e.length;o++){var s=e[o];if("function"!=typeof s)return a("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+C(s)+" at index "+o+"."),r}return d(n)}function m(e){function t(t,n,r,o,s){var a=t[n],l=T(a);if("object"!==l)return new c("Invalid "+o+" `"+s+"` of type `"+l+"` supplied to `"+r+"`, expected `object`.");for(var u in e){var d=e[u];if(d){var f=d(a,u,r,o,s+"."+u,i);if(f)return f}}return null}return d(t)}function b(e){function t(t,n,r,s,a){var l=t[n],u=T(l);if("object"!==u)return new c("Invalid "+s+" `"+a+"` of type `"+u+"` supplied to `"+r+"`, expected `object`.");var d=o({},t[n],e);for(var f in d){var p=e[f];if(!p)return new c("Invalid "+s+" `"+a+"` key `"+f+"` supplied to `"+r+"`.\nBad object: "+JSON.stringify(t[n],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var h=p(l,f,r,s,a+"."+f,i);if(h)return h}return null}return d(t)}function w(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(w);if(null===t||e(t))return!0;var n=l(t);if(!n)return!1;var r,o=n.call(t);if(n!==t.entries){for(;!(r=o.next()).done;)if(!w(r.value))return!1}else for(;!(r=o.next()).done;){var i=r.value;if(i&&!w(i[1]))return!1}return!0;default:return!1}}function S(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function T(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":S(t,e)?"symbol":t}function x(e){if(void 0===e||null===e)return""+e;var t=T(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function C(e){var t=x(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function O(e){return e.constructor&&e.constructor.name?e.constructor.name:k}var I="function"==typeof Symbol&&Symbol.iterator,E="@@iterator",k="<<anonymous>>",j={array:f("array"),bool:f("boolean"),func:f("function"),number:f("number"),object:f("object"),string:f("string"),symbol:f("symbol"),any:function(){return d(r)}(),arrayOf:p,element:function(){function t(t,n,r,o,i){var s=t[n];if(!e(s)){return new c("Invalid "+o+" `"+i+"` of type `"+T(s)+"` supplied to `"+r+"`, expected a single ReactElement.")}return null}return d(t)}(),instanceOf:h,node:function(){function e(e,t,n,r,o){return w(e[t])?null:new c("Invalid "+r+" `"+o+"` supplied to `"+n+"`, expected a ReactNode.")}return d(e)}(),objectOf:g,oneOf:v,oneOfType:y,shape:m,exact:b};return c.prototype=Error.prototype,j.checkPropTypes=s,j.PropTypes=j,j}}).call(t,n(2))},function(e,t,n){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/* | ||
| object-assign | ||
| (c) Sindre Sorhus | ||
| @license MIT | ||
| */ | ||
| var o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,a,l=r(e),u=1;u<arguments.length;u++){n=Object(arguments[u]);for(var c in n)i.call(n,c)&&(l[c]=n[c]);if(o){a=o(n);for(var d=0;d<a.length;d++)s.call(n,a[d])&&(l[a[d]]=n[a[d]])}}return l}},function(e,t,n){"use strict";(function(t){function r(e,n,r,a,l){if("production"!==t.env.NODE_ENV)for(var u in e)if(e.hasOwnProperty(u)){var c;try{if("function"!=typeof e[u]){var d=Error((a||"React class")+": "+r+" type `"+u+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[u]+"`.");throw d.name="Invariant Violation",d}c=e[u](n,u,a,r,null,i)}catch(e){c=e}if(!c||c instanceof Error||o((a||"React class")+": type specification of "+r+" `"+u+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof c+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),c instanceof Error&&!(c.message in s)){s[c.message]=!0;var f=l?l():"";o("Failed "+r+" type: "+c.message+(null!=f?f:""))}}}var o=function(){};if("production"!==t.env.NODE_ENV){var i=n(3),s={};o=function(e){var t="Warning: "+e;"undefined"!=typeof console&&console.error(t);try{throw new Error(t)}catch(e){}}}e.exports=r}).call(t,n(2))},function(e,t,n){"use strict";function r(){}var o=n(3);e.exports=function(){function e(e,t,n,r,i,s){if(s!==o){var a=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 a.name="Invariant Violation",a}}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,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){var r=n(11),o=r&&n(12),i=n(16),s={media:function(e,t){e=i(e),"function"==typeof t&&(t={match:t}),r&&o.register(e,t),this._responsiveMediaHandlers||(this._responsiveMediaHandlers=[]),this._responsiveMediaHandlers.push({query:e,handler:t})},componentWillUnmount:function(){this._responsiveMediaHandlers&&this._responsiveMediaHandlers.forEach(function(e){r&&o.unregister(e.query,e.handler)})}};e.exports=s},function(e,t){var n=!("undefined"==typeof window||!window.document||!window.document.createElement);e.exports=n},function(e,t,n){var r=n(13);e.exports=new r},function(e,t,n){function r(){if(!window.matchMedia)throw new Error("matchMedia not present, legacy browsers require a polyfill");this.queries={},this.browserIsIncapable=!window.matchMedia("only all").matches}var o=n(14),i=n(4),s=i.each,a=i.isFunction,l=i.isArray;r.prototype={constructor:r,register:function(e,t,n){var r=this.queries,i=n&&this.browserIsIncapable;return r[e]||(r[e]=new o(e,i)),a(t)&&(t={match:t}),l(t)||(t=[t]),s(t,function(t){a(t)&&(t={match:t}),r[e].addHandler(t)}),this},unregister:function(e,t){var n=this.queries[e];return n&&(t?n.removeHandler(t):(n.clear(),delete this.queries[e])),this}},e.exports=r},function(e,t,n){function r(e,t){this.query=e,this.isUnconditional=t,this.handlers=[],this.mql=window.matchMedia(e);var n=this;this.listener=function(e){n.mql=e.currentTarget||e,n.assess()},this.mql.addListener(this.listener)}var o=n(15),i=n(4).each;r.prototype={constuctor:r,addHandler:function(e){var t=new o(e);this.handlers.push(t),this.matches()&&t.on()},removeHandler:function(e){var t=this.handlers;i(t,function(n,r){if(n.equals(e))return n.destroy(),!t.splice(r,1)})},matches:function(){return this.mql.matches||this.isUnconditional},clear:function(){i(this.handlers,function(e){e.destroy()}),this.mql.removeListener(this.listener),this.handlers.length=0},assess:function(){var e=this.matches()?"on":"off";i(this.handlers,function(t){t[e]()})}},e.exports=r},function(e,t){function n(e){this.options=e,!e.deferSetup&&this.setup()}n.prototype={constructor:n,setup:function(){this.options.setup&&this.options.setup(),this.initialised=!0},on:function(){!this.initialised&&this.setup(),this.options.match&&this.options.match()},off:function(){this.options.unmatch&&this.options.unmatch()},destroy:function(){this.options.destroy?this.options.destroy():this.off()},equals:function(e){return this.options===e||this.options.match===e}},e.exports=n},function(e,t,n){var r=n(17),o=function(e){return/[height|width]$/.test(e)},i=function(e){var t="",n=Object.keys(e);return n.forEach(function(i,s){var a=e[i];i=r(i),o(i)&&"number"==typeof a&&(a+="px"),t+=!0===a?i:!1===a?"not "+i:"("+i+": "+a+")",s<n.length-1&&(t+=" and ")}),t},s=function(e){var t="";return"string"==typeof e?e:e instanceof Array?(e.forEach(function(n,r){t+=i(n),r<e.length-1&&(t+=", ")}),t):i(e)};e.exports=s},function(e,t){var n=function(e){return e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()}).toLowerCase()};e.exports=n},function(e,t,n){"use strict";function r(e){return e.getBoundingClientRect().width||e.offsetWidth||0}function o(e){return e.getBoundingClientRect().height||e.offsetHeight||0}function i(e,t,n,r){var o=e-t,i=n-r,s=Math.round(180*Math.atan2(i,o)/Math.PI);return s<0&&(s=360-Math.abs(s)),s<=45&&s>=0?1:s<=360&&s>=315?1:s>=135&&s<=225?-1:0}function s(){return"ontouchstart"in document.documentElement}function a(e,t){return e-t}function l(){return window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth}Object.defineProperty(t,"__esModule",{value:!0}),t.getElementWidth=r,t.getElementHeight=o,t.getSwipeDirection=i,t.isTouchDevice=s,t.sortNumber=a,t.getScreenWidth=l},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){var t=e.next,n=e.onClick,r=e.styles,o=r.InfiniteCarouselArrow,i=void 0;i=t?r.InfiniteCarouselArrowNext:r.InfiniteCarouselArrowPrev;var a=r.InfiniteCarouselArrowIcon,l=void 0;l=t?r.InfiniteCarouselArrowNextIcon:r.InfiniteCarouselArrowPrevIcon;var u=o+" "+i,c=a+" "+l;return s.default.createElement("button",{className:u,onClick:n},s.default.createElement("i",{className:c}))}Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),s=r(i),a=n(1),l=r(a);o.propTypes={next:l.default.bool,onClick:l.default.func.isRequired,styles:l.default.object.isRequired},o.defaultProps={next:!0},t.default=o},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e){for(var t=e.numberOfDots,n=e.activePage,r=e.onClick,o=e.styles,i=[],a=o.InfiniteCarouselDots,l=o.InfiniteCarouselDot,u=o.InfiniteCarouselDotIcon,c=o.InfiniteCarouselDotActiveIcon,d=void 0,f=0;f<t;f+=1)d=u+" "+(f===n?c:""),i.push(s.default.createElement("button",{className:l,"data-index":f,key:f+1,onClick:r},s.default.createElement("i",{className:d})));return s.default.createElement("ul",{className:a},i)}Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),s=r(i),a=n(1),l=r(a);o.propTypes={numberOfDots:l.default.number.isRequired,activePage:l.default.number.isRequired,onClick:l.default.func.isRequired,styles:l.default.object.isRequired},t.default=o},function(e,t,n){var r=n(22);"string"==typeof r&&(r=[[e.i,r,""]]);var o={hmr:!0};o.transform=void 0;n(24)(r,o);r.locals&&(e.exports=r.locals)},function(e,t,n){t=e.exports=n(23)(!1),t.push([e.i,"._2Nde-b7zBqxE2c-pX-RLQr {\n position: relative;\n}\n\n.CB9vby5YRbJWpv7hRrZ0x {\n width: 100%;\n overflow: hidden;\n}\n\n._22fNtVvEKNZkRmg_lseZsh {\n overflow-x: scroll;\n overflow-y: hidden;\n white-space: nowrap;\n -webkit-overflow-scrolling: touch;\n overflow: -moz-scrollbars-none;\n -webkit-box-sizing: border-box\n}\n\n._22fNtVvEKNZkRmg_lseZsh::-webkit-scrollbar {\n display: none;\n}\n\n._2VaQi-Tq1LrSSO0_knReFa img {\n width: 100%;\n}\n\n._14uj14TOhgHSsQiPdsLTpZ {\n position: absolute;\n left: 50%;\n bottom: -60px;\n padding: 0;\n transform: translateX(-20%);\n font-family: Arial;\n letter-spacing: 2px;\n color: #888;\n}\n\n._1JwaBMUCMsc8QmGrT7DX45 {\n position: absolute;\n left: 50%;\n bottom: 0;\n padding: 0;\n transform: translateX(-50%);\n}\n\n._3h8t2ML6KJ6OrCXmy0O_sN {\n display: inline-block;\n list-style: none;\n margin: 0 5px;\n border: 0;\n background: none;\n cursor: pointer;\n}\n\n._37p1PaSm2K-Q8bMPwMJq9y {\n display: block;\n background-color: #E5E5E5;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n}\n\n._2WFZTqYBc3N8MmmhMS5Dii {\n background-color: #48799A;\n}\n\n._37Q_YD174b3Wq9o-IFVdKS {\n display: block;\n background: none;\n border: none;\n position: absolute;\n top: 50%;\n z-index: 2;\n outline: none;\n transform: translateY(-50%);\n cursor: pointer;\n}\n\n._3kLq2S7iaEfJAxyyJqts35 {\n left: 15px;\n right: auto;\n}\n\n._1-Hp0TfFuBlCxtdPUf_zEF {\n left: auto;\n right: 15px;\n}\n\n.GasrFbdQYtD26JnmJzJpj {\n display: inline-block;\n padding: 10px;\n border: solid #E5E5E5;\n border-width: 0 5px 5px 0;\n}\n\n._1xZXGqNvuv0yzPtZbeydfd {\n transform: rotate(-45deg);\n}\n\n.wMWnjwePCo1SMTH0APGNJ {\n transform: rotate(135deg);\n}",""]),t.locals={InfiniteCarousel:"_2Nde-b7zBqxE2c-pX-RLQr",InfiniteCarouselFrame:"CB9vby5YRbJWpv7hRrZ0x",InfiniteCarouselScrollTrack:"_22fNtVvEKNZkRmg_lseZsh",InfiniteCarouselSlide:"_2VaQi-Tq1LrSSO0_knReFa",InfiniteCarouselPaging:"_14uj14TOhgHSsQiPdsLTpZ",InfiniteCarouselDots:"_1JwaBMUCMsc8QmGrT7DX45",InfiniteCarouselDot:"_3h8t2ML6KJ6OrCXmy0O_sN",InfiniteCarouselDotIcon:"_37p1PaSm2K-Q8bMPwMJq9y",InfiniteCarouselDotActiveIcon:"_2WFZTqYBc3N8MmmhMS5Dii",InfiniteCarouselArrow:"_37Q_YD174b3Wq9o-IFVdKS",InfiniteCarouselArrowPrev:"_3kLq2S7iaEfJAxyyJqts35",InfiniteCarouselArrowNext:"_1-Hp0TfFuBlCxtdPUf_zEF",InfiniteCarouselArrowIcon:"GasrFbdQYtD26JnmJzJpj",InfiniteCarouselArrowNextIcon:"_1xZXGqNvuv0yzPtZbeydfd",InfiniteCarouselArrowPrevIcon:"wMWnjwePCo1SMTH0APGNJ"}},function(e,t){function n(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=r(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}function r(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=n(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<e.length;o++){var s=e[o];"number"==typeof s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(e,t,n){function r(e,t){for(var n=0;n<e.length;n++){var r=e[n],o=h[r.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](r.parts[i]);for(;i<r.parts.length;i++)o.parts.push(c(r.parts[i],t))}else{for(var s=[],i=0;i<r.parts.length;i++)s.push(c(r.parts[i],t));h[r.id]={id:r.id,refs:1,parts:s}}}}function o(e,t){for(var n=[],r={},o=0;o<e.length;o++){var i=e[o],s=t.base?i[0]+t.base:i[0],a=i[1],l=i[2],u=i[3],c={css:a,media:l,sourceMap:u};r[s]?r[s].parts.push(c):n.push(r[s]={id:s,parts:[c]})}return n}function i(e,t){var n=g(e.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=b[b.length-1];if("top"===e.insertAt)r?r.nextSibling?n.insertBefore(t,r.nextSibling):n.appendChild(t):n.insertBefore(t,n.firstChild),b.push(t);else if("bottom"===e.insertAt)n.appendChild(t);else{if("object"!=typeof e.insertAt||!e.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=g(e.insertInto+" "+e.insertAt.before);n.insertBefore(t,o)}}function s(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e);var t=b.indexOf(e);t>=0&&b.splice(t,1)}function a(e){var t=document.createElement("style");return e.attrs.type="text/css",u(t,e.attrs),i(e,t),t}function l(e){var t=document.createElement("link");return e.attrs.type="text/css",e.attrs.rel="stylesheet",u(t,e.attrs),i(e,t),t}function u(e,t){Object.keys(t).forEach(function(n){e.setAttribute(n,t[n])})}function c(e,t){var n,r,o,i;if(t.transform&&e.css){if(!(i=t.transform(e.css)))return function(){};e.css=i}if(t.singleton){var u=m++;n=y||(y=a(t)),r=d.bind(null,n,u,!1),o=d.bind(null,n,u,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=l(t),r=p.bind(null,n,t),o=function(){s(n),n.href&&URL.revokeObjectURL(n.href)}):(n=a(t),r=f.bind(null,n),o=function(){s(n)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}function d(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=S(t,o);else{var i=document.createTextNode(o),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(i,s[t]):e.appendChild(i)}}function f(e,t){var n=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}function p(e,t,n){var r=n.css,o=n.sourceMap,i=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||i)&&(r=w(r)),o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),a=e.href;e.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}var h={},v=function(e){var t;return function(){return void 0===t&&(t=e.apply(this,arguments)),t}}(function(){return window&&document&&document.all&&!window.atob}),g=function(e){var t={};return function(n){if(void 0===t[n]){var r=e.call(this,n);if(r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[n]=r}return t[n]}}(function(e){return document.querySelector(e)}),y=null,m=0,b=[],w=n(25);e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},t.attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=v()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var n=o(e,t);return r(n,t),function(e){for(var i=[],s=0;s<n.length;s++){var a=n[s],l=h[a.id];l.refs--,i.push(l)}if(e){r(o(e,t),t)}for(var s=0;s<i.length;s++){var l=i[s];if(0===l.refs){for(var u=0;u<l.parts.length;u++)l.parts[u]();delete h[l.id]}}}};var S=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var n=t.protocol+"//"+t.host,r=n+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var o=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});if(/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(o))return e;var i;return i=0===o.indexOf("//")?o:0===o.indexOf("/")?n+o:r+o.replace(/^\.\//,""),"url("+JSON.stringify(i)+")"})}}])}); | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.InfiniteCarousel=t(require("react")):e.InfiniteCarousel=t(e.React)}(window,function(n){return i={},r.m=o=[function(e,t,n){e.exports=n(6)()},function(e,t){e.exports=n},function(e,t,n){var o=n(16);"string"==typeof o&&(o=[[e.i,o,""]]);var r={insert:"head",singleton:!1};n(18)(o,r);o.locals&&(e.exports=o.locals)},function(e,t,n){var o=n(8),r=o&&n(9),i=n(13),a={media:function(e,t){e=i(e),"function"==typeof t&&(t={match:t}),o&&r.register(e,t),this._responsiveMediaHandlers||(this._responsiveMediaHandlers=[]),this._responsiveMediaHandlers.push({query:e,handler:t})},componentWillUnmount:function(){this._responsiveMediaHandlers&&this._responsiveMediaHandlers.forEach(function(e){o&&r.unregister(e.query,e.handler)})}};e.exports=a},function(t,e,n){(function(e){var n=e&&e.pid?e.pid.toString(36):"";function o(){var e=Date.now(),t=o.last||e;return o.last=t<e?e:t+1}t.exports=t.exports.default=function(e,t){return(e||"")+""+n+o().toString(36)+(t||"")},t.exports.process=function(e,t){return(e||"")+n+o().toString(36)+(t||"")},t.exports.time=function(e,t){return(e||"")+o().toString(36)+(t||"")}}).call(this,n(15))},function(e,t){e.exports={isFunction:function(e){return"function"==typeof e},isArray:function(e){return"[object Array]"===Object.prototype.toString.apply(e)},each:function(e,t){for(var n=0,o=e.length;n<o&&!1!==t(e[n],n);n++);}}},function(e,t,n){"use strict";var s=n(7);function o(){}function r(){}r.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,r,i){if(i!==s){var a=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 a.name="Invariant Violation",a}}function t(){return e}var n={array:e.isRequired=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:r,resetWarningCache:o};return n.PropTypes=n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t){var n=!("undefined"==typeof window||!window.document||!window.document.createElement);e.exports=n},function(e,t,n){var o=n(10);e.exports=new o},function(e,t,n){var i=n(11),o=n(5),a=o.each,s=o.isFunction,c=o.isArray;function r(){if(!window.matchMedia)throw new Error("matchMedia not present, legacy browsers require a polyfill");this.queries={},this.browserIsIncapable=!window.matchMedia("only all").matches}r.prototype={constructor:r,register:function(t,e,n){var o=this.queries,r=n&&this.browserIsIncapable;return o[t]||(o[t]=new i(t,r)),s(e)&&(e={match:e}),c(e)||(e=[e]),a(e,function(e){s(e)&&(e={match:e}),o[t].addHandler(e)}),this},unregister:function(e,t){var n=this.queries[e];return n&&(t?n.removeHandler(t):(n.clear(),delete this.queries[e])),this}},e.exports=r},function(e,t,n){var o=n(12),r=n(5).each;function i(e,t){this.query=e,this.isUnconditional=t,this.handlers=[],this.mql=window.matchMedia(e);var n=this;this.listener=function(e){n.mql=e.currentTarget||e,n.assess()},this.mql.addListener(this.listener)}i.prototype={constuctor:i,addHandler:function(e){var t=new o(e);this.handlers.push(t),this.matches()&&t.on()},removeHandler:function(n){var o=this.handlers;r(o,function(e,t){if(e.equals(n))return e.destroy(),!o.splice(t,1)})},matches:function(){return this.mql.matches||this.isUnconditional},clear:function(){r(this.handlers,function(e){e.destroy()}),this.mql.removeListener(this.listener),this.handlers.length=0},assess:function(){var t=this.matches()?"on":"off";r(this.handlers,function(e){e[t]()})}},e.exports=i},function(e,t){function n(e){(this.options=e).deferSetup||this.setup()}n.prototype={constructor:n,setup:function(){this.options.setup&&this.options.setup(),this.initialised=!0},on:function(){this.initialised||this.setup(),this.options.match&&this.options.match()},off:function(){this.options.unmatch&&this.options.unmatch()},destroy:function(){this.options.destroy?this.options.destroy():this.off()},equals:function(e){return this.options===e||this.options.match===e}},e.exports=n},function(e,t,n){function r(o){var r="",i=Object.keys(o);return i.forEach(function(e,t){var n=o[e];!function(e){return/[height|width]$/.test(e)}(e=a(e))||"number"!=typeof n||(n+="px"),r+=!0===n?e:!1===n?"not "+e:"("+e+": "+n+")",t<i.length-1&&(r+=" and ")}),r}var a=n(14);e.exports=function(n){var o="";return"string"==typeof n?n:n instanceof Array?(n.forEach(function(e,t){o+=r(e),t<n.length-1&&(o+=", ")}),o):r(n)}},function(e,t){e.exports=function(e){return e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()}).toLowerCase()}},function(e,t){var n,o,r=e.exports={};function i(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function s(t){if(n===setTimeout)return setTimeout(t,0);if((n===i||!n)&&setTimeout)return n=setTimeout,setTimeout(t,0);try{return n(t,0)}catch(e){try{return n.call(null,t,0)}catch(e){return n.call(this,t,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:i}catch(e){n=i}try{o="function"==typeof clearTimeout?clearTimeout:a}catch(e){o=a}}();var c,l=[],u=!1,d=-1;function f(){u&&c&&(u=!1,c.length?l=c.concat(l):d=-1,l.length&&p())}function p(){if(!u){var e=s(f);u=!0;for(var t=l.length;t;){for(c=l,l=[];++d<t;)c&&c[d].run();d=-1,t=l.length}c=null,u=!1,function(t){if(o===clearTimeout)return clearTimeout(t);if((o===a||!o)&&clearTimeout)return o=clearTimeout,clearTimeout(t);try{o(t)}catch(e){try{return o.call(null,t)}catch(e){return o.call(this,t)}}}(e)}}function h(e,t){this.fun=e,this.array=t}function g(){}r.nextTick=function(e){var t=new Array(arguments.length-1);if(1<arguments.length)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];l.push(new h(e,t)),1!==l.length||u||s(p)},h.prototype.run=function(){this.fun.apply(null,this.array)},r.title="browser",r.browser=!0,r.env={},r.argv=[],r.version="",r.versions={},r.on=g,r.addListener=g,r.once=g,r.off=g,r.removeListener=g,r.removeAllListeners=g,r.emit=g,r.prependListener=g,r.prependOnceListener=g,r.listeners=function(e){return[]},r.binding=function(e){throw new Error("process.binding is not supported")},r.cwd=function(){return"/"},r.chdir=function(e){throw new Error("process.chdir is not supported")},r.umask=function(){return 0}},function(e,t,n){(e.exports=n(17)(!1)).push([e.i,".InfiniteCarousel {\n position: relative;\n}\n\n.InfiniteCarouselFrame {\n width: 100%;\n overflow: hidden;\n}\n\n.InfiniteCarouselScrollTrack {\n overflow-x: scroll;\n overflow-y: hidden;\n white-space: nowrap;\n -webkit-overflow-scrolling: touch;\n overflow: -moz-scrollbars-none;\n -webkit-box-sizing: border-box;\n}\n\n.InfiniteCarouselScrollTrack::-webkit-scrollbar {\n display: none;\n}\n\n.InfiniteCarouselSlide img {\n width: 100%;\n}\n\n.InfiniteCarouselPaging {\n position: absolute;\n left: 50%;\n bottom: -60px;\n padding: 0;\n transform: translateX(-20%);\n font-family: Arial;\n letter-spacing: 2px;\n color: #888;\n}\n\n.InfiniteCarouselDots {\n position: absolute;\n left: 50%;\n bottom: 0;\n padding: 0;\n transform: translateX(-50%);\n}\n\n.InfiniteCarouselDot {\n display: inline-block;\n list-style: none;\n margin: 0 5px;\n border: 0;\n background: none;\n cursor: pointer;\n}\n\n.InfiniteCarouselDotIcon {\n display: block;\n background-color: #e5e5e5;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n}\n\n.InfiniteCarouselDotActiveIcon {\n background-color: #48799a;\n}\n\n.InfiniteCarouselArrow {\n display: block;\n background: none;\n border: none;\n position: absolute;\n top: 50%;\n z-index: 2;\n outline: none;\n transform: translateY(-50%);\n cursor: pointer;\n}\n\n.InfiniteCarouselArrowPrev {\n left: 15px;\n right: auto;\n}\n\n.InfiniteCarouselArrowNext {\n left: auto;\n right: 15px;\n}\n\n.InfiniteCarouselArrowIcon {\n display: inline-block;\n padding: 10px;\n border: solid #e5e5e5;\n border-width: 0 5px 5px 0;\n}\n\n.InfiniteCarouselArrowNextIcon {\n transform: rotate(-45deg);\n}\n\n.InfiniteCarouselArrowPrevIcon {\n transform: rotate(135deg);\n}\n",""])},function(e,t,n){"use strict";e.exports=function(n){var s=[];return s.toString=function(){return this.map(function(e){var t=function(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var r=function(e){var t=btoa(unescape(encodeURIComponent(JSON.stringify(e)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(t);return"/*# ".concat(n," */")}(o),i=o.sources.map(function(e){return"/*# sourceURL=".concat(o.sourceRoot).concat(e," */")});return[n].concat(i).concat([r]).join("\n")}return[n].join("\n")}(e,n);return e[2]?"@media ".concat(e[2],"{").concat(t,"}"):t}).join("")},s.i=function(e,t){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},o=0;o<this.length;o++){var r=this[o][0];null!=r&&(n[r]=!0)}for(var i=0;i<e.length;i++){var a=e[i];null!=a[0]&&n[a[0]]||(t&&!a[2]?a[2]=t:t&&(a[2]="(".concat(a[2],") and (").concat(t,")")),s.push(a))}},s}},function(e,t,r){"use strict";var n,o,u={},i=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},a=(o={},function(e){if(void 0===o[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}o[e]=t}return o[e]});function d(e,t){for(var n=[],o={},r=0;r<e.length;r++){var i=e[r],a=t.base?i[0]+t.base:i[0],s={css:i[1],media:i[2],sourceMap:i[3]};o[a]?o[a].parts.push(s):n.push(o[a]={id:a,parts:[s]})}return n}function f(e,t){for(var n=0;n<e.length;n++){var o=e[n],r=u[o.id],i=0;if(r){for(r.refs++;i<r.parts.length;i++)r.parts[i](o.parts[i]);for(;i<o.parts.length;i++)r.parts.push(v(o.parts[i],t))}else{for(var a=[];i<o.parts.length;i++)a.push(v(o.parts[i],t));u[o.id]={id:o.id,refs:1,parts:a}}}}function s(t){var n=document.createElement("style");if(void 0===t.attributes.nonce){var e=r.nc;e&&(t.attributes.nonce=e)}if(Object.keys(t.attributes).forEach(function(e){n.setAttribute(e,t.attributes[e])}),"function"==typeof t.insert)t.insert(n);else{var o=a(t.insert||"head");if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(n)}return n}var c,l=(c=[],function(e,t){return c[e]=t,c.filter(Boolean).join("\n")});function p(e,t,n,o){var r=n?"":o.css;if(e.styleSheet)e.styleSheet.cssText=l(t,r);else{var i=document.createTextNode(r),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}var h=null,g=0;function v(t,e){var n,o,r;if(e.singleton){var i=g++;n=h=h||s(e),o=p.bind(null,n,i,!1),r=p.bind(null,n,i,!0)}else n=s(e),o=function(e,t,n){var o=n.css,r=n.media,i=n.sourceMap;if(r&&e.setAttribute("media",r),i&&btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=o;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(o))}}.bind(null,n,e),r=function(){!function(e){if(null===e.parentNode)return;e.parentNode.removeChild(e)}(n)};return o(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;o(t=e)}else r()}}e.exports=function(e,c){(c=c||{}).attributes="object"==typeof c.attributes?c.attributes:{},c.singleton||"boolean"==typeof c.singleton||(c.singleton=i());var l=d(e,c);return f(l,c),function(e){for(var t=[],n=0;n<l.length;n++){var o=l[n],r=u[o.id];r&&(r.refs--,t.push(r))}e&&f(d(e,c),c);for(var i=0;i<t.length;i++){var a=t[i];if(0===a.refs){for(var s=0;s<a.parts.length;s++)a.parts[s]();delete u[a.id]}}}}},function(e,t,n){"use strict";n.r(t);var C=n(1),x=n.n(C),o=n(0),r=n.n(o),u=n(3),i=n(4),a=n.n(i);function O(){return"ontouchstart"in document.documentElement}function d(e,t){return e-t}n(2);function s(e){var t,n=e.carouselName,o=e.next,r=e.onClick;t=o?"InfiniteCarouselArrowNext":"InfiniteCarouselArrowPrev";var i;i=o?"InfiniteCarouselArrowNextIcon":"InfiniteCarouselArrowPrevIcon";var a="".concat("InfiniteCarouselArrow"," ").concat(t),s="".concat("InfiniteCarouselArrowIcon"," ").concat(i),c="".concat(n,"-button-").concat(o?"next":"previous");return x.a.createElement("button",{name:c,"data-testid":c,className:a,onClick:r,type:"button"},x.a.createElement("i",{className:s}))}s.propTypes={carouselName:r.a.string.isRequired,next:r.a.bool,onClick:r.a.func.isRequired},s.defaultProps={next:!0};var I=s;function c(e){for(var t,n,o=e.carouselName,r=e.numberOfDots,i=e.activePage,a=e.onClick,s=[],c=0;c<r;c+=1)t="InfiniteCarouselDotIcon ".concat(c===i?"InfiniteCarouselDotActiveIcon":""),n="".concat(o,"-dots-").concat(c),s.push(x.a.createElement("button",{name:n,"data-testid":n,className:"InfiniteCarouselDot","data-index":c,key:c+1,onClick:a,type:"button"},x.a.createElement("i",{className:t})));return x.a.createElement("ul",{"data-testid":"".concat(o,"-dots"),className:"InfiniteCarouselDots"},s)}c.propTypes={carouselName:r.a.string.isRequired,numberOfDots:r.a.number.isRequired,activePage:r.a.number.isRequired,onClick:r.a.func.isRequired};var k=c;function l(e){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function f(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function p(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,o)}return n}function E(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?p(Object(n),!0).forEach(function(e){h(t,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))})}return t}function h(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function v(e,t){return!t||"object"!==l(t)&&"function"!=typeof t?function(e){if(void 0!==e)return e;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}(e):t}function m(e){return(m=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function y(e,t){return(y=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var b=function(){function t(e){var S;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(S=v(this,m(t).call(this,e))).setupBreakpointSettings=function(e){var t=S.props,a=t.children,s=t.scrollOnDevice,c=S.state.scrollOnDeviceProps,n=e.map(function(e){return e.breakpoint}),l={};if(e.forEach(function(e){l[e.breakpoint]=e.settings}),0<n.length){n.sort(d),n.forEach(function(o,e){var r,i;i=(r=0===e?0:n[e-1],o-1);var t={minWidth:r,maxWidth:i};Object(u.media)(t,function(){var e=s&&O()?c:{},t=E({},S.defaultProps,{},S.props,{},l[o],{},e),n=S.getChildrenList(a,t.slidesToShow);S.setState({settings:t,children:n,lowerBreakpoint:r,higherBreakpoint:i},S.setDimensions)})}),n.reverse();var o={minWidth:n[0]};Object(u.media)(o,function(){var e=s&&O()?c:{},t=E({},S.defaultProps,{},S.props,{},e),n=S.getChildrenList(a,t.slidesToShow);S.setState({settings:t,children:n,lowerBreakpoint:void 0,higherBreakpoint:void 0},S.setDimensions)})}},S.getSideSize=function(e,t,n){var o=S.state.settings,r=o.incrementalSides,i=o.sideSize;return void 0!==e&&void 0!==t&&r?50*(n-e)/(t-e)/100:i},S.setDimensions=function(){var e,t,n=S.state,o=n.settings,r=n.lowerBreakpoint,i=n.higherBreakpoint,a=n.children,s=n.currentIndex,c=S.props,l=c.children,u=c.scrollOnDevice&&O(),d=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,f=S.getSideSize(r,i,d),p=C.Children.count(l),h=u?p:C.Children.count(a),g=function(e){return e.getBoundingClientRect().width||e.offsetWidth||0}(S.frame)/(S.props.showSides?o.slidesToShow+2*f:o.slidesToShow)-2*o.slidesSpacing,v=l.length,m=Math.ceil(s/o.slidesToShow),y=Math.ceil(v/o.slidesToShow),b=v>o.slidesToShow?y:1,w=b<=1;t=w||u?(e=a.map(function(e,t){return t}),[].concat(e)):(e=S.getLazyLoadedIndexes(l,s),S.getVisibleIndexes(l,s)),S.setState({activePage:m,childrenCount:p,slidesCount:h,slidesWidth:g,slidePages:b,singlePage:w,lazyLoadedList:e,visibleSlideList:t,sideSize:f})},S.getVisibleIndexes=function(e,t){var n,o,r=[],i=S.state.settings,a=i.showSides?1:0;if(n=e.length+i.slidesToShow+a,0===t){o=n+i.slidesToShow-1;for(var s=n;s<=o;s+=1)r.push(s)}if(n=0+a,t===e.length-i.slidesToShow){o=n+i.slidesToShow-1;for(var c=n;c<=o;c+=1)r.push(c)}o=(n=t+i.slidesToShow+a)+(i.slidesToShow-1);for(var l=n;l<=o;l+=1)r.push(l);return r},S.getLazyLoadedIndexes=function(e,t){var n,o,r=S.state.lazyLoadedList,i=S.state.settings,a=i.showSides?1:0,s=[].concat(r);if(n=e.length+i.slidesToShow+a,0===t&&r.indexOf(n)<0){o=n+i.slidesToShow+a-1;for(var c=n;c<=o;c+=1)s.push(c)}n=0;var l=t===e.length-i.slidesToShow,u=s.indexOf(n)<0;if(l&&u){o=n+i.slidesToShow+a-1;for(var d=n;d<=o;d+=1)s.push(d)}o=(n=t+i.slidesToShow+a)+(i.slidesToShow-1),i.showSides&&(n-=1,o+=1);for(var f=n;f<=o;f+=1)r.indexOf(f)<0&&s.push(f);return s},S.getChildrenList=function(e,t){var n=S.props,o=n.scrollOnDevice,r=n.showSides;return Array.isArray(e)?o&&O()?e:e.length>t&&r?[].concat(f(e.slice(e.length-t-1,e.length)),f(e),f(e.slice(0,t+1))):e.length>t?[].concat(f(e.slice(e.length-t,e.length)),f(e),f(e.slice(0,t))):e:[e]},S.getTargetIndex=function(e,t){var n=S.state,o=n.childrenCount,r=n.currentIndex,i=o%t;return e<0?0===r?o-t:0:o<=e?0!=i?0:e-o:0!=i&&e===o-i?e-(t-i):e},S.onDotClick=function(e){e.preventDefault();var t=S.state,n=t.settings,o=t.animating,r=t.autoCycleTimer,i=n.slidesToShow,a=n.autoCycle;if(!o){a&&r&&(clearInterval(r),S.setState({autoCycleTimer:null}));var s=e.target.parentElement.getAttribute("data-index"),c=S.getTargetIndex(s*i,i);S.handleTrack(s*i,c),n.autoCycle&&S.playAutoCycle()}},S.onWindowResized=function(){S.setDimensions()},S.onMouseEnter=function(){var e=S.state.settings,t=e.autoCycle,n=e.pauseOnHover;t&&n&&S.pauseAutoCycle()},S.onMouseOver=function(){var e=S.state.settings,t=e.autoCycle,n=e.pauseOnHover;t&&n&&S.pauseAutoCycle()},S.onMouseLeave=function(){var e=S.state.settings,t=e.autoCycle,n=e.pauseOnHover;t&&n&&S.playAutoCycle()},S.onSwipeStart=function(e){var t=S.state.settings,n=!0===t.swipe,o=t.draggable&&-1===e.type.indexOf("mouse");if(n&&o){var r=void 0!==e.touches?e.touches[0].pageX:e.clientX,i=void 0!==e.touches?e.touches[0].pageY:e.clientY;S.setState({dragging:!0,touchObject:{startX:r,startY:i}})}},S.onSwipeMove=function(e){var t=S.state,n=t.dragging,o=t.animating;if(n){if(!o){var r=void 0!==e.touches?e.touches[0].pageX:e.clientX,i=void 0!==e.touches?e.touches[0].pageY:e.clientY,a=S.state.touchObject,s=function(e,t,n,o){var r=e-t,i=n-o,a=Math.round(180*Math.atan2(i,r)/Math.PI);return a<0&&(a=360-Math.abs(a)),a<=45&&0<=a?1:a<=360&&315<=a?1:135<=a&&a<=225?-1:0}(a.startX,r,a.startY,i);0!==s&&e.preventDefault();var c=Math.round(Math.sqrt(Math.pow(r-a.startX,2)));S.setState({touchObject:{startX:a.startX,startY:a.startY,endX:r,endY:i,length:c,direction:s}})}}else e.preventDefault()},S.onSwipeEnd=function(){var e=S.state,t=e.touchObject,n=e.slidesWidth,o=e.autoCycleTimer,r=e.settings,i=e.currentIndex,a=t.length;if(0!==a&&n/2<a){var s,c;r.autoCycle&&o&&(clearInterval(o),S.setState({autoCycleTimer:null})),1===t.direction?(s=i+r.slidesToScroll,c=S.getTargetIndex(s,r.slidesToScroll)):(s=i-r.slidesToScroll,c=S.getTargetIndex(s,r.slidesToScroll),s<0&&0!==i&&(s=0)),S.handleTrack(s,c),r.autoCycle&&S.playAutoCycle()}else{S.setState({animating:!0,touchObject:{direction:-1*t.direction}},function(){setTimeout(function(){S.setState({animating:!1,dragging:!1,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1}})},r.animationDuration)})}},S.getTrackStyles=function(){var e=S.state.settings,t=S.state,n=t.touchObject,o=t.singlePage,r=t.sideSize,i=t.animating,a=t.slidesWidth,s=t.slidesCount,c=t.currentIndex,l=a+2*e.slidesSpacing;l*=s+2*e.slidesToShow;var u=a+2*e.slidesSpacing,d=e.showSides?1:0,f=u*(e.slidesToShow+d),p=i?"transform ".concat(e.animationDuration,"ms ease"):"",h=f+u*c+(e.swipe&&n.length?n.length*n.direction:0),g=u*r;return e.showSides&&(h-=g),{position:"relative",display:"block",width:o?"100%":l,height:"auto",padding:0,transition:p,transform:o?"none":"translate(".concat(-h,"px, 0px)"),boxSizing:"border-box",MozBoxSizing:"border-box",marginLeft:o&&e.showSides?"".concat(g,"px"):"0px"}},S.getScrollTrackStyles={clear:"both",position:"relative",display:"block",width:"100%",height:"auto",padding:0,boxSizing:"border-box",MozBoxSizing:"border-box"},S.getSlideStyles=function(e){var t=S.state,n=t.slidesWidth,o=t.settings,r=S.props.scrollOnDevice&&O()?"none":"left",i=e?"1":o.sidesOpacity;return{position:"relative",float:r,display:"inline-block",width:Number.isNaN(n)?1:n,height:"auto",margin:"0 ".concat(o.slidesSpacing,"px"),opacity:i}},S.getFormatedChildren=function(e,r,i){return C.Children.map(e,function(e,t){var n=S.state.settings,o=0<=i.indexOf(t);return!n.lazyLoad||0<=r.indexOf(t)?x.a.createElement("li",{className:"InfiniteCarouselSlide",key:a()("slide-"),style:S.getSlideStyles(o)},e):x.a.createElement("li",{className:"InfiniteCarouselSlide",key:a()("slide-"),style:S.getSlideStyles(o)},x.a.createElement("noscript",null,e),x.a.createElement("img",{alt:"placeholder",src:n.placeholderImageSrc}))})},S.autoCycle=function(){var e=S.state,t=e.settings,n=e.currentIndex+t.slidesToScroll,o=S.getTargetIndex(n,t.slidesToScroll);S.handleTrack(n,o)},S.playAutoCycle=function(){var e=S.state.settings;if(e.autoCycle){var t=setInterval(S.autoCycle,e.cycleInterval);S.setState({autoCycleTimer:t})}},S.pauseAutoCycle=function(){var e=S.state.autoCycleTimer;e&&(clearInterval(e),S.setState({autoCycleTimer:null}))},S.handleTrack=function(e,t){function n(){setTimeout(function(){S.setState({currentIndex:t,animating:!1,dragging:!1})},a.animationDuration)}var o=S.props,r=o.children,i=o.onSlideChange,a=S.state.settings,s=Math.ceil(t/a.slidesToShow),c=S.getLazyLoadedIndexes(r,t),l=S.getVisibleIndexes(r,t);e<0?S.setState({currentIndex:e,activePage:s,animating:!0,lazyLoadedList:c,visibleSlideList:l,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1}},n):e>=r.length?S.setState({currentIndex:e,activePage:s,animating:!0,lazyLoadedList:c,visibleSlideList:l,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1}},n):S.setState({currentIndex:t,activePage:s,animating:!0,lazyLoadedList:c,visibleSlideList:l,dragging:!1,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1}},function(){setTimeout(function(){S.setState({animating:!1,dragging:!1})},a.animationDuration)}),i&&i(s)},S.moveToNext=function(e){var t=S.props.onNextClick,n=S.state,o=n.animating,r=n.settings,i=n.currentIndex,a=n.autoCycleTimer;if(e.preventDefault(),t&&t(e),!o){r.autoCycle&&a&&(clearInterval(a),S.setState({autoCycleTimer:null}));var s=i+r.slidesToScroll,c=S.getTargetIndex(s,r.slidesToScroll);S.handleTrack(s,c),r.autoCycle&&S.playAutoCycle()}},S.moveToPrevious=function(e){var t=S.props.onPreviousClick,n=S.state,o=n.animating,r=n.settings,i=n.currentIndex,a=n.autoCycleTimer;if(e.preventDefault(),t&&t(e),!o){r.autoCycle&&a&&(clearInterval(a),S.setState({autoCycleTimer:null}));var s=i-r.slidesToScroll,c=S.getTargetIndex(s,r.slidesToScroll);s<0&&0!==i&&(s=0),S.handleTrack(s,c),r.autoCycle&&S.playAutoCycle()}},S.init=function(){var e,t=S.props,n=t.children,o=t.slidesToShow,r=t.scrollOnDevice,i=t.responsive,a=t.breakpoints,s=S.state.scrollOnDeviceProps,c=S.getChildrenList(n,o);e=r&&O()?E({},S.defaultProps,{},S.props,{},s):E({},S.defaultProps,{},S.props),S.setState({children:c,settings:e},function(){S.playAutoCycle()}),i&&S.setupBreakpointSettings(a)},S.storeFrameRef=function(e){null!==e&&(S.frame=e)},S.state={currentIndex:0,activePage:0,children:[],lazyLoadedList:[],visibleSlideList:[],childrenCount:0,slidesCount:0,slidesWidth:1,slidePages:1,singlePage:!0,settings:{},autoCycleTimer:null,dragging:!1,touchObject:{startX:0,startY:0,endX:0,endY:0,length:0,direction:-1},scrollOnDeviceProps:{arrows:!1,dots:!1,lazyLoad:!1,autoCycle:!1},lowerBreakpoint:void 0,higherBreakpoint:void 0},S}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&y(e,t)}(t,C["Component"]),function(e,t,n){t&&g(e.prototype,t),n&&g(e,n)}(t,[{key:"componentDidMount",value:function(){this.init(),this.setDimensions(),window&&(window.addEventListener?window.addEventListener("resize",this.onWindowResized):window.attachEvent("onresize",this.onWindowResized))}},{key:"componentWillUnmount",value:function(){window.addEventListener?window.removeEventListener("resize",this.onWindowResized):window.detachEvent("onresize",this.onWindowResized);var e=this.state.autoCycleTimer;e&&clearInterval(e)}},{key:"render",value:function(){var e,t,n,o=this.props,r=o.scrollOnDevice,i=o.pagingSeparator,a=o.name,s=r&&O(),c=this.state,l=c.settings,u=c.singlePage,d=c.activePage,f=c.slidePages,p=c.dragging;if(l.arrows&&!u&&!s){if(null==l.prevArrow)e=x.a.createElement(I,{carouselName:a,next:!1,onClick:this.moveToPrevious});else{var h={onClick:this.moveToPrevious};e=x.a.cloneElement(l.prevArrow,h)}if(null==l.nextArrow)t=x.a.createElement(I,{carouselName:a,onClick:this.moveToNext});else{var g={onClick:this.moveToNext};t=x.a.cloneElement(l.nextArrow,g)}}!l.dots||u||s||(n=x.a.createElement(k,{carouselName:a,activePage:d,numberOfDots:f,onClick:this.onDotClick})),!l.paging||u||s||(n=x.a.createElement("span",{"data-testid":"".concat(a,"-paging"),className:"InfiniteCarouselPaging"},"".concat(d+1," ").concat(i," ").concat(f)));var v,m,y=this.state,b=y.children,w=y.lazyLoadedList,S=y.visibleSlideList,C=this.getFormatedChildren(b,w,S);m=r&&O()?(v=E({},this.getScrollTrackStyles),"InfiniteCarouselScrollTrack"):(v=E({},this.getTrackStyles()),"");var T=r&&O();return x.a.createElement("div",{id:a,"data-testid":a,className:"InfiniteCarousel",onFocus:this.onMouseOver,onMouseEnter:this.onMouseEnter,onMouseLeave:this.onMouseLeave,onMouseOver:this.onMouseOver},e,x.a.createElement("div",{className:"InfiniteCarouselFrame",ref:this.storeFrameRef},x.a.createElement("ul",{className:m,style:v,onMouseDown:T?null:this.onSwipeStart,onMouseLeave:p||!T?this.onSwipeEnd:null,onMouseMove:p||!T?this.onSwipeMove:null,onMouseUp:T?null:this.onSwipeEnd,onTouchCancel:p||!T?this.onSwipeEnd:null,onTouchEnd:T?null:this.onSwipeEnd,onTouchMove:p||!T?this.onSwipeMove:null,onTouchStart:T?null:this.onSwipeStart},C)),t,n)}}]),t}();b.propTypes={children:r.a.oneOfType([r.a.arrayOf(r.a.node),r.a.node]),name:r.a.string,arrows:r.a.bool,dots:r.a.bool,paging:r.a.bool,pagingSeparator:r.a.string,lazyLoad:r.a.bool,swipe:r.a.bool,draggable:r.a.bool,animationDuration:r.a.number,slidesToShow:r.a.number,slidesToScroll:r.a.number,slidesSpacing:r.a.number,autoCycle:r.a.bool,cycleInterval:r.a.number,pauseOnHover:r.a.bool,responsive:r.a.bool,breakpoints:r.a.arrayOf(r.a.object),placeholderImageSrc:r.a.string,nextArrow:r.a.element,prevArrow:r.a.element,scrollOnDevice:r.a.bool,showSides:r.a.bool,sidesOpacity:r.a.number,sideSize:r.a.number,incrementalSides:r.a.bool,onSlideChange:r.a.func,onNextClick:r.a.func,onPreviousClick:r.a.func},b.defaultProps={children:[],name:"infinite-carousel",arrows:!0,dots:!1,paging:!1,lazyLoad:!1,swipe:!0,draggable:!1,animationDuration:500,slidesToShow:1,slidesToScroll:1,slidesSpacing:10,autoCycle:!1,cycleInterval:5e3,pauseOnHover:!0,responsive:!0,breakpoints:[],placeholderImageSrc:"",pagingSeparator:"/",nextArrow:null,prevArrow:null,scrollOnDevice:!1,showSides:!1,sidesOpacity:1,sideSize:.5,incrementalSides:!1,onSlideChange:void 0,onNextClick:void 0,onPreviousClick:void 0};t.default=b}],r.c=i,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=19);function r(e){if(i[e])return i[e].exports;var t=i[e]={i:e,l:!1,exports:{}};return o[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}var o,i}); |
| { | ||
| "name": "react-leaf-carousel", | ||
| "version": "1.2.2", | ||
| "version": "2.0.0", | ||
| "description": "React simple infinite carousel with lazy loading and responsive support", | ||
| "scripts": { | ||
| "build": "WEBPACK_ENV=build webpack", | ||
| "dev": "WEBPACK_ENV=dev webpack-dev-server --content-base dist/ --progress --colors --watch" | ||
| "build": "WEBPACK_ENV=build webpack --mode production", | ||
| "start": "WEBPACK_ENV=dev webpack-dev-server --mode development", | ||
| "update:packages": "node wipe-dependencies.js && rm -rf node_modules && npm update --save-dev && npm update --save", | ||
| "semantic-release": "semantic-release" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/leaffm/react-infinite-carousel.git" | ||
| "url": "https://github.com/leaffm/react-infinite-carousel.git" | ||
| }, | ||
@@ -30,32 +32,42 @@ "keywords": [ | ||
| "devDependencies": { | ||
| "babel-cli": "^6.26.0", | ||
| "babel-core": "^6.26.3", | ||
| "babel-eslint": "^8.2.6", | ||
| "babel-loader": "^7.1.5", | ||
| "babel-plugin-transform-class-properties": "^6.24.1", | ||
| "babel-preset-es2015": "^6.24.1", | ||
| "babel-preset-react": "^6.24.1", | ||
| "babel-preset-stage-0": "^6.24.1", | ||
| "css-loader": "^0.28.11", | ||
| "eslint": "^4.19.1", | ||
| "eslint-config-airbnb": "^16.1.0", | ||
| "eslint-config-airbnb-base": "^12.1.0", | ||
| "eslint-config-react-app": "^2.1.0", | ||
| "eslint-loader": "^1.9.0", | ||
| "eslint-plugin-flowtype": "^2.50.0", | ||
| "eslint-plugin-import": "^2.14.0", | ||
| "eslint-plugin-jsx-a11y": "^6.1.1", | ||
| "eslint-plugin-react": "^7.11.1", | ||
| "extract-text-webpack-plugin": "^3.0.2", | ||
| "gm-base64": "^1.1.1", | ||
| "html-webpack-plugin": "^2.30.1", | ||
| "style-loader": "^0.19.1", | ||
| "webpack": "3.8.1", | ||
| "webpack-dev-server": "2.9.4" | ||
| "@babel/cli": "*", | ||
| "@babel/core": "^7.7.5", | ||
| "@babel/plugin-proposal-object-rest-spread": "^7.7.4", | ||
| "@babel/preset-env": "^7.7.6", | ||
| "@babel/preset-es2015": "*", | ||
| "@babel/preset-react": "^7.7.4", | ||
| "@babel/preset-stage-0": "*", | ||
| "@semantic-release/npm": "^5.3.4", | ||
| "babel-eslint": "*", | ||
| "babel-loader": "^8.0.6", | ||
| "babel-plugin-transform-class-properties": "*", | ||
| "css-loader": "^3.2.0", | ||
| "eslint": "^6.7.2", | ||
| "eslint-config-airbnb": "*", | ||
| "eslint-config-airbnb-base": "*", | ||
| "eslint-config-prettier": "^6.7.0", | ||
| "eslint-config-react-app": "*", | ||
| "eslint-loader": "*", | ||
| "eslint-plugin-flowtype": "*", | ||
| "eslint-plugin-import": "*", | ||
| "eslint-plugin-jsx-a11y": "*", | ||
| "eslint-plugin-prettier": "^3.1.2", | ||
| "eslint-plugin-react": "^7.17.0", | ||
| "extract-text-webpack-plugin": "*", | ||
| "gm-base64": "*", | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "prettier": "^1.19.1", | ||
| "semantic-release": "^15.13.31", | ||
| "style-loader": "^1.0.0", | ||
| "uglifyjs-webpack-plugin": "^2.2.0", | ||
| "webpack": "^4.41.3", | ||
| "webpack-cli": "^3.3.10", | ||
| "webpack-dev-server": "^3.9.0" | ||
| }, | ||
| "dependencies": { | ||
| "prop-types": "^15.6.2", | ||
| "react": "^16.5.1", | ||
| "react-dom": "^16.5.1", | ||
| "react-responsive-mixin": "^0.4.0" | ||
| "prop-types": "^15.7.2", | ||
| "react": "^16.12.0", | ||
| "react-dom": "^16.12.0", | ||
| "react-responsive-mixin": "^0.4.0", | ||
| "uniqid": "^5.2.0" | ||
| }, | ||
@@ -70,3 +82,7 @@ "npmName": "react-leaf-carousel", | ||
| } | ||
| ] | ||
| } | ||
| ], | ||
| "publishConfig": { | ||
| "registry": "https://registry.npmjs.org/", | ||
| "tag": "latest" | ||
| } | ||
| } |
@@ -6,3 +6,3 @@ import React from 'react'; | ||
| React.initializeTouchEvents && React.initializeTouchEvents(true); | ||
| React.initializeTouchEvents && React.initializeTouchEvents(true); // eslint-disable-line no-unused-expressions | ||
| ReactDOM.render( | ||
@@ -14,5 +14,6 @@ <InfiniteCarousel | ||
| showSides | ||
| responsive | ||
| breakpoints={[ | ||
| { | ||
| breakpoint: 500, | ||
| breakpoint: 768, | ||
| settings: { | ||
@@ -24,3 +25,3 @@ slidesToScroll: 2, | ||
| { | ||
| breakpoint: 768, | ||
| breakpoint: 1200, | ||
| settings: { | ||
@@ -36,127 +37,67 @@ slidesToScroll: 3, | ||
| slidesToShow={4} | ||
| onNextClick={() => { console.log('onNextClick'); }} | ||
| onPreviousClick={() => { console.log('onPreviousClick'); }} | ||
| onNextClick={() => {}} | ||
| onPreviousClick={() => {}} | ||
| > | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=55b64e&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/55b64e/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=904098&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/904098/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=ef4d9c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/ef4d9c/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=00f3d1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/00f3d1/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=00ffff&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/00ffff/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=ee1f34&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/ee1f34/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=91b4c0&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/91b4c0/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6347&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/ff6347/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=ebbfbf&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/ebbfbf/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=def1f9&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/def1f9/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=cdf2c6&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/cdf2c6/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=9fa616&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/9fa616/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=2c4caa&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/2c4caa/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=44e3e1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/44e3e1/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6666&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/ff6666/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=94e1e3&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/94e1e3/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=29083c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/29083c/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=ffff99&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/ffff99/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=616161&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/616161/fff&fontsize=20" /> | ||
| </div> | ||
| <div> | ||
| <img | ||
| alt='' | ||
| src='https://placeholdit.imgix.net/~text?txtsize=20&bg=ed7ebe&txtclr=ffffff&txt=215%C3%97215&w=215&h=215' | ||
| /> | ||
| <img alt="" src="https://place-hold.it/215x215/ed7ebe/fff&fontsize=20" /> | ||
| </div> | ||
| </InfiniteCarousel>, | ||
| document.getElementById('root'), | ||
| document.getElementById('root') | ||
| ); |
@@ -18,9 +18,9 @@ export function getElementWidth(elem) { | ||
| } | ||
| if ((swipeAngle <= 45) && (swipeAngle >= 0)) { | ||
| if (swipeAngle <= 45 && swipeAngle >= 0) { | ||
| return 1; | ||
| } | ||
| if ((swipeAngle <= 360) && (swipeAngle >= 315)) { | ||
| if (swipeAngle <= 360 && swipeAngle >= 315) { | ||
| return 1; | ||
| } | ||
| if ((swipeAngle >= 135) && (swipeAngle <= 225)) { | ||
| if (swipeAngle >= 135 && swipeAngle <= 225) { | ||
| return -1; | ||
@@ -27,0 +27,0 @@ } |
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import './InfiniteCarousel.css'; | ||
| function InfiniteCarouselArrow({ next, onClick, styles }) { | ||
| const arrowClassName = styles.InfiniteCarouselArrow; | ||
| function InfiniteCarouselArrow({ carouselName, next, onClick }) { | ||
| const arrowClassName = 'InfiniteCarouselArrow'; | ||
| let typeClassName; | ||
| if (next) { | ||
| typeClassName = styles.InfiniteCarouselArrowNext; | ||
| typeClassName = 'InfiniteCarouselArrowNext'; | ||
| } else { | ||
| typeClassName = styles.InfiniteCarouselArrowPrev; | ||
| typeClassName = 'InfiniteCarouselArrowPrev'; | ||
| } | ||
| const iconClassName = styles.InfiniteCarouselArrowIcon; | ||
| const iconClassName = 'InfiniteCarouselArrowIcon'; | ||
| let iconTypeClassName; | ||
| if (next) { | ||
| iconTypeClassName = styles.InfiniteCarouselArrowNextIcon; | ||
| iconTypeClassName = 'InfiniteCarouselArrowNextIcon'; | ||
| } else { | ||
| iconTypeClassName = styles.InfiniteCarouselArrowPrevIcon; | ||
| iconTypeClassName = 'InfiniteCarouselArrowPrevIcon'; | ||
| } | ||
@@ -23,7 +24,11 @@ | ||
| const classNameIcon = `${iconClassName} ${iconTypeClassName}`; | ||
| const buttonName = `${carouselName}-button-${next ? 'next' : 'previous'}`; | ||
| return ( | ||
| <button | ||
| name={buttonName} | ||
| data-testid={buttonName} | ||
| className={className} | ||
| onClick={onClick} | ||
| type="button" | ||
| > | ||
@@ -36,5 +41,5 @@ <i className={classNameIcon} /> | ||
| InfiniteCarouselArrow.propTypes = { | ||
| carouselName: PropTypes.string.isRequired, | ||
| next: PropTypes.bool, | ||
| onClick: PropTypes.func.isRequired, | ||
| styles: PropTypes.object.isRequired, | ||
| }; | ||
@@ -41,0 +46,0 @@ |
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import './InfiniteCarousel.css'; | ||
| function InfiniteCarouselDots({ | ||
| numberOfDots, activePage, onClick, styles, | ||
| }) { | ||
| function InfiniteCarouselDots({ carouselName, numberOfDots, activePage, onClick }) { | ||
| const dots = []; | ||
| const className = styles.InfiniteCarouselDots; | ||
| const dotClassName = styles.InfiniteCarouselDot; | ||
| const dotIconClassName = styles.InfiniteCarouselDotIcon; | ||
| const activeClass = styles.InfiniteCarouselDotActiveIcon; | ||
| let classNameIcon; | ||
| let dotName; | ||
| for (let i = 0; i < numberOfDots; i += 1) { | ||
| classNameIcon = `${dotIconClassName} ${i === activePage ? activeClass : ''}`; | ||
| dots.push(<button className={dotClassName} data-index={i} key={i + 1} onClick={onClick}> | ||
| <i className={classNameIcon} /> | ||
| </button>); // eslint-disable-line react/jsx-closing-tag-location | ||
| classNameIcon = `InfiniteCarouselDotIcon ${ | ||
| i === activePage ? 'InfiniteCarouselDotActiveIcon' : '' | ||
| }`; | ||
| dotName = `${carouselName}-dots-${i}`; | ||
| dots.push( | ||
| <button | ||
| name={dotName} | ||
| data-testid={dotName} | ||
| className="InfiniteCarouselDot" | ||
| data-index={i} | ||
| key={i + 1} | ||
| onClick={onClick} | ||
| type="button" | ||
| > | ||
| <i className={classNameIcon} /> | ||
| </button> | ||
| ); // eslint-disable-line react/jsx-closing-tag-location | ||
| } | ||
| return ( | ||
| <ul className={className}> | ||
| <ul data-testid={`${carouselName}-dots`} className="InfiniteCarouselDots"> | ||
| {dots} | ||
@@ -29,8 +38,8 @@ </ul> | ||
| InfiniteCarouselDots.propTypes = { | ||
| carouselName: PropTypes.string.isRequired, | ||
| numberOfDots: PropTypes.number.isRequired, | ||
| activePage: PropTypes.number.isRequired, | ||
| onClick: PropTypes.func.isRequired, | ||
| styles: PropTypes.object.isRequired, | ||
| }; | ||
| export default InfiniteCarouselDots; |
741
src/index.js
@@ -1,7 +0,5 @@ | ||
| import React, { | ||
| Component, | ||
| Children, | ||
| } from 'react'; | ||
| import React, { Component, Children } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { media } from 'react-responsive-mixin'; | ||
| import uniqid from 'uniqid'; | ||
| import { | ||
@@ -16,69 +14,5 @@ getElementWidth, | ||
| import InfiniteCarouselDots from './components/InfiniteCarouselDots'; | ||
| import styles from './components/InfiniteCarousel.css'; | ||
| import './components/InfiniteCarousel.css'; | ||
| class InfiniteCarousel extends Component { | ||
| static propTypes = { | ||
| children: PropTypes.oneOfType([ | ||
| PropTypes.arrayOf(PropTypes.node), | ||
| PropTypes.node, | ||
| ]), | ||
| arrows: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| dots: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| paging: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| pagingSeparator: PropTypes.string, | ||
| lazyLoad: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| swipe: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| draggable: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| animationDuration: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| slidesToShow: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| slidesToScroll: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| slidesSpacing: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| autoCycle: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| cycleInterval: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| pauseOnHover: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| responsive: PropTypes.bool, | ||
| breakpoints: PropTypes.arrayOf(PropTypes.object), | ||
| placeholderImageSrc: PropTypes.string, // eslint-disable-line react/no-unused-prop-types | ||
| nextArrow: PropTypes.element, // eslint-disable-line react/no-unused-prop-types | ||
| prevArrow: PropTypes.element, // eslint-disable-line react/no-unused-prop-types | ||
| scrollOnDevice: PropTypes.bool, | ||
| showSides: PropTypes.bool, | ||
| sidesOpacity: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| sideSize: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| incrementalSides: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types, | ||
| onSlideChange: PropTypes.func, | ||
| onNextClick: PropTypes.func, | ||
| onPreviousClick: PropTypes.func, | ||
| }; | ||
| static defaultProps = { | ||
| children: [], | ||
| arrows: true, | ||
| dots: false, | ||
| paging: false, | ||
| lazyLoad: false, | ||
| swipe: true, | ||
| draggable: false, | ||
| animationDuration: 500, | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| slidesSpacing: 10, | ||
| autoCycle: false, | ||
| cycleInterval: 5000, | ||
| pauseOnHover: true, | ||
| responsive: true, | ||
| breakpoints: [], | ||
| placeholderImageSrc: '', | ||
| pagingSeparator: '/', | ||
| nextArrow: null, | ||
| prevArrow: null, | ||
| scrollOnDevice: false, | ||
| showSides: false, | ||
| sidesOpacity: 1, | ||
| sideSize: 0.5, | ||
| incrementalSides: false, | ||
| onSlideChange: undefined, | ||
| onNextClick: undefined, | ||
| onPreviousClick: undefined, | ||
| }; | ||
| constructor(props) { | ||
@@ -142,11 +76,16 @@ super(props); | ||
| } | ||
| if (this.state.autoCycleTimer) { | ||
| clearInterval(this.state.autoCycleTimer); | ||
| const { autoCycleTimer } = this.state; | ||
| if (autoCycleTimer) { | ||
| clearInterval(autoCycleTimer); | ||
| } | ||
| } | ||
| setupBreakpointSettings = (breakpointsSettings) => { | ||
| setupBreakpointSettings = breakpointsSettings => { | ||
| const { children: propChildren, scrollOnDevice: propScrollOnDevice } = this.props; | ||
| const { scrollOnDeviceProps: stateScrollOnDeviceProps } = this.state; | ||
| const breakpoints = breakpointsSettings.map(element => element.breakpoint); | ||
| const settings = {}; | ||
| breakpointsSettings.forEach((element) => { settings[element.breakpoint] = element.settings; }); | ||
| breakpointsSettings.forEach(element => { | ||
| settings[element.breakpoint] = element.settings; | ||
| }); | ||
| if (breakpoints.length > 0) { | ||
@@ -170,18 +109,20 @@ breakpoints.sort(sortNumber); | ||
| media(query, () => { | ||
| const scrollOnDevice = this.props.scrollOnDevice && isTouchDevice(); | ||
| const scrollOnDeviceProps = scrollOnDevice ? this.state.scrollOnDeviceProps : {}; | ||
| const newSettings = Object.assign( | ||
| {}, | ||
| this.defaultProps, | ||
| this.props, | ||
| settings[element], | ||
| scrollOnDeviceProps, | ||
| const scrollOnDevice = propScrollOnDevice && isTouchDevice(); | ||
| const scrollOnDeviceProps = scrollOnDevice ? stateScrollOnDeviceProps : {}; | ||
| const newSettings = { | ||
| ...this.defaultProps, | ||
| ...this.props, | ||
| ...settings[element], | ||
| ...scrollOnDeviceProps, | ||
| }; | ||
| const children = this.getChildrenList(propChildren, newSettings.slidesToShow); | ||
| this.setState( | ||
| { | ||
| settings: newSettings, | ||
| children, | ||
| lowerBreakpoint, | ||
| higherBreakpoint, | ||
| }, | ||
| this.setDimensions | ||
| ); | ||
| const children = this.getChildrenList(this.props.children, newSettings.slidesToShow); | ||
| this.setState({ | ||
| settings: newSettings, | ||
| children, | ||
| lowerBreakpoint, | ||
| higherBreakpoint, | ||
| }, this.setDimensions); | ||
| }); | ||
@@ -194,12 +135,15 @@ }); | ||
| media(query, () => { | ||
| const scrollOnDevice = this.props.scrollOnDevice && isTouchDevice(); | ||
| const scrollOnDeviceProps = scrollOnDevice ? this.state.scrollOnDeviceProps : {}; | ||
| const newSettings = Object.assign({}, this.defaultProps, this.props, scrollOnDeviceProps); | ||
| const children = this.getChildrenList(this.props.children, newSettings.slidesToShow); | ||
| this.setState({ | ||
| settings: newSettings, | ||
| children, | ||
| lowerBreakpoint: undefined, | ||
| higherBreakpoint: undefined, | ||
| }, this.setDimensions); | ||
| const scrollOnDevice = propScrollOnDevice && isTouchDevice(); | ||
| const scrollOnDeviceProps = scrollOnDevice ? stateScrollOnDeviceProps : {}; | ||
| const newSettings = { ...this.defaultProps, ...this.props, ...scrollOnDeviceProps }; | ||
| const children = this.getChildrenList(propChildren, newSettings.slidesToShow); | ||
| this.setState( | ||
| { | ||
| settings: newSettings, | ||
| children, | ||
| lowerBreakpoint: undefined, | ||
| higherBreakpoint: undefined, | ||
| }, | ||
| this.setDimensions | ||
| ); | ||
| }); | ||
@@ -210,3 +154,5 @@ } | ||
| getSideSize = (lowerBreakpoint, higherBreakpoint, currentScreenWidth) => { | ||
| const { incrementalSides } = this.state.settings; | ||
| const { | ||
| settings: { incrementalSides, sideSize }, | ||
| } = this.state; | ||
@@ -221,18 +167,19 @@ if (lowerBreakpoint !== undefined && higherBreakpoint !== undefined && incrementalSides) { | ||
| return this.state.settings.sideSize; | ||
| return sideSize; | ||
| }; | ||
| setDimensions = () => { | ||
| const { settings, lowerBreakpoint, higherBreakpoint } = this.state; | ||
| const scrollOnDevice = this.props.scrollOnDevice && isTouchDevice(); | ||
| const { settings, lowerBreakpoint, higherBreakpoint, children, currentIndex } = this.state; | ||
| const { children: propChildren, scrollOnDevice: propScrollOnDevice } = this.props; | ||
| const scrollOnDevice = propScrollOnDevice && isTouchDevice(); | ||
| const currentScreenWidth = getScreenWidth(); | ||
| const sideSize = this.getSideSize(lowerBreakpoint, higherBreakpoint, currentScreenWidth); | ||
| const childrenCount = Children.count(this.props.children); | ||
| const slidesCount = scrollOnDevice ? childrenCount : Children.count(this.state.children); | ||
| const childrenCount = Children.count(propChildren); | ||
| const slidesCount = scrollOnDevice ? childrenCount : Children.count(children); | ||
| const frameWidth = getElementWidth(this.frame); | ||
| const { showSides } = this.props; | ||
| const slidesToShow = showSides ? settings.slidesToShow + (sideSize * 2) : settings.slidesToShow; | ||
| const slidesWidth = (frameWidth / slidesToShow) - (settings.slidesSpacing * 2); | ||
| const childrenLength = this.props.children.length; | ||
| const activePage = Math.ceil(this.state.currentIndex / settings.slidesToShow); | ||
| const slidesToShow = showSides ? settings.slidesToShow + sideSize * 2 : settings.slidesToShow; | ||
| const slidesWidth = frameWidth / slidesToShow - settings.slidesSpacing * 2; | ||
| const childrenLength = propChildren.length; | ||
| const activePage = Math.ceil(currentIndex / settings.slidesToShow); | ||
| const countPages = Math.ceil(childrenLength / settings.slidesToShow); | ||
@@ -245,7 +192,8 @@ const slidePages = childrenLength > settings.slidesToShow ? countPages : 1; | ||
| if (singlePage || scrollOnDevice) { | ||
| lazyLoadedList = this.state.children.map((child, index) => index); | ||
| visibleSlideList = this.state.children.map((child, index) => index); | ||
| // jshint unused:true | ||
| lazyLoadedList = children.map((_child, index) => index); // eslint-disable-line no-unused-vars | ||
| visibleSlideList = [].concat(lazyLoadedList); | ||
| } else { | ||
| lazyLoadedList = this.getLazyLoadedIndexes(this.props.children, this.state.currentIndex); | ||
| visibleSlideList = this.getVisibleIndexes(this.props.children, this.state.currentIndex); | ||
| lazyLoadedList = this.getLazyLoadedIndexes(propChildren, currentIndex); | ||
| visibleSlideList = this.getVisibleIndexes(propChildren, currentIndex); | ||
| } | ||
@@ -275,3 +223,3 @@ | ||
| if (currentIndex === 0) { | ||
| limit = (start + settings.slidesToShow) - 1; | ||
| limit = start + settings.slidesToShow - 1; | ||
| for (let index = start; index <= limit; index += 1) { | ||
@@ -286,3 +234,3 @@ visibleIndexes.push(index); | ||
| if (isAtLastPage) { | ||
| limit = (start + settings.slidesToShow) - 1; | ||
| limit = start + settings.slidesToShow - 1; | ||
| for (let index = start; index <= limit; index += 1) { | ||
@@ -293,4 +241,4 @@ visibleIndexes.push(index); | ||
| start = currentIndex + this.state.settings.slidesToShow + showSidesSlide; | ||
| limit = start + (this.state.settings.slidesToShow - 1); | ||
| start = currentIndex + settings.slidesToShow + showSidesSlide; | ||
| limit = start + (settings.slidesToShow - 1); | ||
| for (let index = start; index <= limit; index += 1) { | ||
@@ -309,8 +257,9 @@ visibleIndexes.push(index); | ||
| const showSidesSlide = settings.showSides ? 1 : 0; | ||
| const newLazyLoadedList = [].concat(lazyLoadedList); | ||
| start = children.length + settings.slidesToShow + showSidesSlide; | ||
| if (currentIndex === 0 && this.state.lazyLoadedList.indexOf(start) < 0) { | ||
| limit = (start + settings.slidesToShow + showSidesSlide) - 1; | ||
| if (currentIndex === 0 && lazyLoadedList.indexOf(start) < 0) { | ||
| limit = start + settings.slidesToShow + showSidesSlide - 1; | ||
| for (let index = start; index <= limit; index += 1) { | ||
| lazyLoadedList.push(index); | ||
| newLazyLoadedList.push(index); | ||
| } | ||
@@ -321,8 +270,8 @@ } | ||
| const isAtLastPage = currentIndex === children.length - settings.slidesToShow; | ||
| const notLazyLoaded = lazyLoadedList.indexOf(start) < 0; | ||
| const notLazyLoaded = newLazyLoadedList.indexOf(start) < 0; | ||
| if (isAtLastPage && notLazyLoaded) { | ||
| limit = (start + settings.slidesToShow + showSidesSlide) - 1; | ||
| limit = start + settings.slidesToShow + showSidesSlide - 1; | ||
| for (let index = start; index <= limit; index += 1) { | ||
| lazyLoadedList.push(index); | ||
| newLazyLoadedList.push(index); | ||
| } | ||
@@ -334,3 +283,3 @@ } | ||
| if (this.state.settings.showSides) { | ||
| if (settings.showSides) { | ||
| start -= 1; | ||
@@ -341,11 +290,12 @@ limit += 1; | ||
| for (let index = start; index <= limit; index += 1) { | ||
| if (this.state.lazyLoadedList.indexOf(index) < 0) { | ||
| lazyLoadedList.push(index); | ||
| if (lazyLoadedList.indexOf(index) < 0) { | ||
| newLazyLoadedList.push(index); | ||
| } | ||
| } | ||
| return lazyLoadedList; | ||
| return newLazyLoadedList; | ||
| }; | ||
| getChildrenList = (children, slidesToShow) => { | ||
| const { scrollOnDevice, showSides } = this.props; | ||
| if (!Array.isArray(children)) { | ||
@@ -355,11 +305,11 @@ return [children]; | ||
| if (this.props.scrollOnDevice && isTouchDevice()) { | ||
| if (scrollOnDevice && isTouchDevice()) { | ||
| return children; | ||
| } | ||
| if (children.length > slidesToShow && this.props.showSides) { | ||
| if (children.length > slidesToShow && showSides) { | ||
| return [ | ||
| ...(children.slice(children.length - slidesToShow - 1, children.length)), | ||
| ...children.slice(children.length - slidesToShow - 1, children.length), | ||
| ...children, | ||
| ...(children.slice(0, slidesToShow + 1)), | ||
| ...children.slice(0, slidesToShow + 1), | ||
| ]; | ||
@@ -370,5 +320,5 @@ } | ||
| return [ | ||
| ...(children.slice(children.length - slidesToShow, children.length)), | ||
| ...children.slice(children.length - slidesToShow, children.length), | ||
| ...children, | ||
| ...(children.slice(0, slidesToShow)), | ||
| ...children.slice(0, slidesToShow), | ||
| ]; | ||
@@ -381,17 +331,18 @@ } | ||
| getTargetIndex = (index, slidesToScroll) => { | ||
| const { childrenCount, currentIndex } = this.state; | ||
| let targetIndex = index; | ||
| const childrenReminder = this.state.childrenCount % slidesToScroll; | ||
| const childrenReminder = childrenCount % slidesToScroll; | ||
| if (index < 0) { | ||
| if (this.state.currentIndex === 0) { | ||
| targetIndex = this.state.childrenCount - slidesToScroll; | ||
| if (currentIndex === 0) { | ||
| targetIndex = childrenCount - slidesToScroll; | ||
| } else { | ||
| targetIndex = 0; | ||
| } | ||
| } else if (index >= this.state.childrenCount) { | ||
| } else if (index >= childrenCount) { | ||
| if (childrenReminder !== 0) { | ||
| targetIndex = 0; | ||
| } else { | ||
| targetIndex = index - this.state.childrenCount; | ||
| targetIndex = index - childrenCount; | ||
| } | ||
| } else if (childrenReminder !== 0 && index === (this.state.childrenCount - childrenReminder)) { | ||
| } else if (childrenReminder !== 0 && index === childrenCount - childrenReminder) { | ||
| targetIndex = index - (slidesToScroll - childrenReminder); | ||
@@ -405,9 +356,11 @@ } else { | ||
| onDotClick = (event) => { | ||
| onDotClick = event => { | ||
| event.preventDefault(); | ||
| if (this.state.animating) { | ||
| const { settings, animating, autoCycleTimer } = this.state; | ||
| const { slidesToShow, autoCycle } = settings; | ||
| if (animating) { | ||
| return; | ||
| } | ||
| if (this.state.settings.autoCycle && this.state.autoCycleTimer) { | ||
| clearInterval(this.state.autoCycleTimer); | ||
| if (autoCycle && autoCycleTimer) { | ||
| clearInterval(autoCycleTimer); | ||
| this.setState({ | ||
@@ -417,8 +370,7 @@ autoCycleTimer: null, | ||
| } | ||
| const { settings } = this.state; | ||
| const { slidesToShow } = settings; | ||
| const targetIndex = event.target.parentElement.getAttribute('data-index'); | ||
| const currentIndex = this.getTargetIndex(targetIndex * slidesToShow, slidesToShow); | ||
| this.handleTrack(targetIndex * slidesToShow, currentIndex); | ||
| if (this.state.settings.autoCycle) { | ||
| if (settings.autoCycle) { | ||
| this.playAutoCycle(); | ||
@@ -433,3 +385,6 @@ } | ||
| onMouseEnter = () => { | ||
| if (this.state.settings.autoCycle && this.state.settings.pauseOnHover) { | ||
| const { | ||
| settings: { autoCycle, pauseOnHover }, | ||
| } = this.state; | ||
| if (autoCycle && pauseOnHover) { | ||
| this.pauseAutoCycle(); | ||
@@ -440,3 +395,6 @@ } | ||
| onMouseOver = () => { | ||
| if (this.state.settings.autoCycle && this.state.settings.pauseOnHover) { | ||
| const { | ||
| settings: { autoCycle, pauseOnHover }, | ||
| } = this.state; | ||
| if (autoCycle && pauseOnHover) { | ||
| this.pauseAutoCycle(); | ||
@@ -447,3 +405,6 @@ } | ||
| onMouseLeave = () => { | ||
| if (this.state.settings.autoCycle && this.state.settings.pauseOnHover) { | ||
| const { | ||
| settings: { autoCycle, pauseOnHover }, | ||
| } = this.state; | ||
| if (autoCycle && pauseOnHover) { | ||
| this.playAutoCycle(); | ||
@@ -453,31 +414,42 @@ } | ||
| onSwipeStart = (e) => { | ||
| if ((this.state.settings.swipe === false) || ('ontouchend' in document && this.state.settings.swipe === false)) { | ||
| return; | ||
| onSwipeStart = e => { | ||
| const { | ||
| settings: { swipe, draggable }, | ||
| } = this.state; | ||
| const isSwipable = swipe === true; | ||
| const isDraggable = draggable && e.type.indexOf('mouse') === -1; | ||
| /* if ( | ||
| this.state.settings.swipe === false || | ||
| ('ontouchend' in document && this.state.settings.swipe === false) | ||
| ) { | ||
| return null; | ||
| } else if (this.state.settings.draggable === false && e.type.indexOf('mouse') !== -1) { | ||
| return; | ||
| } | ||
| return null; | ||
| } */ | ||
| const startX = (e.touches !== undefined) ? e.touches[0].pageX : e.clientX; | ||
| const startY = (e.touches !== undefined) ? e.touches[0].pageY : e.clientY; | ||
| if (isSwipable && isDraggable) { | ||
| const startX = e.touches !== undefined ? e.touches[0].pageX : e.clientX; | ||
| const startY = e.touches !== undefined ? e.touches[0].pageY : e.clientY; | ||
| this.setState({ | ||
| dragging: true, | ||
| touchObject: { | ||
| startX, | ||
| startY, | ||
| }, | ||
| }); | ||
| this.setState({ | ||
| dragging: true, | ||
| touchObject: { | ||
| startX, | ||
| startY, | ||
| }, | ||
| }); | ||
| } | ||
| }; | ||
| onSwipeMove = (e) => { | ||
| if (!this.state.dragging) { | ||
| onSwipeMove = e => { | ||
| const { dragging, animating } = this.state; | ||
| if (!dragging) { | ||
| e.preventDefault(); | ||
| return; | ||
| } | ||
| if (this.state.animating) { | ||
| if (animating) { | ||
| return; | ||
| } | ||
| const curX = (e.touches !== undefined) ? e.touches[0].pageX : e.clientX; | ||
| const curY = (e.touches !== undefined) ? e.touches[0].pageY : e.clientY; | ||
| const curX = e.touches !== undefined ? e.touches[0].pageX : e.clientX; | ||
| const curY = e.touches !== undefined ? e.touches[0].pageY : e.clientY; | ||
| const { touchObject } = this.state; | ||
@@ -505,6 +477,7 @@ const direction = getSwipeDirection(touchObject.startX, curX, touchObject.startY, curY); | ||
| onSwipeEnd = () => { | ||
| const swipeLength = this.state.touchObject.length; | ||
| if (swipeLength !== 0 && swipeLength > this.state.slidesWidth / 2) { | ||
| if (this.state.settings.autoCycle && this.state.autoCycleTimer) { | ||
| clearInterval(this.state.autoCycleTimer); | ||
| const { touchObject, slidesWidth, autoCycleTimer, settings, currentIndex } = this.state; | ||
| const swipeLength = touchObject.length; | ||
| if (swipeLength !== 0 && swipeLength > slidesWidth / 2) { | ||
| if (settings.autoCycle && autoCycleTimer) { | ||
| clearInterval(autoCycleTimer); | ||
| this.setState({ | ||
@@ -515,20 +488,19 @@ autoCycleTimer: null, | ||
| const { settings } = this.state; | ||
| let targetIndex; | ||
| let currentIndex; | ||
| if (this.state.touchObject.direction === 1) { | ||
| let nextCurrentIndex; | ||
| if (touchObject.direction === 1) { | ||
| // Next | ||
| targetIndex = this.state.currentIndex + settings.slidesToScroll; | ||
| currentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| targetIndex = currentIndex + settings.slidesToScroll; | ||
| nextCurrentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| } else { | ||
| // Previous | ||
| targetIndex = this.state.currentIndex - settings.slidesToScroll; | ||
| currentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| if (targetIndex < 0 && this.state.currentIndex !== 0) { | ||
| targetIndex = currentIndex - settings.slidesToScroll; | ||
| nextCurrentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| if (targetIndex < 0 && currentIndex !== 0) { | ||
| targetIndex = 0; | ||
| } | ||
| } | ||
| this.handleTrack(targetIndex, currentIndex); | ||
| this.handleTrack(targetIndex, nextCurrentIndex); | ||
| if (this.state.settings.autoCycle) { | ||
| if (settings.autoCycle) { | ||
| this.playAutoCycle(); | ||
@@ -551,11 +523,14 @@ } | ||
| }); | ||
| }, this.state.settings.animationDuration); | ||
| }, settings.animationDuration); | ||
| }; | ||
| this.setState({ | ||
| animating: true, | ||
| touchObject: { | ||
| direction: this.state.touchObject.direction * -1, | ||
| this.setState( | ||
| { | ||
| animating: true, | ||
| touchObject: { | ||
| direction: touchObject.direction * -1, | ||
| }, | ||
| }, | ||
| }, callback); | ||
| callback | ||
| ); | ||
| } | ||
@@ -566,14 +541,22 @@ }; | ||
| const { settings } = this.state; | ||
| const { touchObject } = this.state; | ||
| let trackWidth = (this.state.slidesWidth + (settings.slidesSpacing * 2)); | ||
| trackWidth *= (this.state.slidesCount + (settings.slidesToShow * 2)); | ||
| const totalSlideWidth = this.state.slidesWidth + (settings.slidesSpacing * 2); | ||
| const { | ||
| touchObject, | ||
| singlePage, | ||
| sideSize, | ||
| animating, | ||
| slidesWidth, | ||
| slidesCount, | ||
| currentIndex, | ||
| } = this.state; | ||
| let trackWidth = slidesWidth + settings.slidesSpacing * 2; | ||
| trackWidth *= slidesCount + settings.slidesToShow * 2; | ||
| const totalSlideWidth = slidesWidth + settings.slidesSpacing * 2; | ||
| const showSidesSlide = settings.showSides ? 1 : 0; | ||
| const initialTrackPostion = totalSlideWidth * (settings.slidesToShow + showSidesSlide); | ||
| const transition = this.state.animating ? `transform ${settings.animationDuration}ms ease` : ''; | ||
| const transition = animating ? `transform ${settings.animationDuration}ms ease` : ''; | ||
| const hasTouchOffset = settings.swipe && touchObject.length; | ||
| const touchOffset = hasTouchOffset ? touchObject.length * touchObject.direction : 0; | ||
| const slidePosition = totalSlideWidth * this.state.currentIndex; | ||
| const slidePosition = totalSlideWidth * currentIndex; | ||
| let trackPosition = initialTrackPostion + slidePosition + touchOffset; | ||
| const sideWidth = totalSlideWidth * this.state.sideSize; | ||
| const sideWidth = totalSlideWidth * sideSize; | ||
@@ -587,10 +570,10 @@ if (settings.showSides) { | ||
| display: 'block', | ||
| width: !this.state.singlePage ? trackWidth : '100%', | ||
| width: !singlePage ? trackWidth : '100%', | ||
| height: 'auto', | ||
| padding: 0, | ||
| transition, | ||
| transform: !this.state.singlePage ? `translate(${-trackPosition}px, 0px)` : 'none', | ||
| transform: !singlePage ? `translate(${-trackPosition}px, 0px)` : 'none', | ||
| boxSizing: 'border-box', | ||
| MozBoxSizing: 'border-box', | ||
| marginLeft: this.state.singlePage && settings.showSides ? `${sideWidth}px` : '0px', | ||
| marginLeft: singlePage && settings.showSides ? `${sideWidth}px` : '0px', | ||
| }; | ||
@@ -610,8 +593,9 @@ }; | ||
| getSlideStyles = (isVisible) => { | ||
| const { slidesWidth } = this.state; | ||
| const isScrollTouch = this.props.scrollOnDevice && isTouchDevice(); | ||
| getSlideStyles = isVisible => { | ||
| const { slidesWidth, settings } = this.state; | ||
| const { scrollOnDevice } = this.props; | ||
| const isScrollTouch = scrollOnDevice && isTouchDevice(); | ||
| const float = isScrollTouch ? 'none' : 'left'; | ||
| const display = 'inline-block'; | ||
| const opacity = isVisible ? '1' : this.state.settings.sidesOpacity; | ||
| const opacity = isVisible ? '1' : settings.sidesOpacity; | ||
@@ -624,3 +608,3 @@ return { | ||
| height: 'auto', | ||
| margin: `0 ${this.state.settings.slidesSpacing}px`, | ||
| margin: `0 ${settings.slidesSpacing}px`, | ||
| opacity, | ||
@@ -638,4 +622,4 @@ }; | ||
| <li | ||
| className={styles.InfiniteCarouselSlide} | ||
| key={index} | ||
| className="InfiniteCarouselSlide" | ||
| key={uniqid('slide-')} | ||
| style={this.getSlideStyles(isVisible)} | ||
@@ -647,9 +631,11 @@ > | ||
| } | ||
| return ( | ||
| <li | ||
| className={styles.InfiniteCarouselSlide} | ||
| key={index} | ||
| className="InfiniteCarouselSlide" | ||
| key={uniqid('slide-')} | ||
| style={this.getSlideStyles(isVisible)} | ||
| > | ||
| <img alt='placeholder' src={settings.placeholderImageSrc} /> | ||
| <noscript>{child}</noscript> | ||
| <img alt="placeholder" src={settings.placeholderImageSrc} /> | ||
| </li> | ||
@@ -660,11 +646,12 @@ ); | ||
| autoCycle = () => { | ||
| const { settings } = this.state; | ||
| const targetIndex = this.state.currentIndex + settings.slidesToScroll; | ||
| const currentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| this.handleTrack(targetIndex, currentIndex); | ||
| const { settings, currentIndex } = this.state; | ||
| const targetIndex = currentIndex + settings.slidesToScroll; | ||
| const nextCurrentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| this.handleTrack(targetIndex, nextCurrentIndex); | ||
| }; | ||
| playAutoCycle = () => { | ||
| if (this.state.settings.autoCycle) { | ||
| const autoCycleTimer = setInterval(this.autoCycle, this.state.settings.cycleInterval); | ||
| const { settings } = this.state; | ||
| if (settings.autoCycle) { | ||
| const autoCycleTimer = setInterval(this.autoCycle, settings.cycleInterval); | ||
| this.setState({ | ||
@@ -677,4 +664,5 @@ autoCycleTimer, | ||
| pauseAutoCycle = () => { | ||
| if (this.state.autoCycleTimer) { | ||
| clearInterval(this.state.autoCycleTimer); | ||
| const { autoCycleTimer } = this.state; | ||
| if (autoCycleTimer) { | ||
| clearInterval(autoCycleTimer); | ||
| this.setState({ | ||
@@ -687,6 +675,7 @@ autoCycleTimer: null, | ||
| handleTrack = (targetIndex, currentIndex) => { | ||
| const { children, onSlideChange } = this.props; | ||
| const { settings } = this.state; | ||
| const activePage = Math.ceil(currentIndex / settings.slidesToShow); | ||
| const lazyLoadedList = this.getLazyLoadedIndexes(this.props.children, currentIndex); | ||
| const visibleSlideList = this.getVisibleIndexes(this.props.children, currentIndex); | ||
| const lazyLoadedList = this.getLazyLoadedIndexes(children, currentIndex); | ||
| const visibleSlideList = this.getVisibleIndexes(children, currentIndex); | ||
@@ -713,67 +702,78 @@ const callback = () => { | ||
| if (targetIndex < 0) { | ||
| this.setState({ | ||
| currentIndex: targetIndex, | ||
| activePage, | ||
| animating: true, | ||
| lazyLoadedList, | ||
| visibleSlideList, | ||
| touchObject: { | ||
| startX: 0, | ||
| startY: 0, | ||
| endX: 0, | ||
| endY: 0, | ||
| length: 0, | ||
| direction: -1, | ||
| this.setState( | ||
| { | ||
| currentIndex: targetIndex, | ||
| activePage, | ||
| animating: true, | ||
| lazyLoadedList, | ||
| visibleSlideList, | ||
| touchObject: { | ||
| startX: 0, | ||
| startY: 0, | ||
| endX: 0, | ||
| endY: 0, | ||
| length: 0, | ||
| direction: -1, | ||
| }, | ||
| }, | ||
| }, callback); | ||
| } else if (targetIndex >= this.props.children.length) { | ||
| this.setState({ | ||
| currentIndex: targetIndex, | ||
| activePage, | ||
| animating: true, | ||
| lazyLoadedList, | ||
| visibleSlideList, | ||
| touchObject: { | ||
| startX: 0, | ||
| startY: 0, | ||
| endX: 0, | ||
| endY: 0, | ||
| length: 0, | ||
| direction: -1, | ||
| callback | ||
| ); | ||
| } else if (targetIndex >= children.length) { | ||
| this.setState( | ||
| { | ||
| currentIndex: targetIndex, | ||
| activePage, | ||
| animating: true, | ||
| lazyLoadedList, | ||
| visibleSlideList, | ||
| touchObject: { | ||
| startX: 0, | ||
| startY: 0, | ||
| endX: 0, | ||
| endY: 0, | ||
| length: 0, | ||
| direction: -1, | ||
| }, | ||
| }, | ||
| }, callback); | ||
| callback | ||
| ); | ||
| } else { | ||
| this.setState({ | ||
| currentIndex, | ||
| activePage, | ||
| animating: true, | ||
| lazyLoadedList, | ||
| visibleSlideList, | ||
| dragging: false, | ||
| touchObject: { | ||
| startX: 0, | ||
| startY: 0, | ||
| endX: 0, | ||
| endY: 0, | ||
| length: 0, | ||
| direction: -1, | ||
| this.setState( | ||
| { | ||
| currentIndex, | ||
| activePage, | ||
| animating: true, | ||
| lazyLoadedList, | ||
| visibleSlideList, | ||
| dragging: false, | ||
| touchObject: { | ||
| startX: 0, | ||
| startY: 0, | ||
| endX: 0, | ||
| endY: 0, | ||
| length: 0, | ||
| direction: -1, | ||
| }, | ||
| }, | ||
| }, stopAnimation); | ||
| stopAnimation | ||
| ); | ||
| } | ||
| if (this.props.onSlideChange) { | ||
| this.props.onSlideChange(activePage); | ||
| if (onSlideChange) { | ||
| onSlideChange(activePage); | ||
| } | ||
| }; | ||
| moveToNext = (event) => { | ||
| moveToNext = event => { | ||
| const { onNextClick } = this.props; | ||
| const { animating, settings, currentIndex, autoCycleTimer } = this.state; | ||
| event.preventDefault(); | ||
| if (this.props.onNextClick) { | ||
| this.props.onNextClick(event); | ||
| if (onNextClick) { | ||
| onNextClick(event); | ||
| } | ||
| if (this.state.animating) { | ||
| if (animating) { | ||
| return; | ||
| } | ||
| if (this.state.settings.autoCycle && this.state.autoCycleTimer) { | ||
| clearInterval(this.state.autoCycleTimer); | ||
| if (settings.autoCycle && autoCycleTimer) { | ||
| clearInterval(autoCycleTimer); | ||
| this.setState({ | ||
@@ -783,7 +783,7 @@ autoCycleTimer: null, | ||
| } | ||
| const { settings } = this.state; | ||
| const targetIndex = this.state.currentIndex + settings.slidesToScroll; | ||
| const currentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| this.handleTrack(targetIndex, currentIndex); | ||
| if (this.state.settings.autoCycle) { | ||
| const targetIndex = currentIndex + settings.slidesToScroll; | ||
| const nextCurrentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| this.handleTrack(targetIndex, nextCurrentIndex); | ||
| if (settings.autoCycle) { | ||
| this.playAutoCycle(); | ||
@@ -793,12 +793,14 @@ } | ||
| moveToPrevious = (event) => { | ||
| moveToPrevious = event => { | ||
| const { onPreviousClick } = this.props; | ||
| const { animating, settings, currentIndex, autoCycleTimer } = this.state; | ||
| event.preventDefault(); | ||
| if (this.props.onPreviousClick) { | ||
| this.props.onPreviousClick(event); | ||
| if (onPreviousClick) { | ||
| onPreviousClick(event); | ||
| } | ||
| if (this.state.animating) { | ||
| if (animating) { | ||
| return; | ||
| } | ||
| if (this.state.settings.autoCycle && this.state.autoCycleTimer) { | ||
| clearInterval(this.state.autoCycleTimer); | ||
| if (settings.autoCycle && autoCycleTimer) { | ||
| clearInterval(autoCycleTimer); | ||
| this.setState({ | ||
@@ -808,10 +810,10 @@ autoCycleTimer: null, | ||
| } | ||
| const { settings } = this.state; | ||
| let targetIndex = this.state.currentIndex - settings.slidesToScroll; | ||
| const currentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| if (targetIndex < 0 && this.state.currentIndex !== 0) { | ||
| let targetIndex = currentIndex - settings.slidesToScroll; | ||
| const nextCurrentIndex = this.getTargetIndex(targetIndex, settings.slidesToScroll); | ||
| if (targetIndex < 0 && currentIndex !== 0) { | ||
| targetIndex = 0; | ||
| } | ||
| this.handleTrack(targetIndex, currentIndex); | ||
| if (this.state.settings.autoCycle) { | ||
| this.handleTrack(targetIndex, nextCurrentIndex); | ||
| if (settings.autoCycle) { | ||
| this.playAutoCycle(); | ||
@@ -822,23 +824,35 @@ } | ||
| init = () => { | ||
| const children = this.getChildrenList(this.props.children, this.props.slidesToShow); | ||
| const { children, slidesToShow, scrollOnDevice, responsive, breakpoints } = this.props; | ||
| const { scrollOnDeviceProps } = this.state; | ||
| const newChildren = this.getChildrenList(children, slidesToShow); | ||
| let settings; | ||
| if (this.props.scrollOnDevice && isTouchDevice()) { | ||
| settings = Object.assign({}, this.defaultProps, this.props, this.state.scrollOnDeviceProps); | ||
| if (scrollOnDevice && isTouchDevice()) { | ||
| settings = { | ||
| ...this.defaultProps, | ||
| ...this.props, | ||
| ...scrollOnDeviceProps, | ||
| }; | ||
| } else { | ||
| settings = Object.assign({}, this.defaultProps, this.props); | ||
| settings = { | ||
| ...this.defaultProps, | ||
| ...this.props, | ||
| }; | ||
| } | ||
| this.setState({ | ||
| children, | ||
| settings, | ||
| }, () => { | ||
| this.playAutoCycle(); | ||
| }); | ||
| this.setState( | ||
| { | ||
| children: newChildren, | ||
| settings, | ||
| }, | ||
| () => { | ||
| this.playAutoCycle(); | ||
| } | ||
| ); | ||
| if (this.props.responsive) { | ||
| this.setupBreakpointSettings(this.props.breakpoints); | ||
| if (responsive) { | ||
| this.setupBreakpointSettings(breakpoints); | ||
| } | ||
| }; | ||
| storeFrameRef = (f) => { | ||
| storeFrameRef = f => { | ||
| if (f !== null) { | ||
@@ -850,4 +864,5 @@ this.frame = f; | ||
| render() { | ||
| const scrollOnDevice = this.props.scrollOnDevice && isTouchDevice(); | ||
| const { settings } = this.state; | ||
| const { scrollOnDevice, pagingSeparator, name } = this.props; | ||
| const hasScrollOnDevice = scrollOnDevice && isTouchDevice(); | ||
| const { settings, singlePage, activePage, slidePages, dragging } = this.state; | ||
| let prevArrow; | ||
@@ -857,10 +872,6 @@ let nextArrow; | ||
| if (settings.arrows && !this.state.singlePage && !scrollOnDevice) { | ||
| if (settings.arrows && !singlePage && !hasScrollOnDevice) { | ||
| if (settings.prevArrow == null) { | ||
| prevArrow = ( | ||
| <InfiniteCarouselArrow | ||
| next={false} | ||
| styles={styles} | ||
| onClick={this.moveToPrevious} | ||
| /> | ||
| <InfiniteCarouselArrow carouselName={name} next={false} onClick={this.moveToPrevious} /> | ||
| ); | ||
@@ -875,8 +886,3 @@ } else { | ||
| if (settings.nextArrow == null) { | ||
| nextArrow = ( | ||
| <InfiniteCarouselArrow | ||
| styles={styles} | ||
| onClick={this.moveToNext} | ||
| /> | ||
| ); | ||
| nextArrow = <InfiniteCarouselArrow carouselName={name} onClick={this.moveToNext} />; | ||
| } else { | ||
@@ -890,8 +896,8 @@ const nextArrowProps = { | ||
| if (settings.dots && !this.state.singlePage && !scrollOnDevice) { | ||
| if (settings.dots && !singlePage && !hasScrollOnDevice) { | ||
| dots = ( | ||
| <InfiniteCarouselDots | ||
| activePage={this.state.activePage} | ||
| numberOfDots={this.state.slidePages} | ||
| styles={styles} | ||
| carouselName={name} | ||
| activePage={activePage} | ||
| numberOfDots={slidePages} | ||
| onClick={this.onDotClick} | ||
@@ -902,6 +908,6 @@ /> | ||
| if (settings.paging && !this.state.singlePage && !scrollOnDevice) { | ||
| if (settings.paging && !singlePage && !hasScrollOnDevice) { | ||
| dots = ( | ||
| <span className={styles.InfiniteCarouselPaging}> | ||
| { `${this.state.activePage + 1} ${this.props.pagingSeparator} ${this.state.slidePages}` } | ||
| <span data-testid={`${name}-paging`} className="InfiniteCarouselPaging"> | ||
| {`${activePage + 1} ${pagingSeparator} ${slidePages}`} | ||
| </span> | ||
@@ -916,15 +922,21 @@ ); | ||
| if (this.props.scrollOnDevice && isTouchDevice()) { | ||
| trackStyles = Object.assign({}, this.getScrollTrackStyles); | ||
| trackClassName = styles.InfiniteCarouselScrollTrack; | ||
| if (scrollOnDevice && isTouchDevice()) { | ||
| trackStyles = { | ||
| ...this.getScrollTrackStyles, | ||
| }; | ||
| trackClassName = 'InfiniteCarouselScrollTrack'; | ||
| } else { | ||
| trackStyles = this.getTrackStyles(); | ||
| trackStyles = { | ||
| ...this.getTrackStyles(), | ||
| }; | ||
| trackClassName = ''; | ||
| } | ||
| const disableSwipeEvents = this.props.scrollOnDevice && isTouchDevice(); | ||
| const disableSwipeEvents = scrollOnDevice && isTouchDevice(); | ||
| return ( | ||
| <div | ||
| className={styles.InfiniteCarousel} | ||
| id={name} | ||
| data-testid={name} | ||
| className="InfiniteCarousel" | ||
| onFocus={this.onMouseOver} | ||
@@ -936,6 +948,3 @@ onMouseEnter={this.onMouseEnter} | ||
| {prevArrow} | ||
| <div | ||
| className={styles.InfiniteCarouselFrame} | ||
| ref={this.storeFrameRef} | ||
| > | ||
| <div className="InfiniteCarouselFrame" ref={this.storeFrameRef}> | ||
| <ul | ||
@@ -945,8 +954,8 @@ className={trackClassName} | ||
| onMouseDown={!disableSwipeEvents ? this.onSwipeStart : null} | ||
| onMouseLeave={this.state.dragging || !disableSwipeEvents ? this.onSwipeEnd : null} | ||
| onMouseMove={this.state.dragging || !disableSwipeEvents ? this.onSwipeMove : null} | ||
| onMouseLeave={dragging || !disableSwipeEvents ? this.onSwipeEnd : null} | ||
| onMouseMove={dragging || !disableSwipeEvents ? this.onSwipeMove : null} | ||
| onMouseUp={!disableSwipeEvents ? this.onSwipeEnd : null} | ||
| onTouchCancel={this.state.dragging || !disableSwipeEvents ? this.onSwipeEnd : null} | ||
| onTouchCancel={dragging || !disableSwipeEvents ? this.onSwipeEnd : null} | ||
| onTouchEnd={!disableSwipeEvents ? this.onSwipeEnd : null} | ||
| onTouchMove={this.state.dragging || !disableSwipeEvents ? this.onSwipeMove : null} | ||
| onTouchMove={dragging || !disableSwipeEvents ? this.onSwipeMove : null} | ||
| onTouchStart={!disableSwipeEvents ? this.onSwipeStart : null} | ||
@@ -964,2 +973,66 @@ > | ||
| InfiniteCarousel.propTypes = { | ||
| children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), | ||
| name: PropTypes.string, | ||
| arrows: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| dots: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| paging: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| pagingSeparator: PropTypes.string, | ||
| lazyLoad: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| swipe: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| draggable: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| animationDuration: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| slidesToShow: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| slidesToScroll: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| slidesSpacing: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| autoCycle: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| cycleInterval: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| pauseOnHover: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types | ||
| responsive: PropTypes.bool, | ||
| breakpoints: PropTypes.arrayOf(PropTypes.object), | ||
| placeholderImageSrc: PropTypes.string, // eslint-disable-line react/no-unused-prop-types | ||
| nextArrow: PropTypes.element, // eslint-disable-line react/no-unused-prop-types | ||
| prevArrow: PropTypes.element, // eslint-disable-line react/no-unused-prop-types | ||
| scrollOnDevice: PropTypes.bool, | ||
| showSides: PropTypes.bool, | ||
| sidesOpacity: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| sideSize: PropTypes.number, // eslint-disable-line react/no-unused-prop-types | ||
| incrementalSides: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types, | ||
| onSlideChange: PropTypes.func, | ||
| onNextClick: PropTypes.func, | ||
| onPreviousClick: PropTypes.func, | ||
| }; | ||
| InfiniteCarousel.defaultProps = { | ||
| children: [], | ||
| name: 'infinite-carousel', | ||
| arrows: true, | ||
| dots: false, | ||
| paging: false, | ||
| lazyLoad: false, | ||
| swipe: true, | ||
| draggable: false, | ||
| animationDuration: 500, | ||
| slidesToShow: 1, | ||
| slidesToScroll: 1, | ||
| slidesSpacing: 10, | ||
| autoCycle: false, | ||
| cycleInterval: 5000, | ||
| pauseOnHover: true, | ||
| responsive: true, | ||
| breakpoints: [], | ||
| placeholderImageSrc: '', | ||
| pagingSeparator: '/', | ||
| nextArrow: null, | ||
| prevArrow: null, | ||
| scrollOnDevice: false, | ||
| showSides: false, | ||
| sidesOpacity: 1, | ||
| sideSize: 0.5, | ||
| incrementalSides: false, | ||
| onSlideChange: undefined, | ||
| onNextClick: undefined, | ||
| onPreviousClick: undefined, | ||
| }; | ||
| export default InfiniteCarousel; |
@@ -6,8 +6,8 @@ const webpack = require('webpack'); | ||
| const ReactDOM = require('react-dom'); | ||
| const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); | ||
| const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; | ||
| const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ | ||
| template: './public/index.html', | ||
| filename: './public/index.html', | ||
| inject: 'body' | ||
| inject: 'body', | ||
| }); | ||
@@ -18,78 +18,77 @@ | ||
| const libraryName = 'react-infinite-carusel'; | ||
| let plugins = [], output, entry, externals; | ||
| let envConfig = {}; | ||
| if (env === 'build') { | ||
| plugins.push(new UglifyJsPlugin({ minimize: true })); | ||
| entry = './src/index.js'; | ||
| output = { | ||
| path: path.join(__dirname, 'lib'), | ||
| filename: 'react-infinite-carusel.min.js', | ||
| library: 'InfiniteCarousel', | ||
| libraryTarget: 'umd' | ||
| envConfig = { | ||
| entry: './src/index.js', | ||
| output: { | ||
| path: path.join(__dirname, 'lib'), | ||
| filename: 'react-infinite-carusel.min.js', | ||
| library: 'InfiniteCarousel', | ||
| libraryTarget: 'umd', | ||
| }, | ||
| optimization: { | ||
| minimizer: [new UglifyJsPlugin()], | ||
| }, | ||
| externals: [ | ||
| { | ||
| react: { | ||
| root: 'React', | ||
| commonjs2: 'react', | ||
| commonjs: 'react', | ||
| amd: 'react', | ||
| }, | ||
| 'react-dom': { | ||
| root: 'ReactDOM', | ||
| commonjs2: 'react-dom', | ||
| commonjs: 'react-dom', | ||
| amd: 'react-dom', | ||
| }, | ||
| }, | ||
| ], | ||
| }; | ||
| externals = [ | ||
| { | ||
| 'react': { | ||
| root: 'React', | ||
| commonjs2: 'react', | ||
| commonjs: 'react', | ||
| amd: 'react' | ||
| }, | ||
| 'react-dom': { | ||
| root: 'ReactDOM', | ||
| commonjs2: 'react-dom', | ||
| commonjs: 'react-dom', | ||
| amd: 'react-dom' | ||
| } | ||
| } | ||
| ]; | ||
| } else { | ||
| plugins.push(HtmlWebpackPluginConfig); | ||
| entry = './public/app.js'; | ||
| output = { | ||
| path: path.resolve('dist'), | ||
| filename: 'index_bundle.js' | ||
| envConfig = { | ||
| plugins: [HtmlWebpackPluginConfig], | ||
| entry: './public/app.js', | ||
| output: { | ||
| path: path.resolve('dist'), | ||
| filename: 'index_bundle.js', | ||
| }, | ||
| externals: [], | ||
| }; | ||
| externals = []; | ||
| } | ||
| const config = { | ||
| entry: entry, | ||
| ...envConfig, | ||
| devtool: 'source-map', | ||
| output: output, | ||
| plugins: plugins, | ||
| module: { | ||
| loaders: [ | ||
| rules: [ | ||
| { | ||
| test: /\.css$/, | ||
| loaders: [ 'style-loader', 'css-loader?modules' ] | ||
| test: /\.(js|jsx)$/, | ||
| use: [ | ||
| { | ||
| loader: 'babel-loader', | ||
| options: { | ||
| presets: ['@babel/preset-env'], | ||
| plugins: ['@babel/plugin-proposal-object-rest-spread'], | ||
| }, | ||
| }, | ||
| 'eslint-loader', | ||
| ], | ||
| exclude: /node_modules/, | ||
| }, | ||
| { | ||
| test: /(\.jsx|\.js)$/, | ||
| loader: 'babel-loader', | ||
| exclude: /(node_modules|bower_components)/, | ||
| query: { | ||
| cacheDirectory: true, | ||
| presets: ['react', 'es2015', 'stage-0'] | ||
| } | ||
| test: /\.css$/, | ||
| use: ['style-loader', 'css-loader'], | ||
| }, | ||
| { | ||
| test: /(\.jsx|\.js)$/, | ||
| loader: "eslint-loader", | ||
| exclude: /node_modules/, | ||
| query: { | ||
| cacheDirectory: true, | ||
| presets: ['react', 'es2015', 'stage-0'] | ||
| } | ||
| } | ||
| ] | ||
| ], | ||
| }, | ||
| resolve: { | ||
| //main: path.resolve('./src'), | ||
| modules: [path.resolve('./src'), path.resolve('./public'), "node_modules"], | ||
| extensions: ['.js'] | ||
| // main: path.resolve('./src'), | ||
| modules: [path.resolve('./src'), path.resolve('./public'), 'node_modules'], | ||
| extensions: ['.js'], | ||
| }, | ||
| externals: externals, | ||
| }; | ||
| module.exports = config; | ||
| module.exports = config; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by25%
20
Worsened metrics
- Total package byte prevSize
- decreased by-3.08%
339211
- Dependency count
- increased by25%
5
- Dev dependency count
- increased by37.5%
33
- Lines of code
- decreased by-5.46%
1369
- Number of low supply chain risk alerts
- increased by50%
3
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addeduniqid@^5.2.0
+ Addeduniqid@5.4.0(transitive)
Updatedprop-types@^15.7.2
Updatedreact@^16.12.0
Updatedreact-dom@^16.12.0