@onesy/ui-react
Version:
UI for React
285 lines (282 loc) • 14.4 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 _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 _IconMaterialArrowRightW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowRightW100"));
var _ListItem = _interopRequireDefault(require("../ListItem"));
var _List = _interopRequireDefault(require("../List"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Menu = _interopRequireDefault(require("../Menu"));
var _Expand = _interopRequireDefault(require("../Expand"));
var _Fade = _interopRequireDefault(require("../Fade"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "colorSelected", "size", "menu", "menuId", "menuOpen", "openMenu", "openMenuDefault", "openList", "openListDefault", "menuItem", "list", "preselected", "selected", "inset", "end", "indicator", "include", "footer", "menuCloseOnClick", "listCloseOnClick", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "ExpandIcon", "ListTransitionComponent", "ListProps", "ListTransitionComponentProps", "ExpandProps", "MenuProps"];
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 => ({
icon: {
transition: theme.methods.transitions.make('transform')
},
icon_open: {
transform: 'rotate(-180deg)'
}
}), {
name: 'onesy-ListItem'
});
const ListItemDelays = {
Transition: {
enter: 70
}
};
const MenuItem = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6;
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.onesyMenuItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const ListItem = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.ListItem) || _ListItem.default;
const List = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.List) || _List.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
const Menu = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Menu) || _Menu.default;
const Expand = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Expand) || _Expand.default;
const Fade = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Fade) || _Fade.default;
const {
ref,
tonal = true,
color = 'default',
colorSelected = props.color,
size = 'regular',
menu,
menuId,
menuOpen,
openMenu: openMenu_,
openMenuDefault,
openList: openList_,
openListDefault,
menuItem,
list: list_,
preselected,
selected,
inset,
end: end_,
indicator = true,
include,
footer,
menuCloseOnClick,
listCloseOnClick,
disabled,
onClick: onClick_,
onFocus: onFocus_,
onBlur: onBlur_,
onMouseEnter: onMouseEnter_,
onMouseLeave: onMouseLeave_,
ExpandIcon = _IconMaterialExpandMoreW.default,
ListTransitionComponent = Fade,
ListProps,
ListTransitionComponentProps: ListTransitionComponentProps_,
ExpandProps,
MenuProps = {
autoSelect: true
}
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [openMenu, setOpenMenu] = _react.default.useState(openMenuDefault !== undefined ? openMenuDefault : openMenu_);
const [openList, setOpenList] = _react.default.useState(openListDefault !== undefined ? openListDefault : openList_);
const [hover, setHover] = _react.default.useState(false);
const [focus, setFocus] = _react.default.useState(false);
const refs = {
root: _react.default.useRef(undefined),
props: _react.default.useRef(undefined),
openMenu: _react.default.useRef(undefined),
openList: _react.default.useRef(undefined),
focus: _react.default.useRef(undefined),
ids: {
primary: _react.default.useId(),
secondary: _react.default.useId()
}
};
refs.props.current = props;
refs.openMenu.current = openMenu;
refs.openList.current = openList;
refs.focus.current = focus;
const ListTransitionComponentProps = _objectSpread({
add: true,
delay: {
enter: ListItemDelays.Transition.enter
}
}, ListTransitionComponentProps_);
const list = list_ && _react.default.Children.toArray(list_).map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, _objectSpread({
key: index,
onClick: event => {
if (item.props.listCloseOnClick) onCloseList();
if ((0, _utils.is)('function', item.props.onClick)) item.props.onClick(event);
}
}, item === null || item === void 0 ? void 0 : item.props))));
const onClick = event_0 => {
if (!refs.props.current.disabled) {
if (refs.props.current.list) setOpenList(!refs.openList.current);
}
if ((0, _utils.is)('function', onClick_)) onClick_(event_0);
};
let end = end_;
if (menu) end = end_ || /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialArrowRightW.default, {});
if (list) end = end_ || indicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
size: 24,
fontSize: _utils2.iconFontSize,
onClick: onClick,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-icon-button'], classes.iconButton]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandIcon, {
className: (0, _styleReact.classNames)([classes.icon, openList && classes.icon_open])
})
});
_react.default.useEffect(() => {
var _refs$root$current;
const onKeyDown = event_1 => {
if (!refs.props.current.disabled) {
if (menu) {
if (refs.openMenu.current && (theme.direction === 'ltr' && event_1.key === 'ArrowLeft' || theme.direction === 'rtl' && event_1.key === 'ArrowRight')) setOpenMenu(false);
if (!refs.openMenu.current && (theme.direction === 'ltr' && event_1.key === 'ArrowRight' || theme.direction === 'rtl' && event_1.key === 'ArrowLeft')) setOpenMenu(true);
} else if (list) {
if (refs.openList.current && (event_1.key === 'ArrowUp' || theme.direction === 'ltr' && event_1.key === 'ArrowLeft' || theme.direction === 'rtl' && event_1.key === 'ArrowRight')) setOpenMenu(false);
if (!refs.openList.current && (event_1.key === 'ArrowDown' || theme.direction === 'ltr' && event_1.key === 'ArrowRight' || theme.direction === 'rtl' && event_1.key === 'ArrowLeft')) setOpenMenu(true);
if (event_1.key === 'Enter' && refs.focus.current) onClick();
} else {
if (event_1.key === 'Enter' && !refs.props.current.button && refs.focus.current) {
if ((0, _utils.is)('function', refs.props.current.onClick)) refs.props.current.onClick(event_1);
}
}
}
};
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', onKeyDown);
return () => {
rootDocument.removeEventListener('keydown', onKeyDown);
};
}, []);
_react.default.useEffect(() => {
if (openMenu_ !== openMenu) setOpenMenu(openMenu_);
}, [openMenu_]);
_react.default.useEffect(() => {
if (openList_ !== openList) setOpenList(openList_);
}, [openList_]);
_react.default.useEffect(() => {
if (menuOpen && preselected) refs.root.current.focus();
}, [preselected, menuOpen]);
_react.default.useEffect(() => {
if (menu) setOpenMenu(hover || preselected || selected);
}, [hover]);
_react.default.useEffect(() => {
if (menu) setOpenMenu(hover || focus || preselected || selected);
}, [focus]);
const onMouseEnter = event_2 => {
if (!disabled) setHover(true);
if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_2);
};
const onMouseLeave = event_3 => {
if (!disabled) {
setHover(false);
setFocus(false);
}
if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_3);
};
const onFocus = event_4 => {
if (event_4.target === event_4.currentTarget && !disabled) setFocus(true);
if ((0, _utils.is)('function', onFocus_)) onFocus_(event_4);
};
const onBlur = event_5 => {
if (event_5.target === event_5.currentTarget && !disabled) setFocus(false);
if ((0, _utils.is)('function', onBlur_)) onBlur_(event_5);
};
const onCloseList = () => {
if (!disabled) {
setOpenList(false);
setHover(false);
setFocus(false);
// if (is('function', onClose_)) onClose_();
}
};
const onCloseMenu = () => {
if (!disabled) {
setOpenMenu(false);
setHover(false);
setFocus(false);
// if (is('function', onClose_)) onClose_();
}
};
ListTransitionComponentProps.in = !!openList;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread({
ref: item_0 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_0);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_0;
}
refs.root.current = item_0;
},
tonal: tonal,
color: color,
colorSelected: colorSelected,
size: size,
inset: inset,
selected: selected,
preselected: preselected,
end: end,
disabled: disabled,
onClick: onClick,
onFocus: onFocus,
onBlur: onBlur,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
"aria-haspopup": !!menu,
"aria-expanded": openMenu,
menuItem: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MenuItem', theme) && ['onesy-MenuItem-root', `onesy-MenuItem-size-${size}`], classes.root]),
InteractionProps: {
focus
},
RootProps: {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && [menu && `onesy-ListItem-menu`, list && `onesy-ListItem-list`, menuItem && `onesy-ListItem-menu-item`, menuOpen && `onesy-ListItem-menu-open`, openMenu && `onesy-ListItem-open-menu`, openList && `onesy-ListItem-open-list`, menuItem && [inset && `onesy-ListItem-menu-item-inset`]]])
},
footer: (footer || menu || list) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [footer, list && /*#__PURE__*/(0, _jsxRuntime.jsx)(Expand, _objectSpread(_objectSpread({
in: openList,
parent: refs.root.current
}, ExpandProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListTransitionComponent, _objectSpread(_objectSpread({}, ListTransitionComponentProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(List, _objectSpread(_objectSpread({
indent: 5
}, ListProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-list'], ListProps === null || ListProps === void 0 ? void 0 : ListProps.className, classes.list]),
children: list
}))
}))
})), menu && /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, _objectSpread({
open: !!openMenu,
include: include,
onClose: onCloseMenu,
closeOnClickAway: false,
anchorElement: refs.root.current,
menuItems: menu,
transformOrigin: "left top",
transformOriginSwitch: "right top",
transformOriginRtl: "left top",
transformOriginRtlSwitch: "right top",
position: "right",
alignment: "start",
onMouseEnter: onMouseEnter
}, MenuProps))]
})
}, other))
});
};
MenuItem.displayName = 'onesy-MenuItem';
var _default = exports.default = MenuItem;