zarousel - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

lib/zarousel.js

@@ -17,4 +17,14 @@ 'use strict';
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _Dots = require('./Dots');
+
+var _Dots2 = _interopRequireDefault(_Dots);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,7 +36,15 @@
 
-var Zarousel = function (_React$Component) {
-  _inherits(Zarousel, _React$Component);
+function setStyle(target, styles) {
+  var style = target.style;
 
+  Object.keys(styles).forEach(function (attri) {
+    style[attri] = styles[attri];
+  });
+}
+
+var Zarousel = function (_ref) {
+  _inherits(Zarousel, _ref);
+
   function Zarousel() {
-    var _ref;
+    var _ref2;
 
@@ -41,12 +59,213 @@ var _temp, _this, _ret;
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Zarousel.__proto__ || Object.getPrototypeOf(Zarousel)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _temp), _possibleConstructorReturn(_this, _ret);
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Zarousel.__proto__ || Object.getPrototypeOf(Zarousel)).call.apply(_ref2, [this].concat(args))), _this), _this.state = {
+      indexActive: 0
+    }, _this.startAutoPlay = function () {
+      var autoPlayInterval = _this.props.autoPlayInterval;
+
+      _this.autoPlayTimer = setInterval(_this.goNext, autoPlayInterval);
+    }, _this.clearAutoPlay = function () {
+      clearInterval(_this.autoPlayTimer);
+    }, _this.handleDotClick = function (index) {
+      return function () {
+        _this.setState({
+          indexActive: index
+        });
+        _this.swipeTo(index);
+      };
+    }, _this.handleMouseEnter = function () {
+      var autoPlay = _this.props.autoPlay;
+
+      autoPlay && _this.clearAutoPlay();
+    }, _this.handleMouseLeave = function () {
+      var autoPlay = _this.props.autoPlay;
+
+      autoPlay && _this.startAutoPlay();
+    }, _this.calcRealIndex = function (index) {
+      var children = _this.props.children;
+
+      var len = children.length;
+      var realIndex = index;
+      if (index < 0) {
+        realIndex = len - 1;
+      } else if (index > len - 1) {
+        realIndex = 0;
+      }
+      return realIndex;
+    }, _this.goNext = function () {
+      var indexActive = _this.state.indexActive;
+
+      _this.swipeTo(indexActive + 1);
+    }, _this.goPrev = function () {
+      var indexActive = _this.state.indexActive;
+
+      _this.swipeTo(indexActive - 1);
+    }, _this.resetPosition = function (index) {
+      var _this$props = _this.props,
+          transitionDuration = _this$props.transitionDuration,
+          children = _this$props.children;
+
+      var len = children.length;
+      var translateDistance = index < 0 ? (len - 1) * _this.zarouselContainerWidth : 0;
+      setTimeout(function () {
+        setStyle(_this.zarouselList, {
+          transform: 'translateX(-' + translateDistance + 'px)',
+          'transitionDuration': '0ms'
+        });
+        _this.isSwiping = false;
+      }, transitionDuration);
+    }, _this.swipeTo = function (index) {
+      var _this$props2 = _this.props,
+          children = _this$props2.children,
+          transitionDuration = _this$props2.transitionDuration;
+
+      var len = children.length;
+      if (_this.isSwiping) {
+        return;
+      }
+      _this.isSwiping = true;
+      if (index < 0 || index > len - 1) {
+        // 复制的元素的情况
+        _this.setState({
+          indexActive: _this.calcRealIndex(index)
+        }, function () {
+          _this.translate(index);
+          _this.resetPosition(index);
+        });
+      } else {
+        // 正常情况下的切换
+        _this.setState({
+          indexActive: _this.calcRealIndex(index)
+        }, function () {
+          _this.translate(index);
+          setTimeout(function () {
+            _this.isSwiping = false;
+          }, transitionDuration);
+        });
+      }
+    }, _this.translate = function (index) {
+      var transitionDuration = _this.props.transitionDuration;
+
+      var translateDistance = -(_this.zarouselContainerWidth * index);
+      setStyle(_this.zarouselList, {
+        transform: 'translateX(' + translateDistance + 'px)',
+        'transitionDuration': transitionDuration + 'ms'
+      });
+    }, _this.getZarouselContainer = function (zarousel) {
+      _this.zarouselContainer = zarousel;
+    }, _this.getZarouselList = function (list) {
+      _this.zarouselList = list;
+    }, _this.getZarouselContainerWidth = function () {
+      _this.zarouselContainerWidth = _this.zarouselContainer.getBoundingClientRect().width;
+    }, _this.setZarouselListWidth = function (countElements) {
+      setStyle(_this.zarouselList, {
+        width: _this.zarouselContainerWidth * countElements + 'px'
+      });
+    }, _this.setChildrenWidth = function (childrenList) {
+      var len = childrenList.length;
+      for (var i = 0; i < len; i++) {
+        setStyle(childrenList[i], {
+          width: 100 / len + '%'
+        });
+      }
+    }, _this.setInitPosition = function () {
+      setStyle(_this.zarouselList, {
+        marginLeft: '-' + _this.zarouselContainerWidth + 'px'
+      });
+    }, _this.createChildren = function (children) {
+      var len = _react.Children.count(children);
+      if (len <= 1) {
+        return children;
+      }
+      var createdChildren = new Array(len + 2);
+      createdChildren[0] = children[len - 1];
+      createdChildren[len + 1] = children[0];
+      _react.Children.forEach(children, function (child, index) {
+        createdChildren[index + 1] = child;
+      });
+      return _react.Children.map(createdChildren, function (child, index) {
+        return (0, _react.cloneElement)(child, {
+          key: index,
+          style: {
+            float: 'left',
+            height: '100%',
+            width: _this.zarouselContainerWidth
+          }
+        });
+      });
+    }, _this.getStyleArrow = function (type) {
+      var sizeArrow = _this.props.sizeArrow;
+
+      return _defineProperty({
+        display: 'inline-block',
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        width: sizeArrow.width,
+        height: sizeArrow.height,
+        borderRadius: '50%',
+        backgroundColor: '#eee'
+      }, type, 10);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Zarousel, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.init();
+    }
+  }, {
+    key: 'init',
+    value: function init() {
+      var autoPlay = this.props.autoPlay;
+
+      var childrenList = this.zarouselList.children;
+      this.getZarouselContainerWidth();
+      this.setZarouselListWidth(childrenList.length);
+      this.setChildrenWidth(childrenList);
+      this.setInitPosition();
+      autoPlay && this.startAutoPlay();
+    }
+  }, {
     key: 'render',
     value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          className = _props.className,
+          showArrow = _props.showArrow,
+          colorDot = _props.colorDot,
+          sizeDot = _props.sizeDot;
+      var indexActive = this.state.indexActive;
+
       return _react2.default.createElement(
         'div',
-        null,
-        'hello Zarousel'
+        {
+          ref: this.getZarouselContainer,
+          className: (0, _classnames2.default)('zarousel-container', className),
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave
+        },
+        _react2.default.createElement(
+          'div',
+          {
+            ref: this.getZarouselList,
+            className: 'zarousel-list' },
+          this.createChildren(children)
+        ),
+        showArrow && _react2.default.createElement('div', {
+          className: 'zarousel-icon--arrow arrow--next',
+          style: this.getStyleArrow('right'),
+          onClick: this.goNext
+        }),
+        showArrow && _react2.default.createElement('div', {
+          className: 'zarousel-icon--arrow arrow--prev',
+          style: this.getStyleArrow('left'),
+          onClick: this.goPrev
+        }),
+        _react2.default.createElement(_Dots2.default, {
+          items: children,
+          indexActive: indexActive,
+          colorDot: colorDot,
+          sizeDot: sizeDot,
+          handleDotClick: this.handleDotClick
+        })
       );
@@ -57,6 +276,28 @@ }
   return Zarousel;
-}(_react2.default.Component);
+}(_react.PureComponent || _react.Component);
 
-Zarousel.propTypes = {};
-Zarousel.defaultProps = {};
+Zarousel.propTypes = {
+  autoPlay: _propTypes2.default.bool,
+  autoPlayInterval: _propTypes2.default.number,
+  transitionDuration: _propTypes2.default.number,
+  showArrow: _propTypes2.default.bool,
+  sizeArrow: _propTypes2.default.object,
+  colorDot: _propTypes2.default.string,
+  sizeDot: _propTypes2.default.object
+};
+Zarousel.defaultProps = {
+  autoPlay: false,
+  autoPlayInterval: 3000,
+  transitionDuration: 300,
+  showArrow: false,
+  sizeArrow: {
+    width: 30,
+    height: 30
+  },
+  colorDot: '#333',
+  sizeDot: {
+    width: 10,
+    height: 10
+  }
+};
 exports.default = Zarousel;

package.json

 {
   "name": "zarousel",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A react component of carousel.",
@@ -9,3 +9,3 @@ "main": "index.js",
     "build": "webpack -p --hide-modules",
-    "lib": "babel src/zarousel.js --out-file lib/zarousel.js && cp src/zarousel.css lib",
+    "lib": "node_modules/.bin/babel src/Zarousel.js --out-file lib/Zarousel.js && cp src/zarousel.css lib",
     "test": "npm run lib",
@@ -22,2 +22,3 @@ "release": "npm run build && npm run lib && npm publish"
   "devDependencies": {
+    "babel-cli": "^6.26.0",
     "babel-loader": "^7.1.4",
@@ -24,0 +25,0 @@ "babel-preset-es2015": "^6.24.1",

README.md

@@ -1,2 +0,7 @@
-## Zarousel
+# Zarousel
+
+[![NPM](https://nodei.co/npm/zarousel.png)](https://nodei.co/npm/zarousel/)
+
+[![Build Status](https://travis-ci.org/zz1211/zarousel.svg?branch=master)](https://travis-ci.org/zz1211/zarousel)
+
 A react component of carousel
@@ -14,3 +19,3 @@
 import React from 'react';
-import Zarousel from 'zarousel';
+import Zarousel from 'Zarousel';
 import 'zarousel/lib/zarousel.css';
@@ -17,0 +22,0 @@

New alerts

Major refactor

Supply chain risk

Package 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

Improved metrics

Total package byte prevSize

14044

increased by184.98%

Lines of code

316

increased by670.73%

Number of lines in readme file

57

increased by9.62%

Worsened metrics

Dev dependency count

11

increased by10%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes