@geneui/components
Version:
The Gene UI components library designed for BI tools
265 lines (260 loc) • 11.9 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { n as noop } from '../index-a0e4e333.js';
import { p as popoverV2Config } from '../configs-00612ce0.js';
import Icon from '../Icon/index.js';
import Button from '../Button/index.js';
import Portal from '../Portal/index.js';
import CustomScrollbar from '../Scrollbar/index.js';
import ModuleTitle from '../ModuleTitle/index.js';
import { T as Tooltip } from '../index-6d7e99cd.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 '../GeneUIProvider/index.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .holder{--delay:200ms;--width:1.9rem;--opened-width:39.9rem;background:var(--background);height:100%;position:relative;top:0;transition:width .4s var(--delay);width:var(--width);z-index:200}[data-gene-ui-version=\"2.16.5\"] .holder.disabled{pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .holder.disabled .holder-toggle .icon{opacity:.5}[data-gene-ui-version=\"2.16.5\"] .holder.pinned{--width:var(--opened-width);--delay:0ms}[data-gene-ui-version=\"2.16.5\"] .holder.pinned.opened .layer-1{transform:scale(1)}[data-gene-ui-version=\"2.16.5\"] .holder.opened{--delay:400ms}[data-gene-ui-version=\"2.16.5\"] .holder.opened .holder-wrapper{opacity:1;width:var(--opened-width)}[data-gene-ui-version=\"2.16.5\"] .holder:not(.pinned).opened .layer-3,[data-gene-ui-version=\"2.16.5\"] .holder:not(.pinned):not(.opened) .layer-2{transform:scale(1)}[data-gene-ui-version=\"2.16.5\"] .holder-c-wrapper{background:var(--background);height:100%;min-width:100%;position:absolute;top:0}[data-gene-ui-version=\"2.16.5\"] .holder-toggle{padding:.5rem;position:absolute;top:1rem}[data-gene-ui-version=\"2.16.5\"] .holder-toggle button{background:var(--background);border-radius:100%;box-shadow:0 0 .2rem rgba(var(--background-sc-rgb),.16);color:var(--hero);cursor:pointer;height:3rem;position:relative;transition:color .25s,background .25s;width:3rem}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .holder-toggle button:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.5\"] .holder-toggle button.active{background:var(--hero);color:var(--hero-sc)}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .holder-toggle button.active:hover{background:var(--hero-hover)}}[data-gene-ui-version=\"2.16.5\"] .holder-toggle .icon{left:0;padding:.3rem;position:absolute;top:0;transform:scale(0);transition:transform .4s,opacity .4s}[data-gene-ui-version=\"2.16.5\"] .holder-wrapper{height:100%;opacity:0;overflow:hidden;position:relative;transition:opacity .15s var(--delay),width .4s var(--delay);width:var(--width)}html:not([dir=rtl]) .holder-left{left:0}html[dir=rtl] .holder-left{right:0}[data-gene-ui-version=\"2.16.5\"] .holder-left .holder-c-wrapper{border-inline-end:1px solid rgba(var(--background-sc-rgb),.1)}html:not([dir=rtl]) .holder-left .holder-c-wrapper{left:0}html[dir=rtl] .holder-left .holder-c-wrapper{right:0}html:not([dir=rtl]) .holder-left .module-header{padding-right:1.5rem}html[dir=rtl] .holder-left .module-header{padding-left:1.5rem}html:not([dir=rtl]) .holder-left .holder-toggle{right:-2rem}html[dir=rtl] .holder-left .holder-toggle{left:-2rem}html:not([dir=rtl]) .holder-right{right:0}html[dir=rtl] .holder-right{left:0}[data-gene-ui-version=\"2.16.5\"] .holder-right .holder-c-wrapper{border-inline-start:1px solid rgba(var(--background-sc-rgb),.1)}html:not([dir=rtl]) .holder-right .holder-c-wrapper{right:0}html[dir=rtl] .holder-right .holder-c-wrapper{left:0}html:not([dir=rtl]) .holder-right .holder-toggle{left:-2rem}html[dir=rtl] .holder-right .holder-toggle{right:-2rem}[data-gene-ui-version=\"2.16.5\"] .opened .holder-content{width:var(--opened-width)}[data-gene-ui-version=\"2.16.5\"] .holder-content{display:grid;grid-template-areas:\"head\" \"body\" \"footer\";grid-template-columns:100%;grid-template-rows:auto 1fr auto;height:100%;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .holder-content-disable{pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .holder-content .module-header{grid-area:head}[data-gene-ui-version=\"2.16.5\"] .holder-content .holder-body{grid-area:body}[data-gene-ui-version=\"2.16.5\"] .holder-footer{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;grid-area:footer;padding:2rem}[data-gene-ui-version=\"2.16.5\"] .holder-footer:empty{display:none}[data-gene-ui-version=\"2.16.5\"] .holder-body-c{display:flex;flex-wrap:wrap;padding:1rem}[data-gene-ui-version=\"2.16.5\"] .holder-body-c>*{margin:1rem}[data-gene-ui-version=\"2.16.5\"] .holder-body-c .holder-title{font:600 1.6rem/2rem var(--font-family);margin-bottom:.5rem;padding:0 1rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .holder-body-c .col-6{width:50%}";
styleInject(css_248z);
function Holder(_ref) {
let {
title,
footer,
disabled,
children,
position,
onChange,
resetText,
applyText,
withPortal,
className,
onReset,
onApply,
applyDisabled,
resetDisabled,
defaultOpened,
expandText,
collapseText,
portalContainer,
rightIconType,
leftIconType,
filterIconType,
openedWidth,
disableOnHover,
...restProps
} = _ref;
const parentContainer = useRef(null);
const isControlled = ('opened' in restProps);
const [holderOpened, setHolderOpened] = useState(defaultOpened);
const [holderHovered, setHolderHovered] = useState(false);
const isOpened = isControlled ? restProps.opened : holderOpened;
const handleEvent = open => {
if (!isControlled) {
setHolderOpened(open);
!open && holderHovered && setHolderHovered(false);
}
onChange(open, holderHovered);
};
// Will open later
const handleHover = hovered => {
if (!disableOnHover && hovered !== holderHovered) {
!isControlled && setHolderHovered(!holderOpened ? hovered : false);
onChange(holderOpened, hovered);
}
};
const Content = /*#__PURE__*/React__default.createElement("div", _extends({
className: classnames('holder', className, "holder-".concat(position), {
pinned: isOpened,
opened: holderHovered || isOpened,
disabled
}),
style: {
'--opened-width': openedWidth
},
onMouseLeave: () => {
if (!document.documentElement.classList.contains(popoverV2Config.onOpenClassName)) {
handleHover(false);
}
}
}, restProps), /*#__PURE__*/React__default.createElement("div", {
className: "holder-c-wrapper",
ref: parentContainer
}, /*#__PURE__*/React__default.createElement("div", {
className: "holder-wrapper",
onMouseEnter: () => handleHover(true)
}, /*#__PURE__*/React__default.createElement("div", {
className: classnames('holder-content', {
'holder-content-disable': !holderOpened && disableOnHover
})
}, title && /*#__PURE__*/React__default.createElement(ModuleTitle, {
title: title,
size: "extra-big"
}), /*#__PURE__*/React__default.createElement("div", {
className: "holder-body"
}, /*#__PURE__*/React__default.createElement(CustomScrollbar, null, /*#__PURE__*/React__default.createElement("div", {
className: "holder-body-c"
}, children))), /*#__PURE__*/React__default.createElement("div", {
className: "holder-footer"
}, footer !== undefined ? footer : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
flexibility: "full-width",
appearance: "minimal",
color: "default",
disabled: resetDisabled,
onClick: onReset
}, resetText), /*#__PURE__*/React__default.createElement(Button, {
flexibility: "full-width",
color: "confirm",
disabled: applyDisabled,
onClick: onApply
}, applyText))))), /*#__PURE__*/React__default.createElement("div", {
className: "holder-toggle"
}, /*#__PURE__*/React__default.createElement("button", {
className: classnames({
active: isOpened
})
}, /*#__PURE__*/React__default.createElement(Tooltip, {
title: isOpened ? collapseText : expandText,
position: "right"
}, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Icon, {
type: leftIconType,
className: "layer-1",
onClick: () => handleEvent(false)
}), /*#__PURE__*/React__default.createElement(Icon, {
type: filterIconType,
className: "layer-2",
onClick: () => handleEvent(true)
}))), /*#__PURE__*/React__default.createElement(Icon, {
type: rightIconType,
className: "layer-3",
onClick: () => handleEvent(true)
})))));
return withPortal ? /*#__PURE__*/React__default.createElement(Portal, {
isOpen: true,
container: portalContainer
}, Content) : Content;
}
Holder.propTypes = {
/**
* Custom footer,
* Any valid React element
*/
footer: PropTypes.node,
/**
* It prevents the user from changing the state(opened/closed) of holder
*/
disabled: PropTypes.bool,
/**
* Content of holder,
* Valid React element
*/
children: PropTypes.node,
/**
* Fires event when user changes state(opened/closed) of holder
* (holderOpened: Boolean) => void
*/
onChange: PropTypes.func,
/**
* Wraps component with Portal component if [true]
*/
withPortal: PropTypes.bool,
/**
* Custom text for reset button
*/
resetText: PropTypes.string,
/**
* Custom text for apply button
*/
applyText: PropTypes.string,
/**
* The CSS class name of the wrapper element.
*/
className: PropTypes.string,
/**
* Fires event when user clicks on reset button
* (event: Event) -=> void
*/
onReset: PropTypes.func,
/**
* Fires event when user clicks on apply button
* (event: Event) -=> void
*/
onApply: PropTypes.func,
/**
* Initial state(opened/closed) for holder, I
* If true holder will be opened
*/
defaultOpened: PropTypes.bool,
/**
* Controlled value or state(opened/closed) for holder, I
* If true holder will be opened
*/
opened: PropTypes.bool,
/**
* Is any valid DOM node, regardless of its location in the DOM.
*/
portalContainer: PropTypes.any,
/**
* Controls holder position
*/
position: PropTypes.oneOf(['left', 'right']),
/**
* Title for component
*/
title: PropTypes.string.isRequired,
/**
* Disabled state for "apply" button
*/
applyDisabled: PropTypes.bool,
/**
* Disabled state for "reset" button
*/
resetDisabled: PropTypes.bool,
/**
* Tooltip text for expanding icon
*/
expandText: PropTypes.string.isRequired,
/**
* Tooltip text for collapsing icon
*/
collapseText: PropTypes.string.isRequired,
/**
* Width for holder opened state (write with px)
*/
openedWidth: PropTypes.string,
/**
* Left custom icon name, default is 'bc-icon-arrow-left'
*/
leftIconType: PropTypes.string,
/**
* Right custom icon name, default is 'bc-icon-arrow-right'
*/
rightIconType: PropTypes.string,
/**
* Filter custom icon name, default is 'bc-icon-arrow-filter'
*/
filterIconType: PropTypes.string,
/**
* Disabled hover event which opening Holder component.
*/
disableOnHover: PropTypes.bool
};
Holder.defaultProps = {
disabled: false,
applyText: 'Apply',
withPortal: false,
resetText: 'Reset',
defaultOpened: false,
position: 'left',
applyDisabled: false,
onChange: noop,
leftIconType: 'bc-icon-arrow-left',
rightIconType: 'bc-icon-arrow-right',
filterIconType: 'bc-icon-filter',
disableOnHover: false
};
export { Holder as default };