#226 #283 Added numberInputComponent property

CHANGELOG.md

@@ -1,5 +1,10 @@
 <!-- Assign the default `aria-label` to the phone number `<input/>`. -->
 
+2.3.25 / 16.10.2019
+===================
+
+  * Added `numberInputComponent` property which is supposed to replace `inputComponent` property for the end users: it turned out that passing custom `inputComponent` required also implementing (copy-pasting) phone number parsing and formatting logic. The new `numberInputComponent` customization property is different in this aspect: it's a customization property of `inputComponent` itself. By default `numberInputComponent` is `"input"` meaning that `inputComponent` renders a standard DOM `<input/>` by default. By passing a custom `numberInputComponent` this standard DOM `<input/>` can be replaced by such custom number input component (for example, when using UI libraries like "Material UI" or "Bootstrap"). The former `inputComponent` property still works, it's just now an undocumented one (too complex for the end users to implement). And it now also receives a new `inputComponent` property that is basically the new `numberInputComponent` property, just with a shorter name — this new property might result in an `"Unknown prop "inputComponent" on <input> tag"` React warning, but that's only in the cases when a custom `inputComponent` was passed earlier which is unlikely (it's unlikely that anyone actually passed their own `inputComponent`).
+
 2.3.24 / 30.09.2019
 ===================
 

README.md

@@ -399,9 +399,26 @@ Receives properties:
 * `tabIndex : (number|string)?` — HTML `tabIndex` attribute.
 * `className : string` — CSS class name.
 
+#### `numberInputComponent`
+
+React component for the phone number input field. Is `"input"` by default meaning that it renders a standard DOM `<input/>`.
+
+Receives properties:
+
+* `value : string` — The formatted `value`.
+* `onChange(value : string)` — Updates the formatted `value`.
+* `onFocus()` — Is used to toggle the `--focus` CSS class.
+* `onBlur()` — Is used to toggle the `--focus` CSS class.
+* Other properties like `type="tel"` or `autoComplete="tel"` that should be passed through to the DOM `<input/>`.
+
+Must also either implement `.focus()` method or use `React.forwardRef()` to "forward" `ref` to the `<input/>`.
+
+-->
+
+<!--
 #### `inputComponent`
 
-React component for the phone number input field. See [InputSmart](https://github.com/catamphetamine/react-phone-number-input/blob/master/source/InputSmart.js) and [InputBasic](https://github.com/catamphetamine/react-phone-number-input/blob/master/source/InputBasic.js) for an example.
+React component for the phone number input field (a higher-order one). See [InputSmart](https://github.com/catamphetamine/react-phone-number-input/blob/master/source/InputSmart.js) and [InputBasic](https://github.com/catamphetamine/react-phone-number-input/blob/master/source/InputBasic.js) for an example.
 
 Receives properties:
 
@@ -413,7 +430,8 @@ Receives properties:
 * `metadata : object` — `libphonenumber-js` metadata.
 * All other properties should be passed through to the underlying `<input/>`.
 
-Must also implement `.focus()` method.
+Must also either implement `.focus()` method or use `React.forwardRef()` to "forward" `ref` to the `<input/>`.
+-->
 
 ## CDN
 

source/InputBasic.js

@@ -41,7 +41,10 @@ export function createInput(defaultMetadata)
 			country : PropTypes.string,
 
 			// `libphonenumber-js` metadata.
-			metadata : PropTypes.object.isRequired
+			metadata : PropTypes.object.isRequired,
+
+			// The `<input/>` component.
+			inputComponent : PropTypes.elementType.isRequired
 		}
 
 		static defaultProps =
@@ -148,6 +151,7 @@ export function createInput(defaultMetadata)
 				onFocus,
 				country,
 				metadata,
+				inputComponent: Input,
 				...rest
 			}
 			= this.props
@@ -158,9 +162,7 @@ export function createInput(defaultMetadata)
 			const { value } = this.state
 
 			return (
-				<input
-					type="tel"
-					autoComplete="tel"
+				<Input
 					{...rest}
 					ref={this.storeInput}
 					value={this.format(value)}

source/PhoneInput.js

@@ -304,6 +304,11 @@ export default class PhoneNumberInput extends PureComponent
 
 		/**
 		 * Phone number `<input/>` component.
+		 */
+		numberInputComponent : PropTypes.elementType.isRequired,
+
+		/**
+		 * Phone number `<input/>` component (a higher-order one).
 		 *
 		 * Receives properties:
 		 *
@@ -313,9 +318,12 @@ export default class PhoneNumberInput extends PureComponent
 		 * * `onBlur()` — Is used to toggle the `--focus` CSS class.
 		 * * `country : string?` — The currently selected country. `undefined` means "International" (no country selected).
 		 * * `metadata : object` — `libphonenumber-js` metadata.
+		 * * `inputComponent : elementType` — Phone number `<input/>` component. This is basically the `numberInputComponent` property renamed to `inputComponent`.
 		 * * All other properties should be passed through to the underlying `<input/>`.
 		 *
-		 * Must also implement `.focus()` method.
+		 * Must also either implement `.focus()` method or use `React.forwardRef()` to "forward" `ref` to the `<input/>`.
+		 *
+		 * @ignore
 		 */
 		inputComponent : PropTypes.elementType.isRequired,
 
@@ -425,6 +433,11 @@ export default class PhoneNumberInput extends PureComponent
 		/**
 		 * Phone number `<input/>` component.
 		 */
+		numberInputComponent: 'input',
+
+		/**
+		 * Phone number `<input/>` component (a higher-order one).
+		 */
 		inputComponent: InputBasic,
 
 		/**
@@ -880,6 +893,7 @@ export default class PhoneNumberInput extends PureComponent
 
 			countrySelectComponent : CountrySelectComponent,
 			inputComponent : InputComponent,
+			numberInputComponent : inputComponent,
 			// smartCaret,
 			ext,
 
@@ -911,7 +925,7 @@ export default class PhoneNumberInput extends PureComponent
 		}
 		= this.state
 
-		// const InputComponent = inputComponent || (smartCaret ? InputSmart : InputBasic)
+		// const InputComponent = InputComponent || (smartCaret ? InputSmart : InputBasic)
 
 		// Extract `countrySelectProperties` from `this.props`
 		// also removing them from `phoneNumberInputProps`.
@@ -984,6 +998,7 @@ export default class PhoneNumberInput extends PureComponent
 							onKeyDown={ this.onPhoneNumberKeyDown }
 							disabled={ disabled || disablePhoneInput }
 							autoComplete={ autoComplete }
+							inputComponent={ inputComponent }
 							className={ classNames
 							(
 								'react-phone-number-input__input',