dtd/lib/form/FormItem.js

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

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _defineProperty2=require("babel-runtime/helpers/defineProperty"),_defineProperty3=_interopRequireDefault(_defineProperty2),_extends2=require("babel-runtime/helpers/extends"),_extends3=_interopRequireDefault(_extends2),_classCallCheck2=require("babel-runtime/helpers/classCallCheck"),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_createClass2=require("babel-runtime/helpers/createClass"),_createClass3=_interopRequireDefault(_createClass2),_possibleConstructorReturn2=require("babel-runtime/helpers/possibleConstructorReturn"),_possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2),_inherits2=require("babel-runtime/helpers/inherits"),_inherits3=_interopRequireDefault(_inherits2),_react=require("react"),React=_interopRequireWildcard(_react),_reactDom=require("react-dom"),ReactDOM=_interopRequireWildcard(_reactDom),_propTypes=require("prop-types"),PropTypes=_interopRequireWildcard(_propTypes),_classnames=require("classnames"),_classnames2=_interopRequireDefault(_classnames),_rcAnimate=require("rc-animate"),_rcAnimate2=_interopRequireDefault(_rcAnimate),_PureRenderMixin=require("rc-util/lib/PureRenderMixin"),_PureRenderMixin2=_interopRequireDefault(_PureRenderMixin),_row=require("../grid/row"),_row2=_interopRequireDefault(_row),_col=require("../grid/col"),_col2=_interopRequireDefault(_col),_warning=require("../_util/warning"),_warning2=_interopRequireDefault(_warning),_constants=require("./constants");function _interopRequireWildcard(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var FormItem=function(e){function l(){(0,_classCallCheck3.default)(this,l);var a=(0,_possibleConstructorReturn3.default)(this,(l.__proto__||Object.getPrototypeOf(l)).apply(this,arguments));return a.onLabelClick=function(e){var r=a.props.label,t=a.props.id||a.getId();if(t&&1!==document.querySelectorAll('[id="'+t+'"]').length){"string"==typeof r&&e.preventDefault();var n=ReactDOM.findDOMNode(a).querySelector('[id="'+t+'"]');n&&n.focus&&n.focus()}},a}return(0,_inherits3.default)(l,e),(0,_createClass3.default)(l,[{key:"componentDidMount",value:function(){(0,_warning2.default)(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 _PureRenderMixin2.default.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,r){for(var t=[],n=React.Children.toArray(e),a=0;a<n.length&&(r||!(0<t.length));a++){var i=n[a];(!i.type||i.type!==l&&"FormItem"!==i.type.displayName)&&i.props&&(_constants.FIELD_META_PROP in i.props?t.push(i):i.props.children&&(t=t.concat(this.getControls(i.props.children,r))))}return t}},{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(_constants.FIELD_META_PROP)}},{key:"getField",value:function(){return this.getChildProp(_constants.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(_rcAnimate2.default,{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 null!=r&&""!==r?"success":""}},{key:"renderValidateWrapper",value:function(e,r,t){var n=this.props,a=this.getOnlyControl,i=void 0===n.validateStatus&&a?this.getValidateStatus():n.validateStatus,l=this.props.prefixCls+"-item-control";return i&&(l=(0,_classnames2.default)(this.props.prefixCls+"-item-control",{"has-feedback":n.hasFeedback||"validating"===i,"has-success":"success"===i,"has-warning":"warning"===i,"has-error":"error"===i,"is-validating":"validating"===i})),React.createElement("div",{className:l},React.createElement("span",{className:this.props.prefixCls+"-item-children"},e),r,t)}},{key:"renderWrapper",value:function(e){var r=this.props,t=r.prefixCls,n=r.wrapperCol,a=(0,_classnames2.default)(t+"-item-control-wrapper",n&&n.className);return React.createElement(_col2.default,(0,_extends3.default)({},n,{className:a,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,n=e.labelCol,a=e.colon,i=e.id,l=this.context,s=this.isRequired(),o=(0,_classnames2.default)(r+"-item-label",n&&n.className),u=(0,_classnames2.default)((0,_defineProperty3.default)({},r+"-item-required",s)),p=t;return a&&!l.vertical&&"string"==typeof t&&""!==t.trim()&&(p=t.replace(/[：|:]\s*$/,"")),t?React.createElement(_col2.default,(0,_extends3.default)({},n,{className:o,key:"label"}),React.createElement("label",{htmlFor:i||this.getId(),className:u,title:"string"==typeof t?t:"",onClick:this.onLabelClick},p)):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,n=t.prefixCls,a=t.style,i=(r={},(0,_defineProperty3.default)(r,n+"-item",!0),(0,_defineProperty3.default)(r,n+"-item-with-help",!!this.getHelpMsg()),(0,_defineProperty3.default)(r,n+"-item-no-colon",!t.colon),(0,_defineProperty3.default)(r,""+t.className,!!t.className),r);return React.createElement(_row2.default,{className:(0,_classnames2.default)(i),style:a},e)}},{key:"render",value:function(){var e=this.renderChildren();return this.renderFormItem(e)}}]),l}(React.Component);(exports.default=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},module.exports=exports.default;