@amaui/ui-react
Version:
UI for React
475 lines (474 loc) • 18.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { is, isEnvironment } from '@amaui/utils';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import IconMaterialExpandMore from '@amaui/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';
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: 'amaui-MenuDesktop'
});
const Wrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
const theme = useAmauiTheme();
const {
onMouseEnter,
onMouseLeave,
style
} = props;
return /*#__PURE__*/React.createElement("div", {
ref: ref,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
style: _objectSpread({
zIndex: theme.z_index.menu_modal
}, style)
}, props.children);
});
const MenuDesktop = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiMenuDesktop?.props?.default), props_), [props_]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const Grow = React.useMemo(() => theme?.elements?.Grow || GrowElement, [theme]);
const Append = React.useMemo(() => theme?.elements?.Append || AppendElement, [theme]);
const Transitions = React.useMemo(() => theme?.elements?.Transitions || TransitionsElement, [theme]);
const ClickListener = React.useMemo(() => theme?.elements?.ClickListener || ClickListenerElement, [theme]);
const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
const {
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 [menuOpened, setMenuOpened] = 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_ => item_.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_ => item_.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, index) => {
if (item) {
refs.menuRects.current[index] = item.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 = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
refs.props.current.items.reverse();
let index = refs.props.current.items.findIndex(item_ => !item_.disabled && item_.menu);
refs.props.current.items.reverse();
if (index > -1) {
index = refs.props.current.items.length - 1 - index;
const item = refs.props.current.items[index];
if (item) {
const itemHTML = tabIndexItems.find(item_ => item_.dataset.value === item.value);
updateOpen(item.value);
if (itemHTML) itemHTML.focus();
}
}
}
break;
case 'End':
// If any item is in the focus
if (refs.focus.current) {
event.preventDefault();
const tabIndexItems = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
const index = refs.props.current.items.findIndex(item_ => !item_.disabled && item_.menu);
if (index > -1) {
const item = refs.props.current.items[index];
if (item) {
const itemHTML = tabIndexItems.find(item_ => item_.dataset.value === item.value);
updateOpen(item.value);
if (itemHTML) itemHTML.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 = refs.props.current.items.findIndex(item_ => item_.value === refs.focus.current.value);
let indexNew;
let i = index;
let item;
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 = refs.props.current.items[i];
if (!item?.disabled && item?.menu) indexNew = i;
}
if (item) {
const itemHTML = tabIndexItems.find(item_ => item_.dataset.value === item.value);
updateOpen(item.value);
if (itemHTML) itemHTML.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 = refs.props.current.items.findIndex(item => item?.value === open);
const rect = refs.menuRects.current[index];
if (rect) {
setAppend({
width: rect.width,
height: rect.height
});
}
}
}, [open]);
const onBlur = React.useCallback(() => {
if (refs.focus.current) {
updateOpen('');
setFocus('');
}
}, []);
const onFocus = React.useCallback(item => {
if (item && !item.disabled && item.menu) {
setFocus(item);
if (open !== item.value) updateOpen(item.value);
}
}, [open]);
const onMouseLeave = React.useCallback(item => {
updateOpen('');
}, []);
const onMouseEnter = React.useCallback(item => {
if (item && !item.disabled && item.menu) {
updateOpen(item.value);
}
}, []);
const onClick = React.useCallback(item => {
if (item && !item.disabled && item.menu) {
open ? updateOpen('') : updateOpen(item.value);
setTimeout(() => setFocus(''));
}
}, [open]);
const onClickOutside = React.useCallback(() => {
if (open) updateOpen('');
}, [open]);
// If no items don't render anything
// not to waste html space
if (!items?.length) return;
const openIndex = items.findIndex(item_ => item_?.value === open);
return /*#__PURE__*/React.createElement(ClickListener, {
onClickOutside: onClickOutside
}, /*#__PURE__*/React.createElement(Line, _extends({
ref: item => {
if (ref) {
if (is('function', ref)) ref(item);else ref.current = item;
}
refs.root.current = item;
},
gap: 0,
direction: "column",
align: "unset",
justify: "unset",
className: classNames([staticClassName('MenuDesktop', theme) && ['amaui-MenuDesktop-root'], className, classes.root])
}, other), /*#__PURE__*/React.createElement(Line, {
gap: 0,
direction: "row",
align: "unset",
justify: "unset"
}, items.map((item, index) =>
// hovered and onClick add to the method
is('function', renderItem) ? renderItem(item, index) : /*#__PURE__*/React.createElement(Line, _extends({
key: index,
ref: item_ => {
if (!refs.items.current.includes(item)) refs.items.current.push(item_);
},
tabIndex: !item.disabled && item.menu ? 0 : undefined,
"data-value": item.value,
gap: 0.5,
direction: "row",
align: "center"
}, ItemProps, !!item.menu && openOnClick && {
onClick: () => onClick(item)
}, !!item.menu && !mobile && openOnFocus && {
onFocus: () => onFocus(item),
onBlur: () => onBlur()
}, !!item.menu && openOnHover && {
onMouseEnter: () => onMouseEnter(item),
onMouseLeave: () => onMouseLeave(item)
}, {
className: classNames([staticClassName('MenuDesktop', theme) && ['amaui-MenuDesktop-item', open === item.value && `amaui-MenuDesktop-open`, item.disabled && `amaui-MenuDesktop-disabled`], ItemProps?.className, classes.item, item.disabled && classes.item_disabled])
}), /*#__PURE__*/React.createElement(Type, _extends({
version: "l1"
}, TypeProps), item.name !== undefined ? item.name : item.label), !!item.menu && /*#__PURE__*/React.createElement(IconIndicator, _extends({
size: 20,
className: classNames([staticClassName('MenuDesktop', theme) && ['amaui-MenuDesktop-indicator'], classes.indicator, inProp && open === item.value && classes.indicator_open])
}, IconProps))))), !init && items.map((item, index) => /*#__PURE__*/React.createElement("div", {
ref: item_ => refs.menus.current[index] = item_,
key: index,
style: {
position: 'absolute',
visibility: 'hidden'
}
}, item.menu)), /*#__PURE__*/React.createElement(Append, _extends({
open: !!open,
anchorElement: refs.anchorElement.current,
position: "bottom",
alignment: "start",
element: _ref => {
let {
ref: refAppend,
values,
style: styleAppend
} = _ref;
return /*#__PURE__*/React.createElement(Wrapper, _extends({
ref: refAppend,
onMouseEnter: updateOpenPure,
onMouseLeave: onMouseLeave
}, WrapperProps, {
style: _objectSpread(_objectSpread(_objectSpread({}, append), styleAppend), {}, {
transition: 'none'
}, WrapperProps?.style)
}), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
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), /*#__PURE__*/React.createElement(Surface, _extends({
tonal: tonal,
color: color,
version: version
}, WrapperMenuProps, {
className: classNames([staticClassName('MenuDesktop', theme) && ['amaui-MenuDesktop-menu-wrapper'], WrapperMenuProps?.className, classes.menuWrapper, menuOpened && classes.menuWrapper_open]),
style: _objectSpread(_objectSpread({}, append), WrapperMenuProps?.style)
}), menu && menuTransition && /*#__PURE__*/React.createElement(Transitions, {
switch: true,
mode: "in-out-follow"
}, /*#__PURE__*/React.createElement(Transition, {
key: openItem
}, status => {
return /*#__PURE__*/React.cloneElement(menu, {
// For manual onClose within the element
onMenuDesktopClose: onClose,
className: classNames([staticClassName('MenuDesktop', theme) && ['amaui-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))
});
})), menu && !menuTransition && /*#__PURE__*/React.cloneElement(menu, {
// For manual onClose within the element
onMenuDesktopClose: onClose,
className: classNames([staticClassName('MenuDesktop', theme) && ['amaui-MenuDesktop-menu'], classes.menu]),
style: _objectSpread(_objectSpread(_objectSpread({}, menu?.props?.style), refs.menu.current?.style), append)
}))));
}
}, AppendProps))));
});
MenuDesktop.displayName = 'amaui-MenuDesktop';
export default MenuDesktop;