orc-shared 5.99.0-dev.3 → 5.99.0-dev.5

package/src/components/MaterialUI/Inputs/InputBase.js

@@ -5,6 +5,8 @@ import InputBaseProps, { isInputProps } from "./InputBaseProps";
 import classNames from "classnames";
 import { NumericFormat, numericFormatter } from "react-number-format";
 import { trimSpacesAndLeadingZeros } from "../../../utils/inputHelper";
+import Icon from "../DataDisplay/Icon";
+import IconButton from "@material-ui/core/IconButton";
 
 export const useStyles = makeStyles(theme => ({
 	container: {
@@ -39,11 +41,25 @@ export const useStyles = makeStyles(theme => ({
 		maxWidth: "unset",
 		minWidth: 0,
 		border: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
-		borderRadius: props => (props.label ? theme.spacing(0, 0.5, 0.5, 0) : theme.spacing(0.5)),
+		borderRadius: props => {
+			const topLeft = props.label ? 0 : 0.5;
+			const topRight = props.isAdvancedNumericInput ? 0 : 0.5;
+			const bottomRight = topRight;
+			const bottomLeft = topLeft;
+
+			return theme.spacing(topLeft, topRight, bottomRight, bottomLeft);
+		},
 		paddingLeft: theme.spacing(0.85),
 		"&:focus, &:active": {
 			border: `${theme.spacing(0.1)} solid ${theme.palette.focus}`,
-			borderRadius: props => (props.label ? theme.spacing(0, 0.5, 0.5, 0) : theme.spacing(0.5)),
+			borderRadius: props => {
+				const topLeft = props.label ? 0 : 0.5;
+				const topRight = props.isAdvancedNumericInput ? 0 : 0.5;
+				const bottomRight = topRight;
+				const bottomLeft = topLeft;
+
+				return theme.spacing(topLeft, topRight, bottomRight, bottomLeft);
+			},
 		},
 	},
 	errorInput: {
@@ -79,6 +95,41 @@ export const useStyles = makeStyles(theme => ({
 	inputMultiline: {
 		padding: theme.spacing(0.6, 0.6, 0.6, 0.85),
 	},
+	numericSpinnerContainer: {
+		display: "flex",
+		backgroundColor: theme.palette.grey.light,
+		flexDirection: "column",
+		borderTopLeftRadius: 0,
+		borderBottomLeftRadius: 0,
+		borderTopRightRadius: theme.shape.borderRadius,
+		borderBottomRightRadius: theme.shape.borderRadius,
+		border: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
+		padding: 0,
+		margin: "0 0 0 -1px",
+	},
+	numericSpinnerUp: {
+		fontSize: "8px",
+		padding: "0 3px",
+		borderBottom: "1px solid #CCCCCC",
+		borderRadius: 0,
+		flex: 1,
+		margin: 0,
+		width: "20px",
+		"& + .MuiButton-root, & + .MuiIconButton-root, & + .MuiInputBase-root": {
+			marginLeft: 0,
+		},
+	},
+	numericSpinnerDown: {
+		fontSize: "8px",
+		padding: "0 3px",
+		borderRadius: 0,
+		flex: 1,
+		margin: 0,
+		marginLeft: 0,
+		"& + .MuiButton-root, & + .MuiIconButton-root, & + .MuiInputBase-root": {
+			marginLeft: 0,
+		},
+	},
 }));
 
 export const AdvancedNumericInput = props => {
@@ -102,6 +153,29 @@ export const AdvancedNumericInput = props => {
 	);
 };
 
+export const AdvancedIntegerInput = props => {
+	const { integerButtons, ...other } = props;
+
+	return (
+		<div style={{ display: "flex" }} className="InputBase-input-wrapper">
+			<AdvancedNumericInput {...other} />
+			{integerButtons}
+		</div>
+	);
+};
+
+const getInputComponent = (isAdvancedNumericInput, decimalScale) => {
+	if (isAdvancedNumericInput) {
+		if (decimalScale === 0) {
+			return AdvancedIntegerInput;
+		}
+
+		return AdvancedNumericInput;
+	}
+
+	return undefined;
+};
+
 const InputBase = ({ inputProps }) => {
 	if (isInputProps(inputProps) === false) {
 		throw new TypeError("inputProps property is not of type InputBaseProps");
@@ -127,8 +201,15 @@ const InputBase = ({ inputProps }) => {
 	const numericInputProps = inputProps?.get(InputBaseProps.propNames.numericInputProps) || null;
 
 	const isAdvancedNumericInput = type.toLowerCase() === "advancednumericinput";
-	const inputComponent = isAdvancedNumericInput ? AdvancedNumericInput : undefined;
+	const decimalScale = numericInputProps?.decimalScale ?? 0;
+	const inputComponent = getInputComponent(isAdvancedNumericInput, decimalScale);
 	const inputControlType = isAdvancedNumericInput ? "text" : type;
+	const [inputText, setInputText] = React.useState(null);
+	const textToDisplay = inputText ?? value;
+	const classes = useStyles({ label, errorPosition, isAdvancedNumericInput });
+
+	let onKeyDown = null;
+	let onWheel = null;
 
 	if (isAdvancedNumericInput && numericInputProps) {
 		Object.keys(numericInputProps).forEach(key => {
@@ -147,8 +228,6 @@ const InputBase = ({ inputProps }) => {
 			inputAttributes.min = -2147483648;
 		}
 
-		const decimalScale = numericInputProps?.decimalScale ?? 0;
-
 		const lengthForMin = Math.trunc(inputAttributes.min).toString().length;
 		const lengthForMax = Math.trunc(inputAttributes.max).toString().length;
 
@@ -157,6 +236,115 @@ const InputBase = ({ inputProps }) => {
 		inputAttributes.isAllowed = val => {
 			return val.value === "" || val.value === "-" || val.value !== null;
 		};
+
+		if (decimalScale === 0 && !disabled) {
+			const getInitialNumericValue = () => {
+				if (0 >= inputAttributes.min && 0 <= inputAttributes.max) {
+					return 0;
+				}
+
+				if (Math.abs(inputAttributes.min) < Math.abs(inputAttributes.max)) {
+					return inputAttributes.min;
+				}
+
+				return inputAttributes.max;
+			};
+
+			const increaseNumericValue = () => {
+				if (textToDisplay) {
+					const currentValue = parseInt(textToDisplay, 10);
+					if (currentValue + 1 <= inputAttributes.max) {
+						setInputText((currentValue + 1).toString());
+					}
+				} else {
+					let currentValue = getInitialNumericValue();
+					if (currentValue === 0 && currentValue + 1 <= inputAttributes.max) {
+						currentValue++;
+					}
+					setInputText(currentValue.toString());
+				}
+			};
+			const decreaseNumericValue = () => {
+				if (textToDisplay) {
+					const currentValue = parseInt(textToDisplay, 10);
+					if (currentValue - 1 >= inputAttributes.min) {
+						setInputText((currentValue - 1).toString());
+					}
+				} else {
+					let currentValue = getInitialNumericValue();
+					if (currentValue === 0 && currentValue - 1 >= inputAttributes.min) {
+						currentValue--;
+					}
+					setInputText(currentValue.toString());
+				}
+			};
+
+			const focusInput = target => {
+				target.closest(".InputBase-input-wrapper").getElementsByTagName("input")[0].focus();
+			};
+
+			inputAttributes.integerButtons = (
+				<div className={classes.numericSpinnerContainer}>
+					<IconButton
+						className={classes.numericSpinnerUp}
+						tabIndex="-1"
+						data-qa="increase"
+						disabled={disabled}
+						onMouseDown={event => event.preventDefault()} // prevent the button from stealing focus
+						onClick={event => {
+							event.preventDefault();
+							event.stopPropagation();
+							increaseNumericValue();
+							focusInput(event.target);
+						}}
+					>
+						<Icon id="chevron-up" />
+					</IconButton>
+
+					<IconButton
+						className={classes.numericSpinnerDown}
+						tabIndex="-1"
+						data-qa="decrease"
+						disabled={disabled}
+						onMouseDown={event => event.preventDefault()} // prevent the button from stealing focus
+						onClick={event => {
+							event.preventDefault();
+							event.stopPropagation();
+							decreaseNumericValue();
+							focusInput(event.target);
+						}}
+					>
+						<Icon id="chevron-down" />
+					</IconButton>
+				</div>
+			);
+
+			onKeyDown = event => {
+				if (event.key === "ArrowUp") {
+					event.preventDefault();
+					event.stopPropagation();
+
+					increaseNumericValue();
+				}
+				// Note Alex20260119: using an 'else if' caused issue with code coverage
+				if (event.key === "ArrowDown") {
+					event.preventDefault();
+					event.stopPropagation();
+
+					decreaseNumericValue();
+				}
+			};
+
+			onWheel = event => {
+				if (event.deltaY < 0) {
+					increaseNumericValue();
+				} else {
+					decreaseNumericValue();
+				}
+
+				focusInput(event.target);
+			};
+		}
 	}
 
 	const defaultRows = 4;
@@ -170,7 +358,6 @@ const InputBase = ({ inputProps }) => {
 		// causing onBlur to never fire
 		item.target.focus();
 	};
-	const classes = useStyles({ label, errorPosition });
 
 	const onChangeHandler = event => {
 		if (event.persist) {
@@ -222,8 +409,6 @@ const InputBase = ({ inputProps }) => {
 
 	const inputBaseInputStyle = inputProps?.getStyle(InputBaseProps.ruleNames.input);
 	const errorTextStyle = inputProps?.getStyle(InputBaseProps.ruleNames.errorText);
-	const [inputText, setInputText] = React.useState(null);
-	const textToDisplay = inputText ?? value;
 
 	React.useEffect(() => {
 		if (inputText === null || window.bypassDebounce === true) {
@@ -249,6 +434,21 @@ const InputBase = ({ inputProps }) => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [inputText, metadata, timeoutDelay, update, value]);
 
+	if (onKeyDown) {
+		if (inputAttributes.onKeyDown) {
+			const originalKeyDown = inputAttributes.onKeyDown;
+			inputAttributes.onKeyDown = event => {
+				originalKeyDown(event);
+
+				if (!event.isDefaultPrevented()) {
+					onKeyDown(event);
+				}
+			};
+		} else {
+			inputAttributes.onKeyDown = onKeyDown;
+		}
+	}
+
 	return (
 		<div className={classes.container}>
 			<div className={classes.inputContainer}>
@@ -267,6 +467,7 @@ const InputBase = ({ inputProps }) => {
 					placeholder={placeholder}
 					value={textToDisplay}
 					fullWidth={true}
+					onWheel={onWheel}
 					onChange={event => onChangeHandler(event)}
 					error={!!error}
 					inputProps={inputAttributes}