Repository: kiwicom/mobile
Pull request #1047 (2018-08-30 09:36:19)

Adding custom input field in navigation header on address location in…
…put screen

tbergq: @RobinCsl you have an unhappy test

Patch:
diff --git a/app/MMB/src/navigation/AddressPickerScreen.js b/app/MMB/src/navigation/AddressPickerScreen.js
index 33f2682b..83de4695 100644
--- a/app/MMB/src/navigation/AddressPickerScreen.js
+++ b/app/MMB/src/navigation/AddressPickerScreen.js
@@ -5,6 +5,8 @@ import { View } from 'react-native';
 import { Translation } from '@kiwicom/mobile-localization';
 import { HeaderButton, type NavigationType } from '@kiwicom/mobile-navigation';
 
+import AddressLocationInput from '../scenes/tripServices/transportation/AddressLocationInput';
+
 type Props = {|
   +navigation: NavigationType,
   +currentAddress: ?string,
@@ -16,6 +18,10 @@ export default class AddressPickerScreen extends React.Component<Props> {
       props.navigation.goBack();
     }
 
+    function todo() {
+      console.warn('todo');
+    }
+
     return {
       headerLeft: (
         <HeaderButton.CloseModal
@@ -25,13 +31,11 @@ export default class AddressPickerScreen extends React.Component<Props> {
           }
         />
       ),
-      headerTitle: (
-        <View>
-          <Translation passThrough="TODO" />
-        </View>
-      ),
+      headerTitle: <AddressLocationInput onChangeText={todo} />,
+      headerStyle: { paddingBottom: 5 },
     };
   };
+
   render() {
     return (
       <View>
diff --git a/app/MMB/src/scenes/tripServices/transportation/AddressLocationInput.js b/app/MMB/src/scenes/tripServices/transportation/AddressLocationInput.js
new file mode 100644
index 00000000..5f2a0766
--- /dev/null
+++ b/app/MMB/src/scenes/tripServices/transportation/AddressLocationInput.js
@@ -0,0 +1,71 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { StyleSheet, TextIcon, TextInput, Text } from '@kiwicom/mobile-shared';
+import { Translation } from '@kiwicom/mobile-localization';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+
+type Props = {|
+  +defaultValue?: string,
+  +autoFocus?: boolean,
+  +onChangeText?: (text: string) => void,
+  +keyboardType?: 'email-address',
+  +secureTextEntry?: boolean,
+|};
+
+export default function AddressLocationInput(props: Props) {
+  return (
+    <View style={styles.wrapper}>
+      <View style={[styles.iconWrapper, styles.inputWrapperStyle]}>
+        <TextIcon code="B" style={styles.icon} />
+        <Text style={styles.text}>
+          <Translation id="mmb.trip_services.transportation.address_picker.input.placeholder" />
+        </Text>
+      </View>
+      <View style={styles.inputWrapper}>
+        <TextInput {...props} inputWrapperStyle={styles.inputWrapperStyle} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    start: 0,
+    end: -65,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  inputWrapper: {
+    flex: 1,
+    paddingStart: 52,
+  },
+  inputWrapperStyle: {
+    android: {
+      elevation: 1,
+      height: 38,
+    },
+    ios: {
+      height: 37,
+    },
+  },
+  iconWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'absolute',
+    start: 0,
+    backgroundColor: defaultTokens.paletteCloudNormal,
+    borderTopStartRadius: 6,
+    borderBottomStartRadius: 6,
+  },
+  icon: {
+    fontSize: 14,
+    padding: 10,
+    color: defaultTokens.paletteInkLight,
+  },
+  text: {
+    color: defaultTokens.paletteInkLight,
+  },
+});
diff --git a/packages/shared/src/forms/TextInput.js b/packages/shared/src/forms/TextInput.js
index cdee8a13..847c7927 100644
--- a/packages/shared/src/forms/TextInput.js
+++ b/packages/shared/src/forms/TextInput.js
@@ -18,6 +18,7 @@ type Props = {|
   +secureTextEntry?: boolean,
   +label?: React.Element<typeof Translation>,
   +labelStyle?: StylePropType,
+  +inputWrapperStyle?: StylePropType,
 |};
 
 type State = {|
@@ -53,7 +54,7 @@ export default class TextInput extends React.Component<Props, State> {
           {this.props.label}
         </Text>
       )}
-      <View style={styleSheet.wrapper}>
+      <View style={[styleSheet.wrapper, this.props.inputWrapperStyle]}>
         <OriginalTextInput
           underlineColorAndroid="transparent"
           autoCorrect={false}


Test patch:
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/TextInput.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/TextInput.test.js.snap
index 73f03336..d6265908 100644
--- a/packages/shared/src/forms/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/packages/shared/src/forms/__tests__/__snapshots__/TextInput.test.js.snap
@@ -4,10 +4,13 @@ exports[`renders 1`] = `
 <React.Fragment>
   <Component
     style={
-      Object {
-        "flexDirection": "row",
-        "height": 47,
-      }
+      Array [
+        Object {
+          "flexDirection": "row",
+          "height": 47,
+        },
+        undefined,
+      ]
     }
   >
     <TextInput
@@ -39,10 +42,13 @@ exports[`renders with default value 1`] = `
 <React.Fragment>
   <Component
     style={
-      Object {
-        "flexDirection": "row",
-        "height": 47,
-      }
+      Array [
+        Object {
+          "flexDirection": "row",
+          "height": 47,
+        },
+        undefined,
+      ]
     }
   >
     <TextInput
@@ -89,10 +95,13 @@ exports[`renders with label 1`] = `
   </Text>
   <Component
     style={
-      Object {
-        "flexDirection": "row",
-        "height": 47,
-      }
+      Array [
+        Object {
+          "flexDirection": "row",
+          "height": 47,
+        },
+        undefined,
+      ]
     }
   >
     <TextInput
@@ -130,10 +139,13 @@ exports[`renders with placeholder 1`] = `
 <React.Fragment>
   <Component
     style={
-      Object {
-        "flexDirection": "row",
-        "height": 47,
-      }
+      Array [
+        Object {
+          "flexDirection": "row",
+          "height": 47,
+        },
+        undefined,
+      ]
     }
   >
     <TextInput