1 import React, {Component} from 'react'; |
1 import React, {Component} from 'react'; |
2 import { Form, FormGroup, Button } from 'react-bootstrap'; |
2 import { Form, FormGroup, Button, Label, Row, Col } from 'react-bootstrap'; |
3 import { Plain } from 'slate'; |
3 import moment from 'moment'; |
4 |
4 |
5 import PropTypes from 'prop-types'; |
5 import PropTypes from 'prop-types'; |
6 import SlateEditor from './SlateEditor'; |
6 import SlateEditor from './SlateEditor'; |
7 |
7 |
8 class NoteInput extends Component { |
8 class NoteInput extends Component { |
9 |
9 |
10 state = { |
10 state = { |
11 buttonDisabled: false |
11 buttonDisabled: false, |
|
12 time: moment().format('H:mm:ss'), |
|
13 startedAt: null, |
|
14 finishedAt: null, |
12 } |
15 } |
13 |
16 |
14 onChange = (state) => { |
17 onEditorChange = (e) => { |
15 const text = Plain.serialize(state); |
18 this.setState({ |
16 this.setState({ buttonDisabled: text.length === 0 }); |
19 buttonDisabled: e.state.document.length === 0, |
|
20 startedAt: e.startedAt, |
|
21 finishedAt: e.finishedAt |
|
22 }); |
17 } |
23 } |
18 |
24 |
19 onAddNoteClick = () => { |
25 onAddNoteClick = () => { |
20 const plain = this.refs.editor.asPlain(); |
26 const plain = this.refs.editor.asPlain(); |
21 const raw = this.refs.editor.asRaw(); |
27 const raw = this.refs.editor.asRaw(); |
22 |
28 |
23 this.props.addNote(this.props.session, { |
29 this.props.addNote(this.props.session, { |
24 plain: plain, |
30 plain: plain, |
25 raw: raw |
31 raw: raw, |
|
32 startedAt: this.state.startedAt, |
|
33 finishedAt: moment().format('H:mm:ss') |
26 }); |
34 }); |
27 |
35 |
28 this.refs.editor.clear(); |
36 this.refs.editor.clear(); |
29 setTimeout(() => this.refs.editor.focus(), 250); |
37 setTimeout(() => this.refs.editor.focus(), 250); |
30 } |
38 } |
31 |
39 |
32 componentDidMount() { |
40 componentDidMount() { |
33 const text = this.refs.editor.asPlain(); |
41 const text = this.refs.editor.asPlain(); |
34 this.setState({ buttonDisabled: text.length === 0 }); |
42 this.setState({ buttonDisabled: text.length === 0 }); |
|
43 setInterval(() => { |
|
44 const time = moment().format('H:mm:ss'); |
|
45 this.setState({ time }); |
|
46 }, 1000); |
|
47 } |
|
48 |
|
49 renderTiming() { |
|
50 if (this.state.startedAt && this.state.finishedAt) { |
|
51 return ( |
|
52 <span> |
|
53 <Label>{this.state.startedAt}</Label> ⇒ <Label>{this.state.finishedAt}</Label> |
|
54 </span> |
|
55 ) |
|
56 } else { |
|
57 return ( |
|
58 <span>No timing</span> |
|
59 ) |
|
60 } |
35 } |
61 } |
36 |
62 |
37 render() { |
63 render() { |
38 return ( |
64 return ( |
39 <Form> |
65 <Form> |
|
66 <Row> |
|
67 <Col md={6}> |
|
68 { this.renderTiming() } |
|
69 </Col> |
|
70 <Col md={6} className="text-right"> |
|
71 <Label bsStyle="info">{ this.state.time }</Label> |
|
72 </Col> |
|
73 </Row> |
|
74 <hr /> |
40 <FormGroup> |
75 <FormGroup> |
41 <div className="editor-wrapper"> |
76 <div className="editor-wrapper"> |
42 <SlateEditor ref="editor" onChange={this.onChange} /> |
77 <SlateEditor ref="editor" onChange={this.onEditorChange} /> |
43 </div> |
78 </div> |
44 </FormGroup> |
79 </FormGroup> |
45 <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button> |
80 <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button> |
46 </Form> |
81 </Form> |
47 ); |
82 ); |