1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | 'use strict'
|
7 |
|
8 | import React, {PropTypes as types} from 'react'
|
9 | import classnames from 'classnames'
|
10 |
|
11 | import {ApTouchable} from 'apeman-react-touchable'
|
12 | import {ApCheckbox} from 'apeman-react-checkbox'
|
13 | import {ApButton} from 'apeman-react-button'
|
14 | import {ApPureMixin} from 'apeman-react-mixins'
|
15 | import ApDialog from './ap_dialog'
|
16 | import uuid from 'uuid'
|
17 |
|
18 |
|
19 | const ApConfirmDialog = React.createClass({
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | propTypes: {
|
26 | present: types.bool.isRequired,
|
27 |
|
28 | onSubmit: types.func,
|
29 |
|
30 | onCancel: types.func,
|
31 |
|
32 | title: types.string,
|
33 |
|
34 | message: types.string,
|
35 |
|
36 | checkboxId: types.string,
|
37 |
|
38 | checkboxName: types.string,
|
39 |
|
40 | checkboxText: types.string,
|
41 |
|
42 | errorText: types.string,
|
43 |
|
44 | submitText: types.string
|
45 | },
|
46 |
|
47 | mixins: [
|
48 | ApPureMixin
|
49 | ],
|
50 |
|
51 | statics: {},
|
52 |
|
53 | getInitialState () {
|
54 | return {
|
55 | checked: false,
|
56 | errored: false
|
57 | }
|
58 | },
|
59 |
|
60 | getDefaultProps () {
|
61 | let id = uuid.v4().replace(/\-/g, '')
|
62 | return {
|
63 | onSubmit: null,
|
64 | onCancel: null,
|
65 | checkboxId: `ap-confirm-dialog-checkbox-${id}`,
|
66 | checkboxName: `ap-confirm-check-${id}`,
|
67 | checkboxText: null,
|
68 | submitText: 'submit',
|
69 | errorText: 'Needs check before submit.',
|
70 | message: 'Once destroyed, there is no going back. Please be certain.'
|
71 | }
|
72 | },
|
73 |
|
74 | render () {
|
75 | const s = this
|
76 | let { state, props } = s
|
77 | if (!props.present) {
|
78 | return null
|
79 | }
|
80 | return (
|
81 | <ApDialog className={ classnames('ap-confirm-dialog', props.className) }
|
82 | style={ Object.assign({}, props.style) }
|
83 | onClose={ s.handleCancel }
|
84 | { ...props }
|
85 | >
|
86 | <p className="ap-confirm-dialog-message">
|
87 | { props.message }
|
88 | </p>
|
89 | <div>{ props.children }</div>
|
90 | <div className="ap-confirm-dialog-control">
|
91 | { s._renderError(state.errored) }
|
92 | { s._renderCheckbox(state.checked) }
|
93 | { s._renderSubmitButton(state.checked) }
|
94 | </div>
|
95 | </ApDialog>
|
96 | )
|
97 | },
|
98 |
|
99 | toggleCheckbox() {
|
100 | const s = this
|
101 | let state = s.state
|
102 | s.setState({
|
103 | checked: !state.checked,
|
104 | errored: false
|
105 | })
|
106 | },
|
107 |
|
108 | handleSubmit(e) {
|
109 | const s = this
|
110 | let { state, props } = s
|
111 | if (!state.checked) {
|
112 | s.setState({
|
113 | errored: true
|
114 | })
|
115 | return
|
116 | }
|
117 | s.setState({
|
118 | errored: false
|
119 | })
|
120 | if (props.onSubmit) {
|
121 | props.onSubmit(e)
|
122 | }
|
123 | },
|
124 |
|
125 | handleCancel(e) {
|
126 | const s = this,
|
127 | { props } = s
|
128 | s.setState({ errored: false })
|
129 | if (props.onCancel) {
|
130 | props.onCancel(e)
|
131 | }
|
132 | },
|
133 |
|
134 |
|
135 |
|
136 |
|
137 | _renderError(errored) {
|
138 | const s = this
|
139 | let { props } = s
|
140 | if (!errored) {
|
141 | return null
|
142 | }
|
143 | return (
|
144 | <div className="ap-confirm-dialog-err">
|
145 | <span>{ props.errorText }</span>
|
146 | </div>
|
147 | )
|
148 | },
|
149 | _renderCheckbox (checked) {
|
150 | const s = this
|
151 | let { props } = s
|
152 | return (
|
153 | <div>
|
154 | <ApCheckbox className="ap-confirm-dialog-checkbox"
|
155 | checked={ checked }
|
156 | name={ props.checkboxName }
|
157 | id={ props.checkboxId }
|
158 | title={ props.checkboxText }
|
159 | onChange={ s.toggleCheckbox }
|
160 | value="YES"
|
161 |
|
162 | />
|
163 | </div>
|
164 | )
|
165 | },
|
166 | _renderSubmitButton (checked) {
|
167 | const s = this
|
168 | let { props } = s
|
169 | return (
|
170 | <ApButton onTap={ s.handleSubmit }
|
171 | disabled={ false }
|
172 | primary={ true }
|
173 | className={ classnames('ap-confirm-dialog-button', {
|
174 | 'ap-confirm-dialog-button-disabled': !checked
|
175 | }) }>
|
176 | <span className="ap-confirm-dialog-button-text">{ props.submitText }</span>
|
177 | </ApButton>
|
178 | )
|
179 | }
|
180 |
|
181 | })
|
182 |
|
183 | module.exports = ApConfirmDialog
|