orc-shared 5.8.0-dev.6 → 5.8.0-dev.8

package/dist/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.js

@@ -20,6 +20,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
   var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
   enterModule && enterModule(module);
 })();
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
   return a;
 };
@@ -30,12 +33,13 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     title: {
       fontSize: theme.typography.fieldLabelSize,
-      color: function color(props) {
-        return !props.error ? theme.palette.text.hint : theme.palette.error.main;
-      },
+      color: theme.palette.text.hint,
       fontFamily: theme.typography.fontFamily,
       marginBottom: theme.spacing(1)
     },
+    titleError: {
+      color: theme.palette.error.main
+    },
     titleRequired: {
       paddingLeft: theme.spacing(0.5),
       color: theme.palette.error.main
@@ -110,10 +114,12 @@ var InformationItemHeader = function InformationItemHeader(_ref2) {
     label = _ref2.label,
     headerIcon = _ref2.headerIcon,
     headerIconClassName = _ref2.headerIconClassName,
-    required = _ref2.required;
+    required = _ref2.required,
+    error = _ref2.error;
   var formattedLabel = typeof label === "object" ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, label) : label;
+  var titleClasses = (0, _classnames.default)(classes.title, _defineProperty({}, classes.titleError, error));
   var headerText = (_ref3 = formattedLabel && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: classes.title,
+    className: titleClasses,
     children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formattedLabel, required && /*#__PURE__*/_react.default.createElement("span", {
       "data-qa": "required",
       className: classes.titleRequired
@@ -157,6 +163,7 @@ var InformationItem = function InformationItem(_ref4) {
     classes: classes,
     label: label,
     required: required,
+    error: error,
     headerIcon: headerIcon,
     headerIconClassName: headerIconClassName
   }), /*#__PURE__*/_react.default.createElement(InformationItemChildren, {

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

@@ -8,6 +8,7 @@ var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));
 var _InputBaseProps = _interopRequireWildcard(require("./InputBaseProps"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactNumberFormat = require("react-number-format");
+var _inputHelper = require("../../../utils/inputHelper");
 var _excluded = ["inputRef", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -227,11 +228,13 @@ var InputBase = function InputBase(_ref) {
       timerId.current = null;
     }
     if (isAdvancedNumericInput) {
+      var _numericInputProps$de2;
       var formattingProps = _objectSpread({}, numericInputProps);
       delete formattingProps.blurFormattingSkipFixedDecimalScale;
       if ((numericInputProps == null ? void 0 : numericInputProps.blurFormattingSkipFixedDecimalScale) !== true) {
         formattingProps.fixedDecimalScale = true;
       }
+      updateValue = (0, _inputHelper.trimSpacesAndLeadingZeros)(updateValue, (_numericInputProps$de2 = numericInputProps == null ? void 0 : numericInputProps.defaultValue) != null ? _numericInputProps$de2 : "");
       updateValue = (0, _reactNumberFormat.numericFormatter)(updateValue, formattingProps);
     }
     update(updateValue, metadata);

package/dist/utils/inputHelper.js

@@ -0,0 +1,59 @@
+"use strict";
+
+exports.__esModule = true;
+exports.trimSpacesAndLeadingZeros = exports.limitNumericValueLength = void 0;
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+(function () {
+  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
+  enterModule && enterModule(module);
+})();
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
+  return a;
+};
+var trimSpacesAndLeadingZeros = exports.trimSpacesAndLeadingZeros = function trimSpacesAndLeadingZeros(value, fallback) {
+  if (fallback === void 0) {
+    fallback = "";
+  }
+  var trimmed = (value != null ? value : "").trim().replace(/^0+/, "");
+  return trimmed === "" ? fallback : limitNumericValueLength(trimmed);
+};
+var limitNumericValueLength = exports.limitNumericValueLength = function limitNumericValueLength(value, maximum) {
+  if (maximum === void 0) {
+    maximum = 9;
+  }
+  return value.substring(0, maximum);
+};
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(trimSpacesAndLeadingZeros, "trimSpacesAndLeadingZeros", "/home/vsts/work/1/s/src/utils/inputHelper.js");
+  reactHotLoader.register(limitNumericValueLength, "limitNumericValueLength", "/home/vsts/work/1/s/src/utils/inputHelper.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();
+;
+(function () {
+  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
+  if (!reactHotLoader) {
+    return;
+  }
+  reactHotLoader.register(trimSpacesAndLeadingZeros, "trimSpacesAndLeadingZeros", "/home/vsts/work/1/s/src/utils/inputHelper.js");
+  reactHotLoader.register(limitNumericValueLength, "limitNumericValueLength", "/home/vsts/work/1/s/src/utils/inputHelper.js");
+})();
+;
+(function () {
+  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
+  leaveModule && leaveModule(module);
+})();

package/package.json

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

package/src/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.js

@@ -12,10 +12,13 @@ import classNames from "classnames";
 const useStyles = makeStyles(theme => ({
 	title: {
 		fontSize: theme.typography.fieldLabelSize,
-		color: props => (!props.error ? theme.palette.text.hint : theme.palette.error.main),
+		color: theme.palette.text.hint,
 		fontFamily: theme.typography.fontFamily,
 		marginBottom: theme.spacing(1),
 	},
+	titleError: {
+		color: theme.palette.error.main,
+	},
 	titleRequired: {
 		paddingLeft: theme.spacing(0.5),
 		color: theme.palette.error.main,
@@ -76,12 +79,13 @@ const InformationItemChildren = ({
 	return <MultipleLinesText textProps={multipleLinesTextProps} children={value} tooltipClasses={tooltipClasses} />;
 };
 
-const InformationItemHeader = ({ classes, label, headerIcon, headerIconClassName, required }) => {
+const InformationItemHeader = ({ classes, label, headerIcon, headerIconClassName, required, error }) => {
 	const formattedLabel = typeof label === "object" ? <FormattedMessage {...label} /> : label;
+	const titleClasses = classNames(classes.title, { [classes.titleError]: error });
 	const headerText =
 		(formattedLabel && (
 			<Typography
-				className={classes.title}
+				className={titleClasses}
 				children={
 					<>
 						{formattedLabel}
@@ -129,6 +133,7 @@ const InformationItem = ({
 				classes={classes}
 				label={label}
 				required={required}
+				error={error}
 				headerIcon={headerIcon}
 				headerIconClassName={headerIconClassName}
 			/>

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

@@ -4,6 +4,7 @@ import InputBaseMUI from "@material-ui/core/InputBase";
 import InputBaseProps, { isInputProps } from "./InputBaseProps";
 import classNames from "classnames";
 import { NumericFormat, numericFormatter } from "react-number-format";
+import { trimSpacesAndLeadingZeros } from "../../../utils/inputHelper";
 
 export const useStyles = makeStyles(theme => ({
 	container: {
@@ -207,6 +208,7 @@ const InputBase = ({ inputProps }) => {
 				formattingProps.fixedDecimalScale = true;
 			}
 
+			updateValue = trimSpacesAndLeadingZeros(updateValue, numericInputProps?.defaultValue ?? "");
 			updateValue = numericFormatter(updateValue, formattingProps);
 		}
 

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

@@ -643,6 +643,55 @@ describe("AdvancedNumericInput", () => {
 		expect(update, "to have calls satisfying", [{ args: ["12.20", metadata] }]);
 	});
 
+	it("OnBlur trims spaces and leading zeros of values", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "012.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: 1 });
+		inputProps.set(InputBaseProps.propNames.metadata, metadata);
+
+		const component = <InputBase inputProps={inputProps} />;
+		const mountedComponent = mount(component);
+		const input = mountedComponent.find("input");
+
+		input.simulate("blur", {});
+
+		// Update is called twice, once from onChangeHandler (from React) and once from onBlurInternal
+		expect(update, "to have calls satisfying", [{ args: ["12.2", metadata] }, { args: ["12.2", metadata] }]);
+	});
+
+	it("OnBlur use default value if trim spaces and leading zeroes returns empty ", () => {
+		const inputProps = new InputBaseProps();
+		const aLabel = "aLabel";
+		const aValue = "";
+		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, defaultValue: "84" });
+		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: ["84.00", metadata] }]);
+	});
+
 	it("Onblur send a formatted string instead of a number", () => {
 		const inputProps = new InputBaseProps();
 		const aLabel = "aLabel";

package/src/utils/inputHelper.js

@@ -0,0 +1,6 @@
+export const trimSpacesAndLeadingZeros = (value, fallback = "") => {
+	const trimmed = (value ?? "").trim().replace(/^0+/, "");
+	return trimmed === "" ? fallback : limitNumericValueLength(trimmed);
+};
+
+export const limitNumericValueLength = (value, maximum = 9) => value.substring(0, maximum);

package/src/utils/inputHelper.test.js

@@ -0,0 +1,31 @@
+import { limitNumericValueLength, trimSpacesAndLeadingZeros } from "./inputHelper";
+
+describe("Numeric Input Helper", () => {
+	it("trimSpacesAndLeadingZeros trims spaces and leading zeros", () => {
+		expect(trimSpacesAndLeadingZeros, "when called with", ["  00013 "], "to equal", "13");
+	});
+
+	it("trimSpacesAndLeadingZeros trims spaces and leading zeros returning fallback value", () => {
+		expect(trimSpacesAndLeadingZeros, "when called with", [" 000  ", "def"], "to equal", "def");
+	});
+
+	it("trimSpacesAndLeadingZeros should work on floating values", () => {
+		expect(trimSpacesAndLeadingZeros, "when called with", ["042.2", "def"], "to equal", "42.2");
+	});
+
+	it("trimSpacesAndLeadingZeros returns fallback on null value", () => {
+		expect(trimSpacesAndLeadingZeros, "when called with", [null, "def"], "to equal", "def");
+	});
+
+	it("trimSpacesAndLeadingZeros returns fallback on undefined value", () => {
+		expect(trimSpacesAndLeadingZeros, "when called with", [undefined, "def"], "to equal", "def");
+	});
+
+	it("limitNumericValueLength trims extra characters", () => {
+		expect(limitNumericValueLength, "when called with", ["01234567890"], "to equal", "012345678");
+	});
+
+	it("limitNumericValueLength trims extra characters with another maximum", () => {
+		expect(limitNumericValueLength, "when called with", ["01234567890", 5], "to equal", "01234");
+	});
+});