@onesy/ui-react
Version:
UI for React
520 lines (518 loc) • 24.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _compilerRuntime = require("react/compiler-runtime");
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialExpandMoreW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialExpandMoreW100"));
var _Grow = _interopRequireDefault(require("../Grow"));
var _Append = _interopRequireDefault(require("../Append"));
var _Transitions = _interopRequireDefault(require("../Transitions"));
var _ClickListener = _interopRequireDefault(require("../ClickListener"));
var _Transition = _interopRequireDefault(require("../Transition"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _Type = _interopRequireDefault(require("../Type"));
var _Line = _interopRequireDefault(require("../Line"));
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "version", "items", "valueDefault", "value_", "openOnHover", "openOnClick", "openOnFocus", "renderItem", "indicator", "menuTransition", "menuTransitionClassName", "menuTransitionStyle", "onOpen", "onClose", "onChange", "TransitionComponent", "IconIndicator", "AppendProps", "TypeProps", "ItemProps", "IconProps", "TransitionComponentProps", "WrapperProps", "WrapperMenuProps", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => ({
root: {
position: 'relative'
},
menuWrapper: {
position: 'relative',
overflow: 'hidden',
borderRadius: theme.methods.shape.radius.value(1.5, 'px'),
zIndex: theme.z_index.menu_modal,
'& > *': {
transition: theme.methods.transitions.make(['width', 'height', 'opacity', 'transform'])
}
},
menu: {
position: 'absolute',
inset: '0',
'&.enter': {
opacity: '0',
transform: 'translateX(-100%)'
},
'&.entering': {
opacity: '1',
transform: 'translateX(0%)'
},
'&.exit': {
opacity: '1',
transform: 'translateX(0%)'
},
'&.exiting': {
opacity: '0',
transition: 'none'
}
},
menu_reverse: {
position: 'absolute',
inset: '0',
'&.enter': {
opacity: '0',
transform: 'translateX(100%)'
},
'&.entering': {
opacity: '1',
transform: 'translateX(0%)'
},
'&.exit': {
opacity: '1',
transform: 'translateX(0%)'
},
'&.exiting': {
opacity: '0',
transition: 'none'
}
},
item: {
maxWidth: '140px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
padding: theme.methods.space.value(1, 'px'),
cursor: 'pointer',
userSelect: 'none'
},
item_disabled: {
opacity: theme.palette.visual_contrast.default.opacity.disabled,
cursor: 'default',
pointerEvents: 'none'
},
indicator: {
color: [theme.palette.text.default.secondary, '!important'],
transition: theme.methods.transitions.make('transform')
},
indicator_open: {
transform: 'rotate(-180deg)'
}
}), {
name: 'onesy-MenuDesktop'
});
const Wrapper = props => {
const $ = (0, _compilerRuntime.c)(8);
const theme = (0, _styleReact.useOnesyTheme)();
const {
onMouseEnter,
onMouseLeave,
style
} = props;
let t0;
if ($[0] !== style || $[1] !== theme.z_index.menu_modal) {
t0 = _objectSpread({
zIndex: theme.z_index.menu_modal
}, style);
$[0] = style;
$[1] = theme.z_index.menu_modal;
$[2] = t0;
} else {
t0 = $[2];
}
let t1;
if ($[3] !== onMouseEnter || $[4] !== onMouseLeave || $[5] !== props.children || $[6] !== t0) {
t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
style: t0,
children: props.children
});
$[3] = onMouseEnter;
$[4] = onMouseLeave;
$[5] = props.children;
$[6] = t0;
$[7] = t1;
} else {
t1 = $[7];
}
return t1;
};
const MenuDesktop = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyMenuDesktop) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Grow = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Grow) || _Grow.default;
const Append = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Append) || _Append.default;
const Transitions = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Transitions) || _Transitions.default;
const ClickListener = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.ClickListener) || _ClickListener.default;
const Transition = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Transition) || _Transition.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Surface) || _Surface.default;
const Type = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Type) || _Type.default;
const {
ref,
tonal = true,
color = 'primary',
version = 'filled',
items,
valueDefault,
value_,
openOnHover = true,
openOnClick = true,
openOnFocus = true,
renderItem,
indicator,
menuTransition = true,
menuTransitionClassName,
menuTransitionStyle,
onOpen,
onClose: onClose_,
onChange,
TransitionComponent = Grow,
IconIndicator = _IconMaterialExpandMoreW.default,
AppendProps,
TypeProps,
ItemProps,
IconProps,
TransitionComponentProps,
WrapperProps,
WrapperMenuProps,
className
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [init, setInit] = _react.default.useState(false);
const [open, setOpen] = _react.default.useState();
const [inProp, setInProp] = _react.default.useState();
const [openItem, setOpenItem] = _react.default.useState();
const [focus, setFocus] = _react.default.useState();
const [append, setAppend] = _react.default.useState();
const [menu, setMenu] = _react.default.useState();
const refs = {
root: _react.default.useRef(undefined),
open: _react.default.useRef(undefined),
focus: _react.default.useRef(undefined),
direction: _react.default.useRef(undefined),
props: _react.default.useRef(undefined),
items: _react.default.useRef([]),
menu: _react.default.useRef(undefined),
menus: _react.default.useRef([]),
menuRects: _react.default.useRef([]),
previousOpen: _react.default.useRef(undefined),
previousOpenIndex: _react.default.useRef(undefined),
anchorElement: _react.default.useRef(undefined),
wrapper: _react.default.useRef(undefined)
};
const mobile = (0, _useMediaQuery.default)('(pointer: coarse)', {
element: refs.root.current
});
refs.open.current = open;
refs.focus.current = focus;
refs.direction.current = theme.direction;
refs.props.current = props;
const close = () => {
setOpen(false);
if ((0, _utils.is)('function', onClose_)) onClose_();
};
const onClose = () => {
setInProp(false);
};
const updateOpenItem = valueNew => {
setOpenItem(valueNew);
if ((0, _utils.is)('function', onChange)) onChange(valueNew);
};
const updateOpen = value__ => {
if (value__) {
const item = refs.props.current.items.find(item_ => item_.value === value__);
if (item) {
const itemHTML = refs.items.current.filter(Boolean).find(item__0 => item__0.dataset.value === item.value);
if (itemHTML) {
refs.anchorElement.current = itemHTML;
if (item.menu) setMenu(item.menu);
}
}
}
if (value__) updateOpenItem(value__);
if (refs.open.current) {
refs.previousOpenIndex.current = refs.props.current.items.findIndex(item__1 => item__1.value === refs.open.current);
refs.previousOpen.current = refs.props.current.items[refs.previousOpenIndex.current];
}
if (!value__) onClose();else {
setInProp(true);
setOpen(value__);
if ((0, _utils.is)('function', onOpen)) onOpen();
}
};
const updateOpenPure = () => {
setInProp(true);
};
_react.default.useEffect(() => {
refs.menus.current.forEach((item_0, index) => {
if (item_0) {
refs.menuRects.current[index] = item_0.getBoundingClientRect();
}
});
setInit(true);
}, []);
_react.default.useEffect(() => {
var _refs$root$current;
const method = event => {
switch (event.key) {
case 'Enter':
if (refs.focus.current) {
var _refs$focus$current;
if (refs.open.current) updateOpen('');else updateOpen((_refs$focus$current = refs.focus.current) === null || _refs$focus$current === void 0 ? void 0 : _refs$focus$current.value);
}
break;
case 'Escape':
if (refs.open.current) updateOpen('');
break;
case 'Home':
// If any item is in the focus
if (refs.focus.current) {
event.preventDefault();
const tabIndexItems_1 = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
refs.props.current.items.reverse();
let index_2 = refs.props.current.items.findIndex(item__6 => !item__6.disabled && item__6.menu);
refs.props.current.items.reverse();
if (index_2 > -1) {
index_2 = refs.props.current.items.length - 1 - index_2;
const item_3 = refs.props.current.items[index_2];
if (item_3) {
const itemHTML_2 = tabIndexItems_1.find(item__7 => item__7.dataset.value === item_3.value);
updateOpen(item_3.value);
if (itemHTML_2) itemHTML_2.focus();
}
}
}
break;
case 'End':
// If any item is in the focus
if (refs.focus.current) {
event.preventDefault();
const tabIndexItems_0 = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
const index_1 = refs.props.current.items.findIndex(item__4 => !item__4.disabled && item__4.menu);
if (index_1 > -1) {
const item_2 = refs.props.current.items[index_1];
if (item_2) {
const itemHTML_1 = tabIndexItems_0.find(item__5 => item__5.dataset.value === item_2.value);
updateOpen(item_2.value);
if (itemHTML_1) itemHTML_1.focus();
}
}
}
break;
case 'ArrowUp':
case 'ArrowDown':
case 'ArrowLeft':
case 'ArrowRight':
// If any item is in the focus
if (refs.focus.current) {
event.preventDefault();
event.stopPropagation();
const tabIndexItems = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
const index_0 = refs.props.current.items.findIndex(item__2 => item__2.value === refs.focus.current.value);
let indexNew;
let i = index_0;
let item_1;
while (indexNew === undefined && i >= 0 && i < refs.props.current.items.length) {
var _item_, _item_2;
['ArrowDown'].includes(event.key) || theme.direction === 'ltr' && event.key === 'ArrowLeft' || theme.direction === 'rtl' && event.key === 'ArrowRight' ? i-- : i++;
item_1 = refs.props.current.items[i];
if (!((_item_ = item_1) !== null && _item_ !== void 0 && _item_.disabled) && (_item_2 = item_1) !== null && _item_2 !== void 0 && _item_2.menu) indexNew = i;
}
if (item_1) {
const itemHTML_0 = tabIndexItems.find(item__3 => item__3.dataset.value === item_1.value);
updateOpen(item_1.value);
if (itemHTML_0) itemHTML_0.focus();
}
}
break;
default:
break;
}
};
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
rootDocument.addEventListener('keydown', method);
return () => {
rootDocument.removeEventListener('keydown', method);
};
}, []);
_react.default.useEffect(() => {
if (open) {
const index_3 = refs.props.current.items.findIndex(item_4 => (item_4 === null || item_4 === void 0 ? void 0 : item_4.value) === open);
const rect = refs.menuRects.current[index_3];
if (rect) {
setAppend({
width: rect.width,
height: rect.height
});
}
}
}, [open]);
const onBlur = () => {
if (refs.focus.current) {
updateOpen('');
setFocus('');
}
};
const onFocus = item_5 => {
if (item_5 && !item_5.disabled && item_5.menu) {
setFocus(item_5);
if (open !== item_5.value) updateOpen(item_5.value);
}
};
const onMouseLeave = item_6 => {
updateOpen('');
};
const onMouseEnter = item_7 => {
if (item_7 && !item_7.disabled && item_7.menu) {
updateOpen(item_7.value);
}
};
const onClick = item_8 => {
if (item_8 && !item_8.disabled && item_8.menu) {
open ? updateOpen('') : updateOpen(item_8.value);
setTimeout(() => setFocus(''));
}
};
const onClickOutside = () => {
if (open) updateOpen('');
};
// If no items don't render anything
// not to waste html space
if (!(items !== null && items !== void 0 && items.length)) return;
const openIndex = items.findIndex(item__8 => (item__8 === null || item__8 === void 0 ? void 0 : item__8.value) === open);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickListener, {
onClickOutside: onClickOutside,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
ref: item_9 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_9);else ref.current = item_9;
}
refs.root.current = item_9;
},
gap: 0,
direction: "column",
align: "unset",
justify: "unset",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-root'], className, classes.root])
}, other), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "row",
align: "unset",
justify: "unset",
children: items.map((item_10, index_4) =>
// hovered and onClick add to the method
(0, _utils.is)('function', renderItem) ? renderItem(item_10, index_4) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: item__9 => {
if (!refs.items.current.includes(item_10)) refs.items.current.push(item__9);
},
tabIndex: !item_10.disabled && item_10.menu ? 0 : undefined,
"data-value": item_10.value,
gap: 0.5,
direction: "row",
align: "center"
}, ItemProps), !!item_10.menu && openOnClick && {
onClick: () => onClick(item_10)
}), !!item_10.menu && !mobile && openOnFocus && {
onFocus: () => onFocus(item_10),
onBlur: () => onBlur()
}), !!item_10.menu && openOnHover && {
onMouseEnter: () => onMouseEnter(item_10),
onMouseLeave: () => onMouseLeave(item_10)
}), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-item', open === item_10.value && `onesy-MenuDesktop-open`, item_10.disabled && `onesy-MenuDesktop-disabled`], ItemProps === null || ItemProps === void 0 ? void 0 : ItemProps.className, classes.item, item_10.disabled && classes.item_disabled]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
version: "l1"
}, TypeProps), {}, {
children: item_10.name !== undefined ? item_10.name : item_10.label
})), !!item_10.menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconIndicator, _objectSpread({
size: 20,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-indicator'], classes.indicator, inProp && open === item_10.value && classes.indicator_open])
}, IconProps))]
}), index_4))
}), !init && items.map((item_11, index_5) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
ref: item__10 => refs.menus.current[index_5] = item__10,
style: {
position: 'absolute',
visibility: 'hidden'
},
children: item_11.menu
}, index_5)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Append, _objectSpread({
open: !!open,
anchorElement: refs.anchorElement.current,
position: "bottom",
alignment: "start",
element: ({
ref: refAppend,
values,
style: styleAppend
}) => {
var _menu$props2, _refs$menu$current2;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({
ref: refAppend,
onMouseEnter: updateOpenPure,
onMouseLeave: onMouseLeave
}, WrapperProps), {}, {
style: _objectSpread(_objectSpread(_objectSpread({}, append), styleAppend), {}, {
transition: 'none'
}, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({
in: inProp,
onEntered: () => {
if (refAppend.current) setTimeout(() => {
refAppend.current.style.transition = theme.methods.transitions.make(['width', 'height', 'transform']);
}, 14);
},
onExited: () => {
close();
if (refAppend.current) refAppend.current.style.transition = 'none';
},
add: true,
removeOnExited: true
}, TransitionComponentProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
tonal: tonal,
color: color,
version: version
}, WrapperMenuProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-menu-wrapper'], WrapperMenuProps === null || WrapperMenuProps === void 0 ? void 0 : WrapperMenuProps.className, classes.menuWrapper]),
style: _objectSpread(_objectSpread({}, append), WrapperMenuProps === null || WrapperMenuProps === void 0 ? void 0 : WrapperMenuProps.style),
children: [menu && menuTransition && /*#__PURE__*/(0, _jsxRuntime.jsx)(Transitions, {
switch: true,
mode: "in-out-follow",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, {
children: status => {
var _menu$props, _refs$menu$current;
return /*#__PURE__*/_react.default.cloneElement(menu, {
// For manual onClose within the element
onMenuDesktopClose: onClose,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-menu', status], ...((0, _utils.is)('function', menuTransitionClassName) ? menuTransitionClassName(status, openItem) : []), classes[theme.direction === 'ltr' ? openIndex <= 0 || openIndex < refs.previousOpenIndex.current ? 'menu' : 'menu_reverse' : openIndex <= 0 || openIndex < refs.previousOpenIndex.current ? 'menu_reverse' : 'menu']]),
style: _objectSpread(_objectSpread(_objectSpread({
position: 'absolute'
}, menu === null || menu === void 0 || (_menu$props = menu.props) === null || _menu$props === void 0 ? void 0 : _menu$props.style), (_refs$menu$current = refs.menu.current) === null || _refs$menu$current === void 0 ? void 0 : _refs$menu$current.props.style), (0, _utils.is)('function', menuTransitionStyle) && menuTransitionStyle(status, openItem))
});
}
}, openItem)
}), menu && !menuTransition && (/*#__PURE__*/_react.default.cloneElement(menu, {
// For manual onClose within the element
onMenuDesktopClose: onClose,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuDesktop', theme) && ['onesy-MenuDesktop-menu'], classes.menu]),
style: _objectSpread(_objectSpread(_objectSpread({}, menu === null || menu === void 0 || (_menu$props2 = menu.props) === null || _menu$props2 === void 0 ? void 0 : _menu$props2.style), (_refs$menu$current2 = refs.menu.current) === null || _refs$menu$current2 === void 0 ? void 0 : _refs$menu$current2.style), append)
}))]
}))
}))
}));
}
}, AppendProps))]
}))
});
};
MenuDesktop.displayName = 'onesy-MenuDesktop';
var _default = exports.default = MenuDesktop;