design-react-kit/dist/Autocomplete/Autocomplete.js

Componenti React per Bootstrap 5

import React, { useEffect } from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore non ci sono i types
import BaseAutocomplete from 'accessible-autocomplete/react';
const tAssistiveHintDefault = () => 'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento';
const tNoResultsDefault = () => 'Nessun risultato trovato';
const tStatusQueryTooShortDefault = (minQueryLength) => `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`;
const tStatusNoResultsDefault = () => 'Nessun risultato di ricerca';
const tStatusSelectedOptionDefault = (selectedOption, length, index) => `${selectedOption} ${index + 1} di ${length} è sottolineato`;
const tStatusResultsDefault = (length, contentSelectedOption) => {
    const words = {
        result: length === 1 ? 'risultato' : 'risultati',
        is: length === 1 ? 'è' : 'sono',
        available: length === 1 ? 'disponibile' : 'disponibili'
    };
    return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`;
};
export const Autocomplete = ({ tAssistiveHint = tAssistiveHintDefault, tNoResults = tNoResultsDefault, tStatusQueryTooShort = tStatusQueryTooShortDefault, tStatusNoResults = tStatusNoResultsDefault, tStatusSelectedOption = tStatusSelectedOptionDefault, tStatusResults = tStatusResultsDefault, placeholder = '', defaultValue = '', displayMenu = 'inline', source, validationText, onConfirm, ...attributes }) => {
    const { id, valid } = attributes;
    const validityCheck = valid === true || valid === false;
    useEffect(() => {
        const inputElement = document.getElementById(id);
        const labelElement = inputElement?.parentElement?.parentElement?.getElementsByTagName('label')[0];
        if (inputElement.value !== '') {
            labelElement?.classList.add('active');
        }
        inputElement?.addEventListener('focus', () => {
            labelElement?.classList.add('active');
        });
        inputElement?.addEventListener('blur', () => {
            if (inputElement.value === '') {
                labelElement?.classList.remove('active');
            }
            if (onConfirm) {
                onConfirm(inputElement.value);
            }
        });
    }, [id]);
    return (React.createElement(React.Fragment, null,
        React.createElement("label", { htmlFor: attributes.id }, attributes.label),
        React.createElement(BaseAutocomplete, { source: source, placeholder: placeholder, defaultValue: defaultValue, displayMenu: displayMenu, tAssistiveHint: tAssistiveHint, tNoResults: tNoResults, tStatusQueryTooShort: tStatusQueryTooShort, tStatusNoResults: tStatusNoResults, tStatusSelectedOption: tStatusSelectedOption, tStatusResults: tStatusResults, onConfirm: onConfirm, inputClasses: `form-control ${validityCheck && (valid === false ? 'is-invalid' : 'just-validate-success-field')}`, showNoOptionsFound: true, hintClasses: 'app-hint', autoselect: false, showAllValues: false, templates: undefined, confirmOnBlur: false, menuAttributes: null, menuClasses: null, ...attributes }),
        React.createElement("div", { className: 'form-feedback just-validate-error-label form-text form-feedback just-validate-error-label' }, !valid && validationText)));
};
//# sourceMappingURL=Autocomplete.js.map