@elyra/canvas 12.40.1 → 12.42.0

package/src/toolbar/toolbar-sub-menu-item.jsx

@@ -0,0 +1,235 @@
+/*
+ * 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 ToolbarButtonItem from "./toolbar-button-item.jsx";
+
+import classNames from "classnames";
+import ToolbarSubMenu from "./toolbar-sub-menu.jsx";
+import ToolbarSubPanel from "./toolbar-sub-panel.jsx";
+
+class ToolbarSubMenuItem extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			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.openSubArea = this.openSubArea.bind(this);
+		this.closeSubArea = this.closeSubArea.bind(this);
+		this.clickOutside = this.clickOutside.bind(this);
+	}
+
+	// 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.openSubArea();
+		}
+	}
+
+	onMouseLeave(evt) {
+		if (this.props.actionObj.subMenu || this.props.actionObj.subPanel) {
+			this.closeSubArea();
+		}
+	}
+
+	clickOutside(evt) {
+		if (this.state.subAreaDisplayed) {
+			const items = document.getElementsByClassName(this.generateActionName());
+			const isOver = items && items.length > 0 ? items[0].contains(evt.target) : false;
+
+			if (!isOver) {
+				this.closeSubArea();
+			}
+		}
+	}
+
+	openSubArea() {
+		this.setState({ subAreaDisplayed: true });
+	}
+
+	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.subAreaDisplayed) {
+				document.removeEventListener("click", this.clickOutside, false);
+				this.closeSubArea();
+			} else {
+				document.addEventListener("click", this.clickOutside, false);
+				this.openSubArea();
+			}
+
+		} else {
+			evt.stopPropagation();
+			if (this.props.isInCascadeMenu) {
+				this.props.closeParentSubArea();
+				this.props.setSubMenuFocus();
+
+			} else if (this.props.isInOverflowMenu) {
+				this.props.setSubMenuFocus(this.props.actionObj.action);
+
+			} else {
+				this.props.closeParentSubArea();
+				this.props.setToolbarFocusAction(); // Resets the toolbar focus action
+			}
+			this.props.toolbarActionHandler(this.props.actionObj.action, evt);
+		}
+	}
+
+	generateActionName() {
+		return this.props.actionObj.action + "-action";
+	}
+
+	// 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 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}
+					actionItemRect={actionItemRect}
+					expandDirection={"horizontal"}
+					containingDivId={this.props.containingDivId}
+				/>
+			);
+		}
+		return (
+			<ToolbarSubMenu
+				subMenuActions={this.props.actionObj.subMenu}
+				instanceId={this.props.instanceId}
+				toolbarActionHandler={this.props.toolbarActionHandler}
+				setSubMenuFocus={this.props.setSubMenuFocus}
+				closeSubArea={this.closeSubArea}
+				actionItemRect={actionItemRect}
+				expandDirection={"horizontal"}
+				containingDivId={this.props.containingDivId}
+				parentSelector={this.generateSelector()}
+				isCascadeMenu
+				size={this.props.size}
+			/>
+		);
+	}
+
+	generateSelector() {
+		return ".toolbar-sub-menu-item";
+	}
+
+	render() {
+		const actionObj = this.props.actionObj;
+		const actionName = this.generateActionName();
+		const kindAsClass = actionObj.kind ? actionObj.kind : "default";
+
+		const itemClassName = classNames(
+			{ "toolbar-sub-menu-item": true,
+				"toolbar-sub-menu-jsx-item": actionObj.jsx,
+				"toolbar-item-selected": actionObj.isSelected },
+			kindAsClass,
+			actionName);
+
+		const subArea = this.state.subAreaDisplayed ? this.generateSubArea() : null;
+
+		return (
+			<div ref={this.divRef} className={itemClassName} data-toolbar-action={actionObj.action}
+				onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onKeyDown={this.onKeyDown}
+			>
+				<div>
+					<ToolbarButtonItem
+						actionObj={actionObj}
+						actionName={this.generateActionName()}
+						instanceId={this.props.instanceId}
+						isInMenu
+						subAreaDisplayed={this.state.subAreaDisplayed}
+						actionClickHandler={this.actionClickHandler}
+						buttonFocusAction={this.props.subMenuFocusAction}
+						isFocusInToolbar // Focus must be in toolbar for this sub-menu item to appear
+						size={this.props.size}
+					/>
+				</div>
+				{subArea}
+			</div>
+		);
+	}
+}
+
+ToolbarSubMenuItem.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
+		])
+	}),
+	toolbarActionHandler: PropTypes.func.isRequired,
+	instanceId: PropTypes.number.isRequired,
+	containingDivId: PropTypes.string,
+	closeParentSubArea: PropTypes.func,
+	subMenuFocusAction: PropTypes.string,
+	setToolbarFocusAction: PropTypes.func,
+	setSubMenuFocus: PropTypes.func,
+	isInOverflowMenu: PropTypes.bool,
+	isInCascadeMenu: PropTypes.bool,
+	size: PropTypes.oneOf(["md", "sm"])
+};
+
+export default ToolbarSubMenuItem;

package/src/toolbar/toolbar-sub-menu.jsx

@@ -0,0 +1,254 @@
+/*
+ * Copyright 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 ToolbarSubMenuItem from "./toolbar-sub-menu-item.jsx";
+import ToolbarDividerItem from "./toolbar-divider-item";
+
+import { adjustSubAreaPosition, generateSubAreaStyle } from "./toolbar-sub-utils.js";
+
+const ESC_KEY = 27;
+const LEFT_ARROW_KEY = 37;
+const UP_ARROW_KEY = 38;
+const RIGHT_ARROW_KEY = 39;
+const DOWN_ARROW_KEY = 40;
+
+class ToolbarSubMenu extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			focusAction: "subarea"
+		};
+
+		this.areaRef = React.createRef();
+
+		this.onKeyDown = this.onKeyDown.bind(this);
+		this.setFocusAction = this.setFocusAction.bind(this);
+		this.setSubMenuFocus = this.setSubMenuFocus.bind(this);
+	}
+
+	componentDidMount() {
+		if (this.props.containingDivId && this.props.subMenuActions.length > 0) {
+			adjustSubAreaPosition(this.areaRef,
+				this.props.containingDivId, this.props.expandDirection, this.props.actionItemRect);
+		}
+
+		if (this.state.focusAction === "subarea") {
+			this.setFocusOnFirstItem();
+		}
+	}
+
+	componentDidUpdate() {
+		if (this.state.focusAction !== "subarea") {
+			const actionObj = this.props.subMenuActions.find((sma) => sma.action === this.state.focusAction);
+			if (!actionObj?.enable) {
+				const actionToSet = this.getClosestEnabledAction(this.state.focusAction);
+				if (actionToSet !== null) {
+					this.setFocusAction(actionToSet);
+				}
+			}
+		}
+	}
+
+	onKeyDown(evt) {
+		if (evt.keyCode === ESC_KEY) {
+			this.props.closeSubArea();
+			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
+
+		} else if (evt.keyCode === UP_ARROW_KEY) {
+			this.setFocusOnPreviousItem();
+			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
+
+		} else if (evt.keyCode === DOWN_ARROW_KEY) {
+			this.setFocusOnNextItem();
+			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
+
+		} else if (evt.keyCode === LEFT_ARROW_KEY) {
+			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
+
+		} else if (evt.keyCode === RIGHT_ARROW_KEY) {
+			evt.stopPropagation(); // Stop propagation in a case we are a cascade menu
+		}
+	}
+
+	setFocusOnFirstItem() {
+		const focusableActions = this.getFocusableActions();
+		if (focusableActions.length > 0) {
+			this.setFocusAction(focusableActions[0].action);
+		}
+	}
+
+	setFocusOnPreviousItem() {
+		const focusableActions = this.getFocusableActions();
+		const previousFocusAction = this.getPreviousFocusAction(focusableActions);
+		if (previousFocusAction) {
+			this.setFocusAction(previousFocusAction.action);
+		}
+	}
+
+	setFocusOnNextItem() {
+		const focusableActions = this.getFocusableActions();
+		const nextFocusAction = this.getNextFocusAction(focusableActions);
+		if (nextFocusAction) {
+			this.setFocusAction(nextFocusAction.action);
+		}
+	}
+
+	setFocusAction(focusAction) {
+		this.setState({ focusAction });
+	}
+
+	setSubMenuFocus(action) {
+		const actionToSet = action || this.state.focusAction;
+		this.setFocusAction(actionToSet);
+	}
+
+	getClosestEnabledAction(action) {
+		const index = this.props.subMenuActions.findIndex((sma) => sma.action === action);
+		let newAction = null;
+		let indexUp = index + 1;
+		let indexDown = index - 1;
+
+		while ((indexDown > -1 || indexUp < this.props.subMenuActions.length) && newAction === null) {
+			if (indexDown > -1 && this.props.subMenuActions[indexDown].enable) {
+				newAction = this.props.subMenuActions[indexDown].action;
+			} else {
+				indexDown--;
+			}
+			if (indexUp < this.props.subMenuActions.length && this.props.subMenuActions[indexUp].enable) {
+				newAction = this.props.subMenuActions[indexUp].action;
+			} else {
+				indexUp++;
+			}
+		}
+		return newAction;
+	}
+
+	getFocusableActions() {
+		const focusableActions = [];
+
+		for (let i = 0; i < this.props.subMenuActions.length; i++) {
+			if (this.props.subMenuActions[i].enable) {
+				focusableActions.push(this.props.subMenuActions[i]);
+			}
+		}
+
+		return focusableActions;
+	}
+
+	getPreviousFocusAction(focuableActions) {
+		const index = focuableActions.findIndex((fa) => fa.action === this.state.focusAction);
+		if (index > 0) {
+			return focuableActions[index - 1];
+		}
+		return focuableActions[focuableActions.length - 1];
+	}
+
+	getNextFocusAction(focuableActions) {
+		const index = focuableActions.findIndex((fa) => fa.action === this.state.focusAction);
+		if (index < focuableActions.length - 1) {
+			return focuableActions[index + 1];
+		}
+		return focuableActions[0];
+	}
+
+	// Generates an array of JSX objects for a sub-menu defined by the
+	// prop subMenuActions parameter array.
+	generateSubMenuItems() {
+		const newItems = [];
+
+		for (let i = 0; i < this.props.subMenuActions.length; i++) {
+			const actionObj = this.props.subMenuActions[i];
+			if (actionObj) {
+				newItems.push(this.generateSubMenuItem(actionObj, i));
+			}
+		}
+		return newItems;
+	}
+
+	// Returns JSX for a toolbar item based on the actionObj passed in.
+	generateSubMenuItem(actionObj, i) {
+		let jsx = null;
+
+		if (actionObj) {
+			if (actionObj.divider) {
+				jsx = (
+					<ToolbarDividerItem
+						key={"toolbar-item-key-" + i}
+						isInMenu
+					/>
+				);
+			} else {
+				jsx = (
+					<ToolbarSubMenuItem
+						key={"toolbar-item-key-" + i}
+						actionObj={actionObj}
+						toolbarActionHandler={this.props.toolbarActionHandler}
+						closeParentSubArea={this.props.closeSubArea}
+						instanceId={this.props.instanceId}
+						containingDivId={this.props.containingDivId}
+						subMenuFocusAction={this.state.focusAction}
+						setToolbarFocusAction={this.props.setToolbarFocusAction}
+						setSubMenuFocus={this.props.setSubMenuFocus ? this.props.setSubMenuFocus : this.setSubMenuFocus}
+						size={this.props.size}
+						isInOverflowMenu={this.props.isOverflowMenu}
+						isInCascadeMenu={this.props.isCascadeMenu}
+					/>
+				);
+			}
+		}
+		return jsx;
+	}
+
+	render() {
+		if (this.props.subMenuActions.length > 0) {
+			const style = this.props.isCascadeMenu
+				? generateSubAreaStyle(this.props.expandDirection, this.props.actionItemRect)
+				: null;
+
+			this.subMenuItems = this.generateSubMenuItems();
+
+			return (
+				<div ref={this.areaRef} style={style} className={"toolbar-popover-list submenu"}
+					tabIndex={-1} onKeyDown={this.onKeyDown}
+				>
+					{this.subMenuItems}
+				</div>
+			);
+		}
+		return null;
+	}
+}
+
+ToolbarSubMenu.propTypes = {
+	subMenuActions: PropTypes.array.isRequired,
+	instanceId: PropTypes.number.isRequired,
+	toolbarActionHandler: PropTypes.func,
+	closeSubArea: PropTypes.func,
+	setToolbarFocusAction: PropTypes.func,
+	setSubMenuFocus: PropTypes.func,
+	actionItemRect: PropTypes.object.isRequired,
+	expandDirection: PropTypes.string.isRequired,
+	containingDivId: PropTypes.string,
+	parentSelector: PropTypes.string,
+	isOverflowMenu: PropTypes.bool,
+	isCascadeMenu: PropTypes.bool,
+	size: PropTypes.oneOf(["md", "sm"])
+};
+
+export default ToolbarSubMenu;

package/src/toolbar/toolbar-sub-panel.jsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright 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 { adjustSubAreaPosition, generateSubAreaStyle } from "./toolbar-sub-utils.js";
+
+const ESC_KEY = 27;
+
+class ToolbarSubPanel extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.areaRef = React.createRef();
+
+		this.onClick = this.onClick.bind(this);
+		this.onKeyDown = this.onKeyDown.bind(this);
+	}
+
+	componentDidMount() {
+		if (this.props.containingDivId) {
+			adjustSubAreaPosition(this.areaRef,
+				this.props.containingDivId, this.props.expandDirection, this.props.actionItemRect);
+		}
+	}
+
+	onClick() {
+		this.props.closeSubArea();
+	}
+
+	onKeyDown(evt) {
+		if (evt.keyCode === ESC_KEY) {
+			this.props.closeSubArea();
+			evt.stopPropagation();
+		}
+	}
+
+	render() {
+		const style = generateSubAreaStyle(this.props.expandDirection, this.props.actionItemRect);
+
+		if (this.props.subPanel) {
+			const subPanel = typeof this.props.subPanel === "object"
+				? this.props.subPanel
+				: (<this.props.subPanel closeSubPanel={this.props.closeSubArea} subPanelData={this.props.subPanelData} />);
+
+			return (
+				<div ref={this.areaRef} style={style} className={"toolbar-popover-list subpanel"} onClick={this.onClick} onKeyDown={this.onKeyDown}>
+					{subPanel}
+				</div>
+			);
+		}
+
+		return null;
+	}
+}
+
+ToolbarSubPanel.propTypes = {
+	subPanel: PropTypes.any,
+	subPanelData: PropTypes.object,
+	closeSubArea: PropTypes.func,
+	setToolbarFocusAction: PropTypes.func,
+	actionItemRect: PropTypes.object.isRequired,
+	expandDirection: PropTypes.string.isRequired,
+	containingDivId: PropTypes.string
+};
+
+export default ToolbarSubPanel;

package/src/toolbar/toolbar-sub-utils.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright 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.
+*/
+
+// These utility functions are used by both toolbar-sub-menu.jsx AND
+// toolbar-sub-panel.jsx to position the areaEf (menu or panel) relative
+// to the parent actionItemRect, passed in, in the direction indicated by
+// the expandDirection parameter and constrained within the <div>
+// specified by the containingDivId parameter.
+
+
+// Adjust the position of the sub-area to make sure it doesn't extend
+// outside the containing divs boundary. We need to do this after the subarea
+// has been mounted so we can query its size and position.
+export function adjustSubAreaPosition(areaRef, containingDivId, expandDirection, actionItemRect) {
+	const containingDiv = document.getElementById(containingDivId);
+	const containingDivRect = containingDiv.getBoundingClientRect();
+
+	const thisAreaRect = areaRef.current.getBoundingClientRect();
+
+	const outsideBottom = thisAreaRect.bottom - containingDivRect.bottom;
+	const outsideRight = thisAreaRect.right - containingDivRect.right;
+
+	if (expandDirection === "vertical") {
+		if (outsideBottom > 0) {
+			const topGap = actionItemRect.top - containingDivRect.top;
+			const newTop = (topGap > thisAreaRect.height)
+				? actionItemRect.top - thisAreaRect.height
+				: actionItemRect.bottom - outsideBottom;
+
+			areaRef.current.style.top = newTop + "px";
+		}
+
+		if (outsideRight > 0) {
+			const newLeft = actionItemRect.left - outsideRight - 2;
+			areaRef.current.style.left = newLeft + "px";
+		}
+
+	} else {
+		if (outsideBottom > 0) {
+			const newTop = thisAreaRect.top - outsideBottom - 2;
+			areaRef.current.style.top = newTop + "px";
+		}
+
+		if (outsideRight > 0) {
+			const newLeft = actionItemRect.left - thisAreaRect.width;
+			areaRef.current.style.left = newLeft + "px";
+		}
+	}
+}
+
+export function generateSubAreaStyle(expandDirection, actionItemRect) {
+	if (expandDirection === "vertical") {
+		return {
+			top: actionItemRect.bottom + 1,
+			left: actionItemRect.left
+		};
+	}
+	return {
+		top: actionItemRect.top - 1,
+		left: actionItemRect.left + actionItemRect.width
+	};
+}
+
+