smart-react-components/modal/index.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 index = require('../index-6d498b59.js');
require('../DOMHelper-c0bd5a29.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
require('../index-56ba89df.js');
var Div = require('../element/Div.js');
require('react-dom');
require('../Transition-48c5648c.js');
var CSSTransition = require('../CSSTransition-5a3ab124.js');
var Overlay = require('../Overlay-95b8c50b.js');

var ModalElement = styled__default(Div)(({ theme }) => `
    display: flex;
    flex-direction: column;
    min-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    border: solid 1px ${theme.src.modal.borderColor};
    border-radius: ${theme.src.modal.borderRadius};
    background: ${theme.src.modal.backgroundColor};
    color: ${theme.src.modal.fontColor};
    font-family: ${theme.src.fontFamily.modal};
`);

const Modal = ({ children, overlayClick = true, overlayProps = index.DV.JSX_ELEMENT_PROPS, modalElementProps = index.DV.JSX_ELEMENT_PROPS, size = "default", centered, minWidth, maxWidth, status = true, setStatus, transitionClassName = "src-overlay-modal-down", transitionType, transitionDuration = 300, showAnimation = true, hideAnimation = true, beforeOpen, afterOpen, beforeClose, afterClose }) => {
    const theme = React__default.useContext(styled.ThemeContext).src;
    const overlayEl = React__default.useRef(null);
    const clickOverlay = (e) => {
        if (overlayClick && setStatus && e.target == overlayEl.current)
            setStatus(false);
    };
    return (React__default.createElement(CSSTransition.CSSTransition, { status: status, className: transitionClassName, type: transitionType, duration: transitionDuration, showAnimation: showAnimation, hideAnimation: hideAnimation, beforeShow: beforeOpen, afterShow: afterOpen, beforeHide: beforeClose, afterHide: afterClose },
        React__default.createElement(Overlay.Overlay, Object.assign({}, overlayProps, { elementProps: Object.assign(Object.assign({}, overlayProps.elementProps), { onMouseUp: clickOverlay, onTouchEnd: clickOverlay }), ref: overlayEl }),
            React__default.createElement(ModalElement, Object.assign({ alignSelf: centered ? "center" : "flex-start" }, modalElementProps, { minWidthMd: minWidth || theme.modal.width[size], maxWidth: maxWidth || theme.modal.width[size] }), children))));
};

module.exports = Modal;