function ClearableInput()

in react/features/participants-pane/components/web/ClearableInput.js [115:220]
70 lines of code
11 McCabe index (conditional complexity)

function ClearableInput({
    autoFocus = false,
    autoComplete,
    className = '',
    id,
    onChange,
    onSubmit,
    placeholder,
    testId,
    type = 'text',
    value
}: Props) {
    const classes = useStyles();
    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);
    });

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

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

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

    /**
     * Joins the conference on 'Enter'.
     *
     * @param {Event} event - Key down event object.
     * @returns {void}
     */
    const _onKeyDown = useCallback(event => {
        onSubmit && event.key === 'Enter' && onSubmit();
    }, [ onSubmit ]);

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

    return (
        <div className = { `${classes.clearableInput} ${focused ? 'focused' : ''} ${className || ''}` }>
            <input
                autoComplete = { autoComplete }
                autoFocus = { autoFocus }
                className = { classes.input }
                data-testid = { testId ? testId : undefined }
                id = { id }
                onBlur = { _onBlur }
                onChange = { _onChange }
                onFocus = { _onFocus }
                onKeyDown = { _onKeyDown }
                placeholder = { placeholder }
                ref = { inputRef }
                type = { type }
                value = { val } />
            {val !== '' && (
                <button
                    className = { classes.clearButton }
                    onClick = { _clearInput }>
                    <Icon
                        size = { 20 }
                        src = { IconCloseSolid } />
                </button>
            )}
        </div>
    );
}