Browse Source

Auto focus search bar when clicking the search icon

Yohan Simard 4 years ago
parent
commit
fd75675681

+ 10
- 0
components/CustomHeader.js View File

@@ -13,6 +13,7 @@ type Props = {
13 13
     hasBackButton: boolean,
14 14
     hasSearchField: boolean,
15 15
     searchCallback: Function,
16
+    shouldFocusSearchBar: boolean,
16 17
     leftButton: React.Node,
17 18
     rightButton: React.Node,
18 19
     title: string,
@@ -34,12 +35,20 @@ export default class CustomHeader extends React.Component<Props> {
34 35
         hasBackButton: false,
35 36
         hasSearchField: false,
36 37
         searchCallback: () => null,
38
+        shouldFocusSearchBar: false,
37 39
         title: '',
38 40
         leftButton: <View/>,
39 41
         rightButton: <View/>,
40 42
         hasTabs: false,
41 43
     };
42 44
 
45
+    searchBarRef: Input;
46
+
47
+    componentDidMount() {
48
+        if (this.searchBarRef !== undefined && this.props.shouldFocusSearchBar)
49
+            this.searchBarRef.focus();
50
+    }
51
+
43 52
     getSearchBar() {
44 53
         return (
45 54
             <Item
@@ -51,6 +60,7 @@ export default class CustomHeader extends React.Component<Props> {
51 60
                     icon={'magnify'}
52 61
                     color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
53 62
                 <Input
63
+                    ref={(ref) => this.searchBarRef = ref}
54 64
                     placeholder={i18n.t('proximoScreen.search')}
55 65
                     placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
56 66
                     onChangeText={(text) => this.props.searchCallback(text)}/>

+ 6
- 2
screens/Proximo/ProximoListScreen.js View File

@@ -61,15 +61,18 @@ export default class ProximoListScreen extends React.Component<Props, State> {
61 61
 
62 62
     modalRef: { current: null | Modalize };
63 63
     originalData: Array<Object>;
64
+    navData = this.props.navigation.getParam('data', []);
65
+    shouldFocusSearchBar = this.navData['shouldFocusSearchBar'];
64 66
 
65 67
     constructor(props: any) {
66 68
         super(props);
67 69
         this.modalRef = React.createRef();
68
-        this.originalData = this.props.navigation.getParam('data', []);
70
+        this.originalData = this.navData['data'];
71
+
69 72
     }
70 73
 
71 74
     state = {
72
-        currentlyDisplayedData: this.props.navigation.getParam('data', []).sort(sortPrice),
75
+        currentlyDisplayedData: this.navData['data'].sort(sortPrice),
73 76
         currentSortMode: sortMode.price,
74 77
         isSortReversed: false,
75 78
         sortPriceIcon: '',
@@ -310,6 +313,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
310 313
                     navigation={nav}
311 314
                     hasSearchField={true}
312 315
                     searchCallback={(text) => this.search(text)}
316
+                    shouldFocusSearchBar={this.shouldFocusSearchBar}
313 317
                     rightButton={this.getSortMenu()}/>
314 318
 
315 319
                 <Content>

+ 37
- 8
screens/Proximo/ProximoMainScreen.js View File

@@ -101,25 +101,54 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
101 101
     }
102 102
 
103 103
     getRightButton() {
104
+        let searchScreenData = {
105
+            shouldFocusSearchBar: true,
106
+            data: {
107
+                type: {
108
+                    id: "0",
109
+                    name: i18n.t('proximoScreen.all'),
110
+                    icon: 'star'
111
+                },
112
+                data: this.getAvailableArticles(this.state.fetchedData.articles, undefined)
113
+            },
114
+        };
115
+
116
+
104 117
         return (
105
-            <Touchable
106
-                style={{padding: 6}}
107
-                onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
108
-                <CustomMaterialIcon
109
-                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
110
-                    icon="information"/>
111
-            </Touchable>
118
+            <View
119
+                style={{
120
+                    flexDirection: 'row'
121
+                }}>
122
+                <Touchable
123
+                    style={{padding: 6}}
124
+                    onPress={() => this.props.navigation.navigate('ProximoListScreen', searchScreenData)}>
125
+                    <CustomMaterialIcon
126
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
127
+                        icon="magnify"/>
128
+                </Touchable>
129
+                <Touchable
130
+                    style={{padding: 6}}
131
+                    onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
132
+                    <CustomMaterialIcon
133
+                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
134
+                        icon="information"/>
135
+                </Touchable>
136
+            </View>
112 137
         );
113 138
     }
114 139
 
115 140
     getRenderItem(item: Object, section: Object, data: Object) {
141
+        let dataToSend = {
142
+            shouldFocusSearchBar: false,
143
+            data: item,
144
+        };
116 145
         if (item.data.length > 0) {
117 146
             return (
118 147
                 <ListItem
119 148
                     button
120 149
                     thumbnail
121 150
                     onPress={() => {
122
-                        this.props.navigation.navigate('ProximoListScreen', item);
151
+                        this.props.navigation.navigate('ProximoListScreen', dataToSend);
123 152
                     }}
124 153
                 >
125 154
                     <Left>

Loading…
Cancel
Save