import React , { useCallback , useState } from "react" ; import { Icon } from "@webiny/ui/Icon" ; import { cloneDeep } from "lodash" ; import { Center , Vertical , Horizontal } from "../../DropZone" ; import Draggable from "../../Draggable" ; import EditFieldDialog from "./EditFieldDialog" ; import Field from "./Field" ; import { ReactComponent as HandleIcon } from "../../../../icons/round-drag_indicator-24px.svg" ; import { rowHandle , EditContainer , fieldHandle , fieldContainer , Row , RowContainer } from "./Styled" ; import { useFormEditor } from "../../Context" ; import { FieldLayoutPositionType } from "../../../../../types" ; import { i18n } from "@webiny/app/i18n" ; const t = i18n . namespace ( "FormsApp.Editor.EditTab" ) ; export const EditTab = ( ) => { const { getFields , insertField , updateField , deleteField , data , moveField , moveRow , getFieldPlugin } = useFormEditor ( ) ; const [ editingField , setEditingField ] = useState ( null ) ; const [ dropTarget , setDropTarget ] = useState ( null ) ; const editField = useCallback ( field => { setEditingField ( cloneDeep ( field ) ) ; } , undefined ) ; const handleDropField = useCallback ( ( source , dropTarget ) => { const { pos , name , ui } = source ; if ( name === "custom" ) { editField ( { } ) ; setDropTarget ( dropTarget ) ; return ; } if ( ui === "row" ) { return moveRow ( pos . row , dropTarget . row ) ; } if ( pos ) { const fieldId = data . layout [ pos . row ] [ pos . index ] ; return moveField ( { field : fieldId , position : dropTarget } ) ; } const plugin = getFieldPlugin ( { name } ) ; insertField ( plugin . field . createField ( ) , dropTarget ) ; } , undefined ) ; const fields = getFields ( true ) ; return ( < EditContainer > { fields . length === 0 && ( < Center onDrop = { item => handleDropField ( item , { row : 0 , index : 0 } ) } > { t `Drop your first field here` } < /Center>)} { fields . map ( ( row , index ) => ( < Draggable beginDrag = { { ui : "row" , pos : { row : index } } } key = { index } > { ( { drag , isDragging } ) => ( < RowContainer style = { { opacity : isDragging ? 0.3 : 1 } } > < div className = { rowHandle } ref = { drag } > < Icon icon = { < HandleIcon />}/ > < /div> < Horizontal onDrop = { item => handleDropField ( item , { row : index , index : null } ) } / > { } < Row > { row . map ( ( field , fieldIndex ) => ( < Draggable key = { fieldIndex } beginDrag = { { ui : "field" , name : field . name , pos : { row : index , index : fieldIndex } } } > { ( { drag } ) => ( < div className = { fieldContainer } ref = { drag } > < Vertical onDrop = { item => handleDropField ( item , { row : index , index : fieldIndex } ) } isVisible = { item => item . ui === "field" && ( row . length < 4 || item ?. pos ?. row === index ) } / > < div className = { fieldHandle } > < Field field = { field } onEdit = { editField } onDelete = { deleteField } / > < /div> { } { fieldIndex === row . length - 1 && ( < Vertical last isVisible = { item => item . ui === "field" && ( row . length < 4 || item ?. pos ?. row === index ) } onDrop = { item => handleDropField ( item , { row : index , index : fieldIndex + 1 } ) } />)} < /div>)} < /Draggable>))} < /Row> { } { index === fields . length - 1 && ( < Horizontal last onDrop = { item => handleDropField ( item , { row : index + 1 , index : null } ) } />)} < /RowContainer>)} < /Draggable>))} < EditFieldDialog field = { editingField } onClose = { editField } onSubmit = { data => { if ( data . _id ) { updateField ( data ) ; } else { insertField ( data , dropTarget ) ; } editField ( null ) ; } } /> < /EditContainer>); } ;