@geneui/components
Version:
The Gene UI components library designed for BI tools
252 lines (247 loc) • 9.54 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useRef, useState, useCallback } from 'react';
import { c as classnames } from '../index-031ff73c.js';
import PropTypes from 'prop-types';
import { n as noop } from '../index-a0e4e333.js';
import useKeyDown from '../hooks/useKeyDown.js';
import '../configs-00612ce0.js';
import Button from '../Button/index.js';
import Portal from '../Portal/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../tslib.es6-f211516f.js';
import '../Icon/index.js';
import '../GeneUIProvider/index.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .modal-splash{animation:modal-splash .3s forwards;display:flex;height:calc(100% - var(--header-height, 0px));left:0;opacity:0;overflow-y:auto;padding:2.8rem;position:fixed;top:var(--header-height,0);width:100%;z-index:300}@keyframes modal-splash{to{opacity:1}}[data-gene-ui-version=\"2.16.5\"] .modal-splash.p-top{padding-top:0}[data-gene-ui-version=\"2.16.5\"] .modal-splash.p-bottom{padding-bottom:0}[data-gene-ui-version=\"2.16.5\"] .modal-splash.light-background{background:#fff9}[data-gene-ui-version=\"2.16.5\"] .modal-splash.dark-background{background:#0006}[data-gene-ui-version=\"2.16.5\"] .modal-content{animation:modal-content .4s .1s forwards;background:var(--background);border:1px solid rgba(var(--background-sc-rgb),.1);border-radius:2rem;box-shadow:0 .2rem .4rem 0 #0000001a;display:flex;flex-direction:column;margin:auto;max-width:100%;opacity:0;position:relative}@keyframes modal-content{to{opacity:1}}[data-gene-ui-version=\"2.16.5\"] .modal-content.s-default{width:35rem}[data-gene-ui-version=\"2.16.5\"] .modal-content .modal-close{position:absolute;top:.5rem}html:not([dir=rtl]) .modal-content .modal-close{right:1.6rem}html[dir=rtl] .modal-content .modal-close{left:1.6rem}[data-gene-ui-version=\"2.16.5\"] .modal-splash.p-top .modal-content{align-self:flex-start;border-top-left-radius:0;border-top-right-radius:0;margin:0 auto}[data-gene-ui-version=\"2.16.5\"] .modal-splash.p-bottom .modal-content{align-self:flex-end;border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:0 -.2rem .4rem 0 #0000001a;margin:0 auto}[data-gene-ui-version=\"2.16.5\"] .modal-head{align-items:center;border-bottom:1px solid rgba(var(--background-sc-rgb),.1);display:flex;font:700 1.4rem/1.8rem var(--font-family);justify-content:center;min-height:4rem;padding:0 5.4rem;position:relative;text-align:center;width:100%}[data-gene-ui-version=\"2.16.5\"] .modal-head .modal-close{top:50%;transform:translateY(-50%)}[data-gene-ui-version=\"2.16.5\"] .a-compact .modal-head{border-bottom:0;line-height:1.6rem;margin:2.6rem 0 .6rem;min-height:inherit}[data-gene-ui-version=\"2.16.5\"] .modal-body{color:rgba(var(--background-sc-rgb),.62);font:600 1.2rem/1.42 var(--font-family);padding:2rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .modal-footer{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;justify-content:center;padding:1.5rem 2.5rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .modal-footer>*{margin:0 .5rem}";
styleInject(css_248z);
const sizes = ['default', 'content-size'];
const backgrounds = ['transparent', 'light-background', 'dark-background'];
const appearances = ['default', 'compact'];
const positions = ['center', 'top', 'bottom'];
const KEYBOARD_ENTER_KEY = 13;
const KEYBOARD_ESC_KEY = 27;
function Modal(_ref) {
let {
visible,
size,
background,
appearance,
withPortal,
portalContainer,
customActions,
position,
closable,
cancelText,
okText,
title,
width,
zIndex,
children,
onOK,
onCancel,
footer,
isOkActive,
className,
disableFooter,
needEnter,
closeOnClickOutside,
onClose,
isOkButtonLoading,
...rest
} = _ref;
const modalSplashRef = useRef(null);
const [mouseDown, setMouseDown] = useState(false);
// We need this 2 functions, because must be closed only when
// mouseDown and mouseUp are outside of modal
const handleMouseDown = useCallback(e => e.target === modalSplashRef.current && setMouseDown(true), [modalSplashRef.current]);
const handleMouseUp = useCallback(e => {
if (mouseDown && e.target === modalSplashRef.current) {
closeOnClickOutside && onCancel(e);
setMouseDown(false);
} else if (e.target !== modalSplashRef.current) {
setMouseDown(false);
}
}, [closeOnClickOutside, onCancel, modalSplashRef.current, mouseDown]);
useKeyDown(e => {
if (visible) {
e.keyCode === KEYBOARD_ESC_KEY && onCancel(e);
e.keyCode === KEYBOARD_ENTER_KEY && isOkActive && needEnter && onOK(e);
}
}, [visible, isOkActive, onCancel, onOK], {
current: window
}, ['Escape', 'Enter']);
const Content = /*#__PURE__*/React__default.createElement("div", _extends({
className: classnames('modal-splash', "".concat(background), "a-".concat(appearance), "p-".concat(position), className),
onMouseDown: handleMouseDown,
onMouseUp: handleMouseUp,
style: {
zIndex
},
ref: modalSplashRef
}, rest), /*#__PURE__*/React__default.createElement("div", {
className: classnames('modal-content', "s-".concat(size)),
style: {
width
}
}, closable && !title && /*#__PURE__*/React__default.createElement(Button, {
icon: "bc-icon-close",
size: "medium",
className: "modal-close",
appearance: "minimal",
color: "default",
onClick: onClose || onCancel
}), (title || customActions) && /*#__PURE__*/React__default.createElement("div", {
className: "modal-head"
}, /*#__PURE__*/React__default.createElement("div", {
className: "ellipsis-text"
}, title), closable && /*#__PURE__*/React__default.createElement(Button, {
icon: "bc-icon-close",
size: "medium",
className: "modal-close",
appearance: "minimal",
color: "default",
onClick: onClose || onCancel
}), customActions), children && /*#__PURE__*/React__default.createElement("div", {
className: "modal-body"
}, children), !disableFooter && /*#__PURE__*/React__default.createElement("div", {
className: "modal-footer"
}, footer || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
appearance: "minimal",
size: "medium",
color: "default",
onClick: onCancel
}, cancelText), /*#__PURE__*/React__default.createElement(Button, {
disabled: !isOkActive || isOkButtonLoading,
size: "medium",
onClick: onOK,
loading: isOkButtonLoading
}, okText)))));
const portalWrapper = withPortal ? /*#__PURE__*/React__default.createElement(Portal, {
isOpen: visible,
container: portalContainer
}, Content) : Content;
return visible && portalWrapper;
}
Modal.propTypes = {
/**
* Displays modal if [true]
*/
visible: PropTypes.bool,
/**
* Controls modal size
*/
size: PropTypes.oneOf(sizes),
/**
* Controls background color of modal
*/
background: PropTypes.oneOf(backgrounds),
/**
* Controls divider between modal's header and body
*/
appearance: PropTypes.oneOf(appearances),
/**
* Controls modal position on screen
*/
position: PropTypes.oneOf(positions),
/**
* Displays close button on modal,
* Fires onCancel function when clicked
*/
closable: PropTypes.bool,
/**
* Disables footer in modal
*/
disableFooter: PropTypes.bool,
/**
* Enables footers Ok button in modal
*/
isOkActive: PropTypes.bool,
/**
* Custom text for cancel button
*/
cancelText: PropTypes.string,
/**
* Custom text for ok button
*/
okText: PropTypes.string,
/**
* Custom title for modal
*/
title: PropTypes.any,
/**
* Wraps component with Portal component if [true]
*/
withPortal: PropTypes.bool,
portalContainer: PropTypes.any,
/**
* Custom value to override default css value
*/
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* Custom zIndex value to overRide default css value
*/
zIndex: PropTypes.number,
/**
* Valid React elements for modal body
*/
children: PropTypes.node,
/**
* Additional classname
*/
className: PropTypes.string,
/**
* Fires event when user clicks on ok button
* (event: Event) => void
*/
onOK: PropTypes.func,
/**
* Fires event when user clicks on Cancel button
* (event: Event) => void
*/
onCancel: PropTypes.func,
/**
* Custom footer element for modal
*/
footer: PropTypes.element,
/**
* Pass [true] if you need to hide a modal when people click outside of it's content
*/
closeOnClickOutside: PropTypes.bool,
/**
* Custom action elements for modal's header
*/
customActions: PropTypes.node,
/**
* Enable keyboard Enter
*/
needEnter: PropTypes.bool,
/**
* Fires event when user clicks on Close icon
* (event: Event) => void
*/
onClose: PropTypes.func,
/**
* Loader for ok button
*/
isOkButtonLoading: PropTypes.bool
};
Modal.defaultProps = {
visible: false,
size: sizes[0],
onOK: noop,
onCancel: noop,
background: backgrounds[2],
appearance: appearances[0],
position: positions[0],
closable: true,
cancelText: 'Cancel',
okText: 'OK',
closeOnClickOutside: true,
isOkActive: true,
disableFooter: false,
needEnter: true,
isOkButtonLoading: false
};
export { Modal as default };