react-customizable-carousel - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

es/constants/index.js

@@ -9,2 +9,7 @@ 'use strict';
   next: 'next'
+};
+
+var EFFECT_3D_NAMES = exports.EFFECT_3D_NAMES = {
+  daw: 'daw',
+  scale: 'scale'
 };

es/index.js

@@ -62,3 +62,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call.apply(_ref, [this].concat(args))), _this), _this.state = { currentIndex: 0, dotsIndex: 0, translateX: 0, inTransition: false, scrollItems: 1 }, _this.handleNextClick = function () {
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call.apply(_ref, [this].concat(args))), _this), _this.state = { currentIndex: 0, nextIndex: 0, dotsIndex: 0, translateX: 0, inTransition: false, scrollItems: 1 }, _this.handleNextClick = function () {
       var _this$state = _this.state,
@@ -79,3 +79,3 @@ currentIndex = _this$state.currentIndex,
 
-      _this.setState({ currentIndex: currentIndex, scrollItems: scrollItems, direction: _constants.DIRECTIONS.next, transitionDuration: transitionDuration, translateX: undefined, inTransition: true });
+      _this.setState({ currentIndex: currentIndex, nextIndex: nextIndex, scrollItems: scrollItems, direction: _constants.DIRECTIONS.next, transitionDuration: transitionDuration, translateX: undefined, inTransition: true });
       setTimeout(function () {
@@ -106,3 +106,3 @@ return _this.setState({
 
-      _this.setState({ currentIndex: currentIndex, scrollItems: scrollItems, direction: _constants.DIRECTIONS.prev, transitionDuration: transitionDuration, translateX: undefined, inTransition: true });
+      _this.setState({ currentIndex: currentIndex, nextIndex: nextIndex, scrollItems: scrollItems, direction: _constants.DIRECTIONS.prev, transitionDuration: transitionDuration, translateX: undefined, inTransition: true });
       setTimeout(function () {
@@ -158,3 +158,3 @@ return _this.setState({
           prevArrow = _props.prevArrow,
-          ArrowWrapperClassName = _props.ArrowWrapperClassName,
+          arrowWrapperClassName = _props.arrowWrapperClassName,
           showDots = _props.showDots,
@@ -164,3 +164,6 @@ dot = _props.dot,
           dotsWrapperClassName = _props.dotsWrapperClassName,
-          enableDragScroll = _props.enableDragScroll;
+          enableDragScroll = _props.enableDragScroll,
+          enable3d = _props.enable3d,
+          effectOf3d = _props.effectOf3d,
+          listWrapperClassName = _props.listWrapperClassName;
       var _state = this.state,
@@ -172,10 +175,12 @@ currentIndex = _state.currentIndex,
           scrollItems = _state.scrollItems,
-          dotsIndex = _state.dotsIndex;
+          dotsIndex = _state.dotsIndex,
+          nextIndex = _state.nextIndex,
+          inTransition = _state.inTransition;
 
       return _react2.default.createElement(
         'div',
-        { className: 'rcc-Carousel' },
+        { className: this.cssClass },
         _react2.default.createElement(_Arrow.Arrow, {
           arrowType: _Arrow.ARROW_TYPES.prev,
-          className: ArrowWrapperClassName,
+          className: arrowWrapperClassName,
           onClick: this.handlePrevClick,
@@ -185,4 +190,6 @@ component: prevArrow
         _react2.default.createElement(_List2.default, {
+          className: listWrapperClassName,
           items: children,
           currentIndex: currentIndex,
+          nextIndex: nextIndex,
           showItemsCount: showItemsCount,
@@ -195,7 +202,10 @@ direction: direction,
           onPrev: this.handlePrevClick,
-          enableDragScroll: enableDragScroll
+          enableDragScroll: enableDragScroll,
+          enable3d: enable3d,
+          effectOf3d: effectOf3d,
+          inTransition: inTransition
         }),
         _react2.default.createElement(_Arrow.Arrow, {
           arrowType: _Arrow.ARROW_TYPES.next,
-          className: ArrowWrapperClassName,
+          className: arrowWrapperClassName,
           onClick: this.handleNextClick,
@@ -214,2 +224,9 @@ component: nextArrow
     }
+  }, {
+    key: 'cssClass',
+    get: function get() {
+      var className = this.props.className;
+
+      return 'rcc-Carousel ' + (className || '');
+    }
   }]);
@@ -234,3 +251,5 @@ return Carousel;
   showDots: false,
-  enableDragScroll: true
+  enableDragScroll: true,
+  enable3d: false,
+  effectOf3d: { name: 'scale' }
 };

es/List/index.js

@@ -57,7 +57,11 @@ 'use strict';
           onPrev = _props.onPrev,
-          enableDragScroll = _props.enableDragScroll;
+          enableDragScroll = _props.enableDragScroll,
+          enable3d = _props.enable3d,
+          nextIndex = _props.nextIndex,
+          inTransition = _props.inTransition,
+          effectOf3d = _props.effectOf3d;
 
       return _react2.default.createElement(
         'div',
-        { className: 'rcc-List', ref: measureRef },
+        { className: this.cssClass, ref: measureRef },
         _react2.default.createElement(
@@ -69,2 +73,3 @@ _ListItems.ListItems,
             currentIndex: currentIndex,
+            nextIndex: nextIndex,
             direction: direction,
@@ -76,3 +81,6 @@ transitionDuration: transitionDuration,
             onPrev: onPrev,
-            enableDragScroll: enableDragScroll
+            enableDragScroll: enableDragScroll,
+            enable3d: enable3d,
+            effectOf3d: effectOf3d,
+            inTransition: inTransition
           },
@@ -83,2 +91,9 @@ items
     }
+  }, {
+    key: 'cssClass',
+    get: function get() {
+      var className = this.props.className;
+
+      return 'rcc-List ' + (className || '');
+    }
   }]);
@@ -85,0 +100,0 @@ return List;

es/List/ListItem/index.js

@@ -28,2 +28,4 @@ 'use strict';
 
+var _constants = require('../../constants');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -67,3 +69,2 @@
       var _props = this.props,
-          style = _props.style,
           children = _props.children,
@@ -76,3 +77,3 @@ enableDragScroll = _props.enableDragScroll;
           className: 'rcc-ListItem',
-          style: style,
+          style: this.style,
           draggable: '' + enableDragScroll,
@@ -85,4 +86,83 @@ onDragStart: this.handleDragStart,
     }
+  }, {
+    key: 'translateCoefficient',
+    get: function get() {
+      var _props2 = this.props,
+          direction = _props2.direction,
+          index = _props2.index,
+          showItemsCount = _props2.showItemsCount,
+          inTransition = _props2.inTransition;
+
+      var multiplier = 0.5;
+      var z = -1 * Math.abs(0 - index + (showItemsCount + 1) / 2) * multiplier;
+      if (!inTransition) return z;
+      var difference = direction === _constants.DIRECTIONS.prev ? -1 : 1;
+
+      return -1 * Math.abs(0 - index + difference + (showItemsCount + 1) / 2) * multiplier;
+    }
+  }, {
+    key: 'style3d',
+    get: function get() {
+      var name = this.props.effectOf3d.name;
+
+      switch (name) {
+        case _constants.EFFECT_3D_NAMES.daw:
+          return this.style3dDaw;
+        default:
+          return this.style3dScale;
+      }
+    }
+  }, {
+    key: 'style3dScale',
+    get: function get() {
+      var _props3 = this.props,
+          width = _props3.width,
+          addItemsLeft = _props3.addItemsLeft,
+          transitionDuration = _props3.transitionDuration;
+
+      var translate = 'translate3d(' + width * addItemsLeft * -1 + 'px, ' + 0 + 'px, ' + this.translateCoefficient + 'px)';
+      var scale = 'scale(' + 1 / (Math.abs(this.translateCoefficient) + 1) + ')';
+      return {
+        width: width + 'px',
+        display: 'inline-block',
+        transform: 'perspective(1000px) ' + translate + ' ' + scale,
+        transitionDuration: transitionDuration + 's'
+      };
+    }
+  }, {
+    key: 'style3dDaw',
+    get: function get() {
+      var _props4 = this.props,
+          width = _props4.width,
+          addItemsLeft = _props4.addItemsLeft,
+          transitionDuration = _props4.transitionDuration,
+          dawStep = _props4.effectOf3d.dawStep;
+
+      var translate = 'translate3d(' + width * addItemsLeft * -1 + 'px, ' + (dawStep + this.translateCoefficient * dawStep) + 'px, ' + this.translateCoefficient + 'px)';
+      return {
+        width: width + 'px',
+        display: 'inline-block',
+        transform: 'perspective(1000px) ' + translate,
+        transitionDuration: transitionDuration + 's'
+      };
+    }
+  }, {
+    key: 'style',
+    get: function get() {
+      var _props5 = this.props,
+          width = _props5.width,
+          addItemsLeft = _props5.addItemsLeft,
+          enable3d = _props5.enable3d,
+          transitionDuration = _props5.transitionDuration;
+
+      if (enable3d) return this.style3d;
+      return {
+        width: width + 'px',
+        display: 'inline-block',
+        transform: 'translate(' + width * addItemsLeft * -1 + 'px)',
+        transitionDuration: transitionDuration + 's'
+      };
+    }
   }]);
   return ListItem;
 }(_react.Component);

es/List/ListItems/index.js

@@ -66,3 +66,12 @@ 'use strict';
           onNext = _props.onNext,
-          onPrev = _props.onPrev;
+          onPrev = _props.onPrev,
+          itemWidth = _props.itemWidth,
+          enable3d = _props.enable3d,
+          showItemsCount = _props.showItemsCount,
+          currentIndex = _props.currentIndex,
+          nextIndex = _props.nextIndex,
+          inTransition = _props.inTransition,
+          transitionDuration = _props.transitionDuration,
+          direction = _props.direction,
+          effectOf3d = _props.effectOf3d;
 
@@ -78,6 +87,16 @@ return _react2.default.createElement(
               key: index,
-              style: _this2.childStyle,
+              index: index,
+              width: itemWidth,
+              addItemsLeft: _this2.addItemsLeft,
               onNext: onNext,
               onPrev: onPrev,
-              enableDragScroll: enableDragScroll
+              enableDragScroll: enableDragScroll,
+              enable3d: enable3d,
+              effectOf3d: effectOf3d,
+              showItemsCount: showItemsCount,
+              currentIndex: currentIndex,
+              nextIndex: nextIndex,
+              inTransition: inTransition,
+              transitionDuration: transitionDuration,
+              direction: direction
             },
@@ -84,0 +103,0 @@ child

lib/constants/index.js

@@ -9,2 +9,7 @@ 'use strict';
   next: 'next'
+};
+
+var EFFECT_3D_NAMES = exports.EFFECT_3D_NAMES = {
+  daw: 'daw',
+  scale: 'scale'
 };

lib/index.js

@@ -62,3 +62,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call.apply(_ref, [this].concat(args))), _this), _this.state = { currentIndex: 0, dotsIndex: 0, translateX: 0, inTransition: false, scrollItems: 1 }, _this.handleNextClick = function () {
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Carousel.__proto__ || Object.getPrototypeOf(Carousel)).call.apply(_ref, [this].concat(args))), _this), _this.state = { currentIndex: 0, nextIndex: 0, dotsIndex: 0, translateX: 0, inTransition: false, scrollItems: 1 }, _this.handleNextClick = function () {
       var _this$state = _this.state,
@@ -79,3 +79,3 @@ currentIndex = _this$state.currentIndex,
 
-      _this.setState({ currentIndex: currentIndex, scrollItems: scrollItems, direction: _constants.DIRECTIONS.next, transitionDuration: transitionDuration, translateX: undefined, inTransition: true });
+      _this.setState({ currentIndex: currentIndex, nextIndex: nextIndex, scrollItems: scrollItems, direction: _constants.DIRECTIONS.next, transitionDuration: transitionDuration, translateX: undefined, inTransition: true });
       setTimeout(function () {
@@ -106,3 +106,3 @@ return _this.setState({
 
-      _this.setState({ currentIndex: currentIndex, scrollItems: scrollItems, direction: _constants.DIRECTIONS.prev, transitionDuration: transitionDuration, translateX: undefined, inTransition: true });
+      _this.setState({ currentIndex: currentIndex, nextIndex: nextIndex, scrollItems: scrollItems, direction: _constants.DIRECTIONS.prev, transitionDuration: transitionDuration, translateX: undefined, inTransition: true });
       setTimeout(function () {
@@ -158,3 +158,3 @@ return _this.setState({
           prevArrow = _props.prevArrow,
-          ArrowWrapperClassName = _props.ArrowWrapperClassName,
+          arrowWrapperClassName = _props.arrowWrapperClassName,
           showDots = _props.showDots,
@@ -164,3 +164,6 @@ dot = _props.dot,
           dotsWrapperClassName = _props.dotsWrapperClassName,
-          enableDragScroll = _props.enableDragScroll;
+          enableDragScroll = _props.enableDragScroll,
+          enable3d = _props.enable3d,
+          effectOf3d = _props.effectOf3d,
+          listWrapperClassName = _props.listWrapperClassName;
       var _state = this.state,
@@ -172,10 +175,12 @@ currentIndex = _state.currentIndex,
           scrollItems = _state.scrollItems,
-          dotsIndex = _state.dotsIndex;
+          dotsIndex = _state.dotsIndex,
+          nextIndex = _state.nextIndex,
+          inTransition = _state.inTransition;
 
       return _react2.default.createElement(
         'div',
-        { className: 'rcc-Carousel' },
+        { className: this.cssClass },
         _react2.default.createElement(_Arrow.Arrow, {
           arrowType: _Arrow.ARROW_TYPES.prev,
-          className: ArrowWrapperClassName,
+          className: arrowWrapperClassName,
           onClick: this.handlePrevClick,
@@ -185,4 +190,6 @@ component: prevArrow
         _react2.default.createElement(_List2.default, {
+          className: listWrapperClassName,
           items: children,
           currentIndex: currentIndex,
+          nextIndex: nextIndex,
           showItemsCount: showItemsCount,
@@ -195,7 +202,10 @@ direction: direction,
           onPrev: this.handlePrevClick,
-          enableDragScroll: enableDragScroll
+          enableDragScroll: enableDragScroll,
+          enable3d: enable3d,
+          effectOf3d: effectOf3d,
+          inTransition: inTransition
         }),
         _react2.default.createElement(_Arrow.Arrow, {
           arrowType: _Arrow.ARROW_TYPES.next,
-          className: ArrowWrapperClassName,
+          className: arrowWrapperClassName,
           onClick: this.handleNextClick,
@@ -214,2 +224,9 @@ component: nextArrow
     }
+  }, {
+    key: 'cssClass',
+    get: function get() {
+      var className = this.props.className;
+
+      return 'rcc-Carousel ' + (className || '');
+    }
   }]);
@@ -234,3 +251,5 @@ return Carousel;
   showDots: false,
-  enableDragScroll: true
+  enableDragScroll: true,
+  enable3d: false,
+  effectOf3d: { name: 'scale' }
 };

lib/List/index.js

@@ -57,7 +57,11 @@ 'use strict';
           onPrev = _props.onPrev,
-          enableDragScroll = _props.enableDragScroll;
+          enableDragScroll = _props.enableDragScroll,
+          enable3d = _props.enable3d,
+          nextIndex = _props.nextIndex,
+          inTransition = _props.inTransition,
+          effectOf3d = _props.effectOf3d;
 
       return _react2.default.createElement(
         'div',
-        { className: 'rcc-List', ref: measureRef },
+        { className: this.cssClass, ref: measureRef },
         _react2.default.createElement(
@@ -69,2 +73,3 @@ _ListItems.ListItems,
             currentIndex: currentIndex,
+            nextIndex: nextIndex,
             direction: direction,
@@ -76,3 +81,6 @@ transitionDuration: transitionDuration,
             onPrev: onPrev,
-            enableDragScroll: enableDragScroll
+            enableDragScroll: enableDragScroll,
+            enable3d: enable3d,
+            effectOf3d: effectOf3d,
+            inTransition: inTransition
           },
@@ -83,2 +91,9 @@ items
     }
+  }, {
+    key: 'cssClass',
+    get: function get() {
+      var className = this.props.className;
+
+      return 'rcc-List ' + (className || '');
+    }
   }]);
@@ -85,0 +100,0 @@ return List;

lib/List/ListItem/index.js

@@ -28,2 +28,4 @@ 'use strict';
 
+var _constants = require('../../constants');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -67,3 +69,2 @@
       var _props = this.props,
-          style = _props.style,
           children = _props.children,
@@ -76,3 +77,3 @@ enableDragScroll = _props.enableDragScroll;
           className: 'rcc-ListItem',
-          style: style,
+          style: this.style,
           draggable: '' + enableDragScroll,
@@ -85,4 +86,83 @@ onDragStart: this.handleDragStart,
     }
+  }, {
+    key: 'translateCoefficient',
+    get: function get() {
+      var _props2 = this.props,
+          direction = _props2.direction,
+          index = _props2.index,
+          showItemsCount = _props2.showItemsCount,
+          inTransition = _props2.inTransition;
+
+      var multiplier = 0.5;
+      var z = -1 * Math.abs(0 - index + (showItemsCount + 1) / 2) * multiplier;
+      if (!inTransition) return z;
+      var difference = direction === _constants.DIRECTIONS.prev ? -1 : 1;
+
+      return -1 * Math.abs(0 - index + difference + (showItemsCount + 1) / 2) * multiplier;
+    }
+  }, {
+    key: 'style3d',
+    get: function get() {
+      var name = this.props.effectOf3d.name;
+
+      switch (name) {
+        case _constants.EFFECT_3D_NAMES.daw:
+          return this.style3dDaw;
+        default:
+          return this.style3dScale;
+      }
+    }
+  }, {
+    key: 'style3dScale',
+    get: function get() {
+      var _props3 = this.props,
+          width = _props3.width,
+          addItemsLeft = _props3.addItemsLeft,
+          transitionDuration = _props3.transitionDuration;
+
+      var translate = 'translate3d(' + width * addItemsLeft * -1 + 'px, ' + 0 + 'px, ' + this.translateCoefficient + 'px)';
+      var scale = 'scale(' + 1 / (Math.abs(this.translateCoefficient) + 1) + ')';
+      return {
+        width: width + 'px',
+        display: 'inline-block',
+        transform: 'perspective(1000px) ' + translate + ' ' + scale,
+        transitionDuration: transitionDuration + 's'
+      };
+    }
+  }, {
+    key: 'style3dDaw',
+    get: function get() {
+      var _props4 = this.props,
+          width = _props4.width,
+          addItemsLeft = _props4.addItemsLeft,
+          transitionDuration = _props4.transitionDuration,
+          dawStep = _props4.effectOf3d.dawStep;
+
+      var translate = 'translate3d(' + width * addItemsLeft * -1 + 'px, ' + (dawStep + this.translateCoefficient * dawStep) + 'px, ' + this.translateCoefficient + 'px)';
+      return {
+        width: width + 'px',
+        display: 'inline-block',
+        transform: 'perspective(1000px) ' + translate,
+        transitionDuration: transitionDuration + 's'
+      };
+    }
+  }, {
+    key: 'style',
+    get: function get() {
+      var _props5 = this.props,
+          width = _props5.width,
+          addItemsLeft = _props5.addItemsLeft,
+          enable3d = _props5.enable3d,
+          transitionDuration = _props5.transitionDuration;
+
+      if (enable3d) return this.style3d;
+      return {
+        width: width + 'px',
+        display: 'inline-block',
+        transform: 'translate(' + width * addItemsLeft * -1 + 'px)',
+        transitionDuration: transitionDuration + 's'
+      };
+    }
   }]);
   return ListItem;
 }(_react.Component);

lib/List/ListItems/index.js

@@ -66,3 +66,12 @@ 'use strict';
           onNext = _props.onNext,
-          onPrev = _props.onPrev;
+          onPrev = _props.onPrev,
+          itemWidth = _props.itemWidth,
+          enable3d = _props.enable3d,
+          showItemsCount = _props.showItemsCount,
+          currentIndex = _props.currentIndex,
+          nextIndex = _props.nextIndex,
+          inTransition = _props.inTransition,
+          transitionDuration = _props.transitionDuration,
+          direction = _props.direction,
+          effectOf3d = _props.effectOf3d;
 
@@ -78,6 +87,16 @@ return _react2.default.createElement(
               key: index,
-              style: _this2.childStyle,
+              index: index,
+              width: itemWidth,
+              addItemsLeft: _this2.addItemsLeft,
               onNext: onNext,
               onPrev: onPrev,
-              enableDragScroll: enableDragScroll
+              enableDragScroll: enableDragScroll,
+              enable3d: enable3d,
+              effectOf3d: effectOf3d,
+              showItemsCount: showItemsCount,
+              currentIndex: currentIndex,
+              nextIndex: nextIndex,
+              inTransition: inTransition,
+              transitionDuration: transitionDuration,
+              direction: direction
             },
@@ -84,0 +103,0 @@ child

package.json

 {
   "name": "react-customizable-carousel",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "main": "./lib/index.js",
@@ -5,0 +5,0 @@ "module": "./es/index.js",

README.md

 # Customizable react carousel
 
-Latest version: ```0.0.6```
+Latest version: ```0.0.7```
 
@@ -48,7 +48,15 @@ [DEMO](https://bf-man.github.io/)
 | prevArrow             | function/class | FaAngleLeft  | A function/class of component to extend default prev arrow. See examples |
-| ArrowWrapperClassName | string         | ''           | Will be added provided className to arrow wrapper. Also will be added ArrowWrapperClassName--prev and ArrowWrapperClassName--next to corresponding arrows|
 | showDots              | boolean        | false        | Show dots navigation flag                 |
 | dot                   | function/class | FaCircleO / FaCircle | A function/class of component to extend default dot. props.current (boolean) will be passed to it. See examples |
-| dotWrapperClassName   | string         | ''           | Will be added provided className to dot wrapper  |
-| dotsWrapperClassName  | string         | ''           | Will be added provided className to dots wrapper |
-| enableDragScroll      | boolean        | true         | Pass false to disable drag scroll                |
+| enableDragScroll      | boolean        | true         | Pass false to disable drag scroll         |
+| enable3d              | boolean        | false        | Experimental feature. Currently it WON'T work properly with enabled dots |
+| effectOf3d            | object         | { name: 'scale' } | Experimental feature. Available effects: { name: 'scale' }, { name: 'daw', dawStep: 50 }. For daw you must provide dawStep and set bigger height of the List component using css. See example. |
+
+### ClassName Props
+| prop                  | type           | default      | info                                      |
+| --------------------- | -------------- | ------------ | ----------------------------------------- |
+| className             | string         | ''           | Will be added provided className to main wrapper  |
+| arrowWrapperClassName | string         | ''           | Will be added provided className to Arrow wrapper. Also will be added arrowWrapperClassName--prev and arrowWrapperClassName--next to corresponding arrows|
+| dotWrapperClassName   | string         | ''           | Will be added provided className to Dot wrapper   |
+| dotsWrapperClassName  | string         | ''           | Will be added provided className to Dots wrapper  |
+| listWrapperClassName  | string         | ''           | Will be added provided className to List wrapper  |  

No alert changes

Improved metrics

Total package byte prevSize

71226

16.77%

Lines of code

1580

19.34%

Number of lines in readme file

62

14.81%

No dependency changes