[Gekidou MM-45521] Remove show results button (#6465)

* - calculate the bottom sheet height dynamically - remove show results button - set the new fitler when select a new item * when the user selects the same filter, just dismiss the bottom sheet, don't fetch the values again * Update app/screens/home/search/results/header.tsx Co-authored-by: Daniel Espino García <larkox@gmail.com> * Use OptionItem instead of MenuItem Co-authored-by: Daniel Espino García <larkox@gmail.com>
2022-07-12 13:05:35 -05:00
parent 8aa0a2490d
commit d015656944
6 changed files with 64 additions and 69 deletions
--- a/app/components/option_item/index.tsx
+++ b/app/components/option_item/index.tsx
@@ -34,6 +34,8 @@ const OptionType = {

 type OptionType = typeof OptionType[keyof typeof OptionType];

+export const ITEM_HEIGHT = 48;
+
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
    return {
        actionContainer: {
@@ -44,7 +46,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
        container: {
            flexDirection: 'row',
            alignItems: 'center',
-            minHeight: 48,
+            minHeight: ITEM_HEIGHT,
        },
        destructive: {
            color: theme.dndIndicator,
--- a/app/screens/bottom_sheet/content.tsx
+++ b/app/screens/bottom_sheet/content.tsx
@@ -23,7 +23,12 @@ type Props = {
    titleSeparator?: boolean;
 }

-export const TITLE_HEIGHT = 38;
+const TITLE_MARGIN_TOP = 4;
+const TITLE_MARGIN_BOTTOM = 12;
+
+export const TITLE_HEIGHT = TITLE_MARGIN_TOP + TITLE_MARGIN_BOTTOM + 30; // typography 600 line height
+export const SEPARATOR_MARGIN = 12;
+export const SEPARATOR_MARGIN_TABLET = 20;

 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
    return {
@@ -31,8 +36,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
            flex: 1,
        },
        titleContainer: {
-            marginTop: 4,
-            marginBottom: 12,
+            marginTop: TITLE_MARGIN_TOP,
+            marginBottom: TITLE_MARGIN_BOTTOM,
        },
        titleText: {
            color: theme.centerChannelColor,
@@ -71,14 +76,14 @@ const BottomSheetContent = ({buttonText, buttonIcon, children, disableButton, on
                </View>
            }
            {titleSeparator &&
-                <View style={[styles.separator, {width: separatorWidth, marginBottom: (isTablet ? 20 : 12)}]}/>
+                <View style={[styles.separator, {width: separatorWidth, marginBottom: (isTablet ? SEPARATOR_MARGIN_TABLET : SEPARATOR_MARGIN)}]}/>
            }
            <>
                {children}
            </>
            {showButton && (
                <>
-                    <View style={[styles.separator, {width: separatorWidth, marginBottom: (isTablet ? 20 : 12)}]}/>
+                    <View style={[styles.separator, {width: separatorWidth, marginBottom: (isTablet ? SEPARATOR_MARGIN_TABLET : SEPARATOR_MARGIN)}]}/>
                    <Button
                        disabled={disableButton}
                        onPress={onPress}
--- a/app/screens/browse_channels/channel_dropdown.tsx
+++ b/app/screens/browse_channels/channel_dropdown.tsx
@@ -11,6 +11,7 @@ import {ITEM_HEIGHT} from '@components/slide_up_panel_item';
 import {useTheme} from '@context/theme';
 import {TITLE_HEIGHT} from '@screens/bottom_sheet/content';
 import {bottomSheet} from '@screens/navigation';
+import {bottomSheetSnapPoint} from '@utils/helpers';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';

@@ -72,7 +73,7 @@ export default function ChannelDropdown({
            items += 1;
        }

-        const itemsSnap = ((items + 1) * ITEM_HEIGHT) + (insets.bottom * 3) + TITLE_HEIGHT;
+        const itemsSnap = bottomSheetSnapPoint(items, ITEM_HEIGHT, insets.bottom) + TITLE_HEIGHT;
        bottomSheet({
            title: intl.formatMessage({id: 'browse_channels.dropdownTitle', defaultMessage: 'Show'}),
            renderContent,
--- a/app/screens/home/search/results/filter.tsx
+++ b/app/screens/home/search/results/filter.tsx
@@ -1,33 +1,25 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.

-import React, {useCallback, useState} from 'react';
+import React, {useCallback} from 'react';
 import {useIntl} from 'react-intl';
 import {View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';

-import CompassIcon from '@components/compass_icon';
-import FormattedText from '@components/formatted_text';
-import MenuItem from '@components/menu_item';
+import OptionItem, {ITEM_HEIGHT} from '@components/option_item';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
 import {t} from '@i18n';
 import BottomSheetContent from '@screens/bottom_sheet/content';
 import {dismissBottomSheet} from '@screens/navigation';
 import {FileFilter, FileFilters} from '@utils/file';
-import {makeStyleSheetFromTheme} from '@utils/theme';
-import {typography} from '@utils/typography';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';

 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
    return {
-        labelContainer: {
-            alignItems: 'center',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-        },
-        menuText: {
-            color: theme.centerChannelColor,
-            ...typography('Body', 200, 'Regular'),
+        divider: {
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
+            height: 1,
        },
    };
 });
@@ -76,6 +68,10 @@ const data: FilterItem[] = [
    },
 ];

+export const NUMBER_FILTER_ITEMS = data.length;
+export const FILTER_ITEM_HEIGHT = ITEM_HEIGHT;
+export const DIVIDERS_HEIGHT = data.length - 1;
+
 type FilterProps = {
    initialFilter: FileFilter;
    setFilter: (filter: FileFilter) => void;
@@ -87,56 +83,31 @@ const Filter = ({initialFilter, setFilter}: FilterProps) => {
    const style = getStyleSheet(theme);
    const isTablet = useIsTablet();

-    const [selectedFilter, setSelectedFilter] = useState<FileFilter>(initialFilter);
-    const disableButton = selectedFilter === initialFilter;
+    const buttonTitle = intl.formatMessage({id: 'screen.search.results.filter.title', defaultMessage: 'Filter by file type'});

-    const renderLabelComponent = useCallback((item: FilterItem) => {
-        return (
-            <View style={style.labelContainer}>
-                <FormattedText
-                    style={style.menuText}
-                    id={item.id}
-                    defaultMessage={item.defaultMessage}
-                />
-                {(selectedFilter === item.filterType) && (
-                    <CompassIcon
-                        style={style.selected}
-                        name={'check'}
-                        size={24}
-                    />
-                )}
-            </View>
-        );
-    }, [selectedFilter, style]);
+    const handleOnPress = useCallback((fileType: FileFilter) => {
+        if (fileType !== initialFilter) {
+            setFilter(fileType);
+        }
+        dismissBottomSheet();
+    }, [initialFilter]);

-    const renderFilterItem = useCallback(({item}: {item: FilterItem}) => {
+    const separator = useCallback(() => <View style={style.divider}/>, [style]);
+
+    const renderFilterItem = useCallback(({item}) => {
        return (
-            <MenuItem
-                labelComponent={renderLabelComponent(item)}
-                onPress={() => {
-                    setSelectedFilter(item.filterType);
-                }}
-                separator={item.separator}
-                testID={item.id}
-                theme={theme}
+            <OptionItem
+                label={intl.formatMessage({id: item.id, defaultMessage: item.defaultMessage})}
+                type={'select'}
+                action={() => handleOnPress(item.filterType)}
+                selected={initialFilter === item.filterType}
            />
        );
-    }, [renderLabelComponent, theme]);
-
-    const handleShowResults = useCallback(() => {
-        setFilter(selectedFilter);
-        dismissBottomSheet();
-    }, [selectedFilter, setFilter]);
-
-    const buttonText = intl.formatMessage({id: 'screen.search.results.filter.show_button', defaultMessage: 'Show results'});
-    const buttonTitle = intl.formatMessage({id: 'screen.search.results.filter.title', defaultMessage: 'Filter by file type'});
+    }, [handleOnPress, initialFilter, theme]);

    return (
        <BottomSheetContent
-            buttonText={buttonText}
-            onPress={handleShowResults}
-            disableButton={disableButton}
-            showButton={true}
+            showButton={false}
            showTitle={!isTablet}
            testID='search.filters'
            title={buttonTitle}
@@ -147,6 +118,7 @@ const Filter = ({initialFilter, setFilter}: FilterProps) => {
                    data={data}
                    renderItem={renderFilterItem}
                    contentContainerStyle={style.contentContainer}
+                    ItemSeparatorComponent={separator}
                />
            </View>
        </BottomSheetContent>
--- a/app/screens/home/search/results/header.tsx
+++ b/app/screens/home/search/results/header.tsx
@@ -1,21 +1,27 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {useIntl} from 'react-intl';
 import {View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';

+import {bottomSheetSnapPoint} from '@app/utils/helpers';
 import Badge from '@components/badge';
 import CompassIcon from '@components/compass_icon';
 import {useTheme} from '@context/theme';
+import {useIsTablet} from '@hooks/device';
+import {SEPARATOR_MARGIN, SEPARATOR_MARGIN_TABLET, TITLE_HEIGHT} from '@screens/bottom_sheet/content';
 import {bottomSheet} from '@screens/navigation';
 import {FileFilter, FileFilters} from '@utils/file';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';

-import Filter from './filter';
+import Filter, {DIVIDERS_HEIGHT, FILTER_ITEM_HEIGHT, NUMBER_FILTER_ITEMS} from './filter';
 import SelectButton from './header_button';

 export type SelectTab = 'files' | 'messages'

+export const HEADER_HEIGHT = 64;
+
 type Props = {
    onTabSelect: (tab: SelectTab) => void;
    onFilterChanged: (filter: FileFilter) => void;
@@ -25,8 +31,6 @@ type Props = {
    numberFiles: number;
 }

-export const HEADER_HEIGHT = 64;
-
 const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
    return {
        flex: {
@@ -63,6 +67,8 @@ const Header = ({
    const theme = useTheme();
    const styles = getStyleFromTheme(theme);
    const intl = useIntl();
+    const {bottom} = useSafeAreaInsets();
+    const isTablet = useIsTablet();

    const messagesText = intl.formatMessage({id: 'screen.search.header.messages', defaultMessage: 'Messages'});
    const filesText = intl.formatMessage({id: 'screen.search.header.files', defaultMessage: 'Files'});
@@ -78,6 +84,16 @@ const Header = ({
        onTabSelect('files');
    }, [onTabSelect]);

+    const snapPoints = useMemo(() => {
+        return [
+            bottomSheetSnapPoint(
+                NUMBER_FILTER_ITEMS,
+                FILTER_ITEM_HEIGHT,
+                bottom,
+            ) + TITLE_HEIGHT + DIVIDERS_HEIGHT + (isTablet ? SEPARATOR_MARGIN_TABLET : SEPARATOR_MARGIN),
+            10];
+    }, []);
+
    const handleFilterPress = useCallback(() => {
        const renderContent = () => {
            return (
@@ -90,7 +106,7 @@ const Header = ({
        bottomSheet({
            closeButtonId: 'close-search-filters',
            renderContent,
-            snapPoints: [700, 10],
+            snapPoints,
            theme,
            title: intl.formatMessage({id: 'mobile.add_team.join_team', defaultMessage: 'Join Another Team'}),
        });
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -669,7 +669,6 @@
  "screen.search.results.filter.documents": "Documents",
  "screen.search.results.filter.images": "Images",
  "screen.search.results.filter.presentations": "Presentations",
-  "screen.search.results.filter.show_button": "Show results",
  "screen.search.results.filter.spreadsheets": "Spreadsheets",
  "screen.search.results.filter.title": "Filter by file type",
  "screen.search.results.filter.videos": "Videos",