1 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
3 | import _createClass from "@babel/runtime/helpers/createClass";
|
4 | import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
5 | import _inherits from "@babel/runtime/helpers/inherits";
|
6 | import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
7 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
8 |
|
9 | function _createSuper(Derived) {
|
10 | function isNativeReflectConstruct() {
|
11 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
12 | if (Reflect.construct.sham) return false;
|
13 | if (typeof Proxy === "function") return true;
|
14 |
|
15 | try {
|
16 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
17 | return true;
|
18 | } catch (e) {
|
19 | return false;
|
20 | }
|
21 | }
|
22 |
|
23 | return function () {
|
24 | var Super = _getPrototypeOf(Derived),
|
25 | result;
|
26 |
|
27 | if (isNativeReflectConstruct()) {
|
28 | var NewTarget = _getPrototypeOf(this).constructor;
|
29 |
|
30 | result = Reflect.construct(Super, arguments, NewTarget);
|
31 | } else {
|
32 | result = Super.apply(this, arguments);
|
33 | }
|
34 |
|
35 | return _possibleConstructorReturn(this, result);
|
36 | };
|
37 | }
|
38 |
|
39 | import React, { Children, Component } from 'react';
|
40 | import { findDOMNode } from 'react-dom';
|
41 | import PropTypes from 'prop-types';
|
42 | import classNames from 'classnames';
|
43 | import warning from '../_util/warning';
|
44 | import { FIELD_DATA_PROP, FIELD_META_PROP } from './constants';
|
45 | import PureRenderMixin from '../rc-components/util/PureRenderMixin';
|
46 | import Animate from '../animate';
|
47 | import { FormItemValidateStatus } from './enum';
|
48 | import { getPrefixCls as _getPrefixCls } from '../configure';
|
49 |
|
50 | var FormItem =
|
51 |
|
52 | function (_Component) {
|
53 | _inherits(FormItem, _Component);
|
54 |
|
55 | var _super = _createSuper(FormItem);
|
56 |
|
57 | function FormItem() {
|
58 | var _this;
|
59 |
|
60 | _classCallCheck(this, FormItem);
|
61 |
|
62 | _this = _super.apply(this, arguments);
|
63 | _this.state = {
|
64 | helpShow: false
|
65 | };
|
66 |
|
67 | _this.onHelpAnimEnd = function (_key, helpShow) {
|
68 | _this.setState({
|
69 | helpShow: helpShow
|
70 | });
|
71 | };
|
72 |
|
73 |
|
74 | _this.onLabelClick = function (e) {
|
75 | var _this$props = _this.props,
|
76 | label = _this$props.label,
|
77 | propId = _this$props.id;
|
78 |
|
79 | var id = propId || _this.getId();
|
80 |
|
81 | if (!id) {
|
82 | return;
|
83 | }
|
84 |
|
85 | var controls = document.querySelectorAll("[id=\"".concat(id, "\"]"));
|
86 |
|
87 | if (controls.length !== 1) {
|
88 |
|
89 |
|
90 | if (typeof label === 'string') {
|
91 | e.preventDefault();
|
92 | }
|
93 |
|
94 | var control = findDOMNode(_assertThisInitialized(_this)).querySelector("[id=\"".concat(id, "\"]"));
|
95 |
|
96 | if (control && control.focus) {
|
97 | control.focus();
|
98 | }
|
99 | }
|
100 | };
|
101 |
|
102 | return _this;
|
103 | }
|
104 |
|
105 | _createClass(FormItem, [{
|
106 | key: "componentDidMount",
|
107 | value: function componentDidMount() {
|
108 | var children = this.props.children;
|
109 | warning(this.getControls(children, true).length <= 1, '`Form.Item` cannot generate `validateStatus` and `help` automatically, ' + 'while there are more than one `getFieldDecorator` in it.');
|
110 | }
|
111 | }, {
|
112 | key: "shouldComponentUpdate",
|
113 | value: function shouldComponentUpdate() {
|
114 | for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
|
115 | args[_key2] = arguments[_key2];
|
116 | }
|
117 |
|
118 | return PureRenderMixin.shouldComponentUpdate.apply(this, args);
|
119 | }
|
120 | }, {
|
121 | key: "getHelpMsg",
|
122 | value: function getHelpMsg() {
|
123 | var props = this.props;
|
124 | var onlyControl = this.getOnlyControl();
|
125 |
|
126 | if (props.help === undefined && onlyControl) {
|
127 | var errors = this.getField().errors;
|
128 | return errors ? errors.map(function (e) {
|
129 | return e.message;
|
130 | }).join(', ') : '';
|
131 | }
|
132 |
|
133 | return props.help;
|
134 | }
|
135 | }, {
|
136 | key: "getControls",
|
137 | value: function getControls(children, recursively) {
|
138 | var controls = [];
|
139 | var childrenArray = Children.toArray(children);
|
140 |
|
141 | for (var i = 0; i < childrenArray.length; i++) {
|
142 | if (!recursively && controls.length > 0) {
|
143 | break;
|
144 | }
|
145 |
|
146 | var child = childrenArray[i];
|
147 |
|
148 | if (child.type && (child.type === FormItem || child.type.displayName === 'FormItem')) {
|
149 | continue;
|
150 | }
|
151 |
|
152 | if (!child.props) {
|
153 | continue;
|
154 | }
|
155 |
|
156 | if (FIELD_META_PROP in child.props) {
|
157 |
|
158 | controls.push(child);
|
159 | } else if (child.props.children) {
|
160 | controls = controls.concat(this.getControls(child.props.children, recursively));
|
161 | }
|
162 | }
|
163 |
|
164 | return controls;
|
165 | }
|
166 | }, {
|
167 | key: "getOnlyControl",
|
168 | value: function getOnlyControl() {
|
169 | var children = this.props.children;
|
170 | var child = this.getControls(children, false)[0];
|
171 | return child !== undefined ? child : null;
|
172 | }
|
173 | }, {
|
174 | key: "getChildProp",
|
175 | value: function getChildProp(prop) {
|
176 | var child = this.getOnlyControl();
|
177 | return child && child.props && child.props[prop];
|
178 | }
|
179 | }, {
|
180 | key: "getId",
|
181 | value: function getId() {
|
182 | return this.getChildProp('id');
|
183 | }
|
184 | }, {
|
185 | key: "getMeta",
|
186 | value: function getMeta() {
|
187 | return this.getChildProp(FIELD_META_PROP);
|
188 | }
|
189 | }, {
|
190 | key: "getField",
|
191 | value: function getField() {
|
192 | return this.getChildProp(FIELD_DATA_PROP);
|
193 | }
|
194 | }, {
|
195 | key: "getPrefixCls",
|
196 | value: function getPrefixCls() {
|
197 | var prefixCls = this.props.prefixCls;
|
198 | return _getPrefixCls('form', prefixCls);
|
199 | }
|
200 | }, {
|
201 | key: "renderHelp",
|
202 | value: function renderHelp() {
|
203 | var prefixCls = this.getPrefixCls();
|
204 | var help = this.getHelpMsg();
|
205 | var children = help ? React.createElement("div", {
|
206 | className: "".concat(prefixCls, "-explain"),
|
207 | key: "error"
|
208 | }, help) : null;
|
209 | return React.createElement(Animate, {
|
210 | transitionName: "show-error",
|
211 | component: "",
|
212 | transitionAppear: true,
|
213 | key: "error",
|
214 | onEnd: this.onHelpAnimEnd
|
215 | }, children);
|
216 | }
|
217 | }, {
|
218 | key: "renderExtra",
|
219 | value: function renderExtra() {
|
220 | var extra = this.props.extra;
|
221 | var prefixCls = this.getPrefixCls();
|
222 | return extra ? React.createElement("div", {
|
223 | className: "".concat(prefixCls, "-extra")
|
224 | }, extra) : null;
|
225 | }
|
226 | }, {
|
227 | key: "getValidateStatus",
|
228 | value: function getValidateStatus() {
|
229 | var onlyControl = this.getOnlyControl();
|
230 |
|
231 | if (onlyControl) {
|
232 | var field = this.getField();
|
233 |
|
234 | if (field.validating) {
|
235 | return FormItemValidateStatus.validating;
|
236 | }
|
237 |
|
238 | if (field.errors) {
|
239 | return FormItemValidateStatus.error;
|
240 | }
|
241 |
|
242 | var fieldValue = 'value' in field ? field.value : this.getMeta().initialValue;
|
243 |
|
244 | if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
|
245 | return FormItemValidateStatus.success;
|
246 | }
|
247 | }
|
248 | }
|
249 | }, {
|
250 | key: "renderValidateWrapper",
|
251 | value: function renderValidateWrapper(c1, c2, c3) {
|
252 | var props = this.props;
|
253 | var prefixCls = this.getPrefixCls();
|
254 | var onlyControl = this.getOnlyControl();
|
255 | var validateStatus = props.validateStatus === undefined && onlyControl ? this.getValidateStatus() : props.validateStatus;
|
256 | var classes = "".concat(prefixCls, "-item-control");
|
257 |
|
258 | if (validateStatus) {
|
259 | classes = classNames("".concat(prefixCls, "-item-control"), {
|
260 | 'has-feedback': props.hasFeedback || validateStatus === FormItemValidateStatus.validating,
|
261 | 'has-success': validateStatus === FormItemValidateStatus.success,
|
262 | 'has-warning': validateStatus === FormItemValidateStatus.warning,
|
263 | 'has-error': validateStatus === FormItemValidateStatus.error,
|
264 | 'is-validating': validateStatus === FormItemValidateStatus.validating
|
265 | });
|
266 | }
|
267 |
|
268 | return React.createElement("div", {
|
269 | className: classes
|
270 | }, React.createElement("span", {
|
271 | className: "".concat(prefixCls, "-item-children")
|
272 | }, c1), c2, c3);
|
273 | }
|
274 | }, {
|
275 | key: "renderWrapper",
|
276 | value: function renderWrapper(children) {
|
277 | var wrapperCol = this.props.wrapperCol;
|
278 | var prefixCls = this.getPrefixCls();
|
279 | var required = this.isRequired();
|
280 | var className = classNames("".concat(prefixCls, "-item-control-wrapper"), wrapperCol && wrapperCol.className, {
|
281 | 'is-required': required
|
282 | });
|
283 | return React.createElement("div", {
|
284 | className: className,
|
285 | key: "wrapper"
|
286 | }, children);
|
287 | }
|
288 | }, {
|
289 | key: "isRequired",
|
290 | value: function isRequired() {
|
291 | var required = this.props.required;
|
292 |
|
293 | if (required !== undefined) {
|
294 | return required;
|
295 | }
|
296 |
|
297 | if (this.getOnlyControl()) {
|
298 | var meta = this.getMeta() || {};
|
299 | var validate = meta.validate || [];
|
300 | return validate.filter(function (item) {
|
301 | return !!item.rules;
|
302 | }).some(function (item) {
|
303 | return item.rules.some(function (rule) {
|
304 | return rule.required;
|
305 | });
|
306 | });
|
307 | }
|
308 |
|
309 | return false;
|
310 | }
|
311 | }, {
|
312 | key: "renderChildren",
|
313 | value: function renderChildren() {
|
314 | var children = this.props.children;
|
315 | return [
|
316 | this.renderWrapper(this.renderValidateWrapper(children, this.renderHelp(), this.renderExtra()))];
|
317 | }
|
318 | }, {
|
319 | key: "renderFormItem",
|
320 | value: function renderFormItem(children) {
|
321 | var _itemClassName;
|
322 |
|
323 | var props = this.props;
|
324 | var helpShow = this.state.helpShow;
|
325 | var prefixCls = this.getPrefixCls();
|
326 | var style = props.style;
|
327 | var itemClassName = (_itemClassName = {}, _defineProperty(_itemClassName, "".concat(prefixCls, "-item"), true), _defineProperty(_itemClassName, "".concat(prefixCls, "-item-with-help"), !!this.getHelpMsg() || helpShow), _defineProperty(_itemClassName, "".concat(prefixCls, "-item-no-colon"), !props.colon), _defineProperty(_itemClassName, "".concat(props.className), !!props.className), _itemClassName);
|
328 | return React.createElement("div", {
|
329 | className: classNames(itemClassName),
|
330 | style: style
|
331 | }, children);
|
332 | }
|
333 | }, {
|
334 | key: "render",
|
335 | value: function render() {
|
336 | var children = this.renderChildren();
|
337 | return this.renderFormItem(children);
|
338 | }
|
339 | }]);
|
340 |
|
341 | return FormItem;
|
342 | }(Component);
|
343 |
|
344 | export { FormItem as default };
|
345 | FormItem.displayName = 'FormItem';
|
346 | FormItem.defaultProps = {
|
347 | hasFeedback: false,
|
348 | colon: true
|
349 | };
|
350 | FormItem.propTypes = {
|
351 | prefixCls: PropTypes.string,
|
352 | label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
353 | help: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
|
354 | validateStatus: PropTypes.oneOf([FormItemValidateStatus.success, FormItemValidateStatus.warning, FormItemValidateStatus.error, FormItemValidateStatus.validating]),
|
355 | hasFeedback: PropTypes.bool,
|
356 | wrapperCol: PropTypes.object,
|
357 | className: PropTypes.string,
|
358 | id: PropTypes.string,
|
359 | children: PropTypes.node,
|
360 | colon: PropTypes.bool
|
361 | };
|
362 | FormItem.contextTypes = {
|
363 | vertical: PropTypes.bool
|
364 | };
|
365 |
|