smart-react-components/Transition-48c5648c.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var reactDom = require('react-dom');

class Transition extends React__default.Component {
    constructor(props) {
        super(props);
        this.processing = false;
        /**
         * Sets display state.
         *
         * @param props
         * @param state
         */
        this.setDisplay = (props, state) => {
            this.status = props.status;
            if (!this.processing && props.status != state.display) {
                if (props.status)
                    this.setState({
                        display: true
                    });
                else
                    props.beforeHide().then(() => this.hide());
            }
        };
        /**
         * Shows the element.
         */
        this.show = () => {
            const el = reactDom.findDOMNode(this);
            if (!el)
                return;
            if (this.props.display) {
                const style = el.getAttribute("style");
                if (style)
                    el.setAttribute("style", style.replace(/display[^;]+;?/g, ""));
            }
            this.processing = true;
            this.props.show(el)
                .then(() => {
                this.processing = false;
                this.props.afterShow();
                if (!this.status)
                    this.props.beforeHide().then(() => this.hide());
            });
        };
        /**
         * Hides the element.
         */
        this.hide = () => {
            const el = reactDom.findDOMNode(this);
            if (!el)
                return;
            this.processing = true;
            this.props.hide(el)
                .then(() => {
                if (this.props.display) {
                    const style = el.getAttribute("style");
                    el.setAttribute("style", `display:none !important; ${style || ""}`);
                }
                this.processing = false;
                this.setState({
                    display: false
                });
            });
        };
        this.state = {
            display: this.props.status
        };
        this.status = this.props.status;
    }
    componentDidMount() {
        this.setDisplay(this.props, this.state);
        if (this.props.display) {
            const el = reactDom.findDOMNode(this);
            if (el) {
                const style = el.getAttribute("style");
                el.setAttribute("style", `display:none !important; ${style || ""}`);
            }
        }
    }
    componentDidUpdate(op, os) {
        const np = this.props;
        const ns = this.state;
        if (np.status != op.status)
            this.setDisplay(np, ns);
        if (ns.display != os.display) {
            if (!ns.display)
                np.afterHide();
            if (ns.display)
                np.beforeShow().then(() => this.show());
            else if (np.status)
                this.setState({
                    display: true
                });
        }
    }
    render() {
        return (this.state.display || this.props.display) ? this.props.children : null;
    }
}
Transition.defaultProps = {
    beforeShow: () => Promise.resolve(),
    beforeHide: () => Promise.resolve(),
    show: () => Promise.resolve(),
    hide: () => Promise.resolve(),
    afterShow: () => { },
    afterHide: () => { }
};

exports.Transition = Transition;