orc-shared 1.7.0-dev.8 → 5.2.0-dev.1

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

@@ -15,25 +15,8 @@ describe("DatePicker", () => {
 			locale: {
 				locale: "en-CA",
 			},
-			metadata: {
-				lookups: {
-					customer: {
-						index: {
-							TimeZone: {
-								values: {
-									UTC: {
-										value: "Eastern Standard Time",
-										displayName: {
-											"en-US": "Eastern Standard Time",
-										},
-									},
-								},
-							},
-						},
-					},
-				},
-			},
 		});
+
 		store = {
 			subscribe: () => {},
 			dispatch: () => {},
@@ -328,131 +311,6 @@ describe("DatePicker", () => {
 
 		input.at(0).simulate("change", event);
 	});
-
-	it("should call onChange prop with timezone", () => {
-		const onChangeMock = jest.fn();
-		const date = new Date("2020-06-30T00:00:00");
-		const event = {
-			preventDefault() {},
-			target: { value: "" },
-		};
-		const requestTimeZone = "Eastern Standard Time";
-
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider>
-				<DatePicker
-					onChange={onChangeMock}
-					value={date}
-					useTime={true}
-					useDate={false}
-					showTimeSelectOnly={true}
-					timePickerTimeZone={requestTimeZone}
-				/>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const input = mountedComponent.find("input");
-		input.at(0).simulate("change", event);
-		expect(onChangeMock.mock.calls.length, "to equal", 1);
-	});
-
-	it("should call onChange prop with null timezone", () => {
-		const onChangeMock = jest.fn();
-		const date = new Date("2020-06-30T00:00:00");
-		const event = {
-			preventDefault() {},
-			target: { value: "" },
-		};
-
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider>
-				<DatePicker
-					onChange={onChangeMock}
-					value={date}
-					useTime={true}
-					useDate={false}
-					showTimeSelectOnly={true}
-					timePickerTimeZone={null}
-				/>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const input = mountedComponent.find("input");
-		input.at(0).simulate("change", event);
-		expect(onChangeMock.mock.calls.length, "to equal", 1);
-	});
-
-	it("should call onChange prop with timezone without date value", () => {
-		const onChangeMock = jest.fn();
-		const event = {
-			preventDefault() {},
-			target: { value: "" },
-		};
-		const requestTimeZone = "Eastern Standard Time";
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider>
-				<DatePicker
-					onChange={onChangeMock}
-					useTime={true}
-					useDate={false}
-					showTimeSelectOnly={true}
-					timePickerTimeZone={requestTimeZone}
-				/>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const input = mountedComponent.find("input");
-		input.at(0).simulate("change", event);
-	});
-
-	it("should call onChange prop with timezone and not use time", () => {
-		const date = new Date("2020-06-30T00:00:00");
-		const event = {
-			preventDefault() {},
-			target: { value: "" },
-		};
-		const requestTimeZone = "Eastern Standard Time";
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider>
-				<DatePicker value={date} useDate={false} showTimeSelectOnly={true} timePickerTimeZone={requestTimeZone} />
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const input = mountedComponent.find("input");
-		input.at(0).simulate("change", event);
-	});
-
-	it("should call onChange prop with useTimeZone", () => {
-		const onChangeMock = jest.fn();
-		const date = new Date("2020-06-30T00:00:00");
-		const event = {
-			preventDefault() {},
-			target: { value: "" },
-		};
-		const requestTimeZone = "Eastern Standard Time";
-		const component = (
-			<TestWrapper provider={{ store }} intlProvider>
-				<DatePicker
-					onChange={onChangeMock}
-					value={date}
-					useTime={true}
-					useDate={false}
-					useTimeZone={true}
-					showTimeSelectOnly={true}
-					timePickerTimeZone={requestTimeZone}
-				/>
-			</TestWrapper>
-		);
-		const mountedComponent = mount(component);
-
-		const input = mountedComponent.find("input");
-		input.at(0).simulate("change", event);
-		expect(onChangeMock.mock.calls.length, "to equal", 1);
-	});
 });
 
 describe("createFormat", () => {

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

@@ -1,9 +1,8 @@
-import React, { useRef } from "react";
+import React 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: {
@@ -80,27 +79,6 @@ 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");
@@ -121,25 +99,6 @@ const InputBase = ({ inputProps }) => {
 	const endAdornment = inputProps?.get(InputBaseProps.propNames.endAdornment);
 	const metadata = inputProps?.get(InputBaseProps.propNames.metadata);
 	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;
-	if (rows === null || rows === undefined) rows = defaultRows;
 
 	const tooltipText = type === "text" ? value : "";
 
@@ -151,80 +110,34 @@ const InputBase = ({ inputProps }) => {
 	const classes = useStyles({ label, errorPosition });
 
 	const onChangeHandler = event => {
-		if (event.persist) {
-			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);
-		}
+		setInputText(event.target.value);
 	};
 
 	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) {
-			return;
-		}
-
-		if (inputText !== value) {
-			clearTimeout(timerId.current);
-			timerId.current = setTimeout(() => {
-				update(inputText, metadata);
+		if (inputText !== value && inputText != null && window.bypassDebounce !== true) {
+			const timeOutId = setTimeout(() => {
+				const updateValue = update(inputText, metadata);
 				setInputText(null);
-			}, timeoutDelay);
 
-			return () => {
-				clearTimeout(timerId.current);
-				timerId.current = null;
-			};
-		} else {
-			setInputText(null);
-			clearTimeout(timerId.current);
+				return updateValue;
+			}, 100);
+			return () => clearTimeout(timeOutId);
 		}
-
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [inputText, metadata, timeoutDelay, update, value]);
+	}, [inputText, value]);
 
 	return (
 		<div className={classes.container}>
@@ -238,21 +151,20 @@ const InputBase = ({ inputProps }) => {
 						multiline: classes.multiline,
 						inputMultiline: classes.inputMultiline,
 					}}
-					onBlur={onBlurInternal}
+					onBlur={onBlur}
 					onClick={onClick}
-					type={inputControlType}
+					type={type}
 					placeholder={placeholder}
 					value={textToDisplay}
 					fullWidth={true}
 					onChange={event => onChangeHandler(event)}
 					error={!!error}
 					inputProps={inputAttributes}
-					inputComponent={inputComponent}
 					disabled={disabled}
 					multiline={multiline}
 					startAdornment={startAdornment}
 					endAdornment={endAdornment}
-					minRows={rows}
+					rows={4}
 					title={tooltipText}
 					autoComplete={autoComplete}
 				/>