@figliolia/rn-donut-chart/dist/cjs/Section/index.js

An animated donut/pie chart library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Section = void 0;
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_svg_1 = require("react-native-svg");
const Controller_1 = require("./Controller");
const Styles_1 = require("./Styles");
const AnimatedSVG = react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Svg);
const AnimatedCircle = react_native_1.Animated.createAnimatedComponent(react_native_svg_1.Circle);
class Section extends react_1.Component {
    constructor() {
        super(...arguments);
        this.draw = new react_native_1.Animated.Value(0);
        this.rotate = new react_native_1.Animated.Value(0);
        this.opacity = new react_native_1.Animated.Value(0);
        this.state = Controller_1.Controller.stateFrom(this.props);
    }
    componentDidMount() {
        this.animate();
    }
    shouldComponentUpdate(nextProps) {
        if (nextProps.value !== this.props.value) {
            this.incrementInterpolations(nextProps);
            return false;
        }
        return true;
    }
    animate() {
        const { easing } = this.props;
        const { drawInterpolation, rotateInterpolation } = this.state;
        const [delay, duration] = this.delay();
        react_native_1.Animated.parallel([
            react_native_1.Animated.timing(this.opacity, {
                delay,
                toValue: 1,
                duration: 250,
                useNativeDriver: true,
            }),
            react_native_1.Animated.timing(this.draw, {
                delay,
                easing,
                duration,
                useNativeDriver: true,
                toValue: drawInterpolation.toValue,
            }),
            react_native_1.Animated.timing(this.rotate, {
                delay,
                easing,
                duration,
                useNativeDriver: true,
                toValue: rotateInterpolation.toValue,
            }),
        ]).start();
    }
    delay() {
        const { duration } = this.props;
        if (this.isPhaseUpdate) {
            const updateDuration = duration / 2;
            return [updateDuration + 100, updateDuration];
        }
        return [this.phaseDelay, duration];
    }
    incrementInterpolations(props) {
        const { drawInterpolation, rotateInterpolation } = this.state;
        const nextDraw = drawInterpolation.add(Controller_1.Controller.strokeDashoffset(props));
        const nextRotation = rotateInterpolation.add(`${props.rotation || 0}deg`);
        this.setState({
            drawInterpolation: nextDraw,
            rotateInterpolation: nextRotation,
        }, () => {
            this.animate();
        });
    }
    get phaseDelay() {
        const { renderPhase, delay = 0 } = this.props;
        return renderPhase === "INITIAL" ? delay : 0;
    }
    get isPhaseUpdate() {
        const { renderPhase } = this.props;
        const { drawInterpolation } = this.state;
        return (renderPhase === "UPDATE" && drawInterpolation.inputRange.length === 2);
    }
    render() {
        const { size, style, radius, center, stroke, children, strokeWidth, strokeLinecap, circumference, } = this.props;
        const { drawInterpolation, rotateInterpolation } = this.state;
        return (<AnimatedSVG width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={[
                Styles_1.Styles.svg,
                {
                    transform: [
                        {
                            rotateZ: this.rotate.interpolate(rotateInterpolation),
                        },
                    ],
                },
                style,
            ]}>
        <AnimatedCircle r={radius} cx={center} cy={center} stroke={stroke} originX={center} originY={center} fill="transparent" strokeWidth={strokeWidth} strokeLinecap={strokeLinecap} strokeDasharray={circumference} strokeDashoffset={this.draw.interpolate(drawInterpolation)} opacity={this.opacity.interpolate(Controller_1.Controller.opacityInterpolation)}/>
        {children}
      </AnimatedSVG>);
    }
}
exports.Section = Section;