toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[Gekidou MM-47999, MM-48005] Remove unusable modifiers, default team picker to current team (#6709)

Browse source 
* add showMore component only when exceeding 4 modifier elements

* rename variable

* When the user switches teams, default search screen to to that team
This commit is contained in:
Jason Frerich 2022-10-28 08:04:30 -05:00 committed by GitHub
parent 2eb52990ca
commit d26d000ce3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/screens/home/search/initial/modifiers/index.tsx
View file

@ -17,6 +17,7 @@ import ShowMoreButton from './show_more';
const MODIFIER_LABEL_HEIGHT = 48;
const TEAM_PICKER_ICON_SIZE = 32;
const NUM_ITEMS_BEFORE_EXPAND = 4;
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
@ -47,19 +48,23 @@ const getModifiersSectionsData = (intl: IntlShape): ModifierItem[] => {
term: 'In:',
testID: 'search.in_section',
description: formatMessage({id: 'mobile.search.modifier.in', defaultMessage: ' a specific channel'}),
}, {
term: 'On:',
testID: 'search.on_section',
description: formatMessage({id: 'mobile.search.modifier.on', defaultMessage: ' a specific date'}),
}, {
term: 'After:',
testID: 'search.after_section',
description: formatMessage({id: 'mobile.search.modifier.after', defaultMessage: ' after a date'}),
}, {
term: 'Before:',
testID: 'search.before_section',
description: formatMessage({id: 'mobile.search.modifier.before', defaultMessage: ' before a date'}),
}, {
},
// {
// term: 'On:',
// testID: 'search.on_section',
// description: formatMessage({id: 'mobile.search.modifier.on', defaultMessage: ' a specific date'}),
// },
// {
// term: 'After:',
// testID: 'search.after_section',
// description: formatMessage({id: 'mobile.search.modifier.after', defaultMessage: ' after a date'}),
// }, {
// term: 'Before:',
// testID: 'search.before_section',
// description: formatMessage({id: 'mobile.search.modifier.before', defaultMessage: ' before a date'}),
// },
{
term: '-',
testID: 'search.exclude_section',
description: formatMessage({id: 'mobile.search.modifier.exclude', defaultMessage: ' exclude search terms'}),
@ -84,14 +89,14 @@ const Modifiers = ({scrollEnabled, searchValue, setSearchValue, setTeamId, teamI
const intl = useIntl();
const [showMore, setShowMore] = useState(false);
const show = useSharedValue(3 * MODIFIER_LABEL_HEIGHT);
const height = useSharedValue(NUM_ITEMS_BEFORE_EXPAND * MODIFIER_LABEL_HEIGHT);
const data = useMemo(() => getModifiersSectionsData(intl), [intl]);
const timeoutRef = useRef<NodeJS.Timeout | undefined>();
const styles = getStyleFromTheme(theme);
const animatedStyle = useAnimatedStyle(() => ({
width: '100%',
height: withTiming(show.value, {duration: 300}),
height: withTiming(height.value, {duration: 300}),
overflow: 'hidden',
}), []);
@ -99,7 +104,7 @@ const Modifiers = ({scrollEnabled, searchValue, setSearchValue, setTeamId, teamI
const nextShowMore = !showMore;
setShowMore(nextShowMore);
scrollEnabled.value = false;
show.value = (nextShowMore ? data.length : 3) * MODIFIER_LABEL_HEIGHT;
height.value = (nextShowMore ? data.length : NUM_ITEMS_BEFORE_EXPAND) * MODIFIER_LABEL_HEIGHT;
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
@ -146,10 +151,12 @@ const Modifiers = ({scrollEnabled, searchValue, setSearchValue, setTeamId, teamI
<Animated.View style={animatedStyle}>
{data.map((item) => renderModifier(item))}
</Animated.View>
<ShowMoreButton
onPress={handleShowMore}
showMore={showMore}
/>
{data.length > NUM_ITEMS_BEFORE_EXPAND &&
<ShowMoreButton
onPress={handleShowMore}
showMore={showMore}
/>
}
</>
);
};

6
app/screens/home/search/search.tsx
View file

@ -2,7 +2,7 @@
// See LICENSE.txt for license information.
import {useIsFocused, useNavigation} from '@react-navigation/native';
import React, {useCallback, useMemo, useRef, useState} from 'react';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import {useIntl} from 'react-intl';
import {FlatList, LayoutChangeEvent, Platform, StyleSheet, ViewProps} from 'react-native';
import Animated, {useAnimatedStyle, useDerivedValue, withTiming} from 'react-native-reanimated';
@ -99,6 +99,10 @@ const SearchScreen = ({teamId}: Props) => {
const [fileInfos, setFileInfos] = useState<FileInfo[]>(emptyFileResults);
const [fileChannelIds, setFileChannelIds] = useState<string[]>([]);
useEffect(() => {
setSearchTeamId(teamId);
}, [teamId]);
const onSnap = (offset: number, animated = true) => {
scrollRef.current?.scrollToOffset({offset, animated});
};