fix: Moved search bar out of <Header>

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

@@ -1,8 +1,8 @@
 import { View } from 'react-native'
 import React, { PureComponent } from 'react'
-import { Button, Flex, Text, SearchBar } from '.'
+import { Button, Flex, Text } from '.'
 import { colors } from '../../constants'
-import { padding, borderBottom, paddingBottom } from '../../styles'
+import { padding, borderBottom } from '../../styles'
 import { isRTL } from '../../i18n'
 
 const [defaultTextColor, defaultBackColor] = [colors.black, colors.white]
@@ -21,8 +21,6 @@ export default class Header extends PureComponent {
       rightBtn,
       rightBtnIcon,
       onPressRightBtn,
-      searchBar,
-      searchHandler,
     } = this.props
 
     const colorText =
@@ -38,24 +36,12 @@ export default class Header extends PureComponent {
         ? defaultTextColor
         : this.props.colorBtnRight
 
-    let searchBarComponent = null
-    if (searchBar === true) {
-      searchBarComponent = (
-        <SearchBar onChangeText={text => searchHandler(text)} />
-      )
-    } else if (searchBar !== undefined && searchBar !== false) {
-      searchBarComponent = searchBar
-    }
-
-    // todo calc height in function of dev status bar and search bar
-    // let height
-
     return (
       <View
         style={[
           {
             backgroundColor: colorBack,
-            height: searchBar && true ? 110 : 70,
+            height: 70,
           },
           borderBottom,
           padding,
@@ -66,7 +52,6 @@ export default class Header extends PureComponent {
             size={1}
             justify='between'
             align='center'
-            style={[searchBar ? paddingBottom : {}]}
           >
             {backBtn && (
               <HeaderButton
@@ -106,7 +91,6 @@ export default class Header extends PureComponent {
               />
             )}
           </Flex.Cols>
-          {searchBarComponent}
         </Flex.Rows>
       </View>
     )

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

@@ -3,11 +3,11 @@ import React from 'react'
 
 import { Flex } from '.'
 import { colors } from '../../constants'
-import { paddingBottom, paddingLeft, paddingRight } from '../../styles'
+import { paddingLeft, paddingRight } from '../../styles'
 import { withNamespaces } from 'react-i18next'
 
 const SearchBar = props => (
-  <Flex.Cols size={1} style={[paddingBottom]}>
+  <Flex.Cols size={1}>
     <TextInput
       underlineColorAndroid='transparent'
       autoCorrect={

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

@@ -4,8 +4,20 @@ import I18n from 'i18next'
 import React, { Component, PureComponent } from 'react'
 
 import { Pagination, RelayContext } from '../../../relay'
-import { Screen, Flex, Text, Header, Avatar } from '../../Library'
-import { border, borderBottom, marginHorizontal } from '../../../styles'
+import {
+  Screen,
+  Flex,
+  Text,
+  Header,
+  Avatar,
+  SearchBar,
+} from '../../Library'
+import {
+  border,
+  borderBottom,
+  marginHorizontal,
+  padding,
+} from '../../../styles'
 import { colors } from '../../../constants'
 import { fragments } from '../../../graphql'
 
@@ -86,9 +98,7 @@ class ListScreen extends Component {
         titleIcon='users'
         rightBtn={navigation.getParam('rightBtn')}
         rightBtnIcon='check-circle'
-        searchBar
         backBtn
-        searchHandler={navigation.getParam('searchHandler')} // Placeholder
         onPressRightBtn={navigation.getParam('onSubmit')}
       />
     ),
@@ -162,6 +172,11 @@ class ListScreen extends Component {
           variables={queries.ContactList.defaultVariables}
           fragment={fragments.ContactList}
           alias='ContactList'
+          ListHeaderComponent={
+            <View style={padding}>
+              <SearchBar onChangeText={() => { console.warn('not implemented') }} />
+            </View>
+          }
           renderItem={props =>
             props.data.status !== 42 ? (
               <Item

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

@@ -8,6 +8,7 @@ import {
   Screen,
   Text,
   Badge,
+  SearchBar,
 } from '../../Library'
 import { Pagination, RelayContext } from '../../../relay'
 import { borderBottom, marginLeft, padding } from '../../../styles'
@@ -162,8 +163,6 @@ class ListScreen extends PureComponent {
         title={I18n.t('chats.title')}
         titleIcon='message-circle'
         rightBtnIcon='edit'
-        searchBar
-        searchHandler={navigation.getParam('searchHandler')} // Placeholder
         onPressRightBtn={() => ListScreen.onPress(navigation)}
       />
     ),
@@ -201,6 +200,11 @@ class ListScreen extends PureComponent {
               renderItem={props => (
                 <Item {...props} context={context} navigation={navigation} />
               )}
+              ListHeaderComponent={
+                <View style={padding}>
+                  <SearchBar onChangeText={() => { console.warn('not implemented') }} />
+                </View>
+              }
               emptyItem={() => (
                 <EmptyList
                   source={require('../../../static/img/empty-conversation.png')}

client/react-native/common/components/Screens/Settings/Devtools/EventList.js

@@ -1,4 +1,4 @@
-import { Text, TouchableOpacity } from 'react-native'
+import { Text, TouchableOpacity, View } from 'react-native'
 import React, { PureComponent } from 'react'
 import moment from 'moment'
 
@@ -52,7 +52,7 @@ const Item = fragments.Event(({ data, navigation }) => (
             }[data.direction]
           }{' '}
           <Text style={{ fontWeight: 'bold' }}>
-            {enums.ValueBertyP2pKindInputKind[data.kind]}
+            {enums.ValueBertyEntityKindInputKind[data.kind]}
           </Text>
           {' (' + data.kind + ')'}
         </Text>
@@ -126,24 +126,6 @@ export default class EventList extends PureComponent {
           navigation={navigation}
           title='List events'
           titleIcon='list'
-          searchBar={
-            <SearchBar onChangeText={navigation.getParam('searchHandler')}>
-              <LibText
-                size={0}
-                height={34}
-                icon='filter'
-                padding
-                middle
-                large
-                onPress={() =>
-                  navigation.navigate('modal/devtools/event/list/filters', {
-                    defaultData: navigation.getParam('filters'),
-                    onSave: filters => navigation.setParams({ filters }),
-                  })
-                }
-              />
-            </SearchBar>
-          }
           backBtn
         />
       ),
@@ -168,6 +150,26 @@ export default class EventList extends PureComponent {
           fragment={fragments.EventList}
           alias='EventList'
           renderItem={props => <Item {...props} navigation={navigation} />}
+          ListHeaderComponent={
+            <View style={padding}>
+              <SearchBar onChangeText={(search) => this.searchHandler(search)}>
+                <LibText
+                  size={0}
+                  height={34}
+                  icon='filter'
+                  padding
+                  middle
+                  large
+                  onPress={() =>
+                    navigation.navigate('modal/devtools/event/list/filters', {
+                      defaultData: navigation.getParam('filters'),
+                      onSave: filters => navigation.setParams({ filters }),
+                    })
+                  }
+                />
+              </SearchBar>
+            </View>
+          }
         />
       </Screen>
     )

client/react-native/common/components/Screens/Settings/Devtools/Network/Peers.js

@@ -48,11 +48,6 @@ export default class Peers extends Component {
         navigation={navigation}
         title='Peers List'
         titleIcon='list'
-        searchBar={
-          <SearchBar onChangeText={navigation.getParam('peerFilter')}>
-            <LibText size={0} height={34} padding middle large />
-          </SearchBar>
-        }
         backBtn
       />
     ),
@@ -80,10 +75,6 @@ export default class Peers extends Component {
   }
 
   componentDidMount () {
-    this.props.navigation.setParams({
-      peerFilter: this.peerFilter,
-    })
-
     this.fetchPeers()
   }
 
@@ -189,6 +180,9 @@ export default class Peers extends Component {
               }`}
           </Text>
         </View>
+        <SearchBar onChangeText={filter => this.peerFilter(filter)}>
+          <LibText size={0} height={34} padding middle large />
+        </SearchBar>
         <Accordion
           sections={filteredPeers.slice(0, 100)}
           activeSections={this.state.opened}

client/react-native/common/relay/Pagination.js

@@ -68,6 +68,7 @@ class PaginationContainer extends Component {
       return (
         <>
           <FlatList
+            ListHeaderComponent={this.props.ListHeaderComponent}
             data={data[alias].edges}
             inverted={inverted}
             refreshing={this.state.refetching}