mattermost-mobile-upstream/app/components/floating_input/floating_text_input_label.tsx

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

// Note: This file has been adapted from the library https://github.com/csath/react-native-reanimated-text-input

import {RUNNING_E2E} from '@env';
import {BottomSheetTextInput} from '@gorhom/bottom-sheet';
import React, {useState, useRef, useImperativeHandle, forwardRef, useMemo, useCallback} from 'react';
import {type LayoutChangeEvent, type NativeSyntheticEvent, type StyleProp, type TargetedEvent, TextInput, type TextInputFocusEventData, type TextInputProps, type TextStyle} from 'react-native';

import {changeOpacity, getKeyboardAppearanceFromTheme, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';

import FloatingInputContainer from './floating_input_container';
import {onExecution} from './utils';

const DEFAULT_INPUT_HEIGHT = 48;

// Expose the input's value to the accessibility tree only in E2E builds so Maestro
// can read the typed value. Gated so real builds are byte-for-byte unchanged.
const isRunningE2e = RUNNING_E2E === 'true';

const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
    input: {
        backgroundColor: 'transparent',
        borderWidth: 0,
        flex: 1,
        paddingHorizontal: 0,
        paddingTop: 0,
        paddingBottom: 0,
        flexDirection: 'row',
        color: theme.centerChannelColor,
        borderColor: changeOpacity(theme.centerChannelColor, 0.16),
        borderRadius: 4,
        ...typography('Body', 200),
        lineHeight: undefined,
    },
}));

export type FloatingTextInputRef = {
    blur: () => void;
    focus: () => void;
    isFocused: () => boolean;
}

type TextInputHandle = Pick<TextInput, 'blur' | 'focus' | 'isFocused'>;

type FloatingTextInputProps = /*TextInputProps &*/ {
    bottomSheetInput?: boolean;
    editable?: boolean;
    endAdornment?: React.ReactNode;
    error?: string;
    errorIcon?: string;
    label: string;
    multiline?: boolean;
    multilineInputHeight?: number;
    onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
    onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
    onLayout?: (e: LayoutChangeEvent) => void;
    placeholder?: string;
    hideErrorIcon?: boolean;
    testID?: string;
    theme: Theme;
    value?: string;
    rawInput?: boolean;
    onChangeText?: TextInputProps['onChangeText'];
    defaultValue?: TextInputProps['defaultValue'];
    autoFocus?: TextInputProps['autoFocus'];
    enablesReturnKeyAutomatically?: TextInputProps['enablesReturnKeyAutomatically'];
    keyboardType?: TextInputProps['keyboardType'];
    onSubmitEditing?: TextInputProps['onSubmitEditing'];
    returnKeyType?: TextInputProps['returnKeyType'];
    secureTextEntry?: TextInputProps['secureTextEntry'];
    blurOnSubmit?: TextInputProps['blurOnSubmit'];
    autoComplete?: TextInputProps['autoComplete'];
    disableFullscreenUI?: TextInputProps['disableFullscreenUI'];
    maxLength?: TextInputProps['maxLength'];
}

const FloatingTextInput = forwardRef<FloatingTextInputRef, FloatingTextInputProps>(({
    bottomSheetInput = false,
    editable = true,
    error,
    endAdornment,
    label = '',
    multiline,
    multilineInputHeight,
    onBlur,
    onFocus,
    onLayout,
    placeholder,
    hideErrorIcon = false,
    testID,
    theme,
    value,
    rawInput = false,
    ...textInputProps
}: FloatingTextInputProps, ref) => {
    const [focused, setIsFocused] = useState(false);
    const focusedLabel = Boolean(focused || Boolean(value) || placeholder);
    const inputRef = useRef<TextInputHandle>(null);
    const styles = getStyleSheet(theme);

    const setInputRef = useCallback((instance: TextInputHandle | null | undefined) => {
        inputRef.current = instance ?? null;
    }, []);

    useImperativeHandle(ref, () => ({
        blur: () => inputRef.current?.blur(),
        focus: () => inputRef.current?.focus(),
        isFocused: () => inputRef.current?.isFocused() || false,
    }), [inputRef]);

    const onTextInputBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => onExecution(e,
        () => {
            setIsFocused(false);
        },
        onBlur,
    ), [onBlur]);

    const onTextInputFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => onExecution(e,
        () => {
            setIsFocused(true);
        },
        onFocus,
    ), [onFocus]);

    const defaultHeight = multiline ? multilineInputHeight || 100 : DEFAULT_INPUT_HEIGHT;
    const combinedTextInputStyle = useMemo(() => {
        const res: StyleProp<TextStyle> = [styles.input];

        if (multiline) {
            const height = multilineInputHeight ? multilineInputHeight - 20 : 80;
            res.push({height, textAlignVertical: 'top'});
        }

        return res;
    }, [styles, multiline, multilineInputHeight]);

    const focus = useCallback(() => {
        inputRef.current?.focus();
    }, []);

    const inputProps: TextInputProps = {
        ...textInputProps,
        editable,
        style: combinedTextInputStyle,
        placeholder,
        placeholderTextColor: changeOpacity(theme.centerChannelColor, 0.64),
        multiline,
        textAlignVertical: 'top',
        value,
        accessibilityValue: isRunningE2e ? {text: value} : undefined,
        onFocus: onTextInputFocus,
        onBlur: onTextInputBlur,
        underlineColorAndroid: 'transparent',
        testID,
        keyboardAppearance: getKeyboardAppearanceFromTheme(theme),
        autoCorrect: !rawInput,
        autoCapitalize: rawInput ? 'none' : undefined,
    };

    return (
        <FloatingInputContainer
            hasValue={Boolean(value)}
            defaultHeight={defaultHeight}
            onLayout={onLayout}
            label={label}
            error={error}
            hideErrorIcon={hideErrorIcon}
            theme={theme}
            focus={focus}
            focused={focused}
            focusedLabel={focusedLabel}
            editable={editable}
            testID={testID || 'floating-text-input-label'}
        >
            {bottomSheetInput ? (
                <BottomSheetTextInput
                    {...inputProps}
                    ref={setInputRef}
                />
            ) : (
                <TextInput
                    {...inputProps}
                    ref={setInputRef}
                />
            )}
            {endAdornment}
        </FloatingInputContainer>
    );
});

FloatingTextInput.displayName = 'FloatingTextInput';

export default FloatingTextInput;