@anton.bobrov/react-vevet-hooks/lib/esm/hooks/useTimeline.js

A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { useEvent, useDeepCompareMemoize } from '@anton.bobrov/react-hooks';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Timeline } from 'vevet';
/**
 * Custom React hook that creates a `vevet` timeline instance.
 *
 * This hook initializes a timeline with the specified properties and
 * sets up event callbacks for timeline events such as start, progress,
 * and end. It provides functions to control the playback of the timeline.
 *
 * @example
 * const MyComponent = () => {
 *   const { play, pause, reset } = useTimeline({
 *     easing: EaseInBounce,
 *     duration: 1000,
 *     onStart: () => console.log('Timeline started'),
 *     onProgress: (data) => console.log('Progress:', data),
 *     onEnd: () => console.log('Timeline ended'),
 *   });
 *
 *   return (
 *     <div>
 *       <button onClick={play}>Play</button>
 *       <button onClick={pause}>Pause</button>
 *       <button onClick={reset}>Reset</button>
 *     </div>
 *   );
 * };
 */
export function useTimeline(_a) {
    var easing = _a.easing, onStartProp = _a.onStart, onProgressProp = _a.onProgress, onEndProp = _a.onEnd, changeableProps = __rest(_a, ["easing", "onStart", "onProgress", "onEnd"]);
    var _b = useState(), timeline = _b[0], setTimeline = _b[1];
    var initialChangeablePropsRef = useRef(changeableProps);
    var onStart = useEvent(onStartProp);
    var onProgress = useEvent(onProgressProp);
    var onEnd = useEvent(onEndProp);
    useEffect(function () {
        var instance = new Timeline(__assign(__assign({}, initialChangeablePropsRef.current), { easing: easing }));
        setTimeline(instance);
        if (onStart) {
            instance.addCallback('start', onStart);
        }
        if (onProgress) {
            instance.addCallback('progress', onProgress);
        }
        if (onEnd) {
            instance.addCallback('end', onEnd);
        }
        return function () { return instance.destroy(); };
    }, [easing, onEnd, onProgress, onStart]);
    useEffect(function () {
        if (!timeline) {
            return;
        }
        timeline.changeProps(changeableProps);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [timeline, useDeepCompareMemoize(changeableProps)]);
    var play = useCallback(function () { return timeline === null || timeline === void 0 ? void 0 : timeline.play(); }, [timeline]);
    var reverse = useCallback(function () { return timeline === null || timeline === void 0 ? void 0 : timeline.reverse(); }, [timeline]);
    var pause = useCallback(function () { return timeline === null || timeline === void 0 ? void 0 : timeline.pause(); }, [timeline]);
    var reset = useCallback(function () { return timeline === null || timeline === void 0 ? void 0 : timeline.reset(); }, [timeline]);
    return { timeline: timeline, play: play, reverse: reverse, pause: pause, reset: reset };
}
//# sourceMappingURL=useTimeline.js.map