equal
deleted
inserted
replaced
2 import { Form, FormGroup, Button, Label, Row, Col } from 'react-bootstrap'; |
2 import { Form, FormGroup, Button, Label, Row, Col } from 'react-bootstrap'; |
3 import moment from 'moment'; |
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 import Clock from './Clock' |
7 |
8 |
8 class NoteInput extends Component { |
9 class NoteInput extends Component { |
9 |
10 |
10 state = { |
11 state = { |
11 buttonDisabled: false, |
12 buttonDisabled: false, |
12 time: moment().format('H:mm:ss'), |
|
13 startedAt: null, |
13 startedAt: null, |
14 finishedAt: null, |
14 finishedAt: null, |
15 } |
15 } |
16 |
16 |
17 onEditorChange = (e) => { |
17 onEditorChange = (e) => { |
41 } |
41 } |
42 |
42 |
43 componentDidMount() { |
43 componentDidMount() { |
44 const text = this.refs.editor.asPlain(); |
44 const text = this.refs.editor.asPlain(); |
45 this.setState({ buttonDisabled: text.length === 0 }); |
45 this.setState({ buttonDisabled: text.length === 0 }); |
46 setInterval(() => { |
|
47 const time = moment().format('H:mm:ss'); |
|
48 this.setState({ time }); |
|
49 }, 1000); |
|
50 } |
46 } |
51 |
47 |
52 renderTiming() { |
48 renderTiming() { |
53 if (this.state.startedAt && this.state.finishedAt) { |
49 if (this.state.startedAt && this.state.finishedAt) { |
54 return ( |
50 return ( |
69 <Row> |
65 <Row> |
70 <Col md={6}> |
66 <Col md={6}> |
71 { this.renderTiming() } |
67 { this.renderTiming() } |
72 </Col> |
68 </Col> |
73 <Col md={6} className="text-right"> |
69 <Col md={6} className="text-right"> |
74 <Label bsStyle="info">{ this.state.time }</Label> |
70 <Clock /> |
75 </Col> |
71 </Col> |
76 </Row> |
72 </Row> |
77 <hr /> |
73 <hr /> |
78 <FormGroup> |
74 <FormGroup> |
79 <div className="editor-wrapper"> |
75 <div className="editor-wrapper"> |