@geneui/components
Version:
The Gene UI components library designed for BI tools
191 lines (187 loc) • 10.6 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useState, useMemo, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { e as positions } from '../configs-00612ce0.js';
import { n as noop } from '../index-a0e4e333.js';
import useKeyDown from '../hooks/useKeyDown.js';
import useClickOutside from '../hooks/useClickOutside.js';
import CustomScrollbar from '../Scrollbar/index.js';
import Button from '../Button/index.js';
import Divider from '../Divider/index.js';
import ModuleTitle from '../ModuleTitle/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 '../index-6d7e99cd.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../GeneUIProvider/index.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .overlay-back-drop{animation:fadeIn 1s forwards;background:rgba(var(--background-rgb),.6);height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:299}@keyframes fadeIn{to{opacity:1}}[data-gene-ui-version=\"2.16.5\"] .overlay-holder{display:flex;flex-direction:column;position:fixed;transition:width .4s,height .4s;z-index:300}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-horizontal{animation:slideInX .4s linear forwards;background:var(--background);bottom:0;top:var(--header-height,0)}@keyframes slideInX{to{transform:translateX(0)}}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-horizontal.p-left{box-shadow:.5rem 0 .6rem 0 #0000000d;transform:translateX(-120%)}html:not([dir=rtl]) .overlay-holder.t-horizontal.p-left{left:0}html[dir=rtl] .overlay-holder.t-horizontal.p-left{box-shadow:-.5rem 0 .6rem 0 #0000000d;right:0;transform:translateX(120%)}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-horizontal.p-left .overlay-close{border-radius:0 .4rem .4rem 0;box-shadow:.5rem 0 .6rem 0 #0000000d}html:not([dir=rtl]) .overlay-holder.t-horizontal.p-left .overlay-close{left:100%}html[dir=rtl] .overlay-holder.t-horizontal.p-left .overlay-close{border-radius:.4rem 0 0 .4rem;box-shadow:-.5rem 0 .6rem 0 #0000000d;right:100%}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-horizontal.p-right{box-shadow:-.5rem 0 .6rem 0 #0000000d;transform:translateX(120%)}html:not([dir=rtl]) .overlay-holder.t-horizontal.p-right{right:0}html[dir=rtl] .overlay-holder.t-horizontal.p-right{box-shadow:.5rem 0 .6rem 0 #0000000d;left:0;transform:translateX(-120%)}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-horizontal.p-right .overlay-close{border-radius:.4rem 0 0 .4rem;box-shadow:-.5rem 0 .6rem 0 #0000000d}html:not([dir=rtl]) .overlay-holder.t-horizontal.p-right .overlay-close{right:100%}html[dir=rtl] .overlay-holder.t-horizontal.p-right .overlay-close{border-radius:0 .4rem .4rem 0;box-shadow:.5rem 0 .6rem 0 #0000000d;left:100%}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-horizontal.s-half{width:50%}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-horizontal.s-wide{width:75%}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-horizontal.s-minimal{width:30rem}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-vertical{animation:slideInY .4s linear forwards;background:var(--background);height:25vh;left:0;width:100%}@keyframes slideInY{to{transform:translateY(0)}}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-vertical.s-extended{height:50vh}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-vertical.p-top{border-radius:0 0 2rem 2rem;box-shadow:0 .3rem .6rem 0 #0000000d;top:0;transform:translateY(-120%)}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-vertical.p-top .extend-reduce{box-shadow:0 .3rem .6rem 0 #0000000d;top:100%;transform:translate(-50%,-50%)}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-vertical.p-bottom{border-radius:2rem 2rem 0 0;bottom:0;box-shadow:0 -.3rem .6rem 0 #0000000d;flex-direction:column-reverse;transform:translateY(120%)}[data-gene-ui-version=\"2.16.5\"] .overlay-holder.t-vertical.p-bottom .extend-reduce{bottom:100%;box-shadow:0 -.3rem .6rem 0 #0000000d;transform:translate(-50%,50%)}[data-gene-ui-version=\"2.16.5\"] .overlay-head{flex-shrink:0;position:relative;z-index:1}[data-gene-ui-version=\"2.16.5\"] .overlay-close{align-items:center;background:var(--background);display:flex;height:6rem;justify-content:center;position:absolute;top:0;width:6rem}[data-gene-ui-version=\"2.16.5\"] .overlay-body{display:flex;flex:auto;flex-direction:column;position:relative}[data-gene-ui-version=\"2.16.5\"] .overlay-body>.scroll-holder{height:100%;left:0;position:absolute!important;top:0;width:100%}[data-gene-ui-version=\"2.16.5\"] .overlay-body>.scroll-holder>.scroll-content{align-items:stretch;display:flex;flex-direction:column;justify-content:flex-start}[data-gene-ui-version=\"2.16.5\"] .overlay-body .overlay-content{flex:auto;padding:2.1rem 1.9rem}[data-gene-ui-version=\"2.16.5\"] .overlay-body .overlay-footer{display:flex;flex-shrink:0;justify-content:flex-end}[data-gene-ui-version=\"2.16.5\"] .overlay-body .overlay-footer>*{margin:1rem}[data-gene-ui-version=\"2.16.5\"] .extend-reduce{background:var(--background);border-radius:3.6rem;color:var(--hero);cursor:pointer;font:600 1.4rem/1.8rem var(--font-family);height:3.6rem;left:50%;min-width:14rem;padding:0 2rem;position:absolute;text-align:center;transition:color .3s,background .3s}[data-gene-ui-version=\"2.16.5\"] .extend-reduce:hover{background:var(--hero);color:var(--hero-sc)}";
styleInject(css_248z);
const horizontalSizes = ['half', 'wide', 'minimal'];
function Overlay(_ref) {
let {
position,
title,
description,
horizontalSize,
headerActions,
footer,
children,
onClose,
onClickOutside,
className,
closeText,
reduceText,
extendText,
withBackDrop,
onToggle,
isExtended,
...restProps
} = _ref;
const setRef = useClickOutside(onClickOutside);
const [extended, setExtended] = useState(!!isExtended);
const isControlled = useMemo(() => typeof isExtended === 'boolean', [isExtended]);
const isVertical = useMemo(() => position === 'top' || position === 'bottom', [position]);
const toggleExtended = useCallback(() => setExtended(prev => !prev), []);
const handleToggle = useCallback(event => {
isControlled ? onToggle(event, extended) : toggleExtended();
}, [onToggle, extended]);
useKeyDown(e => onClose(e), [], {
current: window
}, ['Escape']);
useEffect(() => {
setExtended(isExtended);
}, [isExtended]);
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({
className: classnames(className, 'overlay-holder', "p-".concat(position), {
't-vertical': isVertical,
't-horizontal': !isVertical,
's-extended': isVertical && extended,
["s-".concat(horizontalSize)]: !isVertical
})
}, restProps, {
ref: setRef
}), /*#__PURE__*/React__default.createElement("div", {
className: "overlay-head"
}, /*#__PURE__*/React__default.createElement(ModuleTitle, {
size: "extra-big",
title: title,
description: description,
position: isVertical ? position : 'top',
cornerRadius: isVertical ? 'position-radius' : 'no-radius'
}, headerActions, isVertical && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Divider, {
type: "vertical"
}), /*#__PURE__*/React__default.createElement(Button, {
onClick: onClose,
appearance: "minimal"
}, closeText))), !isVertical && /*#__PURE__*/React__default.createElement("div", {
className: "overlay-close"
}, /*#__PURE__*/React__default.createElement(Button, {
onClick: onClose,
icon: "bc-icon-close",
appearance: "minimal",
color: "default"
}))), /*#__PURE__*/React__default.createElement("div", {
className: "overlay-body"
}, /*#__PURE__*/React__default.createElement(CustomScrollbar, null, /*#__PURE__*/React__default.createElement("div", {
className: "overlay-content"
}, children), isVertical && /*#__PURE__*/React__default.createElement("div", {
className: "overlay-footer"
}, footer)), isVertical && /*#__PURE__*/React__default.createElement("button", {
onClick: handleToggle,
className: "extend-reduce"
}, extended ? reduceText : extendText))), withBackDrop && /*#__PURE__*/React__default.createElement("div", {
className: "overlay-back-drop"
}));
}
Overlay.propTypes = {
/**
* Controls position of the element
*/
position: PropTypes.oneOf(positions),
/**
* Title for element
*/
title: PropTypes.string,
/**
* Description text for element
*/
description: PropTypes.string,
/**
* Controls size of the element
*/
horizontalSize: PropTypes.oneOf(horizontalSizes),
/**
* Header action bar,
* React valid elements
*/
headerActions: PropTypes.node,
/**
* Overlay footer
* React valid elements
*/
footer: PropTypes.node,
/**
* Overlay content
* Valid React elements
*/
children: PropTypes.node,
/**
* Fires event when user click on close button
* (event: Event) => void
*/
onClose: PropTypes.func,
/**
* CSS class for element
*/
className: PropTypes.string,
/**
* Custom text for close button
*/
closeText: PropTypes.string,
/**
* Custom text for reduce button
*/
reduceText: PropTypes.string,
/**
* Custom text for extend button
*/
extendText: PropTypes.string,
/**
* Fires event when user click on outside of content
* (event: Event) => void
*/
onClickOutside: PropTypes.func,
/**
* Adds a white layer on the background when Overlay opens
*/
withBackDrop: PropTypes.bool,
/**
* with onToggle prop you wash the event listener pressing the open and close button
* (event: Event, extend: Boolean) => void
*/
onToggle: PropTypes.func,
/**
* using isExtended props you can control the opening of the component
* if you add this prop then the component becomes controlled from outside
*/
isExtended: PropTypes.bool
};
Overlay.defaultProps = {
position: positions[2],
horizontalSize: horizontalSizes[0],
closeText: 'Close',
reduceText: 'Reduce',
onClickOutside: noop,
extendText: 'Extend',
onClose: noop,
onToggle: noop,
withBackDrop: false
};
export { Overlay as default };