react-lottie - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # Change Log
 
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/chenqingspring/react-lottie/compare/v1.0.0...v1.1.0) (2018-04-03)
+
+
+
 <a name="1.0.0"></a>
@@ -7,0 +12,0 @@ # [1.0.0](https://github.com/chenqingspring/react-lottie/compare/v0.2.5...v1.0.0) (2018-01-17)

dist/index.js

@@ -45,4 +45,21 @@ 'use strict';
   function Lottie() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     (0, _classCallCheck3.default)(this, Lottie);
-    return (0, _possibleConstructorReturn3.default)(this, (Lottie.__proto__ || (0, _getPrototypeOf2.default)(Lottie)).apply(this, arguments));
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Lottie.__proto__ || (0, _getPrototypeOf2.default)(Lottie)).call.apply(_ref, [this].concat(args))), _this), _this.handleClickToPause = function () {
+      // The pause() method is for handling pausing by passing a prop isPaused
+      // This method is for handling the ability to pause by clicking on the animation
+      if (_this.anim.isPaused) {
+        _this.anim.play();
+      } else {
+        _this.anim.pause();
+      }
+    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
   }
@@ -59,2 +76,3 @@
           rendererSettings = _props$options.rendererSettings,
+          segments = _props$options.segments,
           eventListeners = _props.eventListeners;
@@ -68,2 +86,3 @@
         autoplay: autoplay !== false,
+        segments: segments !== false,
         animationData: animationData,
@@ -91,3 +110,10 @@ rendererSettings: rendererSettings
     value: function componentDidUpdate() {
-      this.props.isStopped ? this.stop() : this.play();
+      if (this.props.isStopped) {
+        this.stop();
+      } else if (this.props.segments) {
+        this.playSegments();
+      } else {
+        this.play();
+      }
+
       this.pause();
@@ -98,2 +124,10 @@ this.setSpeed();
   }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.deRegisterEvents(this.props.eventListeners);
+      this.destroy();
+      this.options.animationData = null;
+      this.anim = null;
+    }
+  }, {
     key: 'setSpeed',
@@ -114,2 +148,7 @@ value: function setSpeed() {
   }, {
+    key: 'playSegments',
+    value: function playSegments() {
+      this.anim.playSegments(this.props.segments);
+    }
+  }, {
     key: 'stop',
@@ -158,3 +197,7 @@ value: function stop() {
           width = _props2.width,
-          height = _props2.height;
+          height = _props2.height,
+          ariaRole = _props2.ariaRole,
+          ariaLabel = _props2.ariaLabel,
+          isClickToPauseDisabled = _props2.isClickToPauseDisabled,
+          title = _props2.title;
 
@@ -181,8 +224,21 @@
 
-      return _react2.default.createElement('div', {
-        ref: function ref(c) {
-          _this4.el = c;
-        },
-        style: lottieStyles
-      });
+      var onClickHandler = isClickToPauseDisabled ? function () {
+        return null;
+      } : this.handleClickToPause;
+
+      return (
+        // Bug with eslint rules https://github.com/airbnb/javascript/issues/1374
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        _react2.default.createElement('div', {
+          ref: function ref(c) {
+            _this4.el = c;
+          },
+          style: lottieStyles,
+          onClick: onClickHandler,
+          title: title,
+          role: ariaRole,
+          'aria-label': ariaLabel,
+          tabIndex: '0'
+        })
+      );
     }
@@ -204,3 +260,8 @@ }]);
   speed: _propTypes2.default.number,
-  direction: _propTypes2.default.number
+  segments: _propTypes2.default.arrayOf(_propTypes2.default.number),
+  direction: _propTypes2.default.number,
+  ariaRole: _propTypes2.default.string,
+  ariaLabel: _propTypes2.default.string,
+  isClickToPauseDisabled: _propTypes2.default.bool,
+  title: _propTypes2.default.string
 };
@@ -212,3 +273,7 @@
   isPaused: false,
-  speed: 1
+  speed: 1,
+  ariaRole: 'button',
+  ariaLabel: 'animation',
+  isClickToPauseDisabled: false,
+  title: ''
 };

package.json

 {
   "name": "react-lottie",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "lottie animation view for React",
@@ -5,0 +5,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

258163

increased by1.06%

Lines of code

271

increased by27.83%

No dependency changes