diff -r 3b3999550508 -r e04714a1d4eb client/src/components/CategoriesTooltip.js --- a/client/src/components/CategoriesTooltip.js Thu Jun 08 17:57:57 2017 +0200 +++ b/client/src/components/CategoriesTooltip.js Thu Jun 08 18:54:36 2017 +0200 @@ -3,24 +3,65 @@ class CategoriesTooltip extends Component { + state = { + activeCategory: null, + showCommentControl: false + } + + componentDidUpdate = () => { + if (this.state.showCommentControl) { + this.commentControl.focus(); + } + } + + isCategoryActive = (category) => { + return this.state.activeCategory && this.state.activeCategory.key === category.key + } + onButtonClick = (category) => { - if (typeof this.props.onCategoryClick === 'function') { - this.props.onCategoryClick(category) + if (category.hasOwnProperty('hasComment') && category.hasComment === true) { + this.setState({ + activeCategory: this.state.activeCategory ? null : category, + showCommentControl: !this.state.showCommentControl + }) + } else { + if (typeof this.props.onCategoryClick === 'function') { + this.props.onCategoryClick(category) + } + } + } + + onSubmit = (e) => { + e.preventDefault(); + if (this.state.showCommentControl) { + const comment = this.commentControl.value; + const { activeCategory } = this.state; + Object.assign(activeCategory, { comment: comment }); + if (typeof this.props.onCategoryClick === 'function') { + this.props.onCategoryClick(activeCategory) + } } } render() { return (