<commit_before>import React from 'react';
import { observer } from 'mobx-react';
import { get, partial, map, find } from 'lodash';
import classnames from 'classnames';
import { Col, getColumnProps } from 'react-flexbox-grid';
import Field     from 'grommet/components/FormField';
import TextInput from 'grommet/components/TextInput';
import DateTime  from 'grommet/components/DateTime';
import Select from 'grommet/components/Select';

import { titleize } from '../lib/util';

import './form-field.scss';
import FieldValidation from './field-validation';

const onDateChange = (props, date) =>
    props.onChange({ target: { value: date } });

const onSelectChange = (props, { value: { id } }) =>
    props.onChange({ target: { value: id } });


const Text = props =>
    <TextInput {...props} onDOMChange={props.onChange} />;
const Date = props =>
    <DateTime {...props} onChange={partial(onDateChange, props)} />;

const SelectField = observer(({ collection, value, ...otherProps }) =>
    <Select
        {...otherProps}
        value={value ? get(find(collection, { id: value }), 'label', '') : ''}
        options={collection}
        onChange={partial(onSelectChange, otherProps)}
    />,
);

const TypesMapping = {
    text:   Text,
    date:   Date,
    select: SelectField,
};


export default class FormField extends React.PureComponent {
    static defaultProps = {
        label:     '',
        className: '',
        fields:    null,
        type:      'text',
    }

    static propTypes = Object.assign({
        label: React.PropTypes.string,
        name:  React.PropTypes.string.isRequired,
        fields: FieldValidation,
        className: React.PropTypes.string,
        type: React.PropTypes.string,
    }, Col.PropTypes)

    render() {
        const {
            name, className, autoFocus, type, children, label,
            fields: { [`${name}`]: field },
            ...otherProps
        } = getColumnProps(this.props);
        const InputTag = TypesMapping[type] || TypesMapping.text;
        return (
            <div className={classnames('form-field', className)}>
                <Field
                    label={label || titleize(name)}
                    error={get(field, 'failProps.errorText')}
                >
                    <InputTag
                        name={name}
                        autoFocus={autoFocus}
                        value={field.value}
                        {...otherProps}
                        {...field.events}
                    />
                    {children}
                </Field>
            </div>
        );
    }
}
<commit_msg>parse the string to date<commit_after>import React from 'react';
import { observer } from 'mobx-react';
import { get, partial, map, find } from 'lodash';
import classnames from 'classnames';
import { Col, getColumnProps } from 'react-flexbox-grid';
import Field     from 'grommet/components/FormField';
import TextInput from 'grommet/components/TextInput';
import DateTime  from 'grommet/components/DateTime';
import Select from 'grommet/components/Select';
import moment from 'moment';
import { titleize } from '../lib/util';

import './form-field.scss';
import FieldValidation from './field-validation';

const onDateChange = (props, date) =>
    props.onChange({ target: { value: moment(date, props.format || 'M/D/YYYY h:mm a').toDate() } });

const onSelectChange = (props, { value: { id } }) =>
    props.onChange({ target: { value: id } });

const Text = props =>
    <TextInput {...props} onDOMChange={props.onChange} />;

const Date = props =>
    <DateTime {...props} onChange={partial(onDateChange, props)} />;

const SelectField = observer(({ collection, value, ...otherProps }) =>
    <Select
        {...otherProps}
        value={value ? get(find(collection, { id: value }), 'label', '') : ''}
        options={collection}
        onChange={partial(onSelectChange, otherProps)}
    />,
);

const TypesMapping = {
    text:   Text,
    date:   Date,
    select: SelectField,
};


export default class FormField extends React.PureComponent {
    static defaultProps = {
        label:     '',
        className: '',
        fields:    null,
        type:      'text',
    }

    static propTypes = Object.assign({
        label: React.PropTypes.string,
        name:  React.PropTypes.string.isRequired,
        fields: FieldValidation,
        className: React.PropTypes.string,
        type: React.PropTypes.string,
    }, Col.PropTypes)

    render() {
        const {
            name, className, autoFocus, type, children, label,
            fields: { [`${name}`]: field },
            ...otherProps
        } = getColumnProps(this.props);
        const InputTag = TypesMapping[type] || TypesMapping.text;
        return (
            <div className={classnames('form-field', className)}>
                <Field
                    label={label || titleize(name)}
                    error={get(field, 'failProps.errorText')}
                >
                    <InputTag
                        name={name}
                        autoFocus={autoFocus}
                        value={field.value}
                        {...otherProps}
                        {...field.events}
                    />
                    {children}
                </Field>
            </div>
        );
    }
}

{'fraction_non_alphanumeric': 0.13729162764562652, 'fraction_numerical': 0.0, 'mean_word_length': 2.0462065031374785, 'pattern_counts': {'":': 0, '<': 19, '<?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': '1771985', 'n_tokens_mistral': 1465, 'n_tokens_neox': 1441, 'n_words': 346}