@synerise/ds-input-number 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.8.0...@synerise/ds-input-number@0.8.1) (2023-03-20)
+
+**Note:** Version bump only for package @synerise/ds-input-number
+
+
+
+
+
+# [0.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.7.0...@synerise/ds-input-number@0.8.0) (2023-03-08)
+
+
+### Features
+
+* **data-format:** using data format tools in ds components ([ee52cba](https://github.com/Synerise/synerise-design/commit/ee52cbac5e798e048722aefb2e47a7058e0f4c9c))
+
+
+
+
+
 # [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.6.28...@synerise/ds-input-number@0.7.0) (2023-03-06)
 
 

package/dist/InputNumber.js

@@ -1,4 +1,4 @@
-var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style", "tooltip", "tooltipConfig"];
+var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style", "tooltip", "tooltipConfig", "valueFormatOptions"];
 
 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); }
 
@@ -9,8 +9,10 @@ import { v4 as uuid } from 'uuid';
 import '@synerise/ds-core/dist/js/style';
 import Tooltip from '@synerise/ds-tooltip';
 import Icon, { InfoFillS } from '@synerise/ds-icon';
+import { useDataFormat } from '@synerise/ds-data-format';
 import "./style/index.css";
 import * as S from './InputNumber.styles';
+import { formatNumber, parseFormattedNumber } from './utils/inputNumber.utils';
 
 var InputNumber = function InputNumber(_ref) {
   var label = _ref.label,
@@ -23,12 +25,25 @@ var InputNumber = function InputNumber(_ref) {
       style = _ref.style,
       tooltip = _ref.tooltip,
       tooltipConfig = _ref.tooltipConfig,
+      valueFormatOptions = _ref.valueFormatOptions,
       antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var _useDataFormat = useDataFormat(),
+      formatValue = _useDataFormat.formatValue,
+      thousandDelimiter = _useDataFormat.thousandDelimiter,
+      decimalDelimiter = _useDataFormat.decimalDelimiter;
+
+  formatValue(new Date(), {});
   var id = React.useMemo(function () {
     return uuid();
   }, []);
   var showError = Boolean(error || errorText);
+  var formatter = React.useCallback(function (value) {
+    return formatNumber(value, formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions);
+  }, [formatValue, valueFormatOptions, thousandDelimiter, decimalDelimiter]);
+  var parser = React.useCallback(function (value) {
+    return parseFormattedNumber(value, formatValue, thousandDelimiter, decimalDelimiter);
+  }, [formatValue, thousandDelimiter, decimalDelimiter]);
   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({
@@ -47,7 +62,10 @@ var InputNumber = function InputNumber(_ref) {
     id: id,
     error: showError,
     className: showError ? 'error' : undefined,
-    autoComplete: "off"
+    autoComplete: "off",
+    formatter: formatter,
+    parser: parser,
+    decimalSeparator: decimalDelimiter
   })), !!suffixel && /*#__PURE__*/React.createElement(S.Suffixel, null, suffixel)), (showError || description) && !raw && /*#__PURE__*/React.createElement(S.ContentBelow, null, showError && /*#__PURE__*/React.createElement(S.ErrorText, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, null, description)));
 };
 

package/dist/InputNumber.types.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { InputNumberProps } from 'antd/lib/input-number';
 import type { TooltipProps } from '@synerise/ds-tooltip';
+import { NumberToFormatOptions } from '@synerise/ds-data-format';
 export interface Props extends InputNumberProps {
     errorText?: React.ReactNode | string;
     label?: React.ReactNode | string;
@@ -11,4 +12,5 @@ export interface Props extends InputNumberProps {
     raw?: boolean;
     tooltip?: string;
     tooltipConfig?: TooltipProps;
+    valueFormatOptions?: NumberToFormatOptions;
 }

package/dist/constants/inputNumber.constants.d.ts

@@ -0,0 +1,3 @@
+import { Delimiter } from '@synerise/ds-data-format';
+export declare const MAXIMUM_FRACTION_DIGITS = 20;
+export declare const NUMBER_DELIMITER: Delimiter;

package/dist/constants/inputNumber.constants.js

@@ -0,0 +1,2 @@
+export var MAXIMUM_FRACTION_DIGITS = 20;
+export var NUMBER_DELIMITER = '.';

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

@@ -0,0 +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, thousandDelimiter: Delimiter, decimalDelimiter: Delimiter, valueFormatOptions?: NumberToFormatOptions | undefined) => string;
+export declare const parseFormattedNumber: (value: string | undefined, formatValue: (value: number, options: NumberToFormatOptions) => string, thousandDelimiter: Delimiter, decimalDelimiter: Delimiter) => ReactText;

package/dist/utils/inputNumber.utils.js

@@ -0,0 +1,61 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { MAXIMUM_FRACTION_DIGITS, NUMBER_DELIMITER } from '../constants/inputNumber.constants'; // input 1: not formatted number string (on input change)
+// input 2: not formatted number (on blur)
+// output: formatted number string with decimal char
+
+export var formatNumber = function formatNumber(value, formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions) {
+  if (value === undefined || value === '') return '';
+
+  var formatOptions = _objectSpread({
+    maximumFractionDigits: MAXIMUM_FRACTION_DIGITS
+  }, valueFormatOptions);
+
+  var notationDecimalChar = '';
+  var result = '';
+
+  if (typeof value === 'number') {
+    result = formatValue(value, formatOptions);
+  } else {
+    var lastChar = value == null ? void 0 : value.slice(-1);
+
+    if (lastChar === NUMBER_DELIMITER) {
+      notationDecimalChar = decimalDelimiter;
+    }
+
+    var numberResult = Number(value);
+
+    if (Number.isNaN(numberResult)) {
+      return '';
+    }
+
+    result = formatValue(numberResult, formatOptions);
+    result = "" + result + notationDecimalChar;
+  }
+
+  return result;
+}; // input: formatted number string
+// output: not formatted number string with decimal char
+
+export var parseFormattedNumber = function parseFormattedNumber(value, formatValue, thousandDelimiter, decimalDelimiter) {
+  if (value === undefined || value === '') {
+    return '';
+  }
+
+  var result = value.split(thousandDelimiter).join('');
+
+  if (decimalDelimiter !== NUMBER_DELIMITER) {
+    result = result.replace(decimalDelimiter, NUMBER_DELIMITER);
+  }
+
+  if ((result.match(new RegExp("\\" + NUMBER_DELIMITER, 'g')) || []).length > 1) {
+    var lastDecimalDelimiterIndex = result.lastIndexOf(NUMBER_DELIMITER);
+    result = result.slice(0, lastDecimalDelimiterIndex);
+  }
+
+  return result;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-input-number",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Input-Number UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@synerise/ds-icon": "^0.53.0",
     "@synerise/ds-tooltip": "^0.13.0",
-    "@synerise/ds-utils": "^0.24.1",
+    "@synerise/ds-utils": "^0.24.3",
     "uuid": "^7.0.2"
   },
   "peerDependencies": {
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@types/uuid": "7.0.0"
   },
-  "gitHead": "a9c9628df732abd42421880fd1aa61b7f7c580ee"
+  "gitHead": "41419f123b90134def2fecde455da13946fc2c0e"
 }