@itwin/core-react
Version:
A react component library of iTwin.js UI general purpose components
110 lines • 5.18 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module ContextMenu
*/
import * as React from "react";
import classnames from "classnames";
import { Key } from "ts-key-enum";
import { ConditionalBooleanValue } from "@itwin/appui-abstract";
import { TildeFinder } from "./TildeFinder.js";
import { Icon } from "../icons/IconComponent.js";
import { Badge } from "../badge/Badge.js";
/** Menu item component for use within a [[ContextMenu]] component.
* @public
* @deprecated in 4.16.0. Use {@link https://itwinui.bentley.com/docs/dropdownmenu iTwinUI MenuItem} instead.
*/
export class ContextMenuItem extends React.PureComponent {
_root = null;
_lastChildren;
_parsedChildren;
static defaultProps = {
disabled: false,
hidden: false,
isSelected: false,
};
constructor(props) {
super(props);
}
state = {};
render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onClick, className, style, onSelect, icon, disabled, hidden, onHover, isSelected, parentMenu, onHotKeyParsed, badgeType, // eslint-disable-line @typescript-eslint/no-deprecated
badgeKind, iconRight, hideIconContainer, ...props } = this.props;
const isDisabled = ConditionalBooleanValue.getValue(disabled);
const isHidden = ConditionalBooleanValue.getValue(hidden);
if (this._lastChildren !== this.props.children) {
this._parsedChildren = TildeFinder.findAfterTilde(this.props.children).node;
this._lastChildren = this.props.children;
}
return (React.createElement("div", { ...props, ref: (el) => {
this._root = el;
}, onClick: this._handleClick, style: style, onFocus: this._handleFocus, onKeyUp: this._handleKeyUp, onMouseOver: this._handleMouseOver, "data-testid": "core-context-menu-item", className: classnames("core-context-menu-item", className, isDisabled && "core-context-menu-disabled", isHidden && "core-context-menu-hidden", isSelected && "core-context-menu-is-selected"), role: "menuitem", tabIndex: isSelected ? 0 : -1, "aria-disabled": isDisabled, "aria-hidden": isHidden },
!hideIconContainer && (React.createElement("div", { className: "core-context-menu-icon" }, icon !== undefined && React.createElement(Icon, { iconSpec: icon }))),
React.createElement("div", { className: "core-context-menu-content" }, this._parsedChildren),
iconRight && (React.createElement("div", { className: classnames("core-context-menu-icon", "core-context-menu-icon-right") },
React.createElement(Icon, { iconSpec: iconRight }))),
(badgeKind || badgeType) && (React.createElement("div", { className: "core-context-menu-badge" },
React.createElement(Badge, { type: badgeKind || badgeType })))));
}
componentDidMount() {
this._updateHotkey(this.props.children);
}
/** @internal */
componentDidUpdate(prevProps) {
if (this.props.children !== prevProps.children) {
this._updateHotkey(this.props.children);
}
}
_updateHotkey = (node) => {
let hotKey;
const isDisabled = ConditionalBooleanValue.getValue(this.props.disabled);
const isHidden = ConditionalBooleanValue.getValue(this.props.hidden);
if (!isDisabled && !isHidden)
hotKey = TildeFinder.findAfterTilde(node).character;
else
hotKey = undefined;
if (hotKey && hotKey !== this.state.hotKey) {
this.setState({ hotKey });
if (this.props.onHotKeyParsed)
this.props.onHotKeyParsed(hotKey);
}
};
_handleFocus = (event) => {
event.stopPropagation();
};
_handleMouseOver = (_event) => {
if (this._root &&
this._root.style.visibility !== "hidden" &&
this.props.onHover) {
this.props.onHover();
}
};
select = () => {
if (this._root) {
this._root.click();
if (this.props.parentMenu && this.props.parentMenu.props.parentSubmenu)
this.props.parentMenu.props.parentSubmenu.close(true);
}
};
_handleClick = (event) => {
const isDisabled = ConditionalBooleanValue.getValue(this.props.disabled);
if (isDisabled)
return;
if (this.props.onClick)
this.props.onClick(event);
if (this.props.onSelect)
this.props.onSelect(event);
};
_handleKeyUp = (event) => {
const isDisabled = ConditionalBooleanValue.getValue(this.props.disabled);
if (event.key === Key.Enter.valueOf() &&
this.props.onSelect !== undefined &&
!isDisabled) {
this.props.onSelect(event);
}
};
}
//# sourceMappingURL=ContextMenuItem.js.map