@talixo/carousel - npm Package Compare versions

Comparing version 1.0.0-alpha.20 to 1.0.0-alpha.21

dist/index.js

@@ -217,2 +217,5 @@ 'use strict';
 
+  /** Infinite scroll */
+  infinite: PropTypes.bool,
+
   /** Number of slides visible in one time */
@@ -240,2 +243,3 @@ perPage: PropTypes.number,
   animationTime: 500,
+  infinite: false,
   perPage: 1,
@@ -255,2 +259,3 @@ renderDots: Dots,
    * @property {number} [props.animationTime]
+   * @property {boolean} [props.infinite]
    * @property {number} [props.perPage]
@@ -286,6 +291,19 @@ * @property {function} [props.renderDots]
           onChange = _this$props.onChange,
-          children = _this$props.children;
+          children = _this$props.children,
+          infinite = _this$props.infinite,
+          perPage = _this$props.perPage;
 
       var isImmediate = value == null || force;
 
+      if (!infinite) {
+        var realIndex = index % children.length;
+        var maxIndex = Math.max(0, children.length - perPage);
+
+        if (realIndex < 0) {
+          index -= realIndex;
+        } else if (realIndex > maxIndex) {
+          index -= realIndex - maxIndex;
+        }
+      }
+
       if (onChange && !force) {
@@ -488,2 +506,3 @@ onChange(index % children.length, type);
           children = _props2.children,
+          infinite = _props2.infinite,
           perPage = _props2.perPage;
@@ -497,8 +516,10 @@
 
-      for (var i = 0; i < Math.max(children.length) + 3 * perPage; i++) {
-        copies.push(React.createElement(
-          'div',
-          { className: clsName, style: style, key: 'copy-' + i },
-          children[i % children.length]
-        ));
+      if (infinite) {
+        for (var i = 0; i < Math.max(children.length) + 3 * perPage; i++) {
+          copies.push(React.createElement(
+            'div',
+            { className: clsName, style: style, key: 'copy-' + i },
+            children[i % children.length]
+          ));
+        }
       }
@@ -572,9 +593,24 @@
     value: function renderArrows() {
-      var renderArrows = this.props.renderArrows;
+      var _props4 = this.props,
+          children = _props4.children,
+          infinite = _props4.infinite,
+          perPage = _props4.perPage,
+          renderArrows = _props4.renderArrows;
+      var currentSlide = this.state.currentSlide;
 
 
-      return React.createElement(renderArrows, Object.assign({}, this.buildMovementProps(), {
-        onBack: this.handleBack,
-        onForward: this.handleForward
-      }));
+      var firstSlide = currentSlide === 0;
+      var lastSlide = currentSlide >= children.length - perPage;
+
+      var props = Object.assign({}, this.buildMovementProps());
+
+      if (!firstSlide || infinite) {
+        props.onBack = this.handleBack;
+      }
+
+      if (!lastSlide || infinite) {
+        props.onForward = this.handleForward;
+      }
+
+      return React.createElement(renderArrows, props);
     }
@@ -584,15 +620,16 @@ }, {
     value: function render() {
-      var _props4 = this.props,
-          arrows = _props4.arrows,
-          className = _props4.className,
-          dots = _props4.dots,
-          perPage = _props4.perPage,
-          children = _props4.children,
-          animationTime = _props4.animationTime,
-          renderArrows = _props4.renderArrows,
-          renderDots = _props4.renderDots,
-          value = _props4.value,
-          onChange = _props4.onChange,
-          defaultMovement = _props4.defaultMovement,
-          passedProps = objectWithoutProperties(_props4, ['arrows', 'className', 'dots', 'perPage', 'children', 'animationTime', 'renderArrows', 'renderDots', 'value', 'onChange', 'defaultMovement']);
+      var _props5 = this.props,
+          arrows = _props5.arrows,
+          className = _props5.className,
+          dots = _props5.dots,
+          perPage = _props5.perPage,
+          children = _props5.children,
+          animationTime = _props5.animationTime,
+          infinite = _props5.infinite,
+          renderArrows = _props5.renderArrows,
+          renderDots = _props5.renderDots,
+          value = _props5.value,
+          onChange = _props5.onChange,
+          defaultMovement = _props5.defaultMovement,
+          passedProps = objectWithoutProperties(_props5, ['arrows', 'className', 'dots', 'perPage', 'children', 'animationTime', 'infinite', 'renderArrows', 'renderDots', 'value', 'onChange', 'defaultMovement']);
       var _state2 = this.state,
@@ -603,4 +640,10 @@ currentSlide = _state2.currentSlide,
 
+      var firstSlide = currentSlide === 0;
+      var lastSlide = currentSlide >= children.length - perPage;
+
       var clsName = shared.buildClassName(moduleName$2, className);
-      var contentClsName = shared.buildClassName([moduleName$2, 'content']);
+      var contentClsName = shared.buildClassName([moduleName$2, 'content'], null, {
+        first: !infinite && firstSlide,
+        last: !infinite && lastSlide
+      });
       var wrapperClsName = shared.buildClassName([moduleName$2, 'wrapper']);
@@ -803,2 +846,4 @@ var innerClsName = shared.buildClassName([moduleName$2, 'inner']);
 
+      var movement = carousel.props.infinite ? props.movement : 'exact';
+
       if (slide == null) {
@@ -812,3 +857,3 @@ slide = +carousel.props.value || 0;
         value: slide || 0,
-        defaultMovement: props.movement,
+        defaultMovement: movement,
         onChange: onChange == null ? this.change : function () {
@@ -835,2 +880,3 @@ _this3.change.apply(_this3, arguments);
     value: function next() {
+      var movement = this.props.movement;
       var _state = this.state,
@@ -841,4 +887,5 @@ value = _state.value,
 
+      var dir = movement === 'back' ? -1 : 1;
       var step = this.props.step == null ? +carousel.props.perPage || 1 : this.props.step;
-      var nextValue = (value + step) % carousel.props.children.length;
+      var nextValue = (carousel.props.children.length + value + dir * step) % carousel.props.children.length;
 
@@ -845,0 +892,0 @@ this.setState({

dist/index.min.js

@@ -1,1 +0,1 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),PropTypes=_interopDefault(require("prop-types")),shared=require("@talixo/shared"),icon=require("@talixo/icon"),reactDom=require("react-dom"),chunk=_interopDefault(require("lodash/chunk")),moduleName="carousel-dots",propTypes={className:PropTypes.string,slides:PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.node)),perPage:PropTypes.number,onChange:PropTypes.func},defaultProps={slides:[],perPage:1},emptyFn=function(){};function Dots(e){for(var t=e.slides,r=e.onChange,n=e.value,o=e.perPage,a=shared.buildClassName([moduleName,"dot"]),s=shared.buildClassName([moduleName,"dot"],null,["active"]),i=[],l=function(e){var t=r?function(){return r(e*o)}:emptyFn;i.push(React.createElement("div",{key:e,className:e===n?s:a,onClick:t}))},u=0;u<t.length;u++)l(u);return React.createElement("div",{className:shared.buildClassName(moduleName)},i)}Dots.propTypes=propTypes,Dots.defaultProps=defaultProps;var moduleName$1="carousel-arrows",propTypes$1={onBack:PropTypes.func,onForward:PropTypes.func};function Arrows(e){var t=e.onBack,r=e.onForward,n=shared.buildClassName(moduleName$1),o=shared.buildClassName([moduleName$1,"arrow"],null,["back"]),a=shared.buildClassName([moduleName$1,"arrow"],null,["forward"]);return React.createElement("div",{className:n},React.createElement("button",{className:o,onClick:t},React.createElement(icon.Icon,{name:"chevron_left"})),React.createElement("button",{className:a,onClick:r},React.createElement(icon.Icon,{name:"chevron_right"})))}Arrows.propTypes=propTypes$1;var classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),inherits=function(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)},objectWithoutProperties=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r},possibleConstructorReturn=function(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},moduleName$2="carousel";function reflow(e){return e.offsetHeight}var propTypes$2={arrows:PropTypes.bool,children:PropTypes.node,className:PropTypes.string,dots:PropTypes.bool,animationTime:PropTypes.number,perPage:PropTypes.number,renderDots:PropTypes.func,renderArrows:PropTypes.func,value:PropTypes.number,onChange:PropTypes.func,defaultMovement:PropTypes.oneOf(["exact","forward","back"])},defaultProps$1={children:[],animationTime:500,perPage:1,renderDots:Dots,renderArrows:Arrows,defaultMovement:"exact"},Carousel=function(e){function t(){var e,r,n;classCallCheck(this,t);for(var o=arguments.length,a=Array(o),s=0;s<o;s++)a[s]=arguments[s];return r=n=possibleConstructorReturn(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(a))),n.mounted=!1,n.state={slides:chunk(n.props.children,n.props.perPage),currentSlide:null!=n.props.value?n.props.value%n.props.children.length:0,transitionTime:n.props.animationTime},n.change=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"exact",r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=n.props,a=o.value,s=o.onChange,i=o.children,l=null==a||r;return s&&!r&&s(e%i.length,t),l?(n.lastMovementType=null,n.lastMovementIndex=null,"forward"===t||"back"===t?n.go(e,t):void n.setState({currentSlide:e})):(n.lastMovementType=t,void(n.lastMovementIndex=e%i.length))},n.handleForward=function(){var e=n.props.perPage,t=n.state.currentSlide;return n.change(t+e,"forward")},n.handleBack=function(){var e=n.props.perPage,t=n.state.currentSlide;return n.change(t-e,"back")},n.handleExact=function(e){return n.change(e,"exact")},n.setRef=function(e){n.wrapper=reactDom.findDOMNode(e)},possibleConstructorReturn(n,r)}return inherits(t,e),createClass(t,[{key:"componentDidMount",value:function(){this.mounted=!0}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"componentWillReceiveProps",value:function(e){if(e.animationTime!==this.props.animationTime&&this.setState({transitionTime:e.animationTime}),null!=e.value&&this.props.value!==e.value){var t=e.value%e.children.length,r=this.lastMovementIndex===t?this.lastMovementType:this.props.defaultMovement;this.change(t,r,!0)}this.state.currentSlide%this.props.children.length>=e.children.length&&this.setState({currentSlide:e.children.length-1}),e.children===this.props.children&&e.perPage===this.props.perPage||this.setState({slides:chunk(e.children,e.perPage)})}},{key:"goImmediately",value:function(e){var t=this,r=this.state.currentSlide,n=this.props.animationTime;return e===r?Promise.resolve():new Promise(function(r){t.setState({currentSlide:e,transitionTime:0},function(){reflow(t.wrapper),t.setState({transitionTime:n},r)})})}},{key:"go",value:function(e){for(var t=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"forward",n=this.props,o=n.children,a=n.perPage,s=this.state.currentSlide,i=o.length;i<a;)i+=o.length;for(;e<0;)e=i+e;var l=s%i,u=e%i;"forward"===r?u=u>l?u:i+u:l=u>l?i+l:l,this.goImmediately(l).then(function(){t.mounted&&t.setState({currentSlide:u})})}},{key:"renderSlides",value:function(){for(var e=this.props,t=e.children,r=e.perPage,n=shared.buildClassName([moduleName$2,"slide"]),o={minWidth:100/r+"%",maxWidth:100/r+"%"},a=[],s=0;s<Math.max(t.length)+3*r;s++)a.push(React.createElement("div",{className:n,style:o,key:"copy-"+s},t[s%t.length]));return t.map(function(e,t){return React.createElement("div",{className:n,style:o,key:t},e)}).concat(a)}},{key:"buildMovementProps",value:function(){var e=this.props,t=(e.renderDots,e.renderArrows,e.children),r=e.perPage,n=objectWithoutProperties(e,["renderDots","renderArrows","children","perPage"]),o=this.state,a=o.currentSlide,s=o.slides,i=a%t.length;return Object.assign({},n,{slides:s,children:t,perPage:r,index:i,value:Math.floor(i/r)})}},{key:"renderDots",value:function(){var e=this.props.renderDots;return React.createElement(e,Object.assign({},this.buildMovementProps(),{onChange:this.handleExact}))}},{key:"renderArrows",value:function(){var e=this.props.renderArrows;return React.createElement(e,Object.assign({},this.buildMovementProps(),{onBack:this.handleBack,onForward:this.handleForward}))}},{key:"render",value:function(){var e=this.props,t=e.arrows,r=e.className,n=e.dots,o=e.perPage,a=(e.children,e.animationTime,e.renderArrows,e.renderDots,e.value,e.onChange,e.defaultMovement,objectWithoutProperties(e,["arrows","className","dots","perPage","children","animationTime","renderArrows","renderDots","value","onChange","defaultMovement"])),s=this.state,i=s.currentSlide,l=s.transitionTime,u=shared.buildClassName(moduleName$2,r),p=shared.buildClassName([moduleName$2,"content"]),c=shared.buildClassName([moduleName$2,"wrapper"]),d=shared.buildClassName([moduleName$2,"inner"]),h=n?this.renderDots():null,m=t?this.renderArrows():null,f={ref:this.setRef,style:{transform:"translateX(-"+100*i/o+"%)",transitionDuration:l+"ms"}};return React.createElement("div",Object.assign({className:u},a),React.createElement("div",{className:p},m,React.createElement("div",Object.assign({className:c},f),React.createElement("div",{className:d},this.renderSlides()))),h)}}]),t}(React.PureComponent);Carousel.propTypes=propTypes$2,Carousel.defaultProps=defaultProps$1;var propTypes$3={initialSlide:PropTypes.number,movement:PropTypes.oneOf(["exact","forward","back"]),interval:PropTypes.number,step:PropTypes.number,children:PropTypes.node},defaultProps$2={movement:"forward",interval:3e3},CarouselAutoplay=function(e){function t(e){classCallCheck(this,t);var r=possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));r.mounted=!1,r.change=function(e){e!==r.state.value&&(r.setState({carousel:r.buildCarousel(r.props,e),value:e}),r.mounted&&(r.stop(),r.tick()))};var n=r.buildCarousel(r.props,r.props.initialSlide);return r.state={carousel:n,value:n.props.value},r}return inherits(t,e),createClass(t,[{key:"componentDidMount",value:function(){this.tick(),this.mounted=!0}},{key:"componentWillUnmount",value:function(){this.stop(),this.mounted=!1}},{key:"tick",value:function(){var e=this;this.tickTimeout=setTimeout(function(){e.next(),e.tick()},this.props.interval)}},{key:"stop",value:function(){clearTimeout(this.tickTimeout)}},{key:"buildCarousel",value:function(e,t){var r=this,n=React.Children.only(e.children);null==t&&(t=+n.props.value||0);var o=n.props.onChange;return React.cloneElement(e.children,{value:t||0,defaultMovement:e.movement,onChange:null==o?this.change:function(){r.change.apply(r,arguments),o.apply(void 0,arguments)}})}},{key:"next",value:function(){var e=this.state,t=e.value,r=e.carousel,n=(t+(null==this.props.step?+r.props.perPage||1:this.props.step))%r.props.children.length;this.setState({carousel:this.buildCarousel(this.props,n),value:n})}},{key:"componentWillReceiveProps",value:function(e){var t=this;e.children===this.props.children&&e.movement===this.props.movement||this.setState({carousel:this.buildCarousel(e,this.state.value)}),this.props.interval!==e.interval&&this.mounted&&(this.stop(),this.tickTimeout=setTimeout(function(){return t.tick()}))}},{key:"render",value:function(){return this.state.carousel}}]),t}(React.PureComponent);CarouselAutoplay.propTypes=propTypes$3,CarouselAutoplay.defaultProps=defaultProps$2,exports.Carousel=Carousel,exports.CarouselAutoplay=CarouselAutoplay;
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var React=_interopDefault(require("react")),PropTypes=_interopDefault(require("prop-types")),shared=require("@talixo/shared"),icon=require("@talixo/icon"),reactDom=require("react-dom"),chunk=_interopDefault(require("lodash/chunk")),moduleName="carousel-dots",propTypes={className:PropTypes.string,slides:PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.node)),perPage:PropTypes.number,onChange:PropTypes.func},defaultProps={slides:[],perPage:1},emptyFn=function(){};function Dots(e){for(var t=e.slides,r=e.onChange,n=e.value,o=e.perPage,a=shared.buildClassName([moduleName,"dot"]),s=shared.buildClassName([moduleName,"dot"],null,["active"]),i=[],l=function(e){var t=r?function(){return r(e*o)}:emptyFn;i.push(React.createElement("div",{key:e,className:e===n?s:a,onClick:t}))},u=0;u<t.length;u++)l(u);return React.createElement("div",{className:shared.buildClassName(moduleName)},i)}Dots.propTypes=propTypes,Dots.defaultProps=defaultProps;var moduleName$1="carousel-arrows",propTypes$1={onBack:PropTypes.func,onForward:PropTypes.func};function Arrows(e){var t=e.onBack,r=e.onForward,n=shared.buildClassName(moduleName$1),o=shared.buildClassName([moduleName$1,"arrow"],null,["back"]),a=shared.buildClassName([moduleName$1,"arrow"],null,["forward"]);return React.createElement("div",{className:n},React.createElement("button",{className:o,onClick:t},React.createElement(icon.Icon,{name:"chevron_left"})),React.createElement("button",{className:a,onClick:r},React.createElement(icon.Icon,{name:"chevron_right"})))}Arrows.propTypes=propTypes$1;var classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),inherits=function(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)},objectWithoutProperties=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r},possibleConstructorReturn=function(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},moduleName$2="carousel";function reflow(e){return e.offsetHeight}var propTypes$2={arrows:PropTypes.bool,children:PropTypes.node,className:PropTypes.string,dots:PropTypes.bool,animationTime:PropTypes.number,infinite:PropTypes.bool,perPage:PropTypes.number,renderDots:PropTypes.func,renderArrows:PropTypes.func,value:PropTypes.number,onChange:PropTypes.func,defaultMovement:PropTypes.oneOf(["exact","forward","back"])},defaultProps$1={children:[],animationTime:500,infinite:!1,perPage:1,renderDots:Dots,renderArrows:Arrows,defaultMovement:"exact"},Carousel=function(e){function t(){var e,r,n;classCallCheck(this,t);for(var o=arguments.length,a=Array(o),s=0;s<o;s++)a[s]=arguments[s];return r=n=possibleConstructorReturn(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(a))),n.mounted=!1,n.state={slides:chunk(n.props.children,n.props.perPage),currentSlide:null!=n.props.value?n.props.value%n.props.children.length:0,transitionTime:n.props.animationTime},n.change=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"exact",r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=n.props,a=o.value,s=o.onChange,i=o.children,l=o.infinite,u=o.perPage,p=null==a||r;if(!l){var c=e%i.length,d=Math.max(0,i.length-u);c<0?e-=c:c>d&&(e-=c-d)}return s&&!r&&s(e%i.length,t),p?(n.lastMovementType=null,n.lastMovementIndex=null,"forward"===t||"back"===t?n.go(e,t):void n.setState({currentSlide:e})):(n.lastMovementType=t,void(n.lastMovementIndex=e%i.length))},n.handleForward=function(){var e=n.props.perPage,t=n.state.currentSlide;return n.change(t+e,"forward")},n.handleBack=function(){var e=n.props.perPage,t=n.state.currentSlide;return n.change(t-e,"back")},n.handleExact=function(e){return n.change(e,"exact")},n.setRef=function(e){n.wrapper=reactDom.findDOMNode(e)},possibleConstructorReturn(n,r)}return inherits(t,e),createClass(t,[{key:"componentDidMount",value:function(){this.mounted=!0}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"componentWillReceiveProps",value:function(e){if(e.animationTime!==this.props.animationTime&&this.setState({transitionTime:e.animationTime}),null!=e.value&&this.props.value!==e.value){var t=e.value%e.children.length,r=this.lastMovementIndex===t?this.lastMovementType:this.props.defaultMovement;this.change(t,r,!0)}this.state.currentSlide%this.props.children.length>=e.children.length&&this.setState({currentSlide:e.children.length-1}),e.children===this.props.children&&e.perPage===this.props.perPage||this.setState({slides:chunk(e.children,e.perPage)})}},{key:"goImmediately",value:function(e){var t=this,r=this.state.currentSlide,n=this.props.animationTime;return e===r?Promise.resolve():new Promise(function(r){t.setState({currentSlide:e,transitionTime:0},function(){reflow(t.wrapper),t.setState({transitionTime:n},r)})})}},{key:"go",value:function(e){for(var t=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"forward",n=this.props,o=n.children,a=n.perPage,s=this.state.currentSlide,i=o.length;i<a;)i+=o.length;for(;e<0;)e=i+e;var l=s%i,u=e%i;"forward"===r?u=u>l?u:i+u:l=u>l?i+l:l,this.goImmediately(l).then(function(){t.mounted&&t.setState({currentSlide:u})})}},{key:"renderSlides",value:function(){var e=this.props,t=e.children,r=e.infinite,n=e.perPage,o=shared.buildClassName([moduleName$2,"slide"]),a={minWidth:100/n+"%",maxWidth:100/n+"%"},s=[];if(r)for(var i=0;i<Math.max(t.length)+3*n;i++)s.push(React.createElement("div",{className:o,style:a,key:"copy-"+i},t[i%t.length]));return t.map(function(e,t){return React.createElement("div",{className:o,style:a,key:t},e)}).concat(s)}},{key:"buildMovementProps",value:function(){var e=this.props,t=(e.renderDots,e.renderArrows,e.children),r=e.perPage,n=objectWithoutProperties(e,["renderDots","renderArrows","children","perPage"]),o=this.state,a=o.currentSlide,s=o.slides,i=a%t.length;return Object.assign({},n,{slides:s,children:t,perPage:r,index:i,value:Math.floor(i/r)})}},{key:"renderDots",value:function(){var e=this.props.renderDots;return React.createElement(e,Object.assign({},this.buildMovementProps(),{onChange:this.handleExact}))}},{key:"renderArrows",value:function(){var e=this.props,t=e.children,r=e.infinite,n=e.perPage,o=e.renderArrows,a=this.state.currentSlide,s=0===a,i=a>=t.length-n,l=Object.assign({},this.buildMovementProps());return s&&!r||(l.onBack=this.handleBack),i&&!r||(l.onForward=this.handleForward),React.createElement(o,l)}},{key:"render",value:function(){var e=this.props,t=e.arrows,r=e.className,n=e.dots,o=e.perPage,a=e.children,s=(e.animationTime,e.infinite),i=(e.renderArrows,e.renderDots,e.value,e.onChange,e.defaultMovement,objectWithoutProperties(e,["arrows","className","dots","perPage","children","animationTime","infinite","renderArrows","renderDots","value","onChange","defaultMovement"])),l=this.state,u=l.currentSlide,p=l.transitionTime,c=0===u,d=u>=a.length-o,h=shared.buildClassName(moduleName$2,r),m=shared.buildClassName([moduleName$2,"content"],null,{first:!s&&c,last:!s&&d}),f=shared.buildClassName([moduleName$2,"wrapper"]),v=shared.buildClassName([moduleName$2,"inner"]),y=n?this.renderDots():null,g=t?this.renderArrows():null,P={ref:this.setRef,style:{transform:"translateX(-"+100*u/o+"%)",transitionDuration:p+"ms"}};return React.createElement("div",Object.assign({className:h},i),React.createElement("div",{className:m},g,React.createElement("div",Object.assign({className:f},P),React.createElement("div",{className:v},this.renderSlides()))),y)}}]),t}(React.PureComponent);Carousel.propTypes=propTypes$2,Carousel.defaultProps=defaultProps$1;var propTypes$3={initialSlide:PropTypes.number,movement:PropTypes.oneOf(["exact","forward","back"]),interval:PropTypes.number,step:PropTypes.number,children:PropTypes.node},defaultProps$2={movement:"forward",interval:3e3},CarouselAutoplay=function(e){function t(e){classCallCheck(this,t);var r=possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));r.mounted=!1,r.change=function(e){e!==r.state.value&&(r.setState({carousel:r.buildCarousel(r.props,e),value:e}),r.mounted&&(r.stop(),r.tick()))};var n=r.buildCarousel(r.props,r.props.initialSlide);return r.state={carousel:n,value:n.props.value},r}return inherits(t,e),createClass(t,[{key:"componentDidMount",value:function(){this.tick(),this.mounted=!0}},{key:"componentWillUnmount",value:function(){this.stop(),this.mounted=!1}},{key:"tick",value:function(){var e=this;this.tickTimeout=setTimeout(function(){e.next(),e.tick()},this.props.interval)}},{key:"stop",value:function(){clearTimeout(this.tickTimeout)}},{key:"buildCarousel",value:function(e,t){var r=this,n=React.Children.only(e.children),o=n.props.infinite?e.movement:"exact";null==t&&(t=+n.props.value||0);var a=n.props.onChange;return React.cloneElement(e.children,{value:t||0,defaultMovement:o,onChange:null==a?this.change:function(){r.change.apply(r,arguments),a.apply(void 0,arguments)}})}},{key:"next",value:function(){var e=this.props.movement,t=this.state,r=t.value,n=t.carousel,o="back"===e?-1:1,a=null==this.props.step?+n.props.perPage||1:this.props.step,s=(n.props.children.length+r+o*a)%n.props.children.length;this.setState({carousel:this.buildCarousel(this.props,s),value:s})}},{key:"componentWillReceiveProps",value:function(e){var t=this;e.children===this.props.children&&e.movement===this.props.movement||this.setState({carousel:this.buildCarousel(e,this.state.value)}),this.props.interval!==e.interval&&this.mounted&&(this.stop(),this.tickTimeout=setTimeout(function(){return t.tick()}))}},{key:"render",value:function(){return this.state.carousel}}]),t}(React.PureComponent);CarouselAutoplay.propTypes=propTypes$3,CarouselAutoplay.defaultProps=defaultProps$2,exports.Carousel=Carousel,exports.CarouselAutoplay=CarouselAutoplay;

lib/Carousel.js

@@ -71,2 +71,5 @@ 'use strict';
 
+  /** Infinite scroll */
+  infinite: _propTypes2.default.bool,
+
   /** Number of slides visible in one time */
@@ -94,2 +97,3 @@ perPage: _propTypes2.default.number,
   animationTime: 500,
+  infinite: false,
   perPage: 1,
@@ -109,2 +113,3 @@ renderDots: _Dots2.default,
    * @property {number} [props.animationTime]
+   * @property {boolean} [props.infinite]
    * @property {number} [props.perPage]
@@ -140,6 +145,19 @@ * @property {function} [props.renderDots]
           onChange = _this$props.onChange,
-          children = _this$props.children;
+          children = _this$props.children,
+          infinite = _this$props.infinite,
+          perPage = _this$props.perPage;
 
       var isImmediate = value == null || force;
 
+      if (!infinite) {
+        var realIndex = index % children.length;
+        var maxIndex = Math.max(0, children.length - perPage);
+
+        if (realIndex < 0) {
+          index -= realIndex;
+        } else if (realIndex > maxIndex) {
+          index -= realIndex - maxIndex;
+        }
+      }
+
       if (onChange && !force) {
@@ -342,2 +360,3 @@ onChange(index % children.length, type);
           children = _props2.children,
+          infinite = _props2.infinite,
           perPage = _props2.perPage;
@@ -351,8 +370,10 @@
 
-      for (var i = 0; i < Math.max(children.length) + 3 * perPage; i++) {
-        copies.push(_react2.default.createElement(
-          'div',
-          { className: clsName, style: style, key: 'copy-' + i },
-          children[i % children.length]
-        ));
+      if (infinite) {
+        for (var i = 0; i < Math.max(children.length) + 3 * perPage; i++) {
+          copies.push(_react2.default.createElement(
+            'div',
+            { className: clsName, style: style, key: 'copy-' + i },
+            children[i % children.length]
+          ));
+        }
       }
@@ -427,9 +448,24 @@
     value: function renderArrows() {
-      var renderArrows = this.props.renderArrows;
+      var _props4 = this.props,
+          children = _props4.children,
+          infinite = _props4.infinite,
+          perPage = _props4.perPage,
+          renderArrows = _props4.renderArrows;
+      var currentSlide = this.state.currentSlide;
 
 
-      return _react2.default.createElement(renderArrows, Object.assign({}, this.buildMovementProps(), {
-        onBack: this.handleBack,
-        onForward: this.handleForward
-      }));
+      var firstSlide = currentSlide === 0;
+      var lastSlide = currentSlide >= children.length - perPage;
+
+      var props = Object.assign({}, this.buildMovementProps());
+
+      if (!firstSlide || infinite) {
+        props.onBack = this.handleBack;
+      }
+
+      if (!lastSlide || infinite) {
+        props.onForward = this.handleForward;
+      }
+
+      return _react2.default.createElement(renderArrows, props);
     }
@@ -439,15 +475,16 @@ }, {
     value: function render() {
-      var _props4 = this.props,
-          arrows = _props4.arrows,
-          className = _props4.className,
-          dots = _props4.dots,
-          perPage = _props4.perPage,
-          children = _props4.children,
-          animationTime = _props4.animationTime,
-          renderArrows = _props4.renderArrows,
-          renderDots = _props4.renderDots,
-          value = _props4.value,
-          onChange = _props4.onChange,
-          defaultMovement = _props4.defaultMovement,
-          passedProps = _objectWithoutProperties(_props4, ['arrows', 'className', 'dots', 'perPage', 'children', 'animationTime', 'renderArrows', 'renderDots', 'value', 'onChange', 'defaultMovement']);
+      var _props5 = this.props,
+          arrows = _props5.arrows,
+          className = _props5.className,
+          dots = _props5.dots,
+          perPage = _props5.perPage,
+          children = _props5.children,
+          animationTime = _props5.animationTime,
+          infinite = _props5.infinite,
+          renderArrows = _props5.renderArrows,
+          renderDots = _props5.renderDots,
+          value = _props5.value,
+          onChange = _props5.onChange,
+          defaultMovement = _props5.defaultMovement,
+          passedProps = _objectWithoutProperties(_props5, ['arrows', 'className', 'dots', 'perPage', 'children', 'animationTime', 'infinite', 'renderArrows', 'renderDots', 'value', 'onChange', 'defaultMovement']);
 
@@ -459,4 +496,10 @@ var _state2 = this.state,
 
+      var firstSlide = currentSlide === 0;
+      var lastSlide = currentSlide >= children.length - perPage;
+
       var clsName = (0, _shared.buildClassName)(moduleName, className);
-      var contentClsName = (0, _shared.buildClassName)([moduleName, 'content']);
+      var contentClsName = (0, _shared.buildClassName)([moduleName, 'content'], null, {
+        first: !infinite && firstSlide,
+        last: !infinite && lastSlide
+      });
       var wrapperClsName = (0, _shared.buildClassName)([moduleName, 'wrapper']);
@@ -463,0 +506,0 @@ var innerClsName = (0, _shared.buildClassName)([moduleName, 'inner']);

lib/CarouselAutoplay.js

@@ -181,2 +181,4 @@ 'use strict';
 
+      var movement = carousel.props.infinite ? props.movement : 'exact';
+
       if (slide == null) {
@@ -190,3 +192,3 @@ slide = +carousel.props.value || 0;
         value: slide || 0,
-        defaultMovement: props.movement,
+        defaultMovement: movement,
         onChange: onChange == null ? this.change : function () {
@@ -213,2 +215,3 @@ _this3.change.apply(_this3, arguments);
     value: function next() {
+      var movement = this.props.movement;
       var _state = this.state,
@@ -219,4 +222,5 @@ value = _state.value,
 
+      var dir = movement === 'back' ? -1 : 1;
       var step = this.props.step == null ? +carousel.props.perPage || 1 : this.props.step;
-      var nextValue = (value + step) % carousel.props.children.length;
+      var nextValue = (carousel.props.children.length + value + dir * step) % carousel.props.children.length;
 
@@ -223,0 +227,0 @@ this.setState({

package.json

 {
   "name": "@talixo/carousel",
-  "version": "1.0.0-alpha.20",
+  "version": "1.0.0-alpha.21",
   "description": "UI Component which represents Carousel",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -14,4 +14,4 @@ # Talixo Carousel
 
-- `@talixo/icon: ^1.0.0-alpha.18`
-- `@talixo/shared: ^1.0.0-alpha.18`
+- `@talixo/icon: ^1.0.0-alpha.20`
+- `@talixo/shared: ^1.0.0-alpha.20`
 - `lodash: ^4.17.10`
@@ -38,2 +38,3 @@ - `prop-types: ^15.6.1`
 animationTime   | number    | `500`           | Duration of animation (in ms)
+infinite        | bool      | `false`         | Infinite scroll
 perPage         | number    | `1`             | Number of visible slides
@@ -40,0 +41,0 @@ renderDots      | function  | `Dots`          | Function which render custom dots

src/Carousel.js

@@ -40,2 +40,5 @@ import React from 'react'
 
+  /** Infinite scroll */
+  infinite: PropTypes.bool,
+
   /** Number of slides visible in one time */
@@ -63,2 +66,3 @@ perPage: PropTypes.number,
   animationTime: 500,
+  infinite: false,
   perPage: 1,
@@ -79,2 +83,3 @@ renderDots: Dots,
  * @property {number} [props.animationTime]
+ * @property {boolean} [props.infinite]
  * @property {number} [props.perPage]
@@ -166,5 +171,16 @@ * @property {function} [props.renderDots]
   change = (index, type = 'exact', force = false) => {
-    const { value, onChange, children } = this.props
+    const { value, onChange, children, infinite, perPage } = this.props
     const isImmediate = value == null || force
 
+    if (!infinite) {
+      const realIndex = index % children.length
+      const maxIndex = Math.max(0, children.length - perPage)
+
+      if (realIndex < 0) {
+        index -= realIndex
+      } else if (realIndex > maxIndex) {
+        index -= realIndex - maxIndex
+      }
+    }
+
     if (onChange && !force) {
@@ -272,3 +288,3 @@ onChange(index % children.length, type)
   renderSlides () {
-    const { children, perPage } = this.props
+    const { children, infinite, perPage } = this.props
 
@@ -280,8 +296,10 @@ const clsName = buildClassName([ moduleName, 'slide' ])
 
-    for (let i = 0; i < Math.max(children.length) + 3 * perPage; i++) {
-      copies.push(
-        <div className={clsName} style={style} key={'copy-' + i}>
-          {children[i % children.length]}
-        </div>
-      )
+    if (infinite) {
+      for (let i = 0; i < Math.max(children.length) + 3 * perPage; i++) {
+        copies.push(
+          <div className={clsName} style={style} key={'copy-' + i}>
+            {children[i % children.length]}
+          </div>
+        )
+      }
     }
@@ -337,9 +355,19 @@
   renderArrows () {
-    const { renderArrows } = this.props
+    const { children, infinite, perPage, renderArrows } = this.props
+    const { currentSlide } = this.state
 
-    return React.createElement(renderArrows, {
-      ...this.buildMovementProps(),
-      onBack: this.handleBack,
-      onForward: this.handleForward
-    })
+    const firstSlide = currentSlide === 0
+    const lastSlide = currentSlide >= (children.length - perPage)
+
+    const props = { ...this.buildMovementProps() }
+
+    if (!firstSlide || infinite) {
+      props.onBack = this.handleBack
+    }
+
+    if (!lastSlide || infinite) {
+      props.onForward = this.handleForward
+    }
+
+    return React.createElement(renderArrows, props)
   }
@@ -349,3 +377,3 @@
     const {
-      arrows, className, dots, perPage, children, animationTime,
+      arrows, className, dots, perPage, children, animationTime, infinite,
       renderArrows, renderDots, value, onChange, defaultMovement, ...passedProps
@@ -355,4 +383,10 @@ } = this.props
 
+    const firstSlide = currentSlide === 0
+    const lastSlide = currentSlide >= (children.length - perPage)
+
     const clsName = buildClassName(moduleName, className)
-    const contentClsName = buildClassName([ moduleName, 'content' ])
+    const contentClsName = buildClassName([ moduleName, 'content' ], null, {
+      first: !infinite && firstSlide,
+      last: !infinite && lastSlide
+    })
     const wrapperClsName = buildClassName([ moduleName, 'wrapper' ])
@@ -359,0 +393,0 @@ const innerClsName = buildClassName([ moduleName, 'inner' ])

src/CarouselAutoplay.js

@@ -118,2 +118,4 @@ import React from 'react'
 
+    const movement = carousel.props.infinite ? props.movement : 'exact'
+
     if (slide == null) {
@@ -127,3 +129,3 @@ slide = +carousel.props.value || 0
       value: slide || 0,
-      defaultMovement: props.movement,
+      defaultMovement: movement,
       onChange: onChange == null
@@ -164,6 +166,8 @@ ? this.change
   next () {
+    const { movement } = this.props
     const { value, carousel } = this.state
 
+    const dir = movement === 'back' ? -1 : 1
     const step = this.props.step == null ? +carousel.props.perPage || 1 : this.props.step
-    const nextValue = (value + step) % carousel.props.children.length
+    const nextValue = (carousel.props.children.length + value + dir * step) % carousel.props.children.length
 
@@ -170,0 +174,0 @@ this.setState({

No alert changes

Improved metrics

Total package byte prevSize

89328

increased by5.81%

Lines of code

2181

increased by5.16%

Number of lines in readme file

58

increased by1.75%

No dependency changes