x25 5.1.11 → 5.1.14

package/Inputs/DateInput.js

@@ -7,7 +7,27 @@ exports.DateInput = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); /* eslint-disable react/no-unsafe */
+
+// type DateInputPropTypes = {
+//     readonly customClass?: any;
+//     readonly input: any;
+//     readonly meta: {
+//       error?: string;
+//       submitting: boolean;
+//       touched: boolean;
+//     };
+//     readonly placeholder?: string;
+//     readonly value?: string;
+//     readonly tabIndex?: string;
+//     readonly currency?: boolean;
+//     readonly formatValue: (raw: string) => string;
+//     readonly normalizeValue: (raw: string) => any;
+//     readonly onBlur?: () => void;
+//     readonly onChange?: (event: any) => void;
+//     readonly onRegisterRef?: (callback: (node: any) => void) => void;
+//   }
+
 
 var _react = require("react");
 
@@ -19,30 +39,44 @@ var _classnames2 = _interopRequireDefault(_classnames);
 
 var _utility = require("../utility");
 
+var _validation = require("../utility/validation");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var addZeroIfNeeded = function addZeroIfNeeded(raw) {
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  var nrOfElements = 3,
+      canAddZero = typeof raw === "string" && raw.split(".").length === nrOfElements;
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-/* eslint-disable */
+  if (!canAddZero) {
+    return raw;
+  }
 
-var normalizeRawDate = function normalizeRawDate(raw) {
+  var perform = function perform(value) {
+    return value.length === 1 ? "0" + value : value;
+  },
+      parts = raw.split("."),
+      part1 = perform(parts[0]),
+      part2 = perform(parts[1]),
+      _parts = _slicedToArray(parts, 3),
+      part3 = _parts[2],
+      newValue = [part1, part2, part3].join(".");
 
-  /* eslint-disable no-magic-numbers */
 
-  if ((0, _utility.isValidDate)(raw)) {
-    return (0, _utility.normalizeDate)(raw);
+  if ((0, _validation.isValidDate)(newValue)) {
+    return newValue;
   }
 
   return raw;
-};
-
-var formatRawDate = function formatRawDate(raw) {
-
-  /* eslint-disable no-magic-numbers */
+},
+    normalizeRawDate = function normalizeRawDate(raw) {
+  if ((0, _validation.isValidDate)(raw)) {
+    return (0, _utility.normalizeDate)(raw);
+  }
 
+  return "";
+},
+    formatRawDate = function formatRawDate(raw) {
   if (typeof raw !== "undefined") {
     return (0, _utility.formatDate)(raw);
   }
@@ -50,123 +84,57 @@ var formatRawDate = function formatRawDate(raw) {
   return "";
 };
 
-var DateInput = exports.DateInput = function (_React$Component) {
-  _inherits(DateInput, _React$Component);
-
-  function DateInput(props) {
-    _classCallCheck(this, DateInput);
-
-    var _this = _possibleConstructorReturn(this, (DateInput.__proto__ || Object.getPrototypeOf(DateInput)).call(this));
-
-    _this.state = {
-      value: formatRawDate(props.input.value)
-    };
-
-    _this.handleKeyDown = function (event) {
-      if (event.key === "Enter") {
-        _this.handleBlur();
-      }
-    };
-
-    _this.handleBlur = function () {
-      var onBlur = _this.props.input.onBlur;
-      var _this$props = _this.props,
-          input = _this$props.input,
-          normalizeValue = _this$props.normalizeValue;
-      var currentValue = _this.state.value;
-
-
-      var normalizedValue = normalizeValue(currentValue),
-          shouldRenderAgain = normalizedValue !== "" && currentValue !== normalizedValue;
-
-      input.onChange(normalizedValue);
-
-      /*
-       * Swallow the event to prevent Redux Form from
-       * extracting the form value
-       */
-      onBlur();
-
-      if (shouldRenderAgain) {
-        _this.setState({
-          value: (0, _utility.formatDate)(normalizedValue)
-        });
-      }
-    };
-
-    _this.handleChange = function (_ref) {
-      var value = _ref.target.value;
-
-      _this.props.input.onChange();
-
-      /*
-       * Update the internal state to trigger a re-render
-       * using the formatted value
-       */
-      _this.setState({ value: value });
-    };
-    return _this;
-  }
-
-  _createClass(DateInput, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var newValue = nextProps.input.value;
-      var currentValue = this.state.value;
-
-
-      var shouldRenderAgain = (0, _utility.isValidDate)(newValue) && currentValue !== newValue;
-
-      if (newValue === "") {
-        this.setState({
-          value: ""
-        });
-      }
-
-      if (shouldRenderAgain) {
-        this.setState({
-          value: (0, _utility.formatDate)(newValue)
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          customClass = _props.customClass,
-          input = _props.input,
-          onRegisterRef = _props.onRegisterRef,
-          _props$meta = _props.meta,
-          submitting = _props$meta.submitting,
-          touched = _props$meta.touched,
-          error = _props$meta.error,
-          tabIndex = _props.tabIndex,
-          formatValue = _props.formatValue,
-          placeholder = _props.placeholder;
-
-
-      return _react2.default.createElement("input", _extends({}, input, {
-        className: (0, _classnames2.default)("form-control " + (customClass || ""), {
-          "is-invalid": touched && error
-        }),
-        disabled: submitting,
-        id: input.name,
-        onBlur: this.handleBlur,
-        onChange: this.handleChange,
-        onKeyDown: this.handleKeyDown,
-        placeholder: placeholder || "ZZ.LL.ANUL",
-        ref: onRegisterRef,
-        tabIndex: tabIndex,
-        type: "text",
-        value: formatValue(this.state.value)
-      }));
+// eslint-disable-next-line no-undef
+var DateInput = exports.DateInput = function DateInput(props) {
+  var customClass = props.customClass,
+      input = props.input,
+      onRegisterRef = props.onRegisterRef,
+      tabIndex = props.tabIndex,
+      placeholder = props.placeholder,
+      _props$meta = props.meta,
+      submitting = _props$meta.submitting,
+      touched = _props$meta.touched,
+      error = _props$meta.error,
+      _React$useState = _react2.default.useState(input.value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1],
+      valueToShow = formatRawDate(value),
+      updateValue = function updateValue(targetValue) {
+
+    var normalizedValue = normalizeRawDate(addZeroIfNeeded(targetValue));
+
+    setValue(targetValue);
+    props.input.onChange(normalizedValue);
+  },
+      handleBlur = function handleBlur(_ref) {
+    var targetValue = _ref.target.value;
+
+    var newValue = addZeroIfNeeded(targetValue),
+        hasChanged = targetValue !== newValue;
+
+    if (hasChanged) {
+      updateValue(newValue);
     }
-  }]);
-
-  return DateInput;
-}(_react2.default.Component);
-
-DateInput.defaultProps = {
-  formatValue: formatRawDate,
-  normalizeValue: normalizeRawDate
+  },
+      handleChange = function handleChange(_ref2) {
+    var targetValue = _ref2.target.value;
+
+    updateValue(targetValue);
+  };
+
+  return _react2.default.createElement("input", _extends({}, input, {
+    className: (0, _classnames2.default)("form-control " + (customClass || ""), {
+      "is-invalid": touched && error
+    }),
+    disabled: submitting,
+    id: input.name,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    placeholder: placeholder || _utility.words.DateFormat,
+    ref: onRegisterRef,
+    tabIndex: tabIndex,
+    type: "text",
+    value: valueToShow
+  }));
 };

package/Inputs/DateTemplate.js

@@ -3,11 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DateTemplate = undefined;
+exports.DateInput = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); // type DateInputPropTypes = {
+//   readonly customClass?: any;
+//   readonly input: any;
+//   readonly meta: {
+//     error?: string;
+//     submitting: boolean;
+//     touched: boolean;
+//   };
+//   readonly placeholder?: string;
+//   readonly value?: string;
+//   readonly tabIndex?: string;
+//   readonly currency?: boolean;
+//   readonly formatValue: (raw: string) => string;
+//   readonly normalizeValue: (raw: string) => any;
+//   readonly onBlur?: () => void;
+//   readonly onChange?: (event: any) => void;
+//   readonly onRegisterRef?: (callback: (node: any) => void) => void;
+//   right?: string;
+//   left?: string;
+//   label:string;
+// }
+
 
 var _react = require("react");
 
@@ -19,30 +40,43 @@ var _classnames2 = _interopRequireDefault(_classnames);
 
 var _utility = require("../utility");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _validation = require("../utility/validation");
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var addZeroIfNeeded = function addZeroIfNeeded(raw) {
+  var nrOfElements = 3,
+      canAddZero = typeof raw === "string" && raw.split(".").length === nrOfElements;
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-/* eslint-disable */
+  if (!canAddZero) {
+    return raw;
+  }
 
-var normalizeRawDate = function normalizeRawDate(raw) {
+  var perform = function perform(value) {
+    return value.length === 1 ? "0" + value : value;
+  },
+      parts = raw.split("."),
+      part1 = perform(parts[0]),
+      part2 = perform(parts[1]),
+      _parts = _slicedToArray(parts, 3),
+      part3 = _parts[2],
+      newValue = [part1, part2, part3].join(".");
 
-  /* eslint-disable no-magic-numbers */
 
-  if ((0, _utility.isValidDate)(raw)) {
-    return (0, _utility.normalizeDate)(raw);
+  if ((0, _validation.isValidDate)(newValue)) {
+    return newValue;
   }
 
   return raw;
-};
-
-var formatRawDate = function formatRawDate(raw) {
-
-  /* eslint-disable no-magic-numbers */
+},
+    normalizeRawDate = function normalizeRawDate(raw) {
+  if ((0, _validation.isValidDate)(raw)) {
+    return (0, _utility.normalizeDate)(raw);
+  }
 
+  return "";
+},
+    formatRawDate = function formatRawDate(raw) {
   if (typeof raw !== "undefined") {
     return (0, _utility.formatDate)(raw);
   }
@@ -50,151 +84,87 @@ var formatRawDate = function formatRawDate(raw) {
   return "";
 };
 
-var DateTemplate = exports.DateTemplate = function (_React$Component) {
-  _inherits(DateTemplate, _React$Component);
-
-  function DateTemplate(props) {
-    _classCallCheck(this, DateTemplate);
-
-    var _this = _possibleConstructorReturn(this, (DateTemplate.__proto__ || Object.getPrototypeOf(DateTemplate)).call(this));
-
-    _this.state = {
-      value: formatRawDate(props.input.value)
-    };
-
-    _this.handleKeyDown = function (event) {
-      if (event.key === "Enter") {
-        _this.handleBlur();
-      }
-    };
-
-    _this.handleBlur = function () {
-      var onBlur = _this.props.input.onBlur;
-      var _this$props = _this.props,
-          input = _this$props.input,
-          normalizeValue = _this$props.normalizeValue;
-      var currentValue = _this.state.value;
-
-
-      var normalizedValue = normalizeValue(currentValue),
-          shouldRenderAgain = normalizedValue !== "" && currentValue !== normalizedValue;
-
-      input.onChange(normalizedValue);
-
-      /*
-       * Swallow the event to prevent Redux Form from
-       * extracting the form value
-       */
-      onBlur();
-
-      if (shouldRenderAgain) {
-        _this.setState({
-          value: (0, _utility.formatDate)(normalizedValue)
-        });
-      }
-    };
-
-    _this.handleChange = function (_ref) {
-      var value = _ref.target.value;
-
-      _this.props.input.onChange();
-
-      /*
-       * Update the internal state to trigger a re-render
-       * using the formatted value
-       */
-      _this.setState({ value: value });
-    };
-    return _this;
-  }
-
-  _createClass(DateTemplate, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var newValue = nextProps.input.value;
-      var currentValue = this.state.value;
-
-
-      var shouldRenderAgain = (0, _utility.isValidDate)(newValue) && currentValue !== newValue;
-
-      if (newValue === "") {
-        this.setState({
-          value: ""
-        });
-      }
-
-      if (shouldRenderAgain) {
-        this.setState({
-          value: (0, _utility.formatDate)(newValue)
-        });
-      }
+// eslint-disable-next-line no-undef
+var DateInput = exports.DateInput = function DateInput(props) {
+  var customClass = props.customClass,
+      input = props.input,
+      onRegisterRef = props.onRegisterRef,
+      tabIndex = props.tabIndex,
+      placeholder = props.placeholder,
+      _props$meta = props.meta,
+      submitting = _props$meta.submitting,
+      touched = _props$meta.touched,
+      error = _props$meta.error,
+      right = props.right,
+      left = props.left,
+      label = props.label,
+      _React$useState = _react2.default.useState(input.value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1],
+      valueToShow = formatRawDate(value),
+      updateValue = function updateValue(targetValue) {
+
+    var normalizedValue = normalizeRawDate(addZeroIfNeeded(targetValue));
+
+    setValue(targetValue);
+    props.input.onChange(normalizedValue);
+  },
+      handleBlur = function handleBlur(_ref) {
+    var targetValue = _ref.target.value;
+
+    var newValue = addZeroIfNeeded(targetValue),
+        hasChanged = targetValue !== newValue;
+
+    if (hasChanged) {
+      updateValue(newValue);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          customClass = _props.customClass,
-          input = _props.input,
-          label = _props.label,
-          onRegisterRef = _props.onRegisterRef,
-          _props$meta = _props.meta,
-          submitting = _props$meta.submitting,
-          touched = _props$meta.touched,
-          error = _props$meta.error,
-          left = _props.left,
-          right = _props.right,
-          tabIndex = _props.tabIndex,
-          formatValue = _props.formatValue,
-          placeholder = _props.placeholder;
-
-
-      return _react2.default.createElement(
+  },
+      handleChange = function handleChange(_ref2) {
+    var targetValue = _ref2.target.value;
+
+    updateValue(targetValue);
+  };
+
+  return _react2.default.createElement(
+    "div",
+    {
+      className: (0, _classnames2.default)("form-group row", { "is-invalid": touched && error }) },
+    _react2.default.createElement(
+      "label",
+      {
+        className: (left ? left : "col-md-4 text-md-right") + " form-control-label",
+        htmlFor: input.name },
+      label
+    ),
+    _react2.default.createElement(
+      "div",
+      { className: right ? right : "col-md-8" },
+      _react2.default.createElement("input", _extends({}, input, {
+        "aria-label": label,
+        className: (0, _classnames2.default)("form-control " + (customClass || ""), {
+          "is-invalid": touched && error
+        }),
+        disabled: submitting,
+        id: input.name,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        placeholder: placeholder || _utility.words.DateFormat,
+        ref: onRegisterRef,
+        tabIndex: tabIndex,
+        type: "text",
+        value: valueToShow
+      })),
+      _react2.default.createElement(
         "div",
-        { className: (0, _classnames2.default)("form-group row", { "is-invalid": touched && error }) },
-        _react2.default.createElement(
-          "label",
-          {
-            className: (left ? left : "col-md-4 text-md-right") + " form-control-label",
-            htmlFor: input.name },
-          label
-        ),
-        _react2.default.createElement(
-          "div",
-          { className: right ? right : "col-md-8" },
-          _react2.default.createElement("input", _extends({}, input, {
-            "aria-label": label,
-            className: (0, _classnames2.default)("form-control " + (customClass || ""), {
-              "is-invalid": touched && error
-            }),
-            disabled: submitting,
-            id: input.name,
-            onBlur: this.handleBlur,
-            onChange: this.handleChange,
-            onKeyDown: this.handleKeyDown,
-            placeholder: placeholder || "ZZ.LL.ANUL",
-            ref: onRegisterRef,
-            tabIndex: tabIndex,
-            type: "text",
-            value: formatValue(this.state.value)
-          })),
-          _react2.default.createElement(
-            "div",
-            { className: "invalid-feedback" },
-            touched && error && _react2.default.createElement(
-              "span",
-              null,
-              error
-            )
-          )
+        {
+          className: "invalid-feedback" },
+        touched && error && _react2.default.createElement(
+          "span",
+          null,
+          error
         )
-      );
-    }
-  }]);
-
-  return DateTemplate;
-}(_react2.default.Component);
-
-DateTemplate.defaultProps = {
-  formatValue: formatRawDate,
-  normalizeValue: normalizeRawDate
+      )
+    )
+  );
 };

package/Inputs/NumericInput.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NumericInput = undefined;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); /* eslint-disable require-unicode-regexp */
+/* eslint-disable no-magic-numbers */
+/* eslint-disable react/no-unsafe */
 
 var _react = require("react");
 
@@ -17,123 +18,87 @@ var _classnames2 = _interopRequireDefault(_classnames);
 
 var _utility = require("../utility");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint-disable */
-
-
-var NumericInput = exports.NumericInput = function (_React$Component) {
-  _inherits(NumericInput, _React$Component);
-
-  function NumericInput(props) {
-    _classCallCheck(this, NumericInput);
-
-    var _this = _possibleConstructorReturn(this, (NumericInput.__proto__ || Object.getPrototypeOf(NumericInput)).call(this));
-
-    _this.state = {
-      value: props.input.value
-    };
-
-    _this.handleKeyDown = function (event) {
-      if (event.key === "Enter") {
-        _this.handleBlur();
-      }
-    };
-
-    _this.handleBlur = function () {
-      (0, _utility.handleBlur)(_this);
-    };
+var _common = require("./common");
 
-    _this.handleChange = function (_ref) {
-      var value = _ref.target.value;
-
-      _this.props.input.onChange();
-
-      /*
-       * Update the internal state to trigger a re-render
-       * using the formatted value
-       */
-      _this.setState({ value: value });
-    };
-    return _this;
-  }
-
-  _createClass(NumericInput, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      (0, _utility.cwrp)(this, nextProps);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          customClass = _props.customClass,
-          input = _props.input,
-          label = _props.label,
-          currency = _props.currency,
-          tabIndex = _props.tabIndex,
-          onRegisterRef = _props.onRegisterRef,
-          _props$meta = _props.meta,
-          submitting = _props$meta.submitting,
-          touched = _props$meta.touched,
-          error = _props$meta.error,
-          formatValue = _props.formatValue,
-          size = _props.size,
-          placeholder = _props.placeholder;
-
-
-      var inputComponent = _react2.default.createElement("input", {
-        "aria-label": label,
-        className: (0, _classnames2.default)("form-control " + (customClass || ""), {
-          "is-invalid": touched && error
-        }),
-        disabled: submitting,
-        id: input.name,
-        maxLength: size,
-        onBlur: this.handleBlur,
-        onChange: this.handleChange,
-        onFocus: input.onFocus,
-        onKeyDown: this.handleKeyDown,
-        placeholder: placeholder || label,
-        ref: onRegisterRef,
-        tabIndex: tabIndex,
-        type: "text",
-        value: formatValue(this.state.value, this.props.optional)
-      });
-
-      if (typeof currency === "undefined" || currency === false) {
-        return _react2.default.createElement(
-          "div",
-          { className: "form-group-inline" },
-          inputComponent
-        );
-      }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-      return _react2.default.createElement(
-        "div",
-        { className: "input-group" },
-        inputComponent,
-        _react2.default.createElement(
-          "div",
-          { className: "input-group-append" },
-          _react2.default.createElement(
-            "span",
-            { className: "input-group-text" },
-            currency
-          )
-        )
-      );
+var NumericInput = function NumericInput(props) {
+  var customClass = props.customClass,
+      input = props.input,
+      label = props.label,
+      currency = props.currency,
+      tabIndex = props.tabIndex,
+      onRegisterRef = props.onRegisterRef,
+      _props$formatValue = props.formatValue,
+      formatValue = _props$formatValue === undefined ? _utility.formatZeroValue : _props$formatValue,
+      size = props.size,
+      placeholder = props.placeholder,
+      _props$meta = props.meta,
+      submitting = _props$meta.submitting,
+      touched = _props$meta.touched,
+      error = _props$meta.error,
+      _React$useState = _react2.default.useState(props.input.value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1],
+      noCurrency = typeof currency === "undefined" || currency === false,
+      valueToShow = formatValue(value, props.optional),
+      updateValue = function updateValue(targetValue) {
+    setValue(targetValue);
+    props.input.onChange((0, _common.getFloatValueToStore)(targetValue));
+  },
+      handleBlur = function handleBlur() {
+    var newValue = (0, _common.clearFloatOnBlur)(value),
+        hasChanged = value !== newValue;
+
+    if (hasChanged) {
+      updateValue(newValue);
     }
-  }]);
-
-  return NumericInput;
-}(_react2.default.Component);
+  },
+      handleChange = function handleChange(_ref) {
+    var targetValue = _ref.target.value;
+
+    updateValue(targetValue);
+  },
+      inputComponent = _react2.default.createElement("input", {
+    "aria-label": label,
+    className: (0, _classnames2.default)("form-control " + (customClass || ""), {
+      "is-invalid": touched && error
+    }),
+    disabled: submitting,
+    id: input.name,
+    maxLength: size,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    placeholder: placeholder || label,
+    ref: onRegisterRef,
+    tabIndex: tabIndex,
+    type: "text",
+    value: valueToShow
+  });
+
+  if (noCurrency) {
+    return _react2.default.createElement(
+      "div",
+      { className: "form-group-inline" },
+      inputComponent
+    );
+  }
 
-NumericInput.defaultProps = {
-  formatValue: _utility.formatZeroValue,
-  normalizeValue: _utility.normalizeFloat
-};
+  return _react2.default.createElement(
+    "div",
+    { className: "input-group" },
+    inputComponent,
+    _react2.default.createElement(
+      "div",
+      { className: "input-group-append" },
+      _react2.default.createElement(
+        "span",
+        { className: "input-group-text" },
+        currency
+      )
+    )
+  );
+};
+
+exports.default = NumericInput;

package/Inputs/NumericTemplate.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NumericTemplate = undefined;
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+/* eslint-disable require-unicode-regexp */
+/* eslint-disable no-magic-numbers */
+/* eslint-disable react/no-unsafe */
 
 var _react = require("react");
 
@@ -15,134 +17,96 @@ var _classnames = require("classnames");
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _utility = require("../utility");
+var _common = require("./common");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint-disable */
-
-
-var NumericTemplate = exports.NumericTemplate = function (_React$Component) {
-  _inherits(NumericTemplate, _React$Component);
-
-  function NumericTemplate(props) {
-    _classCallCheck(this, NumericTemplate);
-
-    var _this = _possibleConstructorReturn(this, (NumericTemplate.__proto__ || Object.getPrototypeOf(NumericTemplate)).call(this));
-
-    _this.state = {
-      value: props.input.value
-    };
-
-    _this.handleKeyDown = function (event) {
-      if (event.key === "Enter") {
-        _this.handleBlur();
-      }
-    };
-
-    _this.handleBlur = function () {
-      (0, _utility.handleBlur)(_this);
-    };
-
-    _this.handleChange = function (_ref) {
-      var value = _ref.target.value;
-
-      _this.props.input.onChange();
-
-      /*
-       * Update the internal state to trigger a re-render
-       * using the formatted value
-       */
-      _this.setState({ value: value });
-    };
-    return _this;
-  }
-
-  _createClass(NumericTemplate, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      (0, _utility.cwrp)(this, nextProps);
+var NumericTemplate = function NumericTemplate(props) {
+  var input = props.input,
+      right = props.right,
+      tabIndex = props.tabIndex,
+      divClass = props.divClass,
+      label = props.label,
+      onRegisterRef = props.onRegisterRef,
+      _props$meta = props.meta,
+      submitting = _props$meta.submitting,
+      touched = _props$meta.touched,
+      error = _props$meta.error,
+      formatValue = props.formatValue,
+      type = props.type,
+      autoFocus = props.autoFocus,
+      inputClass = props.inputClass,
+      placeholder = props.placeholder,
+      left = props.left,
+      size = props.size,
+      _React$useState = _react2.default.useState(props.input.value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1],
+      valueToShow = formatValue(value, props.optional),
+      updateValue = function updateValue(targetValue) {
+    setValue(targetValue);
+    props.input.onChange((0, _common.getFloatValueToStore)(targetValue));
+  },
+      handleBlur = function handleBlur() {
+    var newValue = (0, _common.clearFloatOnBlur)(value),
+        hasChanged = value !== newValue;
+
+    if (hasChanged) {
+      updateValue(newValue);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _props = this.props,
-          input = _props.input,
-          label = _props.label,
-          onRegisterRef = _props.onRegisterRef,
-          _props$meta = _props.meta,
-          submitting = _props$meta.submitting,
-          touched = _props$meta.touched,
-          error = _props$meta.error,
-          formatValue = _props.formatValue,
-          type = _props.type,
-          autoFocus = _props.autoFocus,
-          inputClass = _props.inputClass,
-          placeholder = _props.placeholder,
-          left = _props.left,
-          size = _props.size,
-          right = _props.right,
-          tabIndex = _props.tabIndex,
-          divClass = _props.divClass;
-
-
-      var warningClass = "" + (touched && error ? " is-invalid" : ""),
-          customClass = "" + (inputClass ? " " + inputClass : ""),
-          classForInput = "form-control " + warningClass + customClass,
-          classForDiv = "form-group row " + (divClass ? divClass : "");
-
-      return _react2.default.createElement(
+  },
+      handleChange = function handleChange(_ref) {
+    var targetValue = _ref.target.value;
+
+    updateValue(targetValue);
+  },
+      warningClass = "" + (touched && error ? " is-invalid" : ""),
+      customClass = "" + (inputClass ? " " + inputClass : ""),
+      classForInput = "form-control " + warningClass + customClass,
+      classForDiv = "form-group row " + (divClass ? divClass : "");
+
+  return _react2.default.createElement(
+    "div",
+    { className: (0, _classnames2.default)(classForDiv, {
+        "is-invalid": touched && error
+      }) },
+    _react2.default.createElement(
+      "label",
+      {
+        className: (left ? left : "col-md-4 text-md-right") + " form-control-label",
+        htmlFor: input.name },
+      label
+    ),
+    _react2.default.createElement(
+      "div",
+      { className: right ? right : "col-md-8" },
+      _react2.default.createElement("input", {
+        "aria-label": label,
+        autoFocus: autoFocus,
+        className: classForInput,
+        disabled: submitting,
+        id: input.name,
+        maxLength: size,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        placeholder: placeholder,
+        ref: onRegisterRef,
+        tabIndex: tabIndex,
+        type: type,
+        value: formatValue(valueToShow, props.optional)
+      }),
+      _react2.default.createElement(
         "div",
-        { className: (0, _classnames2.default)(classForDiv, { "is-invalid": touched && error }) },
-        _react2.default.createElement(
-          "label",
-          {
-            className: (left ? left : "col-md-4 text-md-right") + " form-control-label",
-            htmlFor: input.name },
-          label
-        ),
-        _react2.default.createElement(
-          "div",
-          { className: right ? right : "col-md-8" },
-          _react2.default.createElement("input", {
-            "aria-label": label,
-            autoFocus: autoFocus,
-            className: classForInput,
-            disabled: submitting,
-            id: input.name,
-            maxLength: size,
-            onBlur: this.handleBlur,
-            onChange: this.handleChange,
-            onFocus: input.onFocus,
-            onKeyDown: this.handleKeyDown,
-            placeholder: placeholder,
-            ref: onRegisterRef,
-            tabIndex: tabIndex,
-            type: type,
-            value: formatValue(this.state.value, this.props.optional)
-          }),
-          _react2.default.createElement(
-            "div",
-            { className: "invalid-feedback" },
-            touched && error && _react2.default.createElement(
-              "span",
-              null,
-              error
-            )
-          )
+        { className: "invalid-feedback" },
+        touched && error && _react2.default.createElement(
+          "span",
+          null,
+          error
         )
-      );
-    }
-  }]);
-
-  return NumericTemplate;
-}(_react2.default.Component);
+      )
+    )
+  );
+};
 
-NumericTemplate.defaultProps = {
-  formatValue: _utility.formatZeroValue,
-  normalizeValue: _utility.normalizeFloat
-};
+exports.default = NumericTemplate;

package/Inputs/common.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+/* eslint-disable require-unicode-regexp */
+
+var isFloat = function isFloat(raw) {
+  var floatRegex = /^-?\d+(?:[.]\d*?)?$/;
+
+  return floatRegex.test(raw);
+},
+    floatToEnglishComma = function floatToEnglishComma(raw) {
+  return String(raw).replace(",", ".");
+},
+    floatToLocalComma = function floatToLocalComma(raw) {
+  return String(raw).replace(".", ",");
+};
+
+var getFloatValueToStore = exports.getFloatValueToStore = function getFloatValueToStore(raw) {
+  var parsedFloat = floatToEnglishComma(raw),
+      parsedValue = parseFloat(parsedFloat),
+      canGetNumericValue = isFloat(parsedFloat) && !isNaN(parsedValue);
+
+  if (canGetNumericValue) {
+    return parsedValue;
+  }
+
+  return 0;
+},
+    clearFloatOnBlur = exports.clearFloatOnBlur = function clearFloatOnBlur(value) {
+  var parts = floatToLocalComma(value).split(","),
+      shouldRemoveComma = parts.length === 2 && (parts[1] === "" || Number(parts[1]) === 0),
+      shouldCutTo2Decimals = parts.length === 2 && parts[1].length > 2;
+
+  if (shouldRemoveComma) {
+    return parts[0];
+  }
+
+  if (shouldCutTo2Decimals) {
+    var _parts = _slicedToArray(parts, 1),
+        beforeDot = _parts[0],
+        afterDot = parts[1].substring(0, 2);
+
+    return beforeDot + "," + afterDot;
+  }
+
+  return value;
+};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.1.11",
+  "version": "5.1.14",
   "name": "x25",
   "description": "x25",
   "scripts": {