react-customizable-carousel - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

es/Arrow/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Arrow = undefined;
+exports.Arrow = exports.ARROW_TYPES = undefined;
 
@@ -31,2 +31,7 @@ var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
+var ARROW_TYPES = exports.ARROW_TYPES = {
+  prev: 'prev',
+  next: 'next'
+};
+
 var Arrow = exports.Arrow = function (_PureComponent) {
@@ -45,8 +50,10 @@ (0, _inherits3.default)(Arrow, _PureComponent);
           onClick = _props.onClick,
-          children = _props.children;
+          component = _props.component,
+          arrowType = _props.arrowType;
 
+      var ArrowComponent = component;
       return _react2.default.createElement(
         'div',
-        { className: this.cssClass, onClick: onClick },
-        children
+        { className: this.cssClass },
+        _react2.default.createElement(ArrowComponent, { onClick: onClick, arrowType: arrowType })
       );
@@ -59,5 +66,6 @@ }
           className = _props2.className,
-          type = _props2.type;
+          arrowType = _props2.arrowType;
 
-      return 'rcc-Arrow ' + (className || '') + ' ' + (type ? 'rcc-Arrow--' + type : '');
+      var customClassName = !className ? '' : className + ' ' + (arrowType ? className + '--' + arrowType : '');
+      return 'rcc-Arrow ' + (arrowType ? 'rcc-Arrow--' + arrowType : '') + ' ' + customClassName;
     }
@@ -64,0 +72,0 @@ }]);

es/index.js

@@ -104,3 +104,6 @@ 'use strict';
           children = _props.children,
-          showItemsCount = _props.showItemsCount;
+          showItemsCount = _props.showItemsCount,
+          nextArrow = _props.nextArrow,
+          prevArrow = _props.prevArrow,
+          ArrowWrapperClassName = _props.ArrowWrapperClassName;
       var _state = this.state,
@@ -115,7 +118,7 @@ currentIndex = _state.currentIndex,
         { className: 'rcc-Carousel' },
-        _react2.default.createElement(
-          _Arrow.Arrow,
-          { type: 'prev', onClick: this.handlePrevClick },
-          _react2.default.createElement(_angleLeft2.default, null)
-        ),
+        _react2.default.createElement(_Arrow.Arrow, {
+          arrowType: _Arrow.ARROW_TYPES.prev,
+          className: ArrowWrapperClassName,
+          onClick: this.handlePrevClick,
+          component: prevArrow }),
         _react2.default.createElement(_List2.default, {
@@ -128,7 +131,7 @@ items: children,
           translateX: translateX }),
-        _react2.default.createElement(
-          _Arrow.Arrow,
-          { type: 'next', onClick: this.handleNextClick },
-          _react2.default.createElement(_angleRight2.default, null)
-        )
+        _react2.default.createElement(_Arrow.Arrow, {
+          arrowType: _Arrow.ARROW_TYPES.next,
+          className: ArrowWrapperClassName,
+          onClick: this.handleNextClick,
+          component: nextArrow })
       );
@@ -140,5 +143,16 @@ }
 
+var NextArrow = function NextArrow(_ref2) {
+  var onClick = _ref2.onClick;
+  return _react2.default.createElement(_angleRight2.default, { onClick: onClick });
+};
+var PrevArrow = function PrevArrow(_ref3) {
+  var onClick = _ref3.onClick;
+  return _react2.default.createElement(_angleLeft2.default, { onClick: onClick });
+};
+
 Carousel.defaultProps = {
   transitionDuration: 0.5,
-  showItemsCount: 3
+  showItemsCount: 3,
+  nextArrow: NextArrow,
+  prevArrow: PrevArrow
 };

lib/Arrow/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Arrow = undefined;
+exports.Arrow = exports.ARROW_TYPES = undefined;
 
@@ -31,2 +31,7 @@ var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
+var ARROW_TYPES = exports.ARROW_TYPES = {
+  prev: 'prev',
+  next: 'next'
+};
+
 var Arrow = exports.Arrow = function (_PureComponent) {
@@ -45,8 +50,10 @@ (0, _inherits3.default)(Arrow, _PureComponent);
           onClick = _props.onClick,
-          children = _props.children;
+          component = _props.component,
+          arrowType = _props.arrowType;
 
+      var ArrowComponent = component;
       return _react2.default.createElement(
         'div',
-        { className: this.cssClass, onClick: onClick },
-        children
+        { className: this.cssClass },
+        _react2.default.createElement(ArrowComponent, { onClick: onClick, arrowType: arrowType })
       );
@@ -59,5 +66,6 @@ }
           className = _props2.className,
-          type = _props2.type;
+          arrowType = _props2.arrowType;
 
-      return 'rcc-Arrow ' + (className || '') + ' ' + (type ? 'rcc-Arrow--' + type : '');
+      var customClassName = !className ? '' : className + ' ' + (arrowType ? className + '--' + arrowType : '');
+      return 'rcc-Arrow ' + (arrowType ? 'rcc-Arrow--' + arrowType : '') + ' ' + customClassName;
     }
@@ -64,0 +72,0 @@ }]);

lib/index.js

@@ -104,3 +104,6 @@ 'use strict';
           children = _props.children,
-          showItemsCount = _props.showItemsCount;
+          showItemsCount = _props.showItemsCount,
+          nextArrow = _props.nextArrow,
+          prevArrow = _props.prevArrow,
+          ArrowWrapperClassName = _props.ArrowWrapperClassName;
       var _state = this.state,
@@ -115,7 +118,7 @@ currentIndex = _state.currentIndex,
         { className: 'rcc-Carousel' },
-        _react2.default.createElement(
-          _Arrow.Arrow,
-          { type: 'prev', onClick: this.handlePrevClick },
-          _react2.default.createElement(_angleLeft2.default, null)
-        ),
+        _react2.default.createElement(_Arrow.Arrow, {
+          arrowType: _Arrow.ARROW_TYPES.prev,
+          className: ArrowWrapperClassName,
+          onClick: this.handlePrevClick,
+          component: prevArrow }),
         _react2.default.createElement(_List2.default, {
@@ -128,7 +131,7 @@ items: children,
           translateX: translateX }),
-        _react2.default.createElement(
-          _Arrow.Arrow,
-          { type: 'next', onClick: this.handleNextClick },
-          _react2.default.createElement(_angleRight2.default, null)
-        )
+        _react2.default.createElement(_Arrow.Arrow, {
+          arrowType: _Arrow.ARROW_TYPES.next,
+          className: ArrowWrapperClassName,
+          onClick: this.handleNextClick,
+          component: nextArrow })
       );
@@ -140,5 +143,16 @@ }
 
+var NextArrow = function NextArrow(_ref2) {
+  var onClick = _ref2.onClick;
+  return _react2.default.createElement(_angleRight2.default, { onClick: onClick });
+};
+var PrevArrow = function PrevArrow(_ref3) {
+  var onClick = _ref3.onClick;
+  return _react2.default.createElement(_angleLeft2.default, { onClick: onClick });
+};
+
 Carousel.defaultProps = {
   transitionDuration: 0.5,
-  showItemsCount: 3
+  showItemsCount: 3,
+  nextArrow: NextArrow,
+  prevArrow: PrevArrow
 };

package.json

 {
   "name": "react-customizable-carousel",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "./lib/index.js",
@@ -19,3 +19,4 @@ "module": "./es/index.js",
     "build:css": "postcss src/*.css --output styles/index.css --config postcss.config.js",
-    "clearall": "rimraf dist styles lib es"
+    "demo": "webpack --config ./webpack.config.js",
+    "clearall": "rimraf dist styles lib es demo"
   },
@@ -22,0 +23,0 @@ "files": [

README.md

@@ -5,2 +5,4 @@ # Customizable react carousel
 
+[DEMO](https://bf-man.github.io/)
+
 Simple but effective customizable carousel component.
@@ -41,6 +43,9 @@ It will render only ```showItemsCount + 2``` carousel items, where 2 is left and right hidden items.
 ### Props
-| prop               | type    | default | info                                      |
-| ------------------ | ------- | ------- | ----------------------------------------- |
-| infinite           | boolean | false   | items count should be showItemsCount + 1  |
-| showItemsCount     | integer | 3       |                                           |
-| transitionDuration | integer | 0.5     |                                           |
+| prop                  | type           | default      | info                                      |
+| --------------------- | -------------- | ------------ | ----------------------------------------- |
+| infinite              | boolean        | false        | items count should be showItemsCount + 1  |
+| showItemsCount        | integer        | 3            |                                           |
+| transitionDuration    | integer        | 0.5          | Slide animation duration (seconds)        |
+| nextArrow             | function/class | FaAngleRight | A function/class of component to extend default next arrow |
+| prevArrow             | function/class | FaAngleLeft  | A function/class of component to extend default prev arrow |
+| ArrowWrapperClassName | string         | ''           | Will be added provided className to arrow wrapper. Also will be added ArrowWrapperClassName--prev and ArrowWrapperClassName--next to corresponding arrows|

No alert changes

Improved metrics

Total package byte prevSize

34202

7.88%

Lines of code

683

6.39%

Number of lines in readme file

50

11.11%

No dependency changes