@ffsm/native-animate/dist/with-native-animate.js

Simple animation for React Native, only React native and JavaScript

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
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 { forwardRef, useEffect, useImperativeHandle, useMemo, } from 'react';
import { Animated, Easing } from 'react-native';
import { DEFAULT_NATIVE_ANIMATE_DURATION, useNativeAnimate } from './use-native-animate';
import { flattenStyle } from './flatten-style';
import { mergeTransforms } from './transform';
export function withNativeAnimate(Component, create = false) {
    const AnimatedComponent = create ? Animated.createAnimatedComponent(Component) : Component;
    return forwardRef(function WithNativeAnimate(props, ref) {
        var _a;
        const { style, nativeAnimate = {}, animateRef } = props, rest = __rest(props, ["style", "nativeAnimate", "animateRef"]);
        const outputs = useMemo(() => Object.keys(nativeAnimate).reduce((acc, key) => {
            if (!'stack auto duration delay loop back backDelay easing onComplete'.includes(key)) {
                acc[key] = nativeAnimate[key];
            }
            return acc;
        }, {}), [nativeAnimate]);
        const shared = useNativeAnimate((_a = nativeAnimate.stack) === null || _a === void 0 ? void 0 : _a[0]);
        const play = () => __awaiter(this, void 0, void 0, function* () {
            const { stack = [], duration = DEFAULT_NATIVE_ANIMATE_DURATION, delay = 0, back, loop, backDelay, easing = Easing.linear, onComplete = () => { }, } = nativeAnimate;
            if (stack.length < 2) {
                return;
            }
            function innerPlay() {
                return __awaiter(this, arguments, void 0, function* (isBack = false) {
                    var _a, _b;
                    const stackValue = isBack ? [...stack.reverse()] : [...stack];
                    const initial = (_a = stackValue.shift()) !== null && _a !== void 0 ? _a : 0;
                    const commonDuration = Array.isArray(duration) ? duration : [duration];
                    shared.value.setValue(shared.fixed(initial));
                    for (let i = 0; i < stackValue.length; i++) {
                        const index = isBack ? stackValue.length - 1 - i : i;
                        const toValue = shared.fixed(stackValue[i]);
                        const nativeDuration = Math.max(0, (_b = commonDuration[index]) !== null && _b !== void 0 ? _b : 0) || DEFAULT_NATIVE_ANIMATE_DURATION;
                        yield shared.timing(toValue, nativeDuration, delay, easing).start();
                    }
                });
            }
            yield innerPlay();
            if (back) {
                yield shared.wait(backDelay);
                yield innerPlay(true);
            }
            yield onComplete();
            loop && play();
        });
        useImperativeHandle(animateRef, () => Object.assign({}, shared, { play }));
        useEffect(() => {
            nativeAnimate.auto && play();
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, []);
        const styles = useMemo(() => {
            var _a;
            const animate = shared.animate(outputs);
            if (typeof style === 'function') {
                return (state) => {
                    var _a;
                    const styled = flattenStyle(style(state));
                    if (!((_a = animate.transform) === null || _a === void 0 ? void 0 : _a.length) || !(styled === null || styled === void 0 ? void 0 : styled.transform) || typeof styled.transform === 'string') {
                        return Object.assign({}, styled, animate);
                    }
                    return Object.assign({}, styled, animate, {
                        transform: mergeTransforms(styled === null || styled === void 0 ? void 0 : styled.transform, animate.transform),
                    });
                };
            }
            const styled = flattenStyle(style);
            if (!((_a = animate.transform) === null || _a === void 0 ? void 0 : _a.length) || !(styled === null || styled === void 0 ? void 0 : styled.transform) || typeof styled.transform === 'string') {
                return Object.assign({}, styled, animate);
            }
            return Object.assign({}, styled, animate, {
                transform: mergeTransforms(styled === null || styled === void 0 ? void 0 : styled.transform, animate.transform),
            });
        }, [shared, style, outputs]);
        return (<AnimatedComponent {...rest} ref={ref} style={styles}/>);
    });
}