@elyra/canvas 12.41.0 → 12.42.0

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

@@ -17,33 +17,13 @@
 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 ToolbarButtonItem from "./toolbar-button-item.jsx";
 
-import { Button } from "carbon-components-react";
-import SVG from "react-inlinesvg";
 import classNames from "classnames";
-import ToolbarActionSubArea from "./toolbar-action-sub-area.jsx";
-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";
+import ToolbarSubMenu from "./toolbar-sub-menu.jsx";
+import ToolbarSubPanel from "./toolbar-sub-panel.jsx";
+
+const ESC_KEY = 27;
 
 class ToolbarActionItem extends React.Component {
 	constructor(props) {
@@ -53,147 +33,41 @@ class ToolbarActionItem extends React.Component {
 			subAreaDisplayed: false
 		};
 
+		this.divRef = React.createRef();
+
 		this.actionClickHandler = this.actionClickHandler.bind(this);
-		this.onMouseEnter = this.onMouseEnter.bind(this);
-		this.onMouseLeave = this.onMouseLeave.bind(this);
+		this.onKeyDown = this.onKeyDown.bind(this);
 		this.openSubArea = this.openSubArea.bind(this);
 		this.closeSubArea = this.closeSubArea.bind(this);
 		this.clickOutside = this.clickOutside.bind(this);
 	}
 
-	componentDidMount() {
-		if (this.props.actionObj.getSubPanelCloseFn) {
-			this.props.actionObj.getSubPanelCloseFn(this.closeSubArea);
-		}
-	}
-
 	// We must remove the eventListener in case this class is unmounted due
 	// to the toolbar getting redrawn.
 	componentWillUnmount() {
 		document.removeEventListener("click", this.clickOutside, false);
 	}
 
-	onMouseEnter(evt) {
-		if ((this.props.actionObj.subMenu || this.props.actionObj.subPanel) && this.props.overflow) {
-			this.openSubArea();
-		}
-	}
-
-	onMouseLeave(evt) {
-		if ((this.props.actionObj.subMenu || this.props.actionObj.subPanel) && this.props.overflow) {
+	onKeyDown(evt) {
+		if (evt.keyCode === ESC_KEY) {
 			this.closeSubArea();
+			return;
 		}
 	}
 
-	// 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;
-		}
+	// Called by toolbar.jsx
+	getBoundingRect() {
+		return this.divRef.current.getBoundingClientRect();
 	}
 
-	generateLabel(label, disable, overflow, incLabelWithIcon) {
-		let className = "toolbar-icon-label";
-		className += this.generateLabelType(overflow, incLabelWithIcon);
-		className += disable ? " disabled" : "";
-		return (<div className={className}>{label}</div>);
+	// Called by toolbar.jsx
+	getAction() {
+		return this.props.actionObj.action;
 	}
 
-	generateLabelType(overflow, inLabelWithIcon) {
-		if (overflow) {
-			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;
+	// Called by toolbar.jsx
+	isEnabled() {
+		return this.props.actionObj.enable;
 	}
 
 	clickOutside(evt) {
@@ -211,210 +85,112 @@ class ToolbarActionItem extends React.Component {
 		this.setState({ subAreaDisplayed: true });
 	}
 
-	closeSubArea() {
-		this.setState({ subAreaDisplayed: false });
+	closeSubArea(checkCloseSubAreaOnClick) {
+		if (!checkCloseSubAreaOnClick || this.props.actionObj.closeSubAreaOnClick) {
+			this.setState({ subAreaDisplayed: false });
+		}
 	}
 
 	actionClickHandler(evt) {
 		if (this.props.actionObj.subMenu || this.props.actionObj.subPanel) {
-			if (this.state.showExtendedMenu) {
+			if (this.state.subAreaDisplayed) {
 				document.removeEventListener("click", this.clickOutside, false);
+				this.closeSubArea();
+				this.props.setToolbarFocusAction(this.props.actionObj.action);
+
 			} else {
 				document.addEventListener("click", this.clickOutside, false);
+				this.openSubArea();
 			}
 
-			if (this.props.setResizeHandler) {
-				if (this.state.subAreaDisplayed) {
-					this.props.setResizeHandler(null);
-				} else {
-					this.props.setResizeHandler(this.closeSubArea);
-				}
-			}
-
-			if (!this.props.overflow) {
-				this.setState({ subAreaDisplayed: !this.state.subAreaDisplayed });
-			}
 		} else {
 			this.props.toolbarActionHandler(this.props.actionObj.action, evt);
+			this.props.setToolbarFocusAction(this.props.actionObj.action);
 		}
 	}
 
-	generateButton(actionObj) {
-		let labelBefore = null;
-		let labelAfter = null;
-
-		if (this.props.overflow) {
-			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.overflow, "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;
-
-		buttonContent = (
-			<Button kind={kind}
-				onClick={this.actionClickHandler}
-				disabled={!actionObj.enable}
-				onFocus={this.props.onFocus}
-				aria-label={ariaLabel}
-				size={this.props.size}
-			>
-				{buttonContent}
-			</Button>
-		);
-
-		return buttonContent;
-	}
-
-	// 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.overflow) {
-				return (<ChevronRight16 />);
-			}
-			if (actionObj.incLabelWithIcon === "before" ||
-					actionObj.incLabelWithIcon === "after") {
-				const chev = this.state.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>
-		);
-	}
-
-	generateActionName(actionObj) {
+	generateActionName() {
 		return this.props.actionObj.action + "-action";
 	}
 
-	wrapInTooltip(content) {
-		if (!this.props.overflow && (this.showLabelAsTip(this.props.actionObj) || this.props.actionObj.tooltip)) {
-			const actionName = this.generateActionName();
-			const tip = this.props.actionObj.tooltip ? this.props.actionObj.tooltip : this.props.actionObj.label;
-			const tooltipId = 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;
-	}
-
 	// Returns a sub-area for a cascading menu item. The sub-area can be either a
 	// sub-panel which is a div contaiing whatever the caller passes in within the
 	// supPanel field  OR a sub-menu which is a list of options which is created
 	// from the array of items the caller passes in the subMenu field.
 	generateSubArea() {
-		const elements = document.getElementsByClassName(this.generateActionName());
-		const actionItemRect = elements && elements.length > 0 ? elements[0].getBoundingClientRect() : { top: 0, left: 0, width: 120 };
+		const actionItemRect = this.divRef.current.getBoundingClientRect();
 
+		if (this.props.actionObj.subPanel) {
+			return (
+				<ToolbarSubPanel
+					subPanel={this.props.actionObj.subPanel}
+					subPanelData={this.props.actionObj.subPanelData}
+					closeSubArea={this.closeSubArea}
+					setToolbarFocusAction={this.props.setToolbarFocusAction}
+					actionItemRect={actionItemRect}
+					expandDirection={"vertical"}
+					containingDivId={this.props.containingDivId}
+				/>
+			);
+		}
 		return (
-			<ToolbarActionSubArea
-				actionObj={this.props.actionObj}
-				generateToolbarItems={this.props.generateToolbarItems}
-				closeSubArea={this.props.actionObj.closeSubAreaOnClick ? this.closeSubArea : null}
+			<ToolbarSubMenu
+				subMenuActions={this.props.actionObj.subMenu}
+				instanceId={this.props.instanceId}
+				toolbarActionHandler={this.props.toolbarActionHandler}
+				closeSubArea={this.closeSubArea}
+				setToolbarFocusAction={this.props.setToolbarFocusAction}
 				actionItemRect={actionItemRect}
+				expandDirection={"vertical"}
 				containingDivId={this.props.containingDivId}
-				expandDirection={this.props.overflow ? "horizontal" : "vertical" }
+				parentSelector={this.generateSelector(this.props.actionObj)}
+				isCascadeMenu={false}
+				size={this.props.size}
 			/>
 		);
 	}
 
-	render() {
-		const actionObj = this.props.actionObj;
-		const actionName = this.generateActionName();
-		let divContent = null;
-
+	generateSelector(actionObj) {
 		if (actionObj.jsx) {
-			divContent = this.wrapInTooltip(actionObj.jsx);
-		} else {
-			divContent = this.generateButton(actionObj);
+			return ".toolbar-jsx-item";
 		}
+		return ".toolbar-item";
+	}
 
-		const isToolbarItem = this.props.overflow ? null : true; // null wil make data-toolbar-item be removed
+	render() {
+		const actionObj = this.props.actionObj;
+		const actionName = this.generateActionName();
 		const kindAsClass = actionObj.kind ? actionObj.kind : "default";
 
 		const itemClassName = classNames(
-			{ "toolbar-overflow-menu-item": this.props.overflow,
-				"toolbar-item": !this.props.overflow && !actionObj.jsx,
-				"toolbar-jsx-item": !this.props.overflow && actionObj.jsx,
-				"toolbar-overflow-jsx-item": this.props.overflow && actionObj.jsx,
-				"toolbar-item-selected": actionObj.isSelected },
+			{
+				"toolbar-item": !actionObj.jsx,
+				"toolbar-jsx-item": actionObj.jsx,
+				"toolbar-item-selected": actionObj.isSelected
+			},
 			kindAsClass,
 			actionName);
 
 		const subArea = this.state.subAreaDisplayed ? this.generateSubArea() : null;
 
 		return (
-			<div className={itemClassName} data-toolbar-item={isToolbarItem} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-				{divContent}
+			<div ref={this.divRef} className={itemClassName} data-toolbar-action={actionObj.action} data-toolbar-item
+				onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onKeyDown={this.onKeyDown}
+			>
+				<div>
+					<ToolbarButtonItem
+						actionObj={actionObj}
+						actionName={this.generateActionName()}
+						tooltipDirection={this.props.tooltipDirection}
+						instanceId={this.props.instanceId}
+						isInMenu={false}
+						subAreaDisplayed={this.state.subAreaDisplayed}
+						actionClickHandler={this.actionClickHandler}
+						buttonFocusAction={this.state.subAreaDisplayed ? null : this.props.toolbarFocusAction}
+						isFocusInToolbar={this.props.isFocusInToolbar}
+						size={this.props.size}
+					/>
+				</div>
 				{subArea}
 			</div>
 		);
@@ -443,9 +219,9 @@ ToolbarActionItem.propTypes = {
 		isSelected: PropTypes.bool,
 		kind: PropTypes.string,
 		closeSubAreaOnClick: PropTypes.bool,
-		getSubPanelCloseFn: PropTypes.func,
 		subMenu: PropTypes.array,
-		subPanel: PropTypes.object,
+		subPanel: PropTypes.any,
+		subPanelData: PropTypes.object,
 		jsx: PropTypes.object,
 		tooltip: PropTypes.oneOfType([
 			PropTypes.string,
@@ -455,12 +231,12 @@ ToolbarActionItem.propTypes = {
 	}),
 	tooltipDirection: PropTypes.oneOf(["top", "bottom"]),
 	toolbarActionHandler: PropTypes.func.isRequired,
-	generateToolbarItems: PropTypes.func.isRequired,
-	setResizeHandler: PropTypes.func,
 	instanceId: PropTypes.number.isRequired,
 	containingDivId: PropTypes.string,
-	overflow: PropTypes.bool,
-	onFocus: PropTypes.func,
+	closeParentSubArea: PropTypes.func,
+	toolbarFocusAction: PropTypes.string,
+	setToolbarFocusAction: PropTypes.func,
+	isFocusInToolbar: PropTypes.bool,
 	size: PropTypes.oneOf(["md", "sm"])
 };