diff --git a/.gitignore b/.gitignore index 2ea1a85..b27c580 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ npm-debug.log tmp build dist +.idea # Dependency directory node_modules \ No newline at end of file diff --git a/lib/index.js b/lib/index.js index b89c388..5091d25 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,5 +1,5 @@ import React, { PureComponent } from "react"; -import { View, Text, TouchableOpacity, Image, TextInput } from "react-native"; +import { View, Text, TouchableOpacity, Image, TextInput,I18nManager } from "react-native"; import CountryPicker, { getCallingCode, DARK_THEME, @@ -11,7 +11,7 @@ import { PhoneNumberUtil } from "google-libphonenumber"; import styles from "./styles"; const dropDown = - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAi0lEQVRYR+3WuQ6AIBRE0eHL1T83FBqU5S1szdiY2NyTKcCAzU/Y3AcBXIALcIF0gRPAsehgugDEXnYQrUC88RIgfpuJ+MRrgFmILN4CjEYU4xJgFKIa1wB6Ec24FuBFiHELwIpQxa0ALUId9wAkhCnuBdQQ5ngP4I9wxXsBDyJ9m+8y/g9wAS7ABW4giBshQZji3AAAAABJRU5ErkJggg=="; + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAi0lEQVRYR+3WuQ6AIBRE0eHL1T83FBqU5S1szdiY2NyTKcCAzU/Y3AcBXIALcIF0gRPAsehgugDEXnYQrUC88RIgfpuJ+MRrgFmILN4CjEYU4xJgFKIa1wB6Ec24FuBFiHELwIpQxa0ALUId9wAkhCnuBdQQ5ngP4I9wxXsBDyJ9m+8y/g9wAS7ABW4giBshQZji3AAAAABJRU5ErkJggg=="; const phoneUtil = PhoneNumberUtil.getInstance(); export default class PhoneInput extends PureComponent { @@ -20,25 +20,29 @@ export default class PhoneInput extends PureComponent { this.state = { code: props.defaultCode ? undefined : "91", number: props.value - ? props.value - : props.defaultValue - ? props.defaultValue - : "", + ? props.value + : props.defaultValue + ? props.defaultValue + : "", modalVisible: false, countryCode: props.defaultCode ? props.defaultCode : "IN", disabled: props.disabled || false, }; } - static getDerivedStateFromProps(nextProps, prevState) { - if (nextProps.disabled !== prevState.disabled) { - if ((nextProps.value || nextProps.value === "") && nextProps.value !== prevState.number) { - return ({ disabled: nextProps.disabled, number: nextProps.value }); + async componentDidUpdate(prevProps: Readonly
, prevState: Readonly, snapshot: SS) {
+ if (this.props.disabled !== prevState.disabled) {
+ if ((this.props.value || this.props.value === "") && this.props.value !== prevState.number) {
+ this.setState({ disabled: this.props.disabled, number: this.props.value });
}
- return ({ disabled: nextProps.disabled });
+ this.setState({ disabled: this.props.disabled });
+ }
+ if (this.props.defaultCode !== prevState.countryCode){
+ const code = await getCallingCode(this.props.defaultCode);
+ this.setState({ countryCode: this.props.defaultCode,code })
}
return null;
- };
+ }
async componentDidMount() {
const { defaultCode } = this.props;
@@ -69,22 +73,22 @@ export default class PhoneInput extends PureComponent {
onSelect = (country) => {
const { onChangeCountry } = this.props;
this.setState(
- {
- countryCode: country.cca2,
- code: country.callingCode[0],
- },
- () => {
- const { onChangeFormattedText } = this.props;
- if (onChangeFormattedText) {
- if (country.callingCode[0]) {
- onChangeFormattedText(
- `+${country.callingCode[0]}${this.state.number}`
- );
- } else {
- onChangeFormattedText(this.state.number);
+ {
+ countryCode: country.cca2,
+ code: country.callingCode[0],
+ },
+ () => {
+ const { onChangeFormattedText } = this.props;
+ if (onChangeFormattedText) {
+ if (country.callingCode[0]) {
+ onChangeFormattedText(
+ `+${country.callingCode[0]}${this.state.number}`
+ );
+ } else {
+ onChangeFormattedText(this.state.number);
+ }
}
}
- }
);
if (onChangeCountry) {
onChangeCountry(country);
@@ -92,6 +96,14 @@ export default class PhoneInput extends PureComponent {
};
onChangeText = (text) => {
+ text = text.toString().trim();
+ text = text.replace(/\s+/g, "");
+ if (text.startsWith("0")){
+ text = text.substring(1)
+ }
+ if (text.startsWith("+"+this.state.code)){
+ text = text.substring(1+this.state.code.length)
+ }
this.setState({ number: text });
const { onChangeText, onChangeFormattedText } = this.props;
if (onChangeText) {
@@ -119,11 +131,11 @@ export default class PhoneInput extends PureComponent {
renderDropdownImage = () => {
return (
-