form.js

// External dependencies
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';

// Internal dependencies
import styles from './styles.scss';
import Input from './input';

const wrapInputChildRecursivly = refSaver => {
	const recurser = child => {
		if ( child.type === Input ) {
			console.log( 'Got input type!', child.props.field.name );
			return React.cloneElement( child,
				Object.assign( {},
					child.props,
					{
						ref: refSaver
					}
				),
				child.children
			);
		}

		if ( ! child || ! child.props || React.Children.count( child.props.children ) === 0 ) {
			return child;
		}

		return React.cloneElement( child,
			child.props,
			React.Children.map( child.props.children, recurser )
		);
	};
	return recurser;
};

class Form extends React.Component {
	constructor( props ) {
		super( props );
		console.log( props.children );
	}

	saveRef( element ) {
		if ( element ) {
			console.log( 'got element', element.props.field.name );
		}
	}

	render() {
		const { onSubmit, fieldArea, submitArea } = this.props;

		const fieldAreaChildren = React.Children.map(
			fieldArea,
			wrapInputChildRecursivly( this.saveRef.bind( this ) )
		);

		return 	<form onSubmit={ onSubmit } className={ styles.form }>
			<div className={ styles.fieldArea }>
				{ fieldAreaChildren }
			</div>

			<div className={ styles.submitArea }>
				{ submitArea }
			</div>
		</form>;
	}
}

Form.propTypes = {
	fieldArea: PropTypes.element.isRequired,
	onSubmit: PropTypes.func.isRequired,
	submitArea: PropTypes.element.isRequired
};

export default withStyles( styles )( Form );