From 57df61955b818ee2766b0d2829ef41a3b58430a9 Mon Sep 17 00:00:00 2001 From: Ivanka Todorova Date: Mon, 7 Mar 2022 12:05:56 +0200 Subject: [PATCH 1/2] feat: new prop for a function that receives value as it's updating --- example/App.js | 160 ++++++++++++++++++++++++++++--------------------- src/index.tsx | 7 +++ 2 files changed, 98 insertions(+), 69 deletions(-) diff --git a/example/App.js b/example/App.js index dd62be8..341779e 100644 --- a/example/App.js +++ b/example/App.js @@ -10,6 +10,7 @@ import { View, Pressable, StatusBar, + ScrollView, } from 'react-native'; import IntlPhoneField from 'react-native-intl-phone-field'; @@ -23,6 +24,7 @@ export default function App() { const [defaultCountry, setDefaultCountry] = useState(DEFAULT_STATE); const [filled, setFilled] = useState(DEFAULT_STATE); const [realTimeValidation, setRealTimeValidation] = useState(false); + const [trackingValue, setTrackingValue] = useState(''); const onEndEditingMinimal = useCallback( ({isValid, countryCode, value, formatted, flag}) => { @@ -78,83 +80,103 @@ export default function App() { return ( - Keyboard.dismiss()} style={{flex: 1}}> - - - - Minimal - - - - Valid? - - {minimal.isValid ? 'Valid' : 'Invalid'} - - - - Country Code - - {minimal.countryCode ? minimal.countryCode : 'Undefined'} - + + Keyboard.dismiss()} style={{flex: 1}}> + + + + Minimal + + + + Valid? + + {minimal.isValid ? 'Valid' : 'Invalid'} + + + + Country Code + + {minimal.countryCode ? minimal.countryCode : 'Undefined'} + + - - - Default Country + Prefix - - - - Valid? - - {defaultCountry.isValid ? 'Valid' : 'Invalid'} - - - - Country Code - - {defaultCountry.countryCode - ? defaultCountry.countryCode - : 'Undefined'} - + + + Default Country + Prefix + + + + + Valid? + + {defaultCountry.isValid ? 'Valid' : 'Invalid'} + + + + Country Code + + {defaultCountry.countryCode + ? defaultCountry.countryCode + : 'Undefined'} + + - - - Filled + Styles - - - - Valid? - - {filled.isValid ? 'Valid' : 'Invalid'} - + + Filled + Styles + + + + Valid? + + {filled.isValid ? 'Valid' : 'Invalid'} + + + + Country Code + + {filled.countryCode ? filled.countryCode : 'Undefined'} + + - - Country Code - - {filled.countryCode ? filled.countryCode : 'Undefined'} - + + + Tracking Value + { + setTrackingValue(result.formatted); + }} + /> + + + Tracking Value: + {trackingValue} + - - - + + + ); } diff --git a/src/index.tsx b/src/index.tsx index 289cf39..af9a955 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -17,6 +17,7 @@ export type IntlPhoneFieldProps = { defaultFlag?: string; onEndEditing?: Function; onValidation?: Function; + onValueUpdate?: Function; containerStyle?: object; flagContainerStyle?: object; flagTextStyle?: object; @@ -30,6 +31,7 @@ export default function IntlPhoneField({ flagUndetermined = '❓', onEndEditing, onValidation, + onValueUpdate, defaultCountry, defaultPrefix, defaultValue, @@ -107,6 +109,11 @@ export default function IntlPhoneField({ useEffect(() => { onValidation && onValidation(isValid); }, [onValidation, isValid]); + + useEffect(() => { + onValueUpdate && onValueUpdate(value); + }, [value]); + return ( From 4589453e63ebf160f762ded54d63c97598aa14c9 Mon Sep 17 00:00:00 2001 From: Ivanka Todorova Date: Mon, 7 Mar 2022 12:07:07 +0200 Subject: [PATCH 2/2] docs: document new prop `onValueUpdate` --- README.md | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 3506be3..030fe17 100644 --- a/README.md +++ b/README.md @@ -58,20 +58,21 @@ For more detailed example, take a look at the demo app inside [example/](./examp ## ⚪ Props -| Property | Type | Default | Description | -|-------------------|------------|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| flagUndetermined | string? | `❓` | Displayed when country code cannot be derived from current phone number. | -| onEndEditing | `function` | undefined | Callback that is called when text input ends [ text input ends](https://reactnative.dev/docs/textinput#onendediting).
It receives [`result`](.src/index.ts#L124). | -| onValidation | `function` | undefined | Callback that is called each time the validation status changes. | -| defaultCountry | `string` | undefined | Two letter code for default country, eg. `BG` | -| defaultPrefix | `string` | undefined | Default number prefix, eg. `+359` | -| defaultValue | `string` | undefined | Default value for the `TextInput`, if you want to pre-populate it. | -| defaultFlag | `string` | undefined | Emoji for the default flag, eg. `🇧🇬` | -| containerStyle | `object` | undefined | Styles for the component's wrapper `` | -| flagContainerStyle | `object` | undefined | Styles for the flag emoji wrapper `` | -| flagTextStyle | `object` | undefined | Styles for the flag emoji `` | -| textInputStyle | `object` | undefined | Styles for the underlying `` | -| textInputProps | `object` | undefined | [Additional props](https://reactnative.dev/docs/textinput#props) for the underlying `` | +| Property | Type | Default | Description | +|-------------------|------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| flagUndetermined | string? | `❓` | Displayed when country code cannot be derived from current phone number. | +| onEndEditing | `function` | undefined | Callback that is called when text input ends [ text input ends](https://reactnative.dev/docs/textinput#onendediting).
It receives [`result`](.src/index.ts#L124). | +| onValidation | `function` | undefined | Callback that is called each time the validation status changes. | +| onValueUpdate | `function` | undefined | Callback that is called each time the underlying `value` changes. | +| defaultCountry | `string` | undefined | Two letter code for default country, eg. `BG` | +| defaultPrefix | `string` | undefined | Default number prefix, eg. `+359` | +| defaultValue | `string` | undefined | Default value for the `TextInput`, if you want to pre-populate it. | +| defaultFlag | `string` | undefined | Emoji for the default flag, eg. `🇧🇬` | +| containerStyle | `object` | undefined | Styles for the component's wrapper `` | +| flagContainerStyle | `object` | undefined | Styles for the flag emoji wrapper `` | +| flagTextStyle | `object` | undefined | Styles for the flag emoji `` | +| textInputStyle | `object` | undefined | Styles for the underlying `` | +| textInputProps | `object` | undefined | [Additional props](https://reactnative.dev/docs/textinput#props) for the underlying `` | ## Contributing