dtd/es/form/FormItem.js

根据数梦工场视觉规范打造的组件库，感谢react-components和ant design

import _defineProperty from"babel-runtime/helpers/defineProperty";import _extends from"babel-runtime/helpers/extends";import _classCallCheck from"babel-runtime/helpers/classCallCheck";import _createClass from"babel-runtime/helpers/createClass";import _possibleConstructorReturn from"babel-runtime/helpers/possibleConstructorReturn";import _inherits from"babel-runtime/helpers/inherits";import*as React from"react";import*as ReactDOM from"react-dom";import*as PropTypes from"prop-types";import classNames from"classnames";import Animate from"rc-animate";import PureRenderMixin from"rc-util/es/PureRenderMixin";import Row from"../grid/row";import Col from"../grid/col";import warning from"../_util/warning";import{FIELD_DATA_PROP,FIELD_META_PROP}from"./constants";var FormItem=function(e){function r(){_classCallCheck(this,r);var e=_possibleConstructorReturn(this,(r.__proto__||Object.getPrototypeOf(r)).apply(this,arguments));return e.onLabelClick=function(r){var t=e.props.label,o=e.props.id||e.getId();if(o&&1!==document.querySelectorAll('[id="'+o+'"]').length){"string"==typeof t&&r.preventDefault();var n=ReactDOM.findDOMNode(e).querySelector('[id="'+o+'"]');n&&n.focus&&n.focus()}},e}return _inherits(r,e),_createClass(r,[{key:"componentDidMount",value:function(){warning(this.getControls(this.props.children,!0).length<=1,"`Form.Item` cannot generate `validateStatus` and `help` automatically, while there are more than one `getFieldDecorator` in it.")}},{key:"shouldComponentUpdate",value:function(){for(var e=arguments.length,r=Array(e),t=0;t<e;t++)r[t]=arguments[t];return PureRenderMixin.shouldComponentUpdate.apply(this,r)}},{key:"getHelpMsg",value:function(){var e=this.props,r=this.getOnlyControl();if(void 0===e.help&&r){var t=this.getField().errors;return t?t.map(function(e){return e.message}).join(", "):""}return e.help}},{key:"getControls",value:function(e,t){for(var o=[],n=React.Children.toArray(e),s=0;s<n.length&&(t||!(o.length>0));s++){var i=n[s];(!i.type||i.type!==r&&"FormItem"!==i.type.displayName)&&i.props&&(FIELD_META_PROP in i.props?o.push(i):i.props.children&&(o=o.concat(this.getControls(i.props.children,t))))}return o}},{key:"getOnlyControl",value:function(){var e=this.getControls(this.props.children,!1)[0];return void 0!==e?e:null}},{key:"getChildProp",value:function(e){var r=this.getOnlyControl();return r&&r.props&&r.props[e]}},{key:"getId",value:function(){return this.getChildProp("id")}},{key:"getMeta",value:function(){return this.getChildProp(FIELD_META_PROP)}},{key:"getField",value:function(){return this.getChildProp(FIELD_DATA_PROP)}},{key:"renderHelp",value:function(){var e=this.props.prefixCls,r=this.getHelpMsg(),t=r?React.createElement("div",{className:e+"-explain",key:"help"},r):null;return React.createElement(Animate,{transitionName:"show-help",component:"",transitionAppear:!0,key:"help"},t)}},{key:"renderExtra",value:function(){var e=this.props,r=e.prefixCls,t=e.extra;return t?React.createElement("div",{className:r+"-extra"},t):null}},{key:"getValidateStatus",value:function(){if(!this.getOnlyControl())return"";var e=this.getField();if(e.validating)return"validating";if(e.errors)return"error";var r="value"in e?e.value:this.getMeta().initialValue;return void 0!==r&&null!==r&&""!==r?"success":""}},{key:"renderValidateWrapper",value:function(e,r,t){var o=this.props,n=this.getOnlyControl,s=void 0===o.validateStatus&&n?this.getValidateStatus():o.validateStatus,i=this.props.prefixCls+"-item-control";return s&&(i=classNames(this.props.prefixCls+"-item-control",{"has-feedback":o.hasFeedback||"validating"===s,"has-success":"success"===s,"has-warning":"warning"===s,"has-error":"error"===s,"is-validating":"validating"===s})),React.createElement("div",{className:i},React.createElement("span",{className:this.props.prefixCls+"-item-children"},e),r,t)}},{key:"renderWrapper",value:function(e){var r=this.props,t=r.prefixCls,o=r.wrapperCol,n=classNames(t+"-item-control-wrapper",o&&o.className);return React.createElement(Col,_extends({},o,{className:n,key:"wrapper"}),e)}},{key:"isRequired",value:function(){var e=this.props.required;return void 0!==e?e:!!this.getOnlyControl()&&((this.getMeta()||{}).validate||[]).filter(function(e){return!!e.rules}).some(function(e){return e.rules.some(function(e){return e.required})})}},{key:"renderLabel",value:function(){var e=this.props,r=e.prefixCls,t=e.label,o=e.labelCol,n=e.colon,s=e.id,i=this.context,a=this.isRequired(),l=classNames(r+"-item-label",o&&o.className),p=classNames(_defineProperty({},r+"-item-required",a)),c=t;return n&&!i.vertical&&"string"==typeof t&&""!==t.trim()&&(c=t.replace(/[：|:]\s*$/,"")),t?React.createElement(Col,_extends({},o,{className:l,key:"label"}),React.createElement("label",{htmlFor:s||this.getId(),className:p,title:"string"==typeof t?t:"",onClick:this.onLabelClick},c)):null}},{key:"renderChildren",value:function(){var e=this.props.children;return[this.renderLabel(),this.renderWrapper(this.renderValidateWrapper(e,this.renderHelp(),this.renderExtra()))]}},{key:"renderFormItem",value:function(e){var r,t=this.props,o=t.prefixCls,n=t.style,s=(_defineProperty(r={},o+"-item",!0),_defineProperty(r,o+"-item-with-help",!!this.getHelpMsg()),_defineProperty(r,o+"-item-no-colon",!t.colon),_defineProperty(r,""+t.className,!!t.className),r);return React.createElement(Row,{className:classNames(s),style:n},e)}},{key:"render",value:function(){var e=this.renderChildren();return this.renderFormItem(e)}}]),r}(React.Component);export default FormItem;FormItem.defaultProps={hasFeedback:!1,prefixCls:"dt-form",colon:!0},FormItem.propTypes={prefixCls:PropTypes.string,label:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),labelCol:PropTypes.object,help:PropTypes.oneOfType([PropTypes.node,PropTypes.bool]),validateStatus:PropTypes.oneOf(["","success","warning","error","validating"]),hasFeedback:PropTypes.bool,wrapperCol:PropTypes.object,className:PropTypes.string,id:PropTypes.string,children:PropTypes.node,colon:PropTypes.bool},FormItem.contextTypes={vertical:PropTypes.bool};