@homefile/components-v2 2.24.11 → 2.24.13

package/dist/components/forms/dynamicForm/fields/CurrencyField.js

@@ -1,17 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller, useFormContext } from 'react-hook-form';
+import { NumericFormat } from 'react-number-format';
 import { Flex, Input } from '@chakra-ui/react';
 import { FormIcon, LabeledField } from '../../..';
-import { formatCurrency } from '../../../../utils';
 export const CurrencyField = ({ label, id, icon, placeholder, value, }) => {
     const { control } = useFormContext();
-    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
-                    const handleChange = (e) => {
-                        const { value } = e.target;
-                        const number = Number(value.replace(/[^0-9]+/g, '')) / 100;
-                        const currency = formatCurrency({ value: number });
-                        onChange(currency);
-                    };
-                    return (_jsx(LabeledField, { label: label, children: _jsx(Input, { onChange: handleChange, placeholder: placeholder, textAlign: "right", value: value, _placeholder: { color: 'gray.2' } }) }));
+    return (_jsxs(Flex, { align: "center", gap: "base", flex: "auto", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field }) => {
+                    return (_jsx(LabeledField, { label: label, children: _jsx(NumericFormat, Object.assign({}, field, { customInput: Input, thousandSeparator: true, decimalScale: 2, fixedDecimalScale: true, prefix: "$", placeholder: placeholder, textAlign: "right", _placeholder: { color: 'gray.2' }, onValueChange: ({ floatValue }) => {
+                                field.onChange(floatValue);
+                            } })) }));
                 } })] }));
 };

package/dist/stories/propertyTiles/MortgageInfo.stories.js

@@ -11,7 +11,7 @@ export default {
             amount: 0,
             maturityDate: '2025-04-17T00:00:00.000Z',
             documentDate: '2017-04-17T00:00:00.000Z',
-            estimatedMortgageBalance: 0,
+            estimatedMortgageBalance: 295847.12,
             estimatedMortgagePayment: 0,
             interestRate: 0,
             interestRateType: '',

package/dist/utils/Formaters.utils.js

@@ -104,7 +104,7 @@ export const joinDayMonthYear = (value) => {
     });
 };
 export const formatISODate = (value) => {
-    const displayValue = isValid(parseISO(value))
+    const displayValue = (isValid(parseISO(value)) || isValid(new Date(value)))
         ? format(value, 'MM/dd/yyyy')
         : '';
     return displayValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.24.11",
+  "version": "2.24.13",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",
@@ -76,6 +76,7 @@
     "react-i18next": "^15.4.0",
     "react-icons": "^5.4.0",
     "react-modern-calendar-datepicker": "^3.1.6",
+    "react-number-format": "^5.4.4",
     "react-quill-new": "^3.3.3",
     "react-spinners": "^0.15.0",
     "recharts": "^2.15.0",

package/src/components/forms/dynamicForm/fields/CurrencyField.tsx

@@ -1,8 +1,8 @@
 import { Controller, useFormContext } from 'react-hook-form'
+import {NumericFormat} from 'react-number-format'
 import { Flex, Input } from '@chakra-ui/react'
 import { TextFieldI } from '@/interfaces'
 import { FormIcon, LabeledField } from '@/components'
-import { formatCurrency } from '@/utils'
 
 export const CurrencyField = ({
   label,
@@ -20,21 +20,22 @@ export const CurrencyField = ({
         control={control}
         name={id}
         defaultValue={value}
-        render={({ field: { value, onChange } }) => {
-          const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            const { value } = e.target
-            const number = Number(value.replace(/[^0-9]+/g, '')) / 100
-            const currency = formatCurrency({ value: number })
-            onChange(currency)
-          }
+        render={({ field}) => {
           return (
             <LabeledField label={label}>
-              <Input
-                onChange={handleChange}
+              <NumericFormat
+                {...field}
+                customInput={Input}
+                thousandSeparator
+                decimalScale={2}
+                fixedDecimalScale
+                prefix="$"
                 placeholder={placeholder}
                 textAlign="right"
-                value={value}
                 _placeholder={{ color: 'gray.2' }}
+                onValueChange={({ floatValue }) => {
+                  field.onChange(floatValue)
+                }}
               />
             </LabeledField>
           )

package/src/stories/propertyTiles/MortgageInfo.stories.tsx

@@ -13,7 +13,7 @@ export default {
       amount: 0,
       maturityDate: '2025-04-17T00:00:00.000Z',
       documentDate: '2017-04-17T00:00:00.000Z',
-      estimatedMortgageBalance: 0,
+      estimatedMortgageBalance: 295847.12,
       estimatedMortgagePayment: 0,
       interestRate: 0,
       interestRateType: '',

package/src/utils/Formaters.utils.ts

@@ -142,7 +142,7 @@ interface FormatCurrencyI {
 }
 
 export const formatISODate = (value: string) => {
-  const displayValue = isValid(parseISO(value))
+  const displayValue = (isValid(parseISO(value)) || isValid(new Date(value)))
     ? format(value, 'MM/dd/yyyy')
     : ''