1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import { FormGroup, FormControl, Button } from 'react-bootstrap'; |
2 import { FormGroup, FormControl, Button } from 'react-bootstrap'; |
3 |
3 |
4 class CategoriesTooltip extends Component { |
4 class CategoriesTooltip extends Component { |
5 |
5 |
|
6 state = { |
|
7 activeCategory: null, |
|
8 showCommentControl: false |
|
9 } |
|
10 |
|
11 componentDidUpdate = () => { |
|
12 if (this.state.showCommentControl) { |
|
13 this.commentControl.focus(); |
|
14 } |
|
15 } |
|
16 |
|
17 isCategoryActive = (category) => { |
|
18 return this.state.activeCategory && this.state.activeCategory.key === category.key |
|
19 } |
|
20 |
6 onButtonClick = (category) => { |
21 onButtonClick = (category) => { |
7 if (typeof this.props.onCategoryClick === 'function') { |
22 if (category.hasOwnProperty('hasComment') && category.hasComment === true) { |
8 this.props.onCategoryClick(category) |
23 this.setState({ |
|
24 activeCategory: this.state.activeCategory ? null : category, |
|
25 showCommentControl: !this.state.showCommentControl |
|
26 }) |
|
27 } else { |
|
28 if (typeof this.props.onCategoryClick === 'function') { |
|
29 this.props.onCategoryClick(category) |
|
30 } |
|
31 } |
|
32 } |
|
33 |
|
34 onSubmit = (e) => { |
|
35 e.preventDefault(); |
|
36 if (this.state.showCommentControl) { |
|
37 const comment = this.commentControl.value; |
|
38 const { activeCategory } = this.state; |
|
39 Object.assign(activeCategory, { comment: comment }); |
|
40 if (typeof this.props.onCategoryClick === 'function') { |
|
41 this.props.onCategoryClick(activeCategory) |
|
42 } |
9 } |
43 } |
10 } |
44 } |
11 |
45 |
12 render() { |
46 render() { |
13 return ( |
47 return ( |
14 <div className="categories-tooltip"> |
48 <div className="categories-tooltip"> |
15 <FormGroup className="buttons"> |
49 <form onSubmit={ this.onSubmit }> |
16 {this.props.categories.map((category) => |
50 <FormGroup className="buttons"> |
17 <Button key={ category.name } bsStyle="primary" style={{ backgroundColor: category.color }} |
51 {this.props.categories.map((category) => |
18 onClick={this.onButtonClick.bind(this, category)}>{ category.name }</Button> |
52 <Button |
19 )} |
53 key={ category.name } |
20 </FormGroup> |
54 bsStyle="primary" |
21 <FormGroup> |
55 style={{ backgroundColor: category.color }} |
22 <FormControl /> |
56 active={ this.isCategoryActive(category) } |
23 </FormGroup> |
57 onClick={ this.onButtonClick.bind(this, category) }>{ category.name }</Button> |
|
58 )} |
|
59 </FormGroup> |
|
60 {this.state.showCommentControl && |
|
61 <FormGroup> |
|
62 <FormControl inputRef={(ref) => { this.commentControl = ref; }} /> |
|
63 </FormGroup>} |
|
64 </form> |
24 </div> |
65 </div> |
25 ); |
66 ); |
26 } |
67 } |
27 } |
68 } |
28 |
69 |