78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
import React, { useCallback } from 'react'
|
|
import { __ } from '@wordpress/i18n';
|
|
import { isEmpty } from 'ramda';
|
|
|
|
// store
|
|
import { storeSet, useStore } from '../../../../store';
|
|
|
|
// components
|
|
import BuilderElement from '../BuilderElement';
|
|
import BuilderElementItem from '../BuilderElementItem';
|
|
import { Sidebar } from 'primereact/sidebar';
|
|
import BuilderElementSettings from '../BuilderElementSettings';
|
|
import BuilderDropzone from '../BuilderDropzone';
|
|
import BlockingOverlay from '../../../../components/BlockingOverlay';
|
|
|
|
const FormBuilder = () => {
|
|
const elements = useStore().main.formElements();
|
|
const elementItems = useStore().main.elementItems();
|
|
const activeElement = useStore().main.activeElement();
|
|
const isAsyncRequest = useStore().main.isAsyncRequest();
|
|
|
|
const renderField = useCallback((field, index) => {
|
|
return (
|
|
<BuilderElement
|
|
key={field.id}
|
|
index={index}
|
|
id={field.id}
|
|
label={field.label}
|
|
name={field.name}
|
|
/>
|
|
)
|
|
}, []);
|
|
|
|
const renderItem = useCallback((item) => {
|
|
return (
|
|
<BuilderElementItem
|
|
key={item.id}
|
|
dbId={item.id}
|
|
label={item.label}
|
|
name={item.name}
|
|
description={item.description}
|
|
/>
|
|
)
|
|
}, []);
|
|
|
|
const closeSettings = () => {
|
|
storeSet.main.activeElement('');
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Sidebar visible={!isEmpty(activeElement)} onHide={closeSettings} className="formBuilder__elementSettings">
|
|
<h2>{__('Impostazioni del campo modulo', 'gepafin')}</h2>
|
|
{!isEmpty(activeElement) ? <BuilderElementSettings closeSettings={closeSettings}/> : null}
|
|
</Sidebar>
|
|
<div className="formBuilder">
|
|
<div className="formBuilder__main">
|
|
<h2>{__('Trascina qui gli elementi del Form', 'gepafin')}</h2>
|
|
<div className="formBuilder__content">
|
|
{!isEmpty(elements)
|
|
? elements.map((field, i) => renderField(field, i))
|
|
: <BuilderDropzone/>}
|
|
</div>
|
|
</div>
|
|
<div className="formBuilder__aside">
|
|
<h2>{__('Elementi del Form', 'gepafin')}</h2>
|
|
<ul className="formBuilder__list">
|
|
{elementItems.map((item) => renderItem(item))}
|
|
</ul>
|
|
</div>
|
|
<BlockingOverlay shouldDisplay={isAsyncRequest}/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default FormBuilder;
|