client/src/components/CategoriesTooltip.js
changeset 143 cfcbf4bc66f1
parent 25 e04714a1d4eb
child 161 a642639dbc07
equal deleted inserted replaced
142:56850f5c73f6 143:cfcbf4bc66f1
     1 import React, { Component } from 'react';
     1 import React, { Component } from 'react';
     2 import { FormGroup, FormControl, Button } from 'react-bootstrap';
       
     3 
     2 
     4 class CategoriesTooltip extends Component {
     3 class CategoriesTooltip extends Component {
     5 
     4 
     6   state = {
     5   state = {
     7     activeCategory: null,
     6     activeCategory: null,
    45 
    44 
    46   render() {
    45   render() {
    47     return (
    46     return (
    48       <div className="categories-tooltip">
    47       <div className="categories-tooltip">
    49         <form onSubmit={ this.onSubmit }>
    48         <form onSubmit={ this.onSubmit }>
    50           <FormGroup className="buttons">
    49           <div className="form-group buttons">
    51           {this.props.categories.map((category) =>
    50           {this.props.categories.map((category) =>
    52             <Button
    51             <button type="button"
    53               key={ category.name }
    52               key={ category.name }
    54               bsStyle="primary"
    53               className="btn btn-primary"
    55               style={{ backgroundColor: category.color }}
    54               style={{ backgroundColor: category.color }}
    56               active={ this.isCategoryActive(category)  }
    55               active={ this.isCategoryActive(category)  }
    57               onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</Button>
    56               onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</button>
    58           )}
    57           )}
    59           </FormGroup>
    58           </div>
    60           {this.state.showCommentControl &&
    59           {this.state.showCommentControl &&
    61           <FormGroup>
    60           <div className="form-group">
    62             <FormControl inputRef={(ref) => { this.commentControl = ref; }} />
    61             <input className="form-control"
    63           </FormGroup>}
    62             // inputRef={(ref) => { this.commentControl = ref; }}
       
    63             ref={(commentControl) => { this.commentControl = commentControl; }}/>
       
    64           </div>}
    64         </form>
    65         </form>
    65       </div>
    66       </div>
    66     );
    67     );
    67   }
    68   }
    68 }
    69 }