@synerise/ds-input-number 0.8.16 → 0.8.18

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.8.17...@synerise/ds-input-number@0.8.18) (2023-08-03)
+
+
+### Bug Fixes
+
+* **input-number:** extend formatNumber for value type null ([812cc1c](https://github.com/Synerise/synerise-design/commit/812cc1c22e72a22e9617c34a69071dc416d7af31))
+
+
+
+
+
+## [0.8.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.8.16...@synerise/ds-input-number@0.8.17) (2023-07-27)
+
+
+### Bug Fixes
+
+* **input-number:** pass formatted and parsed (validated) val to onchange ([6caa1bf](https://github.com/Synerise/synerise-design/commit/6caa1bf5d7e4ab3fd52861d8252e4c33ae950232))
+
+
+
+
+
 ## [0.8.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.8.15...@synerise/ds-input-number@0.8.16) (2023-07-26)
 
 

package/README.md

@@ -25,7 +25,7 @@ Input-Number UI Component
 | label            | Input label                                                                                       | string                                                                  | -         |
 | max              | Max value                                                                                         | number                                                                  | Infinity  |
 | min              | Min value                                                                                         | number                                                                  | -Infinity |
-| onChange         | The callback triggered when the value is changed.                                                 | (value: number / string) => void                                        |
+| onChange         | The callback triggered when the value is changed. The return value is either a number or empty string '' if NaN | (value: number / string) => void                                        |
 | onPressEnter     | The callback function that is triggered when Enter key is pressed.                                | (e:Event) => void                                                       |
 | parser           | Specifies the value extracted from formatter                                                      | (val: number / string) => string                                        | -         |
 | precision        | Precision of input value                                                                          | number                                                                  | -         |

package/dist/InputNumber.js

@@ -1,4 +1,4 @@
-var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style", "tooltip", "tooltipConfig", "valueFormatOptions"];
+var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style", "tooltip", "tooltipConfig", "valueFormatOptions", "onChange"];
 
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
@@ -26,6 +26,7 @@ var InputNumber = function InputNumber(_ref) {
       tooltip = _ref.tooltip,
       tooltipConfig = _ref.tooltipConfig,
       valueFormatOptions = _ref.valueFormatOptions,
+      onChange = _ref.onChange,
       antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useDataFormat = useDataFormat(),
@@ -33,7 +34,6 @@ var InputNumber = function InputNumber(_ref) {
       thousandDelimiter = _useDataFormat.thousandDelimiter,
       decimalDelimiter = _useDataFormat.decimalDelimiter;
 
-  formatValue(new Date(), {});
   var id = React.useMemo(function () {
     return uuid();
   }, []);
@@ -44,6 +44,13 @@ var InputNumber = function InputNumber(_ref) {
   var parser = React.useCallback(function (value) {
     return parseFormattedNumber(value, formatValue, thousandDelimiter, decimalDelimiter);
   }, [formatValue, thousandDelimiter, decimalDelimiter]);
+  var handleOnChange = React.useCallback(function (value) {
+    var formattedValue = formatter(value);
+    var parsedFormattedValue = parser(formattedValue);
+    var valueAsNumber = typeof parsedFormattedValue === 'string' ? parseFloat(parsedFormattedValue) : parsedFormattedValue;
+    var resultValue = Number.isNaN(valueAsNumber) ? '' : valueAsNumber;
+    onChange && onChange(resultValue);
+  }, [onChange, formatter, parser]);
   return /*#__PURE__*/React.createElement(S.InputNumberContainer, null, label && !raw && /*#__PURE__*/React.createElement(S.ContentAbove, null, /*#__PURE__*/React.createElement(S.Label, {
     htmlFor: id
   }, label, (tooltip || tooltipConfig) && /*#__PURE__*/React.createElement(Tooltip, _extends({
@@ -59,6 +66,7 @@ var InputNumber = function InputNumber(_ref) {
     suffixel: !!suffixel,
     style: style
   }, !!prefixel && /*#__PURE__*/React.createElement(S.Prefixel, null, prefixel), /*#__PURE__*/React.createElement(S.AntdInputNumber, _extends({}, antdProps, {
+    onChange: handleOnChange,
     id: id,
     error: showError,
     className: showError ? 'error' : undefined,

package/dist/utils/inputNumber.utils.d.ts

@@ -1,4 +1,4 @@
 import { ReactText } from 'react';
 import { NumberToFormatOptions, Delimiter } from '@synerise/ds-data-format';
-export declare const formatNumber: (value: string | number | undefined, formatValue: (value: number, options: NumberToFormatOptions) => string, notationThousandDelimiter: Delimiter, notationDecimalDelimiter: Delimiter, valueFormatOptions?: NumberToFormatOptions | undefined) => string;
+export declare const formatNumber: (value: string | number | undefined | null, formatValue: (value: number, options: NumberToFormatOptions) => string, notationThousandDelimiter: Delimiter, notationDecimalDelimiter: Delimiter, valueFormatOptions?: NumberToFormatOptions | undefined) => string;
 export declare const parseFormattedNumber: (value: string | undefined, formatValue: (value: number, options: NumberToFormatOptions) => string, notationThousandDelimiter: Delimiter, notationDecimalDelimiter: Delimiter) => ReactText;

package/dist/utils/inputNumber.utils.js

@@ -11,7 +11,7 @@ import { MAXIMUM_FRACTION_DIGITS, MAXIMUM_NUMBER_DIGITS, NUMBER_DELIMITER } from
 export var formatNumber = function formatNumber(value, formatValue, notationThousandDelimiter, notationDecimalDelimiter, valueFormatOptions) {
   var _value$match, _value$match2;
 
-  if (value === undefined || value === '') return '';
+  if (value === undefined || value === '' || value === null) return '';
   if (value === '-') return '-';
 
   var formatOptions = _objectSpread({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-input-number",
-  "version": "0.8.16",
+  "version": "0.8.18",
   "description": "Input-Number UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@types/uuid": "7.0.0"
   },
-  "gitHead": "283730ca9bb63422391388fbc020906edf942b57"
+  "gitHead": "3879c41ef7a22df15d5cd80ceaa41ec56e551429"
 }