<commit_before>import React, {Component, PropTypes} from 'react'
import classnames from 'classnames'
import moment from 'moment'

import OnClickOutside from 'shared/components/OnClickOutside'
import FancyScrollbar from 'shared/components/FancyScrollbar'
import CustomTimeRangeOverlay from 'shared/components/CustomTimeRangeOverlay'

import timeRanges from 'hson!shared/data/timeRanges.hson'
import {DROPDOWN_MENU_MAX_HEIGHT} from 'shared/constants/index'

class TimeRangeDropdown extends Component {
  constructor(props) {
    const {lower, upper} = props.selected

    super(props)

    this.state = {
      autobind: false,
      isOpen: false,
      isCustomTimeRangeOpen: false,
      customTimeRange:
        moment(props.selected.upper).isValid() &&
        moment(props.selected.lower).isValid()
          ? {
              lower,
              upper,
            }
          : {
              lower: '',
              upper: '',
            },
    }

    this.findTimeRangeInputValue = ::this.findTimeRangeInputValue
    this.handleSelection = ::this.handleSelection
    this.toggleMenu = ::this.toggleMenu
    this.showCustomTimeRange = ::this.showCustomTimeRange
    this.handleApplyCustomTimeRange = ::this.handleApplyCustomTimeRange
    this.handleToggleCustomTimeRange = ::this.handleToggleCustomTimeRange
    this.handleCloseCustomTimeRange = ::this.handleCloseCustomTimeRange
  }

  findTimeRangeInputValue({upper, lower}) {
    if (upper && lower) {
      const format = t =>
        moment(t.replace(/\'/g, '')).format('YYYY-MM-DD HH:mm')
      return `${format(lower)} - ${format(upper)}`
    }

    const selected = timeRanges.find(range => range.lower === lower)
    return selected ? selected.inputValue : 'Custom'
  }

  handleClickOutside() {
    this.setState({isOpen: false})
  }

  handleSelection(timeRange) {
    this.props.onChooseTimeRange(timeRange)
    this.setState({isOpen: false})
  }

  toggleMenu() {
    this.setState({isOpen: !this.state.isOpen})
  }

  showCustomTimeRange() {
    this.setState({isCustomTimeRangeOpen: true})
  }

  handleApplyCustomTimeRange(customTimeRange) {
    this.setState({customTimeRange})
    this.handleSelection({...customTimeRange})
  }

  handleToggleCustomTimeRange() {
    this.setState({isCustomTimeRangeOpen: !this.state.isCustomTimeRangeOpen})
  }

  handleCloseCustomTimeRange() {
    this.setState({isCustomTimeRangeOpen: false})
  }

  render() {
    const {selected, preventCustomTimeRange} = this.props
    const {isOpen, customTimeRange, isCustomTimeRangeOpen} = this.state

    return (
      <div className="time-range-dropdown">
        <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
          <div
            className="btn btn-sm btn-default dropdown-toggle"
            onClick={() => this.toggleMenu()}
          >
            <span className="icon clock" />
            <span className="dropdown-selected">
              {this.findTimeRangeInputValue(selected)}
            </span>
            <span className="caret" />
          </div>
          <ul className="dropdown-menu">
            <FancyScrollbar
              autoHide={false}
              autoHeight={true}
              maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
            >
              <li className="dropdown-header">Time Range</li>
              {preventCustomTimeRange
                ? null
                : <li
                    className={<commit_msg>Make time range dropdown wide enough to accommodate a custom range<commit_after>import React, {Component, PropTypes} from 'react'
import classnames from 'classnames'
import moment from 'moment'

import OnClickOutside from 'shared/components/OnClickOutside'
import FancyScrollbar from 'shared/components/FancyScrollbar'
import CustomTimeRangeOverlay from 'shared/components/CustomTimeRangeOverlay'

import timeRanges from 'hson!shared/data/timeRanges.hson'
import {DROPDOWN_MENU_MAX_HEIGHT} from 'shared/constants/index'

class TimeRangeDropdown extends Component {
  constructor(props) {
    const {lower, upper} = props.selected

    super(props)

    this.state = {
      autobind: false,
      isOpen: false,
      isCustomTimeRangeOpen: false,
      customTimeRange:
        moment(props.selected.upper).isValid() &&
        moment(props.selected.lower).isValid()
          ? {
              lower,
              upper,
            }
          : {
              lower: '',
              upper: '',
            },
    }

    this.findTimeRangeInputValue = ::this.findTimeRangeInputValue
    this.handleSelection = ::this.handleSelection
    this.toggleMenu = ::this.toggleMenu
    this.showCustomTimeRange = ::this.showCustomTimeRange
    this.handleApplyCustomTimeRange = ::this.handleApplyCustomTimeRange
    this.handleToggleCustomTimeRange = ::this.handleToggleCustomTimeRange
    this.handleCloseCustomTimeRange = ::this.handleCloseCustomTimeRange
  }

  findTimeRangeInputValue({upper, lower}) {
    if (upper && lower) {
      const format = t =>
        moment(t.replace(/\'/g, '')).format('YYYY-MM-DD HH:mm')
      return `${format(lower)} - ${format(upper)}`
    }

    const selected = timeRanges.find(range => range.lower === lower)
    return selected ? selected.inputValue : 'Custom'
  }

  handleClickOutside() {
    this.setState({isOpen: false})
  }

  handleSelection(timeRange) {
    this.props.onChooseTimeRange(timeRange)
    this.setState({isOpen: false})
  }

  toggleMenu() {
    this.setState({isOpen: !this.state.isOpen})
  }

  showCustomTimeRange() {
    this.setState({isCustomTimeRangeOpen: true})
  }

  handleApplyCustomTimeRange(customTimeRange) {
    this.setState({customTimeRange})
    this.handleSelection({...customTimeRange})
  }

  handleToggleCustomTimeRange() {
    this.setState({isCustomTimeRangeOpen: !this.state.isCustomTimeRangeOpen})
  }

  handleCloseCustomTimeRange() {
    this.setState({isCustomTimeRangeOpen: false})
  }

  render() {
    const {selected, preventCustomTimeRange} = this.props
    const {isOpen, customTimeRange, isCustomTimeRangeOpen} = this.state

    return (
      <div className="time-range-dropdown">
        <div className={classnames('dropdown dropdown-290', {open: isOpen})}>
          <div
            className="btn btn-sm btn-default dropdown-toggle"
            onClick={() => this.toggleMenu()}
          >
            <span className="icon clock" />
            <span className="dropdown-selected">
              {this.findTimeRangeInputValue(selected)}
            </span>
            <span className="caret" />
          </div>
          <ul className="dropdown-menu">
            <FancyScrollbar
              autoHide={false}
              autoHeight={true}
              maxHeight={DROPDOWN_MENU_MAX_HEIGHT}
            >
              <li className="dropdown-header">Time Range</li>
              {preventCustomTimeRange
                ? null
                : <li
                    className={
{'fraction_non_alphanumeric': 0.11375775949184351, 'fraction_numerical': 0.0008661758336942399, 'mean_word_length': 2.7713663581927057, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 33, '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': '5822349', 'n_tokens_mistral': 1958, 'n_tokens_neox': 1932, 'n_words': 339}