1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 | import _typeof from 'babel-runtime/helpers/typeof';
|
6 |
|
7 | var _class, _temp;
|
8 |
|
9 | import React from 'react';
|
10 | import PropTypes from 'prop-types';
|
11 | import classNames from 'classnames';
|
12 | import { obj, func } from '../util';
|
13 | import Field from '../field';
|
14 | import RGrid from '../responsive-grid';
|
15 |
|
16 | function pickerDefined(obj) {
|
17 | var newObj = {};
|
18 | Object.keys(obj).forEach(function (i) {
|
19 | if (typeof obj[i] !== 'undefined') {
|
20 | newObj[i] = obj[i];
|
21 | }
|
22 | });
|
23 | return newObj;
|
24 | }
|
25 |
|
26 | function preventDefault(e) {
|
27 | e.preventDefault();
|
28 | }
|
29 | var getNewChildren = function getNewChildren(children, props) {
|
30 | var size = props.size,
|
31 | device = props.device,
|
32 | labelAlign = props.labelAlign,
|
33 | labelTextAlign = props.labelTextAlign,
|
34 | labelCol = props.labelCol,
|
35 | wrapperCol = props.wrapperCol,
|
36 | responsive = props.responsive,
|
37 | colon = props.colon;
|
38 |
|
39 |
|
40 | return React.Children.map(children, function (child) {
|
41 | if (obj.isReactFragment(child)) {
|
42 | return getNewChildren(child.props.children, props);
|
43 | }
|
44 |
|
45 | if (child && ['function', 'object'].indexOf(_typeof(child.type)) > -1 && child.type._typeMark === 'form_item') {
|
46 | var childrenProps = {
|
47 | labelCol: child.props.labelCol ? child.props.labelCol : labelCol,
|
48 | wrapperCol: child.props.wrapperCol ? child.props.wrapperCol : wrapperCol,
|
49 | labelAlign: child.props.labelAlign ? child.props.labelAlign : device === 'phone' ? 'top' : labelAlign,
|
50 | labelTextAlign: child.props.labelTextAlign ? child.props.labelTextAlign : labelTextAlign,
|
51 | colon: 'colon' in child.props ? child.props.colon : colon,
|
52 | size: child.props.size ? child.props.size : size,
|
53 | responsive: responsive
|
54 | };
|
55 | return React.cloneElement(child, pickerDefined(childrenProps));
|
56 | }
|
57 | return child;
|
58 | });
|
59 | };
|
60 |
|
61 |
|
62 | var Form = (_temp = _class = function (_React$Component) {
|
63 | _inherits(Form, _React$Component);
|
64 |
|
65 | function Form(props) {
|
66 | _classCallCheck(this, Form);
|
67 |
|
68 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
69 |
|
70 | _this.onChange = function (name, value) {
|
71 | _this.props.onChange(_this._formField.getValues(), {
|
72 | name: name,
|
73 | value: value,
|
74 | field: _this._formField
|
75 | });
|
76 | };
|
77 |
|
78 | _this._formField = null;
|
79 | if (props.field !== false) {
|
80 | var options = _extends({}, props.fieldOptions, {
|
81 | onChange: _this.onChange
|
82 | });
|
83 |
|
84 | if (props.field) {
|
85 | _this._formField = props.field;
|
86 | var onChange = _this._formField.options.onChange;
|
87 | options.onChange = func.makeChain(onChange, _this.onChange);
|
88 | _this._formField.setOptions && _this._formField.setOptions(options);
|
89 | } else {
|
90 | if ('value' in props) {
|
91 | options.values = props.value;
|
92 | }
|
93 |
|
94 | _this._formField = new Field(_this, options);
|
95 | }
|
96 |
|
97 | if (props.locale && props.locale.Validate) {
|
98 | _this._formField.setOptions({ messages: props.locale.Validate });
|
99 | }
|
100 |
|
101 | props.saveField(_this._formField);
|
102 | }
|
103 | return _this;
|
104 | }
|
105 |
|
106 | Form.prototype.getChildContext = function getChildContext() {
|
107 | return {
|
108 | _formField: this.props.field ? this.props.field : this._formField,
|
109 | _formSize: this.props.size,
|
110 | _formDisabled: this.props.disabled,
|
111 | _formPreview: this.props.isPreview,
|
112 | _formFullWidth: this.props.fullWidth,
|
113 | _formLabelForErrorMessage: this.props.useLabelForErrorMessage
|
114 | };
|
115 | };
|
116 |
|
117 | Form.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
118 | var props = this.props;
|
119 |
|
120 | if (this._formField) {
|
121 | if ('value' in props && props.value !== prevProps.value) {
|
122 | this._formField.setValues(props.value);
|
123 | }
|
124 | if ('error' in props && props.error !== prevProps.error) {
|
125 | this._formField.setValues(props.error);
|
126 | }
|
127 | }
|
128 | };
|
129 |
|
130 | Form.prototype.render = function render() {
|
131 | var _classNames;
|
132 |
|
133 | var _props = this.props,
|
134 | className = _props.className,
|
135 | inline = _props.inline,
|
136 | size = _props.size,
|
137 | device = _props.device,
|
138 | labelAlign = _props.labelAlign,
|
139 | labelTextAlign = _props.labelTextAlign,
|
140 | onSubmit = _props.onSubmit,
|
141 | children = _props.children,
|
142 | labelCol = _props.labelCol,
|
143 | wrapperCol = _props.wrapperCol,
|
144 | style = _props.style,
|
145 | prefix = _props.prefix,
|
146 | rtl = _props.rtl,
|
147 | isPreview = _props.isPreview,
|
148 | Tag = _props.component,
|
149 | responsive = _props.responsive,
|
150 | gap = _props.gap,
|
151 | colon = _props.colon;
|
152 |
|
153 |
|
154 | var formClassName = classNames((_classNames = {}, _classNames[prefix + 'form'] = true, _classNames[prefix + 'inline'] = inline, _classNames['' + prefix + size] = size, _classNames[prefix + 'form-responsive-grid'] = responsive, _classNames[prefix + 'form-preview'] = isPreview, _classNames[className] = !!className, _classNames));
|
155 |
|
156 | var newChildren = getNewChildren(children, this.props);
|
157 |
|
158 | return React.createElement(
|
159 | Tag,
|
160 | _extends({
|
161 | role: 'grid'
|
162 | }, obj.pickOthers(Form.propTypes, this.props), {
|
163 | className: formClassName,
|
164 | style: style,
|
165 | dir: rtl ? 'rtl' : undefined,
|
166 | onSubmit: onSubmit
|
167 | }),
|
168 | responsive ? React.createElement(
|
169 | RGrid,
|
170 | { gap: gap },
|
171 | newChildren
|
172 | ) : newChildren
|
173 | );
|
174 | };
|
175 |
|
176 | return Form;
|
177 | }(React.Component), _class.propTypes = {
|
178 | |
179 |
|
180 |
|
181 | prefix: PropTypes.string,
|
182 | |
183 |
|
184 |
|
185 | inline: PropTypes.bool,
|
186 | |
187 |
|
188 |
|
189 |
|
190 | size: PropTypes.oneOf(['large', 'medium', 'small']),
|
191 | |
192 |
|
193 |
|
194 | fullWidth: PropTypes.bool,
|
195 | |
196 |
|
197 |
|
198 |
|
199 | labelAlign: PropTypes.oneOf(['top', 'left', 'inset']),
|
200 | |
201 |
|
202 |
|
203 |
|
204 | labelTextAlign: PropTypes.oneOf(['left', 'right']),
|
205 | |
206 |
|
207 |
|
208 | field: PropTypes.any,
|
209 | |
210 |
|
211 |
|
212 | saveField: PropTypes.func,
|
213 | |
214 |
|
215 |
|
216 | labelCol: PropTypes.object,
|
217 | |
218 |
|
219 |
|
220 | wrapperCol: PropTypes.object,
|
221 | |
222 |
|
223 |
|
224 | onSubmit: PropTypes.func,
|
225 | |
226 |
|
227 |
|
228 | children: PropTypes.any,
|
229 | |
230 |
|
231 |
|
232 | className: PropTypes.string,
|
233 | |
234 |
|
235 |
|
236 | style: PropTypes.object,
|
237 | |
238 |
|
239 |
|
240 | value: PropTypes.object,
|
241 | |
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 | onChange: PropTypes.func,
|
250 | |
251 |
|
252 |
|
253 | component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
254 | fieldOptions: PropTypes.object,
|
255 | rtl: PropTypes.bool,
|
256 | |
257 |
|
258 |
|
259 | device: PropTypes.oneOf(['phone', 'tablet', 'desktop']),
|
260 | |
261 |
|
262 |
|
263 |
|
264 | responsive: PropTypes.bool,
|
265 | |
266 |
|
267 |
|
268 |
|
269 | isPreview: PropTypes.bool,
|
270 | |
271 |
|
272 |
|
273 |
|
274 | useLabelForErrorMessage: PropTypes.bool,
|
275 | |
276 |
|
277 |
|
278 |
|
279 | colon: PropTypes.bool,
|
280 | |
281 |
|
282 |
|
283 | disabled: PropTypes.bool,
|
284 |
|
285 | gap: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number])
|
286 | }, _class.defaultProps = {
|
287 | prefix: 'next-',
|
288 | onSubmit: preventDefault,
|
289 | size: 'medium',
|
290 | labelAlign: 'left',
|
291 | onChange: func.noop,
|
292 | component: 'form',
|
293 | saveField: func.noop,
|
294 | device: 'desktop',
|
295 | colon: false,
|
296 | disabled: false
|
297 | }, _class.childContextTypes = {
|
298 | _formField: PropTypes.object,
|
299 | _formSize: PropTypes.string,
|
300 | _formDisabled: PropTypes.bool,
|
301 | _formPreview: PropTypes.bool,
|
302 | _formFullWidth: PropTypes.bool,
|
303 | _formLabelForErrorMessage: PropTypes.bool
|
304 | }, _temp);
|
305 | Form.displayName = 'Form';
|
306 | export { Form as default }; |
\ | No newline at end of file |