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

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

/* eslint-disable react/prop-types */
// We disable the prop types check here as forwardRef & typescript has a bug

import {SearchBar} from '@rneui/base';
import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import {useIntl} from 'react-intl';
import {type ActivityIndicatorProps, Keyboard, type NativeSyntheticEvent, Platform, type StyleProp, TextInput, type TextInputFocusEventData, type TextInputProps, type TextStyle, type TouchableOpacityProps, type ViewStyle} from 'react-native';

import CompassIcon from '@components/compass_icon';
import {SEARCH_INPUT_HEIGHT} from '@constants/view';
import {useTheme} from '@context/theme';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';

export type SearchProps = TextInputProps & {
    cancelIcon?: React.ReactElement;
    cancelButtonProps?: Partial<TouchableOpacityProps> & {
        buttonStyle?: StyleProp<ViewStyle>;
        buttonTextStyle?: StyleProp<TextStyle>;
        color?: string;
        buttonDisabledStyle?: StyleProp<ViewStyle>;
        buttonDisabledTextStyle?: StyleProp<ViewStyle>;
    };
    cancelButtonTitle?: string;
    clearIcon?: React.ReactElement;
    clearIconColor?: string;
    containerStyle?: StyleProp<ViewStyle>;
    inputContainerStyle?: StyleProp<ViewStyle>;
    inputStyle?: StyleProp<TextStyle>;
    leftIconContainerStyle?: StyleProp<ViewStyle>;
    loadingProps?: ActivityIndicatorProps;
    onCancel?(): void;
    onClear?(): void;
    rightIconContainerStyle?: StyleProp<ViewStyle>;
    searchIcon?: React.ReactElement;
    searchIconColor?: string;
    selectionColor?: string;
    showCancel?: boolean;
    showLoading?: boolean;
};

type Selection = {start: number; end: number};

export type SearchRef = {
    blur: () => void;
    cancel: () => void;
    clear: () => void;
    focus: () => void;
    setCaretPosition(selection: Selection): void;
}

const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
    containerStyle: {
        backgroundColor: undefined,
        height: undefined,
        paddingTop: 0,
        paddingBottom: 0,
    },
    inputContainerStyle: {
        backgroundColor: changeOpacity(theme.centerChannelColor, 0.12),
        borderRadius: 8,
        height: SEARCH_INPUT_HEIGHT,
        marginLeft: 0,

        // RNEUI iOS SearchBar flattens inputContainerStyle last and sets
        // marginRight to the Cancel width while focused. Omit the key on iOS
        // (do not set undefined) or flatten overwrites that width and the
        // clear icon overlaps Cancel. See inputContainerUnfocused for how the
        // resting margin is restored.
        ...Platform.select({android: {marginRight: 0}, default: {}}),
    },

    // While unfocused there is no Cancel button to make room for, so pin the
    // margin back to 0 to match marginLeft. Without this the bar falls back to
    // RNEUI's own inputContainer marginRight of 8 and sits asymmetrically.
    // Applied conditionally so the focused state keeps RNEUI's cancel width.
    inputContainerUnfocused: {
        marginRight: 0,
    },
    inputStyle: {
        color: theme.centerChannelColor,
        marginLeft: Platform.select({ios: 6, android: 14}),
        top: Platform.select({android: 1}),
        ...typography('Body', 200, 'Regular'),
        lineHeight: undefined,
    },
}));

const Search = forwardRef<SearchRef, SearchProps>((props: SearchProps, ref) => {
    const intl = useIntl();
    const theme = useTheme();
    const styles = getStyleSheet(theme);
    const searchRef = useRef<TextInput | null>(null);
    const [value, setValue] = useState(props.defaultValue || props.value || '');
    const [hasFocus, setHasFocus] = useState(false);
    const searchClearButtonTestID = `${props.testID}.search.clear.button`;
    const searchCancelButtonTestID = `${props.testID}.search.cancel.button`;
    const searchInputTestID = `${props.testID}.search.input`;

    const onCancelProp = props.onCancel;
    const onClearProp = props.onClear;
    const onChangeTextProp = props.onChangeText;
    const onCancel = useCallback(() => {
        Keyboard.dismiss();
        setValue('');
        onCancelProp?.();
    }, [onCancelProp]);

    const onClear = useCallback(() => {
        setValue('');
        onClearProp?.();
    }, [onClearProp]);

    const onChangeText = useCallback((text: string) => {
        setValue(text);
        onChangeTextProp?.(text);
    }, [onChangeTextProp]);

    // Focus is tracked only to decide the resting marginRight (see styles).
    // RNEUI wraps its own focus handling in LayoutAnimation.configureNext, and
    // this update batches into that same commit, so the change still animates.
    const onFocusProp = props.onFocus;
    const onBlurProp = props.onBlur;

    const onFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
        setHasFocus(true);
        onFocusProp?.(e);
    }, [onFocusProp]);

    const onBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
        setHasFocus(false);
        onBlurProp?.(e);
    }, [onBlurProp]);

    const cancelButtonProps = useMemo(() => ({
        buttonTextStyle: {
            color: changeOpacity(theme.centerChannelColor, 0.72),
            ...typography('Body', 100, 'Regular'),
        },
    }), [theme]);

    useEffect(() => {
        setValue(props.defaultValue || props.value || '');
    }, [props.defaultValue, props.value]);

    const clearIcon = (
        <CompassIcon
            color={changeOpacity(props.clearIconColor || theme.centerChannelColor, Platform.select({android: 0.56, default: 0.72}))}
            name={Platform.select({android: 'close', default: 'close-circle'})}
            onPress={searchRef.current?.clear}
            size={Platform.select({android: 24, default: 18})}
            testID={searchClearButtonTestID}
        />
    );

    const searchIcon = (
        <CompassIcon
            color={changeOpacity(props.searchIconColor || theme.centerChannelColor, Platform.select({android: 0.56, default: 0.72}))}
            name='magnify'
            onPress={searchRef.current?.focus}
            size={24}
        />
    );

    const cancelIcon = (
        <CompassIcon
            color={changeOpacity(props.cancelButtonProps?.color || theme.centerChannelColor, Platform.select({android: 0.56, default: 0.72}))}
            name='arrow-left'
            onPress={onCancel}
            size={24}
            testID={searchCancelButtonTestID}
        />
    );

    useImperativeHandle(ref, () => ({
        blur: () => {
            searchRef.current?.blur();
        },
        cancel: () => {
            // @ts-expect-error cancel not in TextInput type but exists at runtime
            searchRef.current?.cancel();
        },
        clear: () => {
            searchRef.current?.clear();
        },
        focus: () => {
            searchRef.current?.focus();
        },
        setCaretPosition: (nativeProps: Selection) => {
            searchRef.current?.setSelection(nativeProps.start, nativeProps.end);
        },
    }), [searchRef]);

    return (
        <SearchBar
            {...props}
            cancelButtonProps={props.cancelButtonProps || cancelButtonProps}
            cancelButtonTitle={props.cancelButtonTitle || intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
            cancelIcon={cancelIcon}
            clearIcon={clearIcon}
            containerStyle={[styles.containerStyle, props.containerStyle]}
            inputContainerStyle={[
                styles.inputContainerStyle,
                Platform.OS === 'ios' && !hasFocus && styles.inputContainerUnfocused,
                props.inputContainerStyle,
            ]}
            inputStyle={[styles.inputStyle, props.inputStyle]}
            returnKeyType='search'
            onCancel={onCancel}
            onClear={onClear}
            onChangeText={onChangeText}
            onFocus={onFocus}
            onBlur={onBlur}
            placeholder={props.placeholder || intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
            placeholderTextColor={props.placeholderTextColor || changeOpacity(theme.centerChannelColor, Platform.select({android: 0.56, default: 0.72}))}
            platform={Platform.select({android: 'android', default: 'ios'})}

            // @ts-expect-error legacy ref
            ref={searchRef}
            searchIcon={searchIcon}
            selectionColor={Platform.select({android: changeOpacity(props.selectionColor || theme.centerChannelColor, 0.24), default: props.selectionColor || theme.centerChannelColor})}
            testID={searchInputTestID}
            value={value}
        />
    );
});

Search.displayName = 'SeachBar';

export default Search;