Color picker

Signed-off-by: CTomlyn <[email protected]>
elyra-ai · Nov 26, 2024 · 0a7e9a4 · 0a7e9a4
1 parent f50489f
commit 0a7e9a4
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 23 deletions.
diff --git a/canvas_modules/common-canvas/src/color-picker/color-picker.jsx b/canvas_modules/common-canvas/src/color-picker/color-picker.jsx
@@ -16,19 +16,11 @@
 
 import React from "react";
 import PropTypes from "prop-types";
+import KeyboardUtils from "../common-canvas/keyboard-utils.js";
 import Logger from "../logging/canvas-logger.js";
 import colorSetArray from "./color-set.js";
-
 import { WYSIWYG } from "../common-canvas/constants/canvas-constants.js";
 
-const TAB_KEY = 9;
-const RETURN_KEY = 13;
-const SPACE_KEY = 32;
-const LEFT_ARROW_KEY = 37;
-const UP_ARROW_KEY = 38;
-const RIGHT_ARROW_KEY = 39;
-const DOWN_ARROW_KEY = 40;
-
 // These dimensions should match the values in color-picker.scss
 const COLOR_DIMENSION = 20;
 const COLOR_PADDING = 5;
@@ -66,15 +58,15 @@ class ColorPicker extends React.Component {
 	}
 
 	onKeyDown(evt) {
-		if (evt.keyCode === RIGHT_ARROW_KEY) {
+		if (KeyboardUtils.nextColor(evt)) {
 			evt.stopPropagation();
 			this.colorIndex++;
 			if (this.colorIndex > this.totalColors - 1) {
 				this.colorIndex = 0;
 			}
 			this.setFocus(this.colorIndex);
 
-		} else if (evt.keyCode === LEFT_ARROW_KEY) {
+		} else if (KeyboardUtils.previousColor(evt)) {
 			evt.stopPropagation();
 			this.colorIndex--;
 			if (this.colorIndex < 0) {
@@ -83,29 +75,28 @@ class ColorPicker extends React.Component {
 			}
 			this.setFocus(this.colorIndex);
 
-		} else if (evt.keyCode === UP_ARROW_KEY) {
+		} else if (KeyboardUtils.aboveColor(evt)) {
 			evt.stopPropagation();
 			this.colorIndex -= this.colorsPerRow;
 			if (this.colorIndex < 0) {
 				this.colorIndex += this.colorsPerRow;
 			}
 			this.setFocus(this.colorIndex);
 
-		} else if (evt.keyCode === DOWN_ARROW_KEY) {
+		} else if (KeyboardUtils.belowColor(evt)) {
 			evt.stopPropagation();
 			this.colorIndex += this.colorsPerRow;
 			if (this.colorIndex > this.totalColors - 1) {
 				this.colorIndex -= this.colorsPerRow;
 			}
 			this.setFocus(this.colorIndex);
 
-		} else if (evt.keyCode === SPACE_KEY ||
-					evt.keyCode === RETURN_KEY) {
+		} else if (KeyboardUtils.selectColor(evt)) {
 			evt.stopPropagation();
 			evt.preventDefault();
 			this.selectColor(evt);
 
-		} else if (evt.keyCode === TAB_KEY) {
+		} else if (KeyboardUtils.tabKey(evt)) {
 			evt.stopPropagation();
 			evt.preventDefault();
 			return;

diff --git a/canvas_modules/common-canvas/src/common-canvas/keyboard-utils.js b/canvas_modules/common-canvas/src/common-canvas/keyboard-utils.js
@@ -202,6 +202,50 @@ export default class KeyboardUtils {
 		return this.isMetaKey(d3Event) && d3Event.shiftKey && d3Event.code === PERIOD_KEY;
 	}
 
+	/* ----------------------------------------- */
+	/* Color Picker                              */
+	/* ----------------------------------------- */
+
+	static nextColor(evt) {
+		return evt.code === RIGHT_ARROW_KEY;
+	}
+
+	static previousColor(evt) {
+		return evt.code === LEFT_ARROW_KEY;
+	}
+
+	static aboveColor(evt) {
+		return evt.code === UP_ARROW_KEY;
+	}
+
+	static belowColor(evt) {
+		return evt.code === DOWN_ARROW_KEY;
+	}
+
+	static selectColor(evt) {
+		return evt.code === RETURN_KEY || evt.code === SPACE_KEY;
+	}
+
+	static tabKey(evt) {
+		return evt.code === TAB_KEY;
+	}
+
+	/* ----------------------------------------- */
+	/* Notification panel key functions          */
+	/* ----------------------------------------- */
+
+	static activateButton(evt) {
+		return evt.code === RETURN_KEY || evt.code === SPACE_KEY;
+	}
+
+	static nextSection(evt) {
+		return !evt.shiftKey && evt.code === TAB_KEY;
+	}
+
+	static previousSection(evt) {
+		return evt.shiftKey && evt.code === TAB_KEY;
+	}
+
 	/* ----------------------------------------- */
 	/* Context Menu key functions                */
 	/* ----------------------------------------- */

diff --git a/canvas_modules/common-canvas/src/notification-panel/notification-panel.jsx b/canvas_modules/common-canvas/src/notification-panel/notification-panel.jsx
@@ -22,13 +22,10 @@ import Icon from "./../icons/icon.jsx";
 import { Button } from "@carbon/react";
 import { Close } from "@carbon/react/icons";
 import Logger from "../logging/canvas-logger.js";
+import KeyboardUtils from "../common-canvas/keyboard-utils.js";
 import { DEFAULT_NOTIFICATION_HEADER } from "./../common-canvas/constants/canvas-constants.js";
 import defaultMessages from "../../locales/notification-panel/locales/en.json";
 
-const TAB_KEY = 9;
-const RETURN_KEY = 13;
-const SPACE_KEY = 32;
-
 class NotificationPanel extends React.Component {
 	static getDerivedStateFromProps(nextProps, prevState) {
 		if (nextProps.messages !== prevState.messages) {
@@ -138,7 +135,7 @@ class NotificationPanel extends React.Component {
 	}
 
 	keyDownOnCloseButton(message, evt) {
-		if (evt.keyCode === SPACE_KEY || evt.keyCode === RETURN_KEY) {
+		if (KeyboardUtils.activateButton(evt)) {
 			this.deleteNotification(message.id);
 		}
 	}
@@ -157,14 +154,14 @@ class NotificationPanel extends React.Component {
 	}
 
 	keyDownOnPanel(evt) {
-		if (evt.keyCode === TAB_KEY && !evt.shiftKey) {
+		if (KeyboardUtils.nextSection(evt)) {
 			const lastElement = this.allRefs[this.allRefs.length - 1];
 			if (evt.target === lastElement) {
 				evt.stopPropagation();
 				evt.preventDefault();
 				this.allRefs[0].focus();
 			}
-		} else if (evt.keyCode === TAB_KEY && evt.shiftKey) {
+		} else if (KeyboardUtils.previousSection(evt)) {
 			const lastElement = this.allRefs[this.allRefs.length - 1];
 			if (evt.target === this.allRefs[0]) {
 				evt.stopPropagation();