@folklore/hooks 0.0.24 → 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,
@@ -427,19 +481,33 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
   }, metadata), playState);
 };
 
-var documentEventsManager = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null;
+var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager__default["default"](document) : null;
+
+var useDocumentEvent = function useDocumentEvent(event, callback) {
+  react.useEffect(function () {
+    if (eventsManager$1 !== null && callback !== null) {
+      eventsManager$1.subscribe(event, callback);
+    }
+
+    return function () {
+      if (eventsManager$1 !== null && callback !== null) {
+        eventsManager$1.unsubscribe(event, callback);
+      }
+    };
+  }, [event, callback]);
+};
 
-var windowEventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
+var eventsManager = typeof window !== 'undefined' ? new EventsManager__default["default"](window) : null;
 
 var useWindowEvent = function useWindowEvent(event, callback) {
   react.useEffect(function () {
-    if (windowEventsManager !== null && callback !== null) {
-      windowEventsManager.subscribe(event, callback);
+    if (eventsManager !== null && callback !== null) {
+      eventsManager.subscribe(event, callback);
     }
 
     return function () {
-      if (windowEventsManager !== null && callback !== null) {
-        windowEventsManager.unsubscribe(event, callback);
+      if (eventsManager !== null && callback !== null) {
+        eventsManager.unsubscribe(event, callback);
       }
     };
   }, [event, callback]);
@@ -449,7 +517,13 @@ function useKeyboard() {
   var keyMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var onKeyDown = react.useCallback(function (event) {
     var key = event.key;
-    var callback = (typeof keyMap[key] === 'function' ? keyMap[key] : (keyMap[key] || {}).down) || null;
+    var callback = null;
+
+    if (typeof keyMap === 'function') {
+      callback = keyMap;
+    } else if (typeof keyMap[key] !== 'undefined') {
+      callback = typeof keyMap[key] === 'function' ? keyMap[key] : (keyMap[key] || {}).down || null;
+    }
 
     if (callback !== null) {
       callback(event);
@@ -457,7 +531,13 @@ function useKeyboard() {
   }, [keyMap]);
   var onKeyUp = react.useCallback(function (event) {
     var key = event.key;
-    var callback = (typeof keyMap[key] !== 'undefined' && typeof keyMap[key] !== 'function' ? (keyMap[key] || {}).up : null) || null;
+    var callback = null;
+
+    if (typeof keyMap === 'function') {
+      callback = keyMap;
+    } else if (typeof keyMap[key] !== 'undefined') {
+      callback = typeof keyMap[key] === 'function' ? keyMap[key] : (keyMap[key] || {}).up || null;
+    }
 
     if (callback !== null) {
       callback(event);
@@ -1706,9 +1786,11 @@ function useWindowSize() {
   return size;
 }
 
-exports.documentEventsManager = documentEventsManager;
+exports.documentEventsManager = eventsManager$1;
 exports.getObserver = getObserver;
+exports.useCounter = useCounter;
 exports.useDailymotionPlayer = useDailymotionPlayer;
+exports.useDocumentEvent = useDocumentEvent;
 exports.useIntersectionObserver = useIntersectionObserver;
 exports.useKeyboard = useKeyboard;
 exports.useNativeVideoPlayer = useNativeVideoPlayer;
@@ -1717,7 +1799,8 @@ exports.usePlayerCurrentTime = usePlayerCurrentTime;
 exports.useResizeObserver = useResizeObserver;
 exports.useVideoPlayer = useVideoPlayer;
 exports.useVimeoPlayer = useVimeoPlayer;
+exports.useWindowEvent = useWindowEvent;
 exports.useWindowScroll = useWindowScroll;
 exports.useWindowSize = useWindowSize;
 exports.useYouTubePlayer = useYouTubePlayer;
-exports.windowEventsManager = windowEventsManager;
+exports.windowEventsManager = eventsManager;

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,
@@ -415,19 +468,33 @@ var useDailymotionPlayer = function useDailymotionPlayer() {
   }, metadata), playState);
 };
 
-var documentEventsManager = typeof document !== 'undefined' ? new EventsManager(document) : null;
+var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
 
-var windowEventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
+var useDocumentEvent = function useDocumentEvent(event, callback) {
+  useEffect(function () {
+    if (eventsManager$1 !== null && callback !== null) {
+      eventsManager$1.subscribe(event, callback);
+    }
+
+    return function () {
+      if (eventsManager$1 !== null && callback !== null) {
+        eventsManager$1.unsubscribe(event, callback);
+      }
+    };
+  }, [event, callback]);
+};
+
+var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 
 var useWindowEvent = function useWindowEvent(event, callback) {
   useEffect(function () {
-    if (windowEventsManager !== null && callback !== null) {
-      windowEventsManager.subscribe(event, callback);
+    if (eventsManager !== null && callback !== null) {
+      eventsManager.subscribe(event, callback);
     }
 
     return function () {
-      if (windowEventsManager !== null && callback !== null) {
-        windowEventsManager.unsubscribe(event, callback);
+      if (eventsManager !== null && callback !== null) {
+        eventsManager.unsubscribe(event, callback);
       }
     };
   }, [event, callback]);
@@ -437,7 +504,13 @@ function useKeyboard() {
   var keyMap = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var onKeyDown = useCallback(function (event) {
     var key = event.key;
-    var callback = (typeof keyMap[key] === 'function' ? keyMap[key] : (keyMap[key] || {}).down) || null;
+    var callback = null;
+
+    if (typeof keyMap === 'function') {
+      callback = keyMap;
+    } else if (typeof keyMap[key] !== 'undefined') {
+      callback = typeof keyMap[key] === 'function' ? keyMap[key] : (keyMap[key] || {}).down || null;
+    }
 
     if (callback !== null) {
       callback(event);
@@ -445,7 +518,13 @@ function useKeyboard() {
   }, [keyMap]);
   var onKeyUp = useCallback(function (event) {
     var key = event.key;
-    var callback = (typeof keyMap[key] !== 'undefined' && typeof keyMap[key] !== 'function' ? (keyMap[key] || {}).up : null) || null;
+    var callback = null;
+
+    if (typeof keyMap === 'function') {
+      callback = keyMap;
+    } else if (typeof keyMap[key] !== 'undefined') {
+      callback = typeof keyMap[key] === 'function' ? keyMap[key] : (keyMap[key] || {}).up || null;
+    }
 
     if (callback !== null) {
       callback(event);
@@ -1694,4 +1773,4 @@ function useWindowSize() {
   return size;
 }
 
-export { documentEventsManager, getObserver, useDailymotionPlayer, useIntersectionObserver, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useWindowScroll, useWindowSize, useYouTubePlayer, 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.24",
+    "version": "0.0.27",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -48,10 +48,11 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "0a4dfa874995de462b43cf1e0f215b3fb40e0a99",
+    "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"
     }
 }