Socket
Socket
Sign inDemoInstall

nuke-input

Package Overview
Dependencies
18
Maintainers
3
Versions
185
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.45 to 1.0.46

docs/card.md

91

docs/keyboard.md
# 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",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc