equal
deleted
inserted
replaced
1 import { Editor, Plain, Raw } from 'slate' |
1 import { Editor, Plain, Raw } from 'slate' |
2 import React from 'react' |
2 import React from 'react' |
|
3 import moment from 'moment'; |
3 |
4 |
4 /** |
5 /** |
5 * Define the default node type. |
6 * Define the default node type. |
6 */ |
7 */ |
7 |
8 |
55 * @type {Object} |
56 * @type {Object} |
56 */ |
57 */ |
57 constructor(props) { |
58 constructor(props) { |
58 super(props); |
59 super(props); |
59 this.state = { |
60 this.state = { |
60 state: Plain.deserialize('') |
61 state: Plain.deserialize(''), |
|
62 startedAt: null, |
|
63 finishedAt: null |
61 }; |
64 }; |
62 } |
65 } |
63 |
66 |
64 componentDidMount() { |
67 componentDidMount() { |
65 this.focus(); |
68 this.focus(); |
94 * |
97 * |
95 * @param {State} state |
98 * @param {State} state |
96 */ |
99 */ |
97 |
100 |
98 onChange = (state) => { |
101 onChange = (state) => { |
99 this.setState({ state }) |
102 |
|
103 let newState = { |
|
104 state: state, |
|
105 startedAt: this.state.startedAt |
|
106 }; |
|
107 |
|
108 const isEmpty = state.document.length === 0; |
|
109 |
|
110 // Reset timers when the text is empty |
|
111 if (isEmpty) { |
|
112 Object.assign(newState, { |
|
113 startedAt: null, |
|
114 finishedAt: null |
|
115 }); |
|
116 } else { |
|
117 Object.assign(newState, { finishedAt: moment().format('H:mm:ss') }); |
|
118 } |
|
119 |
|
120 // Store start time once when the first character is typed |
|
121 if (!isEmpty && this.state.startedAt === null) { |
|
122 Object.assign(newState, { startedAt: moment().format('H:mm:ss') }); |
|
123 } |
|
124 |
|
125 this.setState(newState) |
|
126 |
100 if (typeof this.props.onChange === 'function') { |
127 if (typeof this.props.onChange === 'function') { |
101 this.props.onChange(state); |
128 this.props.onChange(newState); |
102 } |
129 } |
103 } |
130 } |
104 |
131 |
105 asPlain = () => { |
132 asPlain = () => { |
106 return Plain.serialize(this.state.state); |
133 return Plain.serialize(this.state.state); |
233 |
260 |
234 state = transform.apply() |
261 state = transform.apply() |
235 this.setState({ state }) |
262 this.setState({ state }) |
236 } |
263 } |
237 |
264 |
238 // /** |
|
239 // * |
|
240 // * @param {*Cosntructor} props |
|
241 // */ |
|
242 // componentWillMount() { |
|
243 // const initialValue = Raw.deserialize(initialState, { terse: true }); |
|
244 // this.state = { state: initialValue}; |
|
245 // this.onChange(initialValue); |
|
246 // } |
|
247 |
|
248 /** |
265 /** |
249 * Render. |
266 * Render. |
250 * |
267 * |
251 * @return {Element} |
268 * @return {Element} |
252 */ |
269 */ |