nuke-input - npm Package Compare versions

Comparing version 2.1.6 to 2.1.7

docs/single.md

 # Input Demo
 
-* order: 4
+- order: 4
 
@@ -78,16 +78,7 @@ 单行 非 md 模式
     return (
-      <StyleProvider
-        style={md}
-        commonConfigs={{ fixedFont: true }}
-        androidConfigs={{ materialDesign: true }}
-      >
+      <StyleProvider style={md} commonConfigs={{ fixedFont: true }} androidConfigs={{ materialDesign: true }}>
         <Page title="single">
           <Page.Intro main="Enter Voucher" />
           <View style={styles.demoBlock}>
-            <Input
-              materialDesign={false}
-              hasClear={true}
-              type="text"
-              placeholder="Ender Voucher Code"
-            />
+            <Input materialDesign={false} hasClear={true} type="text" placeholder="Ender Voucher Code" />
           </View>
@@ -138,2 +129,36 @@
           </View>
+          <Page.Intro main="add style" />
+          <View style={styles.demoBlock}>
+            <Input
+              style={{ width: 300, height: 122 }}
+              materialDesign={false}
+              renderCount={true}
+              maxLength={10}
+              hasClear={true}
+              defaultValue={'WATSON833'}
+              onInput={this.checkLength}
+              type="text"
+              placeholder="Enter Voucher Code"
+            />
+          </View>
+
+          <Page.Intro main="add icon" />
+          <View style={styles.demoBlock}>
+            <Input
+              style={{ width: 300, height: 102 }}
+              materialDesign={false}
+              renderCount={true}
+              maxLength={10}
+              icon={{
+                uri: 'https://img.alicdn.com/tfs/TB1YG58h3vD8KJjy0FlXXagBFXa-36-36.png',
+                onPress: (e) => {
+                  alert('icon Pressed');
+                }
+              }}
+              defaultValue={'WATSON833'}
+              onInput={this.checkLength}
+              type="text"
+              placeholder="Enter Voucher Code"
+            />
+          </View>
         </Page>
@@ -140,0 +165,0 @@ </StyleProvider>

lib/styles/index.js

@@ -1,1 +0,1 @@
-'use strict';var _extends=Object.assign||function(target){for(var source,i=1;i<arguments.length;i++)for(var key in source=arguments[i],source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);return target},_variable=require('./variable'),_variable2=_interopRequireDefault(_variable),_nukeHelper=require('nuke-helper');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function styleProvider(){var theme=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},Variables=(0,_variable2.default)(theme),core=theme.Core;return{Input:{"input-wrap":{},"input-inner":{flex:1},"single-wrap":{borderRadius:Variables['single-radius'],borderColor:Variables['single-line-color'],borderWidth:Variables['line-width'],borderStyle:Variables['border-style'],backgroundColor:Variables['bg-color'],height:Variables['single-height'],paddingLeft:Variables['single-padding-left-right'],paddingRight:Variables['single-padding-left-right']},"single-disabled":{borderColor:Variables['disabled-line-color'],backgroundColor:Variables['disabled-bg-color']},"md-single-disabled":{borderColor:Variables['disabled-line-color'],backgroundColor:'transparent'},"single-disabled-input":{color:Variables['disabled-color']},"multiple-wrap":_extends({},core.border(Variables['line-width'],Variables.borderStyle,Variables['multiple-borderColor']),{borderRadius:Variables['multiple-radius'],backgroundColor:Variables['bg-color'],height:Variables['multiple-height'],padding:Variables['multiple-padding']}),"multiple-disabled":{backgroundColor:Variables['disabled-bg-color']},"md-multiple-disabled":{backgroundColor:'transparent'},"multiple-disabled-input":{backgroundColor:Variables['disabled-bg-color'],color:Variables['disabled-color']},"single-input":{backgroundColor:'transparent',color:Variables['single-color'],height:Variables['single-height'],fontSize:Variables['single-font-size']},readonly:{color:Variables['readonly-color']},"multiple-input":{fontSize:Variables['multiple-font-size']},"single-md-wrap":{flexDirection:'column',paddingTop:Variables['md-placeholder-small-height'],paddingLeft:0,paddingRight:0,borderRadius:Variables['md-border-radius'],borderColor:'transparent',borderBottomWidth:Variables['md-border-top-width'],borderTopWidth:Variables['md-border-top-width'],borderLeftWidth:Variables['md-border-left-width'],borderRightWidth:Variables['md-border-right-width']},"static-placeholder":{paddingTop:0},"md-line":{height:(0,_nukeHelper.fixSmallUnit)(Variables['md-line-height']),marginTop:Variables['md-line-margin-tb'],marginBottom:Variables['md-line-margin-tb'],backgroundColor:Variables['md-border-color']},"md-line-focus":{height:(0,_nukeHelper.fixSmallUnit)(Variables['md-line-focus-height']),marginTop:0,marginBottom:0,backgroundColor:Variables['md-focus-border-color']},"md-line-error":{height:(0,_nukeHelper.fixSmallUnit)(Variables['md-line-error-height']),marginTop:0,marginBottom:0,backgroundColor:Variables['md-error-border-color']},"md-line-disabled":{height:(0,_nukeHelper.fixSmallUnit)(Variables['md-line-height']),backgroundColor:'transparent',borderBottomWidth:Variables['md-line-height'],borderBottomStyle:'dotted',borderBottomColor:Variables['disabled-line-color']},input:{borderTopWidth:0,borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,paddingLeft:0,paddingRight:0},"input-has-clear":{paddingRight:36},"md-input":{borderTopWidth:0,borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,paddingLeft:0,paddingRight:0,zIndex:3,backgroundColor:'transparent',marginTop:Variables['md-input-margin-top'],marginBottom:Variables['md-input-margin-bottom'],height:Variables['md-input-height']},"multiple-md-input":{borderTopWidth:0,borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,paddingLeft:0,paddingRight:0,marginTop:Variables['md-input-margin-top'],marginBottom:Variables['md-input-margin-top'],zIndex:3,backgroundColor:'transparent',lineHeight:Variables['md-input-height']},"md-error":{height:Variables['md-error-height'],justifyContent:'center'},"md-help":{height:Variables['md-help-height'],justifyContent:'flex-end',flexDirection:'row',marginTop:Variables['md-help-margin-top']},"md-error-text":{color:Variables['md-error-text-color'],fontSize:Variables['md-error-text-font-size'],flex:1,display:'flex'},"web-normalize":{webkitAppearance:'none',outline:'none',boxSizing:'border-box',width:'100%',border:'none',resize:'none',zIndex:1},"single-count-wrap":{alignSelf:'flex-end',maxWidth:Variables['single-count-min-width']},"single-count-text":{flex:1,textAlign:'right',fontSize:Variables['count-font-size'],color:Variables['count-color']},"count-error":{color:Variables['count-error-color']},"multiple-count-wrap":{alignSelf:'flex-end',maxWidth:Variables['multiple-count-min-width']},"multiple-count-text":{flex:1,textAlign:'right',fontSize:Variables['count-font-size'],color:Variables['count-color']},"md-single-count-wrap":{alignSelf:'flex-end',maxWidth:Variables['single-count-min-width']},"md-multiple-count-wrap":{alignSelf:'flex-end',maxWidth:Variables['multiple-count-min-width']},"md-multiple-count-text":{flex:1,textAlign:'right',fontSize:Variables['count-font-size'],color:Variables['count-color']},"md-clear":{width:Variables['md-clear-width'],height:Variables['md-clear-height'],position:'absolute',top:Variables['md-clear-top'],right:Variables['md-clear-right'],zIndex:4},"md-icon":{width:Variables['md-icon-width'],height:Variables['md-icon-height'],position:'absolute',top:Variables['md-icon-top'],right:Variables['md-icon-right'],zIndex:4},"clear-image":{width:Variables['clear-width'],height:Variables['clear-height']},"icon-image":{width:Variables['icon-width'],height:Variables['icon-height']},"md-warning":{width:Variables['md-warning-width'],height:Variables['md-warning-height'],position:'absolute',bottom:Variables['md-warning-bottom'],right:Variables['md-warning-right']},"single-outter":{},"multiple-outter":{},help:{minHeight:Variables['error-height'],justifyContent:'center'},clear:{width:Variables['clear-width'],height:Variables['clear-height'],position:'absolute',top:Variables['clear-top'],right:Variables['clear-right'],zIndex:2},icon:{width:Variables['icon-width'],height:Variables['icon-height'],position:'absolute',top:Variables['icon-top'],right:Variables['icon-right'],zIndex:2},"error-text":{color:Variables['error-text-color'],lineHeight:Variables['error-text-line-height'],fontSize:Variables['error-text-font-size'],paddingTop:Variables['error-text-padding-top']},"error-input-wrap":{borderColor:Variables['error-border-color']},"focus-input-wrap":{borderColor:Variables['focus-border-color']},warning:{width:Variables['warning-width'],height:Variables['warning-height'],position:'absolute',bottom:Variables['warning-bottom'],right:Variables['warning-right']},"multiple-md-wrap":{position:'relative',flexDirection:'column',justifyContent:'flex-end',padding:Variables['multiple-padding'],paddingTop:Variables['md-placeholder-height'],paddingLeft:0,paddingRight:0,borderRadius:Variables['md-border-radius'],borderColor:'transparent',borderBottomWidth:Variables['md-border-top-width'],borderTopWidth:Variables['md-border-top-width'],borderLeftWidth:Variables['md-border-left-width'],borderRightWidth:Variables['md-border-right-width'],backgroundColor:Variables['bg-color']},"text-for-height":{position:'absolute',top:10,left:10,fontSize:Variables['multiple-font-size'],lineHeight:36,visibility:'hidden'},"multiple-md-placeholder":{top:Variables['multiple-md-placeholder-top']},placeholder:_extends({position:'absolute',flexDirection:'row',left:0,top:Variables['placeholder-top'],justifyContent:'flex-start',alignItems:'center',minWidth:Variables['placeholder-min-width'],height:Variables['placeholder-height']},core.padding(0,0)),"placeholder-text":{color:Variables['placeholder-color'],fontSize:Variables['placeholder-font-size']},"md-placeholder":{alignItems:'center',height:Variables['md-placeholder-height'],top:Variables['md-placeholder-small-height']+Variables['md-input-margin-top']},"md-placeholder-static":{top:Variables['md-input-margin-top']},"md-placeholder-text":{color:Variables['md-placeholder-color'],fontSize:Variables['md-placeholder-font-size']},"md-focus-placeholder-text":{color:Variables['md-focus-placeholder-color']},"md-empty-placeholder-text":{color:Variables['md-empty-placeholder-color']},"md-disabled-placeholder-text":{color:Variables['md-disabled-placeholder-color']},"md-placeholder-small":{height:Variables['md-placeholder-small-height'],top:Variables['md-placeholder-small-top']},"md-placeholder-small-text":{paddingTop:Variables['md-placeholder-small-padding-top'],fontSize:Variables['md-placeholder-small-font-size']},"md-placeholder-small-text-has-error":{color:Variables['md-error-placeholder-color']}}}}module.exports=styleProvider;
+'use strict';var _extends=Object.assign||function(target){for(var source,i=1;i<arguments.length;i++)for(var key in source=arguments[i],source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);return target},_variable=require('./variable'),_variable2=_interopRequireDefault(_variable),_nukeHelper=require('nuke-helper');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function styleProvider(){var theme=0<arguments.length&&arguments[0]!==void 0?arguments[0]:{},Variables=(0,_variable2.default)(theme),core=theme.Core;return{Input:{"input-wrap":{},"input-inner":{flex:1},"single-wrap":{borderRadius:Variables['single-radius'],borderColor:Variables['single-line-color'],borderWidth:Variables['line-width'],borderStyle:Variables['border-style'],backgroundColor:Variables['bg-color'],height:Variables['single-height'],paddingLeft:Variables['single-padding-left-right'],paddingRight:Variables['single-padding-left-right']},"single-disabled":{borderColor:Variables['disabled-line-color'],backgroundColor:Variables['disabled-bg-color']},"md-single-disabled":{borderColor:Variables['disabled-line-color'],backgroundColor:'transparent'},"single-disabled-input":{color:Variables['disabled-color']},"multiple-wrap":_extends({},core.border(Variables['line-width'],Variables.borderStyle,Variables['multiple-borderColor']),{borderRadius:Variables['multiple-radius'],backgroundColor:Variables['bg-color'],height:Variables['multiple-height'],padding:Variables['multiple-padding']}),"multiple-disabled":{backgroundColor:Variables['disabled-bg-color']},"md-multiple-disabled":{backgroundColor:'transparent'},"multiple-disabled-input":{backgroundColor:Variables['disabled-bg-color'],color:Variables['disabled-color']},"single-input":{backgroundColor:'transparent',color:Variables['single-color'],height:Variables['single-height'],fontSize:Variables['single-font-size']},readonly:{color:Variables['readonly-color']},"multiple-input":{fontSize:Variables['multiple-font-size']},"single-md-wrap":{flexDirection:'column',paddingTop:Variables['md-placeholder-small-height'],paddingLeft:0,paddingRight:0,borderRadius:Variables['md-border-radius'],borderColor:'transparent',borderBottomWidth:Variables['md-border-top-width'],borderTopWidth:Variables['md-border-top-width'],borderLeftWidth:Variables['md-border-left-width'],borderRightWidth:Variables['md-border-right-width']},"static-placeholder":{paddingTop:0},"md-line":{height:(0,_nukeHelper.fixSmallUnit)(Variables['md-line-height']),marginTop:Variables['md-line-margin-tb'],marginBottom:Variables['md-line-margin-tb'],backgroundColor:Variables['md-border-color']},"md-line-focus":{height:(0,_nukeHelper.fixSmallUnit)(Variables['md-line-focus-height']),marginTop:0,marginBottom:0,backgroundColor:Variables['md-focus-border-color']},"md-line-error":{height:(0,_nukeHelper.fixSmallUnit)(Variables['md-line-error-height']),marginTop:0,marginBottom:0,backgroundColor:Variables['md-error-border-color']},"md-line-disabled":{height:(0,_nukeHelper.fixSmallUnit)(Variables['md-line-height']),backgroundColor:'transparent',borderBottomWidth:Variables['md-line-height'],borderBottomStyle:'dotted',borderBottomColor:Variables['disabled-line-color']},input:{borderTopWidth:0,borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,paddingLeft:0,paddingRight:0},"input-has-clear":{paddingRight:36},"md-input":{borderTopWidth:0,borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,paddingLeft:0,paddingRight:0,zIndex:3,backgroundColor:'transparent',marginTop:Variables['md-input-margin-top'],marginBottom:Variables['md-input-margin-bottom'],height:Variables['md-input-height']},"multiple-md-input":{borderTopWidth:0,borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,paddingLeft:0,paddingRight:0,marginTop:Variables['md-input-margin-top'],marginBottom:Variables['md-input-margin-top'],zIndex:3,backgroundColor:'transparent',lineHeight:Variables['md-input-height']},"md-error":{height:Variables['md-error-height'],justifyContent:'center'},"md-help":{height:Variables['md-help-height'],justifyContent:'flex-end',flexDirection:'row',marginTop:Variables['md-help-margin-top']},"md-error-text":{color:Variables['md-error-text-color'],fontSize:Variables['md-error-text-font-size'],flex:1,display:'flex'},"web-normalize":{webkitAppearance:'none',outline:'none',boxSizing:'border-box',width:'100%',border:'none',resize:'none',zIndex:1},"single-count-wrap":{alignSelf:'flex-end',maxWidth:Variables['single-count-min-width']},"single-count-text":{flex:1,textAlign:'right',fontSize:Variables['count-font-size'],color:Variables['count-color']},"count-error":{color:Variables['count-error-color']},"multiple-count-wrap":{alignSelf:'flex-end',maxWidth:Variables['multiple-count-min-width']},"multiple-count-text":{flex:1,textAlign:'right',fontSize:Variables['count-font-size'],color:Variables['count-color']},"md-single-count-wrap":{alignSelf:'flex-end',maxWidth:Variables['single-count-min-width']},"md-multiple-count-wrap":{alignSelf:'flex-end',maxWidth:Variables['multiple-count-min-width']},"md-multiple-count-text":{flex:1,textAlign:'right',fontSize:Variables['count-font-size'],color:Variables['count-color']},"md-clear":{width:Variables['md-clear-width'],height:Variables['md-clear-height'],position:'absolute',top:Variables['md-clear-top'],right:Variables['md-clear-right'],zIndex:4},"md-icon":{width:Variables['md-icon-width'],height:Variables['md-icon-height'],position:'absolute',top:Variables['md-icon-top'],right:Variables['md-icon-right'],zIndex:4},"clear-image":{width:Variables['clear-width'],height:Variables['clear-height']},"md-warning":{width:Variables['md-warning-width'],height:Variables['md-warning-height'],position:'absolute',bottom:Variables['md-warning-bottom'],right:Variables['md-warning-right']},"single-outter":{},"multiple-outter":{},help:{minHeight:Variables['error-height'],justifyContent:'center'},clear:{width:Variables['clear-width'],height:Variables['clear-height']},clearWrap:{width:Variables['icon-width'],height:Variables['icon-height'],position:'absolute',top:0,right:Variables['icon-right'],zIndex:2,justifyContent:'center'},icon:{width:Variables['icon-width'],height:Variables['icon-height'],position:'absolute',justifyContent:'center',right:Variables['icon-right'],top:0,zIndex:2},"icon-image":{width:Variables['icon-width'],height:Variables['icon-height']},"error-text":{color:Variables['error-text-color'],lineHeight:Variables['error-text-line-height'],fontSize:Variables['error-text-font-size'],paddingTop:Variables['error-text-padding-top']},"error-input-wrap":{borderColor:Variables['error-border-color']},"focus-input-wrap":{borderColor:Variables['focus-border-color']},warning:{width:Variables['warning-width'],height:Variables['warning-height'],position:'absolute',bottom:Variables['warning-bottom'],right:Variables['warning-right']},"multiple-md-wrap":{position:'relative',flexDirection:'column',justifyContent:'flex-end',padding:Variables['multiple-padding'],paddingTop:Variables['md-placeholder-height'],paddingLeft:0,paddingRight:0,borderRadius:Variables['md-border-radius'],borderColor:'transparent',borderBottomWidth:Variables['md-border-top-width'],borderTopWidth:Variables['md-border-top-width'],borderLeftWidth:Variables['md-border-left-width'],borderRightWidth:Variables['md-border-right-width'],backgroundColor:Variables['bg-color']},"text-for-height":{position:'absolute',top:10,left:10,fontSize:Variables['multiple-font-size'],lineHeight:36,visibility:'hidden'},"multiple-md-placeholder":{top:Variables['multiple-md-placeholder-top']},placeholder:_extends({position:'absolute',flexDirection:'row',left:0,top:Variables['placeholder-top'],justifyContent:'flex-start',alignItems:'center',minWidth:Variables['placeholder-min-width'],height:Variables['placeholder-height']},core.padding(0,0)),"placeholder-text":{color:Variables['placeholder-color'],fontSize:Variables['placeholder-font-size']},"md-placeholder":{alignItems:'center',height:Variables['md-placeholder-height'],top:Variables['md-placeholder-small-height']+Variables['md-input-margin-top']},"md-placeholder-static":{top:Variables['md-input-margin-top']},"md-placeholder-text":{color:Variables['md-placeholder-color'],fontSize:Variables['md-placeholder-font-size']},"md-focus-placeholder-text":{color:Variables['md-focus-placeholder-color']},"md-empty-placeholder-text":{color:Variables['md-empty-placeholder-color']},"md-disabled-placeholder-text":{color:Variables['md-disabled-placeholder-color']},"md-placeholder-small":{height:Variables['md-placeholder-small-height'],top:Variables['md-placeholder-small-top']},"md-placeholder-small-text":{paddingTop:Variables['md-placeholder-small-padding-top'],fontSize:Variables['md-placeholder-small-font-size']},"md-placeholder-small-text-has-error":{color:Variables['md-error-placeholder-color']}}}}module.exports=styleProvider;

lib/view/normal.js

@@ -1,1 +0,1 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:!0});var _extends=Object.assign||function(target){for(var source,i=1;i<arguments.length;i++)for(var key in source=arguments[i],source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);return target},_createClass=function(){function defineProperties(target,props){for(var descriptor,i=0;i<props.length;i++)descriptor=props[i],descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,'value'in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}(),_rax=require('rax'),_nukeView=require('nuke-view'),_nukeView2=_interopRequireDefault(_nukeView),_nukeText=require('nuke-text'),_nukeText2=_interopRequireDefault(_nukeText),_nukeImage=require('nuke-image'),_nukeImage2=_interopRequireDefault(_nukeImage),_nukeEnv=require('nuke-env'),_util=require('../mods/util'),_nukeHelper=require('nuke-helper'),_base=require('./base'),_base2=_interopRequireDefault(_base),_inheritKeys=require('../mods/inherit-keys'),_inheritKeys2=_interopRequireDefault(_inheritKeys),_image=require('../mods/image'),_image2=_interopRequireDefault(_image);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj)0<=keys.indexOf(i)||Object.prototype.hasOwnProperty.call(obj,i)&&(target[i]=obj[i]);return target}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return call&&('object'==typeof call||'function'==typeof call)?call:self}function _inherits(subClass,superClass){if('function'!=typeof superClass&&null!==superClass)throw new TypeError('Super expression must either be null or a function, not '+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}var Input=function(_Component){function Input(props,context){_classCallCheck(this,Input);var _this=_possibleConstructorReturn(this,(Input.__proto__||Object.getPrototypeOf(Input)).call(this,props)),value=null;'value'in props?value=props.value:'defaultValue'in props&&(value=props.defaultValue);var count=value&&value.length||0;return _this.state={value:value,inputValue:value,count:value&&value.length||0,maxLengthError:count>props.maxLength},_this.fixedFont=context.commonConfigs&&context.commonConfigs.fixedFont,'fixedFont'in props&&(_this.fixedFont=props.fixedFont),_this.inputHandler=_this.inputHandler.bind(_this),_this.changeHander=_this.changeHander.bind(_this),_this.clearHandler=_this.clearHandler.bind(_this),_this.focusHandler=_this.focusHandler.bind(_this),_this.blurHandler=_this.blurHandler.bind(_this),_this.getRef=_this.getRef.bind(_this),_this.getValue=_this.getValue.bind(_this),_this.focus=_this.focus.bind(_this),_this.blur=_this.blur.bind(_this),_this.clear=_this.clear.bind(_this),_this}return _inherits(Input,_Component),_createClass(Input,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){'value'in nextProps&&('string'==typeof nextProps.value||'number'==typeof nextProps.value)&&nextProps.value!==this.state.inputValue&&this.setState({value:nextProps.value,inputValue:nextProps.value,count:nextProps.value.length,maxLengthError:nextProps.value.length>this.props.maxLength})}},{key:'inputHandler',value:function inputHandler(text,eventObj){var maxLength=this.props.maxLength;this.setState({inputValue:text,count:text.length,maxLengthError:text.length>maxLength}),this.trigger('onInput',eventObj)}},{key:'changeHander',value:function changeHander(text,eventObj){var maxLength=this.props.maxLength;this.setState({value:text,inputValue:text,count:text.length,maxLengthError:text.length>maxLength}),this.trigger('onChange',text,eventObj)}},{key:'getInput',value:function getInput(){var _this2=this,_props=this.props,readOnly=_props.readOnly,disabled=_props.disabled,onInput=_props.onInput,onChange=_props.onChange,_props$style=_props.style,style=void 0===_props$style?{}:_props$style,_props$inputStyle=_props.inputStyle,inputStyle=void 0===_props$inputStyle?{}:_props$inputStyle,hasClear=_props.hasClear,rows=_props.rows,multiple=_props.multiple,others=_objectWithoutProperties(_props,['readOnly','disabled','onInput','onChange','style','inputStyle','hasClear','rows','multiple']),value=this.state.value,styles=this.props.themeStyle,inputAttrs=_extends({},others,{value:null===typeof value?null:value,readOnly:readOnly,multiple:multiple,style:[styles.input,inputStyle],inputStyle:hasClear?styles['input-has-clear']:{},onInput:this.inputHandler,onChange:this.changeHander,onFocus:this.focusHandler,onBlur:this.blurHandler,disabled:disabled});return _nukeEnv.isWeex?multiple&&!this.props.onReturn&&(delete inputAttrs.onReturn,delete inputAttrs.returnKeyType):!disabled&&delete inputAttrs.disabled,multiple&&(inputAttrs.rows=rows||3),_inheritKeys2.default.map(function(item){styles[item]&&(inputAttrs.style[item]=styles[item])}),(0,_rax.createElement)(_base2.default,_extends({fixedFont:this.fixedFont},inputAttrs,{ref:function ref(n){_this2.input=n}}))}},{key:'clear',value:function clear(){this.setState({value:'',count:0})}},{key:'clearHandler',value:function clearHandler(){this.setState({value:this.state.inputValue}),this.setState({value:'',inputValue:'',count:0}),this.focus(),this.trigger('onClear','')}},{key:'focusHandler',value:function focusHandler(e){this.setState({focus:!0}),this.trigger('onFocus',e)}},{key:'trigger',value:function trigger(fn){if('string'==typeof fn&&(fn=this.props[fn]),'function'==typeof fn){for(var _len=arguments.length,attrs=Array(1<_len?_len-1:0),_key=1;_key<_len;_key++)attrs[_key-1]=arguments[_key];return fn.apply(this,attrs)}}},{key:'blurHandler',value:function blurHandler(e){this.setState({focus:!1}),this.trigger('onBlur',e)}},{key:'focus',value:function focus(){this.input.focus()}},{key:'getRef',value:function getRef(){return this.input.getRef()}},{key:'blur',value:function blur(){this.input.blur()}},{key:'getValue',value:function getValue(){return this.input.getValue()}},{key:'renderClear',value:function renderClear(styles){var count=this.state.count;return count?(0,_rax.createElement)(_nukeImage2.default,{source:{uri:_image2.default.clear},onClick:this.clearHandler,style:styles.clear}):null}},{key:'renderCustomIcon',value:function renderCustomIcon(styles){var _props$icon=this.props.icon,icon=void 0===_props$icon?{}:_props$icon,uri=icon.uri,_icon$onPress=icon.onPress,onPress=void 0===_icon$onPress?function(){}:_icon$onPress,_icon$style=icon.style,style=void 0===_icon$style?{}:_icon$style;return uri?(0,_rax.createElement)(_nukeView2.default,{style:[styles.icon,style],onClick:onPress},(0,_rax.createElement)(_nukeImage2.default,{source:{uri:uri},style:[styles['icon-image'],style]})):null}},{key:'renderCount',value:function(styles){var _props2=this.props,maxLength=_props2.maxLength,multiple=_props2.multiple,renderCount=_props2.renderCount,maxLengthError=this.state.maxLengthError;if(!maxLength||!renderCount)return null;var count=this.state.count;return(0,_rax.createElement)(_nukeView2.default,{x:'count',style:styles[''+(multiple?'multiple-count-wrap':'single-count-wrap')]},(0,_rax.createElement)(_nukeText2.default,{fixedFont:this.fixedFont,style:[styles[''+(multiple?'multiple-count-text':'single-count-text')],maxLengthError?styles['count-error']:{}]},count,' / ',maxLength))}},{key:'render',value:function render(){var _props3=this.props,readOnly=_props3.readOnly,disabled=_props3.disabled,_props3$style=_props3.style,style=void 0===_props3$style?{}:_props3$style,renderCount=_props3.renderCount,hideErrorWhenFocus=_props3.hideErrorWhenFocus,hasClear=_props3.hasClear,multiple=_props3.multiple,status=_props3.status,errorMessage=_props3.errorMessage,styles=this.props.themeStyle,_state=this.state,focus=_state.focus,maxLengthError=_state.maxLengthError,inputWrapperStyle=Object.assign({},styles['input-wrap'],styles[''+(multiple?'multiple-wrap':'single-wrap')],readOnly?styles.readonly:{},'error'===status?styles['error-input-wrap']:{},focus?styles['focus-input-wrap']:{},disabled?styles[(multiple?'multiple':'single')+'-disabled']:{},style);('error'===status&&!hideErrorWhenFocus||maxLengthError)&&(inputWrapperStyle=Object.assign(inputWrapperStyle,styles['error-input-wrap'])),disabled&&(inputWrapperStyle=Object.assign(inputWrapperStyle,styles[(multiple?'multiple':'single')+'-disabled']));var outerStyle={};return _nukeHelper.bubbleKeys.map(function(item){item in inputWrapperStyle&&(outerStyle[item]=inputWrapperStyle[item])}),outerStyle.height&&delete outerStyle.height,outerStyle.backgroundColor&&delete outerStyle.backgroundColor,(0,_rax.createElement)(_nukeView2.default,{x:'normal-outter',style:outerStyle},(0,_rax.createElement)(_nukeView2.default,{x:'input-wrap',style:inputWrapperStyle},this.getInput()),hasClear?this.renderClear(styles):null,hasClear?null:this.renderCustomIcon(styles),'error'===status&&errorMessage||renderCount?(0,_rax.createElement)(_nukeView2.default,{x:'help',style:styles.help},!focus&&'error'===status&&errorMessage?(0,_rax.createElement)(_nukeText2.default,{fixedFont:this.fixedFont,style:styles['error-text']},errorMessage):null,this.renderCount(styles)):null)}}]),Input}(_rax.Component);Input.propTypes={defaultValue:_rax.PropTypes.any,onFocus:_rax.PropTypes.func,onInput:_rax.PropTypes.func,onBlur:_rax.PropTypes.func,onReturn:_rax.PropTypes.func,placeholder:_rax.PropTypes.string,readOnly:_rax.PropTypes.boolean,disabled:_rax.PropTypes.boolean,style:_rax.PropTypes.any,maxLength:_rax.PropTypes.number,multiple:_rax.PropTypes.boolean,inputStyle:_rax.PropTypes.any,returnKeyType:_rax.PropTypes.any,hasClear:_rax.PropTypes.boolean,rows:_rax.PropTypes.number,maxRows:_rax.PropTypes.number,type:_rax.PropTypes.oneOf(['text','url','password','tel','date','time','email']),status:_rax.PropTypes.oneOf(['success','error']),errorMessage:_rax.PropTypes.string,renderCount:_rax.PropTypes.boolean,value:_rax.PropTypes.string,themeStyle:_rax.PropTypes.any,hideErrorWhenFocus:_rax.PropTypes.boolean},Input.defaultProps={onFocus:function onFocus(){},onInput:function onInput(){},onBlur:function onBlur(){},onReturn:function onReturn(){},placeholder:'',readOnly:!1,disabled:!1,style:{},multiple:!1,inputStyle:{},hasClear:!1,type:'text',status:'success',themeStyle:{},renderCount:!1,placeholderColor:'#999999',hideErrorWhenFocus:!0},Input.contextTypes={androidConfigs:_rax.PropTypes.any,commonConfigs:_rax.PropTypes.any},exports.default=Input,module.exports=exports['default'];
+'use strict';Object.defineProperty(exports,'__esModule',{value:!0});var _extends=Object.assign||function(target){for(var source,i=1;i<arguments.length;i++)for(var key in source=arguments[i],source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);return target},_createClass=function(){function defineProperties(target,props){for(var descriptor,i=0;i<props.length;i++)descriptor=props[i],descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,'value'in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}(),_rax=require('rax'),_nukeView=require('nuke-view'),_nukeView2=_interopRequireDefault(_nukeView),_nukeText=require('nuke-text'),_nukeText2=_interopRequireDefault(_nukeText),_nukeImage=require('nuke-image'),_nukeImage2=_interopRequireDefault(_nukeImage),_nukeEnv=require('nuke-env'),_nukeHelper=require('nuke-helper'),_base=require('./base'),_base2=_interopRequireDefault(_base),_inheritKeys=require('../mods/inherit-keys'),_inheritKeys2=_interopRequireDefault(_inheritKeys),_image=require('../mods/image'),_image2=_interopRequireDefault(_image);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj)0<=keys.indexOf(i)||Object.prototype.hasOwnProperty.call(obj,i)&&(target[i]=obj[i]);return target}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return call&&('object'==typeof call||'function'==typeof call)?call:self}function _inherits(subClass,superClass){if('function'!=typeof superClass&&null!==superClass)throw new TypeError('Super expression must either be null or a function, not '+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}var Input=function(_Component){function Input(props,context){_classCallCheck(this,Input);var _this=_possibleConstructorReturn(this,(Input.__proto__||Object.getPrototypeOf(Input)).call(this,props)),value=null;'value'in props?value=props.value:'defaultValue'in props&&(value=props.defaultValue);var count=value&&value.length||0;return _this.state={value:value,inputValue:value,count:value&&value.length||0,maxLengthError:count>props.maxLength},_this.fixedFont=context.commonConfigs&&context.commonConfigs.fixedFont,'fixedFont'in props&&(_this.fixedFont=props.fixedFont),_this.inputHandler=_this.inputHandler.bind(_this),_this.changeHander=_this.changeHander.bind(_this),_this.clearHandler=_this.clearHandler.bind(_this),_this.focusHandler=_this.focusHandler.bind(_this),_this.blurHandler=_this.blurHandler.bind(_this),_this.getRef=_this.getRef.bind(_this),_this.getValue=_this.getValue.bind(_this),_this.focus=_this.focus.bind(_this),_this.blur=_this.blur.bind(_this),_this.clear=_this.clear.bind(_this),_this}return _inherits(Input,_Component),_createClass(Input,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){'value'in nextProps&&('string'==typeof nextProps.value||'number'==typeof nextProps.value)&&nextProps.value!==this.state.inputValue&&this.setState({value:nextProps.value,inputValue:nextProps.value,count:nextProps.value.length,maxLengthError:nextProps.value.length>this.props.maxLength})}},{key:'inputHandler',value:function inputHandler(text,eventObj){var maxLength=this.props.maxLength;this.setState({inputValue:text,count:text.length,maxLengthError:text.length>maxLength}),this.trigger('onInput',eventObj)}},{key:'changeHander',value:function changeHander(text,eventObj){var maxLength=this.props.maxLength;this.setState({value:text,inputValue:text,count:text.length,maxLengthError:text.length>maxLength}),this.trigger('onChange',text,eventObj)}},{key:'getInput',value:function getInput(){var _this2=this,_props=this.props,readOnly=_props.readOnly,disabled=_props.disabled,onInput=_props.onInput,onChange=_props.onChange,_props$style=_props.style,style=void 0===_props$style?{}:_props$style,_props$inputStyle=_props.inputStyle,inputStyle=void 0===_props$inputStyle?{}:_props$inputStyle,hasClear=_props.hasClear,rows=_props.rows,multiple=_props.multiple,others=_objectWithoutProperties(_props,['readOnly','disabled','onInput','onChange','style','inputStyle','hasClear','rows','multiple']),value=this.state.value,styles=this.props.themeStyle,inputAttrs=_extends({},others,{value:null===typeof value?null:value,readOnly:readOnly,multiple:multiple,style:[styles.input,inputStyle],inputStyle:hasClear?styles['input-has-clear']:{},onInput:this.inputHandler,onChange:this.changeHander,onFocus:this.focusHandler,onBlur:this.blurHandler,disabled:disabled});return _nukeEnv.isWeex?multiple&&!this.props.onReturn&&(delete inputAttrs.onReturn,delete inputAttrs.returnKeyType):!disabled&&delete inputAttrs.disabled,multiple&&(inputAttrs.rows=rows||3),_inheritKeys2.default.map(function(item){styles[item]&&(inputAttrs.style[item]=styles[item])}),(0,_rax.createElement)(_base2.default,_extends({fixedFont:this.fixedFont},inputAttrs,{ref:function ref(n){_this2.input=n}}))}},{key:'clear',value:function clear(){this.setState({value:'',count:0})}},{key:'clearHandler',value:function clearHandler(){this.setState({value:this.state.inputValue}),this.setState({value:'',inputValue:'',count:0}),this.focus(),this.trigger('onClear','')}},{key:'focusHandler',value:function focusHandler(e){this.setState({focus:!0}),this.trigger('onFocus',e)}},{key:'trigger',value:function trigger(fn){if('string'==typeof fn&&(fn=this.props[fn]),'function'==typeof fn){for(var _len=arguments.length,attrs=Array(1<_len?_len-1:0),_key=1;_key<_len;_key++)attrs[_key-1]=arguments[_key];return fn.apply(this,attrs)}}},{key:'blurHandler',value:function blurHandler(e){this.setState({focus:!1}),this.trigger('onBlur',e)}},{key:'focus',value:function focus(){this.input.focus()}},{key:'getRef',value:function getRef(){return this.input.getRef()}},{key:'blur',value:function blur(){this.input.blur()}},{key:'getValue',value:function getValue(){return this.input.getValue()}},{key:'renderClear',value:function renderClear(styles,height){var count=this.state.count;return count?(0,_rax.createElement)(_nukeView2.default,{style:[styles.clearWrap,{height:height}],onClick:this.clearHandler},(0,_rax.createElement)(_nukeImage2.default,{source:{uri:_image2.default.clear},style:styles.clear})):null}},{key:'renderCustomIcon',value:function renderCustomIcon(styles,height){var _props$icon=this.props.icon,icon=void 0===_props$icon?{}:_props$icon,uri=icon.uri,_icon$onPress=icon.onPress,onPress=void 0===_icon$onPress?function(){}:_icon$onPress,_icon$style=icon.style,style=void 0===_icon$style?{}:_icon$style;return uri?(0,_rax.createElement)(_nukeView2.default,{style:[styles.icon,{height:height},style],onClick:onPress},(0,_rax.createElement)(_nukeImage2.default,{source:{uri:uri},style:[styles['icon-image'],style]})):null}},{key:'renderCount',value:function(styles){var _props2=this.props,maxLength=_props2.maxLength,multiple=_props2.multiple,renderCount=_props2.renderCount,maxLengthError=this.state.maxLengthError;if(!maxLength||!renderCount)return null;var count=this.state.count;return(0,_rax.createElement)(_nukeView2.default,{x:'count',style:styles[''+(multiple?'multiple-count-wrap':'single-count-wrap')]},(0,_rax.createElement)(_nukeText2.default,{fixedFont:this.fixedFont,style:[styles[''+(multiple?'multiple-count-text':'single-count-text')],maxLengthError?styles['count-error']:{}]},count,' / ',maxLength))}},{key:'render',value:function render(){var _props3=this.props,readOnly=_props3.readOnly,disabled=_props3.disabled,_props3$style=_props3.style,style=void 0===_props3$style?{}:_props3$style,renderCount=_props3.renderCount,hideErrorWhenFocus=_props3.hideErrorWhenFocus,hasClear=_props3.hasClear,multiple=_props3.multiple,status=_props3.status,errorMessage=_props3.errorMessage,styles=this.props.themeStyle,_state=this.state,focus=_state.focus,maxLengthError=_state.maxLengthError,inputWrapperStyle=Object.assign({},styles['input-wrap'],styles[''+(multiple?'multiple-wrap':'single-wrap')],readOnly?styles.readonly:{},'error'===status?styles['error-input-wrap']:{},focus?styles['focus-input-wrap']:{},disabled?styles[(multiple?'multiple':'single')+'-disabled']:{},style),customHeight=inputWrapperStyle.height;('error'===status&&!hideErrorWhenFocus||maxLengthError)&&(inputWrapperStyle=Object.assign(inputWrapperStyle,styles['error-input-wrap'])),disabled&&(inputWrapperStyle=Object.assign(inputWrapperStyle,styles[(multiple?'multiple':'single')+'-disabled']));var outerStyle={};return _nukeHelper.bubbleKeys.map(function(item){item in inputWrapperStyle&&(outerStyle[item]=inputWrapperStyle[item])}),outerStyle.height&&delete outerStyle.height,outerStyle.backgroundColor&&delete outerStyle.backgroundColor,(0,_rax.createElement)(_nukeView2.default,{x:'normal-outter',style:outerStyle},(0,_rax.createElement)(_nukeView2.default,{x:'input-wrap',style:inputWrapperStyle},this.getInput()),hasClear?this.renderClear(styles,customHeight):null,hasClear?null:this.renderCustomIcon(styles,customHeight),'error'===status&&errorMessage||renderCount?(0,_rax.createElement)(_nukeView2.default,{x:'help',style:styles.help},!focus&&'error'===status&&errorMessage?(0,_rax.createElement)(_nukeText2.default,{fixedFont:this.fixedFont,style:styles['error-text']},errorMessage):null,this.renderCount(styles)):null)}}]),Input}(_rax.Component);Input.propTypes={defaultValue:_rax.PropTypes.any,onFocus:_rax.PropTypes.func,onInput:_rax.PropTypes.func,onBlur:_rax.PropTypes.func,onReturn:_rax.PropTypes.func,placeholder:_rax.PropTypes.string,readOnly:_rax.PropTypes.boolean,disabled:_rax.PropTypes.boolean,style:_rax.PropTypes.any,maxLength:_rax.PropTypes.number,multiple:_rax.PropTypes.boolean,inputStyle:_rax.PropTypes.any,returnKeyType:_rax.PropTypes.any,hasClear:_rax.PropTypes.boolean,rows:_rax.PropTypes.number,maxRows:_rax.PropTypes.number,type:_rax.PropTypes.oneOf(['text','url','password','tel','date','time','email']),status:_rax.PropTypes.oneOf(['success','error']),errorMessage:_rax.PropTypes.string,renderCount:_rax.PropTypes.boolean,value:_rax.PropTypes.string,themeStyle:_rax.PropTypes.any,hideErrorWhenFocus:_rax.PropTypes.boolean},Input.defaultProps={onFocus:function onFocus(){},onInput:function onInput(){},onBlur:function onBlur(){},onReturn:function onReturn(){},placeholder:'',readOnly:!1,disabled:!1,style:{},multiple:!1,inputStyle:{},hasClear:!1,type:'text',status:'success',themeStyle:{},renderCount:!1,placeholderColor:'#999999',hideErrorWhenFocus:!0},Input.contextTypes={androidConfigs:_rax.PropTypes.any,commonConfigs:_rax.PropTypes.any},exports.default=Input,module.exports=exports['default'];

package.json

 {
   "name": "nuke-input",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "输入框",
@@ -49,2 +49,3 @@ "main": "lib/index",
     "nuke-button": "^2.1.6",
+    "nuke-icon": "^2.1.6",
     "nuke-page": "^2.1.6",
@@ -58,3 +59,3 @@ "resemblejs-node": "^1.0.0",
   "license": "Apache",
-  "gitHead": "9b72a52f7ba75032458a88b2e3beaeb29059b939"
+  "gitHead": "6f08f6e04f610b99106b3b2127aa975af3be151a"
 }

src/styles/index.js

@@ -257,6 +257,3 @@ 'use strict';
       },
-      'icon-image': {
-        width: Variables['icon-width'],
-        height: Variables['icon-height'],
-      },
+
       'md-warning': {
@@ -282,6 +279,15 @@ width: Variables['md-warning-width'],
         height: Variables['clear-height'],
+        // position: 'absolute',
+        // top: Variables['clear-top'],
+        // right: Variables['clear-right'],
+        // zIndex: 2, // for web
+      },
+      clearWrap: {
+        width: Variables['icon-width'],
+        height: Variables['icon-height'],
         position: 'absolute',
-        top: Variables['clear-top'],
-        right: Variables['clear-right'],
+        top: 0,
+        right: Variables['icon-right'],
         zIndex: 2, // for web
+        justifyContent: 'center',
       },
@@ -292,6 +298,13 @@ icon: {
         position: 'absolute',
-        top: Variables['icon-top'],
+        justifyContent: 'center',
+        // top: Variables['icon-top'],
         right: Variables['icon-right'],
+        top: 0,
+        // right: 0,
         zIndex: 2, // for web
       },
+      'icon-image': {
+        width: Variables['icon-width'],
+        height: Variables['icon-height'],
+      },
       'error-text': {
@@ -298,0 +311,0 @@ color: Variables['error-text-color'],

src/view/normal.jsx

@@ -9,3 +9,2 @@ 'use strict';
 import { isWeex } from 'nuke-env';
-import { genEventObject } from '../mods/util';
 import { bubbleKeys } from 'nuke-helper';
@@ -194,13 +193,15 @@ import BaseInput from './base';
   }
-  renderClear(styles) {
+  renderClear(styles, height) {
     const { count } = this.state;
     return count ? (
-      <Image
-        source={{ uri: IMAGE_URL.clear }}
-        onClick={this.clearHandler}
-        style={styles.clear}
-      />
+      <View style={[styles.clearWrap, { height }]} onClick={this.clearHandler}>
+        <Image
+          source={{ uri: IMAGE_URL.clear }}
+          // onClick={this.clearHandler}
+          style={styles.clear}
+        />
+      </View>
     ) : null;
   }
-  renderCustomIcon(styles) {
+  renderCustomIcon(styles, height) {
     const { icon = {} } = this.props;
@@ -210,3 +211,3 @@ const { uri, onPress = () => { }, style = {} } = icon;
     return (
-      <View style={[styles.icon, style]} onClick={onPress}>
+      <View style={[styles.icon, { height }, style]} onClick={onPress}>
         <Image source={{ uri }} style={[styles['icon-image'], style]} />
@@ -266,2 +267,3 @@ </View>
     );
+    const customHeight = inputWrapperStyle.height;
     // debugger;
@@ -299,4 +301,4 @@ if ((status === 'error' && !hideErrorWhenFocus) || maxLengthError) {
         </View>
-        {hasClear ? this.renderClear(styles) : null}
-        {!hasClear ? this.renderCustomIcon(styles) : null}
+        {hasClear ? this.renderClear(styles, customHeight) : null}
+        {!hasClear ? this.renderCustomIcon(styles, customHeight) : null}
         {(status === 'error' && errorMessage) || renderCount ? (
@@ -303,0 +305,0 @@ <View x="help" style={styles.help}>

No alert changes

Improved metrics

Total package byte prevSize

237440

increased by0.77%

Lines of code

2531

increased by0.56%

Worsened metrics

Dev dependency count

16

increased by6.67%

No dependency changes