orc-shared 1.6.0-dev.8 → 1.6.0

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

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useRef } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import InputBaseMUI from "@material-ui/core/InputBase";
 import InputBaseProps, { isInputProps } from "./InputBaseProps";
 import classNames from "classnames";
+import { NumericFormat, numericFormatter } from "react-number-format";
 
 export const useStyles = makeStyles(theme => ({
 	container: {
@@ -79,6 +80,27 @@ export const useStyles = makeStyles(theme => ({
 	},
 }));
 
+export const AdvancedNumericInput = props => {
+	const { inputRef, onChange, ...other } = props;
+
+	// https://github.com/s-yadav/react-number-format
+
+	return (
+		<NumericFormat
+			{...other}
+			getInputRef={inputRef}
+			onValueChange={values => {
+				onChange({
+					target: {
+						name: props.name,
+						value: values.value,
+					},
+				});
+			}}
+		/>
+	);
+};
+
 const InputBase = ({ inputProps }) => {
 	if (isInputProps(inputProps) === false) {
 		throw new TypeError("inputProps property is not of type InputBaseProps");
@@ -101,6 +123,19 @@ const InputBase = ({ inputProps }) => {
 	const autoComplete = inputProps?.get(InputBaseProps.propNames.autoComplete);
 	const timeoutDelay = inputProps?.get(InputBaseProps.propNames.timeoutDelay) || 100;
 	const rowsProps = inputProps?.get(InputBaseProps.propNames.rows);
+	const numericInputProps = inputProps?.get(InputBaseProps.propNames.numericInputProps) || null;
+
+	const isAdvancedNumericInput = type.toLowerCase() === "advancednumericinput";
+	const inputComponent = isAdvancedNumericInput ? AdvancedNumericInput : undefined;
+	const inputControlType = isAdvancedNumericInput ? "text" : type;
+
+	if (isAdvancedNumericInput && numericInputProps) {
+		Object.keys(numericInputProps).forEach(key => {
+			if (key !== "blurFormattingSkipFixedDecimalScale") {
+				inputAttributes[key] = numericInputProps[key];
+			}
+		});
+	}
 
 	const defaultRows = 4;
 	let rows = rowsProps;
@@ -116,34 +151,80 @@ const InputBase = ({ inputProps }) => {
 	const classes = useStyles({ label, errorPosition });
 
 	const onChangeHandler = event => {
-		event.persist();
+		if (event.persist) {
+			event.persist();
+		}
 
 		if (!event.target.value || window.bypassDebounce === true) {
 			update(event.target.value, metadata);
 		}
-
 		setInputText(event.target.value);
 	};
 
+	const timerId = useRef(null);
+
+	React.useEffect(() => {
+		return () => {
+			clearTimeout(timerId.current);
+			timerId.current = null;
+		};
+	}, []);
+
+	const onBlurInternal = e => {
+		let updateValue = (inputText ?? value).toString(); // value cannot be null as defined above
+
+		if (timerId.current) {
+			clearTimeout(timerId.current);
+			timerId.current = null;
+		}
+
+		if (isAdvancedNumericInput) {
+			const formattingProps = { ...numericInputProps };
+			delete formattingProps.blurFormattingSkipFixedDecimalScale;
+
+			if (numericInputProps?.blurFormattingSkipFixedDecimalScale !== true) {
+				formattingProps.fixedDecimalScale = true;
+			}
+
+			updateValue = numericFormatter(updateValue, formattingProps);
+		}
+
+		update(updateValue, metadata);
+		setInputText(null);
+
+		if (onBlur) {
+			onBlur(e);
+		}
+	};
+
 	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 !== value && inputText != null && window.bypassDebounce !== true) {
-			const timeOutId = setTimeout(() => {
-				const updateValue = update(inputText, metadata);
-				setInputText(null);
+		if (inputText === null || window.bypassDebounce === true) {
+			return;
+		}
 
-				return updateValue;
+		if (inputText !== value) {
+			clearTimeout(timerId.current);
+			timerId.current = setTimeout(() => {
+				update(inputText, metadata);
+				setInputText(null);
 			}, timeoutDelay);
-			return () => clearTimeout(timeOutId);
+
+			return () => {
+				clearTimeout(timerId.current);
+				timerId.current = null;
+			};
+		} else {
+			setInputText(null);
+			clearTimeout(timerId.current);
 		}
+
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [inputText, value]);
+	}, [inputText, metadata, timeoutDelay, update, value]);
 
 	return (
 		<div className={classes.container}>
@@ -157,15 +238,16 @@ const InputBase = ({ inputProps }) => {
 						multiline: classes.multiline,
 						inputMultiline: classes.inputMultiline,
 					}}
-					onBlur={onBlur}
+					onBlur={onBlurInternal}
 					onClick={onClick}
-					type={type}
+					type={inputControlType}
 					placeholder={placeholder}
 					value={textToDisplay}
 					fullWidth={true}
 					onChange={event => onChangeHandler(event)}
 					error={!!error}
 					inputProps={inputAttributes}
+					inputComponent={inputComponent}
 					disabled={disabled}
 					multiline={multiline}
 					startAdornment={startAdornment}

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

@@ -1,11 +1,12 @@
 import React from "react";
 import { mount } from "enzyme";
-import InputBase from "./InputBase";
+import InputBase, { AdvancedNumericInput } from "./InputBase";
 import InputBaseMUI from "@material-ui/core/InputBase";
 import sinon from "sinon";
 import { ignoreConsoleError } from "../../../utils/testUtils";
 import InputBaseProps from "./InputBaseProps";
 import { act } from "unexpected-reaction";
+import { fireEvent, render, getByDisplayValue } from "@testing-library/react";
 
 describe("InputBase Component", () => {
 	let update, container;
@@ -285,6 +286,35 @@ describe("InputBase Component", () => {
 
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
+
+	it("Change value on blur with pending timer", () => {
+		window.bypassDebounce = false;
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+		const onBlur = sinon.spy().named("blur");
+
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.value, aValue);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
+		inputProps.set(InputBaseProps.propNames.timeoutDelay, 1000);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("change", { target: { value: "13", focus: () => {} } });
+		input.simulate("blur", {});
+
+		expect(onBlur, "was called once");
+		expect(update, "not to have calls satisfying", [{ args: [aValue, metadata] }]);
+		expect(update, "to have calls satisfying", [{ args: ["13", metadata] }]);
+	});
 });
 
 describe("InputBase component debouce", () => {
@@ -350,3 +380,309 @@ describe("InputBase component debouce", () => {
 		expect(input.get(0).props.value, "to equal", "");
 	});
 });
+
+describe("AdvancedNumericInput", () => {
+	const noop = function () {};
+	let update, container;
+	beforeEach(() => {
+		window.bypassDebounce = true;
+		jest.useFakeTimers();
+
+		container = document.createElement("div");
+		document.body.appendChild(container);
+		update = sinon.spy().named("update");
+	});
+	afterEach(() => {
+		jest.useRealTimers();
+		delete window.bypassDebounce;
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it("Renders InputBase component as advanced numeric input", () => {
+		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={AdvancedNumericInput} />;
+
+		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";
+		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");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+
+		const component = <InputBase inputProps={inputProps} />;
+
+		const mountedComponent = mount(component);
+
+		const advInput = mountedComponent.find("AdvancedNumericInput");
+		expect(advInput.props().decimalScale, "to be", 2);
+	});
+
+	it("Change advanced numeric input value", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "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");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+		input.simulate("change", { target: { value: "13", focus: noop } });
+
+		expect(update, "to have calls satisfying", [{ args: ["13", metadata] }]);
+	});
+
+	it("Change advanced numeric input on blur without custom blur method", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "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");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
+	});
+
+	it("Onblur send a formatted string instead of a number", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = 12.2;
+		const metadata = {
+			test: "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");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
+	});
+
+	it("Onblur send a formatted string with default numeric input props", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = 12.2;
+		const metadata = {
+			test: "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");
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["12.2", metadata] }]);
+	});
+
+	it("Onblur send an unformatted string when blurFormattingSkipFixedDecimalScale is true", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = 12.2;
+		const metadata = {
+			test: "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");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, {
+			decimalScale: 2,
+			blurFormattingSkipFixedDecimalScale: true,
+		});
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["12.2", metadata] }]);
+	});
+
+	it("Onblur send an empty string when the initial value is empty", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = null;
+		const metadata = {
+			test: "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");
+		inputProps.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(update, "to have calls satisfying", [{ args: ["", metadata] }]);
+	});
+
+	it("Change advanced numeric input on blur with no pending timer", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+		const onBlur = sinon.spy().named("blur");
+
+		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: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		expect(onBlur, "was called once");
+		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
+	});
+
+	it("Change advanced numeric input on blur with pending timer", () => {
+		window.bypassDebounce = false;
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+		const onBlur = sinon.spy().named("blur");
+
+		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: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
+		inputProps.set(InputBaseProps.propNames.timeoutDelay, 1000);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("change", { target: { value: "13", focus: noop } });
+		input.simulate("blur", {});
+
+		expect(onBlur, "was called once");
+		expect(update, "not to have calls satisfying", [{ args: [aValue, metadata] }]);
+		expect(update, "to have calls satisfying", [{ args: ["13.00", metadata] }]);
+	});
+
+	it("Local state is reset when the value props changes for the same value as inputText", () => {
+		window.bypassDebounce = false;
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "12.2";
+		const metadata = {
+			test: "value",
+		};
+		const onBlur = sinon.spy().named("blur");
+
+		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: 2 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps.set(InputBaseProps.propNames.onBlur, onBlur);
+		inputProps.set(InputBaseProps.propNames.timeoutDelay, 1000);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const { container, rerender } = render(component);
+
+		const input = getByDisplayValue(container, "12.2");
+
+		fireEvent.change(input, {
+			target: {
+				value: "13",
+			},
+		});
+
+		const inputProps2 = new InputBaseProps();
+		inputProps2.set(InputBaseProps.propNames.update, update);
+		inputProps2.set(InputBaseProps.propNames.value, "13");
+		inputProps2.set(InputBaseProps.propNames.label, aLabel);
+		inputProps2.set(InputBaseProps.propNames.type, "AdvancedNumericInput");
+		inputProps2.set(InputBaseProps.propNames.numericInputProps, { decimalScale: 2 });
+		inputProps2.set(InputBaseProps.propNames.metadata, metadata);
+		inputProps2.set(InputBaseProps.propNames.onBlur, onBlur);
+		inputProps2.set(InputBaseProps.propNames.timeoutDelay, 1000);
+
+		act(() => {
+			rerender(<InputBase inputProps={inputProps2} />);
+		});
+
+		// no idea what to assert here, this test is mostly for code coverage
+	});
+});

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

@@ -19,6 +19,7 @@ class InputBaseProps extends ComponentProps {
 		autoComplete: "autoComplete",
 		timeoutDelay: "timeoutDelay",
 		rows: "rows",
+		numericInputProps: "numericInputProps",
 	};
 
 	static ruleNames = {
@@ -45,6 +46,7 @@ class InputBaseProps extends ComponentProps {
 		this.componentProps.set(this.constructor.propNames.autoComplete, null);
 		this.componentProps.set(this.constructor.propNames.timeoutDelay, null);
 		this.componentProps.set(this.constructor.propNames.rows, null);
+		this.componentProps.set(this.constructor.propNames.numericInputProps, null);
 
 		this.componentClasses.set(this.constructor.ruleNames.input, null);
 		this.componentClasses.set(this.constructor.ruleNames.errorText, null);

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

@@ -20,6 +20,7 @@ describe("InputBase Props", () => {
 			"autoComplete",
 			"timeoutDelay",
 			"rows",
+			"numericInputProps",
 		];
 
 		expect(InputBaseProps.propNames, "to have keys", propNames);
@@ -44,6 +45,7 @@ describe("InputBase Props", () => {
 			"autoComplete",
 			"timeoutDelay",
 			"rows",
+			"numericInputProps",
 		];
 
 		const ruleNames = ["input", "errorText"];

package/src/reducers/request.js

@@ -24,7 +24,8 @@ const requestReducer = (state = initialState, action) => {
 	}
 	if (action.type.endsWith("_FAILURE")) {
 		const requestName = action.type.replace(/_FAILURE$/, "");
-		if (safeGet(action, "payload", "status") === 403) {
+		const status = safeGet(action, "payload", "status");
+		if (status === 403 || status === 401) {
 			return state.deleteIn(["actives", requestName]).set("logout", true);
 		} else {
 			return state.deleteIn(["actives", requestName]).set("error", Immutable.fromJS(action));

package/src/reducers/request.test.js

@@ -125,4 +125,27 @@ describe("Request reducer", () => {
 			}),
 		);
 	});
+
+	it("clears activity flag and sets login flag when a request fails with status 401", () => {
+		const oldState = Immutable.fromJS({
+			actives: {
+				SOME_FLAG: true,
+				TEST_THIS: true,
+			},
+		});
+		const action = {
+			type: "TEST_THIS_FAILURE",
+			payload: { status: 401, message: "UnauthorizedAccessException" },
+		};
+		const newState = reducer(oldState, action);
+		expect(newState, "not to be", oldState).and(
+			"to equal",
+			Immutable.fromJS({
+				actives: {
+					SOME_FLAG: true,
+				},
+				[LOGOUT]: true,
+			}),
+		);
+	});
 });