<commit_before>import React from 'react';
import { ControlLabel, InputGroup, Button, Glyphicon } from 'react-bootstrap';

import Moment from 'moment';
import DateTime from 'react-datetime';

var DateControl = React.createClass({
  propTypes: {
    id: React.PropTypes.string.isRequired,
    date: React.PropTypes.string,
    format: React.PropTypes.string,
    className: React.PropTypes.string,
    label: React.PropTypes.string,
    onChange: React.PropTypes.func,
    updateState: React.PropTypes.func,
    placeholder: React.PropTypes.string,
    title: React.PropTypes.string,
    disabled: React.PropTypes.bool,
    isValidDate: React.PropTypes.func,
  },

  clicked() {
    if (!this.props.disabled) {
      this.input.focus();
    }
  },

  dateChanged(date) {
    var moment = Moment(date);
    var dateString = (moment && moment.isValid()) ? moment.format(this.props.format || 'YYYY-MM-DD') : date;

    // On change listener
    if (this.props.onChange) {
      this.props.onChange(dateString, this.props.id);
    }

    // Update state
    if (this.props.updateState) {
      this.props.updateState({
        [this.props.id]: dateString,
      });
    }
  },

  render() {
    var date = Moment.utc(this.props.date);
    if (!date || !date.isValid()) { date = ''; }

    var format = this.props.format || 'YYYY-MM-DD';

    var placeholder = this.props.placeholder || 'yyyy-mm-dd';
    var disabled = this.props.disabled;

    return <div className={ `date-control ${this.props.className || ''}` } id={ this.props.id }>
      {(() => {
        // Inline label
        if (this.props.label) { return <ControlLabel>{ this.props.label }</ControlLabel>; }
      })()}
      <InputGroup>
        <DateTime value={ date } dateFormat={ format } timeFormat={ false } closeOnSelect={ true } onChange={ this.dateChanged }
          inputProps={{ placeholder: placeholder, disabled: disabled, ref: input => { this.input = input; } }} isValidDate={ this.props.isValidDate }
        />
        <InputGroup.Button>
          <Button onClick={ this.clicked }><Glyphicon glyph="calendar" title={ this.props.title }/></Button>
        </InputGroup.Button>
      </InputGroup>
    </div>;
  },
});


export default DateControl;
<commit_msg>fix ability to type values into date textbox<commit_after>import React from 'react';
import { ControlLabel, InputGroup, Button, Glyphicon } from 'react-bootstrap';

import _ from 'lodash';
import Moment from 'moment';
import DateTime from 'react-datetime';

var DateControl = React.createClass({
  propTypes: {
    id: React.PropTypes.string.isRequired,
    date: React.PropTypes.string,
    format: React.PropTypes.string,
    className: React.PropTypes.string,
    label: React.PropTypes.string,
    onChange: React.PropTypes.func,
    updateState: React.PropTypes.func,
    placeholder: React.PropTypes.string,
    title: React.PropTypes.string,
    disabled: React.PropTypes.bool,
    isValidDate: React.PropTypes.func,
  },

  clicked() {
    if (!this.props.disabled) {
      this.input.focus();
    }
  },

  dateChanged(date) {
    // ignore invalid dates
    if (_.isString(date) || !date || !date.isValid()) {
      return;
    }
    
    var dateString = date.format(this.props.format || 'YYYY-MM-DD');
    this.notifyValueChanged(dateString);
  },
  
  dateBlurred(date) {
    // when focus leaves input, if date is invalid, reset value to empty string
    if (_.isString(date) || !date || !date.isValid()) {
      this.notifyValueChanged('');
    }
  },

  notifyValueChanged(dateString) {
    // On change listener
    if (this.props.onChange) {
      this.props.onChange(dateString, this.props.id);
    }

    // Update state
    if (this.props.updateState) {
      this.props.updateState({
        [this.props.id]: dateString,
      });
    }
  },

  render() {
    var date = Moment.utc(this.props.date);
    var format = this.props.format || 'YYYY-MM-DD';

    var placeholder = this.props.placeholder || 'yyyy-mm-dd';
    var disabled = this.props.disabled;

    return <div className={ `date-control ${this.props.className || ''}` } id={ this.props.id }>
      {(() => {
        // Inline label
        if (this.props.label) { return <ControlLabel>{ this.props.label }</ControlLabel>; }
      })()}
      <InputGroup>
        <DateTime value={ date } dateFormat={ format } timeFormat={ false } closeOnSelect={ true } onChange={ this.dateChanged } onBlur={ this.dateBlurred }
          inputProps={{ placeholder: placeholder, disabled: disabled, ref: input => { this.input = input; } }} isValidDate={ this.props.isValidDate }
        />
        <InputGroup.Button>
          <Button onClick={ this.clicked }><Glyphicon glyph="calendar" title={ this.props.title }/></Button>
        </InputGroup.Button>
      </InputGroup>
    </div>;
  },
});


export default DateControl;

{'fraction_non_alphanumeric': 0.15040397762585456, 'fraction_numerical': 0.0, 'mean_word_length': 2.9476696647587897, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 31, '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': '7306886', 'n_tokens_mistral': 1489, 'n_tokens_neox': 1477, 'n_words': 323}