[Gekidou MM-45552] Replace Recent Search Item From MenuItem To OptionItem (#6480)

app/components/option_item/index.tsx

@@ -5,25 +5,32 @@ import React, {useCallback, useMemo} from 'react';
 import {Platform, StyleProp, Switch, Text, TextStyle, TouchableOpacity, View, ViewStyle} from 'react-native';
 
 import CompassIcon from '@components/compass_icon';
+import TouchableWithFeedback from '@components/touchable_with_feedback';
 import {useTheme} from '@context/theme';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
 import RadioItem, {RadioItemProps} from './radio_item';
 
-const OptionType = {
+const TouchableOptionTypes = {
     ARROW: 'arrow',
     DEFAULT: 'default',
-    NONE: 'none',
     RADIO: 'radio',
+    REMOVE: 'remove',
     SELECT: 'select',
+};
+
+const OptionType = {
+    NONE: 'none',
     TOGGLE: 'toggle',
+    ...TouchableOptionTypes,
 } as const;
 
 type OptionType = typeof OptionType[keyof typeof OptionType];
 
 export const ITEM_HEIGHT = 48;
 
+const hitSlop = {top: 11, bottom: 11, left: 11, right: 11};
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
         actionContainer: {
@@ -75,6 +82,13 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             color: theme.centerChannelColor,
             ...typography('Body', 200),
         },
+        removeContainer: {
+            flex: 1,
+            alignItems: 'flex-end',
+            color: theme.centerChannelColor,
+            marginRight: 20,
+            ...typography('Body', 200),
+        },
         row: {
             flex: 1,
             flexDirection: 'row',
@@ -91,6 +105,7 @@ export type OptionItemProps = {
     info?: string;
     inline?: boolean;
     label: string;
+    onRemove?: () => void;
     optionDescriptionTextStyle?: StyleProp<TextStyle>;
     optionLabelTextStyle?: StyleProp<TextStyle>;
     radioItemProps?: Partial<RadioItemProps>;
@@ -99,6 +114,7 @@ export type OptionItemProps = {
     type: OptionType;
     value?: string;
 }
+
 const OptionItem = ({
     action,
     containerStyle,
@@ -108,6 +124,7 @@ const OptionItem = ({
     info,
     inline = false,
     label,
+    onRemove,
     optionDescriptionTextStyle,
     optionLabelTextStyle,
     radioItemProps,
@@ -182,6 +199,21 @@ const OptionItem = ({
                 size={24}
             />
         );
+    } else if (type === OptionType.REMOVE) {
+        actionComponent = (
+            <TouchableWithFeedback
+                hitSlop={hitSlop}
+                onPress={onRemove}
+                style={[styles.iconContainer]}
+                type='opacity'
+            >
+                <CompassIcon
+                    name={'close'}
+                    size={18}
+                    color={changeOpacity(theme.centerChannelColor, 0.64)}
+                />
+            </TouchableWithFeedback>
+        );
     }
 
     const onPress = useCallback(() => {
@@ -237,7 +269,7 @@ const OptionItem = ({
         </View>
     );
 
-    if (type === OptionType.DEFAULT || type === OptionType.SELECT || type === OptionType.ARROW || type === OptionType.RADIO) {
+    if (Object.values(TouchableOptionTypes).includes(type)) {
         return (
             <TouchableOpacity onPress={onPress}>
                 {component}

app/screens/home/search/initial/recent_searches/recent_item.tsx

@@ -2,41 +2,18 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
+import {StyleSheet} from 'react-native';
 
 import {removeSearchFromTeamSearchHistory} from '@actions/local/team';
-import CompassIcon from '@components/compass_icon';
-import MenuItem from '@components/menu_item';
+import OptionItem from '@components/option_item';
 import {useServerUrl} from '@context/server';
-import {useTheme} from '@context/theme';
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
-import {typography} from '@utils/typography';
 
 import type TeamSearchHistoryModel from '@typings/database/models/servers/team_search_history';
 
-const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
-    return {
-        container: {
-            marginVertical: -16,
-            paddingLeft: 20,
-            paddingRight: 6,
-            alignItems: 'center',
-            height: 48,
-            flexDirection: 'row',
-        },
-        remove: {
-            height: 40,
-            width: 40,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        term: {
-            flex: 1,
-            marginLeft: 16,
-            color: theme.centerChannelColor,
-            ...typography('Body', 200, 'Regular'),
-        },
-    };
+const styles = StyleSheet.create({
+    container: {
+        marginLeft: 20,
+    },
 });
 
 type Props = {
@@ -45,9 +22,6 @@ type Props = {
 }
 
 const RecentItem = ({item, setRecentValue}: Props) => {
-    const theme = useTheme();
-    const style = getStyleFromTheme(theme);
-    const testID = 'search.recent_item';
     const serverUrl = useServerUrl();
 
     const handlePress = useCallback(() => {
@@ -59,31 +33,15 @@ const RecentItem = ({item, setRecentValue}: Props) => {
     }, [item.id, serverUrl]);
 
     return (
-        <MenuItem
-            testID={testID}
-            onPress={handlePress}
-            labelComponent={
-                <View style={style.container}>
-                    <CompassIcon
-                        name='clock-outline'
-                        size={24}
-                        color={changeOpacity(theme.centerChannelColor, 0.56)}
-                    />
-                    <Text style={style.term}>{item.term}</Text>
-                    <TouchableOpacity
-                        onPress={handleRemove}
-                        style={style.remove}
-                        testID={`${testID}.remove.button`}
-                    >
-                        <CompassIcon
-                            name='close'
-                            size={18}
-                            color={changeOpacity(theme.centerChannelColor, 0.64)}
-                        />
-                    </TouchableOpacity>
-                </View>
-            }
-            separator={false}
+        <OptionItem
+            action={handlePress}
+            icon={'clock-outline'}
+            inline={true}
+            label={item.term}
+            onRemove={handleRemove}
+            testID={'search.recent_item'}
+            type='remove'
+            containerStyle={styles.container}
         />
     );
 };