dtd/es/input/Input.js

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

import _extends from"babel-runtime/helpers/extends";import _defineProperty from"babel-runtime/helpers/defineProperty";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 PropTypes from"prop-types";import classNames from"classnames";import omit from"omit.js";function fixControlledValue(e){return void 0===e||null===e?"":e}var isPlaceholderSupported="undefined"!=typeof document&&"placeholder"in document.createElement("input"),Input=function(e){function s(){_classCallCheck(this,s);var e=_possibleConstructorReturn(this,(s.__proto__||Object.getPrototypeOf(s)).apply(this,arguments));return e.state={showPlaceholding:!0},e.handleKeyDown=function(s){var r=e.props,t=r.onPressEnter,n=r.onKeyDown;13===s.keyCode&&t&&t(s),n&&n(s)},e.onFocus=function(s){e.props.onFocus&&e.props.onFocus(s),e.setState({showPlaceholding:!1})},e.onBlur=function(s){e.props.onBlur&&e.props.onBlur(s),""===e.input.value&&e.setState({showPlaceholding:!0})},e.saveInput=function(s){e.input=s},e.saveSpan=function(s){e.span=s},e.handleClick=function(){e.input.focus()},e}return _inherits(s,e),_createClass(s,[{key:"focus",value:function(){this.input.focus()}},{key:"blur",value:function(){this.input.blur()}},{key:"componentWillMount",value:function(){this.needsPlaceholding=!(!this.props.placeholder||isPlaceholderSupported),"value"in this.props&&this.props.value&&this.setState({showPlaceholding:!1})}},{key:"componentWillReceiveProps",value:function(e){this.needsPlaceholding=e.placeholder&&!isPlaceholderSupported}},{key:"getInputClassName",value:function(){var e,s=this.props,r=s.prefixCls,t=s.size,n=s.disabled;return classNames(r,(_defineProperty(e={},r+"-sm","small"===t),_defineProperty(e,r+"-lg","large"===t),_defineProperty(e,r+"-disabled",n),e))}},{key:"renderLabeledInput",value:function(e){var s,r=this.props;if(!r.addonBefore&&!r.addonAfter)return e;var t=r.prefixCls+"-group",n=t+"-addon",a=r.addonBefore?React.createElement("span",{className:n},r.addonBefore):null,o=r.addonAfter?React.createElement("span",{className:n},r.addonAfter):null,p=classNames(r.prefixCls+"-wrapper",_defineProperty({},t,a||o)),l=classNames(r.prefixCls+"-group-wrapper",(_defineProperty(s={},r.prefixCls+"-group-wrapper-sm","small"===r.size),_defineProperty(s,r.prefixCls+"-group-wrapper-lg","large"===r.size),s));return a||o?React.createElement("span",{className:l,style:r.style},React.createElement("span",{className:p},a,React.cloneElement(e,{style:null}),o)):React.createElement("span",{className:p},a,e,o)}},{key:"renderLabeledIcon",value:function(e){var s,r=this.props,t=r.placeholder;if(!("prefix"in r||"suffix"in r))return this.needsPlaceholding?React.createElement("span",{style:{position:"relative"}},e,this.state.showPlaceholding&&React.createElement("span",{className:"dt-input-placeholder-span",ref:this.saveSpan,onClick:this.handleClick},t)):e;var n=r.prefix?React.createElement("span",{className:r.prefixCls+"-prefix"},r.prefix):null,a=r.suffix?React.createElement("span",{className:r.prefixCls+"-suffix"},r.suffix):null,o=classNames(r.className,r.prefixCls+"-affix-wrapper",(_defineProperty(s={},r.prefixCls+"-affix-wrapper-sm","small"===r.size),_defineProperty(s,r.prefixCls+"-affix-wrapper-lg","large"===r.size),s));return React.createElement("span",{className:o,style:r.style},n,React.cloneElement(e,{style:null,className:this.getInputClassName()}),this.needsPlaceholding&&this.state.showPlaceholding&&React.createElement("span",{className:r.prefix?classNames("dt-input-placeholder-span","dt-input-placeholder-span-prefix"):"dt-input-placeholder-span",ref:this.saveSpan,onClick:this.handleClick},t),a)}},{key:"renderInput",value:function(){var e=this.props,s=e.value,r=e.className,t=omit(this.props,["prefixCls","onPressEnter","addonBefore","addonAfter","prefix","suffix"]);return"value"in this.props&&(t.value=fixControlledValue(s),delete t.defaultValue),this.renderLabeledIcon(this.needsPlaceholding?React.createElement("input",_extends({},t,{className:classNames(this.getInputClassName(),r),onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.handleKeyDown,ref:this.saveInput})):React.createElement("input",_extends({},t,{className:classNames(this.getInputClassName(),r),onKeyDown:this.handleKeyDown,ref:this.saveInput})))}},{key:"render",value:function(){return this.renderLabeledInput(this.renderInput())}}]),s}(React.Component);export default Input;Input.defaultProps={prefixCls:"dt-input",type:"text",disabled:!1},Input.propTypes={type:PropTypes.string,id:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),size:PropTypes.oneOf(["small","default","large"]),maxLength:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),disabled:PropTypes.bool,value:PropTypes.any,defaultValue:PropTypes.any,className:PropTypes.string,addonBefore:PropTypes.node,addonAfter:PropTypes.node,prefixCls:PropTypes.string,autosize:PropTypes.oneOfType([PropTypes.bool,PropTypes.object]),onPressEnter:PropTypes.func,onKeyDown:PropTypes.func,onKeyUp:PropTypes.func,onFocus:PropTypes.func,onBlur:PropTypes.func,prefix:PropTypes.node,suffix:PropTypes.node};