@elyra/canvas 13.15.0 → 13.16.0

package/src/palette/palette-flyout-content-category.jsx

@@ -31,24 +31,24 @@ class PaletteFlyoutContentCategory extends React.Component {
 
 		this.onMouseOver = this.onMouseOver.bind(this);
 		this.onMouseLeave = this.onMouseLeave.bind(this);
+		this.onFocus = this.onFocus.bind(this);
 		this.categoryClicked = this.categoryClicked.bind(this);
 		this.categoryKeyPressed = this.categoryKeyPressed.bind(this);
 		this.setPaletteCategory = this.setPaletteCategory.bind(this);
 	}
 
-	onMouseOver(ev) {
-		this.props.canvasController.openTip({
-			id: "paletteTip_" + this.props.category.id,
-			type: TIP_TYPE_PALETTE_CATEGORY,
-			targetObj: ev.currentTarget,
-			category: this.props.category
-		});
+	onMouseOver(evt) {
+		this.displayTip(evt);
 	}
 
 	onMouseLeave() {
 		this.props.canvasController.closeTip();
 	}
 
+	onFocus(evt) {
+		this.displayTip(evt);
+	}
+
 	getDisplayLabel() {
 		if (this.props.isPaletteWide === true) {
 			return this.props.category.label;
@@ -63,7 +63,6 @@ class PaletteFlyoutContentCategory extends React.Component {
 	}
 
 	getInlineLoadingRenderCategory() {
-
 		// TODO - This loading functionality should be replaced with a skeleton
 		// graphic to indicate the category is loading instead of using the
 		// InlineLoading component.
@@ -110,7 +109,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 		const content = this.getContent();
 		return (
 			<AccordionItem title={titleObj} open={this.props.category.is_open}
-				onKeyDown={this.categoryKeyPressed}
+				onKeyDown={this.categoryKeyPressed} onFocus={this.onFocus}
 			>
 				{content}
 			</AccordionItem>
@@ -121,8 +120,10 @@ class PaletteFlyoutContentCategory extends React.Component {
 	getTitleObj() {
 		const itemImage = this.getItemImage();
 		const itemText = this.getItemText();
+		this.catRef = React.createRef();
 		return (
 			<div className="palette-flyout-category"
+				ref={this.catRef}
 				data-id={get(this.props.category, "id", "")}
 				onClick={this.categoryClicked}
 				value={this.props.category.label}
@@ -201,6 +202,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 					category={this.props.category}
 					nodeTypeInfos={nodeTypeInfos}
 					canvasController={this.props.canvasController}
+					allowClickToAdd={this.props.allowClickToAdd}
 					isPaletteWide={this.props.isPaletteWide}
 					isEditingEnabled={this.props.isEditingEnabled}
 				/>
@@ -209,6 +211,17 @@ class PaletteFlyoutContentCategory extends React.Component {
 		return null;
 	}
 
+	displayTip() {
+		this.props.canvasController.closeTip();
+		this.props.canvasController.openTip({
+			id: "paletteTip_" + this.props.category.id,
+			type: TIP_TYPE_PALETTE_CATEGORY,
+			targetObj: this.catRef.current,
+			category: this.props.category
+		});
+
+	}
+
 	categoryClicked(evt) {
 		// Stopping event propagation prevents an extra refresh of the node icons when
 		// a category is opened.
@@ -241,6 +254,7 @@ class PaletteFlyoutContentCategory extends React.Component {
 PaletteFlyoutContentCategory.propTypes = {
 	category: PropTypes.object.isRequired,
 	canvasController: PropTypes.object.isRequired,
+	allowClickToAdd: PropTypes.bool,
 	isPaletteWide: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool.isRequired,
 };

package/src/palette/palette-flyout-content-filtered-list.jsx

@@ -56,6 +56,7 @@ class PaletteFlyoutContentFilteredList extends React.Component {
 						canvasController={this.props.canvasController}
 						isPaletteWide={this.props.isPaletteWide}
 						isEditingEnabled={this.props.isEditingEnabled}
+						allowClickToAdd={this.props.allowClickToAdd}
 					/>
 				</div>
 			);
@@ -87,6 +88,7 @@ PaletteFlyoutContentFilteredList.propTypes = {
 	intl: PropTypes.object.isRequired,
 	nodeTypeInfos: PropTypes.array.isRequired,
 	canvasController: PropTypes.object.isRequired,
+	allowClickToAdd: PropTypes.bool,
 	isPaletteWide: PropTypes.bool.isRequired,
 	isEditingEnabled: PropTypes.bool.isRequired,
 	isNodeTypeInfosArrayTruncated: PropTypes.bool,

package/src/palette/palette-flyout-content.jsx

@@ -77,6 +77,7 @@ class PaletteFlyoutContent extends React.Component {
 						key={category.id}
 						category={category}
 						canvasController={this.props.canvasController}
+						allowClickToAdd={this.props.allowClickToAdd}
 						isPaletteWide={this.props.isPaletteWide}
 						isEditingEnabled={this.props.isEditingEnabled}
 					/>
@@ -103,6 +104,7 @@ class PaletteFlyoutContent extends React.Component {
 				key={"filtered-nodes"}
 				nodeTypeInfos={filteredNodeTypeInfos}
 				canvasController={this.props.canvasController}
+				allowClickToAdd={this.props.allowClickToAdd}
 				isPaletteWide={this.props.isPaletteWide}
 				isEditingEnabled={this.props.isEditingEnabled}
 				// isShowRanking // Uncomment this to show ranking for debuggig ranking algorithm
@@ -162,6 +164,7 @@ PaletteFlyoutContent.propTypes = {
 	canvasController: PropTypes.object.isRequired,
 	paletteJSON: PropTypes.object.isRequired,
 	paletteHeader: PropTypes.object,
+	allowClickToAdd: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool.isRequired,
 	isPaletteWide: PropTypes.bool
 };

package/src/palette/palette-flyout.jsx

@@ -45,6 +45,7 @@ class PaletteFlyout extends React.Component {
 						canvasController={this.props.canvasController}
 						paletteJSON={this.props.paletteJSON}
 						paletteHeader={this.props.paletteHeader}
+						allowClickToAdd={this.props.allowClickToAdd}
 						isEditingEnabled={this.props.isEditingEnabled}
 						isPaletteWide={this.props.isPaletteWide}
 					/>
@@ -59,6 +60,7 @@ PaletteFlyout.propTypes = {
 	canvasController: PropTypes.object.isRequired,
 	paletteJSON: PropTypes.object.isRequired,
 	paletteHeader: PropTypes.object,
+	allowClickToAdd: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool.isRequired,
 	isPaletteWide: PropTypes.bool
 };

package/src/palette/palette.jsx

@@ -38,6 +38,7 @@ class Palette extends React.Component {
 				canvasController={this.props.canvasController}
 				paletteJSON={this.props.paletteJSON}
 				paletteHeader={this.props.paletteHeader}
+				allowClickToAdd={this.props.allowClickToAdd}
 				isEditingEnabled={this.props.isEditingEnabled}
 				isPaletteWide={this.props.isPaletteWide}
 			/>
@@ -52,6 +53,7 @@ Palette.propTypes = {
 	// Provided by redux
 	paletteJSON: PropTypes.object,
 	paletteHeader: PropTypes.object,
+	allowClickToAdd: PropTypes.bool,
 	isEditingEnabled: PropTypes.bool,
 	isPaletteWide: PropTypes.bool
 };
@@ -60,6 +62,7 @@ const mapStateToProps = (state, ownProps) => ({
 	paletteJSON: state.palette.content,
 	isEditingEnabled: state.canvasconfig.enableEditingActions,
 	paletteHeader: state.canvasconfig.enablePaletteHeader,
+	allowClickToAdd: state.canvasconfig.enableSingleClickAddFromPalette,
 	isPaletteWide: state.canvasconfig.enablePaletteLayout === PALETTE_LAYOUT_NONE ||
 		(state.canvasconfig.enablePaletteLayout === PALETTE_LAYOUT_FLYOUT &&
 			state.palette.isOpen)