refactor: use directly option elements

italia · Jun 26, 2023 · 9e30468 · 9e30468
1 parent 2e27ad8
commit 9e30468
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 97 deletions.
diff --git a/stories/Form/Select.stories.mdx b/stories/Form/Select.stories.mdx
@@ -8,21 +8,6 @@ import { Select } from '../../src';
 
 ### Il classico “menu a tendina”, in nuove varianti.
 
-L'array di input usato per il componente `Select` in questo e per i successivi esempi è il seguente:
-
-```js
-const defaultOptions = [
-  { value: 'Value 1', label: 'Lorem ipsum dolor sit amet' },
-  { value: 'Value 2', label: 'Duis vestibulum eleifend libero' },
-  { value: 'Value 3', label: 'Phasellus pretium orci sed odio tempus' },
-  {
-    value: 'Value 4',
-    label: 'Vestibulum bibendum ex vel augue porttitor sodales'
-  },
-  { value: 'Value 5', label: 'Praesent quis elementum turpis' }
-];
-```
-
 ## Select classica
 
 La `Select` accetta come _children_ le opzioni selezionabili e ha una _prop_ `label`con cui si definisce l'etichetta del
@@ -42,35 +27,6 @@ Per disabilitare una select, aggiungere la _prop_ `disabled` al componente `Sele
 
 ## Select con gruppi
 
-Per le select con raggruppamenti il formato di input dei dati è leggermente diversa dal formato precedente:
-
-```js
-const groupOneOptions = [
-  { value: 'Value 1', label: 'Lorem ipsum dolor sit amet' },
-  { value: 'Value 2', label: 'Duis vestibulum eleifend libero' },
-  { value: 'Value 3', label: 'Phasellus pretium orci sed odio tempus' }
-];
-
-const groupTwoOptions = [
-  {
-    value: 'Value 4',
-    label: 'Vestibulum bibendum ex vel augue porttitor sodales'
-  },
-  { value: 'Value 5', label: 'Praesent quis elementum turpis' }
-];
-
-const groupedOptions = [
-  {
-    label: 'Gruppo 1',
-    options: groupOneOptions
-  },
-  {
-    label: 'Gruppo 2',
-    options: groupTwoOptions
-  }
-];
-```
-
 <Canvas>
   <Story id='componenti-form-select--select-con-gruppi' />
 </Canvas>

diff --git a/stories/Form/Select.stories.tsx b/stories/Form/Select.stories.tsx
@@ -2,42 +2,6 @@ import React, { useState } from 'react';
 
 import { Select } from '../../src';
 
-const defaultOptions = [
-  { value: 'Value 1', label: 'Lorem ipsum dolor sit amet' },
-  { value: 'Value 2', label: 'Duis vestibulum eleifend libero' },
-  { value: 'Value 3', label: 'Phasellus pretium orci sed odio tempus' },
-  {
-    value: 'Value 4',
-    label: 'Vestibulum bibendum ex vel augue porttitor sodales'
-  },
-  { value: 'Value 5', label: 'Praesent quis elementum turpis' }
-];
-
-const groupOneOptions = [
-  { value: 'Value 1', label: 'Lorem ipsum dolor sit amet' },
-  { value: 'Value 2', label: 'Duis vestibulum eleifend libero' },
-  { value: 'Value 3', label: 'Phasellus pretium orci sed odio tempus' }
-];
-
-const groupTwoOptions = [
-  {
-    value: 'Value 4',
-    label: 'Vestibulum bibendum ex vel augue porttitor sodales'
-  },
-  { value: 'Value 5', label: 'Praesent quis elementum turpis' }
-];
-
-const groupedOptions = [
-  {
-    label: 'Gruppo 1',
-    options: groupOneOptions
-  },
-  {
-    label: 'Gruppo 2',
-    options: groupTwoOptions
-  }
-];
-
 export default {
   title: 'Componenti/Form/Select'
 };
@@ -53,11 +17,14 @@ export const SelectClassica = () => {
       label='Etichetta di esempio'
       handleChange={handleChange}
     >
-      {defaultOptions.map((opt, i) => (
-        <option label={opt.label} key={i}>
-          {opt.value}
-        </option>
-      ))}
+      <option value=''>Scegli un'opzione</option>
+      <option value='Value 1'>Lorem ipsum dolor sit amet</option>
+      <option value='Value 2'>Duis vestibulum eleifend libero</option>
+      <option value='Value 3'>Phasellus pretium orci sed odio tempus</option>
+      <option value='Value 4'>
+        Vestibulum bibendum ex vel augue porttitor sodales
+      </option>
+      <option value='Value 5'>Praesent quis elementum turpis</option>
     </Select>
   );
 };
@@ -76,11 +43,14 @@ export const SelectDisabilitata = () => {
       handleChange={handleChange}
       disabled
     >
-      {defaultOptions.map((opt, i) => (
-        <option label={opt.label} key={i}>
-          {opt.value}
-        </option>
-      ))}
+      <option value=''>Scegli un'opzione</option>
+      <option value='Value 1'>Lorem ipsum dolor sit amet</option>
+      <option value='Value 2'>Duis vestibulum eleifend libero</option>
+      <option value='Value 3'>Phasellus pretium orci sed odio tempus</option>
+      <option value='Value 4'>
+        Vestibulum bibendum ex vel augue porttitor sodales
+      </option>
+      <option value='Value 5'>Praesent quis elementum turpis</option>
     </Select>
   );
 };
@@ -98,13 +68,18 @@ export const SelectConGruppi = () => {
       label='Etichetta di esempio'
       handleChange={handleChange}
     >
-      {groupedOptions.map((grp, i) => (
-        <optgroup label={grp.label}>
-          {grp.options.map((opt, j) => (
-            <option value={opt.value}>{opt.label}</option>
-          ))}
-        </optgroup>
-      ))}
+      <option value=''>Scegli un'opzione</option>
+      <optgroup label='Gruppo 1'>
+        <option value='Value 1'>Lorem ipsum dolor sit amet</option>
+        <option value='Value 2'>Duis vestibulum eleifend libero</option>
+        <option value='Value 3'>Phasellus pretium orci sed odio tempus</option>
+      </optgroup>
+      <optgroup label='Gruppo 2'>
+        <option value='Value 4'>
+          Vestibulum bibendum ex vel augue porttitor sodales
+        </option>
+        <option value='Value 5'>Praesent quis elementum turpis</option>
+      </optgroup>
     </Select>
   );
 };