Browse Source

Fixed focusing on search bar not working

keplyx 2 years ago
parent
commit
ab7e8f92fc

+ 8
- 6
components/CustomHeader.js View File

@@ -1,7 +1,7 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from "react";
4
-import {Body, Header, Input, Item, Left, Right, Title} from "native-base";
4
+import {Body, Header, Input, Item, Left, Right, Title, Form} from "native-base";
5 5
 import {Platform, StyleSheet, View} from "react-native";
6 6
 import {getStatusBarHeight} from "react-native-status-bar-height";
7 7
 import Touchable from 'react-native-platform-touchable';
@@ -42,15 +42,16 @@ export default class CustomHeader extends React.Component<Props> {
42 42
         hasTabs: false,
43 43
     };
44 44
 
45
-    searchBarRef: Input;
46
-
47 45
     componentDidMount() {
48
-        if (this.searchBarRef !== undefined && this.props.shouldFocusSearchBar)
49
-            this.searchBarRef.focus();
46
+        if (this.refs.searchInput !== undefined && this.props.shouldFocusSearchBar) {
47
+            // does not work if called to early for some reason...
48
+            setInterval(() => this.refs.searchInput._root.focus(), 500);
49
+        }
50 50
     }
51 51
 
52 52
     getSearchBar() {
53 53
         return (
54
+            <Form>
54 55
             <Item
55 56
                 style={{
56 57
                     width: '100%',
@@ -60,11 +61,12 @@ export default class CustomHeader extends React.Component<Props> {
60 61
                     icon={'magnify'}
61 62
                     color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
62 63
                 <Input
63
-                    ref={(ref) => this.searchBarRef = ref}
64
+                    ref="searchInput"
64 65
                     placeholder={i18n.t('proximoScreen.search')}
65 66
                     placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
66 67
                     onChangeText={(text) => this.props.searchCallback(text)}/>
67 68
             </Item>
69
+            </Form>
68 70
         );
69 71
     }
70 72
 

+ 1
- 4
screens/Proximo/ProximoListScreen.js View File

@@ -45,7 +45,6 @@ type Props = {
45 45
 }
46 46
 
47 47
 type State = {
48
-    navData: Array<Object>,
49 48
     currentSortMode: string,
50 49
     isSortReversed: boolean,
51 50
     sortPriceIcon: React.Node,
@@ -62,13 +61,12 @@ export default class ProximoListScreen extends React.Component<Props, State> {
62 61
     modalRef: { current: null | Modalize };
63 62
     originalData: Array<Object>;
64 63
     navData = this.props.navigation.getParam('data', []);
65
-    shouldFocusSearchBar = this.navData['shouldFocusSearchBar'];
64
+    shouldFocusSearchBar = this.props.navigation.getParam('shouldFocusSearchBar', false);
66 65
 
67 66
     constructor(props: any) {
68 67
         super(props);
69 68
         this.modalRef = React.createRef();
70 69
         this.originalData = this.navData['data'];
71
-
72 70
     }
73 71
 
74 72
     state = {
@@ -300,7 +298,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
300 298
     render() {
301 299
         const nav = this.props.navigation;
302 300
         const navType = nav.getParam('type', '{name: "Error"}');
303
-
304 301
         return (
305 302
             <Container>
306 303
                 <Modalize ref={this.modalRef}

+ 5
- 4
screens/Proximo/ProximoMainScreen.js View File

@@ -38,7 +38,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
38 38
         return [
39 39
             {
40 40
                 title: '',
41
-                data: ProximoMainScreen.generateData(fetchedData),
41
+                data: this.generateData(fetchedData),
42 42
                 extraData: super.state,
43 43
                 keyExtractor: this.getKeyExtractor
44 44
             }
@@ -52,7 +52,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
52 52
      * @param fetchedData The array of articles represented by objects
53 53
      * @returns {Array} The formatted dataset
54 54
      */
55
-    static generateData(fetchedData: Object) {
55
+    generateData(fetchedData: Object) {
56 56
         let finalData = [];
57 57
         if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
58 58
             let types = fetchedData.types;
@@ -84,7 +84,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
84 84
      * @param type The type of articles to find (undefined for any type)
85 85
      * @return {Array} The array of available articles
86 86
      */
87
-    static getAvailableArticles(articles: Array<Object>, type: ?Object) {
87
+    getAvailableArticles(articles: Array<Object>, type: ?Object) {
88 88
         let availableArticles = [];
89 89
         for (let k = 0; k < articles.length; k++) {
90 90
             if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id'])
@@ -109,7 +109,8 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
109 109
                     name: i18n.t('proximoScreen.all'),
110 110
                     icon: 'star'
111 111
                 },
112
-                data: this.getAvailableArticles(this.state.fetchedData.articles, undefined)
112
+                data: this.state.fetchedData.articles !== undefined ?
113
+                    this.getAvailableArticles(this.state.fetchedData.articles, undefined) : []
113 114
             },
114 115
         };
115 116
 

Loading…
Cancel
Save