@folklore/hooks 0.0.26 → 0.0.27

package/dist/cjs.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var raf = require('raf');
 var react = require('react');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var services = require('@folklore/services');
 var createDebug = require('debug');
 var EventsManager = require('@folklore/events');
@@ -12,12 +13,65 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var raf__default = /*#__PURE__*/_interopDefaultLegacy(raf);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
 var EventsManager__default = /*#__PURE__*/_interopDefaultLegacy(EventsManager);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 
+function useCounter(desiredValue, _ref) {
+  var _ref$maxDuration = _ref.maxDuration,
+      maxDuration = _ref$maxDuration === void 0 ? 2000 : _ref$maxDuration,
+      _ref$speed = _ref.speed,
+      speed = _ref$speed === void 0 ? 1 / 10 : _ref$speed;
+
+  var _useState = react.useState(desiredValue),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+
+  react.useEffect(function () {
+    var animationFrame = null;
+    var startTime = null;
+    var duration = 0;
+    var canceled = false;
+    var startValue = currentValue;
+    var delta = desiredValue - startValue;
+
+    function loop() {
+      if (canceled) {
+        return;
+      }
+
+      var currentTime = Date.now();
+      var elapsedTime = currentTime - startTime;
+      var progress = Math.min(elapsedTime / duration, 1);
+      var newValue = Math.round(startValue + progress * delta);
+      setCurrentValue(newValue);
+
+      if (newValue !== desiredValue) {
+        animationFrame = raf__default["default"](loop);
+      }
+    }
+
+    if (delta !== 0) {
+      duration = Math.min(maxDuration, Math.abs(delta) * speed * 1000);
+      startTime = Date.now();
+      animationFrame = raf__default["default"](loop);
+    }
+
+    return function () {
+      canceled = true;
+
+      if (animationFrame !== null) {
+        raf__default["default"].cancel(animationFrame);
+      }
+    };
+  }, [desiredValue]);
+  return currentValue;
+}
+
 function usePlayerCurrentTime(player) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref$id = _ref.id,
@@ -1734,6 +1788,7 @@ function useWindowSize() {
 
 exports.documentEventsManager = eventsManager$1;
 exports.getObserver = getObserver;
+exports.useCounter = useCounter;
 exports.useDailymotionPlayer = useDailymotionPlayer;
 exports.useDocumentEvent = useDocumentEvent;
 exports.useIntersectionObserver = useIntersectionObserver;

package/dist/es.js

@@ -1,11 +1,64 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import raf from 'raf';
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { loadDailymotion, loadYouTube, loadVimeo } from '@folklore/services';
 import createDebug from 'debug';
 import EventsManager from '@folklore/events';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 
+function useCounter(desiredValue, _ref) {
+  var _ref$maxDuration = _ref.maxDuration,
+      maxDuration = _ref$maxDuration === void 0 ? 2000 : _ref$maxDuration,
+      _ref$speed = _ref.speed,
+      speed = _ref$speed === void 0 ? 1 / 10 : _ref$speed;
+
+  var _useState = useState(desiredValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+
+  useEffect(function () {
+    var animationFrame = null;
+    var startTime = null;
+    var duration = 0;
+    var canceled = false;
+    var startValue = currentValue;
+    var delta = desiredValue - startValue;
+
+    function loop() {
+      if (canceled) {
+        return;
+      }
+
+      var currentTime = Date.now();
+      var elapsedTime = currentTime - startTime;
+      var progress = Math.min(elapsedTime / duration, 1);
+      var newValue = Math.round(startValue + progress * delta);
+      setCurrentValue(newValue);
+
+      if (newValue !== desiredValue) {
+        animationFrame = raf(loop);
+      }
+    }
+
+    if (delta !== 0) {
+      duration = Math.min(maxDuration, Math.abs(delta) * speed * 1000);
+      startTime = Date.now();
+      animationFrame = raf(loop);
+    }
+
+    return function () {
+      canceled = true;
+
+      if (animationFrame !== null) {
+        raf.cancel(animationFrame);
+      }
+    };
+  }, [desiredValue]);
+  return currentValue;
+}
+
 function usePlayerCurrentTime(player) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref$id = _ref.id,
@@ -1720,4 +1773,4 @@ function useWindowSize() {
   return size;
 }
 
-export { eventsManager$1 as documentEventsManager, getObserver, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };
+export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/hooks",
-    "version": "0.0.26",
+    "version": "0.0.27",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -48,10 +48,11 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "318ecab2c776c3267abf57bffef8012cfcd937f5",
+    "gitHead": "47c23ae7e56301105e97a73f5d0f9d94373966b3",
     "dependencies": {
         "@folklore/events": "^0.0.3",
         "@folklore/services": "^0.1.36",
-        "debug": "^4.3.4"
+        "debug": "^4.3.4",
+        "raf": "^3.4.1"
     }
 }