Fix Phone Number Input (#107)

* Fix Phone Number Input

* synthetic fixes

src/components/PhoneNumberInput.tsx

@@ -1,50 +1,56 @@
 import * as React from "react";
 import Select from "./Select";
 import Input from "./Input";
-import Option from "./Option";
-import {
-  PhoneNumberInputProps,
-  PhoneNumberInputState
-} from "./typings/PhoneNumberInput";
+import { cx } from "emotion";
+import { PhoneNumberInputProps } from "./typings/PhoneNumberInput";
 import { wrapper, selectStyle } from "./styles/PhoneNumberInput.styles";
 
 export default class PhoneNumberInput extends React.Component<
-  PhoneNumberInputProps,
-  PhoneNumberInputState
+  PhoneNumberInputProps
 > {
-  onCountrySelect = country_code => {
+  onCountrySelect = countryCode => {
     this.props.onChange({
-      country_code: country_code,
+      countryCode,
       phone: this.props.phone
     });
   };
+
   onNumberChange = (value: string) => {
     if (!value.match(/^\d*$/)) {
       return;
     }
     this.props.onChange({
-      country_code: this.props.country_code,
+      countryCode: this.props.countryCode,
       phone: value
     });
   };
+
   render() {
-    const { countries, phone, country_code } = this.props;
+    const {
+      phone,
+      countryCode,
+      className,
+      selectProps,
+      inputProps,
+      placeholder
+    } = this.props;
     return (
-      <div className={wrapper}>
+      <div className={cx(wrapper, className)}>
         <Select
-          placeholder="Phone no."
+          placeholder={placeholder || "Phone No."}
           onChange={this.onCountrySelect}
-          value={country_code}
+          value={countryCode}
           className={selectStyle}
+          {...selectProps}
         >
-          {countries.map(country => (
-            <Option
-              value={country.country_code}
-              label={`${country.name} (${country.country_code})`}
-            />
-          ))}
+          {this.props.children}
         </Select>
-        <Input onChange={this.onNumberChange} placeholder="" value={phone} />
+        <Input
+          onChange={this.onNumberChange}
+          placeholder=""
+          value={phone}
+          {...inputProps}
+        />
       </div>
     );
   }

src/components/typings/PhoneNumberInput.ts

@@ -1,18 +1,16 @@
-export interface Country {
-  id: number;
-  name: string;
-  country_code: string;
-}
+import { SelectProps } from "./Select";
+import { InputProps } from "./Input";
 
 export interface PhoneNumberInputProps {
-  country_code: string;
+  countryCode: string;
   phone: string;
   onChange: (
-    { country_code, phone }: { country_code: string; phone: string }
+    { countryCode, phone }: { countryCode: string; phone: string }
   ) => void;
-  countries: Country[];
-}
 
-export interface PhoneNumberInputState {
-  country?: Country;
+  // Optional
+  className?: string;
+  selectProps?: Partial<SelectProps>;
+  inputProps?: Partial<InputProps>;
+  placeholder?: string;
 }

src/components/typings/Select.ts

@@ -7,7 +7,6 @@ export interface SelectProps {
   placeholder: string;
   required?: boolean;
   errorMessage?: string;
-  children: React.ReactNodeArray;
   value?: string;
   selected?: Selected;
   multiSelect?: boolean;

stories/phonenumberinput.story.tsx

@@ -4,6 +4,7 @@ import PhoneNumberInput from "../src/components/PhoneNumberInput";
 // import { boolean, select, text } from "@storybook/addon-knobs";
 // import { css } from "emotion";
 import { withState } from "@dump247/storybook-state";
+import Option from "../src/components/Option";
 
 // const className = css({
 //   width: 400
@@ -920,10 +921,17 @@ storiesOf("PhoneNumberInput", module).add(
   "Material",
   withState({})(({ store }) => (
     <PhoneNumberInput
-      countries={countries}
-      country_code={store.state.country_code || "+91"}
+      countryCode={store.state.countryCode || "+91"}
       phone={store.state.phone || ""}
-      onChange={({ country_code, phone }) => store.set({ country_code, phone })}
-    />
+      onChange={({ countryCode, phone }) => store.set({ countryCode, phone })}
+    >
+      {countries.map(country => (
+        <Option
+          key={country.id}
+          value={country.country_code}
+          label={`${country.name} (${country.country_code})`}
+        />
+      ))}
+    </PhoneNumberInput>
   ))
 );