fix(rn): chat detail text input

Signed-off-by: Godefroy Ponsinet <godefroy.ponsinet@outlook.com>
berty · Nov 12, 2018 · a069076 · a069076
1 parent 8d3c48a
commit a069076
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 81 deletions.
diff --git a/client/react-native/common/components/Library/Text.js b/client/react-native/common/components/Library/Text.js
@@ -1,6 +1,9 @@
+import { Text as TextNative, TextInput, StyleSheet } from 'react-native'
 import React, { Fragment, PureComponent } from 'react'
-import { View, Text as TextNative, TextInput, StyleSheet } from 'react-native'
+import hash from 'object-hash'
+
 import { Icon, Flex } from '.'
+import { colors } from '../../constants'
 import {
   tinyText,
   smallText,
@@ -23,8 +26,6 @@ import {
   marginHorizontal,
   marginVertical,
 } from '../../styles'
-import { colors } from '../../constants'
-import hash from 'object-hash'
 
 const reverse = props =>
   Object.keys(props)
@@ -52,6 +53,8 @@ const getPadding = (
     case 'boolean':
       padding = find({ inside: props, from: paddings, or: 'small' })
       break
+    case 'number':
+      break
     case 'string':
       padding = paddings[padding]
       break
@@ -206,11 +209,17 @@ const getMargin = (
     case 'string':
       return margins[props.margin]
     case 'object':
-      return Object.keys(margins).reduce((a, key) => {
-        a[`margin${key.charAt(0).toUpperCase()}${key.slice(1)}`] =
-          props.margin[key]
-        return a
-      }, {})
+      return Array.isArray(props.margin)
+        ? props.margin.reduce((a, key) => {
+          a[`margin${key.charAt(0).toUpperCase()}${key.slice(1)}`] =
+              margins[key]
+          return a
+        }, {})
+        : Object.keys(margins).reduce((a, key) => {
+          a[`margin${key.charAt(0).toUpperCase()}${key.slice(1)}`] =
+              props.margin[key]
+          return a
+        }, {})
     default:
       return null
   }
@@ -352,7 +361,7 @@ export class ForegroundText extends PureComponent {
         {icon && typeof icon === 'string' ? (
           <Icon name={icon} style={styles.icon} />
         ) : (
-          icon && <View style={styles.iconView}>{icon}</View>
+          icon && <Flex.Rows style={styles.iconView}>{icon}</Flex.Rows>
         )}
         {input ? (
           <TextInput
@@ -368,7 +377,7 @@ export class ForegroundText extends PureComponent {
           <TextNative
             className={multiline ? 'textBreak' : 'textEllipsis'}
             style={styles.text}
-            ellipsizeMode={!multiline && 'tail'}
+            ellipsizeMode={!multiline ? 'tail' : undefined}
             numberOfLines={numberOfLines}
           >
             {children}

diff --git a/client/react-native/common/components/Screens/Chats/Detail.js b/client/react-native/common/components/Screens/Chats/Detail.js
@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { ActivityIndicator, FlatList } from 'react-native'
+import { ActivityIndicator, FlatList, Platform, View } from 'react-native'
 import React, { Fragment, PureComponent } from 'react'
 
 import { QueryReducer } from '../../../relay'
@@ -64,6 +64,7 @@ const Message = fragments.Event(props => {
 class Input extends PureComponent {
   state = {
     input: '',
+    height: 16,
   }
 
   onSubmit = () => {
@@ -87,25 +88,59 @@ class Input extends PureComponent {
 
   render() {
     return (
-      <Text
-        left
-        middle
-        padding
-        margin
-        height={32}
-        rounded={32}
-        icon="edit-2"
-        input={{
-          returnKeyType: 'send',
-          onChangeText: input => this.setState({ input }),
-          placeholder: 'Write a secure message...',
-          autoFocus: true,
-          value: this.state.input,
-        }}
-        background={colors.grey8}
-        color={colors.grey5}
-        onSubmit={this.onSubmit}
-      />
+      <Flex.Cols style={[shadow]} justify="center" align="center">
+        <Flex.Cols
+          style={{
+            backgroundColor: colors.grey8,
+            marginLeft: 16,
+            borderRadius: 16,
+          }}
+        >
+          <Text
+            left
+            middle
+            margin={{
+              left: 8,
+              right: Platform.OS === 'web' ? 8 : 0,
+              top: this.state.height > 20 ? 0 : 8,
+              bottom: this.state.height > 20 ? 0 : 8,
+            }}
+            lineHeight={this.state.height > 20 ? 0 : 16}
+            background={colors.grey8}
+            icon="edit-2"
+            height={this.state.height}
+            input={{
+              onChangeText: input => {
+                this.setState({ input })
+              },
+              onContentSizeChange: ({
+                nativeEvent: {
+                  contentSize: { height },
+                },
+              }) => {
+                this.setState({
+                  height: height > 80 ? 80 : height,
+                })
+              },
+              placeholder: 'Write a secure message...',
+              autoFocus: true,
+              value: this.state.input,
+            }}
+            multiline
+            color={colors.grey5}
+          />
+        </Flex.Cols>
+        <Text
+          right
+          size={0}
+          middle
+          margin
+          height={this.state.height}
+          icon="send"
+          color={colors.grey5}
+          onPress={this.onSubmit}
+        />
+      </Flex.Cols>
     )
   }
 }
@@ -134,10 +169,10 @@ const List = fragments.EventList(
       const { data, loading } = this.props
       const edges = (data && data.EventList && data.EventList.edges) || []
       return (
-        <Flex.Rows style={{ backgroundColor: colors.white }}>
+        <Flex.Rows>
           <FlatList
             ref={ref => (this.ref = ref)}
-            style={[{ paddingTop: 54 }, paddingHorizontal]}
+            style={[paddingHorizontal]}
             data={edges}
             inverted
             refreshing={loading}
@@ -151,24 +186,6 @@ const List = fragments.EventList(
               />
             )}
           />
-          <Flex.Rows
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              left: 0,
-              right: 0,
-              backgroundColor: colors.white,
-              height: 54,
-            }}
-          >
-            <Flex.Cols
-              style={[{ height: 54 }, shadow]}
-              justify="center"
-              align="center"
-            >
-              <Input navigation={this.props.navigation} />
-            </Flex.Cols>
-          </Flex.Rows>
         </Flex.Rows>
       )
     }
@@ -195,37 +212,50 @@ export default class Detail extends PureComponent {
   render() {
     const conversation = this.props.navigation.getParam('conversation')
     return (
-      <Screen style={{ backgroundColor: colors.white }}>
-        <QueryReducer
-          query={queries.EventList}
-          variables={merge([
-            queries.EventList.defaultVariables,
-            {
-              filter: {
-                kind: 302,
-                conversationId: conversation.id,
+      <Screen style={{ backgroundColor: colors.white, paddingTop: 0 }}>
+        <Flex.Rows style={{ backgroundColor: colors.white }}>
+          <QueryReducer
+            query={queries.EventList}
+            variables={merge([
+              queries.EventList.defaultVariables,
+              {
+                filter: {
+                  kind: 302,
+                  conversationId: conversation.id,
+                },
               },
-            },
-          ])}
-        >
-          {(state, retry) => {
-            switch (state.type) {
-              default:
-              case state.loading:
-                return <ActivityIndicator size="large" />
-              case state.success:
-                return (
-                  <List
-                    navigation={this.props.navigation}
-                    data={state.data}
-                    loading={state.type === state.loading}
-                  />
-                )
-              case state.error:
-                return null
-            }
-          }}
-        </QueryReducer>
+            ])}
+          >
+            {(state, retry) => {
+              switch (state.type) {
+                default:
+                case state.loading:
+                  return <ActivityIndicator size="large" />
+                case state.success:
+                  return (
+                    <List
+                      navigation={this.props.navigation}
+                      data={state.data}
+                      loading={state.type === state.loading}
+                    />
+                  )
+                case state.error:
+                  return null
+              }
+            }}
+          </QueryReducer>
+          <View
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              backgroundColor: colors.white,
+            }}
+          >
+            <Input navigation={this.props.navigation} />
+          </View>
+        </Flex.Rows>
       </Screen>
     )
   }

diff --git a/client/react-native/common/index.js b/client/react-native/common/index.js
@@ -2,7 +2,7 @@
 if (!__DEV__) {
   console.error = console.warn
 }
-
+console.warn = () => {}
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { NativeModules, Platform, AppRegistry } from 'react-native'