Merge pull request #7456 from Automattic/add/phone-number-react-compo…

…nent

Add/phone number react component

.gitattributes

@@ -0,0 +1 @@
+npm-shrinkwrap.json binary

.gitignore

@@ -33,6 +33,8 @@ env-config.sh
 /public/style*.css
 /public/style*.css.map
 /public/editor*.css
+/public/images/flags/*.svg
+/public/images/flags/*.png
 /server/devdocs/search-index.js
 /server/devdocs/components-usage-stats.json
 /server/bundler/assets-*.json

assets/stylesheets/_components.scss

@@ -150,6 +150,7 @@
 @import 'components/title-format-editor/style';
 @import 'components/token-field/style';
 @import 'components/post-schedule/style';
+@import 'components/phone-input/style';
 @import 'components/section-header/style';
 @import 'components/seo-preview-pane/style';
 @import 'components/signup-form/style';

bin/build-metadata.js

@@ -9,6 +9,7 @@ var fs = require( 'fs' );
 var forIn = require( 'lodash/forIn' );
 var mapValues = require( 'lodash/mapValues' );
 var orderBy = require( 'lodash/orderBy' );
+var last = require( 'lodash/last' );
 
 var areaCodes = {
 	CA: [ "204", "236", "249", "250", "289", "306", "343", "365", "387", "403", "416", "418", "431", "437", "438", "450", "506", "514", "519", "548", "579", "581", "587", "604", "613", "639", "647", "672", "705", "709", "742", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905" ],
@@ -77,6 +78,7 @@ var libPhoneNumberIndexes = {
 var numberFormatIndexes = {
 	PATTERN: 1,
 	FORMAT: 2,
+	LEADING_DIGIT_PATTERN: 3,
 	NATIONAL_CALLING_FORMAT: 4
 };
 
@@ -114,7 +116,8 @@ function processNumberFormat( format ) {
 	return {
 		match: format[ numberFormatIndexes.PATTERN ],
 		replace: format[ numberFormatIndexes.FORMAT ],
-		nationalFormat: format.length > numberFormatIndexes.NATIONAL_CALLING_FORMAT && format[ numberFormatIndexes.NATIONAL_CALLING_FORMAT ] || undefined
+		nationalFormat: format[ numberFormatIndexes.NATIONAL_CALLING_FORMAT ] || undefined,
+		leadingDigitPattern: last( format[ numberFormatIndexes.LEADING_DIGIT_PATTERN ] || [] )
 	}
 }
 

client/components/forms/docs/example.jsx

@@ -29,6 +29,7 @@ var countriesList = require( 'lib/countries-list' ).forSms(),
 	FormTextInput = require( 'components/forms/form-text-input' ),
 	FormTextInputWithAffixes = require( 'components/forms/form-text-input-with-affixes' ),
 	FormToggle = require( 'components/forms/form-toggle' ),
+	PhoneInput = require( 'components/phone-input' ),
 	CompactFormToggle = require( 'components/forms/form-toggle/compact' );
 
 var FormFields = React.createClass( {
@@ -228,6 +229,11 @@ var FormFields = React.createClass( {
 							/>
 					</FormFieldset>
 
+					<FormFieldset>
+						<FormLabel>Form Media Phone Input</FormLabel>
+						<PhoneInput selectedCountryCode="us" countriesList={ countriesList } />
+					</FormFieldset>
+
 					<FormFieldset>
 						<FormLabel htmlFor="textarea">Form Textarea</FormLabel>
 						<FormTextarea name="textarea" id="textarea" placeholder="Placeholder text..."></FormTextarea>

client/components/phone-input/country-flag.jsx

@@ -0,0 +1,67 @@
+/** External Dependencies */
+import React from 'react';
+
+/** Internal Dependencies */
+import Spinner from 'components/spinner';
+import Gridicon from 'components/gridicon';
+
+export default React.createClass( {
+	propTypes: {
+		countryCode: React.PropTypes.string.isRequired
+	},
+	getInitialState() {
+		return {
+			ready: false,
+			error: false
+		};
+	},
+
+	componentDidUpdate( oldProps ) {
+		if ( this.props.countryCode && this.props.countryCode !== oldProps.countryCode ) {
+			this.setState( { ready: false, error: false } );
+		}
+	},
+
+	renderSpinner() {
+		if ( ( ! this.props.countryCode || ! this.state.ready ) && ! this.state.error ) {
+			return <Spinner size={ 16 } className="phone-input__flag-spinner" />;
+		}
+	},
+
+	handleImageLoad() {
+		this.setState( { ready: true, error: false } );
+	},
+
+	handleImageError() {
+		this.setState( { ready: false, error: true } );
+	},
+
+	renderFlag() {
+		const style = this.state.ready ? {} : { visibility: 'hidden' };
+
+		if ( this.props.countryCode ) {
+			if ( ! this.state.error ) {
+				return (
+					<img
+						onLoad={ this.handleImageLoad }
+						onError={ this.handleImageError }
+						src={ `/calypso/images/flags/${ this.props.countryCode }.svg` }
+						className="phone-input__flag-icon"
+						style={ style }
+					/>
+				);
+			} else {
+				return <Gridicon icon="globe" size={ 24 } className="phone-input__flag-icon" />;
+			}
+		}
+	},
+	render() {
+		return (
+			<div className="phone-input__flag-container">
+				{ this.renderSpinner() }
+				{ this.renderFlag() }
+				<Gridicon icon="chevron-down" size={ 12 } className="phone-input__flag-selector-icon" />
+			</div>
+		);
+	}
+} );