@synerise/ds-input-number 0.8.33 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.8.33...@synerise/ds-input-number@0.9.0) (2024-01-15)
+
+
+### Features
+
+* **input-number:** handle defaultValue prop ([1b5a378](https://github.com/Synerise/synerise-design/commit/1b5a3781db429748b2926d41969d8c298b3513e5))
+
+
+
+
+
 ## [0.8.33](https://github.com/Synerise/synerise-design/compare/@synerise/ds-input-number@0.8.32...@synerise/ds-input-number@0.8.33) (2023-12-13)
 
 **Note:** Version bump only for package @synerise/ds-input-number

package/dist/InputNumber.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import '@synerise/ds-core/dist/js/style';
 import './style/index.less';
-import { Props } from './InputNumber.types';
-declare const InputNumber: React.FC<Props>;
+import { InputNumberProps } from './InputNumber.types';
+declare const InputNumber: ({ label, description, errorText, raw, error, prefixel, suffixel, style, tooltip, tooltipConfig, value, defaultValue, valueFormatOptions, onChange, ...antdProps }: InputNumberProps) => JSX.Element;
 export default InputNumber;

package/dist/InputNumber.js

@@ -1,10 +1,10 @@
-var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style", "tooltip", "tooltipConfig", "valueFormatOptions", "onChange"];
+var _excluded = ["label", "description", "errorText", "raw", "error", "prefixel", "suffixel", "style", "tooltip", "tooltipConfig", "value", "defaultValue", "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); }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import * as React from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
 import '@synerise/ds-core/dist/js/style';
 import Tooltip from '@synerise/ds-tooltip';
@@ -25,6 +25,8 @@ var InputNumber = function InputNumber(_ref) {
       style = _ref.style,
       tooltip = _ref.tooltip,
       tooltipConfig = _ref.tooltipConfig,
+      value = _ref.value,
+      defaultValue = _ref.defaultValue,
       valueFormatOptions = _ref.valueFormatOptions,
       onChange = _ref.onChange,
       antdProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -34,23 +36,35 @@ var InputNumber = function InputNumber(_ref) {
       thousandDelimiter = _useDataFormat.thousandDelimiter,
       decimalDelimiter = _useDataFormat.decimalDelimiter;
 
-  var id = React.useMemo(function () {
+  var _useState = useState(value || defaultValue),
+      localValue = _useState[0],
+      setLocalValue = _useState[1];
+
+  useEffect(function () {
+    if (value && value !== localValue) {
+      setLocalValue(value);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [value]);
+  var id = useMemo(function () {
     return uuid();
   }, []);
   var showError = Boolean(error || errorText);
-  var formatter = React.useCallback(function (value) {
-    return formatNumber(value, formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions);
+  var formatter = useCallback(function (inputValue) {
+    var formatted = formatNumber(inputValue, formatValue, thousandDelimiter, decimalDelimiter, valueFormatOptions);
+    return formatted;
   }, [formatValue, valueFormatOptions, thousandDelimiter, decimalDelimiter]);
-  var parser = React.useCallback(function (value) {
-    return parseFormattedNumber(value, formatValue, thousandDelimiter, decimalDelimiter);
+  var parser = useCallback(function (inputValue) {
+    return parseFormattedNumber(inputValue, formatValue, thousandDelimiter, decimalDelimiter);
   }, [formatValue, thousandDelimiter, decimalDelimiter]);
-  var handleOnChange = React.useCallback(function (value) {
-    var formattedValue = formatter(value);
+  var handleOnChange = useCallback(function (changedValue) {
+    var formattedValue = formatter(changedValue);
     var parsedFormattedValue = parser(formattedValue);
     var valueAsNumber = typeof parsedFormattedValue === 'string' ? parseFloat(parsedFormattedValue) : parsedFormattedValue;
-    var resultValue = Number.isNaN(valueAsNumber) ? '' : valueAsNumber;
+    var resultValue = Number.isNaN(valueAsNumber) ? defaultValue : valueAsNumber;
+    setLocalValue(resultValue);
     onChange && onChange(resultValue);
-  }, [onChange, formatter, parser]);
+  }, [formatter, parser, defaultValue, onChange]);
   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({
@@ -73,6 +87,8 @@ var InputNumber = function InputNumber(_ref) {
     autoComplete: "off",
     formatter: formatter,
     parser: parser,
+    defaultValue: defaultValue,
+    value: localValue,
     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,16 +1,18 @@
-import * as React from 'react';
-import { InputNumberProps } from 'antd/lib/input-number';
+import { ReactNode } from 'react';
+import { InputNumberProps as AntdInputNumberProps } 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;
-    description?: React.ReactNode | string;
+export type InputNumberProps = AntdInputNumberProps & {
+    errorText?: ReactNode;
+    label?: ReactNode;
+    defaultValue?: number;
+    description?: ReactNode;
     error?: boolean;
-    prefixel?: React.ReactNode | string;
-    suffixel?: React.ReactNode | string;
+    prefixel?: ReactNode;
+    suffixel?: ReactNode;
     raw?: boolean;
     tooltip?: string;
     tooltipConfig?: TooltipProps;
     valueFormatOptions?: NumberToFormatOptions;
-}
+};
+export type Props = InputNumberProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-input-number",
-  "version": "0.8.33",
+  "version": "0.9.0",
   "description": "Input-Number UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,8 +34,8 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-data-format": "^0.4.6",
-    "@synerise/ds-icon": "^0.58.9",
-    "@synerise/ds-tooltip": "^0.14.13",
+    "@synerise/ds-icon": "^0.59.0",
+    "@synerise/ds-tooltip": "^0.14.14",
     "@synerise/ds-utils": "^0.24.23",
     "uuid": "^8.3.2"
   },
@@ -50,5 +50,5 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/uuid": "9.0.4"
   },
-  "gitHead": "76edb4723a30c59f1a54f666f66fcd814de0af70"
+  "gitHead": "ba51e38beff83b8adba409f09311131f429ada01"
 }