@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
73 lines • 4.29 kB
JavaScript
/* eslint-disable @typescript-eslint/ban-types */
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import { STYLE } from './MenuItem.constants';
import './MenuItem.style.scss';
import ListItemBase from '../ListItemBase';
import { useMenuItem } from '@react-aria/menu';
import ListItemBaseSection from '../ListItemBaseSection';
import Icon from '../Icon';
import classNames from 'classnames';
import { useMenuContext, useMenuAppearanceContext } from '../Menu/Menu';
var MenuItem = function (props) {
var _a;
var _b;
var item = props.item, state = props.state, onAction = props.onAction, tickPosition = props.tickPosition, classNameSelectedItem = props.classNameSelectedItem, groupItemSize = props.itemSize;
var ref = React.useRef();
var isDisabled = state.disabledKeys.has(item.key);
var isSelected = state.selectionManager.selectedKeys.has(item.key);
var _c = useMenuContext({ closeOnSelect: (_b = item === null || item === void 0 ? void 0 : item.props) === null || _b === void 0 ? void 0 : _b.closeOnSelect }), onClose = _c.onClose, closeOnSelect = _c.closeOnSelect;
var _d = useMenuAppearanceContext({ tickPosition: tickPosition, classNameSelectedItem: classNameSelectedItem, itemSize: groupItemSize }), itemShape = _d.itemShape, itemSize = _d.itemSize, itemTickPosition = _d.tickPosition, itemclassNameSelectedItem = _d.classNameSelectedItem;
var menuItemProps = useMenuItem({
isSelected: isSelected,
key: item.key,
isDisabled: isDisabled,
onClose: onClose,
closeOnSelect: closeOnSelect,
onAction: onAction,
'aria-label': item['aria-label'],
}, state, ref).menuItemProps;
// I think there is a bug in aria, where useMenuItem has default behavior to hover items on hover
// so deleting these event listeners
delete menuItemProps.onMouseEnter;
delete menuItemProps.onMouseLeave;
delete menuItemProps.onPointerEnter;
delete menuItemProps.onPointerLeave;
delete menuItemProps.onKeyDown; // we want our passed onKeyDown to be used instaed of useMenuItem aria's function
var tickIcon = (React.createElement(Icon, { fillColor: "var(--mds-color-theme-control-active-normal)", name: "check", weight: "bold", scale: 16 }));
var renderSections = function () {
if (itemTickPosition === 'left') {
return (React.createElement(React.Fragment, null,
React.createElement(ListItemBaseSection, { position: "start" }, isSelected ? tickIcon : React.createElement("div", { className: STYLE.tickPlaceholder })),
React.createElement(ListItemBaseSection, { position: "fill", title: item === null || item === void 0 ? void 0 : item.textValue }, item.rendered)));
}
else if (itemTickPosition === 'right') {
return (React.createElement(React.Fragment, null,
React.createElement(ListItemBaseSection, { position: "fill", title: item === null || item === void 0 ? void 0 : item.textValue }, item.rendered),
isSelected && React.createElement(ListItemBaseSection, { position: "end" }, tickIcon)));
}
else {
return (React.createElement(React.Fragment, null,
React.createElement(ListItemBaseSection, { position: "fill", title: item === null || item === void 0 ? void 0 : item.textValue }, item.rendered)));
}
};
return (React.createElement(ListItemBase, __assign({ size: itemSize, shape: itemShape, className: classNames(STYLE.wrapper, (_a = {},
_a[itemclassNameSelectedItem] = isSelected && itemclassNameSelectedItem,
_a)), ref: ref, isDisabled: isDisabled, isPadded: true }, menuItemProps, { tooltipProps: item.props.tooltipProps }), renderSections()));
};
/**
* Should not be exported as part of the library. Used in implementation of Menu component.
* @internal
*/
export default MenuItem;
//# sourceMappingURL=MenuItem.js.map