@micromag/core 0.3.832 → 0.4.4

package/es/hooks.d.ts

@@ -0,0 +1,333 @@
+import * as react from 'react';
+import * as _use_gesture_react_dist_declarations_src_types from '@use-gesture/react/dist/declarations/src/types';
+import * as _react_spring_core from '@react-spring/core';
+
+declare function useActivityDetector({ element: providedElement, disabled, timeout: timeoutDelay }?: {
+    element?: any;
+    disabled?: boolean;
+    timeout?: number;
+}): {
+    ref: react.RefObject<any>;
+    detected: boolean;
+};
+
+declare const useAnimationFrame: (onFrame: any, { disabled }?: {
+    disabled?: boolean;
+}) => void;
+
+declare const useFormattedDate: ({ format, showToday }?: {
+    format?: any;
+    showToday?: boolean;
+}) => (date: any) => string;
+declare const useFormattedTime: ({ format, showNow, timeGap }?: {
+    format?: any;
+    showNow?: boolean;
+    timeGap?: number;
+}) => (date: any) => string;
+
+declare const useDebounced: (handler: any, watchedValue: any, delay?: number) => void;
+
+declare const useDocumentEvent: (event: any, callback: any, enabled?: boolean) => void;
+
+declare function useDragProgress({ progress: wantedProgress, onTap, disabled, dragDisabled, computeProgress, onProgress, onPointerDown, onScroll, springParams, dragOptions, }?: {
+    onTap?: any;
+    disabled?: boolean;
+    dragDisabled?: boolean;
+    computeProgress?: any;
+    onProgress?: any;
+    onPointerDown?: any;
+    onScroll?: any;
+    springParams?: any;
+    dragOptions?: {
+        filterTaps: boolean;
+    };
+}): {
+    transitioning: any;
+    bind: (...args: any[]) => _use_gesture_react_dist_declarations_src_types.ReactDOMAttributes;
+    dragging: boolean;
+    progress: any;
+    direction: number;
+};
+
+declare const useForm: ({ fields: providedFields, injectInFields, ...opts }?: {
+    fields?: any[];
+    injectInFields?: boolean;
+}) => any;
+
+declare const useFormTransition: (paths?: any[], styles?: {}) => {
+    direction: string;
+    name: {
+        enter: string;
+        enterActive: string;
+        leave: any;
+        leaveActive: string;
+    };
+    timeout: number;
+};
+
+declare const useFullscreen: (element: any) => {
+    toggle: () => void;
+    fullscreen: () => void;
+    unFullscreen: () => void;
+    active: boolean;
+    enabled: any;
+};
+
+declare const useIsVisible: ({ rootMargin, persist, disabled }?: {
+    persist?: boolean;
+    disabled?: boolean;
+}) => {
+    ref: react.RefObject<any>;
+    visible: any;
+};
+
+declare const useLoadedFonts: (fonts: any) => {
+    loaded: boolean;
+};
+
+declare const useLongPress: ({ onLongPress, onLongPressStart, onLongPressEnd, onClick, shouldPreventDefault, shouldStopPropagation, preventClick, delay, }?: {
+    onLongPress?: any;
+    onLongPressStart?: any;
+    onLongPressEnd?: any;
+    onClick?: any;
+    shouldPreventDefault?: boolean;
+    shouldStopPropagation?: boolean;
+    preventClick?: boolean;
+    delay?: number;
+}) => {
+    bind: (props?: any) => {
+        onMouseDown: (e: any) => void;
+        onTouchStart: (e: any) => void;
+        onMouseUp: (e: any) => void;
+        onMouseLeave: (e: any) => void;
+        onTouchEnd: (e: any) => void;
+    };
+    pressed: boolean;
+    triggered: boolean;
+};
+
+declare const useMediaApi: ({ url, onTimeUpdate, onProgressStep, onDurationChange, onVolumeChange, onPlay, onPause, onEnded, onSeeked, onSuspend, onLoadStart, onCanPlayThough, onCanPlay, onLoadedData, onLoadedMetadata, }?: {
+    url?: any;
+    onTimeUpdate?: any;
+    onProgressStep?: any;
+    onDurationChange?: any;
+    onVolumeChange?: any;
+    onPlay?: any;
+    onPause?: any;
+    onEnded?: any;
+    onSeeked?: any;
+    onSuspend?: any;
+    onLoadStart?: any;
+    onCanPlayThough?: any;
+    onCanPlay?: any;
+    onLoadedData?: any;
+    onLoadedMetadata?: any;
+}) => {
+    ref: react.RefObject<any>;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    seek: (time: any) => void;
+    currentTime: any;
+    duration: any;
+    playing: boolean;
+    paused: boolean;
+    ready: boolean;
+    dataReady: boolean;
+    suspended: boolean;
+};
+
+declare const useMediaBuffering: (mediaElement?: any, interval?: number) => {
+    buffering: boolean;
+};
+
+declare const useMediaState: (mediaElement?: any, { playing: wantedPlaying, muted: wantedMuted }?: {
+    playing?: boolean;
+    muted?: boolean;
+}) => {
+    playing: boolean;
+    muted: any;
+    buffering: boolean;
+};
+
+declare function useMediaCurrentTime(element: any, { id, disabled, updateInterval, onUpdate: customOnUpdate }?: {
+    id?: any;
+    disabled?: boolean;
+    updateInterval?: number;
+    onUpdate?: any;
+}): number;
+
+declare function useMediaDuration(element: any, { id }?: {
+    id?: any;
+}): any;
+
+declare function useMediaLoad(element: any, { preload, shouldLoad }?: {
+    preload?: string;
+    shouldLoad?: boolean;
+}): void;
+
+declare function useMediaProgress(media: any, { disabled, ...props }?: {
+    disabled?: boolean;
+}): number;
+
+declare function useMediaReady(element: any, { id }?: {
+    id?: any;
+}): boolean;
+
+declare function useMediaTimestampOffset(element: any, { attributeName }?: {
+    attributeName?: string;
+}): number;
+
+declare class MediasParser {
+    constructor({ fieldsManager, screensManager, fieldsPattern }: {
+        fieldsManager: any;
+        screensManager: any;
+        fieldsPattern?: {};
+    });
+    getParsedStoryTheme(storyId: any, theme: any): any;
+    getFieldsPatternByScreen(type: any): any;
+    toPath(story: any): any;
+    fromPath(story: any, defaultMedias?: any): any;
+    getFieldsPattern(fields: any, namePrefix?: any): any;
+    static fieldIsMedia({ media }: {
+        media?: boolean;
+    }): boolean;
+    static fieldIsFontFamily({ id }: {
+        id?: any;
+    }): boolean;
+    static replacePathsWithMedias(data: any, medias: any, patterns: any, keyPrefix?: any): any;
+    static getMediaPath({ id }: {
+        id?: any;
+    }): string;
+    static replaceMediasWithPaths(data: any, patterns: any, medias?: any, keyPrefix?: any): any;
+    static getMediaPatternsFromData(obj: any): RegExp[];
+    static dot(obj: any): any;
+    static keys(obj: any): any[];
+}
+
+declare const useMediasParser: () => {
+    toPath: (story: any) => any;
+    fromPath: (story: any) => any;
+    parser: MediasParser;
+};
+
+declare function useMediaThumbnail(media: any, file?: any): any;
+
+declare function useMediaWaveform(media: any, { fake, reduceBufferFactor }?: {
+    fake?: boolean;
+    reduceBufferFactor?: number;
+}): any;
+
+declare const getObserver: (Observer: any, options?: {}) => any;
+declare const useObserver: (Observer: any, opts?: {}, initialEntry?: {}) => {
+    ref: react.RefObject<any>;
+    entry: {};
+};
+declare const useIntersectionObserver: ({ root, rootMargin, threshold, disabled, }?: {
+    root?: any;
+    rootMargin?: string;
+    threshold?: number[];
+    disabled?: boolean;
+}) => {
+    ref: react.RefObject<any>;
+    entry: {};
+};
+declare const useResizeObserver: ({ disabled }?: {
+    disabled?: boolean;
+}) => {
+    ref: react.RefObject<any>;
+    entry: {};
+};
+declare const useDimensionObserver: (...args: any[]) => {
+    entry: {};
+    width: any;
+    height: any;
+    ref: react.RefObject<any>;
+};
+
+declare const useParsedStory: (story: any, { disabled, withTheme, withMedias, withFonts, withMigrations, }?: {
+    disabled?: boolean;
+    withTheme?: boolean;
+    withMedias?: boolean;
+    withFonts?: boolean;
+    withMigrations?: boolean;
+}) => any;
+
+declare const usePlaceholderStyle: (className: any, placeholderStyle: any) => string;
+
+declare function useProgressSteps({ disabled, currentTime, duration, onStep, steps, }?: {
+    disabled?: boolean;
+    onStep?: any;
+    steps?: number[];
+}): void;
+
+declare const useDevicePixelRatio: () => number;
+declare const useScreenSizeFromElement: ({ width, height, ...opts }?: {
+    width?: any;
+    height?: any;
+}) => {
+    ref: react.RefObject<any>;
+    fullWidth: any;
+    fullHeight: any;
+    screenSize: {
+        screen: any;
+        screens: any[];
+        width: any;
+        height: any;
+        landscape: boolean;
+        menuOverScreen: boolean;
+        resolution: number;
+        imageResolution: number;
+    };
+    scale: number;
+    resolution: number;
+};
+declare const useScreenSizeFromWindow: (opts: any) => {
+    screen: any;
+    screens: any[];
+    width: any;
+    height: any;
+    landscape: boolean;
+    menuOverScreen: boolean;
+    resolution: number;
+    imageResolution: number;
+};
+
+declare function useSpringValue(wantedProgress: any, immediate: any, params: any): any;
+
+declare function useSupportsWebp(defaultValue?: boolean): boolean;
+
+declare const useSwipe: ({ width, items, withSpring, swipeWidthThreshold, animateScale, disabled, lockAxis, onSwipeStart, onSwipeEnd, onSwipeCancel, onTap, }?: {
+    width?: any;
+    items?: any[];
+    withSpring?: boolean;
+    swipeWidthThreshold?: number;
+    animateScale?: boolean;
+    disabled?: boolean;
+    lockAxis?: boolean;
+    onSwipeStart?: any;
+    onSwipeEnd?: any;
+    onSwipeCancel?: any;
+    onTap?: any;
+}) => {
+    items: {
+        x: _react_spring_core.SpringValue<number>;
+        y: _react_spring_core.SpringValue<number>;
+        zIndex: _react_spring_core.SpringValue<number>;
+    }[];
+    bind: (...args: any[]) => _use_gesture_react_dist_declarations_src_types.ReactDOMAttributes;
+    index: number;
+    setIndex: (idx: any) => void;
+};
+
+declare const useThemeParser: () => (story: any) => any;
+
+declare const useTrackScreenView: () => (screen?: any, index?: any) => void;
+declare const useTrackScreenEvent: (type?: any) => (action?: any, label?: any, opts?: any) => void;
+declare const useTrackScreenMedia: (type?: any) => (media?: any, action?: any, opts?: any) => void;
+declare const useTrackEvent: () => (category?: any, action?: any, label?: any, opts?: any) => void;
+declare const useTrackMedia: (type?: any) => (media?: any, action?: any, opts?: any) => void;
+
+declare const useWindowEvent: (event: any, callback: any, enabled?: boolean) => void;
+
+export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDevicePixelRatio, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaBuffering, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaState, useMediaThumbnail, useMediaTimestampOffset, useMediaWaveform, useMediasParser, useObserver, useParsedStory, usePlaceholderStyle, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSupportsWebp, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/es/hooks.js

@@ -3,7 +3,7 @@ import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { EventsManager, MediasParser, StoryParser, ThemeParser } from '@micromag/core';
 import { createUseEvent, getMediaFilesAsArray } from '@micromag/core/utils';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import { useSpring, useSprings } from '@react-spring/core';
+import { useSpringRef, useSpring, useSprings } from '@react-spring/core';
 import { useGesture, useDrag } from '@use-gesture/react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useForm as useForm$1 } from '@folklore/forms';
@@ -226,16 +226,21 @@ function useDragProgress() {
     _useState4 = _slicedToArray(_useState3, 2),
     direction = _useState4[0],
     setDirection = _useState4[1];
-  var spring = useCallback(function () {
-    return _objectSpread({
-      progress: wantedProgress,
-      immediate: dragging || disabled,
-      onResolve: function onResolve() {
-        setDirection(0);
-      }
-    }, springParams);
-  }, [wantedProgress, disabled]);
-  var _useSpring = useSpring(spring),
+
+  // In react-spring v10, useSpring(fn) without deps stores the initial update and
+  // re-applies it via ctrl.start() in a layout effect on EVERY render, resetting the
+  // spring to its initial value. To prevent this, we pass a dummy SpringRef as `ref`
+  // in the props — when ctrl.ref is set, the layout effect queues updates instead of
+  // starting them, so our imperative api.start() calls are not overridden.
+  var imperativeRef = useSpringRef();
+  var _useSpring = useSpring(function () {
+      return _objectSpread({
+        ref: imperativeRef,
+        from: {
+          progress: wantedProgress
+        }
+      }, springParams);
+    }),
     _useSpring2 = _slicedToArray(_useSpring, 2),
     progress = _useSpring2[0].progress,
     api = _useSpring2[1];
@@ -262,13 +267,13 @@ function useDragProgress() {
     if (active !== dragging) {
       setDragging(active);
     }
-    api.start({
+    api.start(_objectSpread({
       progress: newProgress,
       immediate: active,
       onResolve: !active ? function () {
         setDirection(0);
       } : function () {}
-    });
+    }, springParams));
     if (onProgress !== null) {
       onProgress(newProgress, gestureState);
     }
@@ -284,15 +289,15 @@ function useDragProgress() {
     if (!refDragging.current && wantedProgress !== refProgress.current) {
       setDirection(wantedProgress < refProgress.current ? -1 : 1);
       refProgress.current = wantedProgress;
-      api.start({
+      api.start(_objectSpread({
         progress: wantedProgress,
-        immediate: false,
+        immediate: disabled,
         onResolve: function onResolve() {
           setDirection(0);
         }
-      });
+      }, springParams));
     }
-  }, [wantedProgress]);
+  }, [wantedProgress, disabled]);
   var transitioning = useMemo(function () {
     return wantedProgress !== progress.get() || progress.isAnimating || dragging;
   }, [wantedProgress, progress.isAnimating, dragging]);