Browse Source

Fixed focusing on search bar not working

keplyx 4 years ago
parent
commit
ab7e8f92fc

+ 8
- 6
components/CustomHeader.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from "react";
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
 import {Platform, StyleSheet, View} from "react-native";
5
 import {Platform, StyleSheet, View} from "react-native";
6
 import {getStatusBarHeight} from "react-native-status-bar-height";
6
 import {getStatusBarHeight} from "react-native-status-bar-height";
7
 import Touchable from 'react-native-platform-touchable';
7
 import Touchable from 'react-native-platform-touchable';
42
         hasTabs: false,
42
         hasTabs: false,
43
     };
43
     };
44
 
44
 
45
-    searchBarRef: Input;
46
-
47
     componentDidMount() {
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
     getSearchBar() {
52
     getSearchBar() {
53
         return (
53
         return (
54
+            <Form>
54
             <Item
55
             <Item
55
                 style={{
56
                 style={{
56
                     width: '100%',
57
                     width: '100%',
60
                     icon={'magnify'}
61
                     icon={'magnify'}
61
                     color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
62
                     color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
62
                 <Input
63
                 <Input
63
-                    ref={(ref) => this.searchBarRef = ref}
64
+                    ref="searchInput"
64
                     placeholder={i18n.t('proximoScreen.search')}
65
                     placeholder={i18n.t('proximoScreen.search')}
65
                     placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
66
                     placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
66
                     onChangeText={(text) => this.props.searchCallback(text)}/>
67
                     onChangeText={(text) => this.props.searchCallback(text)}/>
67
             </Item>
68
             </Item>
69
+            </Form>
68
         );
70
         );
69
     }
71
     }
70
 
72
 

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

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

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

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