@geneui/components
Version:
The Gene UI components library designed for BI tools
183 lines (178 loc) • 7.75 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useState, useCallback, forwardRef } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { n as noop } from '../index-a0e4e333.js';
import Icon from '../Icon/index.js';
import Portal from '../Portal/index.js';
import '../dateValidation-67caec66.js';
import 'react-dom';
import '../configs-00612ce0.js';
import useClickOutside from '../hooks/useClickOutside.js';
import Popover from '../Popover/index.js';
import Menu from '../Menu/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../GeneUIProvider/index.js';
import '../_commonjsHelpers-24198af3.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';
function ActionMenu(_ref) {
let {
action,
children
} = _ref;
const [isOpened, setIsOpened] = useState(false);
const toggleMenu = useCallback(() => setIsOpened(status => !status), []);
const handleOutsideClick = useClickOutside(toggleMenu);
if (action.menuOptions) {
return /*#__PURE__*/React__default.createElement(Popover, {
swipeable: true,
align: "end",
screenType: "mobile",
isOpen: isOpened,
onSwipedDown: toggleMenu,
contentRef: handleOutsideClick,
Content: /*#__PURE__*/React__default.createElement(Menu, {
screenType: "mobile",
onClick: toggleMenu,
data: [...action.menuOptions, {
title: 'Cancel',
icon: 'bc-icon-clear',
border: 'top'
}]
})
}, /*#__PURE__*/React__default.createElement("div", {
onClick: toggleMenu
}, children));
}
return children;
}
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .m-popup-holder{height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:400}[data-gene-ui-version=\"2.16.5\"] .m-popup-backdrop{animation:m-popup-backdrop-reveal .3s forwards;background-color:#0003;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}@keyframes m-popup-backdrop-reveal{to{opacity:1}}[data-gene-ui-version=\"2.16.5\"] .m-popup-c{animation:m-popup-c-reveal .4s .25s forwards;background:var(--background);border-radius:1rem 1rem 0 0;bottom:0;box-shadow:0 -1px .2rem 0 #0000000d;display:flex;flex-direction:column;left:0;max-height:calc(100% - 2rem);padding:0 1.6rem;position:absolute;right:0;transform:translate3d(0,100%,0)}@keyframes m-popup-c-reveal{to{transform:translateZ(0)}}[data-gene-ui-version=\"2.16.5\"] .m-popup-head{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);display:grid;font-weight:700;grid-template-columns:1fr auto 1fr;height:5.1rem;position:relative}[data-gene-ui-version=\"2.16.5\"] .m-popup-head>li{align-items:center;display:flex;overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .m-popup-head>li:first-child .mp-action .icon{margin-inline-end:1rem}[data-gene-ui-version=\"2.16.5\"] .m-popup-head>li:last-child .mp-action{flex-direction:row-reverse}[data-gene-ui-version=\"2.16.5\"] .m-popup-head>li:last-child .mp-action .icon{margin-inline-start:1rem}[data-gene-ui-version=\"2.16.5\"] .m-popup-head>li:nth-child(2){padding:0 1rem}[data-gene-ui-version=\"2.16.5\"] .m-popup-head>li:not(:nth-child(2)){min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}[data-gene-ui-version=\"2.16.5\"] .m-popup-head>li:nth-child(3){justify-content:flex-end}[data-gene-ui-version=\"2.16.5\"] .m-popup-head>li .mp-action{align-items:center;color:var(--hero);cursor:pointer;display:flex;font:600 1.4rem/3.6rem var(--font-family);overflow:hidden}[data-gene-ui-version=\"2.16.5\"] .m-popup-content{-webkit-overflow-scrolling:auto;flex:auto;margin:0 -1.6rem;overflow-y:auto;padding:0 1.6rem env(safe-area-inset-bottom);transition:padding .4s;width:calc(100% + 3.2rem)}";
styleInject(css_248z);
const MobilePopUp = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
onBackdropClick,
rightActionClick,
leftActionClick,
portalContainer,
rightAction,
leftAction,
className,
isOpened,
children,
title,
...restProps
} = _ref;
const generateAction = (action, onClick) => {
if (action) {
if ( /*#__PURE__*/React__default.isValidElement(action)) {
return action;
}
return /*#__PURE__*/React__default.createElement(ActionMenu, {
action: action
}, /*#__PURE__*/React__default.createElement("button", {
className: "mp-action",
onClick: onClick
}, action.iconType && /*#__PURE__*/React__default.createElement(Icon, {
type: action.iconType
}), action.text && /*#__PURE__*/React__default.createElement("p", {
className: "ellipsis-text"
}, action.text)));
}
};
const handleBackdropClick = useCallback(event => {
onBackdropClick(event, true);
}, [onBackdropClick]);
return /*#__PURE__*/React__default.createElement(Portal, {
isOpen: isOpened,
container: portalContainer
}, /*#__PURE__*/React__default.createElement("div", _extends({}, restProps, {
className: classnames('m-popup-holder', className)
}), /*#__PURE__*/React__default.createElement("div", {
className: "m-popup-backdrop",
onClick: handleBackdropClick
}), /*#__PURE__*/React__default.createElement("div", {
className: "m-popup-c"
}, /*#__PURE__*/React__default.createElement("ul", {
className: "m-popup-head"
}, /*#__PURE__*/React__default.createElement("li", null, generateAction(leftAction, leftActionClick)), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("div", {
className: "ellipsis-text"
}, title)), /*#__PURE__*/React__default.createElement("li", null, generateAction(rightAction, rightActionClick))), /*#__PURE__*/React__default.createElement("div", {
className: "m-popup-content",
ref: ref
}, children))));
});
MobilePopUp.propTypes = {
/**
* Fires event when user clicks on right action button
* (event: SyntheticEvent) => void
*/
rightActionClick: PropTypes.func,
/**
* Fires event when user clicks on left action button
* (event: SyntheticEvent) => void
*/
leftActionClick: PropTypes.func,
/**
* Container for portal
*/
portalContainer: PropTypes.any,
/**
* Props for right action
* iconType: String
* text: String
* menuOptions: Option atom's props
*/
rightAction: PropTypes.oneOfType([PropTypes.any, PropTypes.shape({
iconType: PropTypes.string,
text: PropTypes.string,
menuOptions: PropTypes.arrayOf(PropTypes.object)
})]),
/**
* Props for left action
* iconType: String
* text: String
* menuOptions: Option atom's props
*/
leftAction: PropTypes.oneOfType([PropTypes.any, PropTypes.shape({
iconType: PropTypes.string,
text: PropTypes.string,
menuOptions: PropTypes.arrayOf(PropTypes.object)
})]),
/**
* Additional classname
*/
className: PropTypes.string,
/**
* Displays popup if [true]
*/
isOpened: PropTypes.bool,
/**
* Valid React elements for popup body
*/
children: PropTypes.node,
/**
* Custom title for popup
*/
title: PropTypes.string,
/*
* Backdrop click event handler
*/
onBackdropClick: PropTypes.func
};
MobilePopUp.defaultProps = {
onBackdropClick: noop,
leftActionClick: noop,
rightActionClick: noop
};
export { MobilePopUp as default };