Socket
Socket
Sign inDemoInstall

nuke-input

Package Overview
Dependencies
Maintainers
3
Versions
185
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuke-input - npm Package Compare versions

Comparing version 1.0.46 to 1.0.47

4

docs/basic.md

@@ -29,3 +29,5 @@ # Input demo

getRef = e => {
// console.log(findDOMNode(this.refs.myinput.wrappedInstance.getRef()));
if (findDOMNode(this.refs.myinput.wrappedInstance.getRef())) {
console.log('find it');
}
};

@@ -32,0 +34,0 @@ render() {

190

docs/event.md
# Input demo
- order: 3
* order: 3

@@ -9,6 +9,5 @@ input events

````js
```js
/** @jsx createElement */
import {createElement, Component,findDOMNode,render } from 'rax';
import { createElement, Component, findDOMNode, render } from 'rax';
import View from 'nuke-view';

@@ -21,83 +20,108 @@ import Text from 'nuke-text';

let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state = {
input:'',
change:'',
returnKeyType:'',
returnValue:'',
}
}
input = (e)=>{
let text = e.value;
this.setState({
input: text
})
}
change = (text)=>{
this.setState({
change: text
})
}
onReturnHandler = (e)=>{
this.setState({
returnKeyType: e.returnKeyType,
returnValue: e.value,
})
console.log('in onReturnHandler');
}
blur = (e) => {
this.refs.myinput.wrappedInstance.blur();
}
render() {
return (
<Page title="Input">
<Page.Intro main="onChange 事件"></Page.Intro>
<View style={styles.lineWithMargin}>
<Input ref="myinput" placeholder="输入完成点击按钮失去焦点" onChange={this.change}/>
</View>
<View style={[styles.lineWithMargin,styles.textLine]}>
<Text style={styles.text}>onChange：{this.state.change}</Text>
constructor() {
super();
this.state = {
input: '',
change: '',
returnKeyType: '',
returnValue: ''
};
}
input = e => {
let text = e.value;
this.setState({
input: text
});
};
textareaInputHandler = e => {
let text = e.value;
this.setState({
textareainput: text
});
};
change = text => {
this.setState({
change: text
});
};
onReturnHandler = e => {
this.setState({
returnKeyType: e.returnKeyType,
returnValue: e.value
});
console.log('in onReturnHandler');
};
blur = e => {
this.refs.myinput.wrappedInstance.blur();
};
render() {
return (
<Page title="Input">
<Page.Intro main="onChange 事件" />
<View style={styles.lineWithMargin}>
<Input
ref="myinput"
placeholder="输入完成点击按钮失去焦点"
onChange={this.change}
/>
</View>
<View style={[styles.lineWithMargin, styles.textLine]}>
<Text style={styles.text}>onChange：{this.state.change}</Text>
<Button style={styles.btn} block type="primary" onPress={this.blur}>onChange 在失去焦点后触发</Button>
</View>
<Page.Intro main="onInput 事件"></Page.Intro>
<View style={styles.lineWithMargin}>
<Input onInput={this.input}/>
</View>
<View style={[styles.lineWithMargin,styles.textLine]}>
<Text style={styles.text}>onInput：{this.state.input}</Text>
</View>
<Button style={styles.btn} block type="primary" onPress={this.blur}>
onChange 在失去焦点后触发
</Button>
</View>
<Page.Intro main="onInput 事件" />
<View style={styles.lineWithMargin}>
<Input onInput={this.input} />
</View>
<View style={[styles.lineWithMargin, styles.textLine]}>
<Text style={styles.text}>onInput：{this.state.input}</Text>
</View>
<Page.Intro main="return key"></Page.Intro>
<View style={styles.lineWithMargin}><Input placeholder="go" id="sixth" returnKeyType="go" onReturn={this.onReturnHandler} /></View>
<View style={[styles.lineWithMargin,styles.textLine]}>
<Text style={styles.text}>return 类型： {this.state.returnKeyType} , 输入框值： {this.state.returnValue}</Text>
</View>
</Page>
<Page.Intro main="onInput textarea事件" />
<View style={styles.lineWithMargin}>
<Input multiple onInput={this.textareaInputHandler} />
</View>
<View style={[styles.lineWithMargin, styles.textLine]}>
<Text style={styles.text}>onInput：{this.state.textareainput}</Text>
</View>
);
}
}
const styles={
lineWithMargin:{
marginLeft:30,
marginRight:30,
},
textLine:{
marginTop:20,
marginBottom:20,
},
text:{
fontSize:26
},
btn:{
marginTop:20
}
}
render(<App/>);
````
<Page.Intro main="return key" />
<View style={styles.lineWithMargin}>
<Input
placeholder="go"
id="sixth"
returnKeyType="go"
onReturn={this.onReturnHandler}
/>
</View>
<View style={[styles.lineWithMargin, styles.textLine]}>
<Text style={styles.text}>
return 类型： {this.state.returnKeyType} , 输入框值：{' '}
{this.state.returnValue}
</Text>
</View>
</Page>
);
}
};
const styles = {
lineWithMargin: {
marginLeft: 30,
marginRight: 30
},
textLine: {
marginTop: 20,
marginBottom: 20
},
text: {
fontSize: 26
},
btn: {
marginTop: 20
}
};
render(<App />);
```

89

docs/textarea-md.md
# Input Demo
- order: 4
* order: 4
多行文本 md 定制

@@ -10,4 +9,3 @@

````js
```js
/** @jsx createElement */

@@ -18,2 +16,3 @@ import { createElement, Component, render } from 'rax';

import Input from 'nuke-input';
import Button from 'nuke-button';
import Page from 'nuke-page';

@@ -37,17 +36,18 @@ import { isWeb, appInfo } from 'nuke-env';

status1: 'error',
status2: 'error',
value: '111'
}
this.checkLength = this.checkLength.bind(this);
value: '',
changevalue: ''
};
this.input = this.input.bind(this);
this.change = this.change.bind(this);
this.getValue = this.getValue.bind(this);
}
input(e) {
this.setState({ value: e.value });
}
change = () => {
this.setState({
status1: 'success'
})
change(value) {
this.setState({ changevalue: value });
}
checkLength(text) {
let length = text.length;
// this.setState({value:text});
getValue() {
alert(this.refs.textarea.wrappedInstance.getValue());
}

@@ -57,21 +57,50 @@

return (
<StyleProvider style={md} commonConfigs={{ fixedFont: true }} androidConfigs={{ materialDesign: true }}>
<StyleProvider
style={md}
commonConfigs={{ fixedFont: true }}
androidConfigs={{ materialDesign: true }}
>
<Page title="Textareas ">
<Page.Intro main="maxRows 3"></Page.Intro>
<Page.Intro main="maxRows 3" />
<View style={styles.demoBlock}>
<Input multiple floatPlaceholder={false} maxRows={3} maxLength={250} onInput={this.checkLength} renderCount={true} type="text" status="error" placeholder="milti-line input label" errorMessage="errorxxx" />
<Input
multiple
ref="textarea"
floatPlaceholder={false}
maxRows={3}
maxLength={250}
onInput={this.input}
onChange={this.change}
renderCount={true}
type="text"
status="error"
placeholder="milti-line input label"
errorMessage="errorxxx"
/>
</View>
<Page.Intro main="error"></Page.Intro>
<Text>输入的值：{this.state.value}</Text>
<Text>输入的值：{this.state.changevalue}</Text>
<Page.Intro main="error" />
<View style={styles.demoBlock}>
<Input multiple maxRows={8} renderCount maxLength={250} value={this.state.value} onInput={this.checkLength} renderCount={false} errorMessage="error" renderError={true} renderClear={true} type="text" status={this.state.status2} placeholder="milti-line input label" />
<Input
multiple
maxRows={8}
renderCount
maxLength={250}
onInput={this.checkLength}
renderCount={false}
errorMessage="error"
renderError={true}
renderClear={true}
type="text"
status={this.state.status2}
placeholder="milti-line input label"
/>
</View>
</Page>
</StyleProvider>
);
}
}
};
const styles = {

@@ -82,8 +111,4 @@ demoBlock: {

}
}
};
render(<App />);
````
```

4

HISTORY.md
# Changelog
## 1.0.47 / 2018-02-02
* [[e47ec08](http://gitlab.alibaba-inc.com/nuke/input/commit/e47ec0886f53b76f48093e3e01e99c1300dbe904)] - `fix` fix onInput not triggered bug when use defaultValue
## 1.0.46 / 2018-01-17

@@ -5,0 +9,0 @@

7

lib/native.js

@@ -47,3 +47,5 @@ 'use strict';

_this.blur = _this.blur.bind(_this);
_this.clear = _this.clear.bind(_this);
_this.getRef = _this.getRef.bind(_this);
_this.getValue = _this.getValue.bind(_this);

@@ -63,2 +65,7 @@ _this.materialDesign = context.androidConfigs && context.androidConfigs.materialDesign;

}, {
key: 'clear',
value: function clear() {
this.refs.baseinput.clear();
}
}, {
key: 'getRef',

@@ -65,0 +72,0 @@ value: function getRef() {

20

lib/view/base.js

@@ -55,8 +55,7 @@ 'use strict';

key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(nextProps, nextState) {
return nextProps.value !== this.props.value || nextProps.readOnly !== this.props.readOnly || nextProps.disabled !== this.props.disabled
// nextState.value !== this.state.value
// nextState.focus !== this.state.focus ||
// nextState.error !== this.state.error
;
value: function shouldComponentUpdate(nextProps) {
if (nextProps.value !== null) {
return nextProps.value !== this.props.value || nextProps.readOnly !== this.props.readOnly || nextProps.disabled !== this.props.disabled;
}
return false;
}

@@ -66,7 +65,6 @@ }, {

value: function componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
// this.setState({
// value: nextProps.value,
// });
// console.log('baseinput propschange', nextProps.value);
if ('value' in nextProps && nextProps.value !== null) {
this.setState({
value: nextProps.value
});
}

@@ -73,0 +71,0 @@ }

31

lib/view/material.js

@@ -85,2 +85,3 @@ 'use strict';

lines: 1,
inputValue: value,

@@ -96,3 +97,2 @@ count: count,

_this.inputHandler = _this.inputHandler.bind(_this);
// this.changeHandler = this.changeHandler.bind(this);
_this.focusHandler = _this.focusHandler.bind(_this);

@@ -104,2 +104,6 @@ _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);
return _this;

@@ -125,4 +129,4 @@ }

var type = this.props.type;
// if (type === 'number' && !isValidNumber(nextProps.value)) return;
if (type === 'number' && !(0, _uitls.isValidNumber)(nextProps.value)) return;
this.setState({

@@ -292,20 +296,2 @@ value: nextProps.value,

}, {
key: '_nativeCalculateMultipleHeight',
value: function _nativeCalculateMultipleHeight() {
var _this3 = this;
if (!this.multipleText) return;
var maxRows = this.props.maxRows;
this.getTextRect(this.multipleText).then(function (height) {
var textLines = Math.round(height / textlineheight);
if (textLines <= maxRows) {
_this3.setState({
lines: textLines
});
}
}, function () {});
}
}, {
key: 'inputHandler',

@@ -317,2 +303,3 @@ value: function inputHandler(text, eventObj) {

console.log(text);
this.setState({

@@ -330,3 +317,3 @@ inputValue: text,

}
this.trigger('onInput', (0, _util.genEventObject)(eventObj));
this.trigger('onInput', eventObj);
}

@@ -549,3 +536,3 @@ }, {

placeholder: '',
value: value || '',
value: value || null,
defaultValue: defaultValue,

@@ -552,0 +539,0 @@ type: type,

20

lib/view/normal.js

@@ -81,4 +81,4 @@ 'use strict';

_this.onInput = _this.onInput.bind(_this);
_this.onChange = _this.onChange.bind(_this);
_this.inputHandler = _this.inputHandler.bind(_this);
_this.changeHander = _this.changeHander.bind(_this);
_this.clearHandler = _this.clearHandler.bind(_this);

@@ -88,2 +88,6 @@ _this.focusHandler = _this.focusHandler.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);
return _this;

@@ -105,4 +109,4 @@ }

}, {
key: 'onInput',
value: function onInput(text, eventObj) {
key: 'inputHandler',
value: function inputHandler(text, eventObj) {
var maxLength = this.props.maxLength;

@@ -119,4 +123,4 @@

}, {
key: 'onChange',
value: function onChange(text, eventObj) {
key: 'changeHander',
value: function changeHander(text, eventObj) {
var maxLength = this.props.maxLength;

@@ -161,4 +165,4 @@

inputStyle: hasClear ? styles['input-has-clear'] : {},
onInput: this.onInput,
onChange: this.onChange,
onInput: this.inputHandler,
onChange: this.changeHander,
onFocus: this.focusHandler,

@@ -165,0 +169,0 @@ onBlur: this.blurHandler,

7

lib/web.js

@@ -47,3 +47,5 @@ 'use strict';

_this.blur = _this.blur.bind(_this);
_this.clear = _this.blur.bind(_this);
_this.getRef = _this.getRef.bind(_this);
_this.getValue = _this.getValue.bind(_this);
_this.materialDesign = context.androidConfigs && context.androidConfigs.materialDesign;

@@ -67,2 +69,7 @@ if ('materialDesign' in props) {

}, {
key: 'clear',
value: function clear() {
this.refs.baseinput.clear();
}
}, {
key: 'getValue',

@@ -69,0 +76,0 @@ value: function getValue() {

2

package.json
{
"name": "nuke-input",
"version": "1.0.46",
"version": "1.0.47",
"description": "输入框",

@@ -5,0 +5,0 @@ "main": "lib/index",

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc