Socket
Socket
Sign inDemoInstall

nuke-input

Package Overview
Dependencies
6
Maintainers
3
Versions
185
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.40 to 1.0.41

docs/test.md
lib/mods/count.js
lib/mods/placeholder.js
lib/uitls.js

121

docs/keyboard-md.md
# Input demo
- order: 1
- hide: true
* order: 1
* hide: true

@@ -10,6 +10,5 @@ 不同键盘类型

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

@@ -22,14 +21,13 @@ import Text from 'nuke-text';

let md = {
Core:{
Core: {
'color-brand1-1': '#00BBD3',
'color-brand1-6': '#1A9CB7',
'color-brand1-9': '#0096A6',
'color-error-3': '#D50000',
'color-error-3': '#D50000',
'color-line1-1': '#DADADA',
'color-line1-2': '#E0E0E0',
'color-text1-1': '#9E9E9E',
['font-size-title'] : 40,
['font-size-subhead'] : 32,
['font-size-title']: 40,
['font-size-subhead']: 32,
['font-size-body-3']: 28,

@@ -39,5 +37,4 @@ ['font-size-body-2']: 28,

['font-size-caption']: 24,
['font-size-footnote']: 20,
['font-size-footnote']: 20
}
};

@@ -47,41 +44,79 @@ let App = class Demo extends Component {

super();
this.state = {
value: ''
};
}
render() {
return (
<StyleProvider style={md} commonConfigs={{fixedFont:true}} androidConfigs={{materialDesign:true}}>
<Page title="Input">
<View style={styles.lineWithMargin}><Input placeholder="password" type="password" /></View>
<View style={styles.lineWithMargin}><Input placeholder="email" type="email" /></View>
<View style={styles.lineWithMargin}><Input placeholder="url" type="url" /></View>
<View style={styles.lineWithMargin}><Input placeholder="tel" type="tel" /></View>
<View style={styles.lineWithMargin}>
<Input placeholder="date" type="date" onFocus={()=>{console.log('date onFocus')}} onInput={()=>{console.log('date onInput')}} onChange={(text,event)=>{console.log(text,event)}} />
<StyleProvider
style={md}
commonConfigs={{ fixedFont: true }}
androidConfigs={{ materialDesign: true }}
>
<Page title="Input">
<View style={styles.lineWithMargin}>
<Input placeholder="password" type="password" />
</View>
<View style={styles.lineWithMargin}><Input placeholder="time" type="time" /></View>
<View style={styles.lineWithMargin}><Input placeholder="number" type="number" /></View>
<View style={styles.lineWithMargin}>
<Input placeholder="email" type="email" />
</View>
<View style={styles.lineWithMargin}>
<Input placeholder="url" type="url" />
</View>
<View style={styles.lineWithMargin}>
<Input placeholder="tel" type="tel" />
</View>
<View style={styles.lineWithMargin}>
<Input
placeholder="date"
type="date"
onFocus={() => {
console.log('date onFocus');
}}
onInput={() => {
console.log('date onInput');
}}
onChange={(text, event) => {
console.log(text, event);
}}
/>
</View>
<View style={styles.lineWithMargin}>
<Input placeholder="time" type="time" />
</View>
<View style={styles.lineWithMargin}>
<Input placeholder="number" type="number" />
</View>
<View style={styles.lineWithMargin}>
<Input placeholder="number 受控" type="number" />
</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>
</StyleProvider>
<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>
</StyleProvider>
);
}
}
const styles={
lineWithMargin:{
marginLeft:30,
marginRight:30,
};
const styles = {
lineWithMargin: {
marginLeft: 30,
marginRight: 30
},
text:{
fontSize:26
text: {
fontSize: 26
}
}
render(<App/>);
````
};
render(<App />);
```

31

docs/single-md.md

@@ -40,7 +40,16 @@ # Input Demo

Input: {
'md-border-radius': 0,
'single-radius': 4,
'single-font-size': 28,
'error-text-color': '#F44336',
'error-border-color': '#F44336',
'md-placeholder-height': 50,
'md-help-margin-top': 16,
'md-help-height': 56,
'md-input-height': 50,
'md-placeholder-font-size': 32,
'md-input-margin-bottom': 0
'md-focus-placeholder-color': '#9E9E9E',
'md-placeholder-font-size': 28,
'md-input-margin-bottom': 0,
'md-input-margin-top': 14,
'md-error-text-font-size': 24
}

@@ -193,2 +202,20 @@ };

<Page.Intro main="control test" />
<View style={styles.demoBlock}>
<Input
value={this.state.valuetest}
onInput={this.validate}
type="text"
placeholder="Single-line input label"
/>
<Button
onPress={() => {
this.setState({ valuetest: '888888' });
}}
type="primary"
>
set number to 888888
</Button>
</View>
<Page.Intro main="Custom Icon" />

@@ -195,0 +222,0 @@ <View style={styles.demoBlock}>

7

HISTORY.md
# Changelog
## 1.0.41 / 2018-01-11
* [[3dbad44](http://gitlab.alibaba-inc.com/nuke/input/commit/3dbad44d2fcba89cb1ee9817e35571470840276d)] - `fix` fix state logic bug
* [[9b06963](http://gitlab.alibaba-inc.com/nuke/input/commit/9b06963144a212e84453f8a2b08294aff5845787)] - `refactor` split placeholder & count
* [[111c4ad](http://gitlab.alibaba-inc.com/nuke/input/commit/111c4ad2ab65d5087fd4b93170d58696a73be702)] - `fix` add regex for number props
* [[f8bc30b](http://gitlab.alibaba-inc.com/nuke/input/commit/f8bc30b86d535e58646162e088b8fec15183fcd3)] - `fix` input type number always return value is nulll
## 1.0.40 / 2018-01-09

@@ -5,0 +12,0 @@

17

lib/view/base.js

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

_this.returnHandler = _this.returnHandler.bind(_this);
return _this;

@@ -55,2 +54,11 @@ }

_createClass(NoStyleInput, [{
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
;
}
}, {
key: 'componentWillReceiveProps',

@@ -100,5 +108,4 @@ value: function componentWillReceiveProps(nextProps) {

return this.refs.input.value;
} else {
return this.refs.input.attr.value;
}
return this.refs.input.attr.value;
}

@@ -140,3 +147,2 @@ }, {

placeholderColor: placeholderColor,
defaultValue: defaultValue,
type: _nukeEnv.isWeex && multiple ? 'text' : type, // force type="text" in weex multiple mode to avoid bugs http://dotwe.org/weex/6a75d9164c4186c9a9d46b51daed6b2e

@@ -146,4 +152,3 @@ style: this.getInputStyle()

if ('value' in this.props) {
attrs.value = value;
delete attrs.defaultValue;
attrs.value = this.props.value;
}

@@ -150,0 +155,0 @@ // console.log('baseinput', attrs.value)

113

lib/view/material.js

@@ -43,2 +43,12 @@ 'use strict';

var _placeholder = require('../mods/placeholder');
var _placeholder2 = _interopRequireDefault(_placeholder);
var _Count = require('../mods/Count');
var _Count2 = _interopRequireDefault(_Count);
var _uitls = require('../uitls');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -64,8 +74,3 @@

_this.inputHandler = _this.inputHandler.bind(_this);
_this.focusHandler = _this.focusHandler.bind(_this);
_this.blurHandler = _this.blurHandler.bind(_this);
_this.clearHandler = _this.clearHandler.bind(_this);
_this.changeHandler = _this.changeHandler.bind(_this);
_this.returnHandler = _this.returnHandler.bind(_this);
_this.validInput = true;
var value = null;

@@ -84,3 +89,3 @@ if ('value' in props) {

count: count,
maxLengthError: count > props.maxLength
maxLengthError: props.maxLength ? count > props.maxLength : false
};

@@ -92,2 +97,8 @@ _this.materialDesign = true;

}
_this.inputHandler = _this.inputHandler.bind(_this);
_this.focusHandler = _this.focusHandler.bind(_this);
_this.blurHandler = _this.blurHandler.bind(_this);
_this.clearHandler = _this.clearHandler.bind(_this);
_this.changeHandler = _this.changeHandler.bind(_this);
_this.returnHandler = _this.returnHandler.bind(_this);
return _this;

@@ -111,3 +122,6 @@ }

value: function componentWillReceiveProps(nextProps) {
if ('value' in nextProps && (typeof nextProps.value === 'string' || typeof nextProps.value === 'number')) {
if ('value' in nextProps && (typeof nextProps.value === 'string' || typeof nextProps.value === 'number') && nextProps.value !== this.state.inputValue) {
var type = this.props.type;
if (type === 'number' && !(0, _uitls.isValidNumber)(nextProps.value)) return;
this.setState({

@@ -255,2 +269,8 @@ value: nextProps.value,

value: function blurHandler(e) {
var type = this.props.type;
// hack For type number useage invalid input can't get any value
if (type === 'number' && _nukeEnv.isWeb) {
this.validInput = (0, _uitls.isValidInput)(e.srcElement);
}
this.setState({

@@ -294,3 +314,3 @@ focus: false

count: text.length,
maxLengthError: text.length > maxLength
maxLengthError: maxLength ? text.length > maxLength : false
});

@@ -335,31 +355,28 @@ if (_nukeEnv.isWeb && multiple) {

var hasError = status === 'error' && errorMessage;
if (!placeholder) return null;
if ((focus || inputValue) && !floatPlaceholder) return null;
var phStyle = Object.assign({}, themeStyle.placeholder, themeStyle['md-placeholder-small'], !focus && !inputValue ? themeStyle['md-placeholder'] : {}, floatPlaceholder ? {} : themeStyle['md-placeholder-static']);
var phTextStyle = Object.assign({}, themeStyle['placeholder-text'], themeStyle['md-placeholder-small-text'], placeholderColor ? { color: placeholderColor } : {}, !focus && !inputValue ? themeStyle['md-placeholder-text'] : {}, hasError ? themeStyle['md-placeholder-small-text-has-error'] : {}, focus ? themeStyle['md-focus-placeholder-text'] : {}, disabled ? themeStyle['md-disabled-placeholder-text'] : {});
if (status === 'error' && (maxLengthError || !hideErrorWhenFocus)) {
phTextStyle = Object.assign(phTextStyle, themeStyle['md-placeholder-small-text-has-error']);
if (disabled) {
phTextStyle = Object.assign(phTextStyle, themeStyle['md-disabled-placeholder-text']);
}
}
return (0, _rax.createElement)(
_nukeView2.default,
{ style: phStyle },
(0, _rax.createElement)(
_nukeText2.default,
{ fixedFont: this.fixedFont, style: phTextStyle },
placeholder
)
);
var placeholderAttrs = {
placeholder: placeholder,
placeholderColor: placeholderColor,
themeStyle: themeStyle,
status: status,
disabled: disabled,
errorMessage: errorMessage,
floatPlaceholder: floatPlaceholder,
hideErrorWhenFocus: hideErrorWhenFocus,
focus: focus,
inputValue: inputValue,
validInput: this.validInput,
maxLengthError: maxLengthError,
fixedFont: this.fixedFont
};
return (0, _rax.createElement)(_placeholder2.default, placeholderAttrs);
}
}, {
key: 'renderCount',
value: function renderCount(styles) {
value: function renderCount() {
var _props4 = this.props,
maxLength = _props4.maxLength,
multiple = _props4.multiple,
renderCount = _props4.renderCount;
renderCount = _props4.renderCount,
themeStyle = _props4.themeStyle;

@@ -370,19 +387,11 @@ if (!maxLength || !renderCount) return null;

return (0, _rax.createElement)(
_nukeView2.default,
{
x: 'count',
style: styles['' + (multiple ? 'md-multiple-count-wrap' : 'md-single-count-wrap')]
},
(0, _rax.createElement)(
_nukeText2.default,
{
fixedFont: this.fixedFont,
style: [styles['' + (multiple ? 'multiple-count-text' : 'single-count-text')], count > maxLength ? styles['count-error'] : {}]
},
count,
' / ',
maxLength
)
);
var countAttrs = {
maxLength: maxLength,
multiple: multiple,
renderCount: renderCount,
count: count,
themeStyle: themeStyle,
fixedFont: this.fixedFont
};
return (0, _rax.createElement)(_Count2.default, countAttrs);
}

@@ -456,3 +465,3 @@ }, {

renderErrorMessage ? errorMessageDom : null,
this.renderCount(styles)
this.renderCount()
);

@@ -614,3 +623,4 @@ }

floatPlaceholder: _rax.PropTypes.boolean,
hideErrorWhenFocus: _rax.PropTypes.boolean
hideErrorWhenFocus: _rax.PropTypes.boolean,
fixedFont: _rax.PropTypes.boolean
};

@@ -636,3 +646,4 @@ Input.defaultProps = {

floatPlaceholder: true,
hideErrorWhenFocus: true
hideErrorWhenFocus: true,
fixedFont: true
};

@@ -639,0 +650,0 @@ Input.contextTypes = {

2

lib/view/normal.js

@@ -91,3 +91,3 @@ 'use strict';

value: function componentWillReceiveProps(nextProps) {
if ('value' in nextProps && (typeof nextProps.value === 'string' || typeof nextProps.value === 'number')) {
if ('value' in nextProps && (typeof nextProps.value === 'string' || typeof nextProps.value === 'number') && nextProps.value !== this.state.inputValue) {
this.setState({

@@ -94,0 +94,0 @@ value: nextProps.value,

2

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

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

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc