ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Auto focus search bar when clicking the search icon

Browse source
This commit is contained in:
Yohan Simard 2019-11-15 18:41:25 +01:00
parent d614e8a1ed
commit fd75675681
3 changed files with 53 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/CustomHeader.js
View file

@ -13,6 +13,7 @@ type Props = {
hasBackButton: boolean,
hasSearchField: boolean,
searchCallback: Function,
shouldFocusSearchBar: boolean,
leftButton: React.Node,
rightButton: React.Node,
title: string,
@ -34,12 +35,20 @@ export default class CustomHeader extends React.Component<Props> {
hasBackButton: false,
hasSearchField: false,
searchCallback: () => null,
shouldFocusSearchBar: false,
title: '',
leftButton: <View/>,
rightButton: <View/>,
hasTabs: false,
};
searchBarRef: Input;
componentDidMount() {
if (this.searchBarRef !== undefined && this.props.shouldFocusSearchBar)
this.searchBarRef.focus();
}
getSearchBar() {
return (
<Item
@ -51,6 +60,7 @@ export default class CustomHeader extends React.Component<Props> {
icon={'magnify'}
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
<Input
ref={(ref) => this.searchBarRef = ref}
placeholder={i18n.t('proximoScreen.search')}
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
onChangeText={(text) => this.props.searchCallback(text)}/>

8
screens/Proximo/ProximoListScreen.js
View file

@ -61,15 +61,18 @@ export default class ProximoListScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize };
originalData: Array<Object>;
navData = this.props.navigation.getParam('data', []);
shouldFocusSearchBar = this.navData['shouldFocusSearchBar'];
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
this.originalData = this.props.navigation.getParam('data', []);
this.originalData = this.navData['data'];
}
state = {
currentlyDisplayedData: this.props.navigation.getParam('data', []).sort(sortPrice),
currentlyDisplayedData: this.navData['data'].sort(sortPrice),
currentSortMode: sortMode.price,
isSortReversed: false,
sortPriceIcon: '',
@ -310,6 +313,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
navigation={nav}
hasSearchField={true}
searchCallback={(text) => this.search(text)}
shouldFocusSearchBar={this.shouldFocusSearchBar}
rightButton={this.getSortMenu()}/>
<Content>

45
screens/Proximo/ProximoMainScreen.js
View file

@ -101,25 +101,54 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
}
getRightButton() {
let searchScreenData = {
shouldFocusSearchBar: true,
data: {
type: {
id: "0",
name: i18n.t('proximoScreen.all'),
icon: 'star'
},
data: this.getAvailableArticles(this.state.fetchedData.articles, undefined)
},
};
return (
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
</Touchable>
<View
style={{
flexDirection: 'row'
}}>
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoListScreen', searchScreenData)}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify"/>
</Touchable>
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="information"/>
</Touchable>
</View>
);
}
getRenderItem(item: Object, section: Object, data: Object) {
let dataToSend = {
shouldFocusSearchBar: false,
data: item,
};
if (item.data.length > 0) {
return (
<ListItem
button
thumbnail
onPress={() => {
this.props.navigation.navigate('ProximoListScreen', item);
this.props.navigation.navigate('ProximoListScreen', dataToSend);
}}
>
<Left>