react-canvas-ticker - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2

dist/index.es.js

 import React from 'react';
 import { bool, func, node, number, object, oneOfType, string } from 'prop-types';
 
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
+  }
+  return _assertThisInitialized(self);
+}
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var debounce = function debounce(fn, time) {
-  var timeout = void 0;
-
+  var timeout;
   return function () {
-    var _this = this,
-        _arguments = arguments;
-
+    var _arguments = arguments,
+      _this = this;
     var functionCall = function functionCall() {
       return fn.apply(_this, _arguments);
     };
-
     clearTimeout(timeout);
@@ -41,8 +189,7 @@ timeout = setTimeout(functionCall, time);
   var rect = _ref.rect,
-      mode = _ref.mode,
-      prevOffset = _ref.prevOffset,
-      position = _ref.position,
-      direction = _ref.direction,
-      width = _ref.width;
-
+    mode = _ref.mode,
+    prevOffset = _ref.prevOffset,
+    position = _ref.position,
+    direction = _ref.direction,
+    width = _ref.width;
   if (mode !== 'chain') return false;
@@ -60,5 +207,4 @@ switch (direction) {
   var rect = _ref.rect,
-      offset = _ref.offset,
-      direction = _ref.direction;
-
+    offset = _ref.offset,
+    direction = _ref.direction;
   switch (direction) {
@@ -72,16 +218,16 @@ case 'toRight':
 }
-
 function getFrom(_ref2) {
   var index = _ref2.index,
-      rect = _ref2.rect,
-      offset = _ref2.offset,
-      width = _ref2.width,
-      direction = _ref2.direction;
-
+    rect = _ref2.rect,
+    offset = _ref2.offset,
+    width = _ref2.width,
+    direction = _ref2.direction;
   if (index === 0) return offset;
-
   if (typeof offset === 'number') {
-    return getFromOffset({ rect: rect, offset: offset, direction: direction });
+    return getFromOffset({
+      rect: rect,
+      offset: offset,
+      direction: direction
+    });
   }
-
   switch (direction) {
@@ -95,8 +241,6 @@ case 'toRight':
 }
-
 function getTo(_ref3) {
   var rect = _ref3.rect,
-      width = _ref3.width,
-      direction = _ref3.direction;
-
+    width = _ref3.width,
+    direction = _ref3.direction;
   switch (direction) {
@@ -110,12 +254,9 @@ case 'toRight':
 }
-
 function getNext(_ref4) {
   var mode = _ref4.mode,
-      from = _ref4.from,
-      direction = _ref4.direction,
-      rect = _ref4.rect,
-      width = _ref4.width;
-
+    from = _ref4.from,
+    direction = _ref4.direction,
+    rect = _ref4.rect,
+    width = _ref4.width;
   var start = from || 0;
-
   switch (mode) {
@@ -149,17 +290,31 @@ case 'await':
 }
-
 var getPosition = (function (_ref5) {
   var mode = _ref5.mode,
-      index = _ref5.index,
-      rect = _ref5.rect,
-      offset = _ref5.offset,
-      width = _ref5.width,
-      direction = _ref5.direction;
-
-  var from = getFrom({ index: index, rect: rect, offset: offset, width: width, direction: direction });
-  var to = getTo({ rect: rect, width: width, direction: direction });
+    index = _ref5.index,
+    rect = _ref5.rect,
+    offset = _ref5.offset,
+    width = _ref5.width,
+    direction = _ref5.direction;
+  var from = getFrom({
+    index: index,
+    rect: rect,
+    offset: offset,
+    width: width,
+    direction: direction
+  });
+  var to = getTo({
+    rect: rect,
+    width: width,
+    direction: direction
+  });
   return {
     from: from,
     to: to,
-    next: getNext({ mode: mode, from: from, direction: direction, rect: rect, width: width })
+    next: getNext({
+      mode: mode,
+      from: from,
+      direction: direction,
+      rect: rect,
+      width: width
+    })
   };
@@ -170,5 +325,4 @@ });
   var from = _ref.from,
-      rect = _ref.rect,
-      direction = _ref.direction;
-
+    rect = _ref.rect,
+    direction = _ref.direction;
   switch (direction) {
@@ -189,6 +343,5 @@ case 'toRight':
   var offset = _ref.offset,
-      rect = _ref.rect,
-      direction = _ref.direction,
-      width = _ref.width;
-
+    rect = _ref.rect,
+    direction = _ref.direction,
+    width = _ref.width;
   if (offset === 'run-in') {
@@ -210,89 +363,11 @@ switch (direction) {
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var _extends = Object.assign || function (target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
-
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
-      }
-    }
-  }
-
-  return target;
-};
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
-var toConsumableArray = function (arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-    return arr2;
-  } else {
-    return Array.from(arr);
-  }
-};
-
-var TickerElement = function (_React$Component) {
-  inherits(TickerElement, _React$Component);
-
+var TickerElement = /*#__PURE__*/function (_React$Component) {
   function TickerElement() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    classCallCheck(this, TickerElement);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    var _this;
+    _classCallCheck(this, TickerElement);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = TickerElement.__proto__ || Object.getPrototypeOf(TickerElement)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this = _callSuper(this, TickerElement, [].concat(args));
+    _defineProperty(_this, "state", {
       children: _this.props.children({
@@ -302,17 +377,34 @@ index: _this.props.index
       move: _this.props.move,
-      position: { from: undefined, to: undefined, next: undefined },
+      position: {
+        from: undefined,
+        to: undefined,
+        next: undefined
+      },
       offset: _this.props.offset,
       rect: null
-    }, _this.x = 0, _this.isMoving = false, _this.nextTriggered = false, _this.elementRef = React.createRef(), _this.raf = null, _this.componentDidMount = function () {
+    });
+    _defineProperty(_this, "x", 0);
+    _defineProperty(_this, "isMoving", false);
+    _defineProperty(_this, "nextTriggered", false);
+    _defineProperty(_this, "elementRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "raf", null);
+    _defineProperty(_this, "componentDidMount", function () {
       _this.setPosition(true);
       _this.observer = new MutationObserver(_this.onMutation);
-      _this.observer.observe(_this.elementRef.current, { characterData: true, childList: true, subtree: true });
-    }, _this.componentWillUnmount = function () {
+      _this.observer.observe(_this.elementRef.current, {
+        characterData: true,
+        childList: true,
+        subtree: true
+      });
+    });
+    _defineProperty(_this, "componentWillUnmount", function () {
       _this.observer.disconnect();
-    }, _this.onMutation = function () {
+    });
+    _defineProperty(_this, "onMutation", function () {
       _this.setPosition();
-    }, _this.componentDidUpdate = function (prevProps, prevState) {
+    });
+    _defineProperty(_this, "componentDidUpdate", function (prevProps, prevState) {
       if (!_this.x && prevState.position.from !== _this.state.position.from) {
         _this.x = _this.state.position.from;
-        _this.elementRef.current.style.transform = 'translate3d(' + _this.x * _this.props.scale + 'px, 0, 0)';
+        _this.elementRef.current.style.transform = "translate3d(".concat(_this.x * _this.props.scale, "px, 0, 0)");
       }
@@ -325,3 +417,3 @@ if (_this.x !== _this.state.position.from && prevProps.prevRect && _this.props.prevRect && prevProps.prevRect.width !== _this.props.prevRect.width) {
         }
-        _this.elementRef.current.style.transform = 'translate3d(' + _this.x * _this.props.scale + 'px, 0, 0)';
+        _this.elementRef.current.style.transform = "translate3d(".concat(_this.x * _this.props.scale, "px, 0, 0)");
       }
@@ -338,23 +430,30 @@ if (_this.props.move && !prevProps.start && _this.props.start) {
       }
-    }, _this.setPosition = function (isMount) {
+    });
+    _defineProperty(_this, "setPosition", function (isMount) {
       var _this$props = _this.props,
-          mode = _this$props.mode,
-          width = _this$props.width,
-          id = _this$props.id,
-          onNext = _this$props.onNext,
-          direction = _this$props.direction,
-          index = _this$props.index,
-          setRect = _this$props.setRect;
-
-
+        mode = _this$props.mode,
+        width = _this$props.width,
+        id = _this$props.id,
+        onNext = _this$props.onNext,
+        direction = _this$props.direction,
+        index = _this$props.index,
+        setRect = _this$props.setRect;
       var rect = _this.elementRef.current.getBoundingClientRect();
       var tempHeight = rect.bottom - rect.y;
       rect.width = Math.sqrt(tempHeight * tempHeight + rect.width * rect.width);
-
       if (rect.width === 0) return;
-
-      var offset = _this.props.index === 0 ? getStartOffset({ offset: _this.props.offset, rect: rect, direction: direction, width: width }) : _this.props.offset;
-
-      var position = getPosition({ mode: mode, rect: rect, index: index, offset: offset, width: width, direction: direction });
-
+      var offset = _this.props.index === 0 ? getStartOffset({
+        offset: _this.props.offset,
+        rect: rect,
+        direction: direction,
+        width: width
+      }) : _this.props.offset;
+      var position = getPosition({
+        mode: mode,
+        rect: rect,
+        index: index,
+        offset: offset,
+        width: width,
+        direction: direction
+      });
       setRect({
@@ -364,7 +463,17 @@ index: _this.props.index,
         offset: offset,
-        nextOffset: getNextOffset({ from: position.from, rect: rect, direction: direction })
+        nextOffset: getNextOffset({
+          from: position.from,
+          rect: rect,
+          direction: direction
+        })
       });
-
       if (isMount) {
-        var nextTriggerOnMount$$1 = nextTriggerOnMount({ mode: mode, rect: rect, position: position, offset: offset, direction: direction, width: width });
+        var nextTriggerOnMount$$1 = nextTriggerOnMount({
+          mode: mode,
+          rect: rect,
+          position: position,
+          offset: offset,
+          direction: direction,
+          width: width
+        });
         if (nextTriggerOnMount$$1) {
@@ -375,11 +484,18 @@ onNext({
             rect: rect,
-            nextOffset: getNextOffset({ from: position.from, rect: rect, direction: direction })
+            nextOffset: getNextOffset({
+              from: position.from,
+              rect: rect,
+              direction: direction
+            })
           });
         }
         if (!nextTriggerOnMount$$1 && (offset || index === 0)) {
-          onNext({ id: id, index: index, rect: rect });
+          onNext({
+            id: id,
+            index: index,
+            rect: rect
+          });
         }
         _this.nextTriggered = nextTriggerOnMount$$1;
       }
-
       _this.setState({
@@ -390,6 +506,8 @@ rect: rect,
       });
-    }, _this.shouldTriggerNext = function () {
+    });
+    _defineProperty(_this, "shouldTriggerNext", function () {
       if (_this.nextTriggered) return false;
       return _this.props.direction === 'toLeft' ? _this.x <= _this.state.position.next : _this.x >= _this.state.position.next;
-    }, _this.triggerNext = function () {
+    });
+    _defineProperty(_this, "triggerNext", function () {
       if (_this.shouldTriggerNext()) {
@@ -404,3 +522,4 @@ // if (this.props.index === 5) console.log(this.x)
       }
-    }, _this.shouldFinish = function () {
+    });
+    _defineProperty(_this, "shouldFinish", function () {
       switch (_this.props.direction) {
@@ -413,18 +532,14 @@ case 'toRight':
       }
-    }, _this.animate = function () {
+    });
+    _defineProperty(_this, "animate", function () {
       if (_this.isMoving) return;
       _this.isMoving = true;
-
       var prevTimestamp = null;
-
       var step = function step(timestamp) {
         if (!_this.isMoving) return;
         if (!_this.elementRef.current) return;
-
         var progress = prevTimestamp ? timestamp - prevTimestamp : 0;
-
         _this.x = _this.props.direction === 'toLeft' ? _this.x - progress / 100 * _this.props.speed : _this.x + progress / 100 * _this.props.speed;
-        _this.elementRef.current.style.transform = 'translate3d(' + _this.x * _this.props.scale + 'px, 0, 0)';
+        _this.elementRef.current.style.transform = "translate3d(".concat(_this.x * _this.props.scale, "px, 0, 0)");
         _this.triggerNext();
-
         if (_this.shouldFinish()) {
@@ -440,25 +555,22 @@ _this.isMoving = false;
       _this.raf = window.requestAnimationFrame(step);
-    }, _this.render = function () {
-      return React.createElement(
-        'div',
-        {
-          className: 'ticker__element',
-          style: {
-            willChange: 'transform',
-            position: 'absolute',
-            left: 0,
-            top: 0,
-            transform: 'translate3d(' + _this.x * _this.props.scale + 'px, 0, 0)'
-          },
-          ref: _this.elementRef
+    });
+    _defineProperty(_this, "render", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "ticker__element",
+        style: {
+          willChange: 'transform',
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          transform: "translate3d(".concat(_this.x * _this.props.scale, "px, 0, 0)")
         },
-        _this.state.children
-      );
-    }, _temp), possibleConstructorReturn(_this, _ret);
+        ref: _this.elementRef
+      }, _this.state.children);
+    });
+    return _this;
   }
-
-  return TickerElement;
+  _inherits(TickerElement, _React$Component);
+  return _createClass(TickerElement);
 }(React.Component);
-
-TickerElement.propTypes = {
+_defineProperty(TickerElement, "propTypes", {
   children: oneOfType([node, func]).isRequired,
@@ -476,12 +588,11 @@ direction: string.isRequired,
   start: bool.isRequired,
-
   offset: oneOfType([number, string]),
   prevRect: object,
   width: number
-};
-TickerElement.defaultProps = {
+});
+_defineProperty(TickerElement, "defaultProps", {
   offset: undefined,
   width: undefined,
   prevRect: null
-};
+});
 
@@ -504,19 +615,17 @@ var getDefaultState = function getDefaultState(offset, width) {
 
-var Ticker = function (_React$Component) {
-  inherits(Ticker, _React$Component);
-
+var Ticker = /*#__PURE__*/function (_React$Component) {
   function Ticker() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    classCallCheck(this, Ticker);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    var _this;
+    _classCallCheck(this, Ticker);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Ticker.__proto__ || Object.getPrototypeOf(Ticker)).call.apply(_ref, [this].concat(args))), _this), _this.next = null, _this.state = getDefaultState(_this.props.offset), _this.tickerRef = React.createRef(), _this.dOnResize = debounce(function () {
+    _this = _callSuper(this, Ticker, [].concat(args));
+    _defineProperty(_this, "next", null);
+    _defineProperty(_this, "state", getDefaultState(_this.props.offset));
+    _defineProperty(_this, "tickerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "dOnResize", debounce(function () {
       return _this.onResize();
-    }, 150), _this.componentDidMount = function () {
+    }, 150));
+    _defineProperty(_this, "componentDidMount", function () {
       _this.setState({
@@ -527,10 +636,11 @@ width: _this.tickerRef.current.offsetWidth,
       window.addEventListener('resize', _this.dOnResize);
-    }, _this.componentWillUnmount = function () {
+    });
+    _defineProperty(_this, "componentWillUnmount", function () {
       window.removeEventListener('resize', _this.dOnResize);
-    }, _this.setRect = function (_ref2) {
-      var index = _ref2.index,
-          rect = _ref2.rect,
-          offset = _ref2.offset,
-          nextOffset = _ref2.nextOffset;
-
+    });
+    _defineProperty(_this, "setRect", function (_ref) {
+      var index = _ref.index,
+        rect = _ref.rect,
+        offset = _ref.offset,
+        nextOffset = _ref.nextOffset;
       _this.setState(function (prevState) {
@@ -554,8 +664,10 @@ var elements = prevState.elements.map(function (el) {
       });
-    }, _this.onResize = function () {
+    });
+    _defineProperty(_this, "onResize", function () {
       if (!_this.tickerRef.current || _this.tickerRef.current.offsetWidth === _this.state.width) return;
-      _this.setState(_extends({}, getDefaultState(_this.props.offset, _this.tickerRef.current.offsetWidth), {
+      _this.setState(_objectSpread2(_objectSpread2({}, getDefaultState(_this.props.offset, _this.tickerRef.current.offsetWidth)), {}, {
         height: _this.props.height
       }));
-    }, _this.onFinish = function (id) {
+    });
+    _defineProperty(_this, "onFinish", function (id) {
       _this.props.onFinish();
@@ -569,13 +681,12 @@ _this.setState(function (prevState) {
       });
-    }, _this.onNext = function (_ref3) {
-      var id = _ref3.id,
-          index = _ref3.index,
-          rect = _ref3.rect,
-          nextOffset = _ref3.nextOffset;
-
+    });
+    _defineProperty(_this, "onNext", function (_ref2) {
+      var id = _ref2.id,
+        index = _ref2.index,
+        rect = _ref2.rect,
+        nextOffset = _ref2.nextOffset;
       _this.props.onNext(index);
-
       _this.setState(function (prevState) {
         return {
-          elements: [].concat(toConsumableArray(prevState.elements.map(function (el) {
+          elements: [].concat(_toConsumableArray(prevState.elements.map(function (el) {
             var newEl = el;
@@ -599,55 +710,42 @@ if (el.index === index) newEl.rect = rect;
       });
-    }, _temp), possibleConstructorReturn(_this, _ret);
+    });
+    return _this;
   }
-
-  createClass(Ticker, [{
-    key: 'render',
+  _inherits(Ticker, _React$Component);
+  return _createClass(Ticker, [{
+    key: "render",
     value: function render() {
       var _this2 = this;
-
-      return React.createElement(
-        'div',
-        {
-          className: 'ticker',
-          ref: this.tickerRef,
-          style: {
-            position: 'relative',
-            overflow: 'hidden',
-            height: this.state.height && this.state.height + 'px'
-          }
-        },
-        this.state.width && this.state.elements.map(function (el) {
-          return React.createElement(
-            TickerElement,
-            {
-              key: el.id,
-              id: el.id,
-              index: el.index,
-              start: el.start,
-              offset: el.offset,
-              prevRect: el.prevRect,
-
-              direction: _this2.props.direction,
-              mode: _this2.props.mode,
-              move: _this2.props.move,
-              speed: _this2.props.speed,
-              scale: _this2.props.scale,
-
-              onFinish: _this2.onFinish,
-              onNext: _this2.onNext,
-              setRect: _this2.setRect,
-              width: _this2.state.width
-            },
-            _this2.props.children
-          );
-        })
-      );
+      return /*#__PURE__*/React.createElement("div", {
+        className: "ticker",
+        ref: this.tickerRef,
+        style: {
+          position: 'relative',
+          overflow: 'hidden',
+          height: this.state.height && "".concat(this.state.height, "px")
+        }
+      }, this.state.width && this.state.elements.map(function (el) {
+        return /*#__PURE__*/React.createElement(TickerElement, {
+          key: el.id,
+          id: el.id,
+          index: el.index,
+          start: el.start,
+          offset: el.offset,
+          prevRect: el.prevRect,
+          direction: _this2.props.direction,
+          mode: _this2.props.mode,
+          move: _this2.props.move,
+          speed: _this2.props.speed,
+          scale: _this2.props.scale,
+          onFinish: _this2.onFinish,
+          onNext: _this2.onNext,
+          setRect: _this2.setRect,
+          width: _this2.state.width
+        }, _this2.props.children);
+      }));
     }
   }]);
-  return Ticker;
 }(React.Component);
-
-Ticker.propTypes = {
+_defineProperty(Ticker, "propTypes", {
   children: oneOfType([node, func]).isRequired,
-
   direction: string,
@@ -662,4 +760,4 @@ mode: string,
   onFinish: func
-};
-Ticker.defaultProps = {
+});
+_defineProperty(Ticker, "defaultProps", {
   offset: 0,
@@ -674,5 +772,5 @@ speed: 5,
   onFinish: function onFinish() {}
-};
+});
 
 export default Ticker;
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -8,13 +8,161 @@ 'use strict';
 
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self;
+}
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
+  }
+  return _assertThisInitialized(self);
+}
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 var debounce = function debounce(fn, time) {
-  var timeout = void 0;
-
+  var timeout;
   return function () {
-    var _this = this,
-        _arguments = arguments;
-
+    var _arguments = arguments,
+      _this = this;
     var functionCall = function functionCall() {
       return fn.apply(_this, _arguments);
     };
-
     clearTimeout(timeout);
@@ -46,8 +194,7 @@ timeout = setTimeout(functionCall, time);
   var rect = _ref.rect,
-      mode = _ref.mode,
-      prevOffset = _ref.prevOffset,
-      position = _ref.position,
-      direction = _ref.direction,
-      width = _ref.width;
-
+    mode = _ref.mode,
+    prevOffset = _ref.prevOffset,
+    position = _ref.position,
+    direction = _ref.direction,
+    width = _ref.width;
   if (mode !== 'chain') return false;
@@ -65,5 +212,4 @@ switch (direction) {
   var rect = _ref.rect,
-      offset = _ref.offset,
-      direction = _ref.direction;
-
+    offset = _ref.offset,
+    direction = _ref.direction;
   switch (direction) {
@@ -77,16 +223,16 @@ case 'toRight':
 }
-
 function getFrom(_ref2) {
   var index = _ref2.index,
-      rect = _ref2.rect,
-      offset = _ref2.offset,
-      width = _ref2.width,
-      direction = _ref2.direction;
-
+    rect = _ref2.rect,
+    offset = _ref2.offset,
+    width = _ref2.width,
+    direction = _ref2.direction;
   if (index === 0) return offset;
-
   if (typeof offset === 'number') {
-    return getFromOffset({ rect: rect, offset: offset, direction: direction });
+    return getFromOffset({
+      rect: rect,
+      offset: offset,
+      direction: direction
+    });
   }
-
   switch (direction) {
@@ -100,8 +246,6 @@ case 'toRight':
 }
-
 function getTo(_ref3) {
   var rect = _ref3.rect,
-      width = _ref3.width,
-      direction = _ref3.direction;
-
+    width = _ref3.width,
+    direction = _ref3.direction;
   switch (direction) {
@@ -115,12 +259,9 @@ case 'toRight':
 }
-
 function getNext(_ref4) {
   var mode = _ref4.mode,
-      from = _ref4.from,
-      direction = _ref4.direction,
-      rect = _ref4.rect,
-      width = _ref4.width;
-
+    from = _ref4.from,
+    direction = _ref4.direction,
+    rect = _ref4.rect,
+    width = _ref4.width;
   var start = from || 0;
-
   switch (mode) {
@@ -154,17 +295,31 @@ case 'await':
 }
-
 var getPosition = (function (_ref5) {
   var mode = _ref5.mode,
-      index = _ref5.index,
-      rect = _ref5.rect,
-      offset = _ref5.offset,
-      width = _ref5.width,
-      direction = _ref5.direction;
-
-  var from = getFrom({ index: index, rect: rect, offset: offset, width: width, direction: direction });
-  var to = getTo({ rect: rect, width: width, direction: direction });
+    index = _ref5.index,
+    rect = _ref5.rect,
+    offset = _ref5.offset,
+    width = _ref5.width,
+    direction = _ref5.direction;
+  var from = getFrom({
+    index: index,
+    rect: rect,
+    offset: offset,
+    width: width,
+    direction: direction
+  });
+  var to = getTo({
+    rect: rect,
+    width: width,
+    direction: direction
+  });
   return {
     from: from,
     to: to,
-    next: getNext({ mode: mode, from: from, direction: direction, rect: rect, width: width })
+    next: getNext({
+      mode: mode,
+      from: from,
+      direction: direction,
+      rect: rect,
+      width: width
+    })
   };
@@ -175,5 +330,4 @@ });
   var from = _ref.from,
-      rect = _ref.rect,
-      direction = _ref.direction;
-
+    rect = _ref.rect,
+    direction = _ref.direction;
   switch (direction) {
@@ -194,6 +348,5 @@ case 'toRight':
   var offset = _ref.offset,
-      rect = _ref.rect,
-      direction = _ref.direction,
-      width = _ref.width;
-
+    rect = _ref.rect,
+    direction = _ref.direction,
+    width = _ref.width;
   if (offset === 'run-in') {
@@ -215,89 +368,11 @@ switch (direction) {
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
-
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var _extends = Object.assign || function (target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
-
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
-      }
-    }
-  }
-
-  return target;
-};
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
-var toConsumableArray = function (arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-    return arr2;
-  } else {
-    return Array.from(arr);
-  }
-};
-
-var TickerElement = function (_React$Component) {
-  inherits(TickerElement, _React$Component);
-
+var TickerElement = /*#__PURE__*/function (_React$Component) {
   function TickerElement() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    classCallCheck(this, TickerElement);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    var _this;
+    _classCallCheck(this, TickerElement);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = TickerElement.__proto__ || Object.getPrototypeOf(TickerElement)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    _this = _callSuper(this, TickerElement, [].concat(args));
+    _defineProperty(_this, "state", {
       children: _this.props.children({
@@ -307,17 +382,34 @@ index: _this.props.index
       move: _this.props.move,
-      position: { from: undefined, to: undefined, next: undefined },
+      position: {
+        from: undefined,
+        to: undefined,
+        next: undefined
+      },
       offset: _this.props.offset,
       rect: null
-    }, _this.x = 0, _this.isMoving = false, _this.nextTriggered = false, _this.elementRef = React.createRef(), _this.raf = null, _this.componentDidMount = function () {
+    });
+    _defineProperty(_this, "x", 0);
+    _defineProperty(_this, "isMoving", false);
+    _defineProperty(_this, "nextTriggered", false);
+    _defineProperty(_this, "elementRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "raf", null);
+    _defineProperty(_this, "componentDidMount", function () {
       _this.setPosition(true);
       _this.observer = new MutationObserver(_this.onMutation);
-      _this.observer.observe(_this.elementRef.current, { characterData: true, childList: true, subtree: true });
-    }, _this.componentWillUnmount = function () {
+      _this.observer.observe(_this.elementRef.current, {
+        characterData: true,
+        childList: true,
+        subtree: true
+      });
+    });
+    _defineProperty(_this, "componentWillUnmount", function () {
       _this.observer.disconnect();
-    }, _this.onMutation = function () {
+    });
+    _defineProperty(_this, "onMutation", function () {
       _this.setPosition();
-    }, _this.componentDidUpdate = function (prevProps, prevState) {
+    });
+    _defineProperty(_this, "componentDidUpdate", function (prevProps, prevState) {
       if (!_this.x && prevState.position.from !== _this.state.position.from) {
         _this.x = _this.state.position.from;
-        _this.elementRef.current.style.transform = 'translate3d(' + _this.x * _this.props.scale + 'px, 0, 0)';
+        _this.elementRef.current.style.transform = "translate3d(".concat(_this.x * _this.props.scale, "px, 0, 0)");
       }
@@ -330,3 +422,3 @@ if (_this.x !== _this.state.position.from && prevProps.prevRect && _this.props.prevRect && prevProps.prevRect.width !== _this.props.prevRect.width) {
         }
-        _this.elementRef.current.style.transform = 'translate3d(' + _this.x * _this.props.scale + 'px, 0, 0)';
+        _this.elementRef.current.style.transform = "translate3d(".concat(_this.x * _this.props.scale, "px, 0, 0)");
       }
@@ -343,23 +435,30 @@ if (_this.props.move && !prevProps.start && _this.props.start) {
       }
-    }, _this.setPosition = function (isMount) {
+    });
+    _defineProperty(_this, "setPosition", function (isMount) {
       var _this$props = _this.props,
-          mode = _this$props.mode,
-          width = _this$props.width,
-          id = _this$props.id,
-          onNext = _this$props.onNext,
-          direction = _this$props.direction,
-          index = _this$props.index,
-          setRect = _this$props.setRect;
-
-
+        mode = _this$props.mode,
+        width = _this$props.width,
+        id = _this$props.id,
+        onNext = _this$props.onNext,
+        direction = _this$props.direction,
+        index = _this$props.index,
+        setRect = _this$props.setRect;
       var rect = _this.elementRef.current.getBoundingClientRect();
       var tempHeight = rect.bottom - rect.y;
       rect.width = Math.sqrt(tempHeight * tempHeight + rect.width * rect.width);
-
       if (rect.width === 0) return;
-
-      var offset = _this.props.index === 0 ? getStartOffset({ offset: _this.props.offset, rect: rect, direction: direction, width: width }) : _this.props.offset;
-
-      var position = getPosition({ mode: mode, rect: rect, index: index, offset: offset, width: width, direction: direction });
-
+      var offset = _this.props.index === 0 ? getStartOffset({
+        offset: _this.props.offset,
+        rect: rect,
+        direction: direction,
+        width: width
+      }) : _this.props.offset;
+      var position = getPosition({
+        mode: mode,
+        rect: rect,
+        index: index,
+        offset: offset,
+        width: width,
+        direction: direction
+      });
       setRect({
@@ -369,7 +468,17 @@ index: _this.props.index,
         offset: offset,
-        nextOffset: getNextOffset({ from: position.from, rect: rect, direction: direction })
+        nextOffset: getNextOffset({
+          from: position.from,
+          rect: rect,
+          direction: direction
+        })
       });
-
       if (isMount) {
-        var nextTriggerOnMount$$1 = nextTriggerOnMount({ mode: mode, rect: rect, position: position, offset: offset, direction: direction, width: width });
+        var nextTriggerOnMount$$1 = nextTriggerOnMount({
+          mode: mode,
+          rect: rect,
+          position: position,
+          offset: offset,
+          direction: direction,
+          width: width
+        });
         if (nextTriggerOnMount$$1) {
@@ -380,11 +489,18 @@ onNext({
             rect: rect,
-            nextOffset: getNextOffset({ from: position.from, rect: rect, direction: direction })
+            nextOffset: getNextOffset({
+              from: position.from,
+              rect: rect,
+              direction: direction
+            })
           });
         }
         if (!nextTriggerOnMount$$1 && (offset || index === 0)) {
-          onNext({ id: id, index: index, rect: rect });
+          onNext({
+            id: id,
+            index: index,
+            rect: rect
+          });
         }
         _this.nextTriggered = nextTriggerOnMount$$1;
       }
-
       _this.setState({
@@ -395,6 +511,8 @@ rect: rect,
       });
-    }, _this.shouldTriggerNext = function () {
+    });
+    _defineProperty(_this, "shouldTriggerNext", function () {
       if (_this.nextTriggered) return false;
       return _this.props.direction === 'toLeft' ? _this.x <= _this.state.position.next : _this.x >= _this.state.position.next;
-    }, _this.triggerNext = function () {
+    });
+    _defineProperty(_this, "triggerNext", function () {
       if (_this.shouldTriggerNext()) {
@@ -409,3 +527,4 @@ // if (this.props.index === 5) console.log(this.x)
       }
-    }, _this.shouldFinish = function () {
+    });
+    _defineProperty(_this, "shouldFinish", function () {
       switch (_this.props.direction) {
@@ -418,18 +537,14 @@ case 'toRight':
       }
-    }, _this.animate = function () {
+    });
+    _defineProperty(_this, "animate", function () {
       if (_this.isMoving) return;
       _this.isMoving = true;
-
       var prevTimestamp = null;
-
       var step = function step(timestamp) {
         if (!_this.isMoving) return;
         if (!_this.elementRef.current) return;
-
         var progress = prevTimestamp ? timestamp - prevTimestamp : 0;
-
         _this.x = _this.props.direction === 'toLeft' ? _this.x - progress / 100 * _this.props.speed : _this.x + progress / 100 * _this.props.speed;
-        _this.elementRef.current.style.transform = 'translate3d(' + _this.x * _this.props.scale + 'px, 0, 0)';
+        _this.elementRef.current.style.transform = "translate3d(".concat(_this.x * _this.props.scale, "px, 0, 0)");
         _this.triggerNext();
-
         if (_this.shouldFinish()) {
@@ -445,25 +560,22 @@ _this.isMoving = false;
       _this.raf = window.requestAnimationFrame(step);
-    }, _this.render = function () {
-      return React.createElement(
-        'div',
-        {
-          className: 'ticker__element',
-          style: {
-            willChange: 'transform',
-            position: 'absolute',
-            left: 0,
-            top: 0,
-            transform: 'translate3d(' + _this.x * _this.props.scale + 'px, 0, 0)'
-          },
-          ref: _this.elementRef
+    });
+    _defineProperty(_this, "render", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "ticker__element",
+        style: {
+          willChange: 'transform',
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          transform: "translate3d(".concat(_this.x * _this.props.scale, "px, 0, 0)")
         },
-        _this.state.children
-      );
-    }, _temp), possibleConstructorReturn(_this, _ret);
+        ref: _this.elementRef
+      }, _this.state.children);
+    });
+    return _this;
   }
-
-  return TickerElement;
+  _inherits(TickerElement, _React$Component);
+  return _createClass(TickerElement);
 }(React.Component);
-
-TickerElement.propTypes = {
+_defineProperty(TickerElement, "propTypes", {
   children: propTypes.oneOfType([propTypes.node, propTypes.func]).isRequired,
@@ -481,12 +593,11 @@ direction: propTypes.string.isRequired,
   start: propTypes.bool.isRequired,
-
   offset: propTypes.oneOfType([propTypes.number, propTypes.string]),
   prevRect: propTypes.object,
   width: propTypes.number
-};
-TickerElement.defaultProps = {
+});
+_defineProperty(TickerElement, "defaultProps", {
   offset: undefined,
   width: undefined,
   prevRect: null
-};
+});
 
@@ -509,19 +620,17 @@ var getDefaultState = function getDefaultState(offset, width) {
 
-var Ticker = function (_React$Component) {
-  inherits(Ticker, _React$Component);
-
+var Ticker = /*#__PURE__*/function (_React$Component) {
   function Ticker() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    classCallCheck(this, Ticker);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    var _this;
+    _classCallCheck(this, Ticker);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
-    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = Ticker.__proto__ || Object.getPrototypeOf(Ticker)).call.apply(_ref, [this].concat(args))), _this), _this.next = null, _this.state = getDefaultState(_this.props.offset), _this.tickerRef = React.createRef(), _this.dOnResize = debounce(function () {
+    _this = _callSuper(this, Ticker, [].concat(args));
+    _defineProperty(_this, "next", null);
+    _defineProperty(_this, "state", getDefaultState(_this.props.offset));
+    _defineProperty(_this, "tickerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "dOnResize", debounce(function () {
       return _this.onResize();
-    }, 150), _this.componentDidMount = function () {
+    }, 150));
+    _defineProperty(_this, "componentDidMount", function () {
       _this.setState({
@@ -532,10 +641,11 @@ width: _this.tickerRef.current.offsetWidth,
       window.addEventListener('resize', _this.dOnResize);
-    }, _this.componentWillUnmount = function () {
+    });
+    _defineProperty(_this, "componentWillUnmount", function () {
       window.removeEventListener('resize', _this.dOnResize);
-    }, _this.setRect = function (_ref2) {
-      var index = _ref2.index,
-          rect = _ref2.rect,
-          offset = _ref2.offset,
-          nextOffset = _ref2.nextOffset;
-
+    });
+    _defineProperty(_this, "setRect", function (_ref) {
+      var index = _ref.index,
+        rect = _ref.rect,
+        offset = _ref.offset,
+        nextOffset = _ref.nextOffset;
       _this.setState(function (prevState) {
@@ -559,8 +669,10 @@ var elements = prevState.elements.map(function (el) {
       });
-    }, _this.onResize = function () {
+    });
+    _defineProperty(_this, "onResize", function () {
       if (!_this.tickerRef.current || _this.tickerRef.current.offsetWidth === _this.state.width) return;
-      _this.setState(_extends({}, getDefaultState(_this.props.offset, _this.tickerRef.current.offsetWidth), {
+      _this.setState(_objectSpread2(_objectSpread2({}, getDefaultState(_this.props.offset, _this.tickerRef.current.offsetWidth)), {}, {
         height: _this.props.height
       }));
-    }, _this.onFinish = function (id) {
+    });
+    _defineProperty(_this, "onFinish", function (id) {
       _this.props.onFinish();
@@ -574,13 +686,12 @@ _this.setState(function (prevState) {
       });
-    }, _this.onNext = function (_ref3) {
-      var id = _ref3.id,
-          index = _ref3.index,
-          rect = _ref3.rect,
-          nextOffset = _ref3.nextOffset;
-
+    });
+    _defineProperty(_this, "onNext", function (_ref2) {
+      var id = _ref2.id,
+        index = _ref2.index,
+        rect = _ref2.rect,
+        nextOffset = _ref2.nextOffset;
       _this.props.onNext(index);
-
       _this.setState(function (prevState) {
         return {
-          elements: [].concat(toConsumableArray(prevState.elements.map(function (el) {
+          elements: [].concat(_toConsumableArray(prevState.elements.map(function (el) {
             var newEl = el;
@@ -604,55 +715,42 @@ if (el.index === index) newEl.rect = rect;
       });
-    }, _temp), possibleConstructorReturn(_this, _ret);
+    });
+    return _this;
   }
-
-  createClass(Ticker, [{
-    key: 'render',
+  _inherits(Ticker, _React$Component);
+  return _createClass(Ticker, [{
+    key: "render",
     value: function render() {
       var _this2 = this;
-
-      return React.createElement(
-        'div',
-        {
-          className: 'ticker',
-          ref: this.tickerRef,
-          style: {
-            position: 'relative',
-            overflow: 'hidden',
-            height: this.state.height && this.state.height + 'px'
-          }
-        },
-        this.state.width && this.state.elements.map(function (el) {
-          return React.createElement(
-            TickerElement,
-            {
-              key: el.id,
-              id: el.id,
-              index: el.index,
-              start: el.start,
-              offset: el.offset,
-              prevRect: el.prevRect,
-
-              direction: _this2.props.direction,
-              mode: _this2.props.mode,
-              move: _this2.props.move,
-              speed: _this2.props.speed,
-              scale: _this2.props.scale,
-
-              onFinish: _this2.onFinish,
-              onNext: _this2.onNext,
-              setRect: _this2.setRect,
-              width: _this2.state.width
-            },
-            _this2.props.children
-          );
-        })
-      );
+      return /*#__PURE__*/React.createElement("div", {
+        className: "ticker",
+        ref: this.tickerRef,
+        style: {
+          position: 'relative',
+          overflow: 'hidden',
+          height: this.state.height && "".concat(this.state.height, "px")
+        }
+      }, this.state.width && this.state.elements.map(function (el) {
+        return /*#__PURE__*/React.createElement(TickerElement, {
+          key: el.id,
+          id: el.id,
+          index: el.index,
+          start: el.start,
+          offset: el.offset,
+          prevRect: el.prevRect,
+          direction: _this2.props.direction,
+          mode: _this2.props.mode,
+          move: _this2.props.move,
+          speed: _this2.props.speed,
+          scale: _this2.props.scale,
+          onFinish: _this2.onFinish,
+          onNext: _this2.onNext,
+          setRect: _this2.setRect,
+          width: _this2.state.width
+        }, _this2.props.children);
+      }));
     }
   }]);
-  return Ticker;
 }(React.Component);
-
-Ticker.propTypes = {
+_defineProperty(Ticker, "propTypes", {
   children: propTypes.oneOfType([propTypes.node, propTypes.func]).isRequired,
-
   direction: propTypes.string,
@@ -667,4 +765,4 @@ mode: propTypes.string,
   onFinish: propTypes.func
-};
-Ticker.defaultProps = {
+});
+_defineProperty(Ticker, "defaultProps", {
   offset: 0,
@@ -679,5 +777,5 @@ speed: 5,
   onFinish: function onFinish() {}
-};
+});
 
 module.exports = Ticker;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-canvas-ticker",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Fork from react-ticker",
@@ -39,10 +39,9 @@ "author": "https://github.com/TimHsueh-ui",
   "devDependencies": {
-    "@svgr/rollup": "^2.4.1",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/plugin-external-helpers": "^7.24.1",
+    "@babel/preset-env": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
+    "@svgr/rollup": "^8.1.0",
     "@types/react": "^16.8.22",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.5",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
     "cross-env": "^5.1.4",
@@ -57,11 +56,11 @@ "eslint": "^5.0.1",
     "eslint-plugin-standard": "^3.1.0",
-    "gh-pages": "^1.2.0",
-    "react": "^16.8.6",
-    "react-scripts": "^1.1.4",
+    "gh-pages": "^6.1.1",
+    "react": "^17.0.2",
+    "react-scripts": "^5.0.1",
     "rollup": "^0.64.1",
-    "rollup-plugin-babel": "^3.0.7",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-url": "^1.4.0",
@@ -74,4 +73,3 @@ "typescript": "^3.5.2"
   ],
-  "dependencies": {},
   "typings": "types/index.d.ts"
 }

No alert changes

Improved metrics

Total package byte prevSize

118984

increased by22.28%

Dev dependency count

27

decreased by-3.57%

Lines of code

1529

increased by26.68%

No dependency changes