@onesy/ui-react
Version:
UI for React
507 lines (506 loc) • 19.7 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import { c as _c } from "react/compiler-runtime";
import React from 'react';
import { is, isEnvironment } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import IconMaterialExpandMore from '@onesy/icons-material-rounded-react/IconMaterialExpandMoreW100';
import GrowElement from '../Grow';
import AppendElement from '../Append';
import TransitionsElement from '../Transitions';
import ClickListenerElement from '../ClickListener';
import TransitionElement from '../Transition';
import SurfaceElement from '../Surface';
import TypeElement from '../Type';
import LineElement from '../Line';
import useMediaQuery from '../useMediaQuery';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = styleMethod(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 $ = _c(8);
const theme = 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__*/_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_ => {
const theme = useOnesyTheme();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMenuDesktop?.props?.default), props_);
const Line = theme?.elements?.Line || LineElement;
const Grow = theme?.elements?.Grow || GrowElement;
const Append = theme?.elements?.Append || AppendElement;
const Transitions = theme?.elements?.Transitions || TransitionsElement;
const ClickListener = theme?.elements?.ClickListener || ClickListenerElement;
const Transition = theme?.elements?.Transition || TransitionElement;
const Surface = theme?.elements?.Surface || SurfaceElement;
const Type = theme?.elements?.Type || TypeElement;
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 = IconMaterialExpandMore,
AppendProps,
TypeProps,
ItemProps,
IconProps,
TransitionComponentProps,
WrapperProps,
WrapperMenuProps,
className
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const [init, setInit] = React.useState(false);
const [open, setOpen] = React.useState();
const [inProp, setInProp] = React.useState();
const [openItem, setOpenItem] = React.useState();
const [focus, setFocus] = React.useState();
const [append, setAppend] = React.useState();
const [menu, setMenu] = React.useState();
const refs = {
root: React.useRef(undefined),
open: React.useRef(undefined),
focus: React.useRef(undefined),
direction: React.useRef(undefined),
props: React.useRef(undefined),
items: React.useRef([]),
menu: React.useRef(undefined),
menus: React.useRef([]),
menuRects: React.useRef([]),
previousOpen: React.useRef(undefined),
previousOpenIndex: React.useRef(undefined),
anchorElement: React.useRef(undefined),
wrapper: React.useRef(undefined)
};
const mobile = useMediaQuery('(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 (is('function', onClose_)) onClose_();
};
const onClose = () => {
setInProp(false);
};
const updateOpenItem = valueNew => {
setOpenItem(valueNew);
if (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 (is('function', onOpen)) onOpen();
}
};
const updateOpenPure = () => {
setInProp(true);
};
React.useEffect(() => {
refs.menus.current.forEach((item_0, index) => {
if (item_0) {
refs.menuRects.current[index] = item_0.getBoundingClientRect();
}
});
setInit(true);
}, []);
React.useEffect(() => {
const method = event => {
switch (event.key) {
case 'Enter':
if (refs.focus.current) {
if (refs.open.current) updateOpen('');else updateOpen(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) {
['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_1?.disabled && item_1?.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 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
rootDocument.addEventListener('keydown', method);
return () => {
rootDocument.removeEventListener('keydown', method);
};
}, []);
React.useEffect(() => {
if (open) {
const index_3 = refs.props.current.items.findIndex(item_4 => 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?.length) return;
const openIndex = items.findIndex(item__8 => item__8?.value === open);
return /*#__PURE__*/_jsx(ClickListener, {
onClickOutside: onClickOutside,
children: /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
ref: item_9 => {
if (ref) {
if (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: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-root'], className, classes.root])
}, other), {}, {
children: [/*#__PURE__*/_jsx(Line, {
gap: 0,
direction: "row",
align: "unset",
justify: "unset",
children: items.map((item_10, index_4) =>
// hovered and onClick add to the method
is('function', renderItem) ? renderItem(item_10, index_4) : /*#__PURE__*/_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: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-item', open === item_10.value && `onesy-MenuDesktop-open`, item_10.disabled && `onesy-MenuDesktop-disabled`], ItemProps?.className, classes.item, item_10.disabled && classes.item_disabled]),
children: [/*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
version: "l1"
}, TypeProps), {}, {
children: item_10.name !== undefined ? item_10.name : item_10.label
})), !!item_10.menu && /*#__PURE__*/_jsx(IconIndicator, _objectSpread({
size: 20,
className: classNames([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__*/_jsx("div", {
ref: item__10 => refs.menus.current[index_5] = item__10,
style: {
position: 'absolute',
visibility: 'hidden'
},
children: item_11.menu
}, index_5)), /*#__PURE__*/_jsx(Append, _objectSpread({
open: !!open,
anchorElement: refs.anchorElement.current,
position: "bottom",
alignment: "start",
element: ({
ref: refAppend,
values,
style: styleAppend
}) => {
return /*#__PURE__*/_jsx(Wrapper, _objectSpread(_objectSpread({
ref: refAppend,
onMouseEnter: updateOpenPure,
onMouseLeave: onMouseLeave
}, WrapperProps), {}, {
style: _objectSpread(_objectSpread(_objectSpread({}, append), styleAppend), {}, {
transition: 'none'
}, WrapperProps?.style),
children: /*#__PURE__*/_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__*/_jsxs(Surface, _objectSpread(_objectSpread({
tonal: tonal,
color: color,
version: version
}, WrapperMenuProps), {}, {
className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-menu-wrapper'], WrapperMenuProps?.className, classes.menuWrapper]),
style: _objectSpread(_objectSpread({}, append), WrapperMenuProps?.style),
children: [menu && menuTransition && /*#__PURE__*/_jsx(Transitions, {
switch: true,
mode: "in-out-follow",
children: /*#__PURE__*/_jsx(Transition, {
children: status => {
return /*#__PURE__*/React.cloneElement(menu, {
// For manual onClose within the element
onMenuDesktopClose: onClose,
className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-menu', status], ...(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?.props?.style), refs.menu.current?.props.style), is('function', menuTransitionStyle) && menuTransitionStyle(status, openItem))
});
}
}, openItem)
}), menu && !menuTransition && (/*#__PURE__*/React.cloneElement(menu, {
// For manual onClose within the element
onMenuDesktopClose: onClose,
className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-menu'], classes.menu]),
style: _objectSpread(_objectSpread(_objectSpread({}, menu?.props?.style), refs.menu.current?.style), append)
}))]
}))
}))
}));
}
}, AppendProps))]
}))
});
};
MenuDesktop.displayName = 'onesy-MenuDesktop';
export default MenuDesktop;