@kedao/editor/lib/components/common/Modal/index.js

Rich Text Editor Based On Draft.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BaseUtils } from '@kedao/utils';
import mergeClassNames from 'merge-class-names';
import './style.scss';
export const showModal = (props) => {
    const hostNode = document.createElement('div');
    const newProps = Object.assign({ visible: true, closeOnConfirm: true, closeOnCancel: true }, props);
    hostNode.style.display = 'none';
    document.body.appendChild(hostNode);
    const close = () => {
        if (ReactDOM.unmountComponentAtNode(hostNode)) {
            hostNode.parentNode.removeChild(hostNode);
        }
    };
    const onConfirm = () => {
        if (newProps.onConfirm) {
            newProps.onConfirm();
        }
    };
    const onCancel = () => {
        if (newProps.onCancel) {
            newProps.onCancel();
        }
    };
    const onClose = () => {
        close();
        if (newProps.onClose) {
            newProps.onClose();
        }
    };
    // eslint-disable-next-line react/no-render-return-value
    const modalInstance = ReactDOM.render(React.createElement(Modal, Object.assign({}, newProps, { onConfirm: onConfirm, onCancel: onCancel, onClose: onClose })), hostNode);
    modalInstance.destroy = close;
    modalInstance.update = modalInstance.renderComponent;
    return modalInstance;
};
class Modal extends React.Component {
    constructor(props) {
        super(props);
        this.handleTransitionEnd = () => {
            if (!this.rootElement || !this.rootElement.classList) {
                return false;
            }
            if (!this.rootElement.classList.contains('active')) {
                if (ReactDOM.unmountComponentAtNode(this.rootElement)) {
                    this.rootElement.parentNode.removeChild(this.rootElement);
                }
            }
            return true;
        };
        this.handleMouseDown = (event) => {
            const tagName = event.target.tagName.toLowerCase();
            if (tagName === 'input' || tagName === 'textarea') {
                return false;
            }
            event.preventDefault();
            return true;
        };
        this.handleCancel = () => {
            if (this.props.closeOnCancel) {
                this.close();
            }
            if (this.props.onCancel) {
                this.props.onCancel();
            }
        };
        this.handleConfirm = () => {
            if (this.props.closeOnConfirm) {
                this.close();
            }
            if (this.props.onConfirm) {
                this.props.onConfirm();
            }
        };
        this.handleMaskClick = () => {
            if (this.props.closeOnBlur) {
                this.close();
            }
            if (this.props.onBlue) {
                this.props.onBlue();
            }
        };
        this.close = () => {
            this.unrenderComponent();
            if (this.props.onClose) {
                this.props.onClose();
            }
        };
        this.active = false;
        // eslint-disable-next-line new-cap
        this.componentId = `KEDAO-MODAL-${BaseUtils.UniqueIndex()}`;
    }
    componentDidMount() {
        if (this.props.visible) {
            this.active = true;
            this.renderComponent(this.props);
        }
    }
    // eslint-disable-next-line camelcase
    UNSAFE_componentWillReceiveProps(next) {
        if (this.props.visible && !next.visible) {
            this.unrenderComponent();
        }
        else if (this.props.visible || next.visible) {
            this.active = true;
            this.renderComponent(next);
        }
    }
    unrenderComponent() {
        var _a;
        this.active = false;
        if (this.activeId) {
            window.clearImmediate(this.activeId);
        }
        if ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.classList) {
            this.rootElement.classList.remove('active');
        }
    }
    renderComponent(props) {
        if (!this.active) {
            return false;
        }
        const { title, className, width, height, children, component, confirmable, showFooter, showCancel, showConfirm, showClose, cancelText, confirmText, bottomText, language } = props;
        const childComponent = (React.createElement("div", { role: "presentation", onMouseDown: this.handleMouseDown, className: `bf-modal ${className || ''}` },
            React.createElement("div", { role: "presentation", className: "bf-modal-mask", onClick: this.handleMaskClick }),
            React.createElement("div", { onTransitionEnd: this.handleTransitionEnd, style: { width, height }, className: "bf-modal-content" },
                React.createElement("div", { className: "bf-modal-header" },
                    React.createElement("h3", { className: "bf-modal-caption" }, title),
                    showClose && (React.createElement("button", { type: "button", onClick: this.close, className: "bf-modal-close-button" },
                        React.createElement("i", { className: "bfi-close" })))),
                React.createElement("div", { className: "bf-modal-body" }, children || component),
                showFooter
                    ? (React.createElement("div", { className: "bf-modal-footer" },
                        React.createElement("div", { className: "bf-modal-addon-text" }, bottomText),
                        React.createElement("div", { className: "bf-modal-buttons" },
                            showCancel && (React.createElement("button", { type: "button", onClick: this.handleCancel, className: "bf-modal-cancel" }, cancelText || language.base.cancel)),
                            showConfirm && (React.createElement("button", { type: "button", onClick: this.handleConfirm, className: mergeClassNames('bf-modal-confirm', !confirmable && 'disabled') }, confirmText || language.base.confirm)))))
                    : null)));
        this.rootElement = document.querySelector(`#${this.componentId}`);
        if (!this.rootElement) {
            this.rootElement = document.createElement('div');
            this.rootElement.id = this.componentId;
            this.rootElement.className = 'bf-modal-root';
            document.body.appendChild(this.rootElement);
        }
        ReactDOM.render(childComponent, this.rootElement);
        this.activeId = window.setImmediate(() => {
            this.rootElement.classList.add('active');
        });
        return true;
    }
    render() {
        return null;
    }
}
Modal.defaultProps = {
    closeOnBlur: true,
    showCancel: true,
    showClose: true,
    showConfirm: true,
    showFooter: true
};
export default Modal;
//# sourceMappingURL=index.js.map