-
Notifications
You must be signed in to change notification settings - Fork 51
/
NewEntryModal.js
166 lines (154 loc) · 4.52 KB
/
NewEntryModal.js
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { cloneDeep, isEmpty } from 'lodash'
import { EditableText, LoaderText, Modal } from '../../components'
import { ButtonGroup, Button } from 'react-bootstrap'
import {
glossaryToggleNewEntryModal,
glossaryCreateNewEntry
} from '../../actions/glossary-actions'
import update from 'immutability-helper'
class NewEntryModal extends Component {
static propTypes = {
entry: PropTypes.object,
isSaving: PropTypes.bool,
show: PropTypes.bool,
handleNewEntryDisplay: PropTypes.func,
handleNewEntryCreate: PropTypes.func
}
constructor (props) {
super(props)
this.state = {
entry: cloneDeep(props.entry)
}
}
handleContentChanged = (e) => {
const content = e.target.value
this.setState(prevState => ({
entry: update(prevState.entry,
{srcTerm:
{content: {$set: content}}
})
}))
}
handlePosChanged = (e) => {
const { entry } = this.state
this.setState({
entry: {
...entry,
pos: e.target.value
}
})
}
handleDescChanged = (e) => {
const { entry } = this.state
this.setState({
entry: {
...entry,
description: e.target.value
}
})
}
handleCancel = () => {
this.resetFields()
this.props.handleNewEntryDisplay(false)
}
resetFields = () => {
this.setState({
entry: cloneDeep(this.props.entry)
})
}
render () {
const {
show,
isSaving,
handleNewEntryDisplay,
handleNewEntryCreate
} = this.props
const isAllowSave = !isEmpty(this.state.entry.srcTerm.content)
/* eslint-disable react/jsx-no-bind, react/jsx-boolean-value */
return (
<Modal
show={show}
onHide={() => { this.handleCancel(); handleNewEntryDisplay(false) }}
rootClose>
<Modal.Header>
<Modal.Title>New Term</Modal.Title>
</Modal.Header>
<Modal.Body className='u-textLeft'>
<div className='modal-section'>
<label className='text-bold'>Term</label>
<EditableText
className='editable textState'
editable
editing
placeholder='The new term'
maxLength={255}
onChange={::this.handleContentChanged}>
{this.state.entry.srcTerm.content}
</EditableText>
</div>
<div className='modal-section'>
<label className='text-bold'>Part of speech</label>
<EditableText
className='textInput modal-section'
editable
editing
placeholder='Noun, Verb, etc'
maxLength={255}
onChange={::this.handlePosChanged}>
{this.state.entry.pos}
</EditableText>
</div>
<div className='modal-section'>
<label className='text-bold'>Description</label>
<EditableText
className='textInput'
editable
editing
placeholder='The definition of this term'
maxLength={255}
onChange={::this.handleDescChanged}>
{this.state.entry.description}
</EditableText>
</div>
</Modal.Body>
<Modal.Footer>
<ButtonGroup className='u-pullRight'>
<Button bsStyle='link'
disabled={isSaving}
onClick={() => this.handleCancel()}>
Cancel
</Button>
<Button bsStyle='primary'
type='button'
disabled={!isAllowSave || isSaving}
onClick={
() => {
handleNewEntryCreate(this.state.entry); this.resetFields()
}
}>
<LoaderText loading={isSaving} loadingText='Saving'>
Save
</LoaderText>
</Button>
</ButtonGroup>
</Modal.Footer>
</Modal>)
/* eslint-enable react/jsx-no-bind, react/jsx-boolean-value */
}
}
const mapStateToProps = (state) => {
const { entry, isSaving, show } = state.glossary.newEntry
return { entry, isSaving, show }
}
const mapDispatchToProps = (dispatch) => {
return {
dispatch,
handleNewEntryDisplay: (display) =>
dispatch(glossaryToggleNewEntryModal(display)),
handleNewEntryCreate: (entry) => dispatch(glossaryCreateNewEntry(entry))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(NewEntryModal)