1 import React, { Component } from 'react';

     2 

     3 class CategoriesTooltip extends Component {

     4 

     5   state = {

     6     activeCategory: null,

     7     showCommentControl: false

     8   }

     9 

    10   componentDidUpdate = () => {

    11     if (this.state.showCommentControl) {

    12       this.commentControl.focus();

    13     }

    14   }

    15 

    16   isCategoryActive = (category) => {

    17     return this.state.activeCategory && this.state.activeCategory.key === category.key

    18   }

    19 

    20   onButtonClick = (category) => {

    21     if (category.hasOwnProperty('hasComment') && category.hasComment === true) {

    22       this.setState({

    23         activeCategory: this.state.activeCategory ? null : category,

    24         showCommentControl: !this.state.showCommentControl

    25       })

    26     } else {

    27       if (typeof this.props.onCategoryClick === 'function') {

    28         this.props.onCategoryClick(category)

    29       }

    30     }

    31   }

    32 

    33   onSubmit = (e) => {

    34     e.preventDefault();

    35     if (this.state.showCommentControl) {

    36       const comment = this.commentControl.value;

    37       const { activeCategory } = this.state;

    38       Object.assign(activeCategory, { comment: comment });

    39       if (typeof this.props.onCategoryClick === 'function') {

    40         this.props.onCategoryClick(activeCategory)

    41       }

    42     }

    43   }

    44 

    45   render() {

    46     return (

    47       <div className="categories-tooltip">

    48         <form onSubmit={ this.onSubmit }>

    49           <div className="form-group buttons">

    50           {this.props.categories.map((category) =>

    51             <button type="button"

    52               key={ category.key }

    53               className="btn btn-sm text-secondary"

    54               style={{ backgroundColor: category.color }}

    55               active={ this.isCategoryActive(category)  }

    56               onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</button>

    57           )}

    58           </div>

    59           {this.state.showCommentControl &&

    60           <div className="form-group">

    61             <input className="form-control"

    62             // inputRef={(ref) => { this.commentControl = ref; }}

    63             ref={(commentControl) => { this.commentControl = commentControl; }}/>

    64           </div>}

    65         </form>

    66       </div>

    67     );

    68   }

    69 }

    70 

    71 export default CategoriesTooltip