fix(form): fix phone input and button

Author: minheq

package.json

@@ -36,7 +36,6 @@
   "license": "MIT",
   "dependencies": {
     "@expo/vector-icons": "10.0.1",
-    "countries-list": "2.4.2",
     "date-fns": "1.30.1",
     "deepmerge": "3.2.0",
     "exenv": "1.2.2",
@@ -69,6 +68,7 @@
     "@types/react-native": "0.57.55",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "24.8.0",
+    "countries-list": "2.4.2",
     "docz": "1.2.0",
     "docz-plugin-snapshots": "0.2.0",
     "docz-theme-default": "1.2.0",

src/components/Button/Button.styles.ts

@@ -195,6 +195,8 @@ export interface ButtonStyles {
   buttonStyle: ViewStyle;
   textStyle: TextStyle;
   focusColor: string;
+  innerButtonWrapperStyle: ViewStyle;
+  buttonContentWrapperStyle: ViewStyle;
 }
 
 export interface ButtonStylesProps {
@@ -204,6 +206,8 @@ export interface ButtonStylesProps {
   isDisabled: boolean;
   isLoading: boolean;
   isInline: boolean;
+  iconBefore?: any;
+  iconAfter?: any;
 }
 export type GetButtonStyles = (
   buttonStylesProps: ButtonStylesProps,
@@ -218,6 +222,8 @@ export const getButtonStyles: GetButtonStyles = (buttonStyleProps, theme) => {
     isDisabled,
     isLoading,
     isInline,
+    iconBefore,
+    iconAfter,
   } = buttonStyleProps;
 
   const { appearances, sizes, disabled, ...baseStyles } = getButtonVariables(
@@ -265,5 +271,17 @@ export const getButtonStyles: GetButtonStyles = (buttonStyleProps, theme) => {
       justifyContent: 'center',
       textAlign: 'center',
     },
+
+    innerButtonWrapperStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      height: '100%',
+      justifyContent: 'center',
+    },
+
+    buttonContentWrapperStyle: {
+      paddingLeft: iconBefore ? 8 : 0,
+      paddingRight: iconAfter ? 8 : 0,
+    },
   };
 };

src/components/Button/Button.tsx

@@ -10,7 +10,6 @@ import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
-import { Box } from '../Box';
 import { LoadingDots } from '../Loading';
 import { Text } from '../Typography';
 import {
@@ -130,13 +129,18 @@ export const Button = (props: ButtonProps) => {
 
   const theme = useTheme();
 
-  const { buttonStyle, textStyle, focusColor } = mergeStyles(
-    getButtonStyles,
-    getStyles,
-  )(
+  const {
+    buttonStyle,
+    textStyle,
+    focusColor,
+    innerButtonWrapperStyle,
+    buttonContentWrapperStyle,
+  } = mergeStyles(getButtonStyles, getStyles)(
     {
       appearance,
       color,
+      iconAfter,
+      iconBefore,
       isDisabled,
       isInline,
       isLoading,
@@ -156,20 +160,13 @@ export const Button = (props: ButtonProps) => {
       testID={testID}
       {...accessibilityProps}
     >
-      <View
-        style={{
-          alignItems: 'center',
-          flexDirection: 'row',
-          height: '100%',
-          justifyContent: 'center',
-        }}
-      >
+      <View style={innerButtonWrapperStyle}>
         {iconBefore}
-        <Box paddingLeft={iconBefore ? 8 : 0} paddingRight={iconAfter ? 8 : 0}>
+        <View style={buttonContentWrapperStyle}>
           {/*
         // @ts-ignore */}
           <ButtonContent {...props} textStyle={textStyle} />
-        </Box>
+        </View>
         {iconAfter}
       </View>
     </TouchableHighlight>

src/components/Inputs/PhoneNumberInput.mdx

@@ -4,6 +4,7 @@ menu: Components
 ---
 
 import { Playground, Props } from 'docz';
+import { countries } from 'countries-list';
 import { State } from 'react-powerplug';
 
 import { Heading } from '../Typography';
@@ -18,7 +19,7 @@ Appends a button to select country code
 ### Usage
 
 <Playground>
-  <State initial={{ countryCode: 'US', phoneNumber: '' }}>
+  <State initial={{ countryCode: '1', phoneNumber: '' }}>
     {({ state, setState }) => (
       <PhoneNumberInput
         header={
@@ -30,7 +31,12 @@ Appends a button to select country code
         onChangePhoneNumber={phoneNumber => setState({ phoneNumber })}
         phoneNumber={state.phoneNumber}
         countryCode={state.countryCode}
+        countryCodes={Object.keys(countries).map(countryCode => ({
+          value: countries[countryCode].phone,
+          label: countries[countryCode].name,
+        }))}
         placeholder="Enter your phone number"
+        getCountryCodeTitle={countryCode => `+${countryCode}`}
       />
     )}
   </State>

src/components/Inputs/PhoneNumberInput.tsx

@@ -1,8 +1,8 @@
-import { countries as countryList } from 'countries-list';
 import * as React from 'react';
 import { FlatList, TextInput as RNTextInput, View } from 'react-native';
 import { DeepPartial, Omit } from 'ts-essentials';
 
+import { TextInput, TextInputProps } from '.';
 import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Button } from '../Button';
@@ -13,7 +13,6 @@ import {
   getPhoneNumberInputStyles,
   PhoneNumberInputStyles,
 } from './PhoneNumberInput.styles';
-import { TextInput, TextInputProps } from './TextInput';
 import { GetTextInputStyles, TextInputStyles } from './TextInput.styles';
 
 export interface PhoneNumberInputProps
@@ -30,26 +29,29 @@ export interface PhoneNumberInputProps
     GetTextInputStyles,
     DeepPartial<TextInputStyles & PhoneNumberInputStyles>
   >;
+  countryCodes?: CountryCode[];
+  getCountryCodeTitle?: (countryCode: string) => string;
 }
 
-const countries = (() => {
-  return Object.keys(countryList).map(countryCode => ({
-    countryCode,
-    key: countryCode,
-    ...countryList[countryCode],
-  }));
-})();
+export interface CountryCode {
+  /** The value for countryCode */
+  value: string;
+  /** Labels used in the list of countries to select the country code from */
+  label: string;
+}
 
 const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
   const {
-    countryCode = 'US',
+    countryCode = '1',
+    countryCodes = [],
     phoneNumber,
     onChangeCountryCode,
     onChangePhoneNumber,
     header,
     getStyles,
     innerRef,
     useHistory = false,
+    getCountryCodeTitle = (code: string) => code,
     ...textInputProps
   } = props;
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -80,7 +82,24 @@ const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
             name="chevron-down"
           />
         }
-        title={`+${countryList[countryCode].phone}`}
+        title={getCountryCodeTitle(countryCode)}
+      />
+      <TextInput
+        ref={innerRef}
+        name="phone"
+        getStyles={() => ({
+          containerStyle: {
+            flex: 1,
+          },
+          inputStyle: {
+            borderBottomLeftRadius: 0,
+            borderTopLeftRadius: 0,
+          },
+        })}
+        keyboardType="phone-pad"
+        value={phoneNumber}
+        onChangeText={onChangePhoneNumber}
+        {...textInputProps}
       />
       <CloseableModal
         visible={isModalOpen}
@@ -90,22 +109,22 @@ const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
       >
         <FlatList
           ListHeaderComponent={header}
-          keyExtractor={item => item.key}
+          keyExtractor={item => item.label}
           getItemLayout={(data, index) => ({
             index,
             length: theme.controlHeights.medium,
             offset: theme.controlHeights.medium * index,
           })}
-          data={countries}
-          renderItem={({ item: country }) => {
+          data={countryCodes}
+          renderItem={({ item }) => {
             return (
               <ListItem
-                key={country.countryCode}
-                label={country.name}
+                key={item.label}
+                label={item.label}
                 onPress={event => {
                   event.preventDefault();
                   if (onChangeCountryCode) {
-                    onChangeCountryCode(country.countryCode);
+                    onChangeCountryCode(item.value);
                   }
                   setIsModalOpen(false);
                 }}
@@ -114,24 +133,11 @@ const PhoneNumberInputBase = (props: PhoneNumberInputProps) => {
           }}
         />
       </CloseableModal>
-      <TextInput
-        ref={innerRef}
-        name="phone"
-        getStyles={() => ({
-          inputStyle: {
-            borderBottomLeftRadius: 0,
-            borderTopLeftRadius: 0,
-          },
-        })}
-        keyboardType="phone-pad"
-        value={phoneNumber}
-        onChangeText={onChangePhoneNumber}
-        {...textInputProps}
-      />
     </View>
   );
 };
 
-export const PhoneNumberInput = React.forwardRef<RNTextInput, TextInputProps>(
-  (props, ref) => <PhoneNumberInputBase {...props} innerRef={ref} />,
-);
+export const PhoneNumberInput = React.forwardRef<
+  RNTextInput,
+  PhoneNumberInputProps
+>((props, ref) => <PhoneNumberInputBase {...props} innerRef={ref} />);

src/components/Modal/ModalContent.tsx

@@ -15,6 +15,7 @@ export const ModalContent = (props: ModalContentProps) => {
         marginLeft: 'auto',
         marginRight: 'auto',
         maxWidth: 960,
+        width: '100%',
       }}
     >
       {children}

src/components/Toast/ToastContext.ts

@@ -22,3 +22,7 @@ const defaultToastContext: ToastContext = {
 };
 
 export const ToastContext = React.createContext(defaultToastContext);
+
+export const useToast = () => {
+  return React.useContext(ToastContext);
+};