feat: new autocomplete component with italian default messages

italia · Dec 3, 2024 · b076b91 · b076b91
1 parent bd9ddba
commit b076b91
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 5 deletions.
diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx
@@ -0,0 +1,80 @@
+import React, { FC} from 'react';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore non ci sono i types
+import BaseAutocomplete from 'accessible-autocomplete/react'; // Reference to https://www.npmjs.com/package/accessible-autocomplete
+
+export interface AutocompleteAttributes {
+    /** Identificativo */
+    id?: string;
+    /** Valori chiave - valore all'interno della select */
+    source: { value: string; label: string }[];
+    /** Placeholder (default: ``) */
+    placeholder?: string;
+    /** Valore di default (default: ``) */
+    defaultValue?: string;
+    /** Modalità display menu (default: `inline`) */
+    displayMenu?: string;
+    /** Funzione ritornante stringa in caso di nessun risultato */
+    tNoResults?: () => string;
+    /** Funzione ritornante stringa di suggerimento */
+    tAssistiveHint?: () => string;
+    /** Funzione ritornante stringa se la query è troppo corta */
+    tStatusQueryTooShort?: () => string;
+    /** Funzione ritornante stringa se non ci sono risultati di ricerca */
+    tStatusNoResults?: () => string;
+    /** Funzione ritornante stringa che identifica l'opzione selezionata */
+    tStatusSelectedOption?: () => string;
+    /** Funzione ritornante stringa che identifica i risultati */
+    tStatusResults?: () => string;
+    /** Classi aggiuntive da usare per il componente Button */
+    className?: string;
+    testId?: string;
+}
+
+
+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: number) => `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`
+const tStatusNoResultsDefault = () => 'Nessun risultato di ricerca'
+const tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) => `${selectedOption} ${index + 1} di ${length} è sottolineato`
+const tStatusResultsDefault = (length: number, contentSelectedOption: number) => {
+        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: FC<AutocompleteAttributes>  = ({
+    tAssistiveHint = tAssistiveHintDefault,
+    tNoResults = tNoResultsDefault,
+    tStatusQueryTooShort = tStatusQueryTooShortDefault,
+    tStatusNoResults = tStatusNoResultsDefault,
+    tStatusSelectedOption = tStatusSelectedOptionDefault,
+    tStatusResults = tStatusResultsDefault,
+    placeholder = '',
+    defaultValue = '',
+    displayMenu = 'inline',
+    source,
+    ...attributes
+  }) => {
+
+    return <BaseAutocomplete 
+        id='autocomplete'
+        source={source}
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+        displayMenu={displayMenu}
+        tAssistiveHint = {tAssistiveHint}
+        tNoResults = {tNoResults}
+        tStatusQueryTooShort = {tStatusQueryTooShort}
+        tStatusNoResults = {tStatusNoResults}
+        tStatusSelectedOption = {tStatusSelectedOption}
+        tStatusResults = {tStatusResults}
+        {...attributes}
+    />;
+  };
+
diff --git a/src/index.ts b/src/index.ts
@@ -47,6 +47,7 @@ export {
   Util
 } from 'reactstrap';
 
+export { Autocomplete } from './Autocomplete/Autocomplete';
 export { Accordion } from './Accordion/Accordion';
 export { AccordionBody } from './Accordion/AccordionBody';
 export { AccordionHeader } from './Accordion/AccordionHeader';
@@ -297,3 +298,53 @@ export type {
   UncontrolledCollapseProps,
   UncontrolledTooltipProps
 } from 'reactstrap';
+
+// Focus Management
+
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+// const DATA_MOUSE_FOCUS = 'data-focus-mouse'
+// const CLASS_NAME_MOUSE_FOCUS = 'focus--mouse'
+
+// class TrackFocus {
+//   private _usingMouse: boolean;
+//   constructor() {
+//     this._usingMouse = false
+
+//     this._bindEvents()
+//   }
+
+//   _bindEvents() {
+//     if (typeof document === 'undefined') {
+//       return
+//     }
+//     const events = ['keydown', 'mousedown']
+//     events.forEach((evtName) => {
+//       document.addEventListener(evtName, (evt) => {
+//         this._usingMouse = evt.type === 'mousedown'
+//       })
+//     })
+//     document.addEventListener('focusin', (evt: Event) => {
+//       if (this._usingMouse) {
+//         if (evt.target) {
+//           (evt.target as HTMLElement).classList.add(CLASS_NAME_MOUSE_FOCUS);
+//           (evt.target as HTMLElement).setAttribute(DATA_MOUSE_FOCUS, 'true')
+//         }
+//       }
+//     })
+//     document.addEventListener('focusout', (evt: Event) => {
+//       if (evt.target) {
+//         (evt.target as HTMLElement).classList.remove(CLASS_NAME_MOUSE_FOCUS);
+//         (evt.target as HTMLElement).setAttribute(DATA_MOUSE_FOCUS, 'false')
+//       }
+//     })
+//   }
+// }
+
+// new TrackFocus()
diff --git a/stories/Components/Form/Input.stories.tsx b/stories/Components/Form/Input.stories.tsx
@@ -1,9 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore non ci sono i types
-import Autocomplete from 'accessible-autocomplete/react'; // Reference to https://www.npmjs.com/package/accessible-autocomplete
 import React, { useState } from 'react';
-import { Button, FormGroup, Icon, Input, TextArea } from '../../../src';
+import { Button, FormGroup, Icon, Input, TextArea, Autocomplete } from '../../../src';
 
 const meta: Meta<typeof Input> = {
   title: 'Documentazione/Form/Input',

diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap
@@ -20570,7 +20570,7 @@ exports[`Stories Snapshots Documentazione/Form/Input _InputAutocompleteConDatiAc
         id="autocomplete__assistiveHint"
         style="display: none;"
       >
-        When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.
+        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
       </span>
     </div>
   </div>