mattermost-mobile-upstream/app/components/slide_up_panel_item/index.tsx

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import {type ImageSource, type ImageStyle} from 'expo-image';
import React from 'react';
import {type StyleProp, Text, type TextStyle, TouchableHighlight, View, type ViewStyle} from 'react-native';

import CompassIcon, {type CompassIconName} from '@components/compass_icon';
import ExpoImage from '@components/expo_image';
import {useTheme} from '@context/theme';
import {usePreventDoubleTap} from '@hooks/utils';
import {urlSafeBase64Encode} from '@utils/security';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
import {isValidUrl} from '@utils/url';

type SlideUpPanelProps = {
    destructive?: boolean;
    leftIcon?: CompassIconName | ImageSource;
    leftImageStyles?: StyleProp<ImageStyle>;
    leftIconStyles?: StyleProp<TextStyle>;
    rightIcon?: CompassIconName | ImageSource;
    rightImageStyles?: StyleProp<ImageStyle>;
    rightIconStyles?: StyleProp<TextStyle>;
    onPress: () => void;
    textStyles?: TextStyle;
    testID?: string;
    text: string;
}

export const ITEM_HEIGHT = 48;

const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
    return {
        container: {
            height: ITEM_HEIGHT,
            marginHorizontal: -20,
            paddingHorizontal: 20,
        },
        destructive: {
            color: theme.dndIndicator,
        },
        row: {
            width: '100%',
            flexDirection: 'row',
        },
        iconContainer: {
            height: ITEM_HEIGHT,
            justifyContent: 'center',
            marginRight: 10,
        },
        noIconContainer: {
            height: ITEM_HEIGHT,
            width: 18,
        },
        icon: {
            color: changeOpacity(theme.centerChannelColor, 0.56),
        },
        textContainer: {
            justifyContent: 'center',
            flex: 1,
            height: ITEM_HEIGHT,
            marginRight: 5,
        },
        text: {
            color: theme.centerChannelColor,
            ...typography('Body', 200, 'Regular'),
        },
    };
});

const SlideUpPanelItem = ({
    destructive = false,
    leftIcon,
    leftImageStyles,
    leftIconStyles,
    rightIcon,
    rightImageStyles,
    rightIconStyles,
    onPress,
    testID,
    text,
    textStyles,
}: SlideUpPanelProps) => {
    const theme = useTheme();
    const style = getStyleSheet(theme);

    const {image: leftImage, iconStyle: leftIconStyle} = useImageAndStyle(leftIcon, leftImageStyles, leftIconStyles, destructive);
    const {image: rightImage, iconStyle: rightIconStyle} = useImageAndStyle(rightIcon, rightImageStyles, rightIconStyles, destructive);

    const handleOnPress = usePreventDoubleTap(onPress);

    // The row View gets collapsable={false} so it stays a real native view. It only has
    // layout props, so Fabric flattens it away until TouchableHighlight applies its
    // pressed opacity, at which point Fabric materialises the row and moves the text into
    // it, then flattens it again on release. On Android that reparenting of a
    // ReactTextView mid-press races the sheet's own mounting and throws
    // "addViewAt: cannot insert view: View already has a parent", which red-boxes the app
    // (CI 34185558418: browse-channels dropdown, plus menu, failed-post retry, set-status;
    // reproduced locally on the first tap). A view that is always a host view gets a plain
    // opacity update instead of a reparent. No visual change.
    return (
        <TouchableHighlight
            onPress={handleOnPress}
            style={style.container}
            testID={testID}
            underlayColor={changeOpacity(theme.buttonBg, 0.08)}
        >
            <View
                style={style.row}
                collapsable={false}
            >
                {Boolean(leftImage) &&
                    <View style={leftIconStyle}>{leftImage}</View>
                }
                <View style={style.textContainer}>
                    <Text style={[style.text, destructive && style.destructive, textStyles]}>{text}</Text>
                </View>
                {Boolean(rightImage) &&
                    <View style={rightIconStyle}>{rightImage}</View>
                }
            </View>
        </TouchableHighlight>
    );
};

const useImageAndStyle = (icon: CompassIconName | ImageSource | undefined, imageStyles: StyleProp<ImageStyle>, iconStyles: StyleProp<TextStyle>, destructive: boolean) => {
    const theme = useTheme();
    const style = getStyleSheet(theme);

    let image;
    let iconStyle: Array<StyleProp<ViewStyle>> = [style.iconContainer];
    if (icon) {
        if (typeof icon === 'object') {
            if (icon.uri && isValidUrl(icon.uri)) {
                const imageStyle: StyleProp<ImageStyle> = [imageStyles];
                imageStyle.push({width: 24, height: 24});
                image = (
                    <ExpoImage
                        id={`slide-up-panel-item-${urlSafeBase64Encode(icon.uri)}`}
                        source={icon}
                        style={imageStyle}
                    />
                );
            } else {
                iconStyle = [style.noIconContainer];
            }
        } else {
            const compassIconStyle = [style.icon, iconStyles];
            if (destructive) {
                compassIconStyle.push(style.destructive);
            }
            image = (
                <CompassIcon
                    name={icon}
                    size={24}
                    style={compassIconStyle}
                />
            );
        }
    }

    return {image, iconStyle};
};

export default SlideUpPanelItem;