@micromag/core 0.3.206 → 0.3.209

package/es/hooks.js

@@ -6,8 +6,8 @@ import isString from 'lodash/isString';
 import dayjs from 'dayjs';
 import { EventsManager, MediasParser, StoryParser, ThemeParser } from '@micromag/core';
 import { createUseEvent, getMediaFilesAsArray } from '@micromag/core/utils';
-import { useDrag } from '@use-gesture/react';
 import { useSpring, useSprings } from '@react-spring/core';
+import { useDrag } from '@use-gesture/react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useForm as useForm$1 } from '@folklore/forms';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -196,39 +196,6 @@ var useFormattedTime = function useFormattedTime() {
 var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
 var useDocumentEvent = createUseEvent(eventsManager$1);
 
-var getValueFromSpring = function getValueFromSpring(s) {
-  var _ref = s || {},
-      _ref$value = _ref.value,
-      v = _ref$value === void 0 ? null : _ref$value;
-
-  var _ref2 = v || {},
-      p = _ref2.progress;
-
-  return p;
-};
-
-function useSpringValue(wantedProgress, immediate, params) {
-  var _useState = useState(wantedProgress),
-      _useState2 = _slicedToArray(_useState, 2),
-      progress = _useState2[0],
-      setProgress = _useState2[1];
-
-  var onChange = useCallback(function (spring) {
-    return setProgress(getValueFromSpring(spring));
-  }, [setProgress]);
-  useSpring(_objectSpread({
-    progress: wantedProgress,
-    onChange: onChange,
-    immediate: immediate
-  }, params)); // useEffect(() => {
-  //     if (wantedProgress !== null) {
-  //         api.start({ progress: wantedProgress, immediate, ...params });
-  //     }
-  // }, [wantedProgress, immediate, params, api]);
-
-  return immediate ? wantedProgress : progress;
-}
-
 function useDragProgress() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       wantedProgress = _ref.progress,
@@ -251,16 +218,24 @@ function useDragProgress() {
   } : _ref$dragOptions;
 
   var refDragging = useRef(false);
+  var refProgress = useRef(wantedProgress);
 
-  var _useState = useState({
-    dragging: false,
-    progress: wantedProgress
-  }),
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      _useState2$ = _useState2[0],
-      dragging = _useState2$.dragging,
-      progress = _useState2$.progress,
-      setDragState = _useState2[1];
+      dragging = _useState2[0],
+      setDragging = _useState2[1];
+
+  var spring = useCallback(function () {
+    return _objectSpread({
+      progress: wantedProgress,
+      immediate: dragging || disabled
+    }, springParams);
+  }, []);
+
+  var _useSpring = useSpring(spring),
+      _useSpring2 = _slicedToArray(_useSpring, 2),
+      progress = _useSpring2[0].progress,
+      api = _useSpring2[1];
 
   var onDrag = useCallback(function (gestureState) {
     if (disabled) {
@@ -281,29 +256,35 @@ function useDragProgress() {
 
     var newProgress = computeProgress(gestureState);
     refDragging.current = active;
-    setDragState({
-      dragging: active,
-      progress: newProgress
+    refProgress.current = newProgress;
+
+    if (active !== dragging) {
+      setDragging(active);
+    }
+
+    api.start({
+      progress: newProgress,
+      immediate: active
     });
 
     if (onProgress !== null) {
       onProgress(newProgress, gestureState);
     }
-  }, [setDragState, disabled, onTap, computeProgress, setDragState, onProgress]);
+  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
   var bind = useDrag(onDrag, dragOptions);
-  var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
   useEffect(function () {
-    if (wantedProgress !== progress && !refDragging.current) {
-      setDragState({
-        dragging: refDragging.current,
-        progress: wantedProgress
+    if (!refDragging.current && wantedProgress !== refProgress.current) {
+      refProgress.current = wantedProgress;
+      api.start({
+        progress: wantedProgress,
+        immediate: false
       });
     }
   }, [wantedProgress]);
   return {
     bind: bind,
     dragging: dragging,
-    progress: springedProgress
+    progress: progress
   };
 }
 
@@ -1489,16 +1470,17 @@ function useMediaProgress(media) {
   var _useState = useState(!disabled),
       _useState2 = _slicedToArray(_useState, 2),
       playing = _useState2[0],
-      setPlaying = _useState2[1];
+      setPlaying = _useState2[1]; // const currentTime = useMediaCurrentTime(media, {
+  //     disabled: disabled || !playing,
+  //     ...props,
+  // });
+
 
-  var currentTime = useMediaCurrentTime(media, _objectSpread({
-    disabled: disabled || !playing
-  }, props));
   var duration = useMediaDuration(media, _objectSpread({
     disabled: disabled || !playing
   }, props));
 
-  var _useState3 = useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
+  var _useState3 = useState(media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0),
       _useState4 = _slicedToArray(_useState3, 2),
       progress = _useState4[0],
       setProgress = _useState4[1];
@@ -1533,8 +1515,8 @@ function useMediaProgress(media) {
 
     media.addEventListener('play', onResume);
     media.addEventListener('seeked', onResume);
-    media.addEventListener('playing', onResume);
-    media.addEventListener('timeupdate', onResume);
+    media.addEventListener('playing', onResume); // media.addEventListener('timeupdate', onResume);
+
     media.addEventListener('pause', onPause);
     media.addEventListener('ended', onPause);
     media.addEventListener('waiting', onPause);
@@ -1549,8 +1531,8 @@ function useMediaProgress(media) {
     return function () {
       media.removeEventListener('play', onResume);
       media.removeEventListener('seeked', onResume);
-      media.removeEventListener('playing', onResume);
-      media.removeEventListener('timeupdate', onResume);
+      media.removeEventListener('playing', onResume); // media.removeEventListener('timeupdate', onResume);
+
       media.removeEventListener('pause', onPause);
       media.removeEventListener('ended', onPause);
       media.removeEventListener('waiting', onPause);
@@ -1559,11 +1541,7 @@ function useMediaProgress(media) {
     };
   }, [media, updateProgress, setPlaying, playing]);
   useEffect(function () {
-    if (media === null) {
-      return function () {};
-    }
-
-    if (!playing || disabled) {
+    if (media === null || !playing || disabled) {
       return function () {};
     }
 
@@ -2012,6 +1990,34 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
   return useScreenSize(_objectSpread(_objectSpread({}, opts), windowSize));
 };
 
+var getValueFromSpring = function getValueFromSpring(s) {
+  var _ref = s || {},
+      _ref$value = _ref.value,
+      v = _ref$value === void 0 ? null : _ref$value;
+
+  var _ref2 = v || {},
+      p = _ref2.progress;
+
+  return p;
+};
+
+function useSpringValue(wantedProgress, immediate, params) {
+  var _useState = useState(wantedProgress),
+      _useState2 = _slicedToArray(_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  var onChange = useCallback(function (spring) {
+    return setProgress(getValueFromSpring(spring));
+  }, [setProgress]);
+  useSpring(_objectSpread({
+    progress: wantedProgress,
+    onChange: onChange,
+    immediate: immediate
+  }, params));
+  return immediate ? wantedProgress : progress;
+}
+
 var useSwipe = function useSwipe() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$width = _ref.width,

package/lib/hooks.js

@@ -10,8 +10,8 @@ var isString = require('lodash/isString');
 var dayjs = require('dayjs');
 var core = require('@micromag/core');
 var utils = require('@micromag/core/utils');
-var react$1 = require('@use-gesture/react');
 var core$1 = require('@react-spring/core');
+var react$1 = require('@use-gesture/react');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var forms = require('@folklore/forms');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
@@ -234,39 +234,6 @@ var useFormattedTime = function useFormattedTime() {
 var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
 var useDocumentEvent = utils.createUseEvent(eventsManager$1);
 
-var getValueFromSpring = function getValueFromSpring(s) {
-  var _ref = s || {},
-      _ref$value = _ref.value,
-      v = _ref$value === void 0 ? null : _ref$value;
-
-  var _ref2 = v || {},
-      p = _ref2.progress;
-
-  return p;
-};
-
-function useSpringValue(wantedProgress, immediate, params) {
-  var _useState = react.useState(wantedProgress),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      progress = _useState2[0],
-      setProgress = _useState2[1];
-
-  var onChange = react.useCallback(function (spring) {
-    return setProgress(getValueFromSpring(spring));
-  }, [setProgress]);
-  core$1.useSpring(_objectSpread__default["default"]({
-    progress: wantedProgress,
-    onChange: onChange,
-    immediate: immediate
-  }, params)); // useEffect(() => {
-  //     if (wantedProgress !== null) {
-  //         api.start({ progress: wantedProgress, immediate, ...params });
-  //     }
-  // }, [wantedProgress, immediate, params, api]);
-
-  return immediate ? wantedProgress : progress;
-}
-
 function useDragProgress() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       wantedProgress = _ref.progress,
@@ -289,16 +256,24 @@ function useDragProgress() {
   } : _ref$dragOptions;
 
   var refDragging = react.useRef(false);
+  var refProgress = react.useRef(wantedProgress);
 
-  var _useState = react.useState({
-    dragging: false,
-    progress: wantedProgress
-  }),
+  var _useState = react.useState(false),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
-      _useState2$ = _useState2[0],
-      dragging = _useState2$.dragging,
-      progress = _useState2$.progress,
-      setDragState = _useState2[1];
+      dragging = _useState2[0],
+      setDragging = _useState2[1];
+
+  var spring = react.useCallback(function () {
+    return _objectSpread__default["default"]({
+      progress: wantedProgress,
+      immediate: dragging || disabled
+    }, springParams);
+  }, []);
+
+  var _useSpring = core$1.useSpring(spring),
+      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+      progress = _useSpring2[0].progress,
+      api = _useSpring2[1];
 
   var onDrag = react.useCallback(function (gestureState) {
     if (disabled) {
@@ -319,29 +294,35 @@ function useDragProgress() {
 
     var newProgress = computeProgress(gestureState);
     refDragging.current = active;
-    setDragState({
-      dragging: active,
-      progress: newProgress
+    refProgress.current = newProgress;
+
+    if (active !== dragging) {
+      setDragging(active);
+    }
+
+    api.start({
+      progress: newProgress,
+      immediate: active
     });
 
     if (onProgress !== null) {
       onProgress(newProgress, gestureState);
     }
-  }, [setDragState, disabled, onTap, computeProgress, setDragState, onProgress]);
+  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
   var bind = react$1.useDrag(onDrag, dragOptions);
-  var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
   react.useEffect(function () {
-    if (wantedProgress !== progress && !refDragging.current) {
-      setDragState({
-        dragging: refDragging.current,
-        progress: wantedProgress
+    if (!refDragging.current && wantedProgress !== refProgress.current) {
+      refProgress.current = wantedProgress;
+      api.start({
+        progress: wantedProgress,
+        immediate: false
       });
     }
   }, [wantedProgress]);
   return {
     bind: bind,
     dragging: dragging,
-    progress: springedProgress
+    progress: progress
   };
 }
 
@@ -1527,16 +1508,17 @@ function useMediaProgress(media) {
   var _useState = react.useState(!disabled),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       playing = _useState2[0],
-      setPlaying = _useState2[1];
+      setPlaying = _useState2[1]; // const currentTime = useMediaCurrentTime(media, {
+  //     disabled: disabled || !playing,
+  //     ...props,
+  // });
+
 
-  var currentTime = useMediaCurrentTime(media, _objectSpread__default["default"]({
-    disabled: disabled || !playing
-  }, props));
   var duration = useMediaDuration(media, _objectSpread__default["default"]({
     disabled: disabled || !playing
   }, props));
 
-  var _useState3 = react.useState(currentTime > 0 && duration > 0 ? currentTime / duration : 0),
+  var _useState3 = react.useState(media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0),
       _useState4 = _slicedToArray__default["default"](_useState3, 2),
       progress = _useState4[0],
       setProgress = _useState4[1];
@@ -1571,8 +1553,8 @@ function useMediaProgress(media) {
 
     media.addEventListener('play', onResume);
     media.addEventListener('seeked', onResume);
-    media.addEventListener('playing', onResume);
-    media.addEventListener('timeupdate', onResume);
+    media.addEventListener('playing', onResume); // media.addEventListener('timeupdate', onResume);
+
     media.addEventListener('pause', onPause);
     media.addEventListener('ended', onPause);
     media.addEventListener('waiting', onPause);
@@ -1587,8 +1569,8 @@ function useMediaProgress(media) {
     return function () {
       media.removeEventListener('play', onResume);
       media.removeEventListener('seeked', onResume);
-      media.removeEventListener('playing', onResume);
-      media.removeEventListener('timeupdate', onResume);
+      media.removeEventListener('playing', onResume); // media.removeEventListener('timeupdate', onResume);
+
       media.removeEventListener('pause', onPause);
       media.removeEventListener('ended', onPause);
       media.removeEventListener('waiting', onPause);
@@ -1597,11 +1579,7 @@ function useMediaProgress(media) {
     };
   }, [media, updateProgress, setPlaying, playing]);
   react.useEffect(function () {
-    if (media === null) {
-      return function () {};
-    }
-
-    if (!playing || disabled) {
+    if (media === null || !playing || disabled) {
       return function () {};
     }
 
@@ -2050,6 +2028,34 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
   return useScreenSize(_objectSpread__default["default"](_objectSpread__default["default"]({}, opts), windowSize));
 };
 
+var getValueFromSpring = function getValueFromSpring(s) {
+  var _ref = s || {},
+      _ref$value = _ref.value,
+      v = _ref$value === void 0 ? null : _ref$value;
+
+  var _ref2 = v || {},
+      p = _ref2.progress;
+
+  return p;
+};
+
+function useSpringValue(wantedProgress, immediate, params) {
+  var _useState = react.useState(wantedProgress),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+
+  var onChange = react.useCallback(function (spring) {
+    return setProgress(getValueFromSpring(spring));
+  }, [setProgress]);
+  core$1.useSpring(_objectSpread__default["default"]({
+    progress: wantedProgress,
+    onChange: onChange,
+    immediate: immediate
+  }, params));
+  return immediate ? wantedProgress : progress;
+}
+
 var useSwipe = function useSwipe() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$width = _ref.width,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.206",
+    "version": "0.3.209",
     "description": "",
     "keywords": [
         "javascript"
@@ -133,5 +133,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ed021987825fdacbf30fa486cc4f9f55b414ae47"
+    "gitHead": "909d9ff44ec6bf543db9c75186cd223391a5f0cd"
 }