Merge pull request #321 from appfolio/addressInputSelects

Replace AddressInput Selects
appfolio · Oct 28, 2017 · 266a622 · 266a622
2 parents df69009 + 9f1d1a4
commit 266a622
Show file tree

Hide file tree

Showing 11 changed files with 378 additions and 68 deletions.
diff --git a/src/components/AddressInput.js b/src/components/AddressInput.js
@@ -2,21 +2,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import flow from 'lodash.flow';
 
-import Select from './Select';
+import CountryInput from './CountryInput';
+import StateInput from './StateInput';
 import ValidatedFormGroup from './ValidatedFormGroup';
 import Col from './Col';
 import Input from './Input';
 import Row from './Row';
 
-// TODO Dynamic states based on country:
-import states from './address/USStates.js';
-import COUNTRIES from './address/Countries.js';
-
-const US_STATES = states.map(state => ({
-  label: state.value,
-  value: state.value
-}));
-
 const readEvent = e => ({ [e.target.name]: e.target.value });
 
 class AddressInput extends React.Component {
@@ -48,11 +40,11 @@ class AddressInput extends React.Component {
     value: {},
   };
 
-  onChange = update => {
+  onChange = (update) => {
     this.props.onChange({ ...this.props.value, ...update });
   }
 
-  propsFor = field => {
+  propsFor = (field) => {
     if (this.props.value[field]) {
       return { value: this.props.value[field] };
     }
@@ -126,14 +118,13 @@ class AddressInput extends React.Component {
               error={error.state}
               label={showLabels ? labels.state : null}
             >
-              <Select
+              <StateInput
                 className="w-100"
-                inputProps={{ id: id ? `${id}_state` : null }}
+                id={id ? `${id}_state` : null}
                 name="state"
                 placeholder={labels.state}
-                options={US_STATES}
                 {...this.propsFor('state')}
-                onChange={selection => this.onChange({ state: selection && selection.value })}
+                onChange={state => this.onChange({ state })}
                 disabled={disabled}
               />
             </ValidatedFormGroup>
@@ -161,14 +152,13 @@ class AddressInput extends React.Component {
           className="mb-0"
           label={showLabels ? labels.countryCode : null}
         >
-          <Select
+          <CountryInput
             className="w-100"
-            inputProps={{ id: id ? `${id}_countryCode` : null }}
+            id={id ? `${id}_countryCode` : null}
             name="countryCode"
-            options={COUNTRIES}
             placeholder={labels.countryCode}
             {...this.propsFor('countryCode')}
-            onChange={selection => this.onChange({ countryCode: selection && selection.value })}
+            onChange={countryCode => this.onChange({ countryCode })}
             disabled={disabled}
           />
         </ValidatedFormGroup>

diff --git a/src/components/CountryInput.js b/src/components/CountryInput.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Input from './Input';
+import COUNTRIES from './address/Countries.js'; // TODO i18n country names based on locale
+
+export default class CountryInput extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    id: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.string,
+    value: PropTypes.string
+  }
+
+  static defaultProps = {
+    onChange: () => {}
+  }
+
+  render() {
+    const {
+      className,
+      disabled,
+      id,
+      name,
+      onChange,
+      placeholder,
+      ...props
+    } = this.props;
+
+    return (
+      <Input
+        type="select"
+        {...props}
+        className={className}
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={e => onChange(e.target.value === '' ? null : e.target.value)}
+      >
+        <option value="">{placeholder}</option>
+        {COUNTRIES.map(country =>
+          <option value={country.value} key={country.value}>{country.label}</option>)}
+      </Input>
+    );
+  }
+}
diff --git a/src/components/StateInput.js b/src/components/StateInput.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Input from './Input';
+import STATES from './address/USStates.js'; // TODO Dynamic states based on country
+
+export default class StateInput extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    id: PropTypes.string,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.string,
+    value: PropTypes.string
+  }
+
+  static defaultProps = {
+    onChange: () => {}
+  }
+
+  render() {
+    const {
+      className,
+      disabled,
+      id,
+      name,
+      onChange,
+      placeholder,
+      ...props
+    } = this.props;
+
+    return (
+      <Input
+        type="select"
+        {...props}
+        className={className}
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={e => onChange(e.target.value === '' ? null : e.target.value)}
+      >
+        <option value="">{placeholder}</option>
+        {STATES.map(state =>
+          <option title={state.label} value={state.value} key={state.value}>{state.value}</option>)}
+      </Input>
+    );
+  }
+}
diff --git a/src/components/address/Countries.js b/src/components/address/Countries.js
@@ -1,4 +1,6 @@
 export default [
+  { label: 'United States of America', value: 'US' },
+  { label: 'Canada', value: 'CA' },
   { label: 'Afghanistan', value: 'AF' },
   { label: 'Åland Islands', value: 'AX' },
   { label: 'Albania', value: 'AL' },
@@ -39,7 +41,6 @@ export default [
   { label: 'Cabo Verde', value: 'CV' },
   { label: 'Cambodia', value: 'KH' },
   { label: 'Cameroon', value: 'CM' },
-  { label: 'Canada', value: 'CA' },
   { label: 'Cayman Islands', value: 'KY' },
   { label: 'Central African Republic', value: 'CF' },
   { label: 'Chad', value: 'TD' },
@@ -234,7 +235,6 @@ export default [
   { label: 'Ukraine', value: 'UA' },
   { label: 'United Arab Emirates', value: 'AE' },
   { label: 'United Kingdom of Great Britain and Northern Ireland', value: 'GB' },
-  { label: 'United States of America', value: 'US' },
   { label: 'United States Minor Outlying Islands', value: 'UM' },
   { label: 'Uruguay', value: 'UY' },
   { label: 'Uzbekistan', value: 'UZ' },

diff --git a/src/components/address/USStates.js b/src/components/address/USStates.js
@@ -6,7 +6,7 @@ export default [
   { label: 'California', value: 'CA' },
   { label: 'Colorado', value: 'CO' },
   { label: 'Connecticut', value: 'CT' },
-  { label: 'Deleware', value: 'DE' },
+  { label: 'Delaware', value: 'DE' },
   { label: 'Washington, D.C.', value: 'DC' },
   { label: 'Florida', value: 'FL' },
   { label: 'Georgia', value: 'GA' },
@@ -16,7 +16,7 @@ export default [
   { label: 'Indiana', value: 'IN' },
   { label: 'Iowa', value: 'IA' },
   { label: 'Kansas', value: 'KS' },
-  { label: 'Kentuky', value: 'KY' },
+  { label: 'Kentucky', value: 'KY' },
   { label: 'Louisiana', value: 'LA' },
   { label: 'Maine', value: 'ME' },
   { label: 'Maryland', value: 'MD' },
@@ -49,5 +49,15 @@ export default [
   { label: 'Washington', value: 'WA' },
   { label: 'West Virginia', value: 'WV' },
   { label: 'Wisconsin', value: 'WI' },
-  { label: 'Wyoming', value: 'WY' }
+  { label: 'Wyoming', value: 'WY' },
+  { label: 'U.S. Armed Forces Americas', value: 'AA' },
+  { label: 'U.S. Armed Forces Europe', value: 'AE' },
+  { label: 'U.S. Armed Forces Pacific', value: 'AP' },
+  { label: 'American Samoa', value: 'AS' },
+  { label: 'Micronesia', value: 'FM' },
+  { label: 'Guam', value: 'GU' },
+  { label: 'Marshall Islands', value: 'MH' },
+  { label: 'Northern Mariana Islands', value: 'MP' },
+  { label: 'Puerto Rico', value: 'PR' },
+  { label: 'Virgin Islands', value: 'VI' }
 ];
diff --git a/src/index.js b/src/index.js
@@ -70,6 +70,7 @@ import Close from './components/Close.js';
 import CheckboxInput from './components/CheckboxInput.js';
 import CheckboxBooleanInput from './components/CheckboxBooleanInput.js';
 import CheckboxListInput from './components/CheckboxListInput.js';
+import CountryInput from './components/CountryInput.js';
 import CreditCardNumber from './components/CreditCardNumber.js';
 import CurrencyInput from './components/CurrencyInput.js';
 import Datapair from './components/Datapair.js';
@@ -102,6 +103,7 @@ import RadioInput from './components/RadioInput.js';
 import Select from './components/Select.js';
 import SortableTable from './components/SortableTable.js';
 import Spinner from './components/Spinner.js';
+import StateInput from './components/StateInput.js';
 import StaticInput from './components/StaticInput.js';
 import Steps from './components/Steps.js';
 import SummaryBox from './components/SummaryBox.js';
@@ -193,6 +195,7 @@ export {
   CheckboxInput,
   CheckboxBooleanInput,
   CheckboxListInput,
+  CountryInput,
   CreditCardNumber,
   CurrencyInput,
   Datapair,
@@ -218,6 +221,7 @@ export {
   Progress,
   RadioInput,
   Spinner,
+  StateInput,
   StaticInput,
   SortableTable,
   Steps,

diff --git a/stories/Address.js b/stories/Address.js
@@ -49,7 +49,7 @@ storiesOf('AddressInput', module)
           city: text('city', 'Smallsville'),
           state: select('state', states.map(s => s.value), 'AL'),
           postal: text('postal', '12345-1234'),
-          countryCode: 'US'
+          countryCode: text('countryCode', 'US'),
         }}
         error={object('error', { address1: 'bad stuff', state: 'no' })}
         onChange={action('address onChange')}