@bigfishtv/cockpit/src/decorators/modalFormValueContext.js

/**
 * @module Decorators/modalFormValueContext
 */

import React, { Component } from 'react'
import { createValue } from '@bigfishtv/react-forms'

import { extractErrorList } from '../utils/reactFormsUtils'

/**
 * Decorator to wrap a modal component with a contained form state and prop hooks for things like onSave
 * @param  {Component} WrappedComponent - Modal react component to wrap
 * @return {Component} returns wrapped component
 */
export default function(WrappedComponent) {
	return class FormContextDecorator extends Component {
		componentWillMount() {
			const { defaultValue, formValue } = this.props
			this.setState({
				formValue: createValue({
					schema: formValue && formValue.schema ? formValue.schema : undefined,
					value: formValue && formValue.value ? formValue.value : defaultValue,
					onChange: this.onChange,
					params: formValue ? formValue.params : undefined,
					errorList: formValue ? extractErrorList(formValue.completeErrorList, formValue.keyPath) : [],
				}),
			})
		}

		onChange = nextFormValue => {
			this.setState({ formValue: nextFormValue })
		}

		handleSave = () => {
			this.props.onSave(this.state.formValue, this.props.isNew)
			this.props.onClose(this.state.formValue, true, this.props.isNew)
			this.props.closeModal(true)
		}

		handleClose = () => {
			this.props.onClose(this.state.formValue, false, this.props.isNew)
			this.props.closeModal()
		}

		render() {
			const props = {
				...this.props,
				formValue: this.state.formValue,
				onClose: this.handleClose,
				onSave: this.handleSave,
			}
			return <WrappedComponent {...props} />
		}
	}
}