<commit_before>import React, {PureComponent} from 'react'
import InputClickToEdit from 'src/shared/components/InputClickToEdit'
import {Dropdown} from 'src/shared/components/Dropdown'
import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'

interface TimeFormatOptions {
  text: string
}

const formatOptions: TimeFormatOptions[] = [
  {text: 'MM/DD/YYYY HH:mm:ss.ss'},
  {text: 'MM/DD/YYYY HH:mm'},
  {text: 'MM/DD/YYYY'},
  {text: 'h:mm:ss A'},
  {text: 'h:mm A'},
  {text: 'MMMM D, YYYY'},
  {text: 'MMMM D, YYYY h:mm A'},
  {text: 'dddd, MMMM D, YYYY h:mm A'},
  {text: 'Custom'},
]

interface Props {
  timeFormat: string
  onTimeFormatChange: (format: string) => void
}

interface State {
  customFormat: boolean
  format: string
}

class GraphOptionsTimeFormat extends PureComponent<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      format: this.props.timeFormat || formatOptions[0].text,
      customFormat: false,
    }
  }

  get onTimeFormatChange() {
    return this.props.onTimeFormatChange
  }

  handleChooseFormat = (formatOption: TimeFormatOptions) => {
    if (formatOption.text === 'Custom') {
      this.setState({customFormat: true})
    } else {
      this.setState({format: formatOption.text, customFormat: false})
      this.onTimeFormatChange(formatOption.text)
    }
  }

  render() {
    const {format, customFormat} = this.state
    const {onTimeFormatChange} = this.props
    const tipContent =
      'For information on formatting, see http://momentjs.com/docs/#/parsing/string-format/'

    return (
      <div className="form-group col-xs-12">
        <label>
          Time Format
          {customFormat &&
            <QuestionMarkTooltip
              tipID="Time Axis Format"
              tipContent={tipContent}
            />}
        </label>
        <Dropdown
          items={formatOptions}
          selected={customFormat ? 'Custom' : format}
          buttonColor="btn-default"
          buttonSize="btn-xs"
          className="dropdown-stretch"
          onChoose={this.handleChooseFormat}
        />
        {customFormat &&
          <div className="column-controls--section">
            <InputClickToEdit
              wrapperClass="column-controls-input "
              value={format}
              onUpdate={onTimeFormatChange}<commit_msg>check whether the time format is using a custom format or not<commit_after>import React, {PureComponent} from 'react'
import InputClickToEdit from 'src/shared/components/InputClickToEdit'
import {Dropdown} from 'src/shared/components/Dropdown'
import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'

interface TimeFormatOptions {
  text: string
}

const formatOptions: TimeFormatOptions[] = [
  {text: 'MM/DD/YYYY HH:mm:ss.ss'},
  {text: 'MM/DD/YYYY HH:mm'},
  {text: 'MM/DD/YYYY'},
  {text: 'h:mm:ss A'},
  {text: 'h:mm A'},
  {text: 'MMMM D, YYYY'},
  {text: 'MMMM D, YYYY h:mm A'},
  {text: 'dddd, MMMM D, YYYY h:mm A'},
  {text: 'Custom'},
]

interface Props {
  timeFormat: string
  onTimeFormatChange: (format: string) => void
}

interface State {
  customFormat: boolean
  format: string
}

class GraphOptionsTimeFormat extends PureComponent<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      format: this.props.timeFormat || formatOptions[0].text,
      customFormat: false,
    }
  }

  get onTimeFormatChange() {
    return this.props.onTimeFormatChange
  }

  handleChooseFormat = (formatOption: TimeFormatOptions) => {
    if (formatOption.text === 'Custom') {
      this.setState({customFormat: true})
    } else {
      this.setState({format: formatOption.text, customFormat: false})
      this.onTimeFormatChange(formatOption.text)
    }
  }

  render() {
    const {format, customFormat} = this.state
    const {onTimeFormatChange} = this.props
    const tipContent =
      'For information on formatting, see http://momentjs.com/docs/#/parsing/string-format/'

    const formatOption = formatOptions.find(op => op.text === format)
    const showCustom = !formatOption || customFormat

    return (
      <div className="form-group col-xs-12">
        <label>
          Time Format
          {customFormat &&
            <QuestionMarkTooltip
              tipID="Time Axis Format"
              tipContent={tipContent}
            />}
        </label>
        <Dropdown
          items={formatOptions}
          selected={showCustom ? 'Custom' : format}
          buttonColor="btn-default"
          buttonSize="btn-xs"
          className="dropdown-stretch"
          onChoose={this.handleChooseFormat}
        />
        {showCustom &&
          <div className="column-controls--section">
            <InputClickToEdit
              wrapperClass="column-controls-input "
              value={format}
              onUpdate={onTimeFormatChange}
{'fraction_non_alphanumeric': 0.12484599589322382, 'fraction_numerical': 0.0012320328542094457, 'mean_word_length': 2.844514601420679, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 22, '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': '3135840', 'n_tokens_mistral': 1476, 'n_tokens_neox': 1463, 'n_words': 317}