@micromag/core 0.3.175 → 0.3.180

package/es/hooks.js

@@ -6,6 +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 _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useForm as useForm$1 } from '@folklore/forms';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -17,8 +19,6 @@ import isObject from 'lodash/isObject';
 import raf from 'raf';
 import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@micromag/core/contexts';
 import { match } from 'css-mediaquery';
-import { useSprings } from '@react-spring/core';
-import { useDrag } from '@use-gesture/react';
 import clamp from 'lodash/clamp';
 
 function useActivityDetector() {
@@ -196,6 +196,120 @@ 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]);
+
+  var _useSpring = useSpring(function () {
+    return _objectSpread({
+      progress: wantedProgress,
+      onChange: onChange,
+      immediate: immediate
+    }, params);
+  }),
+      _useSpring2 = _slicedToArray(_useSpring, 2),
+      api = _useSpring2[1];
+
+  useEffect(function () {
+    if (wantedProgress !== null) {
+      api.start(_objectSpread({
+        progress: wantedProgress,
+        immediate: 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,
+      _ref$onTap = _ref.onTap,
+      onTap = _ref$onTap === void 0 ? null : _ref$onTap,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$dragDisabled = _ref.dragDisabled,
+      dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
+      _ref$computeProgress = _ref.computeProgress,
+      computeProgress = _ref$computeProgress === void 0 ? null : _ref$computeProgress,
+      _ref$onProgress = _ref.onProgress,
+      onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
+      _ref$springParams = _ref.springParams,
+      springParams = _ref$springParams === void 0 ? undefined : _ref$springParams;
+
+  var _useState = useState({
+    dragging: false,
+    progress: wantedProgress
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      _useState2$ = _useState2[0],
+      dragging = _useState2$.dragging,
+      progress = _useState2$.progress,
+      setDragState = _useState2[1];
+
+  var onDragContent = useCallback(function (gestureState) {
+    if (disabled) {
+      return;
+    }
+
+    var active = gestureState.active,
+        tap = gestureState.tap;
+
+    if (tap) {
+      if (onTap !== null) onTap(gestureState);
+      return;
+    }
+
+    if (dragDisabled) {
+      return;
+    }
+
+    var newProgress = computeProgress(gestureState);
+    setDragState({
+      dragging: active,
+      progress: newProgress
+    });
+
+    if (onProgress !== null) {
+      onProgress(newProgress, gestureState);
+    }
+  }, [setDragState, disabled, onTap, computeProgress, setDragState, onProgress]);
+  var bind = useDrag(onDragContent, {
+    filterTaps: true
+  });
+  var springedProgress = useSpringValue(progress, dragging || disabled, springParams);
+  useEffect(function () {
+    if (wantedProgress !== progress && !dragging) {
+      setDragState({
+        dragging: dragging,
+        progress: wantedProgress
+      });
+    }
+  }, [wantedProgress]);
+  return {
+    bind: bind,
+    dragging: dragging,
+    progress: springedProgress
+  };
+}
+
 var _excluded$3 = ["fields", "injectInFields"],
     _excluded2 = ["fields"];
 
@@ -751,25 +865,48 @@ var useLongPress = function useLongPress() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$onLongPress = _ref.onLongPress,
       onLongPress = _ref$onLongPress === void 0 ? null : _ref$onLongPress,
+      _ref$onLongPressStart = _ref.onLongPressStart,
+      onLongPressStart = _ref$onLongPressStart === void 0 ? null : _ref$onLongPressStart,
+      _ref$onLongPressEnd = _ref.onLongPressEnd,
+      onLongPressEnd = _ref$onLongPressEnd === void 0 ? null : _ref$onLongPressEnd,
       _ref$onClick = _ref.onClick,
       onClick = _ref$onClick === void 0 ? null : _ref$onClick,
       _ref$shouldPreventDef = _ref.shouldPreventDefault,
       shouldPreventDefault = _ref$shouldPreventDef === void 0 ? true : _ref$shouldPreventDef,
+      _ref$shouldStopPropag = _ref.shouldStopPropagation,
+      shouldStopPropagation = _ref$shouldStopPropag === void 0 ? false : _ref$shouldStopPropag,
+      _ref$preventClick = _ref.preventClick,
+      preventClick = _ref$preventClick === void 0 ? false : _ref$preventClick,
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? 350 : _ref$delay;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      longPressTriggered = _useState2[0],
-      setLongPressTriggered = _useState2[1];
+      pressed = _useState2[0],
+      setPressed = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      triggered = _useState4[0],
+      setTriggered = _useState4[1];
 
   var timeout = useRef(null);
   var target = useRef(null);
-  var start = useCallback(function (event) {
+  var start = useCallback(function (event, props) {
+    setPressed(true);
+
+    if (shouldStopPropagation) {
+      event.stopPropagation();
+    }
+
     if (event.target !== null) {
       target.current = event.target;
     }
 
+    if (onLongPressStart !== null) {
+      onLongPressStart(event, props);
+    }
+
     timeout.current = setTimeout(function () {
       if (shouldPreventDefault && target.current !== null) {
         target.current.addEventListener('touchend', preventDefault, {
@@ -780,16 +917,23 @@ var useLongPress = function useLongPress() {
         });
       }
 
+      setTriggered(true);
+
       if (onLongPress !== null) {
-        onLongPress(event);
+        onLongPress(event, props);
+        setPressed(false);
       }
 
-      setLongPressTriggered(true);
       timeout.current = null;
     }, delay);
-  }, [onLongPress, delay, shouldPreventDefault]);
-  var clear = useCallback(function (event) {
-    var shouldTriggerClick = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  }, [onLongPress, onLongPressStart, delay, setPressed, shouldPreventDefault]);
+  var clear = useCallback(function (event, props) {
+    var shouldTriggerClick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    setPressed(false);
+
+    if (preventClick && triggered) {
+      return;
+    }
 
     if (timeout.current !== null) {
       clearTimeout(timeout.current);
@@ -801,28 +945,39 @@ var useLongPress = function useLongPress() {
       }, 10);
     }
 
-    if (shouldTriggerClick && !longPressTriggered && onClick !== null) {
-      onClick();
+    if (shouldTriggerClick && !triggered && onClick !== null) {
+      onClick(props);
     }
 
-    setLongPressTriggered(false);
-  }, [shouldPreventDefault, onClick, longPressTriggered]);
+    onLongPressEnd(event, props, triggered);
+    setTriggered(false);
+  }, [shouldPreventDefault, onClick, onLongPressEnd, setPressed, triggered, preventClick]);
+
+  var bind = function bind() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    return {
+      onMouseDown: function onMouseDown(e) {
+        return start(e, props);
+      },
+      onTouchStart: function onTouchStart(e) {
+        return start(e, props);
+      },
+      onMouseUp: function onMouseUp(e) {
+        return clear(e, props);
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        return clear(e, props, false);
+      },
+      onTouchEnd: function onTouchEnd(e) {
+        return clear(e, props);
+      }
+    };
+  };
+
   return {
-    onMouseDown: function onMouseDown(e) {
-      return start(e);
-    },
-    onTouchStart: function onTouchStart(e) {
-      return start(e);
-    },
-    onMouseUp: function onMouseUp(e) {
-      return clear(e);
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      return clear(e, false);
-    },
-    onTouchEnd: function onTouchEnd(e) {
-      return clear(e);
-    }
+    bind: bind,
+    pressed: pressed,
+    triggered: triggered
   };
 };
 
@@ -2172,4 +2327,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useActivityDetector, useAnimationFrame, useDimensionObserver, useDocumentEvent, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useActivityDetector, useAnimationFrame, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaThumbnail, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/es/index.js

@@ -577,7 +577,7 @@ var pageMetadata = PropTypes$1.shape({
   microformats: PropTypes$1.arrayOf(PropTypes$1.shape({}))
 });
 var authorElement = PropTypes$1.shape({
-  name: PropTypes$1.string,
+  name: textElement,
   avatar: PropTypes$1.shape({
     url: PropTypes$1.string
   })

package/es/utils.js

@@ -195,6 +195,94 @@ var createUseEvent = function createUseEvent(eventsManager) {
   };
 };
 
+/* eslint-disable */
+var easings = {
+  linear: function linear(x) {
+    return x;
+  },
+  easeInQuad: function easeInQuad(x) {
+    return x * x;
+  },
+  easeOutQuad: function easeOutQuad(x) {
+    return 1 - (1 - x) * (1 - x);
+  },
+  easeInOutQuad: function easeInOutQuad(x) {
+    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+  },
+  easeInCubic: function easeInCubic(x) {
+    return x * x * x;
+  },
+  easeOutCubic: function easeOutCubic(x) {
+    return 1 - Math.pow(1 - x, 3);
+  },
+  easeInOutCubic: function easeInOutCubic(x) {
+    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+  },
+  easeInQuart: function easeInQuart(x) {
+    return x * x * x * x;
+  },
+  easeOutQuart: function easeOutQuart(x) {
+    return 1 - Math.pow(1 - x, 4);
+  },
+  easeInOutQuart: function easeInOutQuart(x) {
+    return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
+  },
+  easeInQuint: function easeInQuint(x) {
+    return x * x * x * x * x;
+  },
+  easeOutQuint: function easeOutQuint(x) {
+    return 1 - Math.pow(1 - x, 5);
+  },
+  easeInOutQuint: function easeInOutQuint(x) {
+    return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;
+  },
+  easeInSine: function easeInSine(x) {
+    return 1 - Math.cos(x * Math.PI / 2);
+  },
+  easeOutSine: function easeOutSine(x) {
+    return Math.sin(x * Math.PI / 2);
+  },
+  easeInOutSine: function easeInOutSine(x) {
+    return -(Math.cos(Math.PI * x) - 1) / 2;
+  },
+  easeInExpo: function easeInExpo(x) {
+    return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
+  },
+  easeOutExpo: function easeOutExpo(x) {
+    return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
+  },
+  easeInOutExpo: function easeInOutExpo(x) {
+    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2;
+  },
+  easeInCirc: function easeInCirc(x) {
+    return 1 - Math.sqrt(1 - Math.pow(x, 2));
+  },
+  easeOutCirc: function easeOutCirc(x) {
+    return Math.sqrt(1 - Math.pow(x - 1, 2));
+  },
+  easeInOutCirc: function easeInOutCirc(x) {
+    return x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
+  },
+  easeInBack: function easeInBack(x) {
+    return c3 * x * x * x - c1 * x * x;
+  },
+  easeOutBack: function easeOutBack(x) {
+    return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
+  },
+  easeInOutBack: function easeInOutBack(x) {
+    return x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
+  },
+  easeInElastic: function easeInElastic(x) {
+    return x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4);
+  },
+  easeOutElastic: function easeOutElastic(x) {
+    return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
+  },
+  easeInOutElastic: function easeInOutElastic(x) {
+    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
+  }
+};
+
 var getColorAsString = function getColorAsString() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var overideAlpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -1005,4 +1093,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
   return tinycolor(color).spin(30).toString();
 };
 
-export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };