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

Fixed focusing on search bar not working

Browse source
This commit is contained in:
keplyx 2019-11-15 19:29:25 +01:00
parent fd75675681
commit ab7e8f92fc
3 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/CustomHeader.js
View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from "react"; import * as React from "react";
import {Body, Header, Input, Item, Left, Right, Title} from "native-base"; import {Body, Header, Input, Item, Left, Right, Title, Form} from "native-base";
import {Platform, StyleSheet, View} from "react-native"; import {Platform, StyleSheet, View} from "react-native";
import {getStatusBarHeight} from "react-native-status-bar-height"; import {getStatusBarHeight} from "react-native-status-bar-height";
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
@ -42,15 +42,16 @@ export default class CustomHeader extends React.Component<Props> {
hasTabs: false, hasTabs: false,
}; };
searchBarRef: Input;
componentDidMount() { componentDidMount() {
if (this.searchBarRef !== undefined && this.props.shouldFocusSearchBar) if (this.refs.searchInput !== undefined && this.props.shouldFocusSearchBar) {
this.searchBarRef.focus(); // does not work if called to early for some reason...
setInterval(() => this.refs.searchInput._root.focus(), 500);
}
} }
getSearchBar() { getSearchBar() {
return ( return (
<Form>
<Item <Item
style={{ style={{
width: '100%', width: '100%',
@ -60,11 +61,12 @@ export default class CustomHeader extends React.Component<Props> {
icon={'magnify'} icon={'magnify'}
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/> color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
<Input <Input
ref={(ref) => this.searchBarRef = ref} ref="searchInput"
placeholder={i18n.t('proximoScreen.search')} placeholder={i18n.t('proximoScreen.search')}
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor} placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
onChangeText={(text) => this.props.searchCallback(text)}/> onChangeText={(text) => this.props.searchCallback(text)}/>
</Item> </Item>
</Form>
); );
} }

5
screens/Proximo/ProximoListScreen.js
View file

@ -45,7 +45,6 @@ type Props = {
} }
type State = { type State = {
navData: Array<Object>,
currentSortMode: string, currentSortMode: string,
isSortReversed: boolean, isSortReversed: boolean,
sortPriceIcon: React.Node, sortPriceIcon: React.Node,
@ -62,13 +61,12 @@ export default class ProximoListScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize }; modalRef: { current: null | Modalize };
originalData: Array<Object>; originalData: Array<Object>;
navData = this.props.navigation.getParam('data', []); navData = this.props.navigation.getParam('data', []);
shouldFocusSearchBar = this.navData['shouldFocusSearchBar']; shouldFocusSearchBar = this.props.navigation.getParam('shouldFocusSearchBar', false);
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.modalRef = React.createRef(); this.modalRef = React.createRef();
this.originalData = this.navData['data']; this.originalData = this.navData['data'];
} }
state = { state = {
@ -300,7 +298,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
render() { render() {
const nav = this.props.navigation; const nav = this.props.navigation;
const navType = nav.getParam('type', '{name: "Error"}'); const navType = nav.getParam('type', '{name: "Error"}');
return ( return (
<Container> <Container>
<Modalize ref={this.modalRef} <Modalize ref={this.modalRef}

9
screens/Proximo/ProximoMainScreen.js
View file

@ -38,7 +38,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
return [ return [
{ {
title: '', title: '',
data: ProximoMainScreen.generateData(fetchedData), data: this.generateData(fetchedData),
extraData: super.state, extraData: super.state,
keyExtractor: this.getKeyExtractor keyExtractor: this.getKeyExtractor
} }
@ -52,7 +52,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
* @param fetchedData The array of articles represented by objects * @param fetchedData The array of articles represented by objects
* @returns {Array} The formatted dataset * @returns {Array} The formatted dataset
*/ */
static generateData(fetchedData: Object) { generateData(fetchedData: Object) {
let finalData = []; let finalData = [];
if (fetchedData.types !== undefined && fetchedData.articles !== undefined) { if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
let types = fetchedData.types; let types = fetchedData.types;
@ -84,7 +84,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
* @param type The type of articles to find (undefined for any type) * @param type The type of articles to find (undefined for any type)
* @return {Array} The array of available articles * @return {Array} The array of available articles
*/ */
static getAvailableArticles(articles: Array<Object>, type: ?Object) { getAvailableArticles(articles: Array<Object>, type: ?Object) {
let availableArticles = []; let availableArticles = [];
for (let k = 0; k < articles.length; k++) { for (let k = 0; k < articles.length; k++) {
if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id']) if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id'])
@ -109,7 +109,8 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
name: i18n.t('proximoScreen.all'), name: i18n.t('proximoScreen.all'),
icon: 'star' icon: 'star'
}, },
data: this.getAvailableArticles(this.state.fetchedData.articles, undefined) data: this.state.fetchedData.articles !== undefined ?
this.getAvailableArticles(this.state.fetchedData.articles, undefined) : []
}, },
}; };