@bigfishtv/cockpit/src/components/form/EditForm.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'

import Button from '../button/Button'
import Bulkhead from '../page/Bulkhead'
import InputFocus from '../form/FocusField'
import Form from '../form/Form'
import MinimumHeight from '../container/MinimumHeight'

const HeaderToolbar = props => (
	<div>
		<Button type="submit" size="large" style="secondary" text="Save" />
	</div>
)

const Header = props => (
	<Bulkhead title={<InputFocus select="title" placeholder="Untitled" />} Toolbar={HeaderToolbar} {...props} />
)

export default class EditForm extends Component {
	static defaultProps = {
		Header,
	}

	static propTypes = {
		Header: PropTypes.func,
		Footer: PropTypes.func,
		Sidebar: PropTypes.func,
	}

	render() {
		const { Sidebar, Header, Footer, children, ...props } = this.props
		return (
			<Form {...props}>
				{Header && <Header {...props} />}

				<MinimumHeight>
					{(forwardRef, minHeight) => (
						<div ref={forwardRef} className="content" style={{ minHeight }}>
							<div className="content-left">{children}</div>
							{Sidebar && (
								<div className="content-right">
									<Sidebar {...props} />
								</div>
							)}
						</div>
					)}
				</MinimumHeight>

				{Footer && <Footer {...props} />}
			</Form>
		)
	}
}