EN · DE · RU · FR · ES

#2651: TextAutoCompletion.jsx

projectforge-webapp/src/components/design/input/autoCompletion/TextAutoCompletion.jsx Typ: JavaScript/React · Rolle: Auto-Vervollständigung · Quelle: projectforge-webapp/src/components/design/input/autoCompletion/TextAutoCompletion.jsx 56 Zeilen · 50 Code · 1 Kommentar · 5 Leerzeichen
React-Komponente zur Auto-Vervollständigung, die ein Eingabefeld mit einer vom Server gespeisten Vorschlags-Dropdown-Liste kombiniert. Unterstützt Textvervollständigung, Tastaturnavigation und kontrollierte Wertverwaltung.

Codestruktur

Importiert von: ../../popper/AdvancedPopperInput, ./index, prop-types, react

Hat PropTypes für: TextAutoCompletion

Quellcode (gekürzt)

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-Verlauf

3685edd6c Update auf React 18 (Work-in-Progress)
253b9f38b Aktualisierung einiger Abhängigkeiten und Behebung von ESLint-Fehlern
f3010d108 ESLint-Fehler behoben
3d8496b1c GitHub #121: TextAutoCompletions unterstützt jetzt autoFocus.
2061b1a1f Work-in-Progress: Neue Benutzer- und Mitarbeiterauswahl