blob: a60ca1dbec5bda1fa1cdc3db2bad00e8f788235f (
plain)
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
104
105
106
107
108
109
110
111
112
113
114
115
|
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { TextArea, Button } from 'app/common'
import actions from 'app/actions'
export default class GalleryCaptionForm extends Component {
state = {
editing: false,
item: {},
}
constructor(props) {
super(props)
this.edit = this.edit.bind(this)
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleCancel = this.handleCancel.bind(this)
}
componentDidMount() {
this.setState({
item: {
...this.props.item,
}
})
}
edit() {
this.setState({ editing: true })
}
handleChange(e){
e.preventDefault()
this.setState({
item: {
...this.state.item,
caption: e.target.value,
}
})
}
handleSubmit(e) {
e.preventDefault()
this.props.onUpdate(this.props.caption_id, this.state.item)
this.setState({ editing: false })
}
handleCancel(e) {
e.preventDefault()
this.setState({
editing: false,
item: { ...this.props.item }
})
}
render() {
return this.state.editing
? this.renderForm()
: this.renderEntry()
}
renderForm() {
const { episode, index } = this.props
const { item } = this.state
return (
<form className='caption-form' onSubmit={this.handleSubmit}>
<TextArea
title={`Edit caption`}
name="caption"
placeholder={item.caption ? "Enter caption" : "No caption set."}
data={item}
onChange={this.handleChange}
/>
<div className='buttons'>
<span />
<div>
<button onClick={this.handleSubmit}>Save caption</button>
<button onClick={this.handleCancel}>Cancel</button>
</div>
</div>
</form>
)
}
renderEntry() {
const { index } = this.props
const { item } = this.state
return (
<div>
<div className={item.caption ? 'caption-entry' : 'caption-entry generated'} onClick={this.edit}>
<div className='caption-index'>
{index}{'. '}
</div>
{item.caption
? <div className='caption-text' dangerouslySetInnerHTML={{ __html: item.caption }} />
: this.renderAutomaticCaption()
}
</div>
</div>
)
}
renderAutomaticCaption() {
const { item } = this.state
return (
<div className='caption-text'>
{item.author ? item.author + '. ' : ''}
{item.title ? item.title + '. ' : ''}
{item.date}
{(item.author || item.title || item.date) ? ' (Automatic)' : '(No caption)'}
</div>
)
}
}
|
