@git-temporal/git-temporal-react/lib/app/components/ExplodeOnChange.js

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styles_1 = require("app/styles");
const outerStyle = {
    display: 'inline-block',
    transition: 'all 1s ease',
};
const DEFAULT_SCALE = 1.8;
const HANG_TIME = 900;
class ExplodeOnChange extends react_1.default.Component {
    constructor() {
        super(...arguments);
        this.state = {
            isExploding: false,
        };
    }
    componentDidMount() {
        if (this.props.initialExplosion) {
            setTimeout(() => {
                this.explode();
            }, 100);
        }
    }
    componentDidUpdate(newProps) {
        if (newProps.value !== this.props.value) {
            this.explode();
        }
    }
    render() {
        const { scale = DEFAULT_SCALE } = this.props;
        const addStyle = this.state.isExploding
            ? { transform: `scale(${scale}, ${scale})` }
            : null;
        return (react_1.default.createElement("div", { style: styles_1.style(outerStyle, this.props.style, addStyle) }, this.props.children));
    }
    explode() {
        this.setState({ isExploding: true });
        setTimeout(() => {
            this.setState({ isExploding: false });
        }, HANG_TIME);
    }
}
exports.ExplodeOnChange = ExplodeOnChange;