vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

fix: make search fields take whole header

Browse source
This commit is contained in:
Arnaud Vergnet 2021-09-12 22:38:52 +02:00
parent 8bacddc7b5
commit 2c11addf40
3 changed files with 79 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/screens/Amicale/Clubs/ClubListScreen.tsx
View file

@ -93,7 +93,7 @@ function ClubListScreen() {
headerTitleContainerStyle:
Platform.OS === 'ios'
? { marginHorizontal: 0, width: '70%' }
: { marginHorizontal: 0, right: 50, left: 50 },
: { width: '100%' },
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [navigation]);

19
src/screens/Planex/GroupSelectionScreen.tsx
View file

@ -81,6 +81,15 @@ function GroupSelectionScreen() {
const favoriteGroups = getFavoriteGroups();
useLayoutEffect(() => {
const getSearchBar = () => {
return (
// @ts-ignore
<Searchbar
placeholder={i18n.t('screens.proximo.search')}
onChangeText={setCurrentSearchString}
/>
);
};
navigation.setOptions({
headerTitle: getSearchBar,
headerBackTitleVisible: false,
@ -91,16 +100,6 @@ function GroupSelectionScreen() {
});
}, [navigation]);
const getSearchBar = () => {
return (
// @ts-ignore
<Searchbar
placeholder={i18n.t('screens.proximo.search')}
onChangeText={setCurrentSearchString}
/>
);
};
/**
* Gets a render item for the given article
*

163
src/screens/Services/Proximo/ProximoListScreen.tsx
View file

@ -120,6 +120,7 @@ function ProximoListScreen(props: Props) {
const theme = useTheme();
const { articles, setArticles } = useCachedProximoArticles();
const modalRef = useRef<Modalize>(null);
const navParams = props.route.params;
const [currentSearchString, setCurrentSearchString] = useState('');
const [currentSortMode, setCurrentSortMode] = useState(2);
@ -130,6 +131,70 @@ function ProximoListScreen(props: Props) {
const sortModes = [sortPrice, sortPriceReverse, sortName, sortNameReverse];
useLayoutEffect(() => {
const getSearchBar = () => {
return (
// @ts-ignore
<Searchbar
placeholder={i18n.t('screens.proximo.search')}
onChangeText={setCurrentSearchString}
autoFocus={navParams.shouldFocusSearchBar}
/>
);
};
const getModalSortMenu = () => {
return (
<View style={styles.modalContainer}>
<Title style={styles.sortTitle}>
{i18n.t('screens.proximo.sortOrder')}
</Title>
<RadioButton.Group
onValueChange={setSortMode}
value={currentSortMode.toString()}
>
<RadioButton.Item
label={i18n.t('screens.proximo.sortPrice')}
value={'0'}
/>
<RadioButton.Item
label={i18n.t('screens.proximo.sortPriceReverse')}
value={'1'}
/>
<RadioButton.Item
label={i18n.t('screens.proximo.sortName')}
value={'2'}
/>
<RadioButton.Item
label={i18n.t('screens.proximo.sortNameReverse')}
value={'3'}
/>
</RadioButton.Group>
</View>
);
};
const setSortMode = (mode: string) => {
const currentMode = parseInt(mode, 10);
setCurrentSortMode(currentMode);
if (modalRef.current && currentMode !== currentSortMode) {
modalRef.current.close();
}
};
const getSortMenuButton = () => {
return (
<MaterialHeaderButtons>
<Item
title="main"
iconName="sort"
onPress={() => {
setModalCurrentDisplayItem(getModalSortMenu());
if (modalRef.current) {
modalRef.current.open();
}
}}
/>
</MaterialHeaderButtons>
);
};
navigation.setOptions({
headerRight: getSortMenuButton,
headerTitle: getSearchBar,
@ -137,21 +202,9 @@ function ProximoListScreen(props: Props) {
headerTitleContainerStyle:
Platform.OS === 'ios'
? { marginHorizontal: 0, width: '70%' }
: { marginHorizontal: 0, right: 50, left: 50 },
: { width: '100%' },
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [navigation, currentSortMode]);
/**
* Callback used when clicking on the sort menu button.
* It will open the modal to show a sort selection
*/
const onSortMenuPress = () => {
setModalCurrentDisplayItem(getModalSortMenu());
if (modalRef.current) {
modalRef.current.open();
}
};
}, [navigation, currentSortMode, navParams.shouldFocusSearchBar]);
/**
* Callback used when clicking an article in the list.
@ -166,19 +219,6 @@ function ProximoListScreen(props: Props) {
}
};
/**
* Sets the current sort mode.
*
* @param mode The number representing the mode
*/
const setSortMode = (mode: string) => {
const currentMode = parseInt(mode, 10);
setCurrentSortMode(currentMode);
if (modalRef.current && currentMode !== currentSortMode) {
modalRef.current.close();
}
};
/**
* Gets a color depending on the quantity available
*
@ -197,35 +237,6 @@ function ProximoListScreen(props: Props) {
return color;
};
/**
* Gets the sort menu header button
*
* @return {*}
*/
const getSortMenuButton = () => {
return (
<MaterialHeaderButtons>
<Item title="main" iconName="sort" onPress={onSortMenuPress} />
</MaterialHeaderButtons>
);
};
/**
* Gets the header search bar
*
* @return {*}
*/
const getSearchBar = () => {
return (
// @ts-ignore
<Searchbar
placeholder={i18n.t('screens.proximo.search')}
onChangeText={setCurrentSearchString}
autoFocus={props.route.params.shouldFocusSearchBar}
/>
);
};
/**
* Gets the modal content depending on the given article
*
@ -262,42 +273,6 @@ function ProximoListScreen(props: Props) {
);
};
/**
* Gets the modal content to display a sort menu
*
* @return {*}
*/
const getModalSortMenu = () => {
return (
<View style={styles.modalContainer}>
<Title style={styles.sortTitle}>
{i18n.t('screens.proximo.sortOrder')}
</Title>
<RadioButton.Group
onValueChange={setSortMode}
value={currentSortMode.toString()}
>
<RadioButton.Item
label={i18n.t('screens.proximo.sortPrice')}
value={'0'}
/>
<RadioButton.Item
label={i18n.t('screens.proximo.sortPriceReverse')}
value={'1'}
/>
<RadioButton.Item
label={i18n.t('screens.proximo.sortName')}
value={'2'}
/>
<RadioButton.Item
label={i18n.t('screens.proximo.sortNameReverse')}
value={'3'}
/>
</RadioButton.Group>
</View>
);
};
/**
* Gets a render item for the given article
*
@ -341,8 +316,8 @@ function ProximoListScreen(props: Props) {
data: data
.filter(
(d) =>
props.route.params.category === -1 ||
props.route.params.category === d.category_id
navParams.category === -1 ||
navParams.category === d.category_id
)
.sort(sortModes[currentSortMode]),
keyExtractor: keyExtractor,