@helpdice/ui 2.6.1-beta.1 → 2.6.1-beta.2

package/esm/input/input-currency-props.d.ts

@@ -96,7 +96,7 @@ export type CurrencyInputProps = Overwrite<React.ComponentPropsWithRef<'input'>,
     /**
      * Handle change in value
      */
-    onValueChange?: (value: string | undefined, name?: string, values?: CurrencyInputOnChangeValues) => void;
+    onChange?: (value: string | undefined, name?: string, values?: CurrencyInputOnChangeValues) => void;
     /**
      * Placeholder if there is no value
      */

package/esm/input/input-currency-range.d.ts

@@ -1,10 +1,23 @@
 import { CurrencyInputProps } from "./input-currency-props";
 import React from "react";
 type Override<T, U> = Omit<T, keyof U> & U;
+type RangeValue = {
+    min: number;
+    max: number;
+};
+type CurrencyRangeOutput = {
+    min: number;
+    max: number;
+    currency: string;
+};
 type CurrencyRangeProps = Override<CurrencyInputProps, {
-    onChange: (val: any) => void;
+    value?: RangeValue;
+    defaultValue?: RangeValue;
+    onChange?: (val: CurrencyRangeOutput) => void;
+    debounce?: number;
     error?: boolean;
     helperText?: string;
 }>;
-declare function CurrencyRangeInput({ prefix, allowDecimals, onChange, intlConfig, children, error, helperText }: CurrencyRangeProps): React.JSX.Element;
-export default CurrencyRangeInput;
+declare function CurrencyRangeInput({ prefix, allowDecimals, intlConfig, children, value, defaultValue, onChange, debounce, error: externalError, helperText: externalHelperText, }: CurrencyRangeProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CurrencyRangeInput>;
+export default _default;

package/esm/input/input-currency-range.js

@@ -2,83 +2,89 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import Grid from "../grid";
 import Input from ".";
-import React, { useEffect } from "react";
+import React, { useMemo, useState, useEffect, useCallback } from "react";
 import InputBlockLabel, { InputError } from "./input-block-label";
-function parseCurrency(value) {
-  var _trimmed$match;
-  var trimmed = value.trim();
-
-  // Extract currency symbol
-  var currencySymbol = ((_trimmed$match = trimmed.match(/[^\d.,\s]/)) === null || _trimmed$match === void 0 ? void 0 : _trimmed$match[0]) || "";
-
-  // Remove everything except digits, comma, dot
-  var numericPart = trimmed.replace(/[^\d.,]/g, "");
-
-  // Convert comma to dot if needed
-  var normalized = numericPart.replace(",", ".");
-  return {
-    amount: Number(normalized),
-    currency: currencySymbol
-  };
-}
 function CurrencyRangeInput(_ref) {
   var prefix = _ref.prefix,
     allowDecimals = _ref.allowDecimals,
-    onChange = _ref.onChange,
     intlConfig = _ref.intlConfig,
     children = _ref.children,
-    error = _ref.error,
-    helperText = _ref.helperText;
-  var _React$useState = React.useState({
-      min: '0',
-      max: '0',
-      currency: ''
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    value = _React$useState2[0],
-    setValue = _React$useState2[1];
-  useEffect(function () {
-    var min = parseCurrency(value.min);
-    var max = parseCurrency(value.max);
-    if (max.amount > min.amount) {
-      if (onChange) onChange({
-        min: min.amount,
-        max: max.amount,
-        currency: min.currency
-      });
+    value = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? {
+      min: 0,
+      max: 0
+    } : _ref$defaultValue,
+    onChange = _ref.onChange,
+    _ref$debounce = _ref.debounce,
+    debounce = _ref$debounce === void 0 ? 300 : _ref$debounce,
+    externalError = _ref.error,
+    externalHelperText = _ref.helperText;
+  var isControlled = value !== undefined;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var currentValue = isControlled ? value : internalValue;
+  var setValue = useCallback(function (val) {
+    if (!isControlled) {
+      setInternalValue(val);
     }
-  }, [value]);
+  }, [isControlled]);
+
+  // Validation
+  var isInvalid = useMemo(function () {
+    if (!currentValue.min || !currentValue.max) return false;
+    return currentValue.max <= currentValue.min;
+  }, [currentValue]);
+
+  // Debounced onChange
+  useEffect(function () {
+    if (!onChange || isInvalid) return;
+    var handler = setTimeout(function () {
+      if (currentValue.min && currentValue.max) {
+        onChange({
+          min: currentValue.min,
+          max: currentValue.max,
+          currency: ''
+        });
+      }
+    }, debounce);
+    return function () {
+      return clearTimeout(handler);
+    };
+  }, [isInvalid, onChange, debounce, currentValue]);
+  var finalError = externalError !== null && externalError !== void 0 ? externalError : isInvalid;
+  var finalHelperText = externalHelperText !== null && externalHelperText !== void 0 ? externalHelperText : isInvalid ? "Max must be greater than min" : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: "with-label"
   }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement(Grid.Container, {
     gap: 2
   }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input.Currency, {
-    onChange: function onChange(e) {
-      return setValue(function (prev) {
-        return _extends({}, prev, {
-          min: e.target.value
-        });
-      });
+    value: currentValue.min,
+    onChange: function onChange(val) {
+      return setValue(_extends({}, currentValue, {
+        min: Number(val)
+      }));
     },
     intlConfig: intlConfig,
     prefix: prefix,
     placeholder: "Min",
     allowDecimals: allowDecimals
   })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Input.Currency, {
-    onChange: function onChange(e) {
-      return setValue(function (prev) {
-        return _extends({}, prev, {
-          max: e.target.value
-        });
-      });
+    value: currentValue.max,
+    onChange: function onChange(val) {
+      return setValue(_extends({}, currentValue, {
+        max: Number(val)
+      }));
     },
     intlConfig: intlConfig,
     prefix: prefix,
     placeholder: "Max",
     allowDecimals: allowDecimals
-  }))), helperText && /*#__PURE__*/React.createElement(InputError, {
-    error: error,
-    text: helperText
+  }))), finalHelperText && /*#__PURE__*/React.createElement(InputError, {
+    error: finalError,
+    text: finalHelperText
   }));
 }
-export default CurrencyRangeInput;
+export default /*#__PURE__*/React.memo(CurrencyRangeInput);

package/esm/input/input-currency.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
+var _excluded = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
 import _JSXStyle from "../styled-jsx.es.js";
 import React, { useState, useEffect, useRef, forwardRef, useMemo, useImperativeHandle } from 'react';
 import { isNumber, cleanValue, fixedDecimalValue, formatValue, getLocaleConfig, padTrimValue, getSuffix, repositionCursor } from './utils';
@@ -23,7 +23,6 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     userMaxLength = _ref.maxLength,
     userValue = _ref.value,
-    onValueChange = _ref.onValueChange,
     fixedDecimalLength = _ref.fixedDecimalLength,
     placeholder = _ref.placeholder,
     decimalScale = _ref.decimalScale,
@@ -136,11 +135,15 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var stringValue = cleanValue(_extends({
       value: modifiedValue
     }, cleanValueOptions));
+
+    // console.log("Before clean:", modifiedValue);
+    // console.log("After clean:", stringValue);
+
     if (userMaxLength && stringValue.replace(/-/g, '').length > userMaxLength) {
       return;
     }
     if (stringValue === '' || stringValue === '-' || stringValue === decimalSeparator) {
-      onValueChange && onValueChange(undefined, name, {
+      onChange && onChange(undefined, name, {
         "float": null,
         formatted: '',
         value: ''
@@ -152,9 +155,15 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
     var stringValueWithoutSeparator = decimalSeparator ? stringValue.replace(decimalSeparator, '.') : stringValue;
     var numberValue = parseFloat(stringValueWithoutSeparator);
+
+    // console.log('Number Value', numberValue);
+
     var formattedValue = formatValue(_extends({
       value: stringValue
     }, formatValueOptions));
+
+    // console.log('Formatted Value', numberValue);
+
     if (cursorPosition != null) {
       // Prevent cursor jumping
       var newCursor = cursorPosition + (formattedValue.length - value.length);
@@ -162,15 +171,25 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setCursor(newCursor);
       setChangeCount(changeCount + 1);
     }
+
+    // console.log({
+    //     inputValue: value,
+    //     modifiedValue,
+    //     stateValue,
+    //     selectionStart,
+    //     lastKeyStroke
+    //     });
+
     setStateValue(formattedValue);
-    if (onValueChange) {
+    if (onChange) {
       var values = {
         "float": numberValue,
         formatted: formattedValue,
         value: stringValue
       };
-      onValueChange(stringValue, name, values);
+      onChange(stringValue, name, values);
     }
+    // onChange && onChange(stringValue);
   };
 
   /**
@@ -181,7 +200,6 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
       value = _event$target.value,
       selectionStart = _event$target.selectionStart;
     processChange(value, selectionStart);
-    onChange && onChange(event);
   };
 
   /**
@@ -213,8 +231,8 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var formattedValue = formatValue(_extends({}, formatValueOptions, {
       value: newValue
     }));
-    if (onValueChange && formatValueOnBlur) {
-      onValueChange(newValue, name, {
+    if (onChange && formatValueOnBlur) {
+      onChange(newValue, name, {
         "float": numberValue,
         formatted: formattedValue,
         value: newValue
@@ -251,6 +269,34 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onKeyDown && onKeyDown(event);
   };
 
+  // const handleOnKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  //     lastKeyStrokeRef.current = event.key;
+
+  //     // Handle arrow up/down with step
+  //     if (step && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+  //         event.preventDefault();
+
+  //         const currentValue =
+  //             parseFloat(
+  //                 userValue != null
+  //                     ? String(userValue).replace(decimalSeparator, '.')
+  //                     : cleanValue({ value: stateValue, ...cleanValueOptions })
+  //             ) || 0;
+
+  //         const newValue = event.key === 'ArrowUp' ? currentValue + step : currentValue - step;
+
+  //         if ((min !== undefined && newValue < Number(min)) || (max !== undefined && newValue > Number(max))) return;
+
+  //         const fixedLength = String(step).includes('.') ? String(step).split('.')[1].length : undefined;
+
+  //         processChange(
+  //             (fixedLength ? newValue.toFixed(fixedLength) : newValue).replace('.', decimalSeparator)
+  //         );
+  //     }
+
+  //     onKeyDown && onKeyDown(event);
+  // };
+
   /**
    * Handle key up event
    *
@@ -292,13 +338,19 @@ export var InputCurrency = /*#__PURE__*/forwardRef(function (_ref, ref) {
    * If user has only entered "-" or decimal separator,
    * keep the char to allow them to enter next value
    */
+  // const getRenderValue = () => {
+  //     if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
+  //         // console.log('User Value', userValue);
+  //         return formatValue({
+  //             ...formatValueOptions,
+  //             decimalScale: dirty ? undefined : decimalScale,
+  //             value: String(userValue)
+  //         });
+  //     }
+
+  //     return stateValue;
+  // };
   var getRenderValue = function getRenderValue() {
-    if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
-      return formatValue(_extends({}, formatValueOptions, {
-        decimalScale: dirty ? undefined : decimalScale,
-        value: String(userValue)
-      }));
-    }
     return stateValue;
   };
   var inputProps = _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.6.1-beta.1",
+  "version": "2.6.1-beta.2",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",