<commit_before>var _ = require('underscore');
var React = require('react');
var Fields = require('../fields');
var InvalidFieldType = require('./InvalidFieldType');

var Alert = require('elemental').Alert;
var Button = require('elemental').Button;
var Modal  = require('elemental').Modal;

var Form = React.createClass({
	
	displayName: 'CreateForm',
	
	getDefaultProps: function() {
		return {
			err: null,
			values: {},
			animate: false
		};
	},
	
	getInitialState: function() {
		
		var values = this.props.values;
		
		_.each(this.props.list.fields, function(field) {
			if (!values[field.path]) {
				values[field.path] = field.defaultValue;
			}
		});
		
		return {
			values: values
		};
		
	},
	
	handleChange: function(event) {
		var values = this.state.values;
		values[event.path] = event.value;
		this.setState({
			values: values
		});
	},

	componentWillMount: function() {
		this._bodyStyleOverflow = document.body.style.overflow;
		document.body.style.overflow = 'hidden';
	},
	
	componentDidMount: function() {
		if (this.refs.focusTarget) {
			this.refs.focusTarget.focus();
		}
	},

	componentWillUnmount: function() {
		document.body.style.overflow = this._bodyStyleOverflow;
	},
	
	getFieldProps: function(field) {
		var props = _.clone(field);
		props.value = this.state.values[field.path];
		props.values = this.state.values;
		props.onChange = this.handleChange;
		props.mode = 'create';
		return props;
	},
	
	render: function() {
		
		var errors = null,
			form = {},
			list = this.props.list,
			formAction = '/keystone/' + list.path,
			nameField = this.props.list.nameField,
			focusRef;
		
		var modalClass = 'modal modal-md' + (this.props.animate ? ' animate' : '');
		
		if (this.props.err && this.props.err.errors) {
			var msgs = {};
			_.each(this.props.err.errors, function(err, path) {
				msgs[path] = <li>{err.message}</li>;
			});
			errors = (
				<Alert type="danger">
					<h4>There was an error creating the new {list.singular}:</h4>
					<ul>{msgs}</ul>
				</Alert>
			);
		}
		
		if (list.nameIsInitial) {
			var nameFieldProps = this.getFieldProps(nameField);
			nameFieldProps.ref = focusRef = 'focusTarget';
			if (nameField.type === 'text') {
				nameFieldProps.className = 'item-name-field';
				nameFieldProps.placeholder = nameField.label;
				nameFieldProps.label = false;
			}
			form[nameField.path] = React.createElement(Fields[nameField.type], nameFieldProps);
		}
		
		_.each(list.initialFields, function(path) {
				
			var field = list.fields[path];
			
			if ('function' !== typeof Fields[field.type]) {
				form[field.path] = React.createElement(InvalidFieldType, { type: field.type, path: field.path });
				return;
			}
			
			var fieldProps = this.getFieldProps(field);
			
			if (!focusRef) {
				fieldProps.ref = focusRef = 'focusTarget';
			}
			
			form[field.path] = React.createElement(Fields[field.type], fieldProps);
			
		}, this);
		
		return (
			<Modal isOpen onChange={this.props.onCancel} headerTitle={'Create a new ' + list.singular} headerHasCloseButton backdropClosesModal>
				<form encType="multipart/form-data" method="post" action={formAction} className="horizontal-form create-form">
					<input type="hidden" name="action" value="create" />
					<input type="hidden" name={Keystone.csrf.key} value={Keystone.csrf.value} />
					<Modal.Body>
						{errors}
						{form}
					</Modal.Body>
					<Modal.Footer>
						<Button type="success" submit>Create</Button>
						<Button type="link-cancel" onClick={this.props.onCancel}>cancel</Button>
					</Modal.Footer>
				</form><commit_msg>update modal to use new elemental syntax<commit_after>var _ = require('underscore');
var React = require('react');
var Fields = require('../fields');
var InvalidFieldType = require('./InvalidFieldType');

var Alert = require('elemental').Alert;
var Button = require('elemental').Button;
var Modal  = require('elemental').Modal;

var Form = React.createClass({
	
	displayName: 'CreateForm',
	
	getDefaultProps: function() {
		return {
			err: null,
			values: {},
			animate: false
		};
	},
	
	getInitialState: function() {
		
		var values = this.props.values;
		
		_.each(this.props.list.fields, function(field) {
			if (!values[field.path]) {
				values[field.path] = field.defaultValue;
			}
		});
		
		return {
			values: values
		};
		
	},
	
	handleChange: function(event) {
		var values = this.state.values;
		values[event.path] = event.value;
		this.setState({
			values: values
		});
	},

	componentWillMount: function() {
		this._bodyStyleOverflow = document.body.style.overflow;
		document.body.style.overflow = 'hidden';
	},
	
	componentDidMount: function() {
		if (this.refs.focusTarget) {
			this.refs.focusTarget.focus();
		}
	},

	componentWillUnmount: function() {
		document.body.style.overflow = this._bodyStyleOverflow;
	},
	
	getFieldProps: function(field) {
		var props = _.clone(field);
		props.value = this.state.values[field.path];
		props.values = this.state.values;
		props.onChange = this.handleChange;
		props.mode = 'create';
		return props;
	},
	
	render: function() {
		
		var errors = null,
			form = {},
			list = this.props.list,
			formAction = '/keystone/' + list.path,
			nameField = this.props.list.nameField,
			focusRef;
		
		var modalClass = 'modal modal-md' + (this.props.animate ? ' animate' : '');
		
		if (this.props.err && this.props.err.errors) {
			var msgs = {};
			_.each(this.props.err.errors, function(err, path) {
				msgs[path] = <li>{err.message}</li>;
			});
			errors = (
				<Alert type="danger">
					<h4>There was an error creating the new {list.singular}:</h4>
					<ul>{msgs}</ul>
				</Alert>
			);
		}
		
		if (list.nameIsInitial) {
			var nameFieldProps = this.getFieldProps(nameField);
			nameFieldProps.ref = focusRef = 'focusTarget';
			if (nameField.type === 'text') {
				nameFieldProps.className = 'item-name-field';
				nameFieldProps.placeholder = nameField.label;
				nameFieldProps.label = false;
			}
			form[nameField.path] = React.createElement(Fields[nameField.type], nameFieldProps);
		}
		
		_.each(list.initialFields, function(path) {
				
			var field = list.fields[path];
			
			if ('function' !== typeof Fields[field.type]) {
				form[field.path] = React.createElement(InvalidFieldType, { type: field.type, path: field.path });
				return;
			}
			
			var fieldProps = this.getFieldProps(field);
			
			if (!focusRef) {
				fieldProps.ref = focusRef = 'focusTarget';
			}
			
			form[field.path] = React.createElement(Fields[field.type], fieldProps);
			
		}, this);
		
		return (
			<Modal isOpen onCancel={this.props.onCancel} headerTitle={'Create a new ' + list.singular} headerHasCloseButton backdropClosesModal>
				<form encType="multipart/form-data" method="post" action={formAction} className="horizontal-form create-form">
					<input type="hidden" name="action" value="create" />
					<input type="hidden" name={Keystone.csrf.key} value={Keystone.csrf.value} />
					<Modal.Body>
						{errors}
						{form}
					</Modal.Body>
					<Modal.Footer>
						<Button type="success" submit>Create</Button>
						<Button type="link-cancel" onClick={this.props.onCancel}>cancel</Button>
					</Modal.Footer>
				</form>
{'fraction_non_alphanumeric': 0.15708118646428074, 'fraction_numerical': 0.0005570254839158892, 'mean_word_length': 3.458100558659218, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4492799', 'n_tokens_mistral': 2810, 'n_tokens_neox': 2293, 'n_words': 435}