nuke-input
Advanced tools
Comparing version 1.0.45 to 1.0.46
# Input demo | ||
- order: 1 | ||
* order: 1 | ||
@@ -9,6 +9,5 @@ 不同键盘类型 | ||
````js | ||
```js | ||
/** @jsx createElement */ | ||
import {createElement, Component,findDOMNode,render } from 'rax'; | ||
import { createElement, Component, findDOMNode, render } from 'rax'; | ||
import View from 'nuke-view'; | ||
@@ -28,40 +27,58 @@ import Text from 'nuke-text'; | ||
<Page title="Input"> | ||
<Page.Intro main="type"></Page.Intro> | ||
<View style={styles.lineWithMargin}><Input placeholder="password" type="password" /></View> | ||
<Page.Intro sub="email"></Page.Intro> | ||
<View style={styles.lineWithMargin}><Input placeholder="email" type="email" /></View> | ||
<Page.Intro sub="url"></Page.Intro> | ||
<View style={styles.lineWithMargin}><Input placeholder="url" type="url" /></View> | ||
<Page.Intro sub="tel"></Page.Intro> | ||
<View style={styles.lineWithMargin}><Input placeholder="tel" type="tel" /></View> | ||
<Page.Intro sub="date"></Page.Intro> | ||
<View style={styles.lineWithMargin}><Input placeholder="date" type="date" /></View> | ||
<Page.Intro sub="time"></Page.Intro> | ||
<View style={styles.lineWithMargin}><Input placeholder="time" type="time" /></View> | ||
<Page.Intro sub="number"></Page.Intro> | ||
<View style={styles.lineWithMargin}><Input placeholder="number" type="number" /></View> | ||
<Page.Intro main="type" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="password" type="password" /> | ||
</View> | ||
<Page.Intro sub="email" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="email" type="email" /> | ||
</View> | ||
<Page.Intro sub="url" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="url" type="url" /> | ||
</View> | ||
<Page.Intro sub="tel" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="tel" type="tel" /> | ||
</View> | ||
<Page.Intro sub="date" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="date" type="date" /> | ||
</View> | ||
<Page.Intro sub="time" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="time" type="time" /> | ||
</View> | ||
<Page.Intro sub="number" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="number" type="tel" /> | ||
</View> | ||
<Page.Intro main="return key"></Page.Intro> | ||
<View style={styles.lineWithMargin}><Input placeholder="next" returnKeyType="next" /></View> | ||
<View style={styles.lineWithMargin}><Input placeholder="search" returnKeyType="search" /></View> | ||
<View style={styles.lineWithMargin}><Input placeholder="send" returnKeyType="send" /></View> | ||
<View style={styles.lineWithMargin}><Input placeholder="done" returnKeyType="done" /></View> | ||
<Page.Intro main="return key" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="next" returnKeyType="next" /> | ||
</View> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="search" returnKeyType="search" /> | ||
</View> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="send" returnKeyType="send" /> | ||
</View> | ||
<View style={styles.lineWithMargin}> | ||
<Input placeholder="done" returnKeyType="done" /> | ||
</View> | ||
</Page> | ||
); | ||
} | ||
} | ||
const styles={ | ||
lineWithMargin:{ | ||
marginLeft:30, | ||
marginRight:30, | ||
}; | ||
const styles = { | ||
lineWithMargin: { | ||
marginLeft: 30, | ||
marginRight: 30 | ||
}, | ||
text:{ | ||
fontSize:26 | ||
text: { | ||
fontSize: 26 | ||
} | ||
} | ||
render(<App/>); | ||
```` | ||
}; | ||
render(<App />); | ||
``` |
# Input demo | ||
- order: 3 | ||
* order: 3 | ||
textarea | ||
textarea | ||
--- | ||
````js | ||
```js | ||
/** @jsx createElement */ | ||
import {createElement, Component,findDOMNode,render } from 'rax'; | ||
import { createElement, Component, findDOMNode, render } from 'rax'; | ||
import View from 'nuke-view'; | ||
@@ -18,3 +17,3 @@ import Text from 'nuke-text'; | ||
import Env from 'nuke-env'; | ||
const {isWeex} = Env; | ||
const { isWeex } = Env; | ||
import Button from 'nuke-button'; | ||
@@ -24,114 +23,135 @@ import Page from 'nuke-page'; | ||
let App = class NukeDemoIndex extends Component { | ||
constructor() { | ||
super(); | ||
this.state = { | ||
defaultValue:'券商中国提到,7月向普通投资者销售符合其风险承受能力等级的产品或服务。7-53分,为稳健型投资者,可进行中等风险投资,可购买A分', | ||
input:'', | ||
change:'', | ||
return:'', | ||
type:'', | ||
inputReturnKeyType:'', | ||
inputReturnValue:'' | ||
} | ||
} | ||
constructor() { | ||
super(); | ||
this.state = { | ||
defaultValue: | ||
'券商中国提到,7月向普通投资者销售符合其风险承受能力等级的产品或服务。7-53分,为稳健型投资者,可进行中等风险投资,可购买A分', | ||
input: '', | ||
change: '', | ||
return: '', | ||
type: '', | ||
inputReturnKeyType: '', | ||
inputReturnValue: '' | ||
}; | ||
} | ||
changeHandler = (value,e) => { | ||
this.setState({change:value}); | ||
} | ||
inputHandler = (e) => { | ||
this.setState({input:e.value || e.target.value}); | ||
} | ||
returnHandler = (e) => { | ||
console.log('returnHandler',e); | ||
this.setState({ | ||
type: e.returnKeyType, | ||
return: e.value, | ||
}) | ||
} | ||
onInputReturnHandler = (e)=>{ | ||
this.setState({ | ||
inputReturnKeyType: e.returnKeyType, | ||
inputReturnValue: e.value, | ||
}) | ||
console.log('in onInputReturnHandler'); | ||
} | ||
render() { | ||
return ( | ||
<Page title="Input"> | ||
<Page.Intro main="return key"></Page.Intro> | ||
<View style={styles.lineWithMargin}><Input placeholder="go" id="sixth" returnKeyType="go" onReturn={this.onInputReturnHandler} /></View> | ||
<View style={[styles.lineWithMargin,styles.textLine]}> | ||
<Text style={styles.text}>return 类型: {this.state.inputReturnKeyType} , 输入框值: {this.state.inputReturnValue}</Text> | ||
</View> | ||
<Page.Intro main="多行"></Page.Intro> | ||
<View style={styles.lineWithMargin}> | ||
<Input defaultValue={this.state.defaultValue} style={styles.textarea} rows={30} multiple={true} placeholder="介绍一下" returnKeyType="next" onChange={this.changeHandler} onInput={this.inputHandler} onReturn={this.returnHandler} /> | ||
</View> | ||
<View style={styles.result}> | ||
<Text style={styles.resultLabel}>input:</Text> | ||
<Text style={styles.resultText}>{this.state.input} </Text> | ||
</View> | ||
<View style={styles.result}> | ||
<Text style={styles.resultLabel}>change:</Text> | ||
<Text style={styles.resultText}>{this.state.change} </Text> | ||
</View> | ||
<View style={styles.result}> | ||
<Text style={styles.resultLabel}>return:</Text> | ||
<Text style={styles.resultText}>{this.state.return} </Text> | ||
</View> | ||
<View style={styles.result}> | ||
<Text style={styles.resultLabel}>returnKeyType:</Text> | ||
<Text style={styles.resultText}>{this.state.type} </Text> | ||
</View> | ||
<Page.Intro main="但不监听onReturn"></Page.Intro> | ||
<View style={styles.lineWithMargin}> | ||
<Input defaultValue={this.state.defaultValue} style={styles.textarea} rows={30} multiple={true} placeholder="xxx" /> | ||
</View> | ||
</Page> | ||
changeHandler = (value, e) => { | ||
this.setState({ change: value }); | ||
}; | ||
inputHandler = e => { | ||
this.setState({ input: e.value || e.target.value }); | ||
}; | ||
returnHandler = e => { | ||
console.log('returnHandler', e); | ||
this.setState({ | ||
type: e.returnKeyType, | ||
return: e.value | ||
}); | ||
}; | ||
onInputReturnHandler = e => { | ||
this.setState({ | ||
inputReturnKeyType: e.returnKeyType, | ||
inputReturnValue: e.value | ||
}); | ||
console.log('in onInputReturnHandler'); | ||
}; | ||
render() { | ||
return ( | ||
<Page title="Input"> | ||
<Page.Intro main="return key" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input | ||
placeholder="go" | ||
id="sixth" | ||
returnKeyType="go" | ||
onReturn={this.onInputReturnHandler} | ||
/> | ||
</View> | ||
<View style={[styles.lineWithMargin, styles.textLine]}> | ||
<Text style={styles.text}> | ||
return 类型: {this.state.inputReturnKeyType} , 输入框值:{' '} | ||
{this.state.inputReturnValue} | ||
</Text> | ||
</View> | ||
<Page.Intro main="多行" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input | ||
defaultValue={this.state.defaultValue} | ||
style={styles.textarea} | ||
rows={30} | ||
multiple={true} | ||
placeholder="介绍一下" | ||
returnKeyType="next" | ||
onChange={this.changeHandler} | ||
onInput={this.inputHandler} | ||
onReturn={this.returnHandler} | ||
/> | ||
</View> | ||
<View style={styles.result}> | ||
<Text style={styles.resultLabel}>input:</Text> | ||
<Text style={styles.resultText}>{this.state.input} </Text> | ||
</View> | ||
<View style={styles.result}> | ||
<Text style={styles.resultLabel}>change:</Text> | ||
<Text style={styles.resultText}>{this.state.change} </Text> | ||
</View> | ||
<View style={styles.result}> | ||
<Text style={styles.resultLabel}>return:</Text> | ||
<Text style={styles.resultText}>{this.state.return} </Text> | ||
</View> | ||
<View style={styles.result}> | ||
<Text style={styles.resultLabel}>returnKeyType:</Text> | ||
<Text style={styles.resultText}>{this.state.type} </Text> | ||
</View> | ||
<Page.Intro main="但不监听onReturn" /> | ||
<View style={styles.lineWithMargin}> | ||
<Input | ||
defaultValue={this.state.defaultValue} | ||
style={styles.textarea} | ||
rows={30} | ||
multiple | ||
placeholder="xxx" | ||
type="text" | ||
/> | ||
</View> | ||
</Page> | ||
); | ||
} | ||
}; | ||
const styles = { | ||
lineWithMargin: { | ||
marginLeft: '30rem', | ||
marginRight: '30rem' | ||
}, | ||
textarea: { | ||
height: '200rem', | ||
marginBottom: '20rem', | ||
borderWidth: 1, | ||
borderStyle: 'solid', | ||
borderColor: '#cccccc' | ||
}, | ||
text: { | ||
fontSize: '26rem' | ||
}, | ||
result: { | ||
height: '200rem', | ||
margin: '10rem', | ||
padding: '10rem' | ||
// backgroundColor:'#cccccc', | ||
}, | ||
resultLabel: { | ||
color: '#999999' | ||
}, | ||
resultText: { | ||
lines: 10, | ||
fontSize: '28rem', | ||
marginTop: '10rem' | ||
}, | ||
row: { | ||
paddingLeft: '30rem', | ||
paddingRight: '30rem' | ||
} | ||
}; | ||
); | ||
} | ||
} | ||
const styles={ | ||
lineWithMargin:{ | ||
marginLeft:'30rem', | ||
marginRight:'30rem', | ||
}, | ||
textarea:{ | ||
height:'200rem', | ||
marginBottom:'20rem', | ||
borderWidth:1, | ||
borderStyle:'solid', | ||
borderColor:'#cccccc' | ||
}, | ||
text:{ | ||
fontSize:'26rem' | ||
}, | ||
result : { | ||
height:'200rem', | ||
margin:'10rem', | ||
padding:'10rem', | ||
// backgroundColor:'#cccccc', | ||
}, | ||
resultLabel:{ | ||
color:'#999999' | ||
}, | ||
resultText : { | ||
lines:10, | ||
fontSize:'28rem', | ||
marginTop:'10rem' | ||
}, | ||
row:{ | ||
paddingLeft:'30rem', | ||
paddingRight:'30rem', | ||
} | ||
} | ||
render(<App/>); | ||
```` | ||
render(<App />); | ||
``` |
# Changelog | ||
## 1.0.46 / 2018-01-17 | ||
* [[78630a6](http://gitlab.alibaba-inc.com/nuke/input/commit/78630a684b2c575e7a3e0d35d02272be3daa2403)] - `fix` add ref for each layer | ||
## 1.0.45 / 2018-01-17 | ||
@@ -5,0 +9,0 @@ |
@@ -47,2 +47,4 @@ 'use strict'; | ||
_this.blur = _this.blur.bind(_this); | ||
_this.getRef = _this.getRef.bind(_this); | ||
_this.materialDesign = context.androidConfigs && context.androidConfigs.materialDesign; | ||
@@ -49,0 +51,0 @@ if ('materialDesign' in props) { |
@@ -101,2 +101,3 @@ 'use strict'; | ||
_this.returnHandler = _this.returnHandler.bind(_this); | ||
_this.getRef = _this.getRef.bind(_this); | ||
return _this; | ||
@@ -103,0 +104,0 @@ } |
@@ -86,2 +86,3 @@ 'use strict'; | ||
_this.blurHandler = _this.blurHandler.bind(_this); | ||
_this.getRef = _this.getRef.bind(_this); | ||
return _this; | ||
@@ -88,0 +89,0 @@ } |
@@ -47,3 +47,3 @@ 'use strict'; | ||
_this.blur = _this.blur.bind(_this); | ||
_this.getRef = _this.getRef.bind(_this); | ||
_this.materialDesign = context.androidConfigs && context.androidConfigs.materialDesign; | ||
@@ -50,0 +50,0 @@ if ('materialDesign' in props) { |
{ | ||
"name": "nuke-input", | ||
"version": "1.0.45", | ||
"version": "1.0.46", | ||
"description": "输入框", | ||
@@ -5,0 +5,0 @@ "main": "lib/index", |
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
175063
38
2280
1