<commit_before>
import './_style.css';

import React, { Component } from 'react';
import TagColor from '../../components/tag-color/tag-color.js';
import RaisedButton from 'material-ui/lib/raised-button';

class TagColorCard extends Component {

  constructor() {
    super();
    this._onSelectColorName = ::this._onSelectColorName;
    this._onSelectColorClass = ::this._onSelectColorClass;
    this.state = {
      colorClass: '',
      colorName: 'Not yet selected'
    };

  }

   _onSelectColorName(){
    const {tagColor} = this.refs;
    let colorName = tagColor.getColor();
    if (colorName === '') {
      colorName = 'Not yet selected';
    }
    this.setState({'colorName': colorName});
  }

  _onSelectColorClass(color) {
    this.setState({colorClass: color});
  }

  render() {
    return (
      <div className="sohot-card mdl-card mdl-shadow--2dp">
        <div className="mdl-card__title">
          <h2 className="mdl-card__title-text">Tag Color</h2>
        </div>
        <div className="mdl-card__supporting-text">
          <TagColor ref="tagColor" onSelect={this._onSelectColorClass}/>
        </div>
        <div className="mdl-card__actions mdl-card--border">
          <RaisedButton
            label="Got Color Name"
            secondary={true}
            onClick={this._onSelectColorName}
          />
          <span className={'sohot-card__span ' + this.state.colorClass}>{this.state.colorName}</span>
        </div>
      </div>
    );
  }
}
<commit_msg>modify a style<commit_after>
import './_style.css';

import React, { Component } from 'react';
import TagColor from '../../components/tag-color/tag-color.js';
import RaisedButton from 'material-ui/lib/raised-button';

class TagColorCard extends Component {

  constructor() {
    super();
    this._onSelectColorName = ::this._onSelectColorName;
    this._onSelectColorClass = ::this._onSelectColorClass;
    this.state = {
      colorClass: '',
      colorName: 'Not yet selected'
    };

  }

   _onSelectColorName(){
    const {tagColor} = this.refs;
    let colorName = tagColor.getColor();
    if (colorName === '') {
      colorName = 'Not yet selected';
    }
    this.setState({'colorName': colorName});
  }

  _onSelectColorClass(color) {
    this.setState({colorClass: color});
  }

  render() {
    return (
      <div className="sohot-card mdl-card mdl-shadow--2dp">
        <div className="mdl-card__title">
          <h2 className="mdl-card__title-text">Tag Color</h2>
        </div>
        <div className="mdl-card__supporting-text">
          <TagColor ref="tagColor" onSelect={this._onSelectColorClass}/>
        </div>
        <div className="mdl-card__actions mdl-card--border">
          <RaisedButton
            label="Got Color Name"
            secondary={true}
            onClick={this._onSelectColorName}
          />
          <span className={'sohot-card__span mdl-shadow--2dp ' + this.state.colorClass}>
            {this.state.colorName}
          </span>
        </div>
      </div>
    );
  }
}

{'fraction_non_alphanumeric': 0.14550878355982763, 'fraction_numerical': 0.002320185614849188, 'mean_word_length': 2.571597633136095, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 31, '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': '358366', 'n_tokens_mistral': 946, 'n_tokens_neox': 935, 'n_words': 169}