From 23a2589a869abc58ef4726875df155e7eb7d763d Mon Sep 17 00:00:00 2001 From: Don Kackman Date: Wed, 12 Feb 2025 10:35:30 -0600 Subject: [PATCH] replace react-imask with NumericFormat --- package.json | 2 +- pnpm-lock.yaml | 60 +++++++----------------------- src/components/ui/masked-input.tsx | 50 +++++++++++++++++++------ src/pages/MakeOffer.tsx | 22 ++++------- 4 files changed, 62 insertions(+), 72 deletions(-) diff --git a/package.json b/package.json index d520b099..eb477c48 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", - "react-imask": "^7.6.1", + "react-number-format": "^5.4.3", "react-router-dom": "^6.26.0", "react-toastify": "^11.0.3", "tailwind-merge": "^2.5.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1613f47f..30c87123 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -131,9 +131,9 @@ importers: react-hook-form: specifier: ^7.53.0 version: 7.53.0(react@18.3.1) - react-imask: - specifier: ^7.6.1 - version: 7.6.1(react@18.3.1) + react-number-format: + specifier: ^5.4.3 + version: 5.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-router-dom: specifier: ^6.26.0 version: 6.26.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -313,10 +313,6 @@ packages: engines: {node: '>=6.0.0'} hasBin: true - '@babel/runtime-corejs3@7.26.0': - resolution: {integrity: sha512-YXHu5lN8kJCb1LOb9PgV6pvak43X2h4HvRApcN5SdWeaItQOzfn1hgP6jasD6KWQyJDBxrVmA9o9OivlnNJK/w==} - engines: {node: '>=6.9.0'} - '@babel/runtime@7.25.0': resolution: {integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==} engines: {node: '>=6.9.0'} @@ -2235,9 +2231,6 @@ packages: cookie-es@1.2.2: resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==} - core-js-pure@3.39.0: - resolution: {integrity: sha512-7fEcWwKI4rJinnK+wLTezeg2smbFFdSBP6E2kQZNbnzM2s1rpKQ6aaRteZSSg7FLU3P0HGGVo/gbpfanU36urg==} - cosmiconfig@7.1.0: resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==} engines: {node: '>=10'} @@ -2601,10 +2594,6 @@ packages: resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==} engines: {node: '>= 4'} - imask@7.6.1: - resolution: {integrity: sha512-sJlIFM7eathUEMChTh9Mrfw/IgiWgJqBKq2VNbyXvBZ7ev/IlO6/KQTKlV/Fm+viQMLrFLG/zCuudrLIwgK2dg==} - engines: {npm: '>=4.0.0'} - import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -3138,9 +3127,6 @@ packages: process-warning@1.0.0: resolution: {integrity: sha512-du4wfLyj4yCZq1VupnVSZmRsPJsNuxoDQFdCFHLaYiEbFBD7QE0a+I4D7hOxrVnh78QE/YipFAj9lXHiXocV+Q==} - prop-types@15.8.1: - resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} - pseudolocale@2.1.0: resolution: {integrity: sha512-af5fsrRvVwD+MBasBJvuDChT0KDqT0nEwD9NTgbtHJ16FKomWac9ua0z6YVNB4G9x9IOaiGWym62aby6n4tFMA==} engines: {node: '>=16.0.0'} @@ -3184,18 +3170,18 @@ packages: peerDependencies: react: ^16.8.0 || ^17 || ^18 || ^19 - react-imask@7.6.1: - resolution: {integrity: sha512-vLNfzcCz62Yzx/GRGh5tiCph9Gbh2cZu+Tz8OiO5it2eNuuhpA0DWhhSlOtVtSJ80+Bx+vFK5De8eQ9AmbkXzA==} - engines: {npm: '>=4.0.0'} - peerDependencies: - react: '>=0.14.0' - react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} react-is@18.3.1: resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} + react-number-format@5.4.3: + resolution: {integrity: sha512-VCY5hFg/soBighAoGcdE+GagkJq0230qN6jcS5sp8wQX1qy1fYN/RX7/BXkrs0oyzzwqR8/+eSUrqXbGeywdUQ==} + peerDependencies: + react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-remove-scroll-bar@2.3.6: resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==} engines: {node: '>=10'} @@ -3861,11 +3847,6 @@ snapshots: dependencies: '@babel/types': 7.26.3 - '@babel/runtime-corejs3@7.26.0': - dependencies: - core-js-pure: 3.39.0 - regenerator-runtime: 0.14.1 - '@babel/runtime@7.25.0': dependencies: regenerator-runtime: 0.14.1 @@ -5961,8 +5942,6 @@ snapshots: cookie-es@1.2.2: {} - core-js-pure@3.39.0: {} - cosmiconfig@7.1.0: dependencies: '@types/parse-json': 4.0.2 @@ -6391,10 +6370,6 @@ snapshots: ignore@5.3.1: {} - imask@7.6.1: - dependencies: - '@babel/runtime-corejs3': 7.26.0 - import-fresh@3.3.0: dependencies: parent-module: 1.0.1 @@ -6880,12 +6855,6 @@ snapshots: process-warning@1.0.0: {} - prop-types@15.8.1: - dependencies: - loose-envify: 1.4.0 - object-assign: 4.1.1 - react-is: 16.13.1 - pseudolocale@2.1.0: dependencies: commander: 10.0.1 @@ -6923,16 +6892,15 @@ snapshots: dependencies: react: 18.3.1 - react-imask@7.6.1(react@18.3.1): - dependencies: - imask: 7.6.1 - prop-types: 15.8.1 - react: 18.3.1 - react-is@16.13.1: {} react-is@18.3.1: {} + react-number-format@5.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll-bar@2.3.6(@types/react@18.3.3)(react@18.3.1): dependencies: react: 18.3.1 diff --git a/src/components/ui/masked-input.tsx b/src/components/ui/masked-input.tsx index b714c959..6a102609 100644 --- a/src/components/ui/masked-input.tsx +++ b/src/components/ui/masked-input.tsx @@ -1,30 +1,58 @@ import * as React from 'react'; -import { IMaskMixin } from 'react-imask'; import { Input, InputProps } from './input'; +import { NumericFormat } from 'react-number-format'; -const MaskedInput = IMaskMixin( - ({ inputRef, ...props }: { inputRef: React.Ref }) => ( - - ), +interface MaskedInputProps extends InputProps { + inputRef?: React.Ref; + onValueChange?: (values: { floatValue?: number }) => void; + allowLeadingZeros?: boolean; + allowDecimal?: boolean; + allowNegative?: boolean; + allowThousands?: boolean; + allowLeadingZeroScale?: boolean; + allowDecimalScale?: boolean; + allowLeadingZeroWidth?: boolean; + allowLeadingZeroWidthScale?: boolean; + type?: "text"; + decimalScale?: number; +} + +const MaskedInput = React.forwardRef( + ({ inputRef, type = "text", onValueChange, ...props }, ref) => ( + + ) ); MaskedInput.displayName = 'MaskedInput'; // Extended Masked Input for XCH inputs -interface XchInputProps extends InputProps { +interface XchInputProps extends MaskedInputProps { decimals?: number; } const TokenAmountInput = React.forwardRef( - ({ decimals = 12, type = 'text', ...props }, ref) => ( + ({ decimals = 12, ...props }, ref) => ( ), ); diff --git a/src/pages/MakeOffer.tsx b/src/pages/MakeOffer.tsx index 5bbbfbd0..f888f356 100644 --- a/src/pages/MakeOffer.tsx +++ b/src/pages/MakeOffer.tsx @@ -182,12 +182,9 @@ export function MakeOffer() { placeholder={'0.00'} className='pr-12' value={state.fee} - onBlur={(e) => - useOfferState.setState({ fee: e.target.value }) - } - onChange={(e) => - useOfferState.setState({ fee: e.target.value }) - } + onValueChange={(values) => { + useOfferState.setState({ fee: values.floatValue?.toString() ?? '' }) + }} />
@@ -457,8 +454,9 @@ function AssetSelector({ className='rounded-r-none z-10' placeholder={t`Enter amount`} value={assets.xch} - onBlur={(e) => setAssets({ ...assets, xch: e.target.value })} - onChange={(e) => setAssets({ ...assets, xch: e.target.value })} + onValueChange={(values) => { + setAssets({ ...assets, xch: values.floatValue?.toString() ?? '' }); + }} />