orc-shared 1.2.0-dev.12 → 1.2.0-dev.13

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

@@ -29,6 +29,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   enterModule && enterModule(module);
 })();
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -159,11 +171,36 @@ var InputBase = function InputBase(_ref) {
 
   var onChangeHandler = function onChangeHandler(event) {
     event.persist();
-    update(event.target.value, metadata);
+
+    if (!event.target.value || window.bypassDebounce === true) {
+      update(event.target.value, metadata);
+    }
+
+    setInputText(event.target.value);
   };
 
   var inputBaseInputStyle = inputProps == null ? void 0 : inputProps.getStyle(_InputBaseProps.default.ruleNames.input);
   var errorTextStyle = inputProps == null ? void 0 : inputProps.getStyle(_InputBaseProps.default.ruleNames.errorText);
+
+  var _React$useState = _react.default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      inputText = _React$useState2[0],
+      setInputText = _React$useState2[1];
+
+  var textToDisplay = inputText != null ? inputText : value;
+
+  _react.default.useEffect(function () {
+    if (inputText !== value && inputText != null && window.bypassDebounce !== true) {
+      var timeOutId = setTimeout(function () {
+        return update(inputText, metadata);
+      }, 100);
+      return function () {
+        return clearTimeout(timeOutId);
+      };
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [inputText, value]);
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes.container
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -182,7 +219,7 @@ var InputBase = function InputBase(_ref) {
     onClick: onClick,
     type: type,
     placeholder: placeholder,
-    value: value,
+    value: textToDisplay,
     fullWidth: true,
     onChange: function onChange(event) {
       return onChangeHandler(event);
@@ -201,11 +238,11 @@ var InputBase = function InputBase(_ref) {
   }, error));
 };
 
-__signature__(InputBase, "useStyles{classes}", function () {
+__signature__(InputBase, "useStyles{classes}\nuseState{[inputText, setInputText](null)}\nuseEffect{}", function () {
   return [useStyles];
 });
 
-__signature__(InputBase, "useStyles{classes}", function () {
+__signature__(InputBase, "useStyles{classes}\nuseState{[inputText, setInputText](null)}\nuseEffect{}", function () {
   return [useStyles];
 });
 

package/package.json

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

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

@@ -18,6 +18,8 @@ describe("Translations ", () => {
 	const theme = createMuiTheme();
 
 	beforeEach(() => {
+		window.bypassDebounce = true;
+
 		collapsibleListProps = new CollapsibleListProps();
 		collapsibleListProps.set(CollapsibleListProps.propNames.hasMessage, true);
 		collapsibleListProps.set(
@@ -32,6 +34,10 @@ describe("Translations ", () => {
 		collapsibleListProps.set(CollapsibleListProps.propNames.containerWidth, "unset");
 	});
 
+	afterEach(() => {
+		delete window.bypassDebounce;
+	});
+
 	it("Renders Translations  correctly", () => {
 		const component = (
 			<TestWrapper stylesProvider muiThemeProvider={{ theme }} intlProvider={{ messages }}>
@@ -135,7 +141,7 @@ describe("Translations ", () => {
 		expect(component, "when mounted", "to satisfy", expected);
 	});
 
-	it("Translations  component handles change", () => {
+	it("Translations component handles change", () => {
 		const aValue = "aValue";
 		const update = sinon.spy().named("update");
 

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

@@ -111,12 +111,29 @@ const InputBase = ({ inputProps }) => {
 
 	const onChangeHandler = event => {
 		event.persist();
-		update(event.target.value, metadata);
+
+		if (!event.target.value || window.bypassDebounce === true) {
+			update(event.target.value, metadata);
+		}
+
+		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 !== value && inputText != null && window.bypassDebounce !== true) {
+			const timeOutId = setTimeout(() => update(inputText, metadata), 100);
+			return () => clearTimeout(timeOutId);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [inputText, value]);
+
 	return (
 		<div className={classes.container}>
 			<div className={classes.inputContainer}>
@@ -133,7 +150,7 @@ const InputBase = ({ inputProps }) => {
 					onClick={onClick}
 					type={type}
 					placeholder={placeholder}
-					value={value}
+					value={textToDisplay}
 					fullWidth={true}
 					onChange={event => onChangeHandler(event)}
 					error={!!error}

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

@@ -5,15 +5,19 @@ 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";
 
 describe("InputBase Component", () => {
 	let update, container;
 	beforeEach(() => {
+		window.bypassDebounce = true;
+
 		container = document.createElement("div");
 		document.body.appendChild(container);
 		update = sinon.spy().named("update");
 	});
 	afterEach(() => {
+		delete window.bypassDebounce;
 		document.body.removeChild(container);
 		container = null;
 	});
@@ -243,3 +247,67 @@ describe("InputBase Component", () => {
 		expect(mountedComponent.containsMatchingElement(expected), "to be truthy");
 	});
 });
+
+describe("InputBase component debouce", () => {
+	const clock = sinon.useFakeTimers();
+	let update, container;
+
+	beforeEach(() => {
+		container = document.createElement("div");
+		document.body.appendChild(container);
+		update = sinon.spy().named("update");
+	});
+
+	afterEach(() => {
+		clock.restore();
+	});
+
+	it("InputBase component updates when debounced update", async () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "value";
+
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.value, "");
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		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: aValue } });
+
+		act(() => {
+			clock.tick(200);
+		});
+
+		input.simulate("change", { target: { value: "differentValue" } });
+		expect(update, "to have calls satisfying", [{ args: [aValue, metadata] }]);
+	});
+
+	it("InputBase component update to empty when text to display is null", async () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+
+		const metadata = {
+			test: "value",
+		};
+
+		inputProps.set(InputBaseProps.propNames.value, null);
+		inputProps.set(InputBaseProps.propNames.update, update);
+		inputProps.set(InputBaseProps.propNames.label, aLabel);
+		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: null } });
+		expect(input.get(0).props.value, "to equal", "");
+	});
+});

package/src/components/Scope/Scope.test.js

@@ -204,10 +204,14 @@ describe("ScopeBar", () => {
 describe("Scope", () => {
 	let nodeState;
 	beforeEach(() => {
+		window.bypassDebounce = true;
+
 		nodeState = { foo: true, bar: false };
 		state = state.setIn(["view", "scopeSelector", "nodeState"], Immutable.fromJS(nodeState));
 	});
 
+	afterEach(() => delete window.bypassDebounce);
+
 	it("renders a scope bar, selector panel with handlers, and viewport", () => {
 		const scopes = [
 			{