Merge pull request #465 from openforis/surveylist-searchbar

Improve searchbar style

src/form/Attributes/common/SearchableForm/SearchBar/index.js

@@ -1,14 +1,21 @@
 import throttle from 'lodash.throttle';
 import moment from 'moment/moment';
-import React, {useCallback, useState} from 'react';
-import {Keyboard, View} from 'react-native';
+import React, {useCallback, useMemo, useState} from 'react';
+import {Keyboard, View, StyleSheet} from 'react-native';
 
 import Input from 'arena-mobile-ui/components/Input';
 import {TouchableIcon} from 'arena-mobile-ui/components/TouchableIcons';
+import useThemedStyles from 'arena-mobile-ui/hooks/useThemedStyles';
 
-import styles from './styles';
+import _styles from './styles';
 
-const SearchBar = ({handleStopToSearch, setSearchText, autoFocus}) => {
+const SearchBar = ({
+  handleStopToSearch,
+  setSearchText,
+  autoFocus,
+  containerStyle,
+}) => {
+  const styles = useThemedStyles(_styles);
   const [clear, setClear] = useState(false);
 
   const _handleStopToSearch = useCallback(() => {
@@ -22,8 +29,11 @@ const SearchBar = ({handleStopToSearch, setSearchText, autoFocus}) => {
     text => throttle(setSearchText, 500)(text),
     [setSearchText],
   );
+  const _containerStyle = useMemo(() => {
+    return StyleSheet.compose(styles.selectBarContainer, containerStyle);
+  }, [containerStyle, styles.selectBarContainer]);
   return (
-    <View style={styles.selectBarContainer}>
+    <View style={_containerStyle}>
       <View style={styles.selectContainer}>
         <Input
           onChangeText={deboundedSearch}

src/form/Attributes/common/SearchableForm/SearchBar/styles.js

@@ -1,23 +1,22 @@
 import {StyleSheet} from 'react-native';
 
-import baseStyles from 'arena-mobile-ui/styles';
-
-const styles = StyleSheet.create({
-  selectBarContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  selectContainer: {
-    flex: 1,
-  },
-  searchBox: {
-    marginLeft: 0,
-    marginBottom: baseStyles.bases.BASE,
-    flex: 1,
-  },
-  close: {
-    padding: baseStyles.bases.BASE_4,
-  },
-});
+const styles = ({baseStyles}) =>
+  StyleSheet.create({
+    selectBarContainer: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    selectContainer: {
+      flex: 1,
+    },
+    searchBox: {
+      marginLeft: 0,
+      marginBottom: baseStyles.bases.BASE,
+      flex: 1,
+    },
+    close: {
+      padding: baseStyles.bases.BASE_4,
+    },
+  });
 export default styles;

src/screens/Surveys/components/SurveysList/component.js

@@ -2,6 +2,7 @@ import React, {useEffect, useMemo, useState} from 'react';
 import {useSelector} from 'react-redux';
 
 import Loading from 'arena-mobile-ui/components/List/Loading';
+import useThemedStyles from 'arena-mobile-ui/hooks/useThemedStyles';
 import SearchBar from 'form/Attributes/common/SearchableForm/SearchBar';
 import {
   hooks as surveysHooks,
@@ -13,7 +14,9 @@ import List from '../common/List';
 
 import Empty from './Empty';
 import Error from './Error';
+import _styles from './styles';
 import SubPanel from './SubPanel';
+import ServerConnectionBar from './SubPanel/ServerConnectionBar';
 import {prepareSurveys} from './utils';
 
 const ListEmptyComponent = ({
@@ -43,6 +46,7 @@ const SurveysList = ({
   setSurveysOrigin,
   setSelectedSurvey,
 }) => {
+  const styles = useThemedStyles(_styles);
   const localSurveys = useSelector(surveysSelectors.getSurveysAsList);
 
   const [sortCriteriaIndex, setSortCriteriaIndex] = useState(0);
@@ -84,7 +88,15 @@ const SurveysList = ({
 
   return (
     <>
-      <SearchBar setSearchText={setSearchText} autoFocus={false} />
+      <ServerConnectionBar
+        errorRemoteServer={errorRemoteServer}
+        info={surveysOrigin !== 'remote'}
+      />
+      <SearchBar
+        setSearchText={setSearchText}
+        autoFocus={false}
+        containerStyle={styles.searchBarcontainerStyle}
+      />
       <List
         data={_surveys}
         surveysOrigin={surveysOrigin}

src/screens/Surveys/components/SurveysList/styles.js

@@ -1,5 +1,10 @@
 import {StyleSheet} from 'react-native';
 
-const styles = StyleSheet.create({});
+const styles = ({baseStyles}) =>
+  StyleSheet.create({
+    searchBarcontainerStyle: {
+      paddingLeft: baseStyles.bases.BASE_4,
+    },
+  });
 
 export default styles;