@elyra/canvas 12.41.0 → 12.42.0

package/src/toolbar/toolbar-button-item.jsx

@@ -0,0 +1,354 @@
+/*
+ * Copyright 2017-2023 Elyra Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+import Tooltip from "../tooltip/tooltip.jsx";
+import ArrangeHorizontally from "./../../assets/images/arrange_horizontally.svg";
+import ArrangeVertically from "./../../assets/images/arrange_vertically.svg";
+import ToggleNotificationPanel from "./../../assets/images/notification_counter_icon.svg";
+import PaletteClose from "./../../assets/images/palette/palette_close.svg";
+import PaletteOpen from "./../../assets/images/palette/palette_open.svg";
+import ZoomToFit from "./../../assets/images/zoom_to_fit.svg";
+
+import { Button } from "carbon-components-react";
+import SVG from "react-inlinesvg";
+import classNames from "classnames";
+import { StopFilledAlt16, Play16, Undo16, Redo16, Chat16, ChatOff16, Result16,
+	Cut16, Copy16, Paste16, Edit16,	ColorPalette16, Maximize16, Minimize16,
+	Launch16, AddComment16, TrashCan16, ZoomIn16, ZoomOut16,
+	ChevronRight16, ChevronDown16, ChevronUp16 } from "@carbon/icons-react";
+import { TOOLBAR_STOP, TOOLBAR_RUN, TOOLBAR_UNDO, TOOLBAR_REDO,
+	TOOLBAR_CUT, TOOLBAR_COPY, TOOLBAR_PASTE, TOOLBAR_CLIPBOARD,
+	TOOLBAR_CREATE_COMMENT, TOOLBAR_CREATE_AUTO_COMMENT, TOOLBAR_COLOR_BACKGROUND,
+	TOOLBAR_DELETE_SELECTED_OBJECTS, TOOLBAR_DELETE_LINK,
+	TOOLBAR_ZOOM_IN, TOOLBAR_ZOOM_OUT, TOOLBAR_ZOOM_FIT,
+	TOOLBAR_ARRANGE_HORIZONALLY, TOOLBAR_ARRANGE_VERTICALLY,
+	TOOLBAR_OPEN_PALETTE, TOOLBAR_CLOSE_PALETTE, TOOLBAR_TOGGLE_NOTIFICATION_PANEL,
+	TOOLBAR_SHOW_COMMENTS, TOOLBAR_HIDE_COMMENTS,
+	TOOLBAR_EXPAND_SUPERNODE_IN_PLACE, TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE,
+	TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE, TOOLBAR_SET_NODE_LABEL_EDIT, TOOLBAR_SET_COMMENT_EDIT_MODE }
+	from "../common-canvas/constants/canvas-constants.js";
+
+class ToolbarButtonItem extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.buttonRef = React.createRef();
+	}
+
+	componentDidUpdate() {
+		if (this.props.isFocusInToolbar &&
+				this.props.buttonFocusAction === this.props.actionObj.action) {
+			this.buttonRef.current.focus();
+		}
+	}
+
+	// Returns a default icon, if there is one, for the action passed in.
+	// It also may be set to disabled state.
+	getDefaultIcon(actionObj) {
+		const disabled = !actionObj.enable;
+
+		switch (actionObj.action) {
+		case (TOOLBAR_STOP):
+			return <StopFilledAlt16 disabled={disabled} />;
+		case (TOOLBAR_RUN):
+			return <Play16 disabled={disabled} />;
+		case (TOOLBAR_EXPAND_SUPERNODE_IN_PLACE):
+			return <Maximize16 disabled={disabled} />;
+		case (TOOLBAR_COLLAPSE_SUPERNODE_IN_PLACE):
+			return <Minimize16 disabled={disabled} />;
+		case (TOOLBAR_EXPAND_SUPERNODE_FULL_PAGE):
+			return <Launch16 disabled={disabled} />;
+		case (TOOLBAR_UNDO):
+			return <Undo16 disabled={disabled} />;
+		case (TOOLBAR_REDO):
+			return <Redo16 disabled={disabled} />;
+		case (TOOLBAR_CLIPBOARD):
+			return <Result16 disabled={disabled} />;
+		case (TOOLBAR_CUT):
+			return <Cut16 disabled={disabled} />;
+		case (TOOLBAR_COPY):
+			return <Copy16 disabled={disabled} />;
+		case (TOOLBAR_PASTE):
+			return <Paste16 disabled={disabled} />;
+		case (TOOLBAR_CREATE_COMMENT):
+		case (TOOLBAR_CREATE_AUTO_COMMENT):
+			return <AddComment16 disabled={disabled} />;
+		case (TOOLBAR_SHOW_COMMENTS):
+			return <Chat16 disabled={disabled} />;
+		case (TOOLBAR_HIDE_COMMENTS):
+			return <ChatOff16 disabled={disabled} />;
+		case (TOOLBAR_COLOR_BACKGROUND):
+			return <ColorPalette16 disabled={disabled} />;
+		case (TOOLBAR_DELETE_LINK):
+		case (TOOLBAR_DELETE_SELECTED_OBJECTS):
+			return <TrashCan16 disabled={disabled} />;
+		case (TOOLBAR_SET_COMMENT_EDIT_MODE):
+		case (TOOLBAR_SET_NODE_LABEL_EDIT):
+			return <Edit16 disabled={disabled} />;
+		case (TOOLBAR_ZOOM_IN):
+			return <ZoomIn16 disabled={disabled} />;
+		case (TOOLBAR_ZOOM_OUT):
+			return <ZoomOut16 disabled={disabled} />;
+
+		case (TOOLBAR_ZOOM_FIT):
+			return <SVG src={ZoomToFit} disabled={disabled} />;
+		case (TOOLBAR_ARRANGE_HORIZONALLY):
+			return <SVG src={ArrangeHorizontally} disabled={disabled} />;
+		case (TOOLBAR_ARRANGE_VERTICALLY):
+			return <SVG src={ArrangeVertically} disabled={disabled} />;
+		case (TOOLBAR_OPEN_PALETTE):
+			return <SVG src={PaletteOpen} disabled={disabled} />;
+		case (TOOLBAR_CLOSE_PALETTE):
+			return <SVG src={PaletteClose} disabled={disabled} />;
+		case (TOOLBAR_TOGGLE_NOTIFICATION_PANEL):
+			return <SVG src={ToggleNotificationPanel} disabled={disabled} />;
+
+		default:
+			return null;
+		}
+	}
+
+	generateLabel(label, disable, isInMenu, incLabelWithIcon) {
+		let className = "toolbar-icon-label";
+		className += this.generateLabelType(isInMenu, incLabelWithIcon);
+		className += disable ? " disabled" : "";
+		return (<div className={className}>{label}</div>);
+	}
+
+	generateLabelType(isInMenu, inLabelWithIcon) {
+		if (isInMenu) {
+			return " overflow";
+		} else if (inLabelWithIcon === "before") {
+			return " before";
+		} else if (inLabelWithIcon === "after") {
+			return " after";
+		}
+		return "";
+	}
+
+	generateIcon(actionObj) {
+		let icon = this.getDefaultIcon(actionObj);
+
+		// Host application provided icon. This will override any default icon.
+		if (actionObj.iconEnabled) {
+			const iconEnabled = actionObj.iconEnabled;
+			const iconDisabled = actionObj.iconDisabled || actionObj.iconEnabled;
+			const customIcon = actionObj.enable ? iconEnabled : iconDisabled;
+			const id = "toolbar-icon-" + this.props.instanceId + " -" + actionObj.action;
+
+			if (typeof customIcon === "string") {
+				icon = (<SVG id={id} src={customIcon} disabled={!actionObj.enable} />);
+			} else {
+				icon = customIcon;
+			}
+		}
+
+		if (icon) {
+			return (
+				<div className={"toolbar-icon"}>
+					{icon}
+				</div>
+			);
+		}
+		return null;
+	}
+
+	generateButton(actionObj) {
+		let labelBefore = null;
+		let labelAfter = null;
+
+		if (this.props.isInMenu) {
+			labelAfter = this.generateLabel(actionObj.label, !actionObj.enable, true);
+
+		} else if (actionObj.incLabelWithIcon === "before") {
+			labelBefore = this.generateLabel(actionObj.label, !actionObj.enable, false, actionObj.incLabelWithIcon);
+
+		} else if (actionObj.incLabelWithIcon === "after") {
+			labelAfter = this.generateLabel(actionObj.label, !actionObj.enable, false, actionObj.incLabelWithIcon);
+		}
+
+		const icon = this.generateIcon(actionObj);
+		const textContent = actionObj.textContent ? (<div className="toolbar-text-content"> {actionObj.textContent} </div>) : null;
+
+		const itemContentClassName = classNames(
+			"toolbar-item-content",
+			actionObj.className ? actionObj.className : null,
+			{ "overflow": this.props.isInMenu, "disabled": !actionObj.enable, "default": !actionObj.kind });
+
+		// If no 'kind' is set, use ghost and then override colors using the "default" class in innerDivClassName.
+		const kind = actionObj.kind || "ghost";
+
+		const chevronIcon = this.generateChevronIcon(actionObj);
+
+		let buttonContent = (
+			<div className={itemContentClassName}>
+				{labelBefore}
+				{icon}
+				{labelAfter}
+				{textContent}
+				{chevronIcon}
+			</div>
+		);
+
+		buttonContent = this.wrapInTooltip(buttonContent);
+
+		// Only specify an aria label for the button if a label is not displayed
+		// with the button icon.
+		const ariaLabel = actionObj.incLabelWithIcon ? null : actionObj.label;
+		const tabIndex = this.props.buttonFocusAction === actionObj.action ? 0 : -1;
+
+		const button = (
+			<Button kind={kind}
+				ref={this.buttonRef}
+				onClick={this.props.actionClickHandler}
+				disabled={!actionObj.enable}
+				aria-label={ariaLabel}
+				size={this.props.size}
+				tabIndex={tabIndex}
+			>
+				{buttonContent}
+			</Button>
+		);
+
+		return button;
+	}
+
+	// Returns a chevron icon if the action icon is displaying a sub-menu or
+	// sub-panel. The chevron will:
+	//  * point right if this action item is in a drop down menu
+	//  * point down if this action item is displayed with text in the toolbar
+	//    and the menu isn't displayed
+	//  * point up if this action item is displayed with text in the toolbar
+	//    and the menu is displayed
+	//  * be a mini-chevron (small triangle in the bottom right of icon) if this
+	//    action item isn't displayed with text.
+	generateChevronIcon(actionObj) {
+		if (actionObj.subMenu || actionObj.subPanel) {
+			if (this.props.isInMenu) {
+				return (<ChevronRight16 />);
+			}
+			if (actionObj.incLabelWithIcon === "before" ||
+					actionObj.incLabelWithIcon === "after") {
+				const chev = this.props.subAreaDisplayed ? (<ChevronUp16 />) : (<ChevronDown16 />);
+				return (<div className={"toolbar-up-down-chevron"}>{chev}</div>);
+			}
+			return this.generateChevronMini();
+		}
+		return null;
+	}
+
+	// Returns an svg to display the little triangle that appears in the bottom
+	// right corner of icons that, when clicked, show a drop down menu.
+	generateChevronMini() {
+		const path = this.props.size === "sm" ? "M 29 29 L 29 23 23 29 Z" : "M 37 37 L 37 30 30 37 Z";
+		return (
+			<svg className="toolbar-tick-svg">
+				<path d={path} className="toolbar-tick-mark" />
+			</svg>
+		);
+	}
+
+	wrapInTooltip(content) {
+		if (!this.props.isInMenu && (this.showLabelAsTip(this.props.actionObj) || this.props.actionObj.tooltip)) {
+			const tip = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;
+			const tooltipId = this.props.actionName + "-" + this.props.instanceId + "-tooltip";
+			const enableTooltip = this.props.actionObj.enable || this.props.actionObj.jsx; // JSX 'tools' don't have enable attr so always display a tooltip for them.
+			const direction = this.props.tooltipDirection ? this.props.tooltipDirection : "bottom";
+
+			return (
+				<Tooltip id={tooltipId} tip={tip} disable={!enableTooltip} className="icon-tooltip" direction={direction}>
+					{content}
+				</Tooltip>
+			);
+		}
+		return content;
+	}
+
+	// Returns true if the label should be shown as a tooltip or false if not.
+	// We do not show the label as a tooltip if it is already shown in the
+	// toolbar next to the icon (i.e. incLabelWithIcon is set to something).
+	showLabelAsTip(actionObj) {
+		if (actionObj.label) {
+			if (actionObj.incLabelWithIcon === "before" ||
+					actionObj.incLabelWithIcon === "after") {
+				return false;
+			}
+			return true;
+		}
+		return false;
+	}
+
+	render() {
+		const actionObj = this.props.actionObj;
+		let divContent = null;
+
+		if (actionObj.jsx) {
+			divContent = this.wrapInTooltip(actionObj.jsx);
+		} else {
+			divContent = this.generateButton(actionObj);
+		}
+
+		return divContent;
+	}
+}
+
+ToolbarButtonItem.propTypes = {
+	actionObj: PropTypes.shape({
+		action: PropTypes.string.isRequired,
+		label: PropTypes.oneOfType([
+			PropTypes.string,
+			PropTypes.object
+		]),
+		incLabelWithIcon: PropTypes.oneOf(["no", "before", "after"]),
+		enable: PropTypes.bool,
+		iconEnabled: PropTypes.oneOfType([
+			PropTypes.string,
+			PropTypes.object
+		]),
+		iconDisabled: PropTypes.oneOfType([
+			PropTypes.string,
+			PropTypes.object
+		]),
+		className: PropTypes.string,
+		textContent: PropTypes.string,
+		isSelected: PropTypes.bool,
+		kind: PropTypes.string,
+		closeSubAreaOnClick: PropTypes.bool,
+		subMenu: PropTypes.array,
+		subPanel: PropTypes.any,
+		subPanelData: PropTypes.object,
+		jsx: PropTypes.object,
+		tooltip: PropTypes.oneOfType([
+			PropTypes.string,
+			PropTypes.object,
+			PropTypes.func
+		])
+	}),
+	actionName: PropTypes.string.isRequired,
+	tooltipDirection: PropTypes.oneOf(["top", "bottom"]),
+	instanceId: PropTypes.number.isRequired,
+	isInMenu: PropTypes.bool,
+	subAreaDisplayed: PropTypes.bool,
+	actionClickHandler: PropTypes.func,
+	buttonFocusAction: PropTypes.string,
+	isFocusInToolbar: PropTypes.bool,
+	size: PropTypes.oneOf(["md", "sm"])
+};
+
+export default ToolbarButtonItem;

package/src/toolbar/toolbar-divider-item.jsx

@@ -18,21 +18,20 @@ import React from "react";
 import PropTypes from "prop-types";
 
 class ToolbarDividerItem extends React.Component {
-
 	render() {
-		const dividerClassName = this.props.overflow ? "toolbar-divider-overflow" : "toolbar-divider";
+		const dividerClassName = this.props.isInMenu ? "toolbar-divider-overflow" : "toolbar-divider";
 
 		// Add a space as content. When using display: inline-block the div needs
 		// some content so it is displayed inline with the other elements of the
 		// toolbar. With no content it is displayed above (!) the other elements.
 		return (
-			<div className={dividerClassName} data-toolbar-item tabIndex={-1} aria-hidden >&nbsp;</div>
+			<div className={dividerClassName} tabIndex={-1} aria-hidden >&nbsp;</div>
 		);
 	}
 }
 
 ToolbarDividerItem.propTypes = {
-	overflow: PropTypes.bool
+	isInMenu: PropTypes.bool
 };
 
 export default ToolbarDividerItem;

package/src/toolbar/toolbar-overflow-item.jsx

@@ -20,7 +20,7 @@ import PropTypes from "prop-types";
 import { v4 as uuid4 } from "uuid";
 import { Button } from "carbon-components-react";
 import { OverflowMenuVertical16 } from "@carbon/icons-react";
-import ToolbarOverflowMenu from "./toolbar-overflow-menu.jsx";
+import ToolbarSubMenu from "./toolbar-sub-menu.jsx";
 
 class ToolbarOverflowItem extends React.Component {
 	constructor(props) {
@@ -29,9 +29,19 @@ class ToolbarOverflowItem extends React.Component {
 		this.state = {
 			showExtendedMenu: false
 		};
+
+		this.buttonRef = React.createRef();
+
 		this.uuid = uuid4();
 		this.toggleExtendedMenu = this.toggleExtendedMenu.bind(this);
 		this.clickOutside = this.clickOutside.bind(this);
+		this.closeSubMenu = this.closeSubMenu.bind(this);
+	}
+
+	componentDidUpdate() {
+		if (this.props.toolbarFocusAction === this.props.action && this.props.isFocusInToolbar && !this.state.showExtendedMenu) {
+			this.buttonRef.current.focus();
+		}
 	}
 
 	// We must remove the eventListener in case this class is unmounted due
@@ -40,65 +50,96 @@ class ToolbarOverflowItem extends React.Component {
 		document.removeEventListener("click", this.clickOutside, false);
 	}
 
-	genOverflowButtonClass() {
-		return "toolbar-spacer toolbar-index-" + this.props.index + " toolbar-uuid-" + this.uuid;
+	// Called by toolbar.jsx
+	getAction() {
+		return this.props.action;
+	}
+
+	closeSubMenu() {
+		this.setState({ showExtendedMenu: false });
+	}
+
+	openSubMenu() {
+		this.setState({ showExtendedMenu: true });
+	}
+
+	genOverflowButtonClassName() {
+		return "toolbar-overflow-container " + this.genIndexClassName() + " " + this.genUuidClassName();
+	}
+
+	genIndexClassName() {
+		return "toolbar-index-" + this.props.index;
 	}
 
+	genUuidClassName() {
+		return "toolbar-uuid-" + this.uuid;
+	}
+
+	// When the overflow item is clicked to open the overflow menu we must set the
+	// index of the overflow items so the overflow menu can be correctly constructed.
+	// The overflow index values are used to split out the overflow menu action items
+	// from the left bar and right bar.
+	// When the overflow menu is closed we set the overflow index values to null.
 	toggleExtendedMenu() {
 		if (this.state.showExtendedMenu) {
 			document.removeEventListener("click", this.clickOutside, false);
+			this.props.setOverflowIndex(null); // Clear the indexes
+			this.closeSubMenu();
+			this.props.setToolbarFocusAction(this.props.action); // This will not set focus on this item
+
 		} else {
 			document.addEventListener("click", this.clickOutside, false);
+			this.props.setOverflowIndex(this.props.index);
+			this.openSubMenu();
+			this.props.setToolbarFocusAction(this.props.action);
 		}
-
-		if (this.props.setResizeHandler) {
-			if (this.state.showExtendedMenu) {
-				this.props.setResizeHandler(null);
-			} else {
-				this.props.setResizeHandler(() => {
-					this.setState({ showExtendedMenu: false });
-				});
-			}
-		}
-
-		this.setState({ showExtendedMenu: !this.state.showExtendedMenu });
 	}
 
 	clickOutside(evt) {
 		if (this.state.showExtendedMenu) {
-			const items = document.getElementsByClassName("toolbar-uuid-" + this.uuid);
-			const isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;
-
-			if (!isOver) {
+			// Selector for the overflow-container that contains the overflow icon
+			// and submenu (if submenu is open).
+			const selector = "." + this.genIndexClassName();
+			const isClickInOverflowContainer = evt.target.closest(selector);
+			if (!isClickInOverflowContainer) {
 				this.setState({ showExtendedMenu: false });
 			}
 		}
 	}
 
 	render() {
-		if (this.props.setResizeHandler && !this.state.showExtendedMenu) {
-			this.props.setResizeHandler(null);
-		}
-
 		let overflowMenu = null;
 		if (this.state.showExtendedMenu) {
-			const menuItems = this.props.generateExtensionMenuItems(this.props.index);
+			const actionItemRect = this.buttonRef.current.getBoundingClientRect();
 			overflowMenu = (
-				<ToolbarOverflowMenu
-					menuItems={menuItems}
+				<ToolbarSubMenu
+					ref={this.subMenuRef}
+					subMenuActions={this.props.subMenuActions}
+					instanceId={this.props.instanceId}
+					toolbarActionHandler={this.props.toolbarActionHandler}
+					closeSubArea={this.closeSubMenu}
+					setToolbarFocusAction={this.props.setToolbarFocusAction}
+					actionItemRect={actionItemRect}
+					expandDirection={"vertical"}
 					containingDivId={this.props.containingDivId}
-					buttonClass={"toolbar-uuid-" + this.uuid}
+					parentSelector={".toolbar-overflow-container"}
+					isOverflowMenu
+					isCascadeMenu={false}
+					size={this.props.size}
 				/>
 			);
 		}
 
+		const tabIndex = this.props.toolbarFocusAction === this.props.action ? 0 : -1;
+
 		return (
-			<div className={this.genOverflowButtonClass()} >
+			<div className={this.genOverflowButtonClassName()} data-toolbar-action={this.props.action}>
 				<div className={"toolbar-overflow-item"}>
-					<Button kind="ghost"
-						tabIndex={-1}
+					<Button
+						ref={this.buttonRef}
+						kind="ghost"
+						tabIndex={tabIndex}
 						onClick={this.toggleExtendedMenu}
-						onFocus={this.props.onFocus}
 						aria-label={this.props.label}
 						size={this.props.size}
 					>
@@ -117,12 +158,17 @@ class ToolbarOverflowItem extends React.Component {
 
 ToolbarOverflowItem.propTypes = {
 	index: PropTypes.number.isRequired,
-	generateExtensionMenuItems: PropTypes.func,
-	setResizeHandler: PropTypes.func,
-	containingDivId: PropTypes.string,
-	onFocus: PropTypes.func,
+	action: PropTypes.string,
 	label: PropTypes.string,
-	size: PropTypes.oneOf(["md", "sm"])
+	size: PropTypes.oneOf(["md", "sm"]),
+	subMenuActions: PropTypes.array,
+	setOverflowIndex: PropTypes.func,
+	toolbarActionHandler: PropTypes.func,
+	instanceId: PropTypes.number.isRequired,
+	containingDivId: PropTypes.string,
+	toolbarFocusAction: PropTypes.string,
+	setToolbarFocusAction: PropTypes.func,
+	isFocusInToolbar: PropTypes.bool
 };
 
 export default ToolbarOverflowItem;