<commit_before>/** ****************************************************************************
 * Select
 *
 * @author       <NAME> <<EMAIL>>
 * @file         Render a <select>
 * @flow
 ******************************************************************************/
'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import lodash from 'lodash';

import SelectOption from './SelectOption';
import OutsideClick from 'react-outsideclick';
import HighlightClick from 'react-highlight-click';

import dispatch from './dispatch';

// Lets animate it
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import cssClassNames from './select.css';

export default class Select extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: false
    };
  }

  getDefaultValue(props = this.props) {
    if(lodash.isObject(props.defaultValue)) {
      return props.defaultValue;
    } else {
      return {
        value: props.defaultValue,
        label: props.defaultValue
      };
    }
  }

  /**
   * Update the state and parent data
   *
   * @param     {Event}    event
   */
  handleChange(event) {
    this.updateState(event.target.value);
  }

  /**
   * Handle clicking a item in the list
   *
   * @param     {String}    value
   */
  handleClickItem(value) {
    this.updateState(value);
  }

  /**
   * Update the state and call our parent onChange event
   *
   * @param     {String}    value
   */
  updateState(value) {
    this.setState({
      active: false
    }, () => {
      if (this.props.disabled === true) {
        return;
      }
      let el = ReactDOM.findDOMNode(this.refs.input);
      el.value = value;
      dispatch(el, this.props.onChange);
    });
  }

  /**
   * Toggle open
   */
  toggleActive() {
    this.setState({
      active: !this.state.active
    });
  }

  handleOutsideClick() {
    this.setState({
      active: false
    });
  }

  getOptions() {
    let opts = this.props.options;

    // Ensure we always deal with an array of objects
    if (lodash.isString(this.props.options[0])) {
      opts = this.props.options.map((opt)=>{
        return {
          label: opt,
          value: opt
        };
      });
    }

    return opts;
  }

  /**
   * Render
   *
   * @return    {React}
   */
  render() {
    // Ensure it's an array of objects
    const opts = this.getOptions();

    // Ensure it's an object
    const defaultValue = this.getDefaultValue();

    // Check to see if the defaultValue is in the option list
    let value = lodash.find(opts, (opt) => opt.value === defaultValue.value);

    if (!value) {
      value = {
        label: '',
        value: ''
      }
    }

    // css class names
    const containerClasses = classNames(
      'select',
      cssClassNames.container,
      {
        [cssClassNames.disabled]: this.props.disabled,
        [cssClassNames.active]: this.state.active
      }
    );

    return (
      <OutsideClick
        className={containerClasses}
        onClick={this.handleOutsideClick.bind(this)} >
        {this.props.label.length > 0 ?
          <label className={cssClassNames.label}>
            {this.props.label}
          </label>
        : null}
        <HighlightClick
          className={'select--control ' + cssClassNames.control}
          onClick={this.toggleActive.bind(this)}>
            <div className={'select--value ' + cssClassNames.value}>{value.render || value.label}</div>
            <div className={'select--value-icon ' + this.props.iconClass + ' ' + cssClassNames.icon} />
        </HighlightClick>
        <ReactCSSTransitionGroup
          className={classNames('select--list', cssClassNames.list)}
          transitionName={cssClassNames}
          transitionEnterTimeout={this.props.transitionEnterTimeout}
          transitionLeaveTimeout={this.props.transitionLeaveTimeout}
          component='ul'>
            {(this.state.active ? opts : []).map((option) => {
              return (
                <SelectOption
                 {...option}
                 tag='li'
                 selected={option.value === defaultValue.value}
                 onClick={this.handleClickItem.bind(this, option.value)}
                 key={option.key || option.value} />
              )
            })}
        </ReactCSSTransitionGroup>
        <select
          ref='input'
          readOnly
          value={this.props.defaultValue}
          style={{'display' : 'none'}}>
         {opts.map((option) => {
           return (
             <SelectOption
               {...option}
               selected={option.value === defaultValue.value}
               key={option.key || option.value} />
           )
         })}
       </select>
      </OutsideClick>
    );
  }
}

Select.defaultProps = {
  iconClass: 'icon-keyboard_arrow_down',
  label: '',
  disabled: false,
  defaultValue: '',
  transitionEnterTimeout: 1,
  transitionLeaveTimeout: 1,
  options: [],
  onChange: function() {}
};<commit_msg>added option to pass complete icon component for drop down icon<commit_after>/** ****************************************************************************
 * Select
 *
 * @author       <NAME> <<EMAIL>>
 * @file         Render a <select>
 * @flow
 ******************************************************************************/
'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import lodash from 'lodash';

import SelectOption from './SelectOption';
import OutsideClick from 'react-outsideclick';
import HighlightClick from 'react-highlight-click';

import dispatch from './dispatch';

// Lets animate it
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import cssClassNames from './select.css';

export default class Select extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: false
    };
  }

  getDefaultValue(props = this.props) {
    if(lodash.isObject(props.defaultValue)) {
      return props.defaultValue;
    } else {
      return {
        value: props.defaultValue,
        label: props.defaultValue
      };
    }
  }

  /**
   * Update the state and parent data
   *
   * @param     {Event}    event
   */
  handleChange(event) {
    this.updateState(event.target.value);
  }

  /**
   * Handle clicking a item in the list
   *
   * @param     {String}    value
   */
  handleClickItem(value) {
    this.updateState(value);
  }

  /**
   * Update the state and call our parent onChange event
   *
   * @param     {String}    value
   */
  updateState(value) {
    this.setState({
      active: false
    }, () => {
      if (this.props.disabled === true) {
        return;
      }
      let el = ReactDOM.findDOMNode(this.refs.input);
      el.value = value;
      dispatch(el, this.props.onChange);
    });
  }

  /**
   * Toggle open
   */
  toggleActive() {
    this.setState({
      active: !this.state.active
    });
  }

  handleOutsideClick() {
    this.setState({
      active: false
    });
  }

  getOptions() {
    let opts = this.props.options;

    // Ensure we always deal with an array of objects
    if (lodash.isString(this.props.options[0])) {
      opts = this.props.options.map((opt)=>{
        return {
          label: opt,
          value: opt
        };
      });
    }

    return opts;
  }

  /**
   * Render
   *
   * @return    {React}
   */
  render() {
    // Ensure it's an array of objects
    const opts = this.getOptions();

    // Ensure it's an object
    const defaultValue = this.getDefaultValue();

    // Check to see if the defaultValue is in the option list
    let value = lodash.find(opts, (opt) => opt.value === defaultValue.value);

    if (!value) {
      value = {
        label: '',
        value: ''
      }
    }

    // css class names
    const containerClasses = classNames(
      'select',
      cssClassNames.container,
      {
        [cssClassNames.disabled]: this.props.disabled,
        [cssClassNames.active]: this.state.active
      }
    );

    return (
      <OutsideClick
        className={containerClasses}
        onClick={this.handleOutsideClick.bind(this)} >
        {this.props.label.length > 0 ?
          <label className={cssClassNames.label}>
            {this.props.label}
          </label>
        : null}
        <HighlightClick
          className={'select--control ' + cssClassNames.control}
          onClick={this.toggleActive.bind(this)}>
            <div className={'select--value ' + cssClassNames.value}>{value.render || value.label}</div>
            {this.props.icon !== null ?
              this.props.icon
            :
              <div className={'select--value-icon ' + this.props.iconClass + ' ' + cssClassNames.icon} />
            }
        </HighlightClick>
        <ReactCSSTransitionGroup
          className={classNames('select--list', cssClassNames.list)}
          transitionName={cssClassNames}
          transitionEnterTimeout={this.props.transitionEnterTimeout}
          transitionLeaveTimeout={this.props.transitionLeaveTimeout}
          component='ul'>
            {(this.state.active ? opts : []).map((option) => {
              return (
                <SelectOption
                 {...option}
                 tag='li'
                 selected={option.value === defaultValue.value}
                 onClick={this.handleClickItem.bind(this, option.value)}
                 key={option.key || option.value} />
              )
            })}
        </ReactCSSTransitionGroup>
        <select
          ref='input'
          readOnly
          value={this.props.defaultValue}
          style={{'display' : 'none'}}>
         {opts.map((option) => {
           return (
             <SelectOption
               {...option}
               selected={option.value === defaultValue.value}
               key={option.key || option.value} />
           )
         })}
       </select>
      </OutsideClick>
    );
  }
}

Select.defaultProps = {
  iconClass: 'icon-keyboard_arrow_down',
  icon: null,
  label: '',
  disabled: false,
  defaultValue: '',
  transitionEnterTimeout: 1,
  transitionLeaveTimeout: 1,
  options: [],
  onChange: function() {}
};
{'fraction_non_alphanumeric': 0.15786910790806388, 'fraction_numerical': 0.0007791195948578107, 'mean_word_length': 2.0986722993361497, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 53, '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': '7507286', 'n_tokens_mistral': 2931, 'n_tokens_neox': 2872, 'n_words': 595}