diff --git a/src/examples/Example1.tsx b/src/examples/Example1.tsx index 159a24c..752eeec 100644 --- a/src/examples/Example1.tsx +++ b/src/examples/Example1.tsx @@ -1,8 +1,7 @@ -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 = '£'; @@ -10,42 +9,40 @@ export const Example1: FC = () => { const [className, setClassName] = useState(''); const [value, setValue] = useState(123.45); const [values, setValues] = useState(); - const [rawValue, setRawValue] = useState(' '); /** * 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 (
- +

Example 1

    @@ -75,7 +72,7 @@ export const Example1: FC = () => {
    onValueChange:
    - {rawValue} + {value}
    Values:
    diff --git a/src/examples/Example2.tsx b/src/examples/Example2.tsx index 9589fa3..cfdf9df 100644 --- 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(' '); @@ -23,7 +23,11 @@ export const Example2: FC = () => { return (
    - +

    Example 2

      diff --git a/src/examples/Example3.tsx b/src/examples/Example3.tsx index 006f29d..8837749 100644 --- 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 = [ { @@ -25,13 +24,11 @@ const options: ReadonlyArray = [ }, ]; -export const Example3: FC = () => { +export const Example3 = () => { const [intlConfig, setIntlConfig] = useState(options[0]); const [value, setValue] = useState('123'); - const [rawValue, setRawValue] = useState(' '); - const handleOnValueChange = (value: string | undefined): void => { - setRawValue(value === undefined ? 'undefined' : value || ' '); + const handleOnValueChange: CurrencyInputProps['onValueChange'] = (value) => { setValue(value); }; @@ -39,13 +36,18 @@ export const Example3: FC = () => { const config = options[Number(event.target.value)]; if (config) { setIntlConfig(config); + setValue('123'); } }; return (
      - +

      Example 3

        @@ -91,7 +93,7 @@ export const Example3: FC = () => {
        onValueChange:
        - {rawValue} + {value}
        intlConfig:
        {JSON.stringify(intlConfig)}
        diff --git a/src/examples/Example4.tsx b/src/examples/Example4.tsx index fa96b85..75977fe 100644 --- 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 (
        - +

        Example 4

          diff --git a/src/examples/FormatValuesExample.tsx b/src/examples/FormatValuesExample.tsx index 10b1a0a..9058cda 100644 --- 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 (
          - +

          Format values example

            diff --git a/src/index.ts b/src/index.ts index e90008a..7c3d4bc 100644 --- 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';