fix: export type CurrencyInputOnChangeValues and update examples (#331)

cchanxzy · Dec 29, 2023 · 8ea2c47 · 8ea2c47
1 parent 6aa5216
commit 8ea2c47
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 39 deletions.
diff --git a/src/examples/Example1.tsx b/src/examples/Example1.tsx
@@ -1,51 +1,48 @@
-import React, { FC, useState } from 'react';
-import CurrencyInput from '../components/CurrencyInput';
-import { CurrencyInputProps, CurrencyInputOnChangeValues } from '../components/CurrencyInputProps';
+import React, { useState } from 'react';
+import CurrencyInput, { CurrencyInputProps, CurrencyInputOnChangeValues } from '../index';
 
-export const Example1: FC = () => {
+export const Example1 = () => {
   const limit = 1000;
   const prefix = '£';
 
   const [errorMessage, setErrorMessage] = useState('');
   const [className, setClassName] = useState('');
   const [value, setValue] = useState<string | number>(123.45);
   const [values, setValues] = useState<CurrencyInputOnChangeValues>();
-  const [rawValue, setRawValue] = useState<string | undefined>(' ');
 
   /**
    * Handle validation
    */
-  const handleOnValueChange: CurrencyInputProps['onValueChange'] = (value, _, values): void => {
-    setValues(values);
-    setRawValue(value === undefined ? 'undefined' : value || ' ');
+  const handleOnValueChange: CurrencyInputProps['onValueChange'] = (_value, name, _values) => {
+    // _values is only for demo purposes in this example
+    setValues(_values);
 
-    if (!value) {
+    if (!_value) {
       setClassName('');
       setValue('');
       return;
     }
 
-    if (Number.isNaN(Number(value))) {
-      setErrorMessage('Please enter a valid number');
-      setClassName('is-invalid');
-      return;
-    }
-
-    if (Number(value) > limit) {
+    // value is over limit
+    if (Number(_value) > limit) {
       setErrorMessage(`Max: ${prefix}${limit}`);
       setClassName('is-invalid');
-      setValue(value);
+      setValue(_value);
       return;
     }
 
     setClassName('is-valid');
-    setValue(value);
+    setValue(_value);
   };
 
   return (
     <div className="row">
       <div className="col-12 mb-4">
-        <a href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/Example1.tsx">
+        <a
+          href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/Example1.tsx"
+          target="_blank"
+          rel="noreferrer"
+        >
           <h2>Example 1</h2>
         </a>
         <ul>
@@ -75,7 +72,7 @@ export const Example1: FC = () => {
                 <div className="row">
                   <div className="col-6">
                     <div className="text-muted mr-3">onValueChange:</div>
-                    {rawValue}
+                    {value}
                   </div>
                   <div className="col-6">
                     <div className="text-muted mr-3">Values:</div>

diff --git a/src/examples/Example2.tsx b/src/examples/Example2.tsx
@@ -1,7 +1,7 @@
-import React, { FC, useState } from 'react';
-import CurrencyInput from '../components/CurrencyInput';
+import React, { useState } from 'react';
+import CurrencyInput from '../index';
 
-export const Example2: FC = () => {
+export const Example2 = () => {
   const [errorMessage, setErrorMessage] = useState('');
   const [className, setClassName] = useState('');
   const [rawValue, setRawValue] = useState<string | undefined>(' ');
@@ -23,7 +23,11 @@ export const Example2: FC = () => {
   return (
     <div className="row">
       <div className="col-12 mb-4">
-        <a href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/Example2.tsx">
+        <a
+          href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/Example2.tsx"
+          target="_blank"
+          rel="noreferrer"
+        >
           <h2>Example 2</h2>
         </a>
         <ul>

diff --git a/src/examples/Example3.tsx b/src/examples/Example3.tsx
@@ -1,6 +1,5 @@
-import React, { FC, useState } from 'react';
-import CurrencyInput from '../components/CurrencyInput';
-import { CurrencyInputProps } from '../components/CurrencyInputProps';
+import React, { useState } from 'react';
+import CurrencyInput, { CurrencyInputProps } from '../index';
 
 const options: ReadonlyArray<CurrencyInputProps['intlConfig']> = [
   {
@@ -25,27 +24,30 @@ const options: ReadonlyArray<CurrencyInputProps['intlConfig']> = [
   },
 ];
 
-export const Example3: FC = () => {
+export const Example3 = () => {
   const [intlConfig, setIntlConfig] = useState<CurrencyInputProps['intlConfig']>(options[0]);
   const [value, setValue] = useState<string | undefined>('123');
-  const [rawValue, setRawValue] = useState<string | undefined>(' ');
 
-  const handleOnValueChange = (value: string | undefined): void => {
-    setRawValue(value === undefined ? 'undefined' : value || ' ');
+  const handleOnValueChange: CurrencyInputProps['onValueChange'] = (value) => {
     setValue(value);
   };
 
   const handleIntlSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const config = options[Number(event.target.value)];
     if (config) {
       setIntlConfig(config);
+      setValue('123');
     }
   };
 
   return (
     <div className="row">
       <div className="col-12 mb-4">
-        <a href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/Example3.tsx">
+        <a
+          href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/Example3.tsx"
+          target="_blank"
+          rel="noreferrer"
+        >
           <h2>Example 3</h2>
         </a>
         <ul>
@@ -91,7 +93,7 @@ export const Example3: FC = () => {
               <div className="row">
                 <div className="col-12">
                   <div className="text-muted mr-3">onValueChange:</div>
-                  {rawValue}
+                  {value}
                   <div className="text-muted mr-3 mt-3">intlConfig:</div>
                   {JSON.stringify(intlConfig)}
                 </div>

diff --git a/src/examples/Example4.tsx b/src/examples/Example4.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useReducer } from 'react';
-import CurrencyInput, { formatValue } from '..';
+import CurrencyInput, { formatValue } from '../index';
 
 type Field = {
   value: number | undefined;
@@ -85,7 +85,11 @@ export const Example4: FC = () => {
   return (
     <div className="row">
       <div className="col-12 mb-4">
-        <a href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/Example4.tsx">
+        <a
+          href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/Example4.tsx"
+          target="_blank"
+          rel="noreferrer"
+        >
           <h2>Example 4</h2>
         </a>
         <ul>

diff --git a/src/examples/FormatValuesExample.tsx b/src/examples/FormatValuesExample.tsx
@@ -1,7 +1,7 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { formatValue } from '../components/utils';
 
-const FormatValuesExample: FC = () => {
+const FormatValuesExample = () => {
   const [value, setValue] = useState('123456789.999');
   const [prefix, setPrefix] = useState('$');
   const [groupSeparator, setGroupSeparator] = useState(',');
@@ -37,7 +37,11 @@ const FormatValuesExample: FC = () => {
   return (
     <div className="row">
       <div className="col-12 mb-4">
-        <a href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/FormatValuesExample.tsx">
+        <a
+          href="https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples/FormatValuesExample.tsx"
+          target="_blank"
+          rel="noreferrer"
+        >
           <h2>Format values example</h2>
         </a>
         <ul>

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 import CurrencyInput from './components/CurrencyInput';
 
-export { CurrencyInputProps } from './components/CurrencyInputProps';
+export { CurrencyInputProps, CurrencyInputOnChangeValues } from './components/CurrencyInputProps';
 export default CurrencyInput;
 export { formatValue } from './components/utils/formatValue';