EN · DE · RU · FR · ES

#2651: TextAutoCompletion.jsx

projectforge-webapp/src/components/design/input/autoCompletion/TextAutoCompletion.jsx Тип: JavaScript/React · Роль: Автодополнение · Исходник: projectforge-webapp/src/components/design/input/autoCompletion/TextAutoCompletion.jsx 56 строк · 50 кода · 1 комментарий · 5 пустых
React-компонент автодополнения, объединяющий поле ввода с выпадающим списком подсказок от сервера. Поддерживает текстовое дополнение, навигацию с клавиатуры и управляемое управление значением.

Структура кода

Импорты из: ../../popper/AdvancedPopperInput, ./index, prop-types, react

Содержит PropTypes для: TextAutoCompletion

Исходный код (сокращён)

import PropTypes from 'prop-types';
import React from 'react';
import AdvancedPopperInput from '../../popper/AdvancedPopperInput';
import AutoCompletion from './index';

function TextAutoCompletion(
    {
        inputId,
        inputProps,
        onChange,
        onSelect,
        value = '',
        focus = false,
        ...props
    },
) {
    const handleChange = ({ target }) => onChange(target.value);

    const handleSelect = (completion) => {
        if (onSelect) {
            onSelect(completion);
        } else {
            onChange(completion);
        }
    };

    return (
        <AutoCompletion
            /* eslint-disable-next-line react/no-unstable-nested-components */
            input={({ ref, ...otherInputProps }) => (
                <AdvancedPopperInput
                    forwardRef={ref}
                    id={inputId}
                    autoFocus={focus}
                    {...otherInputProps}
                    {...inputProps}
                    onChange={handleChange}
                />
            )}
            onSelect={handleSelect}
            search={value}
            {...props}
        />
    );
}

TextAutoCompletion.propTypes = {
    inputId: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    inputProps: PropTypes.shape({}),
    onSelect: PropTypes.func,
    value: PropTypes.string,
    focus: PropTypes.bool,
};

export default TextAutoCompletion;

История Git

3685edd6c поднятие до react 18 wip
253b9f38b обновление некоторых зависимостей и исправление ошибок eslint
f3010d108 исправление eslint
3d8496b1c GitHub #121: TextAutoCompletions теперь поддерживает autoFocus.
2061b1a1f wip: новый выбор пользователя и сотрудника