EN · DE · RU · FR · ES

#2651: TextAutoCompletion.jsx

projectforge-webapp/src/components/design/input/autoCompletion/TextAutoCompletion.jsx Tipo: JavaScript/React · Rol: Autocompletado · Fuente: projectforge-webapp/src/components/design/input/autoCompletion/TextAutoCompletion.jsx 56 líneas · 50 código · 1 comentario · 5 en blanco
Componente de autocompletado de React que combina un campo de entrada con un menú desplegable de sugerencias proporcionadas por el servidor. Admite completado de texto, navegación por teclado y gestión controlada del valor.

Estructura del código

Importaciones de: ../../popper/AdvancedPopperInput, ./index, prop-types, react

Tiene PropTypes para: TextAutoCompletion

Código fuente (resumido)

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;

Historial de Git

3685edd6c actualización a react 18 wip
253b9f38b actualización de algunas dependencias y corrección de errores de eslint
f3010d108 corrección de eslint
3d8496b1c GitHub #121: TextAutoCompletions ahora soporta autoFocus.
2061b1a1f wip: nuevo selector de usuario y empleado