#229. Country Select in defaultProps instead of direct properties

README.md

@@ -157,7 +157,7 @@ Make sure to put a `<PhoneInput/>` into a `<form/>` otherwise web-browser's ["au
 
 ## Custom country `<select/>`
 
-One can supply their own country `<select/>` component in case the native one doesn't fit the app. See [`countrySelectComponent`](http://catamphetamine.github.io/react-phone-number-input/docs/styleguide/index.html#phoneinput) property.
+One can supply their own country `<select/>` component in case the native one doesn't fit the app. See [`countrySelectComponent`](https://github.com/catamphetamine/react-phone-number-input#customizing) property.
 
 For example, one may choose [`react-responsive-ui`](https://catamphetamine.github.io/react-responsive-ui/)'s [`<Select/>` component](https://github.com/catamphetamine/react-phone-number-input/blob/master/source/CountrySelectReactResponsiveUI.js) over the [native country `<select/>`](https://github.com/catamphetamine/react-phone-number-input/blob/master/source/CountrySelectNative.js).
 
@@ -284,7 +284,7 @@ The `<PhoneInput/>` component accepts some [customization properties](http://cat
 * `countrySelectComponent` — Custom country `<select/>` component.
 
 ```js
-import PhoneInput from 'react-phone-number-input'
+import PhoneInput from 'react-phone-number-input/core'
 
 import labels from 'react-phone-number-input/locale/ru'
 import metadata from 'libphonenumber-js/metadata.min.json'

index.js

@@ -1,4 +1,6 @@
 export { default as default } from './modules/PhoneInputNativeDefaultMetadata'
-export { default as PhoneInput } from './modules/PhoneInput'
 export { default as formatPhoneNumber, formatPhoneNumberIntl } from './modules/formatPhoneNumberDefaultMetadata'
-export { default as isValidPhoneNumber } from './modules/isValidPhoneNumberDefaultMetadata'
+export { default as isValidPhoneNumber } from './modules/isValidPhoneNumberDefaultMetadata'
+// Deprecated export.
+// Use `import PhoneInput from 'react-phone-number-input/core'` instead.
+export { default as PhoneInput } from './modules/PhoneInput'

source/PhoneInputNative.js

@@ -7,30 +7,36 @@ import CountrySelect from './CountrySelectNative'
 
 export default class PhoneInputNative extends Component
 {
-	static propTypes =
-	{
+	static propTypes = {
+		// (optional)
 		// Replaces the default country select arrow.
 		countrySelectArrowComponent : PropTypes.func
 	}
 
+	// These two country-select-related properties are
+	// implemented as `defaultProps` instead of passing them
+	// directly to the `<PhoneInput/>` because `<PhoneInputNative/>`
+	// is the default export of this library and therefore people pass
+	// `countrySelectComponent` property to this `<PhoneInputNative/>` component
+	// and when they don't see any changes they might get confused.
+	// https://github.com/catamphetamine/react-phone-number-input/issues/229
+	static defaultProps = {
+		countrySelectComponent: CountrySelect,
+		countrySelectProperties: COUNTRY_SELECT_PROPERTIES
+	}
+
 	storeInputRef = (ref) => this.input = ref
 
-	render()
-	{
+	render() {
 		return (
-			<PhoneInput
-				{ ...this.props }
-				ref={ this.storeInputRef }
-				countrySelectComponent={ CountrySelect }
-				countrySelectProperties={ countrySelectProperties }/>
+			<PhoneInput ref={this.storeInputRef} {...this.props}/>
 		)
 	}
 
 	// Proxy `.focus()` method.
 	focus = () => this.input.focus()
 }
 
-const countrySelectProperties =
-{
+const COUNTRY_SELECT_PROPERTIES = {
 	countrySelectArrowComponent : 'selectArrowComponent'
 }

source/PhoneInputReactResponsiveUI.js

@@ -31,43 +31,47 @@ export default class PhoneInputReactResponsiveUI extends Component
 		countrySelectMaxItems : PropTypes.number
 	}
 
+	// These two country-select-related properties are
+	// implemented as `defaultProps` instead of passing them
+	// directly to the `<PhoneInput/>` analogous to how it's
+	// implemented in `<PhoneInputNative/>` (see `./PhoneInputNative.js` notes).
+	static defaultProps = {
+		countrySelectComponent: CountrySelect,
+		countrySelectProperties: COUNTRY_SELECT_PROPERTIES,
+		getInputClassName
+	}
+
 	storeInputRef = (ref) => this.input = ref
 
-	render()
-	{
+	render() {
 		return (
-			<PhoneInput
-				{ ...this.props }
-				ref={ this.storeInputRef }
-				getInputClassName={ this.getInputClassName }
-				countrySelectComponent={ CountrySelect }
-				countrySelectProperties={ countrySelectProperties }/>
-		)
-	}
-
-	getInputClassName = ({ disabled, invalid }) =>
-	{
-		return classNames
-		(
-			'rrui__input',
-			'rrui__input-element',
-			'rrui__input-field',
-			{
-				'rrui__input-field--invalid'  : invalid,
-				'rrui__input-field--disabled' : disabled
-			}
+			<PhoneInput ref={this.storeInputRef} {...this.props}/>
 		)
 	}
 
 	// Proxy `.focus()` method.
 	focus = () => this.input.focus()
 }
 
-const countrySelectProperties =
+const COUNTRY_SELECT_PROPERTIES =
 {
 	inputClassName               : 'inputClassName',
 	saveOnIcons                  : 'saveOnIcons',
 	countrySelectAriaLabel       : 'ariaLabel',
 	countrySelectCloseAriaLabel  : 'closeAriaLabel',
 	countrySelectMaxItems        : 'maxItems'
+}
+
+function getInputClassName({ disabled, invalid })
+{
+	return classNames
+	(
+		'rrui__input',
+		'rrui__input-element',
+		'rrui__input-field',
+		{
+			'rrui__input-field--invalid'  : invalid,
+			'rrui__input-field--disabled' : disabled
+		}
+	)
 }