<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import MessageListItem from './MessageListItem.react';
import TextField from 'material-ui/TextField';
import ExitIcon from 'material-ui/svg-icons/action/exit-to-app';
import UpIcon from 'material-ui/svg-icons/navigation/arrow-upward';
import DownIcon from 'material-ui/svg-icons/navigation/arrow-downward';
import * as Actions from '../../actions/';
import $ from 'jquery';
import AppBar from 'material-ui/AppBar';
import ScrollArea from 'react-scrollbar';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import IconButton from 'material-ui/IconButton';
import Popover from 'material-ui/Popover';
import Toggle from 'material-ui/Toggle';
import UserPreferencesStore from '../../stores/UserPreferencesStore';

function getMessageListItem(messages, markID) {
  return messages.map((message) => {
    return (
      <MessageListItem
        key={message.id}
        message={message}
        markID={markID}
      />
    );
  });
}

function searchMsgs(messages, matchString, isCaseSensitive) {
  let markingData = {
    allmsgs: [],
    markedIDs: [],
    markedIndices: [],
  };
  messages.forEach((msg, id) => {
    let orgMsgText = msg.text;
    let msgCopy = $.extend(true, {}, msg);
    let msgText = orgMsgText;
    if (orgMsgText) {
      if (!isCaseSensitive) {
        matchString = matchString.toLowerCase();
        msgText = msgText.toLowerCase();
      }
      let match = msgText.indexOf(matchString);
      if (match !== -1) {
        msgCopy.mark = {
          matchText: matchString,
          isCaseSensitive: isCaseSensitive
        };
        markingData.markedIDs.unshift(msgCopy.id);
        markingData.markedIndices.unshift(id);
      }
    }
    markingData.allmsgs.push(msgCopy);
  });
  return markingData;
}

class SearchSection extends Component {

  constructor(props) {
    super(props);
    this.state = {
      markedMsgs: this.props.messages,
      markedIDs: [],
      markedIndices: [],
      scrollLimit: 0,
      scrollIndex: -1,
      scrollID: null,
      caseSensitive: false,
      open: false,
      searchText:'',
      currTheme: UserPreferencesStore.getTheme(),
    };
    this.handleOptions = this.handleOptions.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.handleToggle = this.handleToggle.bind(this);
  }

  componentDidMount() {
    this._scrollToBottom();
  }

  componentWillMount() {
    switch(this.state.currTheme){
      case 'light':{
        document.body.className = 'white-body';
        break;
      }
      case 'dark':{
        document.body.className = 'dark-body';
        break;
      }
      default: {
          // do nothing
      }
    }
  }

  render() {

    const toggleStyles = {
      toggle: {
        margin: '2px',
        width: '160px',
        height: '30px'
      }
    };
    const searchstyle = {
      WebkitTextFillColor: 'white',
      color: 'white'
    }

    let markID = this.state.scrollID;
    let markedMessages = this.state.markedMsgs;
    let messageListItems = getMessageListItem(
                                  markedMessages,markID);
    let topBackground = this.state.currTheme;
    var backgroundCol;
    switch(topBackground){
      case 'light':{
        backgroundCol = '#607d8b';
        break;
      }
      case 'dark':{
        backgroundCol =  '#19324c';
        break;
      }
      default: {
          // do nothing
      }
    }

    const searchField = (
      <div style={{ lineHeight: '46px' }}>
        <TextField
          hintText="Search..."
          className="search"
          inputStyle={searchstyle}
          onChange={e => this._searchMsg(e)}
          value={this.state.searchText}
          style={{ marginTop: '-4px' }}
        />
      </div>
    );

    const Options = (
      <div style={{ marginTop: '-8px' }}>
        <IconButton
          tooltip="Back"
          iconStyle={{ fill: 'white' }}
          onTouchTap={this._onClickExit.bind(this)}>
          <ExitIcon />
        </IconButton>
        <IconButton
          tooltip="Options"
          iconStyle={{ fill: 'white' }}
          onTouchTap={this.handleOptions}>
          <MoreVertIcon />
        </IconButton>
        <Popover
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
          targetOrigin={{ horizontal: 'left', vertical: 'top' }}
          onRequestClose={this.handleRequestClose}
        >
          <Toggle
            label="Case Sensitive"
            style={toggleStyles.toggle}
            labelPosition="right"
            onToggle={this.handleToggle}
            toggled={this.state.caseSensitive}<commit_msg>Fixes:#327 focus search field on search mode (#328)<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import MessageListItem from './MessageListItem.react';
import TextField from 'material-ui/TextField';
import ExitIcon from 'material-ui/svg-icons/action/exit-to-app';
import UpIcon from 'material-ui/svg-icons/navigation/arrow-upward';
import DownIcon from 'material-ui/svg-icons/navigation/arrow-downward';
import * as Actions from '../../actions/';
import $ from 'jquery';
import AppBar from 'material-ui/AppBar';
import ScrollArea from 'react-scrollbar';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import IconButton from 'material-ui/IconButton';
import Popover from 'material-ui/Popover';
import Toggle from 'material-ui/Toggle';
import UserPreferencesStore from '../../stores/UserPreferencesStore';

function getMessageListItem(messages, markID) {
  return messages.map((message) => {
    return (
      <MessageListItem
        key={message.id}
        message={message}
        markID={markID}
      />
    );
  });
}

function searchMsgs(messages, matchString, isCaseSensitive) {
  let markingData = {
    allmsgs: [],
    markedIDs: [],
    markedIndices: [],
  };
  messages.forEach((msg, id) => {
    let orgMsgText = msg.text;
    let msgCopy = $.extend(true, {}, msg);
    let msgText = orgMsgText;
    if (orgMsgText) {
      if (!isCaseSensitive) {
        matchString = matchString.toLowerCase();
        msgText = msgText.toLowerCase();
      }
      let match = msgText.indexOf(matchString);
      if (match !== -1) {
        msgCopy.mark = {
          matchText: matchString,
          isCaseSensitive: isCaseSensitive
        };
        markingData.markedIDs.unshift(msgCopy.id);
        markingData.markedIndices.unshift(id);
      }
    }
    markingData.allmsgs.push(msgCopy);
  });
  return markingData;
}

class SearchSection extends Component {

  constructor(props) {
    super(props);
    this.state = {
      markedMsgs: this.props.messages,
      markedIDs: [],
      markedIndices: [],
      scrollLimit: 0,
      scrollIndex: -1,
      scrollID: null,
      caseSensitive: false,
      open: false,
      searchText:'',
      currTheme: UserPreferencesStore.getTheme(),
    };
    this.handleOptions = this.handleOptions.bind(this);
    this.handleRequestClose = this.handleRequestClose.bind(this);
    this.handleToggle = this.handleToggle.bind(this);
  }

  componentDidMount() {
    this._scrollToBottom();
  }

  componentWillMount() {
    switch(this.state.currTheme){
      case 'light':{
        document.body.className = 'white-body';
        break;
      }
      case 'dark':{
        document.body.className = 'dark-body';
        break;
      }
      default: {
          // do nothing
      }
    }
  }

  render() {

    const toggleStyles = {
      toggle: {
        margin: '2px',
        width: '160px',
        height: '30px'
      }
    };
    const searchstyle = {
      WebkitTextFillColor: 'white',
      color: 'white'
    }

    let markID = this.state.scrollID;
    let markedMessages = this.state.markedMsgs;
    let messageListItems = getMessageListItem(
                                  markedMessages,markID);
    let topBackground = this.state.currTheme;
    var backgroundCol;
    switch(topBackground){
      case 'light':{
        backgroundCol = '#607d8b';
        break;
      }
      case 'dark':{
        backgroundCol =  '#19324c';
        break;
      }
      default: {
          // do nothing
      }
    }

    const searchField = (
      <div style={{ lineHeight: '46px' }}>
        <TextField
          hintText="Search..."
          className="search"
          inputStyle={searchstyle}
          onChange={e => this._searchMsg(e)}
          value={this.state.searchText}
          style={{ marginTop: '-4px' }}
          autoFocus
        />
      </div>
    );

    const Options = (
      <div style={{ marginTop: '-8px' }}>
        <IconButton
          tooltip="Back"
          iconStyle={{ fill: 'white' }}
          onTouchTap={this._onClickExit.bind(this)}>
          <ExitIcon />
        </IconButton>
        <IconButton
          tooltip="Options"
          iconStyle={{ fill: 'white' }}
          onTouchTap={this.handleOptions}>
          <MoreVertIcon />
        </IconButton>
        <Popover
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
          targetOrigin={{ horizontal: 'left', vertical: 'top' }}
          onRequestClose={this.handleRequestClose}
        >
          <Toggle
            label="Case Sensitive"
            style={toggleStyles.toggle}
            labelPosition="right"
            onToggle={this.handleToggle}
            toggled={this.state.caseSensitive}
{'fraction_non_alphanumeric': 0.1288477537437604, 'fraction_numerical': 0.005199667221297837, 'mean_word_length': 2.287863247863248, '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': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6029401', 'n_tokens_mistral': 2831, 'n_tokens_neox': 2808, 'n_words': 551}