122 lines
5.3 KiB
JavaScript
122 lines
5.3 KiB
JavaScript
import React, { useRef, useEffect, useState } from 'react';
|
|
import { classNames } from 'primereact/utils';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { Button } from 'primereact/button';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { Accordion, AccordionTab } from 'primereact/accordion';
|
|
import { ToggleButton } from 'primereact/togglebutton';
|
|
|
|
const FormFieldRepeaterFaq = ({
|
|
data,
|
|
setDataFn,
|
|
fieldName,
|
|
options = [],
|
|
errors,
|
|
register,
|
|
label,
|
|
infoText
|
|
}) => {
|
|
const [stateFieldData, setStateFieldData] = useState([]);
|
|
|
|
const removeItem = (index) => {
|
|
const newData = stateFieldData.toSpliced(index, 1);
|
|
setStateFieldData(newData);
|
|
}
|
|
|
|
const selectItem = () => {
|
|
setStateFieldData([...stateFieldData, { id: 0, status: 'new', question: '', answer: '', visible: true }]);
|
|
}
|
|
|
|
const onInputChange = (e, index) => {
|
|
const { value } = e.target;
|
|
const newData = stateFieldData.map((o, i) => {
|
|
if (i === index) {
|
|
o.value = value;
|
|
}
|
|
return o;
|
|
})
|
|
setStateFieldData(newData);
|
|
}
|
|
|
|
const addNewItem = () => {
|
|
|
|
}
|
|
|
|
const setChecked = (e, index) => {
|
|
e.preventDefault();
|
|
const newData = stateFieldData.map((o, i) => {
|
|
if (i === index) {
|
|
o.visible = e.value;
|
|
}
|
|
return o;
|
|
});
|
|
setStateFieldData(newData);
|
|
}
|
|
|
|
const editItem = (e, index) => {
|
|
e.stopPropagation();
|
|
console.log('editItem')
|
|
}
|
|
|
|
const usedExistingValues = stateFieldData
|
|
.filter(o => o.status === 'existing')
|
|
.map(o => o.question);
|
|
|
|
useEffect(() => {
|
|
const storeFieldData = data[fieldName] ?? [];
|
|
const newData = storeFieldData.map(o => ({ ...o, status: o.id ? 'existing' : 'new' }))
|
|
setStateFieldData(newData);
|
|
register(fieldName)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
setDataFn(fieldName, [...stateFieldData]);
|
|
}, [stateFieldData])
|
|
|
|
return (
|
|
<div className={classNames(['appForm__field', 'formfieldrepeater'])}>
|
|
<label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
|
|
{label}
|
|
</label>
|
|
<div className="appForm__faqHeaderControls">
|
|
<Button type="button" iconPos="left" label={__('Aggiungi', 'gepafin')}
|
|
icon="pi pi-plus" onClick={addNewItem}/>
|
|
<Dropdown onChange={(e) => selectItem(e)}
|
|
optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
|
|
options={options} optionLabel="question"/>
|
|
</div>
|
|
<Accordion activeIndex={0}>
|
|
{stateFieldData.map((o, i) => <AccordionTab key={i}
|
|
header={
|
|
<div className="appForm__faqTab">
|
|
<div className="appForm__faqTabItem">
|
|
<ToggleButton
|
|
onIcon="pi pi-eye"
|
|
offIcon="pi pi-eye-slash"
|
|
onLabel=""
|
|
offLabel=""
|
|
checked={o.visible}
|
|
onChange={(e) => setChecked(e, i)}/>
|
|
{o.question}
|
|
</div>
|
|
<div className="appForm__faqTabItem">
|
|
<Button icon="pi pi-pencil" severity="success"
|
|
aria-label="Edit" onClick={(e) => editItem(e, i)}/>
|
|
<Button icon="pi pi-times" severity="danger"
|
|
aria-label="Cancel"
|
|
onClick={() => removeItem(i)}/>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<p className="m-0">
|
|
{o.answer}
|
|
</p>
|
|
</AccordionTab>)}
|
|
</Accordion>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FormFieldRepeaterFaq; |