feat(rn): header made generic

client/react-native/common/components/Library/Header.js

@@ -0,0 +1,116 @@
+import React, { PureComponent } from 'react'
+import { TextInput, View, Platform } from 'react-native'
+import { Button, Flex, Text } from '.'
+import { colors } from '../../constants'
+import {
+  paddingLeft,
+  paddingRight,
+  padding,
+  borderBottom,
+  paddingBottom,
+} from '../../styles'
+
+const [defaultTextColor, defaultBackColor] = [colors.black, colors.white]
+
+const HeaderButton = ({ icon, color, onPress }) => {
+  return (
+    <Button
+      icon={icon}
+      large
+      disabled={onPress == null}
+      onPress={onPress}
+      color={color}
+      opacity={onPress == null ? 0.3 : 1}
+    />
+  )
+}
+
+export default class Header extends PureComponent {
+  render () {
+    const {
+      navigation,
+      title,
+      titleIcon,
+      backBtn,
+      rightBtnIcon,
+      onPressRightBtn,
+      searchBar,
+    } = this.props
+
+    const colorText = this.props.colorText == null ? defaultTextColor : this.props.colorText
+    const colorBack = this.props.colorBack == null ? defaultBackColor : this.props.colorBack
+    const colorBtnLeft = this.props.colorBtnLeft == null ? defaultTextColor : this.props.colorBtnLeft
+    const colorBtnRight = this.props.colorBtnRight == null ? defaultTextColor : this.props.colorBtnRight
+
+    return (
+      <View
+        style={[
+          {
+            backgroundColor: colorBack,
+            height: searchBar ? 100 : 60,
+          },
+          borderBottom,
+          padding,
+        ]}
+      >
+        <Flex.Rows>
+          <Flex.Cols
+            size={1}
+            align='center'
+            space='between'
+            style={[(searchBar ? paddingBottom : {})]}
+          >
+
+            {backBtn === true && (
+              <HeaderButton
+                icon='arrow-left'
+                color={colorBtnLeft}
+                onPress={() => navigation.goBack(null)}
+              />
+            )}
+
+            <Text
+              icon={titleIcon}
+              left
+              large
+              color={colorText}
+            >
+              {title}
+            </Text>
+
+            {rightBtnIcon !== null && (
+              <HeaderButton
+                icon={rightBtnIcon}
+                color={colorBtnRight}
+                onPress={onPressRightBtn}
+              />
+            )}
+
+          </Flex.Cols>
+
+          {searchBar === true && (
+            <Flex.Cols size={1} style={[paddingBottom]}>
+              <TextInput
+                autoCorrect={false}
+                style={[
+                  {
+                    height: 36,
+                    flex: 1,
+                    backgroundColor: colors.grey7,
+                    borderWidth: 0,
+                    borderRadius: 18,
+                    ...(Platform.OS === 'web' ?  {outline: 'none'} : {}),
+                  },
+                  paddingLeft,
+                  paddingRight,
+                ]}
+                placeholder='Search...'
+              />
+            </Flex.Cols>
+          )}
+
+        </Flex.Rows>
+      </View>
+    )
+  }
+}

client/react-native/common/components/Library/Text.js

@@ -125,6 +125,10 @@ const getColor = ({ background, color }) => ({
     colors[color] || color || (background ? colors.white : colors.textGrey),
 })
 
+const getOpacity = ({ opacity }) => ({
+  opacity: opacity == null ? 1 : opacity,
+})
+
 const getWeight = props => props.bold && bold
 
 const getJustify = (
@@ -174,13 +178,14 @@ export const ForegroundText = props => {
     numberOfLines,
     height,
   } = props
-  const [vertical, horizontal, size, iconSize, weight, color] = [
+  const [vertical, horizontal, size, iconSize, weight, color, opacity] = [
     getVertiAlign(props),
     getHorizAlign(props),
     getSize(props),
     getIconSize(props),
     getWeight(props),
     getColor(props),
+    getOpacity(props),
   ]
   return (
     <View
@@ -197,6 +202,7 @@ export const ForegroundText = props => {
             iconSize,
             weight,
             color,
+            opacity,
             style,
             vertical,
             horizontal,
@@ -214,6 +220,7 @@ export const ForegroundText = props => {
             size,
             weight,
             color,
+            opacity,
             style,
             vertical,
             horizontal,
@@ -229,6 +236,7 @@ export const ForegroundText = props => {
             size,
             weight,
             color,
+            opacity,
             style,
             vertical,
             horizontal,

client/react-native/common/components/Library/index.js

@@ -1,4 +1,4 @@
-export HeaderButton from './HeaderButton'
+export Header from './Header'
 export Icon from './Icon'
 export Menu from './Menu'
 export Screen from './Screen'

client/react-native/common/components/Screens/Chats/List.js

@@ -1,12 +1,10 @@
 import React, { PureComponent } from 'react'
-import { FlatList, TouchableOpacity, Image, View } from 'react-native'
-import { Screen, Flex, Text, Separator } from '../../Library'
+import { FlatList, TouchableOpacity, Image } from 'react-native'
+import { Screen, Flex, Text, Separator, Header } from '../../Library'
 import { colors } from '../../../constants'
 import {
   paddingLeft,
   paddingRight,
-  padding,
-  borderBottom,
 } from '../../../styles'
 import { QueryReducer } from '../../../relay'
 import { createFragmentContainer, graphql } from 'react-relay'
@@ -87,24 +85,12 @@ class List extends PureComponent {
 }
 
 export default class ListScreen extends PureComponent {
-  static Header = ({ navigation }) => (
-    <View
-      style={[
-        { backgroundColor: colors.white, height: 56 },
-        borderBottom,
-        padding,
-      ]}
-    >
-      <Flex.Cols size={1} align='start' space='between'>
-        <Text icon='message-circle' left large color={colors.black}>
-          Chats
-        </Text>
-      </Flex.Cols>
-    </View>
-  )
-
   static navigationOptions = ({ navigation }) => ({
-    header: <ListScreen.Header navigation={navigation} />,
+    header: <Header
+      navigation={navigation}
+      title='Chats'
+      titleIcon='message-circle'
+    />,
     tabBarVisible: true,
   })
 

client/react-native/common/components/Screens/Contacts/Add/index.js

@@ -5,34 +5,8 @@ import ByPublicKey from './ByPublicKey'
 import ByQRCode from './ByQRCode'
 import Request from './Request'
 import RequestValidation from './RequestValidation'
-
 import React from 'react'
-import { View } from 'react-native'
-import { Text, Button, Flex } from '../../../Library'
-import { padding } from '../../../../styles'
-import { colors } from '../../../../constants'
-
-const Header = ({ navigation }) => (
-  <View style={[{ backgroundColor: colors.white, height: 56 }, padding]}>
-    <Flex.Rows>
-      <Flex.Cols self='left' style={{ position: 'absolute' }}>
-        <Button
-          padding
-          large
-          left
-          color='black'
-          icon='arrow-left'
-          onPress={() => navigation.goBack(null)}
-        />
-      </Flex.Cols>
-      <Flex.Cols size={1} self='center' style={{ position: 'absolute' }}>
-        <Text icon='user-plus' color='black' padding medium>
-          Add a contact
-        </Text>
-      </Flex.Cols>
-    </Flex.Rows>
-  </View>
-)
+import { Header } from '../../../Library'
 
 export default createSubStackNavigator(
   {
@@ -46,7 +20,12 @@ export default createSubStackNavigator(
   {
     initialRouteName: 'Choice',
     navigationOptions: ({ navigation }) => ({
-      header: <Header navigation={navigation} />,
+      header: <Header
+        navigation={navigation}
+        title='Add a contact'
+        titleIcon='user-plus'
+        backBtn
+      />,
     }),
   }
 )

client/react-native/common/components/Screens/Contacts/List.js

@@ -1,73 +1,19 @@
 import React, { PureComponent } from 'react'
+import { FlatList, TouchableOpacity, Image } from 'react-native'
 import {
-  FlatList,
-  TouchableOpacity,
-  TextInput,
-  Image,
-  View,
-} from 'react-native'
-import { Screen, Flex, Text, Separator } from '../../Library'
+  Screen,
+  Flex,
+  Text,
+  Separator,
+  Header,
+} from '../../Library'
 import { colors } from '../../../constants'
-import {
-  paddingLeft,
-  paddingRight,
-  marginHorizontal,
-  padding,
-  borderBottom,
-  paddingBottom,
-} from '../../../styles'
+import { marginHorizontal } from '../../../styles'
 import { QueryReducer } from '../../../relay'
 import { queries, subscriptions } from '../../../graphql'
 
 // TODO: implement pagination
 
-const Header = ({ navigation }) => (
-  <View
-    style={[
-      { backgroundColor: colors.white, height: 100 },
-      borderBottom,
-      padding,
-    ]}
-  >
-    <Flex.Rows>
-      <Flex.Cols
-        size={1}
-        align='center'
-        space='between'
-        style={[paddingBottom]}
-      >
-        <Text icon='feather-users' left large color={colors.black}>
-          Contacts
-        </Text>
-        <Text
-          icon='user-plus'
-          large
-          right
-          button
-          color='black'
-          onPress={() => navigation.push('Add')}
-        />
-      </Flex.Cols>
-      <Flex.Cols size={1} style={[paddingBottom]}>
-        <TextInput
-          style={[
-            {
-              height: 36,
-              flex: 1,
-              backgroundColor: colors.grey7,
-              borderWidth: 0,
-              borderRadius: 18,
-            },
-            paddingLeft,
-            paddingRight,
-          ]}
-          placeholder='Search'
-        />
-      </Flex.Cols>
-    </Flex.Rows>
-  </View>
-)
-
 const Item = ({
   data: { id, displayName, overrideDisplayName },
   navigation,
@@ -109,7 +55,15 @@ const Item = ({
 
 export default class List extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
-    header: <Header navigation={navigation} />,
+    header: <Header
+      navigation={navigation}
+      title='Contacts'
+      titleIcon='feather-users'
+      backBtn
+      rightBtnIcon='user-plus'
+      onPressRightBtn={() => navigation.push('Add')}
+      searchBar
+    />,
     tabBarVisible: true,
   })