@flexis/ui/components/Modal/Modal.babel.js

Styleless React Components

import { __decorate } from "tslib";
import React, { PureComponent, cloneElement } from 'react';
import { createPortal } from 'react-dom';
import PropTypes from 'prop-types';
import { Bind, subscribeEvent } from '../../helpers';
import toggleScrollBlock from '../common/toggleScrollBlock';
import toggleAriaHide from '../common/toggleAriaHide';
import StylableTransition from '../StylableTransition';
import { style, classes, cssStates } from './Modal.st.css';
const ESC_KEY = 27;
const defaultCloseButton = (<button type='button'>
		&times;
	</button>);
let appElement = null;
export function setAppElement(appElementSource) {
    appElement = typeof appElementSource === 'string'
        ? (typeof document === 'undefined'
            ? null
            : document.querySelector(appElementSource))
        : appElementSource;
}
let Modal = /** @class */ (() => {
    class Modal extends PureComponent {
        constructor() {
            super(...arguments);
            this.unblockScroll = null;
            this.unsubscribeKeyDown = null;
            this.ariaShow = null;
        }
        render() {
            const { className, onClose, active, centered, closeButton, children, transitionDuration, ...props } = this.props;
            Reflect.deleteProperty(props, 'wrapContent');
            return createPortal((<StylableTransition in={active} states={cssStates} timeout={transitionDuration} appear unmountOnExit>
				<div className={style(classes.root, className)} onClick={onClose}>
					<div role='dialog' aria-modal {...props} className={style(classes.window, {
                centered
            })} onClick={this.onIgnoredEvent}>
						{this.wrapContent(<>
								{closeButton && cloneElement(closeButton, {
                className: style(classes.closeButton, closeButton.props.className),
                onClick: onClose
            })}
								{children}
							</>)}
					</div>
				</div>
			</StylableTransition>), document.body);
        }
        wrapContent(content) {
            const { wrapContent } = this.props;
            if (typeof wrapContent === 'function') {
                return wrapContent(content);
            }
            return content;
        }
        componentDidMount() {
            this.toggleEffects();
        }
        componentWillUnmount() {
            this.removeEffects();
        }
        componentDidUpdate({ active: prevActive }) {
            const { active } = this.props;
            if (prevActive !== active) {
                this.toggleEffects();
            }
        }
        onIgnoredEvent(event) {
            event.stopPropagation();
        }
        onEscPress(event) {
            const { onClose } = this.props;
            if (event.keyCode === ESC_KEY
                && typeof onClose === 'function') {
                event.stopPropagation();
                onClose(event);
            }
        }
        toggleEffects() {
            const { active } = this.props;
            this.unblockScroll = toggleScrollBlock(active, this.unblockScroll);
            if (appElement) {
                this.ariaShow = toggleAriaHide(active, this.ariaShow, appElement);
            }
            const keyDownSubscribed = typeof this.unsubscribeKeyDown === 'function';
            if (active) {
                if (!keyDownSubscribed) {
                    this.unsubscribeKeyDown = subscribeEvent(document, 'keydown', this.onEscPress);
                }
            }
            else if (keyDownSubscribed) {
                this.unsubscribeKeyDown();
                this.unsubscribeKeyDown = null;
            }
        }
        removeEffects() {
            if (typeof this.unblockScroll === 'function') {
                this.unblockScroll();
                this.unblockScroll = null;
            }
            if (typeof this.ariaShow === 'function') {
                this.ariaShow();
                this.ariaShow = null;
            }
            if (typeof this.unsubscribeKeyDown === 'function') {
                this.unsubscribeKeyDown();
                this.unsubscribeKeyDown = null;
            }
        }
    }
    Modal.propTypes = {
        onClose: PropTypes.func,
        active: PropTypes.bool,
        centered: PropTypes.bool,
        closeButton: PropTypes.element,
        children: PropTypes.node.isRequired,
        transitionDuration: PropTypes.number,
        wrapContent: PropTypes.func
    };
    Modal.defaultProps = {
        active: false,
        centered: false,
        closeButton: defaultCloseButton,
        transitionDuration: 0
    };
    __decorate([
        Bind()
    ], Modal.prototype, "onEscPress", null);
    return Modal;
})();
export default Modal;
if (typeof document === 'undefined') {
    Modal.prototype.render = () => null;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanN4Iiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTW9kYWwvTW9kYWwudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQU1iLGFBQWEsRUFDYixZQUFZLEVBQ1osTUFBTSxPQUFPLENBQUM7QUFDZixPQUFPLEVBQ04sWUFBWSxFQUNaLE1BQU0sV0FBVyxDQUFDO0FBQ25CLE9BQU8sU0FBUyxNQUFNLFlBQVksQ0FBQztBQUNuQyxPQUFPLEVBRU4sSUFBSSxFQUNKLGNBQWMsRUFDZCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLGlCQUFpQixNQUFNLDZCQUE2QixDQUFDO0FBQzVELE9BQU8sY0FBYyxNQUFNLDBCQUEwQixDQUFDO0FBQ3RELE9BQU8sa0JBQWtCLE1BQU0sdUJBQXVCLENBQUM7QUFDdkQsT0FBTyxFQUNOLEtBQUssRUFDTCxPQUFPLEVBQ1AsU0FBUyxFQUNULE1BQU0sZ0JBQWdCLENBQUM7QUFpQnhCLE1BQU0sT0FBTyxHQUFHLEVBQUUsQ0FBQztBQUVuQixNQUFNLGtCQUFrQixHQUFHLENBQzFCLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQ3BCOztDQUNELEVBQUUsTUFBTSxDQUFDLENBQ1QsQ0FBQztBQUVGLElBQUksVUFBVSxHQUFHLElBQUksQ0FBQztBQUV0QixNQUFNLFVBQVUsYUFBYSxDQUFDLGdCQUFnQjtJQUM3QyxVQUFVLEdBQUcsT0FBTyxnQkFBZ0IsS0FBSyxRQUFRO1FBQ2hELENBQUMsQ0FBQyxDQUFDLE9BQU8sUUFBUSxLQUFLLFdBQVc7WUFDakMsQ0FBQyxDQUFDLElBQUk7WUFDTixDQUFDLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQzVDLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQztBQUNyQixDQUFDO0FBRUQ7SUFBQSxNQUFxQixLQUFNLFNBQVEsYUFBcUI7UUFBeEQ7O1lBbUJT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