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

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

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useStyles = exports.default = exports.AdvancedNumericInput = void 0;
+exports.useStyles = exports.default = exports.AdvancedNumericInput = exports.AdvancedIntegerInput = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@material-ui/core/styles");
 var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));
@@ -11,7 +11,8 @@ var _reactNumberFormat = require("react-number-format");
 var _inputHelper = require("../../../utils/inputHelper");
 var _Icon = _interopRequireDefault(require("../DataDisplay/Icon"));
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-var _excluded = ["inputRef", "onChange"];
+var _excluded = ["inputRef", "onChange"],
+  _excluded2 = ["integerButtons"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -186,8 +187,27 @@ var AdvancedNumericInput = exports.AdvancedNumericInput = function AdvancedNumer
     }
   }));
 };
+var AdvancedIntegerInput = exports.AdvancedIntegerInput = function AdvancedIntegerInput(props) {
+  var integerButtons = props.integerButtons,
+    other = _objectWithoutProperties(props, _excluded2);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: "flex"
+    },
+    className: "InputBase-input-wrapper"
+  }, /*#__PURE__*/_react.default.createElement(AdvancedNumericInput, other), integerButtons);
+};
+var getInputComponent = function getInputComponent(isAdvancedNumericInput, decimalScale) {
+  if (isAdvancedNumericInput) {
+    if (decimalScale === 0) {
+      return AdvancedIntegerInput;
+    }
+    return AdvancedNumericInput;
+  }
+  return undefined;
+};
 var InputBase = function InputBase(_ref) {
-  var _inputProps$get;
+  var _inputProps$get, _numericInputProps$de;
   var inputProps = _ref.inputProps;
   if ((0, _InputBaseProps.isInputProps)(inputProps) === false) {
     throw new TypeError("inputProps property is not of type InputBaseProps");
@@ -211,7 +231,8 @@ var InputBase = function InputBase(_ref) {
   var rowsProps = inputProps == null ? void 0 : inputProps.get(_InputBaseProps.default.propNames.rows);
   var numericInputProps = (inputProps == null ? void 0 : inputProps.get(_InputBaseProps.default.propNames.numericInputProps)) || null;
   var isAdvancedNumericInput = type.toLowerCase() === "advancednumericinput";
-  var inputComponent = isAdvancedNumericInput ? AdvancedNumericInput : undefined;
+  var decimalScale = (_numericInputProps$de = numericInputProps == null ? void 0 : numericInputProps.decimalScale) != null ? _numericInputProps$de : 0;
+  var inputComponent = getInputComponent(isAdvancedNumericInput, decimalScale);
   var inputControlType = isAdvancedNumericInput ? "text" : type;
   var _React$useState = _react.default.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -223,7 +244,6 @@ var InputBase = function InputBase(_ref) {
     errorPosition: errorPosition,
     isAdvancedNumericInput: isAdvancedNumericInput
   });
-  var controlSpecificSuffix = null;
   var onKeyDown = null;
   var onWheel = null;
   if (isAdvancedNumericInput && numericInputProps) {
@@ -234,14 +254,12 @@ var InputBase = function InputBase(_ref) {
     });
   }
   if (isAdvancedNumericInput) {
-    var _numericInputProps$de;
     if (inputAttributes.max === undefined) {
       inputAttributes.max = 2147483647;
     }
     if (inputAttributes.min === undefined) {
       inputAttributes.min = -2147483648;
     }
-    var decimalScale = (_numericInputProps$de = numericInputProps == null ? void 0 : numericInputProps.decimalScale) != null ? _numericInputProps$de : 0;
     var lengthForMin = Math.trunc(inputAttributes.min).toString().length;
     var lengthForMax = Math.trunc(inputAttributes.max).toString().length;
     inputAttributes.maxLength = Math.max(lengthForMin, lengthForMax) + (decimalScale > 0 ? decimalScale + 1 : 0);
@@ -289,7 +307,7 @@ var InputBase = function InputBase(_ref) {
       var focusInput = function focusInput(target) {
         target.closest(".InputBase-input-wrapper").getElementsByTagName("input")[0].focus();
       };
-      controlSpecificSuffix = /*#__PURE__*/_react.default.createElement("div", {
+      inputAttributes.integerButtons = /*#__PURE__*/_react.default.createElement("div", {
         className: classes.numericSpinnerContainer
       }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
         className: classes.numericSpinnerUp,
@@ -420,18 +438,26 @@ var InputBase = function InputBase(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputText, metadata, timeoutDelay, update, value]);
+  if (onKeyDown) {
+    if (inputAttributes.onKeyDown) {
+      var originalKeyDown = inputAttributes.onKeyDown;
+      inputAttributes.onKeyDown = function (event) {
+        originalKeyDown(event);
+        if (!event.isDefaultPrevented()) {
+          onKeyDown(event);
+        }
+      };
+    } else {
+      inputAttributes.onKeyDown = onKeyDown;
+    }
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.container
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.inputContainer
   }, label && /*#__PURE__*/_react.default.createElement("label", {
     className: "".concat(classes.prepend, " ").concat(disabled && classes.disabledPrepend)
-  }, label), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: "flex"
-    },
-    className: "InputBase-input-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_InputBase.default, {
+  }, label), /*#__PURE__*/_react.default.createElement(_InputBase.default, {
     classes: {
       input: (0, _classnames.default)(classes.controlInput, inputBaseInputStyle),
       error: classes.errorInput,
@@ -445,7 +471,6 @@ var InputBase = function InputBase(_ref) {
     placeholder: placeholder,
     value: textToDisplay,
     fullWidth: true,
-    onKeyDown: onKeyDown,
     onWheel: onWheel,
     onChange: function onChange(event) {
       return onChangeHandler(event);
@@ -460,7 +485,7 @@ var InputBase = function InputBase(_ref) {
     minRows: rows,
     title: tooltipText,
     autoComplete: autoComplete
-  }), controlSpecificSuffix)), error && /*#__PURE__*/_react.default.createElement("div", {
+  })), error && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(classes.errorText, errorTextStyle)
   }, error));
 };
@@ -484,6 +509,8 @@ var _default3 = exports.default = _default2;
   }
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(AdvancedNumericInput, "AdvancedNumericInput", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
+  reactHotLoader.register(AdvancedIntegerInput, "AdvancedIntegerInput", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
+  reactHotLoader.register(getInputComponent, "getInputComponent", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(InputBase, "InputBase", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(compareInputBase, "compareInputBase", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
@@ -501,6 +528,8 @@ var _default3 = exports.default = _default2;
   }
   reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(AdvancedNumericInput, "AdvancedNumericInput", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
+  reactHotLoader.register(AdvancedIntegerInput, "AdvancedIntegerInput", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
+  reactHotLoader.register(getInputComponent, "getInputComponent", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(InputBase, "InputBase", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(compareInputBase, "compareInputBase", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");
   reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/Inputs/InputBase.js");

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.10.2-dev.3",
+	"version": "5.10.2-dev.5",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/MaterialUI/DataDisplay/PredefinedElements/Translations.test.js

@@ -50,9 +50,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-US"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>
@@ -63,9 +61,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-CA"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>,
@@ -73,9 +69,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"fr-CA"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>,
@@ -108,9 +102,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-US"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 					<div>{aError}</div>
 				</div>
@@ -122,9 +114,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"en-CA"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>,
@@ -132,9 +122,7 @@ describe("Translations ", () => {
 				<div>
 					<div>
 						<label>{"fr-CA"}</label>
-						<div>
-							<InputBase />
-						</div>
+						<InputBase />
 					</div>
 				</div>
 			</div>,

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

@@ -153,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");
@@ -178,13 +201,13 @@ 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 controlSpecificSuffix = null;
 	let onKeyDown = null;
 	let onWheel = null;
 
@@ -205,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;
 
@@ -262,7 +283,7 @@ const InputBase = ({ inputProps }) => {
 				target.closest(".InputBase-input-wrapper").getElementsByTagName("input")[0].focus();
 			};
 
-			controlSpecificSuffix = (
+			inputAttributes.integerButtons = (
 				<div className={classes.numericSpinnerContainer}>
 					<IconButton
 						className={classes.numericSpinnerUp}
@@ -413,41 +434,52 @@ 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}>
 				{label && <label className={`${classes.prepend} ${disabled && classes.disabledPrepend}`}>{label}</label>}
-				<div style={{ display: "flex" }} className="InputBase-input-wrapper">
-					<InputBaseMUI
-						classes={{
-							input: classNames(classes.controlInput, inputBaseInputStyle),
-							error: classes.errorInput,
-							disabled: classes.disabled,
-							multiline: classes.multiline,
-							inputMultiline: classes.inputMultiline,
-						}}
-						onBlur={onBlurInternal}
-						onClick={onClick}
-						type={inputControlType}
-						placeholder={placeholder}
-						value={textToDisplay}
-						fullWidth={true}
-						onKeyDown={onKeyDown}
-						onWheel={onWheel}
-						onChange={event => onChangeHandler(event)}
-						error={!!error}
-						inputProps={inputAttributes}
-						inputComponent={inputComponent}
-						disabled={disabled}
-						multiline={multiline}
-						startAdornment={startAdornment}
-						endAdornment={endAdornment}
-						minRows={rows}
-						title={tooltipText}
-						autoComplete={autoComplete}
-					/>
-					{controlSpecificSuffix}
-				</div>
+				<InputBaseMUI
+					classes={{
+						input: classNames(classes.controlInput, inputBaseInputStyle),
+						error: classes.errorInput,
+						disabled: classes.disabled,
+						multiline: classes.multiline,
+						inputMultiline: classes.inputMultiline,
+					}}
+					onBlur={onBlurInternal}
+					onClick={onClick}
+					type={inputControlType}
+					placeholder={placeholder}
+					value={textToDisplay}
+					fullWidth={true}
+					onWheel={onWheel}
+					onChange={event => onChangeHandler(event)}
+					error={!!error}
+					inputProps={inputAttributes}
+					inputComponent={inputComponent}
+					disabled={disabled}
+					multiline={multiline}
+					startAdornment={startAdornment}
+					endAdornment={endAdornment}
+					minRows={rows}
+					title={tooltipText}
+					autoComplete={autoComplete}
+				/>
 			</div>
 			{error && <div className={classNames(classes.errorText, errorTextStyle)}>{error}</div>}
 		</div>

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { mount } from "enzyme";
-import InputBase, { AdvancedNumericInput } from "./InputBase";
+import InputBase, { AdvancedIntegerInput, AdvancedNumericInput } from "./InputBase";
 import InputBaseMUI from "@material-ui/core/InputBase";
 import sinon from "sinon";
 import { ignoreConsoleError } from "../../../utils/testUtils";
@@ -399,7 +399,7 @@ describe("AdvancedNumericInput", () => {
 		container = null;
 	});
 
-	it("Renders InputBase component as advanced numeric input", () => {
+	it("Renders InputBase component as advanced numeric input with decimals", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";
 		const aValue = "value";
@@ -408,6 +408,7 @@ describe("AdvancedNumericInput", () => {
 		inputProps.set(InputBaseProps.propNames.value, aValue);
 		inputProps.set(InputBaseProps.propNames.label, aLabel);
 		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
 
 		const component = <InputBase inputProps={inputProps} />;
 
@@ -417,6 +418,24 @@ describe("AdvancedNumericInput", () => {
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
 
+	it("Renders InputBase component as advanced numeric input without decimals", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+		const expected = <InputBaseMUI value={aValue} title="" inputComponent={AdvancedIntegerInput} />;
+
+		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
+	});
+
 	it("Renders InputBase component as advanced numeric input with custom numeric props", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";
@@ -1002,6 +1021,54 @@ describe("AdvancedNumericInput", () => {
 		btnDecrease.simulate("mouseDown");
 	});
 
+	it("Advanced numeric input value without decimals but with custom onKeyDown with prevent default", () => {
+		const keydownSpy = sinon.stub().callsFake(e => {
+			e.preventDefault();
+		});
+
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { onKeyDown: keydownSpy });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("keydown", { key: "ArrowUp" });
+
+		expect(keydownSpy, "was called once");
+		expect(update, "was not called");
+	});
+
+	it("Advanced numeric input value without decimals but with custom onKeyDown without prevent default", () => {
+		const keydownSpy = sinon.stub().callsFake(e => {});
+
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 0 });
+		inputProps.set(InputBaseProps.propNames.inputAttributes, { onKeyDown: keydownSpy });
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("keydown", { key: "ArrowUp" });
+
+		expect(keydownSpy, "was called once");
+		expect(update, "to have calls satisfying", [{ args: ["1", null] }]);
+	});
+
 	it("Change advanced numeric input value, empty initial value with increase button", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";