- saving progress;

src/components/FormFieldRepeater/index.js

@@ -1,7 +1,7 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { classNames } from 'primereact/utils';
 import { __ } from '@wordpress/i18n';
-import { isEmpty } from 'ramda';
+import { head, isNil, pluck } from 'ramda';
 
 // components
 import { InputText } from 'primereact/inputtext';
@@ -22,19 +22,20 @@ const FormFieldRepeater = ({
                            }) => {
     const forMenu = useRef(null);
     const [stateFieldData, setStateFieldData] = useState([]);
+    const [stateOptionsData, setStateOptionsData] = useState([]);
     const menuItems = [
         {
             type: 'existing',
             label: __('Esistente', 'gepafin'),
             command: (data) => {
-                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+                setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: 0 }]);
             }
         },
         {
             type: 'new',
             label: __('Nuovo', 'gepafin'),
             command: (data) => {
-                setStateFieldData([...stateFieldData, { id: null, value: '', status: data.item.type }]);
+                setStateFieldData([...stateFieldData, { id: null, value: '', lookUpDataId: null }]);
             }
         }
     ]
@@ -45,14 +46,14 @@ const FormFieldRepeater = ({
     }
 
     const selectItem = (e, index) => {
-        const newData = stateFieldData.map((o, i) => {
-            if (i === index) {
-                o.value = e.value;
-                o.id = e.id;
-            }
-            return o;
-        })
-        setStateFieldData(newData);
+        const targetedOption = head(stateOptionsData.filter(o => o.value === e.value));
+
+        if (targetedOption) {
+            const newData = stateFieldData.map((o, i) => {
+                return i === index ? targetedOption : o;
+            })
+            setStateFieldData(newData);
+        }
     }
 
     const onInputChange = (e, index) => {
@@ -67,24 +68,30 @@ const FormFieldRepeater = ({
     }
 
     const properField = (item, i) => {
-        return item.status === 'new'
-            ? <InputText value={item.value} onInput={(e) => onInputChange(e, i)}/>
-            : <Dropdown value={item.value}
+        return !isNil(item.lookUpDataId)
+            ? <Dropdown value={item.value}
                         onChange={(e) => selectItem(e, i)}
-                        optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
-                        options={options} optionLabel="value"/>
+                        optionDisabled={(opt) => usedExistingValues().includes(opt.value)}
+                        options={stateOptionsData}
+                        optionLabel="value"/>
+            : <InputText value={item.value} onInput={(e) => onInputChange(e, i)}/>
     }
 
-    const usedExistingValues = stateFieldData
-        .filter(o => o.status === 'existing')
-        .map(o => o.value);
+    const usedExistingValues = useCallback(() => {
+        return stateFieldData
+            .filter(o => o.lookUpDataId > 0)
+            .map(o => o.value)
+    }, [stateFieldData]);
 
     useEffect(() => {
         const storeFieldData = data[fieldName] ?? [];
-        const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }));
-        setStateFieldData(newData);
+        setStateFieldData(storeFieldData);
         register(fieldName, config);
-    }, [])
+    }, []);
+
+    useEffect(() => {
+        setStateOptionsData([...options]);
+    }, [options]);
 
     useEffect(() => {
         setDataFn(fieldName, [...stateFieldData], { shouldValidate: true });
@@ -100,7 +107,7 @@ const FormFieldRepeater = ({
                     {properField(o, i)}
                     <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
                 </div>
-                {o.status === 'new' && infoText ? <small>{infoText}</small> : null}
+                {isNil(o.lookUpDataId) && infoText ? <small>{infoText}</small> : null}
             </div>)}
             <Menu model={menuItems} popup ref={forMenu} id="aimedForMenu"/>
             <Button type="button" iconPos="right" label={__('Aggiungi', 'gepafin')}