1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import React, { Component } from 'react'
// import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import actions from 'app/actions'
import { timestamp, capitalize } from 'app/utils'
import { Select, Checkbox } from 'app/common'
const PARAGRAPH_TYPES = [
'paragraph', 'intro_paragraph', 'blockquote', 'pullquote', 'big_text', 'hidden',
].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
class ParagraphForm extends Component {
constructor(props){
super(props)
this.handleChange = this.handleChange.bind(this)
this.handleSelect = this.handleSelect.bind(this)
this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
componentDidMount() {
if (this.textareaRef && this.textareaRef.current) {
this.textareaRef.current.focus()
}
}
handleChange(e) {
const { name, value } = e.target
this.handleSelect(name, value)
}
handleSelect(name, value) {
const { onUpdate, paragraph } = this.props
onUpdate({
...paragraph,
[name]: value,
})
}
handleSettingsSelect(name, value) {
const { onUpdate, paragraph } = this.props
onUpdate({
...paragraph,
settings: {
...paragraph.settings,
[name]: value,
}
})
}
handleSubmit() {
const { paragraph, onClose } = this.props
actions.paragraph.update(paragraph)
.then(response => {
console.log(response)
onClose()
})
}
render() {
const { paragraph, y } = this.props
console.log(paragraph)
return (
<div
className='paragraphForm'
style={{
top: y,
}}
>
{this.renderButtons()}
<div>
<Checkbox
label="Hide in transcript"
name="hide_in_transcript"
checked={paragraph.settings ? paragraph.settings.hide_in_transcript : false}
onChange={this.handleSettingsSelect}
/>
</div>
</div>
)
}
renderButtons() {
const { paragraph } = this.props
return (
<div className='row buttons'>
<div className='row'>
<Select
name='type'
selected={paragraph.type}
options={PARAGRAPH_TYPES}
defaultOption='text'
onChange={this.handleSelect}
/>
<div className='ts'>{timestamp(paragraph.start_ts, 1, true)}</div>
</div>
<div>
<button onClick={this.handleSubmit}>Save</button>
</div>
</div>
)
}
}
const mapStateToProps = state => ({
})
export default connect(mapStateToProps)(ParagraphForm)
|
