From 7cac787a7d19b1b54804e8bc87f9353a9ec097f0 Mon Sep 17 00:00:00 2001 From: Jaime Lima Neto Date: Mon, 29 Aug 2022 21:56:09 -0300 Subject: [PATCH 1/2] set default value on ComponentDidMount --- src/IntlPhoneInput.js | 295 +++++++++++++++++++++++++----------------- 1 file changed, 174 insertions(+), 121 deletions(-) diff --git a/src/IntlPhoneInput.js b/src/IntlPhoneInput.js index 6856dbb..6cb2b14 100644 --- a/src/IntlPhoneInput.js +++ b/src/IntlPhoneInput.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; import { View, Text, @@ -9,68 +9,90 @@ import { TouchableWithoutFeedback, TouchableOpacity, TextInput, -} from 'react-native'; -import PropTypes from 'prop-types'; -import data from './Countries'; +} from "react-native"; +import PropTypes from "prop-types"; +import data from "./Countries"; export default class IntlPhoneInput extends React.Component { constructor(props) { super(props); - const defaultCountry = data.filter((obj) => obj.code === props.defaultCountry)[0] || data.filter((obj) => obj.code === 'TR')[0]; + const defaultCountry = + data.filter((obj) => obj.code === props.defaultCountry)[0] || + data.filter((obj) => obj.code === "TR")[0]; this.state = { defaultCountry, flag: defaultCountry.flag, modalVisible: false, dialCode: defaultCountry.dialCode, - phoneNumber: '', - mask: props.mask || defaultCountry.mask, + phoneNumber: "", + mask: defaultCountry.mask, countryData: data, - selectedCountry:defaultCountry, - placeholderTextColor: 'grey' + selectedCountry: defaultCountry, }; } - onChangePropText=(unmaskedPhoneNumber, phoneNumber) => { + onChangePropText = (unmaskedPhoneNumber, phoneNumber) => { const { dialCode, mask, selectedCountry } = this.state; const countOfNumber = mask.match(/9/g).length; if (this.props.onChangeText) { - const isVerified = countOfNumber === unmaskedPhoneNumber?.length && phoneNumber?.length > 0; + const isVerified = + countOfNumber === unmaskedPhoneNumber?.length && + phoneNumber?.length > 0; this.props.onChangeText({ - dialCode, unmaskedPhoneNumber, phoneNumber, isVerified,selectedCountry + dialCode, + unmaskedPhoneNumber, + phoneNumber, + isVerified, + selectedCountry, }); } - } - - onChangeText = (value) => { - let unmaskedPhoneNumber = (value.match(/\d+/g) || []).join(''); - - if (unmaskedPhoneNumber.length === 0) { - this.setState({ phoneNumber: '' }); - this.onChangePropText('', ''); - return; + }; + componentDidMount() { + if (this.props.value) { + const { phoneNumber } = this.setMask( + this.props.value.replace(this.state.dialCode, "") + ); + this.setState({ phoneNumber }); } + } - - let phoneNumber = this.state.mask.replace(/9/g, '_'); + setMask = (value) => { + let unmaskedPhoneNumber = (value.match(/\d+/g) || []).join(""); + let phoneNumber = this.state.mask.replace(/9/g, "_"); for (let index = 0; index < unmaskedPhoneNumber.length; index += 1) { - phoneNumber = phoneNumber.replace('_', unmaskedPhoneNumber[index]); + phoneNumber = phoneNumber.replace("_", unmaskedPhoneNumber[index]); } let numberPointer = 0; for (let index = phoneNumber.length; index > 0; index -= 1) { - if (phoneNumber[index] !== ' ' && !isNaN(phoneNumber[index])) { + if (phoneNumber[index] !== " " && !isNaN(phoneNumber[index])) { numberPointer = index; break; } } phoneNumber = phoneNumber.slice(0, numberPointer + 1); - unmaskedPhoneNumber = (phoneNumber.match(/\d+/g) || []).join(''); + unmaskedPhoneNumber = (phoneNumber.match(/\d+/g) || []).join(""); + return { phoneNumber, unmaskedPhoneNumber }; + }; + + onChangeText = (value) => { + let unmaskedPhoneNumberRaw = (value.match(/\d+/g) || []).join(""); + + if (unmaskedPhoneNumberRaw.length === 0) { + this.setState({ phoneNumber: "" }); + this.onChangePropText("", ""); + return; + } + + const { phoneNumber, unmaskedPhoneNumber } = this.setMask(value); this.onChangePropText(unmaskedPhoneNumber, phoneNumber); this.setState({ phoneNumber }); - } - + }; - showModal = () => (this.props.disableCountryChange ? null : this.setState({ modalVisible: true })); + showModal = () => + this.props.disableCountryChange + ? null + : this.setState({ modalVisible: true }); hideModal = () => this.setState({ modalVisible: false }); @@ -81,9 +103,9 @@ export default class IntlPhoneInput extends React.Component { this.setState({ dialCode: country.dialCode, flag: country.flag, - mask: this.props.mask || country.mask, - phoneNumber: '', - selectedCountry:country + mask: country.mask, + phoneNumber: "", + selectedCountry: country, }); this.hideModal(); } catch (err) { @@ -91,26 +113,34 @@ export default class IntlPhoneInput extends React.Component { this.setState({ dialCode: defaultCountry.dialCode, flag: defaultCountry.flag, - mask: this.props.mask || defaultCountry.mask, - phoneNumber: '', - selectedCountry:defaultCountry + mask: defaultCountry.mask, + phoneNumber: "", + selectedCountry: defaultCountry, }); } - } + }; filterCountries = (value) => { - const { lang - } = this.props; - const countryData = data.filter((obj) => (obj[lang?.toLowerCase()??"en"]?.indexOf(value) > -1 || obj.dialCode.indexOf(value) > -1)); + const { lang } = this.props; + const countryData = data.filter( + (obj) => + obj[lang?.toLowerCase() ?? "en"]?.indexOf(value) > -1 || + obj.dialCode.indexOf(value) > -1 + ); this.setState({ countryData }); - } + }; focus() { this.props.inputRef.current.focus(); } - renderModal=() => { - if (this.props.customModal) return this.props.customModal(this.state.modalVisible,this.state.countryData,this.onCountryChange); + renderModal = () => { + if (this.props.customModal) + return this.props.customModal( + this.state.modalVisible, + this.state.countryData, + this.onCountryChange + ); const { countryModalStyle, modalContainer, @@ -123,52 +153,79 @@ export default class IntlPhoneInput extends React.Component { searchIconStyle, closeButtonStyle, lang, - placeholderTextColor } = this.props; + return ( - + - - - - 🔍 + + + + 🔍 + + index.toString()} + renderItem={({ item }) => ( + this.onCountryChange(item.code)} + > + + + {item.flag} + + + + {item[lang?.toLowerCase() ?? "en"]} + + {` ${item.dialCode}`} + + + + )} + /> - index.toString()} - renderItem={ - ({ item }) => ( - this.onCountryChange(item.code)}> - - {item.flag} - - {item[lang?.toLowerCase()??"en"]} - {` ${item.dialCode}`} - - - - ) - } - /> - - this.hideModal()} style={[styles.closeButtonStyle, closeButtonStyle]}> - {closeText || 'CLOSE'} - + this.hideModal()} + style={[styles.closeButtonStyle, closeButtonStyle]} + > + {closeText || "CLOSE"} + ); - } + }; -renderAction=()=>{ - const renderAction=this.props.renderAction; - if(renderAction) { - console.log("action",renderAction); - if(typeof renderAction!=="function") throw ("The renderAction is not a function. Please set a renderAction function on there"); - else return this.props.renderAction(); - } - return null; -} + renderAction = () => { + const renderAction = this.props.renderAction; + if (renderAction) { + console.log("action", renderAction); + if (typeof renderAction !== "function") + throw "The renderAction is not a function. Please set a renderAction function on there"; + else return this.props.renderAction(); + } + return null; + }; render() { const { flag } = this.state; @@ -178,33 +235,32 @@ renderAction=()=>{ phoneInputStyle, dialCodeTextStyle, inputProps, - placeholderTextColor } = this.props; return ( this.showModal()}> {flag} - {this.state.dialCode} + + {this.state.dialCode} + {this.renderModal()} {this.renderAction()} - - - ); } } @@ -212,7 +268,6 @@ renderAction=()=>{ IntlPhoneInput.propTypes = { lang: PropTypes.string, defaultCountry: PropTypes.string, - mask: PropTypes.string, onChangeText: PropTypes.func, customModal: PropTypes.func, phoneInputStyle: PropTypes.object, // {} @@ -228,27 +283,26 @@ IntlPhoneInput.propTypes = { searchIconStyle: PropTypes.object, disableCountryChange: PropTypes.bool, inputRef: PropTypes.object, - placeholderTextColor: PropTypes.string }; const styles = StyleSheet.create({ closeTextStyle: { padding: 5, fontSize: 20, - color: 'black', - fontWeight: 'bold' + color: "black", + fontWeight: "bold", }, modalCountryItemCountryDialCodeStyle: { - fontSize: 15 + fontSize: 15, }, modalCountryItemCountryNameStyle: { flex: 1, - fontSize: 15 + fontSize: 15, }, modalCountryItemContainer: { flex: 1, paddingLeft: 5, - flexDirection: 'row' + flexDirection: "row", }, modalFlagStyle: { fontSize: 25, @@ -258,78 +312,77 @@ const styles = StyleSheet.create({ paddingLeft: 25, paddingRight: 25, flex: 10, - backgroundColor: 'white' + backgroundColor: "white", }, flagStyle: { fontSize: 35, }, - dialCodeTextStyle: { - }, + dialCodeTextStyle: {}, countryModalStyle: { flex: 1, - borderColor: 'black', + borderColor: "black", borderTopWidth: 1, padding: 12, - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between' + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", }, openDialogView: { - flexDirection: 'row', - alignItems: 'center' + flexDirection: "row", + alignItems: "center", }, filterInputStyle: { flex: 1, paddingTop: 10, paddingBottom: 10, - backgroundColor: '#fff', - color: '#424242', + backgroundColor: "#fff", + color: "#424242", }, searchIcon: { padding: 10, }, filterInputStyleContainer: { - width: '100%', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', + width: "100%", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", }, phoneInputStyle: { marginLeft: 5, - flex: 1 + flex: 1, }, container: { - flexDirection: 'row', + flexDirection: "row", paddingHorizontal: 12, padding: 5, borderRadius: 10, - alignItems: 'center', - backgroundColor: 'white', + alignItems: "center", + backgroundColor: "white", }, searchIconStyle: { - color: 'black', + color: "black", fontSize: 15, - marginLeft: 15 + marginLeft: 15, }, buttonStyle: { - alignItems: 'center', + alignItems: "center", padding: 14, marginBottom: 10, borderRadius: 3, }, buttonText: { fontSize: 18, - fontWeight: 'bold', - color: 'black', + fontWeight: "bold", + color: "black", }, countryStyle: { flex: 1, - borderColor: 'black', + borderColor: "black", borderTopWidth: 1, padding: 12, }, closeButtonStyle: { padding: 12, - alignItems: 'center', - } + alignItems: "center", + }, }); From eea6e1c463a16ec074bfef975ede1bb683593cc7 Mon Sep 17 00:00:00 2001 From: Jaime Lima Neto Date: Mon, 5 Sep 2022 01:32:45 -0300 Subject: [PATCH 2/2] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dc6519b..8fdbae4 100644 --- a/package.json +++ b/package.json @@ -64,5 +64,5 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, - "version": "1.2.12" + "version": "1.2.13" }