<commit_before>import Field from '../Field';
import React, { PropTypes } from 'react';
import { FormField, FormInput, FormRow } from 'elemental';

const NAME_SHAPE = {
	first: PropTypes.string,
	last: PropTypes.string,
};

module.exports = Field.create({
	displayName: 'NameField',
	statics: {
		type: 'Name',
		getDefaultValue: () => ({
			first: '',
			last: '',
		}),
	},
	propTypes: {
		onChange: PropTypes.func.isRequired,
		path: PropTypes.string.isRequired,
		paths: PropTypes.shape(NAME_SHAPE).isRequired,
		value: PropTypes.shape(NAME_SHAPE).isRequired,
	},

	valueChanged: function (which, event) {
		const { value = {}, path, onChange } = this.props;
		onChange({
			path,
			value: {
				...value,
				[which]: event.target.value,
			},
		});
	},
	changeFirst: function (event) {
		return this.valueChanged('first', event);
	},
	changeLast: function (event) {
		return this.valueChanged('last', event);
	},
	renderValue () {
		const inputStyle = { width: '100%' };
		const { value = {} } = this.props;

		return (
			<FormRow>
				<FormField width="one-half">
					<FormInput noedit style={inputStyle}>
						{value.first}
					</FormInput>
				</FormField>
				<FormField width="one-half">
					<FormInput noedit style={inputStyle}>
						{value.last}
					</FormInput>
				</FormField>
			</FormRow>
		);
	},
	renderField () {
		const { value = {}, paths } = this.props;
		return (
			<FormRow>
				<FormField width="one-half">
					<FormInput
						autoFocus
						autoComplete="off"
						name={this.getInputName(paths.first)}<commit_msg>Don't focus NameField by default<commit_after>import Field from '../Field';
import React, { PropTypes } from 'react';
import { FormField, FormInput, FormRow } from 'elemental';

const NAME_SHAPE = {
	first: PropTypes.string,
	last: PropTypes.string,
};

module.exports = Field.create({
	displayName: 'NameField',
	statics: {
		type: 'Name',
		getDefaultValue: () => ({
			first: '',
			last: '',
		}),
	},
	propTypes: {
		onChange: PropTypes.func.isRequired,
		path: PropTypes.string.isRequired,
		paths: PropTypes.shape(NAME_SHAPE).isRequired,
		value: PropTypes.shape(NAME_SHAPE).isRequired,
	},

	valueChanged: function (which, event) {
		const { value = {}, path, onChange } = this.props;
		onChange({
			path,
			value: {
				...value,
				[which]: event.target.value,
			},
		});
	},
	changeFirst: function (event) {
		return this.valueChanged('first', event);
	},
	changeLast: function (event) {
		return this.valueChanged('last', event);
	},
	renderValue () {
		const inputStyle = { width: '100%' };
		const { value = {} } = this.props;

		return (
			<FormRow>
				<FormField width="one-half">
					<FormInput noedit style={inputStyle}>
						{value.first}
					</FormInput>
				</FormField>
				<FormField width="one-half">
					<FormInput noedit style={inputStyle}>
						{value.last}
					</FormInput>
				</FormField>
			</FormRow>
		);
	},
	renderField () {
		const { value = {}, paths } = this.props;
		return (
			<FormRow>
				<FormField width="one-half">
					<FormInput
						autoComplete="off"
						name={this.getInputName(paths.first)}
{'fraction_non_alphanumeric': 0.1642558662809386, 'fraction_numerical': 0.0019286403085824494, 'mean_word_length': 3.346368715083799, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, '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': '495682', 'n_tokens_mistral': 1241, 'n_tokens_neox': 1052, 'n_words': 216}