react-native-skeleton-component/lib/SkeletonContainerBase.js

A skeleton component for react-native and react-native-web.

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 * as React from "react";
import { Animated } from "react-native";
export const SkeletonContext = React.createContext({
    backgroundColor: "#E1E9EE",
});
export const defaultProps = {
    backgroundColor: "#E1E9EE",
    highlightColor: "#EDF3F7",
    animation: "pulse",
};
export const SkeletonContainer = (_a) => {
    var { animation } = _a, props = __rest(_a, ["animation"]);
    if (animation === "none") {
        return <None {...props}/>;
    }
    else {
        return <Pulse {...props}/>;
    }
};
SkeletonContainer.defaultProps = defaultProps;
export default SkeletonContainer;
// PULSE ANIMATION
const pulseDefaultProps = {
    speed: 500,
};
const Pulse = (props) => {
    const { children, backgroundColor, speed, highlightColor } = props;
    const colorAnimation = React.useRef(new Animated.Value(0)).current;
    const loop = Animated.loop(Animated.sequence([
        Animated.timing(colorAnimation, {
            toValue: 1,
            duration: speed,
            useNativeDriver: false,
        }),
        Animated.timing(colorAnimation, {
            toValue: 0,
            duration: speed,
            useNativeDriver: false,
        }),
    ]));
    React.useEffect(() => {
        loop.start();
        return () => loop.stop();
    }, [colorAnimation, speed]);
    let color;
    if (backgroundColor && highlightColor) {
        color = colorAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [backgroundColor, highlightColor],
        });
    }
    return <SkeletonContext.Provider value={{ backgroundColor: color }}>{children}</SkeletonContext.Provider>;
};
Pulse.defaultProps = pulseDefaultProps;
// NONE ANIMATION
const None = (props) => {
    const { children, backgroundColor } = props;
    return <SkeletonContext.Provider value={{ backgroundColor }}>{children}</SkeletonContext.Provider>;
};
//# sourceMappingURL=SkeletonContainerBase.js.map