Skip to content

Commit

Permalink
Merge pull request #1 from fakeheal/prop-track-value
Browse files Browse the repository at this point in the history 
feat: prop for tracking value as it updates
  • Loading branch information
@fakeheal
fakeheal authored Mar 7, 2022
2 parents 0c46a4a + 4589453 commit 2d821ad
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 83 deletions.
29 changes: 15 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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).<br/> 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 `<View />` |
| flagContainerStyle | `object` | undefined | Styles for the flag emoji wrapper `<View />` |
| flagTextStyle | `object` | undefined | Styles for the flag emoji `<Text />` |
| textInputStyle | `object` | undefined | Styles for the underlying `<TextInput />` |
| textInputProps | `object` | undefined | [Additional props](https://reactnative.dev/docs/textinput#props) for the underlying `<TextInput />` |
| 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). <br/> 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 `<View />` |
| flagContainerStyle | `object` | undefined | Styles for the flag emoji wrapper `<View />` |
| flagTextStyle | `object` | undefined | Styles for the flag emoji `<Text />` |
| textInputStyle | `object` | undefined | Styles for the underlying `<TextInput />` |
| textInputProps | `object` | undefined | [Additional props](https://reactnative.dev/docs/textinput#props) for the underlying `<TextInput />` |

## Contributing

Expand Down
160 changes: 91 additions & 69 deletions example/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
View,
Pressable,
StatusBar,
ScrollView,
} from 'react-native';
import IntlPhoneField from 'react-native-intl-phone-field';

Expand All @@ -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}) => {
Expand Down Expand Up @@ -78,83 +80,103 @@ export default function App() {
return (
<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
<StatusBar barStyle="dark-content" />
<Pressable onPress={() => Keyboard.dismiss()} style={{flex: 1}}>
<KeyboardAvoidingView style={{flex: 1}}>
<View style={styles.container}>
<View style={styles.example}>
<Text style={styles.exampleTitle}>Minimal</Text>
<IntlPhoneField onEndEditing={onEndEditingMinimal} />
<View style={styles.output}>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Valid?</Text>
<Text style={styles.outputText}>
{minimal.isValid ? 'Valid' : 'Invalid'}
</Text>
</View>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Country Code</Text>
<Text style={styles.outputText}>
{minimal.countryCode ? minimal.countryCode : 'Undefined'}
</Text>
<ScrollView>
<Pressable onPress={() => Keyboard.dismiss()} style={{flex: 1}}>
<KeyboardAvoidingView style={{flex: 1}}>
<View style={styles.container}>
<View style={styles.example}>
<Text style={styles.exampleTitle}>Minimal</Text>
<IntlPhoneField onEndEditing={onEndEditingMinimal} />
<View style={styles.output}>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Valid?</Text>
<Text style={styles.outputText}>
{minimal.isValid ? 'Valid' : 'Invalid'}
</Text>
</View>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Country Code</Text>
<Text style={styles.outputText}>
{minimal.countryCode ? minimal.countryCode : 'Undefined'}
</Text>
</View>
</View>
</View>
</View>
<View style={styles.example}>
<Text style={styles.exampleTitle}>Default Country + Prefix</Text>
<IntlPhoneField
onEndEditing={onEndEditingDefaultCountry}
defaultCountry="BG"
defaultPrefix="+359"
defaultFlag="🇧🇬"
/>
<View style={styles.output}>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Valid?</Text>
<Text style={styles.outputText}>
{defaultCountry.isValid ? 'Valid' : 'Invalid'}
</Text>
</View>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Country Code</Text>
<Text style={styles.outputText}>
{defaultCountry.countryCode
? defaultCountry.countryCode
: 'Undefined'}
</Text>
<View style={styles.example}>
<Text style={styles.exampleTitle}>
Default Country + Prefix
</Text>
<IntlPhoneField
onEndEditing={onEndEditingDefaultCountry}
defaultCountry="BG"
defaultPrefix="+359"
defaultFlag="🇧🇬"
/>
<View style={styles.output}>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Valid?</Text>
<Text style={styles.outputText}>
{defaultCountry.isValid ? 'Valid' : 'Invalid'}
</Text>
</View>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Country Code</Text>
<Text style={styles.outputText}>
{defaultCountry.countryCode
? defaultCountry.countryCode
: 'Undefined'}
</Text>
</View>
</View>
</View>
</View>
<View style={styles.example}>
<Text style={styles.exampleTitle}>Filled + Styles</Text>
<IntlPhoneField
onEndEditing={onEndEditingFilled}
onValidation={onValidationFilled}
defaultValue="+359 88 888 8888"
defaultCountry="BG"
defaultPrefix="+359"
defaultFlag="🇧🇬"
containerStyle={
realTimeValidation ? styles.valid : styles.invalid
}
/>
<View style={styles.output}>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Valid?</Text>
<Text style={styles.outputText}>
{filled.isValid ? 'Valid' : 'Invalid'}
</Text>
<View style={styles.example}>
<Text style={styles.exampleTitle}>Filled + Styles</Text>
<IntlPhoneField
onEndEditing={onEndEditingFilled}
onValidation={onValidationFilled}
defaultValue="+359 88 888 8888"
defaultCountry="BG"
defaultPrefix="+359"
defaultFlag="🇧🇬"
containerStyle={
realTimeValidation ? styles.valid : styles.invalid
}
/>
<View style={styles.output}>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Valid?</Text>
<Text style={styles.outputText}>
{filled.isValid ? 'Valid' : 'Invalid'}
</Text>
</View>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Country Code</Text>
<Text style={styles.outputText}>
{filled.countryCode ? filled.countryCode : 'Undefined'}
</Text>
</View>
</View>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Country Code</Text>
<Text style={styles.outputText}>
{filled.countryCode ? filled.countryCode : 'Undefined'}
</Text>
</View>
<View style={styles.example}>
<Text style={styles.exampleTitle}>Tracking Value</Text>
<IntlPhoneField
defaultValue={trackingValue}
onValueUpdate={setTrackingValue}
onEndEditing={result => {
setTrackingValue(result.formatted);
}}
/>
<View style={styles.output}>
<View style={styles.outputRow}>
<Text style={styles.outputLabel}>Tracking Value:</Text>
<Text style={styles.outputText}>{trackingValue}</Text>
</View>
</View>
</View>
</View>
</View>
</KeyboardAvoidingView>
</Pressable>
</KeyboardAvoidingView>
</Pressable>
</ScrollView>
</SafeAreaView>
);
}
Expand Down
7 changes: 7 additions & 0 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export type IntlPhoneFieldProps = {
defaultFlag?: string;
onEndEditing?: Function;
onValidation?: Function;
onValueUpdate?: Function;
containerStyle?: object;
flagContainerStyle?: object;
flagTextStyle?: object;
Expand All @@ -30,6 +31,7 @@ export default function IntlPhoneField({
flagUndetermined = '❓',
onEndEditing,
onValidation,
onValueUpdate,
defaultCountry,
defaultPrefix,
defaultValue,
Expand Down Expand Up @@ -107,6 +109,11 @@ export default function IntlPhoneField({
useEffect(() => {
onValidation && onValidation(isValid);
}, [onValidation, isValid]);

useEffect(() => {
onValueUpdate && onValueUpdate(value);
}, [value]);

return (
<View style={[styles.container, containerStyle]}>
<View style={[styles.flag, flagContainerStyle]}>
Expand Down

0 comments on commit 2d821ad

Please sign in to comment.