Add state per la corretta visualizzazione input (#974)

italia · Oct 5, 2023 · 7f451b8 · 7f451b8
1 parent f447e33
commit 7f451b8
Showing 1 changed file with 37 additions and 15 deletions.
diff --git a/stories/Form/Input.stories.tsx b/stories/Form/Input.stories.tsx
@@ -144,13 +144,29 @@ export const UtilizzoDiPlaceholderELabel = () => (
 UtilizzoDiPlaceholderELabel.storyName = 'Utilizzo di placeholder e label';
 
 export const InputConIconaOBottoni = () => {
-  const [isFocused, toggleFocus] = useState(false);
+  const [isFocused1, toggleFocus1] = useState(false);
+  const [isFocused2, toggleFocus2] = useState(false);
+  const [isFocused3, toggleFocus3] = useState(false);
 
-  const toggleFocusLabel = () => toggleFocus(true);
+  const toggleFocusLabel1 = () => toggleFocus1(true);
   // @ts-ignore: ignore types for now
-  const toggleBlurLabel = (e) => {
+  const toggleBlurLabel1 = (e) => {
     if (e.target.value === '') {
-      toggleFocus(!isFocused);
+      toggleFocus1(!isFocused1);
+    }
+  };
+  const toggleFocusLabel2 = () => toggleFocus2(true);
+  // @ts-ignore: ignore types for now
+  const toggleBlurLabel2 = (e) => {
+    if (e.target.value === '') {
+      toggleFocus2(!isFocused2);
+    }
+  };
+  const toggleFocusLabel3 = () => toggleFocus3(true);
+  // @ts-ignore: ignore types for now
+  const toggleBlurLabel3 = (e) => {
+    if (e.target.value === '') {
+      toggleFocus3(!isFocused3);
     }
   };
   return (
@@ -162,14 +178,16 @@ export const InputConIconaOBottoni = () => {
               <Icon icon='it-pencil' aria-hidden size='sm' />
             </div>
           </div>
-          <label htmlFor='input-group-1' className={isFocused ? 'active' : ''}>
+          <label htmlFor='input-group-1' className={isFocused1 ? 'active' : ''}>
             Con Etichetta
           </label>
           <input
             type='text'
-            className={isFocused ? 'form-control focus--mouse' : 'form-control'}
-            onFocus={toggleFocusLabel}
-            onBlur={toggleBlurLabel}
+            className={
+              isFocused1 ? 'form-control focus--mouse' : 'form-control'
+            }
+            onFocus={toggleFocusLabel1}
+            onBlur={toggleBlurLabel1}
             id='input-group-1'
             name='input-group-1'
           />
@@ -192,9 +210,11 @@ export const InputConIconaOBottoni = () => {
           </label>
           <input
             type='text'
-            className={isFocused ? 'form-control focus--mouse' : 'form-control'}
-            onFocus={toggleFocusLabel}
-            onBlur={toggleBlurLabel}
+            className={
+              isFocused2 ? 'form-control focus--mouse' : 'form-control'
+            }
+            onFocus={toggleFocusLabel2}
+            onBlur={toggleBlurLabel2}
             id='input-group-2'
             name='input-group-2'
             placeholder='Lorem Ipsum'
@@ -213,14 +233,16 @@ export const InputConIconaOBottoni = () => {
               <Icon icon='it-pencil' color='primary' aria-hidden size='sm' />
             </div>
           </div>
-          <label htmlFor='input-group-3' className={isFocused ? 'active' : ''}>
+          <label htmlFor='input-group-3' className={isFocused3 ? 'active' : ''}>
             Con Etichetta e bottone di tipo primary
           </label>
           <input
             type='text'
-            className={isFocused ? 'form-control focus--mouse' : 'form-control'}
-            onFocus={toggleFocusLabel}
-            onBlur={toggleBlurLabel}
+            className={
+              isFocused3 ? 'form-control focus--mouse' : 'form-control'
+            }
+            onFocus={toggleFocusLabel3}
+            onBlur={toggleBlurLabel3}
             id='input-group-3'
             name='input-group-3'
           />