nuke-input - npm Package Compare versions

Comparing version 1.0.44 to 1.0.45

docs/basic.md

 # Input demo
 
-- order: 0
+* order: 0
 
@@ -9,5 +9,5 @@ 包含单行和多行文本输入，return key 等
 
-````js
+```js
 /** @jsx createElement */
-import {createElement, Component,findDOMNode,render } from 'rax';
+import { createElement, Component, findDOMNode, render } from 'rax';
 import View from 'nuke-view';
@@ -23,48 +23,84 @@ import Text from 'nuke-text';
     this.state = {
-      content:''
-    }
+      content: ''
+    };
   }
-  getvalue = (e) => {
+  getvalue = e => {
     console.log(this.refs.myinput.wrappedInstance.getValue());
-  }
+  };
+  getRef = e => {
+    // console.log(findDOMNode(this.refs.myinput.wrappedInstance.getRef()));
+  };
   render() {
     return (
       <Page title="Input">
-        <Page.Intro main="基础样式"></Page.Intro>
+        <Page.Intro main="基础样式" />
         <View style={styles.lineWithMargin}>
-          <Input ref="myinput" maxLength={10} style={{height:60,marginBottom:'20rem'}}  defaultValue="今年流行" id="first"/>
+          <Input
+            ref="myinput"
+            maxLength={10}
+            style={{ height: 60, marginBottom: '20rem' }}
+            defaultValue="今年流行"
+            id="first"
+          />
         </View>
         <View style={styles.btns}>
-          <Button style={styles.btn} block type="primary" onPress={this.getvalue}>获得值</Button>
+          <Button
+            style={styles.btn}
+            block
+            type="primary"
+            onPress={this.getvalue}
+          >
+            获得值
+          </Button>
+          <Button style={styles.btn} block type="primary" onPress={this.getRef}>
+            获得input
+          </Button>
         </View>
-        <Page.Intro main="多行"></Page.Intro>
+        <Page.Intro main="多行" />
         <View style={styles.lineWithMargin}>
-          <Input style={{height:'300rem',marginBottom:'20rem'}} rows={20}  maxLength={10} multiple={true}  id="third" placeholder="多行文本：说点什么吧"/>
+          <Input
+            style={{ height: '300rem', marginBottom: '20rem' }}
+            rows={20}
+            maxLength={10}
+            multiple={true}
+            id="third"
+            placeholder="多行文本：说点什么吧"
+          />
         </View>
-        <Page.Intro main="自定义样式"></Page.Intro>
+        <Page.Intro main="自定义样式" />
         <View style={styles.lineWithMargin}>
-          <Input id="fourth" style={{borderWidth:0,height:40,backgroundColor:'#3089dc',color:'#ffffff'}} inputStyle={{padding:0}}  />
+          <Input
+            id="fourth"
+            style={{
+              borderWidth: 0,
+              height: 40,
+              backgroundColor: '#3089dc',
+              color: '#ffffff'
+            }}
+            inputStyle={{ padding: 0 }}
+          />
         </View>
 
-        <Page.Intro main="不可修改"></Page.Intro>
-        <View style={[styles.lineWithMargin,{marginBottom:'10rem'}]}><Input disabled  id="fiveth"  value="不可修改"/></View>
+        <Page.Intro main="不可修改" />
+        <View style={[styles.lineWithMargin, { marginBottom: '10rem' }]}>
+          <Input disabled id="fiveth" value="不可修改" />
+        </View>
       </Page>
     );
   }
-}
-const styles={
-  lineWithMargin:{
-    marginLeft:30,
-    marginRight:30,
+};
+const styles = {
+  lineWithMargin: {
+    marginLeft: 30,
+    marginRight: 30
   },
-  textLine:{
-    marginTop:20,
-    marginBottom:40,
+  textLine: {
+    marginTop: 20,
+    marginBottom: 40
   },
-  text:{
-    fontSize:26
+  text: {
+    fontSize: 26
   }
-}
+};
 render(<App />);
-
-````
+```

HISTORY.md

 # Changelog 
 
 
+## 1.0.45 / 2018-01-17 
+
+  * [[8c0c33e](http://gitlab.alibaba-inc.com/nuke/input/commit/8c0c33e5fe44346024f39baa99486a79b4c5019f)] - `feat` add getRef to get real input component 
+
 ## 1.0.44 / 2018-01-13 
@@ -5,0 +9,0 @@

lib/native.js

@@ -60,2 +60,7 @@ 'use strict';
   }, {
+    key: 'getRef',
+    value: function getRef() {
+      return this.refs.baseinput.getRef();
+    }
+  }, {
     key: 'blur',
@@ -62,0 +67,0 @@ value: function blur() {

lib/view/base.js

@@ -47,2 +47,3 @@ 'use strict';
     }
+    _this.getRef = _this.getRef.bind(_this);
     _this.inputHandler = _this.inputHandler.bind(_this);
@@ -73,2 +74,7 @@ _this.returnHandler = _this.returnHandler.bind(_this);
   }, {
+    key: 'getRef',
+    value: function getRef() {
+      return this.refs.input;
+    }
+  }, {
     key: 'returnHandler',
@@ -75,0 +81,0 @@ value: function returnHandler(e) {

lib/view/material.js

@@ -232,2 +232,7 @@ 'use strict';
   }, {
+    key: 'getRef',
+    value: function getRef() {
+      return this.refs.baseinput.getRef();
+    }
+  }, {
     key: 'clear',
@@ -234,0 +239,0 @@ value: function clear() {

lib/view/normal.js

@@ -247,2 +247,7 @@ 'use strict';
   }, {
+    key: 'getRef',
+    value: function getRef() {
+      return this.input.getRef();
+    }
+  }, {
     key: 'blur',
@@ -249,0 +254,0 @@ value: function blur() {

lib/web.js

@@ -71,2 +71,7 @@ 'use strict';
   }, {
+    key: 'getRef',
+    value: function getRef() {
+      return this.refs.baseinput.getRef();
+    }
+  }, {
     key: 'render',
@@ -73,0 +78,0 @@ value: function render() {

package.json

 {
   "name": "nuke-input",
-  "version": "1.0.44",
+  "version": "1.0.45",
   "description": "输入框",
@@ -37,3 +37,4 @@ "main": "lib/index",
     "nuke-theme-provider": "^1.x.x",
-    "nuke-view": "^1.x.x"
+    "nuke-view": "^1.x.x",
+    "nuke-image": "^1.x.x"
   },
@@ -40,0 +41,0 @@ "devDependencies": {

README.md

@@ -1,85 +0,96 @@
-
 # Input
 
-- category: UI
-- chinese: 输入框
-- type: UI组件
+* category: UI
+* chinese: 输入框
+* type: UI 组件
 
 ---
 
-
 ## API
 
-| 属性配置 | 说明    | 类型 | 默认值   |
-| :------------- | :------------- |:------------- |:------------- |
-| type | 键盘类型，可选 `text` `url` `password` `tel` `date` `time` `email`| string|`text`|
-| autoFocus | 自动获得焦点| boolean|false |
-| multiple      | 是否为多行，不选则为单行  | bool |   false |
-| value | 当前的value 值 |  string | |
-| maxLength | 最长字数 |  number | |
-| defaultValue| 初始化的value 值(**非受控用法**) |    string | |
-| disabled  | 状态 设置文本域禁用状态    | boolean  |   false |
-| onInput      | 输入事件 | `function(e)` |  false |
-| onFocus      | Focus事件 | `function` |  false |
-| onBlur      | Blur事件 | `function` |  false |
-| onChange      | change| `function(value, e)` |   |
-| onReturn      | **仅 native 有效**，return 事件，用户在手机上点击了 return 键触发（键盘右下角），返回值 e {returnKeyType:'类型',value:'输入框的值'} | `function(e)` |  false |
-| returnKeyType      | **仅 native 有效**，return 键展示类型（键盘右下角的那个键），可选 `default` `go` `next` `search` `send` `done` | string |  `default` |
-| focus 实例方法|  让input获得焦点|`function`| |
-| blur 实例方法|  让input失去焦点|`function`| |
-| getValue 实例方法|  获取输入框的值|`function`| |
-| rows | 多行input中可同时显示的行数 | number | 2 |
-|placeholder|placeholder 文本|string|无|
-|placeholderColor|placeholder 颜色，仅 native 有效|string|'#999999'|
-|status|状态，可枚举"success","error",如果是 error，会有 error 样式|string|success|
-|errorMessage|错误信息，配合 status error 使用|string|无|
-|renderCount|是否显示字数统计，如果开启，必须要设置maxLength|boolean|false|
-|hasClear|是否渲染清除按钮|boolean|false|
-|onClear|清除按钮点击事件|`function`||
-|fixedFont|字体大小是否随屏幕缩放|boolean|false|
-|materialDesign|是否开启 md 模式|boolean|false|
-|floatPlaceholder|仅 md 模式下有效，placeholder 是否固定。若不固定，输入时将自动上浮（md 交互效果）。如果固定 placeholder 不动，顶部预留的间隙将被移除。默认自动上浮。|boolean|true|
-|autoAdjustHeight|仅 md 模式下有效，当没有错误消息时，是否自适应高度并删除预间隙。若开启，可能会因错误提示导致页面闪动感。默认不开启。|boolean|false|
-|hideErrorWhenFocus|是否在 focus 状态隐藏错误。|boolean|true|
+| 属性配置           | 说明                                                                                                                                                 | 类型                 | 默认值    |
+| :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------- | :-------- |
+| type               | 键盘类型，可选 `text` `url` `password` `tel` `date` `time` `email` `number`                                                                          | string               | `text`    |
+| autoFocus          | 自动获得焦点                                                                                                                                         | boolean              | false     |
+| multiple           | 是否为多行，不选则为单行                                                                                                                             | bool                 | false     |
+| value              | 当前的 value 值                                                                                                                                      | string               |           |
+| maxLength          | 最长字数                                                                                                                                             | number               |           |
+| defaultValue       | 初始化的 value 值(**非受控用法**)                                                                                                                    | string               |           |
+| disabled           | 状态 设置文本域禁用状态                                                                                                                              | boolean              | false     |
+| onInput            | 输入事件                                                                                                                                             | `function(e)`        | false     |
+| onFocus            | Focus 事件                                                                                                                                           | `function`           | false     |
+| onBlur             | Blur 事件                                                                                                                                            | `function`           | false     |
+| onChange           | change                                                                                                                                               | `function(value, e)` |           |
+| onReturn           | **仅 native 有效**，return 事件，用户在手机上点击了 return 键触发（键盘右下角），返回值 e {returnKeyType:'类型',value:'输入框的值'}                  | `function(e)`        | false     |
+| returnKeyType      | **仅 native 有效**，return 键展示类型（键盘右下角的那个键），可选 `default` `go` `next` `search` `send` `done`                                       | string               | `default` |
+| focus 实例方法     | 让 input 获得焦点                                                                                                                                    | `function`           |           |
+| blur 实例方法      | 让 input 失去焦点                                                                                                                                    | `function`           |           |
+| getValue 实例方法  | 获取输入框的值                                                                                                                                       | `function`           |           |
+| rows               | 多行 input 中可同时显示的行数                                                                                                                        | number               | 2         |
+| placeholder        | placeholder 文本                                                                                                                                     | string               | 无        |
+| placeholderColor   | placeholder 颜色，仅 native 有效                                                                                                                     | string               | '#999999' |
+| status             | 状态，可枚举"success","error",如果是 error，会有 error 样式                                                                                          | string               | success   |
+| errorMessage       | 错误信息，配合 status error 使用                                                                                                                     | string               | 无        |
+| renderCount        | 是否显示字数统计，如果开启，必须要设置 maxLength                                                                                                     | boolean              | false     |
+| hasClear           | 是否渲染清除按钮                                                                                                                                     | boolean              | false     |
+| onClear            | 清除按钮点击事件                                                                                                                                     | `function`           |           |
+| fixedFont          | 字体大小是否随屏幕缩放                                                                                                                               | boolean              | false     |
+| materialDesign     | 是否开启 md 模式                                                                                                                                     | boolean              | false     |
+| floatPlaceholder   | 仅 md 模式下有效，placeholder 是否固定。若不固定，输入时将自动上浮（md 交互效果）。如果固定 placeholder 不动，顶部预留的间隙将被移除。默认自动上浮。 | boolean              | true      |
+| autoAdjustHeight   | 仅 md 模式下有效，当没有错误消息时，是否自适应高度并删除预间隙。若开启，可能会因错误提示导致页面闪动感。默认不开启。                                 | boolean              | false     |
+| hideErrorWhenFocus | 是否在 focus 状态隐藏错误。                                                                                                                          | boolean              | true      |
 
+### 关于 defaultValue 与 value (非受控与受控的差别)
 
+* defaultValue : 传入 value 默认值，用于 constructor 中计算使用，生命周期函数改变也不会再改变。
 
+```js
+<Input
+  defaultValue="羊绒大衣"
+  onChange={(value, e) => {
+    console.log(value);
+  }}
+/>
+```
 
+* value: 受控用法，会随着生命周期函数改变而改变。
 
-### 关于 defaultValue 与 value (非受控与受控的差别)
-- defaultValue : 传入 value 默认值，用于 constructor 中计算使用，生命周期函数改变也不会再改变。
-````js
-<Input defaultValue="羊绒大衣" onChange={(value,e)=>{console.log(value)}} />
-````
-- value: 受控用法，会随着生命周期函数改变而改变。
-````js
-<Input value={this.state.value} onChange={(value,e)=>{console.log(value)}}/>
-````
+```js
+<Input
+  value={this.state.value}
+  onChange={(value, e) => {
+    console.log(value);
+  }}
+/>
+```
 
 ### 实例方法
--  `focus` 和 `blur`
 
-  ```js
-    //在某些情况下需要让 myinput 强制失去焦点
-    focus = (e) => {
-      this.input.wrappedInstance.focus();
-    }
-    blur = (e) => {
-      this.input.wrappedInstance.blur();
-    }
-    change = (value,e) => {
-      console.log(value);//强制失去焦点后，会触发 onCchange
-    }
-    render(){
-      return (
-        <View>
-          <Input ref={(n)=>{this.input = n;}} onChange={this.change}/>
-          <Button type="primary" onPress={this.focus}>点我让input获得焦点</Button>
-          <Button type="primary" onPress={this.blur}>失去焦点，获取输入内容</Button>
-        </View>
-      )
-    }
-  ```
-- `getValue` 获取当前输入框值
+* `focus` 和 `blur`
 
+
+```js
+  //在某些情况下需要让 myinput 强制失去焦点
+  focus = (e) => {
+    this.input.wrappedInstance.focus();
+  }
+  blur = (e) => {
+    this.input.wrappedInstance.blur();
+  }
+  change = (value,e) => {
+    console.log(value);//强制失去焦点后，会触发 onCchange
+  }
+  render(){
+    return (
+      <View>
+        <Input ref={(n)=>{this.input = n;}} onChange={this.change}/>
+        <Button type="primary" onPress={this.focus}>点我让input获得焦点</Button>
+        <Button type="primary" onPress={this.blur}>失去焦点，获取输入内容</Button>
+      </View>
+    )
+  }
+```
+
+* `getValue` 获取当前输入框值
+
   ```js
@@ -103,3 +114,3 @@ //在某些情况下需要让 myinput 强制失去焦点
 
-- 非 md 模式
+* 非 md 模式
 
@@ -109,6 +120,17 @@ <img src="https://img.alicdn.com/tfs/TB1peIqe5qAXuNjy1XdXXaYcVXa-610-164.jpg" width="300" />
 ```js
-<Input materialDesign={false} hasClear={true} defaultValue={'WATSON$7189833'} onInput={this.checkLength} status={this.state.status1} hasWarningIcon={true} type="text" onChange={this.change} placeholder="Enter Voucher Code" errorMessage={'Voucher code error'} />
+<Input
+  materialDesign={false}
+  hasClear={true}
+  defaultValue={'WATSON$7189833'}
+  onInput={this.checkLength}
+  status={this.state.status1}
+  hasWarningIcon={true}
+  type="text"
+  onChange={this.change}
+  placeholder="Enter Voucher Code"
+  errorMessage={'Voucher code error'}
+/>
 ```
 
-- md 模式
+* md 模式
 
@@ -119,3 +141,12 @@ <img src="https://img.alicdn.com/tfs/TB1oKIqe5qAXuNjy1XdXXaYcVXa-622-148.jpg" width="300" />
 // materialDesign = true 或 外层包裹 Styleprovider  都可以实现开启 md 的目的
-<Input materialDesign={true} hasWarningIcon={true} defaultValue={'WATSON$7189833'} status={'error'} type="text" onChange={this.change} placeholder="Enter Voucher Code" errorMessage={'Voucher code error'} />
+<Input
+  materialDesign={true}
+  hasWarningIcon={true}
+  defaultValue={'WATSON$7189833'}
+  status={'error'}
+  type="text"
+  onChange={this.change}
+  placeholder="Enter Voucher Code"
+  errorMessage={'Voucher code error'}
+/>
 ```

No alert changes

Improved metrics

Total package byte prevSize

166001

increased by3.55%

Lines of code

2276

increased by1.16%

Number of lines in readme file

150

increased by26.05%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addednuke-image@^1.x.x

• + Addednuke-image@1.0.6(transitive)

• + Addedstyle-equal@1.0.0(transitive)