<commit_before>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'react-bootstrap'
import { VelocityTransitionGroup } from 'velocity-react'

import DateTimePreview from './date-time-preview'
import SettingsPreview from './settings-preview'
import DateTimeModal from './date-time-modal'
import SettingsSelectorPanel from './settings-selector-panel'

export default class TabbedFormPanel extends Component {
  static propTypes = {
    icons: PropTypes.object
  }

  constructor (props) {
    super(props)
    this.state = {
      expandedDisplay: null
    }
  }

  _onEditDateTimeClick = () => {
    this.setState({ expandedDisplay: 'DATETIME' })
  }

  _onEditSettingsClick = () => {
    this.setState({ expandedDisplay: 'SETTINGS' })
  }

  _onHideClick = () => {
    this.setState({ expandedDisplay: null })
  }

  render () {
    const { expandedDisplay } = this.state
    const { icons } = this.props

    return (
      <div className='tabbed-form-panel'>
        <div className='tab-row'>
          <div className={`tab${expandedDisplay === 'DATETIME' ? ' selected' : ''}`}>
            <DateTimePreview
              onClick={this._onEditDateTimeClick}
            />
          </div>
          <div className={`tab${expandedDisplay === 'SETTINGS' ? ' selected' : ''}`}>
            <SettingsPreview
              icons={icons}
              onClick={this._onEditSettingsClick}
            />
          </div>
        </div>
        <VelocityTransitionGroup enter={{animation: 'slideDown'}} leave={{animation: 'slideUp'}}>
          {expandedDisplay && (
            <div className='active-panel'>
              {expandedDisplay === 'DATETIME' && (<DateTimeModal />)}
              {expandedDisplay === 'SETTINGS' && (<SettingsSelectorPanel icons={icons} />)}
              <div className='hide-button-row'>
                <Button className='hide-button clear-button-formatting' onClick={this._onHideClick}>
                  <i className='fa fa-caret-up' /> Hide Settings
                </Button>
              </div>
            </div>
          )}
        </VelocityTransitionGroup>
      </div>
    )
  }
}<commit_msg>refactor(form): allow edit button to toggle settings panel visibility<commit_after>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Button } from 'react-bootstrap'
import { VelocityTransitionGroup } from 'velocity-react'

import DateTimePreview from './date-time-preview'
import SettingsPreview from './settings-preview'
import DateTimeModal from './date-time-modal'
import SettingsSelectorPanel from './settings-selector-panel'

export default class TabbedFormPanel extends Component {
  static propTypes = {
    icons: PropTypes.object
  }

  constructor (props) {
    super(props)
    this.state = {
      expandedDisplay: null
    }
  }

  _onEditDateTimeClick = () => {
    const expandedDisplay = this._isExpanded('DATETIME')
      ? null
      : 'DATETIME'
    this.setState({ expandedDisplay })
  }

  _onEditSettingsClick = () => {
    const expandedDisplay = this._isExpanded('SETTINGS')
      ? null
      : 'SETTINGS'
    this.setState({ expandedDisplay })
  }

  _isExpanded = (value) => this.state.expandedDisplay === value

  _onHideClick = () => this.setState({ expandedDisplay: null })

  render () {
    const { expandedDisplay } = this.state
    const { icons } = this.props

    return (
      <div className='tabbed-form-panel'>
        <div className='tab-row'>
          <div className={`tab${this._isExpanded('DATETIME') ? ' selected' : ''}`}>
            <DateTimePreview
              onClick={this._onEditDateTimeClick}
            />
          </div>
          <div className={`tab${this._isExpanded('SETTINGS') ? ' selected' : ''}`}>
            <SettingsPreview
              icons={icons}
              onClick={this._onEditSettingsClick}
            />
          </div>
        </div>
        <VelocityTransitionGroup
          enter={{ animation: 'slideDown' }}
          leave={{ animation: 'slideUp' }}>
          {expandedDisplay && (
            <div className='active-panel'>
              {this._isExpanded('DATETIME') && (<DateTimeModal />)}
              {this._isExpanded('SETTINGS') && (<SettingsSelectorPanel icons={icons} />)}
              <div className='hide-button-row'>
                <Button className='hide-button clear-button-formatting' onClick={this._onHideClick}>
                  <i className='fa fa-caret-up' /> Hide Settings
                </Button>
              </div>
            </div>
          )}
        </VelocityTransitionGroup>
      </div>
    )
  }
}
{'fraction_non_alphanumeric': 0.136020694115111, 'fraction_numerical': 0.0, 'mean_word_length': 2.389335281227173, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 52, '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': '398959', 'n_tokens_mistral': 1273, 'n_tokens_neox': 1269, 'n_words': 258}