<commit_before>const React = require('react');
const moment = require('moment-timezone/builds/moment-timezone-with-data.min');

const Calendar = require('./Calendar');
const Icon = require('./Icon');

const StyleConstants = require('../constants/Style');

const DatePicker = React.createClass({
  propTypes: {
    calendarStyle: React.PropTypes.object,
    closeOnDateSelect: React.PropTypes.bool,
    dateFormat: React.PropTypes.string,
    dateIcon: React.PropTypes.string,
    datePlaceholder: React.PropTypes.string,
    locale: React.PropTypes.string,
    minimumDate: React.PropTypes.number,
    onDateSelect: React.PropTypes.func,
    primaryColor: React.PropTypes.string,
    selectedDate: React.PropTypes.number,
    showIcons: React.PropTypes.bool,
    styles: React.PropTypes.object,
    timeFormat: React.PropTypes.string,
    timeIcon: React.PropTypes.string,
    timePlaceholder: React.PropTypes.string,
    timezone: React.PropTypes.string,
    timezoneFormat: React.PropTypes.oneOf(['abbr', 'name']),
    timezoneNames: React.PropTypes.object
  },

  getDefaultProps () {
    return {
      closeOnDateSelect: true,
      dateFormat: 'MMM D, YYYY',
      dateIcon: 'calendar',
      datePlaceholder: 'Select a Date',
      locale: 'en',
      onDateSelect () {},
      primaryColor: StyleConstants.Colors.PRIMARY,
      showIcons: true,
      timeFormat: 'LT',
      timeIcon: 'clock',
      timePlaceholder: 'Select a Time',
      timezone: moment.tz.guess(),
      timezoneNames: {
        EST: 'Eastern Standard Time',
        EDT: 'Eastern Daylight Time',
        CST: 'Central Standard Time',
        CDT: 'Central Daylight Time',
        MST: 'Mountain Standard Time',
        MDT: 'Mountain Daylight Time',
        PST: 'Pacific Standard Time',
        PDT: 'Pacific Daylight Time'
      }
    };
  },

  getInitialState () {
    return {
      showCalendar: false,
      editTime: false
    };
  },

  _handleDateBlur () {
    this.setState({
      showCalendar: false
    });
  },

  _handleDateFocus () {
    this.setState({
      showCalendar: true
    });
  },

  _handleDateSelect (date, e) {
    e.stopPropagation();

    if (this.props.closeOnDateSelect) {
      this.refs.dateSelect.blur();

      this.setState({
        showCalendar: false
      });
    }

    const hour = this.props.selectedDate ? moment.unix(this.props.selectedDate).hour() : 0;
    const minutes = this.props.selectedDate ? moment.unix(this.props.selectedDate).minute() : 0;

    this.props.onDateSelect(moment.unix(date).hour(hour).minute(minutes).seconds(0).unix());
  },

  _handleTimeBlur () {
    this.setState({
      editTime: false
    });
  },

  _handleTimeFocus () {
    this.setState({
      editTime: true
    });
  },

  _handleTimeSelect (e) {
    const selectedDate = this.props.selectedDate ? moment.unix(this.props.selectedDate) : moment();
    const value = e.target.value.toLowerCase().replace('.', '');

    const time = value.split(':');
    const pm = value.includes('pm');
    const hour = pm ? Number(time[0]) + 12 : Number(time[0]);
    const minute = Number(time[1].substring(0, 2));
    const date = selectedDate.hour(hour).minute(minute).second(0).unix();

    this.setState({
      editTime: false
    });

    this.props.onDateSelect(date);
  },

  _getTimezone (date) {
    const timezoneAbbr = date ? moment.unix(date).tz(this.props.timezone).format('z') : moment().tz(this.props.timezone).format('z');

    if (this.props.timezoneFormat === 'name') {
      return this.props.timezoneNames[timezoneAbbr] || timezoneAbbr;
    } else if (this.props.timezoneFormat === 'abbr') {
      return timezoneAbbr;
    } else {
      return null;
    }
  },

  render () {
    const styles = this.styles();

    return (
      <div style={styles.component}>
        <div
          onBlur={this._handleDateBlur}
          onClick={this._handleDateClick}
          onFocus={this._handleDateFocus}
          ref='dateSelect'
          style={Object.assign({}, styles.selectWrapper, this.state.showCalendar ? styles.activeSelectWrapper : null)}
          tabIndex={0}
        >
          {this.props.showIcons ? (
            <Icon
              size={20}
              style={styles.selectedIcon}
              type={this.props.dateIcon}
            />
          ) : null}
          <div style={styles.selectedText}>
            {this.props.selectedDate ? moment.unix(this.props.selectedDate).format(this.props.dateFormat) : this.props.datePlaceholder}
          </div>
          <Icon
            size={20}
            style={styles.selectedDateCaret}
            type={this.state.showCalendar ? 'caret-up' : 'caret-down'}
          />
        {this.state.showCalendar ? (
          <Calendar
            {...this.props}
            onDateSelect={this._handleDateSelect}
            style={styles.calendar}
          />
        ) : null}
        </div>
        <div>
          {this.props.children}
        </div>
        <div
          onBlur={this._handleTimeBlur}
          onFocus={this._handleTimeFocus}
          style={Object.assign({}, styles.selectWrapper, this.state.editTime ? styles.activeSelectWrapper : null)}
          tabIndex={0}
        >
          {this.props.showIcons ? (
            <Icon
              size={20}
              style={styles.selectedIcon}
              type='clock'<commit_msg>use timeIcon prop<commit_after>const React = require('react');
const moment = require('moment-timezone/builds/moment-timezone-with-data.min');

const Calendar = require('./Calendar');
const Icon = require('./Icon');

const StyleConstants = require('../constants/Style');

const DatePicker = React.createClass({
  propTypes: {
    calendarStyle: React.PropTypes.object,
    closeOnDateSelect: React.PropTypes.bool,
    dateFormat: React.PropTypes.string,
    dateIcon: React.PropTypes.string,
    datePlaceholder: React.PropTypes.string,
    locale: React.PropTypes.string,
    minimumDate: React.PropTypes.number,
    onDateSelect: React.PropTypes.func,
    primaryColor: React.PropTypes.string,
    selectedDate: React.PropTypes.number,
    showIcons: React.PropTypes.bool,
    styles: React.PropTypes.object,
    timeFormat: React.PropTypes.string,
    timeIcon: React.PropTypes.string,
    timePlaceholder: React.PropTypes.string,
    timezone: React.PropTypes.string,
    timezoneFormat: React.PropTypes.oneOf(['abbr', 'name']),
    timezoneNames: React.PropTypes.object
  },

  getDefaultProps () {
    return {
      closeOnDateSelect: true,
      dateFormat: 'MMM D, YYYY',
      dateIcon: 'calendar',
      datePlaceholder: 'Select a Date',
      locale: 'en',
      onDateSelect () {},
      primaryColor: StyleConstants.Colors.PRIMARY,
      showIcons: true,
      timeFormat: 'LT',
      timeIcon: 'clock',
      timePlaceholder: 'Select a Time',
      timezone: moment.tz.guess(),
      timezoneNames: {
        EST: 'Eastern Standard Time',
        EDT: 'Eastern Daylight Time',
        CST: 'Central Standard Time',
        CDT: 'Central Daylight Time',
        MST: 'Mountain Standard Time',
        MDT: 'Mountain Daylight Time',
        PST: 'Pacific Standard Time',
        PDT: 'Pacific Daylight Time'
      }
    };
  },

  getInitialState () {
    return {
      showCalendar: false,
      editTime: false
    };
  },

  _handleDateBlur () {
    this.setState({
      showCalendar: false
    });
  },

  _handleDateFocus () {
    this.setState({
      showCalendar: true
    });
  },

  _handleDateSelect (date, e) {
    e.stopPropagation();

    if (this.props.closeOnDateSelect) {
      this.refs.dateSelect.blur();

      this.setState({
        showCalendar: false
      });
    }

    const hour = this.props.selectedDate ? moment.unix(this.props.selectedDate).hour() : 0;
    const minutes = this.props.selectedDate ? moment.unix(this.props.selectedDate).minute() : 0;

    this.props.onDateSelect(moment.unix(date).hour(hour).minute(minutes).seconds(0).unix());
  },

  _handleTimeBlur () {
    this.setState({
      editTime: false
    });
  },

  _handleTimeFocus () {
    this.setState({
      editTime: true
    });
  },

  _handleTimeSelect (e) {
    const selectedDate = this.props.selectedDate ? moment.unix(this.props.selectedDate) : moment();
    const value = e.target.value.toLowerCase().replace('.', '');

    const time = value.split(':');
    const pm = value.includes('pm');
    const hour = pm ? Number(time[0]) + 12 : Number(time[0]);
    const minute = Number(time[1].substring(0, 2));
    const date = selectedDate.hour(hour).minute(minute).second(0).unix();

    this.setState({
      editTime: false
    });

    this.props.onDateSelect(date);
  },

  _getTimezone (date) {
    const timezoneAbbr = date ? moment.unix(date).tz(this.props.timezone).format('z') : moment().tz(this.props.timezone).format('z');

    if (this.props.timezoneFormat === 'name') {
      return this.props.timezoneNames[timezoneAbbr] || timezoneAbbr;
    } else if (this.props.timezoneFormat === 'abbr') {
      return timezoneAbbr;
    } else {
      return null;
    }
  },

  render () {
    const styles = this.styles();

    return (
      <div style={styles.component}>
        <div
          onBlur={this._handleDateBlur}
          onClick={this._handleDateClick}
          onFocus={this._handleDateFocus}
          ref='dateSelect'
          style={Object.assign({}, styles.selectWrapper, this.state.showCalendar ? styles.activeSelectWrapper : null)}
          tabIndex={0}
        >
          {this.props.showIcons ? (
            <Icon
              size={20}
              style={styles.selectedIcon}
              type={this.props.dateIcon}
            />
          ) : null}
          <div style={styles.selectedText}>
            {this.props.selectedDate ? moment.unix(this.props.selectedDate).format(this.props.dateFormat) : this.props.datePlaceholder}
          </div>
          <Icon
            size={20}
            style={styles.selectedDateCaret}
            type={this.state.showCalendar ? 'caret-up' : 'caret-down'}
          />
        {this.state.showCalendar ? (
          <Calendar
            {...this.props}
            onDateSelect={this._handleDateSelect}
            style={styles.calendar}
          />
        ) : null}
        </div>
        <div>
          {this.props.children}
        </div>
        <div
          onBlur={this._handleTimeBlur}
          onFocus={this._handleTimeFocus}
          style={Object.assign({}, styles.selectWrapper, this.state.editTime ? styles.activeSelectWrapper : null)}
          tabIndex={0}
        >
          {this.props.showIcons ? (
            <Icon
              size={20}
              style={styles.selectedIcon}
              type={this.props.timeIcon}
{'fraction_non_alphanumeric': 0.13724756918474196, 'fraction_numerical': 0.0035527299925205685, 'mean_word_length': 2.438444230151077, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 25, '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': '4870438', 'n_tokens_mistral': 3277, 'n_tokens_neox': 3222, 'n_words': 557}