nuke-input - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

docs/basic.md

@@ -1,6 +0,6 @@
-# 按钮类型
+# 类型
 
 - order: 0
 
-普通按钮。
+普通。
 
@@ -23,6 +23,16 @@ ---
         this.state = {
-            inputVal:'hi nuke',
+            inputVal:'',
+            textVal:'',
+            valid1:'',
+            valid2:'',
         }
     
+    }    
+
+    validate(result,key,e) {
+        var obj={};
+        obj[key]=result;
+        this.setState(obj);
     }
+
     change=(e)=>{
@@ -35,8 +45,25 @@ console.log(e)
     }
-
+    textChange=(e)=>{
+        console.log(e)
+        let value=e.value || e.target.value || '';
+        this.setState({
+            textVal: value
+        }) 
+    }
     render() {
         return (
-            <View>
-               <Input ref="myinput" placeholder="搜一搜..." onInput={this.change} value={this.state.inputVal}  onFocus={(e) => console.log('onFocus',e)} onBlur={(e) => console.log('onBlur',e)}
-                        />
+            <View style={{paddingTop:'30rem'}}>
+                <View style={styles.st}><Text style={styles.stText}>单行</Text></View>
+                <Input ref="myinput" placeholder="搜一搜..." value={this.state.inputVal} onChange={this.change.bind(this)} />
+
+                <View style={styles.st}><Text style={styles.stText}>输入校验success反馈</Text></View>
+                <Input hasFeedback="true" onChange={this.validate.bind(this,'success','valid1')} state={this.state.valid1} />
+
+                <View style={styles.st}><Text style={styles.stText}>输入校验error反馈</Text></View>
+                <Input hasFeedback="true" placeholder="请输入..." onChange={this.validate.bind(this,'error','valid2')} state={this.state.valid2} />
+                
+
+                <View style={styles.st}><Text style={styles.stText}>textarea</Text></View>
+                <Input style={{height:'300rem'}} multiple={true} ref="xxx" placeholder="写一句自我介绍" onInput={this.textChange} value={this.state.textVal}  onFocus={(e) => console.log('onFocus',e)} onBlur={(e) => console.log('onBlur',e)}/>
+
             </View>
@@ -47,5 +74,19 @@
 }
+const styles={
+    st:{
+        marginBottom:'30rem',
+        marginTop:'10rem',
+        paddingTop:'10rem',
+        paddingBottom:'10rem',
+        paddingLeft:'20rem',
+        backgroundColor:'#dddddd'
+    },
+    stText:{
+        fontSize:'36rem'
+    }
+    
+}
 
-mount(<App/>, mountNode);
+mount(<App/>, 'body');
 
 ````

HISTORY.md

 # Changelog 
 
 
+## 0.1.7 / 2016-11-30 
+
+  * [[7b1e134](http://gitlab.alibaba-inc.com/nuke/input/commit/7b1e134ad51c8baba18f93b8bafc5d2340935cdc)] - `fix` update style 
+  * [[c74635a](http://gitlab.alibaba-inc.com/nuke/input/commit/c74635a489691d5bbf1baf90e44ecd150f5fefa4)] - `docs` update docs 
+  * [[200544e](http://gitlab.alibaba-inc.com/nuke/input/commit/200544ed816971c5b192cecd9a221826352d695f)] - `fix` 更新textarea h5 样式。更新文档 
+  * [[da84ab3](http://gitlab.alibaba-inc.com/nuke/input/commit/da84ab388f4b395dd67599c7a43e22bc3a42ce43)] - `fix` update package.json 
+
 ## 0.1.6 / 2016-11-14 
@@ -5,0 +12,0 @@

lib/index.js

@@ -205,4 +205,6 @@ /** @jsx createElement */
                 style = _props2$style === undefined ? {} : _props2$style,
+                _props2$contentStyle = _props2.contentStyle,
+                contentStyle = _props2$contentStyle === undefined ? {} : _props2$contentStyle,
                 multiple = _props2.multiple,
-                others = _objectWithoutProperties(_props2, ['hasFeedback', 'hasClear', 'prefix', 'state', 'onChange', 'onFocus', 'onBlur', 'defaultValue', 'readOnly', 'disabled', 'style', 'multiple']);
+                others = _objectWithoutProperties(_props2, ['hasFeedback', 'hasClear', 'prefix', 'state', 'onChange', 'onFocus', 'onBlur', 'defaultValue', 'readOnly', 'disabled', 'style', 'contentStyle', 'multiple']);
 
@@ -214,3 +216,3 @@ //hasClear与hasFeedback互斥
 
-            style.textAlign = 'left';
+            // style.textAlign ='left';
             var type = 'enclosed';
@@ -238,10 +240,12 @@
             };
-            // inputStyle=Object.assign(inputStyle,
             var inputElement = void 0;
+            if (multiple) {
+                inputElement = (0, _weexRx.createElement)('textarea', _extends({}, attrs, { style: [_index2.default['nukeInputInput'], inputStyle, _index2.default[errorTextStyle]] }, this.pickAttrs(others)));
+            } else {
 
-            inputElement = (0, _weexRx.createElement)('input', _extends({}, attrs, this.pickAttrs(others), {
-                type: this.props.htmlType,
-                style: [_index2.default['nukeInputInput'], inputStyle, _index2.default[errorTextStyle]]
-            }));
-
+                inputElement = (0, _weexRx.createElement)('input', _extends({}, attrs, this.pickAttrs(others), {
+                    type: this.props.htmlType,
+                    style: [_index2.default['nukeInputInput'], inputStyle, _index2.default[errorTextStyle]]
+                }));
+            }
             return (0, _weexRx.createElement)(
@@ -248,0 +252,0 @@ _nukeComponents.View,

package.json

 {
   "name": "nuke-input",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "输入框",
@@ -5,0 +5,0 @@ "main": "lib/index",

README.md

@@ -1,7 +0,2 @@
-> **组件文档请参考： [next 组件书写规范](next/next-bin#1)**
 
-**以下是标准 README 的内容**
-
------------------
-
 # Input
@@ -14,13 +9,18 @@
 ---
+**注意** 此 Input 自带了一些UI样式，如果你希望自己封装样式，可以使用TextInput组件。
 
+
 ## API
 
-参数 | 说明 | 类型 | 默认值
------|-----|-----|-----
-trigger | 触发元素 | Element|
-triggerType | 触发行为，可选 `hover/click` | String| hover
-align | 气泡框位置，可选 `t,r,b,l,tl,tr,rt,rb,bl,br,lt,lb` | String| t
-closable | 是否有关闭按钮 |Boolean | true
-visible | 用于手动控制浮层显隐 | Boolean | false
-onClose | 关闭时触发回调 | Function |
-afterClose | 关闭后触发回调 | Function | false
+
+| 属性配置 | 说明    | 类型 | 默认值   |
+| :------------- | :------------- |:------------- |:------------- |
+| multiple      | 是否为多行，不选则为单行  | bool |   false |
+| state      | 状态，可选为`''/success/error/warning`  | string |   '' |
+| value | 当前的value 值 |  string | |
+| disabled  | 状态 设置文本域禁用状态    | boolean  |   false |
+| onInput      | 输入事件 | `function` |  false |
+| onFocus      | Focus事件 | `function` |  false |
+| onBlur      | Blur事件 | `function` |  false |
+| onChange      | change事件 (**在weex native 的触发时机可能有问题**)| `function` |  false |
+| maxLength      | 最大长度  | number |   undefined |

src/index.js

@@ -149,2 +149,3 @@ /** @jsx createElement */
             style = {},
+            contentStyle={},
             multiple,
@@ -157,3 +158,3 @@ ...others
 
-        style.textAlign ='left';
+        // style.textAlign ='left';
         const type = 'enclosed';
@@ -183,6 +184,7 @@
         };
-        // inputStyle=Object.assign(inputStyle,
         let inputElement;
+        if(multiple){
+            inputElement = <textarea {...attrs} style={[InputStyles['nukeInputInput'],inputStyle,InputStyles[errorTextStyle]]}  {...this.pickAttrs(others)} />
+        }else{
 
-
             inputElement = <input
@@ -194,3 +196,3 @@ {...attrs}
             />
-
+        }
         return (
@@ -197,0 +199,0 @@ <View style={wrapStyle}>

theme/index.jsx

@@ -13,6 +13,16 @@ /** @jsx createElement */
         this.state = {
-            inputVal:'hi nuke',
+            inputVal:'',
+            textVal:'',
+            valid1:'',
+            valid2:'',
         }
     
+    }    
+
+    validate(result,key,e) {
+        var obj={};
+        obj[key]=result;
+        this.setState(obj);
     }
+
     change=(e)=>{
@@ -25,8 +35,25 @@ console.log(e)
     }
-
+    textChange=(e)=>{
+        console.log(e)
+        let value=e.value || e.target.value || '';
+        this.setState({
+            textVal: value
+        }) 
+    }
     render() {
         return (
-            <View>
-               <Input ref="myinput" placeholder="搜一搜..." onInput={this.change} value={this.state.inputVal}  onFocus={(e) => console.log('onFocus',e)} onBlur={(e) => console.log('onBlur',e)}
-                        />
+            <View style={{paddingTop:'30rem'}}>
+                <View style={styles.st}><Text style={styles.stText}>单行</Text></View>
+                <Input ref="myinput" placeholder="搜一搜..." value={this.state.inputVal} onChange={this.change.bind(this)} />
+
+                <View style={styles.st}><Text style={styles.stText}>输入校验success反馈</Text></View>
+                <Input hasFeedback="true" onChange={this.validate.bind(this,'success','valid1')} state={this.state.valid1} />
+
+                <View style={styles.st}><Text style={styles.stText}>输入校验error反馈</Text></View>
+                <Input hasFeedback="true" placeholder="请输入..." onChange={this.validate.bind(this,'error','valid2')} state={this.state.valid2} />
+                
+
+                <View style={styles.st}><Text style={styles.stText}>textarea</Text></View>
+                <Input style={{height:'300rem'}} multiple={true} ref="xxx" placeholder="写一句自我介绍" onInput={this.textChange} value={this.state.textVal}  onFocus={(e) => console.log('onFocus',e)} onBlur={(e) => console.log('onBlur',e)}/>
+
             </View>
@@ -37,3 +64,16 @@
 }
-
+const styles={
+    st:{
+        marginBottom:'30rem',
+        marginTop:'10rem',
+        paddingTop:'10rem',
+        paddingBottom:'10rem',
+        paddingLeft:'20rem',
+        backgroundColor:'#dddddd'
+    },
+    stText:{
+        fontSize:'36rem'
+    }
+    
+}
 mount(<App/>,  'body');

No alert changes

Improved metrics

Total package byte prevSize

46382

increased by10.38%

Lines of code

522

increased by8.98%

No dependency changes