49 lines
1.3 KiB
React
49 lines
1.3 KiB
React
|
import React, { useMemo } from 'react'
|
||
|
|
import { Link } from 'react-router-dom'
|
||
|
|
import FormActionBar from './FormActionBar'
|
||
|
|
import { useFormEditorActions } from '../context/FormEditorActionsContext'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Vollseiten-Editor: sticky Kopfzeile (Desktop) + Mobile-Dock via FormEditorActionsProvider.
|
||
|
|
*/
|
||
|
|
export default function PageFormEditorChrome({
|
||
|
|
title,
|
||
|
|
backTo,
|
||
|
|
backLabel = 'Zurück',
|
||
|
|
actionConfig,
|
||
|
|
children,
|
||
|
|
testId,
|
||
|
|
}) {
|
||
|
|
useFormEditorActions(actionConfig)
|
||
|
|
|
||
|
|
const headerBar = useMemo(() => {
|
||
|
|
if (!actionConfig) return null
|
||
|
|
return (
|
||
|
|
<FormActionBar
|
||
|
|
{...actionConfig}
|
||
|
|
placement="top"
|
||
|
|
variant="page"
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}, [actionConfig])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="page-form-editor" data-testid={testId}>
|
||
|
|
<header className="page-form-editor__header">
|
||
|
|
<div className="page-form-editor__intro">
|
||
|
|
{backTo ? (
|
||
|
|
<Link to={backTo} className="page-form-editor__back">
|
||
|
|
← {backLabel}
|
||
|
|
</Link>
|
||
|
|
) : null}
|
||
|
|
<h1 className="page-form-editor__title">{title}</h1>
|
||
|
|
</div>
|
||
|
|
{headerBar ? (
|
||
|
|
<div className="page-form-editor__header-actions">{headerBar}</div>
|
||
|
|
) : null}
|
||
|
|
</header>
|
||
|
|
<div className="page-form-editor__body">{children}</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|