@geneui/components
Version:
The Gene UI components library designed for BI tools
292 lines (288 loc) • 13.3 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useState, useRef, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import { n as noop } from '../index-a0e4e333.js';
import '../configs-00612ce0.js';
import useClickOutside from '../hooks/useClickOutside.js';
import Icon from '../Icon/index.js';
import Portal from '../Portal/index.js';
import Popover from '../Popover/index.js';
import Menu from '../Menu/index.js';
import { D as Dropdown } from '../index-9d8d0112.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../index-031ff73c.js';
import '../GeneUIProvider/index.js';
import '../index-122432cd.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../hooks/useUpdatableRef.js';
import '../hooks/useForceUpdate.js';
import '../Scrollbar/index.js';
import '../guid-8ddf77b3.js';
import '../Option/index.js';
import '../useEllipsisDetection-4d997d5d.js';
import '../index-6d7e99cd.js';
import '../tslib.es6-f211516f.js';
import '../objectWithoutPropertiesLoose-d8a4a68c.js';
import '../react-lifecycles-compat.es-6e1f3768.js';
import '../clsx.m-2bb6df4b.js';
import '../hooks/useMount.js';
import '../hooks/useClick.js';
import '../hooks/useKeyDown.js';
import '../BusyLoader/index.js';
import '../Empty/index.js';
import '../index-08898b29.js';
import '../debounce-4419bc2f.js';
import '../ExtendedInput/index.js';
import '../SuggestionList/index.js';
import '../config-1053d64d.js';
import '../callAfterDelay-7272faca.js';
import '../Checkbox/index.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import '../index-0cbb1102.js';
import '../Tag/index.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .overspread-container{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:300}[data-gene-ui-version=\"2.16.5\"] .overspread-holder{animation:overspread-reveal .5s forwards;background:var(--background);display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr;height:100%;transform:translate3d(0,100%,0);width:100%}@keyframes overspread-reveal{to{transform:translateZ(0)}}[data-gene-ui-version=\"2.16.5\"] .overspread-head{border-bottom:1px solid rgba(var(--background-sc-rgb),.05);display:grid;grid-template-areas:\"left center right\";grid-template-columns:1fr auto 1fr;padding:0 1rem;position:relative;width:100%}[data-gene-ui-version=\"2.16.5\"] .overspread-head>li{align-items:center;display:flex;height:4.6rem;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .overspread-head>li.over-h-act{font:600 1.5rem/2.3rem var(--font-family);grid-area:left;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;width:100%}[data-gene-ui-version=\"2.16.5\"] .overspread-head>li.over-h-act:last-child{grid-area:right;justify-content:flex-end}[data-gene-ui-version=\"2.16.5\"] .overspread-head>li.over-h-tt{font:600 1.7rem/2.3rem var(--font-family);grid-area:center}[data-gene-ui-version=\"2.16.5\"] .overspread-head>li>*{margin:0 .5rem}[data-gene-ui-version=\"2.16.5\"] .overspread-head>li .color-hero{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .overspread-head button{transition:opacity .4s}[data-gene-ui-version=\"2.16.5\"] .overspread-head button:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .overspread-body{-webkit-overflow-scrolling:touch;overflow-y:auto;padding:1.5rem}[data-gene-ui-version=\"2.16.5\"] .overspread-search{position:relative}[data-gene-ui-version=\"2.16.5\"] .overspread-search:not(:focus-within,.show-search) input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.5\"] .overspread-search:not(:focus-within,.show-search) .bc-icon-search{pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .overspread-search:not(:focus-within,.show-search) .bc-icon-close{display:none}[data-gene-ui-version=\"2.16.5\"] .overspread-search.show-search,[data-gene-ui-version=\"2.16.5\"] .overspread-search:focus-within{background:var(--background);display:flex;left:0;margin:0;padding:0 1rem;position:absolute;top:50%;transform:translateY(-50%);width:100%;z-index:10}[data-gene-ui-version=\"2.16.5\"] .overspread-search.show-search>*,[data-gene-ui-version=\"2.16.5\"] .overspread-search:focus-within>*{padding:0 .5rem}[data-gene-ui-version=\"2.16.5\"] .overspread-search.show-search .bc-icon-search,[data-gene-ui-version=\"2.16.5\"] .overspread-search:focus-within .bc-icon-search{display:none}[data-gene-ui-version=\"2.16.5\"] .overspread-search.show-search input,[data-gene-ui-version=\"2.16.5\"] .overspread-search:focus-within input{font:600 1.4rem var(--font-family);height:2.4rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .overspread-search.show-search input::input-placeholder,[data-gene-ui-version=\"2.16.5\"] .overspread-search:focus-within input::input-placeholder{color:rgba(var(--background-sc-rgb),.5);font-size:1.4rem;font-weight:600}[data-gene-ui-version=\"2.16.5\"] .overspread-search.show-search input:placeholder,[data-gene-ui-version=\"2.16.5\"] .overspread-search:focus-within input:placeholder{color:rgba(var(--background-sc-rgb),.5);font-size:1.4rem;font-weight:600}[data-gene-ui-version=\"2.16.5\"] .overspread-search.show-search input::placeholder,[data-gene-ui-version=\"2.16.5\"] .overspread-search:focus-within input::placeholder{color:rgba(var(--background-sc-rgb),.5);font-size:1.4rem;font-weight:600}[data-gene-ui-version=\"2.16.5\"] .overspread-search.show-search input:input-placeholder,[data-gene-ui-version=\"2.16.5\"] .overspread-search:focus-within input:input-placeholder{color:rgba(var(--background-sc-rgb),.5);font-size:1.4rem;font-weight:600}[data-gene-ui-version=\"2.16.5\"] .back-button-holder{align-items:center;cursor:pointer;display:flex}";
styleInject(css_248z);
function Overspread(props) {
const {
opened,
title,
hasDone,
disabledDone,
children,
hasSearch,
hasOptions,
titleHasOptions,
searchOutput,
hasBack,
doneText,
backWithIcon,
backText,
doneWithIcon,
onClose,
onDone,
onBack,
onSelectingOption,
onSelectingTitleOption,
dataForOptions,
dataForTitleWithOptions,
defaultValueForTitleWithOptions,
onAnimationEnd,
...restProps
} = props;
const isControlled = ('opened' in props);
const [isOpen, setIsOpen] = useState(opened);
const [optionsPopoverIsOpen, setOptionsPopoverIsOpen] = useState(false);
const portalRef = useRef(null);
useEffect(() => setIsOpen(opened), [opened]);
const handleSearchOutput = useCallback(e => {
searchOutput && searchOutput(e.target.value);
}, [searchOutput]);
const handleClose = useCallback(e => {
!isControlled && setIsOpen(isOpen => !isOpen);
onClose && onClose(e);
}, [onClose, isControlled]);
const handleDone = useCallback(e => {
!isControlled && setIsOpen(isOpen => !isOpen);
onDone && onDone(e);
}, [onDone, isControlled]);
const outsideClickHandler = useCallback(() => {
setOptionsPopoverIsOpen(false);
}, []);
const outsideClickRef = useClickOutside(outsideClickHandler);
const onAnimationEndHandler = useCallback(() => {
onAnimationEnd && onAnimationEnd();
}, [onAnimationEnd]);
useEffect(() => {
var _portalRef$current;
portalRef === null || portalRef === void 0 ? void 0 : (_portalRef$current = portalRef.current) === null || _portalRef$current === void 0 ? void 0 : _portalRef$current.addEventListener('animationend', onAnimationEndHandler);
}, [portalRef.current, isOpen]);
const cleanup = () => {
var _portalRef$current2;
portalRef === null || portalRef === void 0 ? void 0 : (_portalRef$current2 = portalRef.current) === null || _portalRef$current2 === void 0 ? void 0 : _portalRef$current2.removeEventListener('animationend', onAnimationEndHandler);
};
useEffect(() => cleanup, []);
return /*#__PURE__*/React__default.createElement(Portal, {
isOpen: isOpen
}, /*#__PURE__*/React__default.createElement("div", _extends({
className: "overspread-container"
}, restProps), /*#__PURE__*/React__default.createElement("div", {
className: "overspread-holder",
ref: portalRef
}, /*#__PURE__*/React__default.createElement("ul", {
className: "overspread-head"
}, /*#__PURE__*/React__default.createElement("li", {
className: "over-h-act"
}, hasBack ? /*#__PURE__*/React__default.createElement("p", {
onClick: onBack,
className: "back-button-holder cursor-pointer"
}, backWithIcon && /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-arrow-left"
}), /*#__PURE__*/React__default.createElement("span", null, backText)) : /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-close",
onClick: handleClose,
className: "cursor-pointer"
})), /*#__PURE__*/React__default.createElement("li", {
className: "over-h-tt"
}, titleHasOptions ? /*#__PURE__*/React__default.createElement(Dropdown, {
hasSearch: false,
value: defaultValueForTitleWithOptions.value,
data: dataForTitleWithOptions,
placeholder: " ",
appearance: "light",
onChange: onSelectingTitleOption,
flexibility: "content-size"
}) : /*#__PURE__*/React__default.createElement("p", {
className: "ellipsis-text"
}, title)), /*#__PURE__*/React__default.createElement("li", {
className: "over-h-act"
}, hasSearch && /*#__PURE__*/React__default.createElement("div", {
className: "overspread-search cursor-pointer"
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-close"
}), /*#__PURE__*/React__default.createElement("input", {
onChange: handleSearchOutput,
placeholder: "Search"
}), /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-search"
})), hasOptions && /*#__PURE__*/React__default.createElement(Popover, {
isOpen: optionsPopoverIsOpen,
extendTargetWidth: false,
Content: /*#__PURE__*/React__default.createElement(Menu, {
ref: outsideClickRef,
data: dataForOptions,
onSelect: function () {
setOptionsPopoverIsOpen(false);
onSelectingOption(...arguments);
}
}),
align: "end"
}, /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-more-vertical",
onClick: () => setOptionsPopoverIsOpen(true)
})), hasDone && /*#__PURE__*/React__default.createElement("button", {
disabled: disabledDone,
onClick: handleDone,
className: "color-hero cursor-pointer"
}, doneWithIcon ? /*#__PURE__*/React__default.createElement(Icon, {
type: "bc-icon-checkbox-checked"
}) : doneText))), children && /*#__PURE__*/React__default.createElement("div", {
className: "overspread-body"
}, children))));
}
Overspread.propTypes = {
title: PropTypes.string,
/**
* Enables title's dropdown,
*/
titleHasOptions: PropTypes.bool,
/**
* Fires event for handling change of value/selected option
* ((event: Event) => void)
*/
onSelectingTitleOption: PropTypes.func,
/**
* Title's dropdown data
*/
dataForTitleWithOptions: PropTypes.array,
/**
* Default value for title's dropdown
*/
defaultValueForTitleWithOptions: PropTypes.object,
/**
* Enables search,
*/
hasSearch: PropTypes.bool,
/**
* Fires event when user types in search field
* (event: Event) => void
*/
searchOutput: PropTypes.func,
/**
* Displays dropdown on the right corner,
*/
hasOptions: PropTypes.bool,
/**
* Right corner dropdown's data
*/
dataForOptions: PropTypes.array,
/**
* Fires event for handling change of value/selected option
* ((event: Event) => void)
*/
onSelectingOption: PropTypes.func,
/** Opened state */
opened: PropTypes.bool,
/**
* Any valid node
*/
children: PropTypes.node,
/**
* Enables done button on the right corner,
*/
hasDone: PropTypes.bool,
/**
* Shows done icon instead of text
*/
doneWithIcon: PropTypes.bool,
/**
* Done button disabled state
*/
disabledDone: PropTypes.bool,
/**
* Custom text for done button
*/
doneText: PropTypes.string,
/**
* Fires event when done button is clicked
* ((event: Event) => void)
*/
onDone: PropTypes.func,
/**
* Enables back button on the left corner,
*/
hasBack: PropTypes.bool,
/**
* Custom text for back button
*/
backText: PropTypes.string,
/**
* Displays chevron icon in back button
*/
backWithIcon: PropTypes.bool,
/**
* Fires event when back button is clicked
* ((event: Event) => void)
*/
onBack: PropTypes.func,
/**
* Fires event when close icon is clicked
* ((event: Event) => void)
*/
onClose: PropTypes.func,
/**
* Function calls when the animation ends.
*/
onAnimationEnd: PropTypes.func
};
Overspread.defaultProps = {
hasSearch: false,
hasBack: false,
hasOptions: false,
doneText: 'Done',
titleHasOptions: false,
backWithIcon: false,
doneWithIcon: false,
hasDone: true,
onDone: noop,
onBack: noop,
onClose: noop,
onSelectingOption: noop,
onSelectingTitleOption: noop,
onAnimationEnd: noop
};
export { Overspread as default };