function ClearableInput()

in react/features/participants-pane/components/native/ClearableInput.js [85:193]
78 lines of code
11 McCabe index (conditional complexity)

function ClearableInput({
    autoFocus = false,
    customStyles = {},
    onBlur,
    onChange,
    onFocus,
    onSubmit,
    placeholder,
    placeholderColor,
    prefixComponent,
    returnKeyType = 'search',
    selectionColor,
    theme,
    value
}: Props) {
    const [ val, setVal ] = useState(value || '');
    const [ focused, setFocused ] = useState(false);
    const inputRef = React.createRef();

    useEffect(() => {
        if (value && value !== val) {
            setVal(value);
        }
    }, [ value ]);


    /**
     * Callback for the onBlur event of the field.
     *
     * @returns {void}
     */
    const _onBlur = useCallback(() => {
        setFocused(false);

        onBlur && onBlur();
    }, [ onBlur ]);

    /**
     * Callback for the onChange event of the field.
     *
     * @param {Object} evt - The static event.
     * @returns {void}
     */
    const _onChange = useCallback(evt => {
        const { nativeEvent: { text } } = evt;

        setVal(text);
        onChange && onChange(text);
    }, [ onChange ]);

    /**
     * Callback for the onFocus event of the field.
     *
     * @returns {void}
     */
    const _onFocus = useCallback(() => {
        setFocused(true);

        onFocus && onFocus();
    }, [ onFocus ]);

    /**
     * Clears the input.
     *
     * @returns {void}
     */
    const _clearInput = useCallback(() => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
        setVal('');
        onChange && onChange('');
    }, [ onChange ]);

    return (
        <View
            style = { [
                styles.clearableInput,
                focused ? styles.clearableInputFocus : {},
                customStyles?.wrapper
            ] }>
            {prefixComponent}
            <TextInput
                autoCorrect = { false }
                autoFocus = { autoFocus }
                onBlur = { _onBlur }
                onChange = { _onChange }
                onFocus = { _onFocus }
                onSubmitEditing = { onSubmit }
                placeholder = { placeholder }
                placeholderTextColor = { placeholderColor ?? theme.palette.text01 }
                ref = { inputRef }
                returnKeyType = { returnKeyType }
                selectionColor = { selectionColor }
                style = { [ styles.clearableInputTextInput, customStyles?.input ] }
                value = { val } />
            {val !== '' && (
                <TouchableOpacity
                    onPress = { _clearInput }
                    style = { [ styles.clearButton, customStyles?.clearButton ] }>
                    <Icon
                        size = { 22 }
                        src = { IconCloseSolid }
                        style = { [ styles.clearIcon, customStyles?.clearIcon ] } />
                </TouchableOpacity>
            )}
        </View>
    );
}