nuke-components
Advanced tools
nuke-components - npm Package Compare versions
Comparing version 0.2.5 to 0.2.6
@@ -5,3 +5,3 @@ # 输入框 | ||
| 自动化的输入框。 | ||
| 不包含任何样式预定义。 | ||
@@ -13,3 +13,3 @@ --- | ||
| import {createElement, Component,render} from 'rax'; | ||
| import { View, Text, TextInput } from 'nuke-components'; | ||
| import { View, Text, TextInput,TouchableHighlight } from 'nuke-components'; | ||
@@ -19,130 +19,133 @@ | ||
| let App = class Page extends Component { | ||
| constructor(props){ | ||
| super(props); | ||
| } | ||
| render() { | ||
| return <View style={{width:720}}> | ||
| <Text>最上边的TextInput输入框</Text> | ||
| <TextInput | ||
| placeholder="试着输入一些内容" | ||
| autoFocus={true} multiline | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| onInput={() => console.log('onInput')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="试email" | ||
| type="email" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| onInput={() => console.log('onInput')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="password" | ||
| type="password" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| onInput={() => console.log('onInput')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="url" | ||
| type="url" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| onInput={() => console.log('onInput')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="tel" | ||
| type="tel" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| onInput={() => console.log('onInput')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="date" | ||
| type="date" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| onInput={() => console.log('onInput')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="time" | ||
| type="time" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| onInput={() => console.log('onInput')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| keyboardType="numeric" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| onInput={() => console.log('onInput')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| </View>; | ||
| } | ||
| constructor(props){ | ||
| super(props); | ||
| } | ||
| focus = (e)=>{ | ||
| this.refs.input.focus(); | ||
| } | ||
| blur = (e)=>{ | ||
| this.refs.input.blur(); | ||
| } | ||
| change=(e)=>{ | ||
| console.log('输入框的值--->',e.target.value || e.value); | ||
| } | ||
| render() { | ||
| return ( | ||
| <View style={{width:720}}> | ||
| <TextInput ref="input" onChange={this.change} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TouchableHighlight style={{backgroundColor:'#3089dc',height:'40rem',justifyContent:'center',alignItems:'center'}} onPress={this.focus}> | ||
| <Text style={{color:'#ffffff'}}>让 input 获得焦点</Text> | ||
| </TouchableHighlight> | ||
| <TouchableHighlight style={{marginTop:'20rem',backgroundColor:'#3089dc',height:'40rem',justifyContent:'center',alignItems:'center'}} onPress={this.blur}> | ||
| <Text style={{color:'#ffffff'}}>让 input 失去焦点</Text> | ||
| </TouchableHighlight> | ||
| <TextInput | ||
| placeholder="试email" | ||
| type="email" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="password" | ||
| type="password" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="url" | ||
| type="url" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="tel" | ||
| type="tel" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="date" | ||
| type="date" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| placeholder="time" | ||
| type="time" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| <TextInput | ||
| keyboardType="numeric" | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| style={{ | ||
| width: '750rem', | ||
| marginBottom:'50rem', | ||
| height: '80rem', | ||
| borderWidth:1, | ||
| borderStyle:'solid', | ||
| borderColor:'#cccccc' | ||
| }} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
@@ -149,0 +152,0 @@ render(<App/>); |
| # Changelog | ||
| ## 0.2.6 / 2017-02-17 | ||
| * [[6d9afce](http://gitlab.alibaba-inc.com/nuke/components/commit/6d9afce8216eaf3ef64d9288d794edd6e3fb977b)] - `feat` add focus blur function to textinput | ||
| ## 0.2.5 / 2017-02-16 | ||
@@ -5,0 +9,0 @@ |
@@ -6,3 +6,3 @@ /* @jsx createElement */ | ||
| Object.defineProperty(exports, "__esModule", { | ||
| value: true | ||
| value: true | ||
| }); | ||
@@ -27,170 +27,175 @@ | ||
| var typeMap = { | ||
| 'default': 'text', | ||
| 'ascii-capable': 'text', | ||
| 'numbers-and-punctuation': 'number', | ||
| 'url': 'url', | ||
| 'number-pad': 'number', | ||
| 'phone-pad': 'tel', | ||
| 'name-phone-pad': 'text', | ||
| 'email-address': 'email', | ||
| 'decimal-pad': 'number', | ||
| 'twitter': 'text', | ||
| 'web-search': 'search', | ||
| 'numeric': 'number' | ||
| 'default': 'text', | ||
| 'ascii-capable': 'text', | ||
| 'numbers-and-punctuation': 'number', | ||
| 'url': 'url', | ||
| 'number-pad': 'number', | ||
| 'phone-pad': 'tel', | ||
| 'name-phone-pad': 'text', | ||
| 'email-address': 'email', | ||
| 'decimal-pad': 'number', | ||
| 'twitter': 'text', | ||
| 'web-search': 'search', | ||
| 'numeric': 'number' | ||
| }; | ||
| var TextInput = function (_Component) { | ||
| _inherits(TextInput, _Component); | ||
| _inherits(TextInput, _Component); | ||
| function TextInput() { | ||
| var _ref; | ||
| function TextInput() { | ||
| var _ref; | ||
| var _temp, _this, _ret; | ||
| var _temp, _this, _ret; | ||
| _classCallCheck(this, TextInput); | ||
| _classCallCheck(this, TextInput); | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | ||
| args[_key] = arguments[_key]; | ||
| } | ||
| return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TextInput.__proto__ || Object.getPrototypeOf(TextInput)).call.apply(_ref, [this].concat(args))), _this), _this.handleInput = function (e) { | ||
| var text = e.value; | ||
| // Shim Event | ||
| if (_nukeEnv.isWeex) { | ||
| e = { | ||
| nativeEvent: { | ||
| text: text | ||
| }, | ||
| value: text | ||
| }; | ||
| } | ||
| _this.props.onInput(e); | ||
| }, _this.handleChange = function (e) { | ||
| var text = e.value; | ||
| // Shim Event | ||
| if (_nukeEnv.isWeex) { | ||
| e = { | ||
| nativeEvent: { | ||
| text: text | ||
| }, | ||
| value: text | ||
| }; | ||
| } | ||
| return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TextInput.__proto__ || Object.getPrototypeOf(TextInput)).call.apply(_ref, [this].concat(args))), _this), _this.handleInput = function (e) { | ||
| var text = e.value; | ||
| // Shim Event | ||
| if (_nukeEnv.isWeex) { | ||
| e = { | ||
| nativeEvent: { | ||
| text: text | ||
| }, | ||
| value: text | ||
| }; | ||
| } | ||
| _this.props.onInput(e); | ||
| }, _this.handleChange = function (e) { | ||
| var text = e.value; | ||
| // Shim Event | ||
| if (_nukeEnv.isWeex) { | ||
| e = { | ||
| nativeEvent: { | ||
| text: text | ||
| }, | ||
| value: text | ||
| }; | ||
| } | ||
| _this.props.onChange && _this.props.onChange(e); | ||
| _this.props.onChangeText && _this.props.onChangeText(text); | ||
| }, _this.handleFocus = function (e) { | ||
| return _this.props.onFocus(e); | ||
| }, _this.handleBlur = function (e) { | ||
| return _this.props.onBlur(e); | ||
| }, _temp), _possibleConstructorReturn(_this, _ret); | ||
| } | ||
| _this.props.onChange && _this.props.onChange(e); | ||
| _this.props.onChangeText && _this.props.onChangeText(text); | ||
| }, _this.handleFocus = function (e) { | ||
| return _this.props.onFocus(e); | ||
| }, _this.handleBlur = function (e) { | ||
| return _this.props.onBlur(e); | ||
| }, _this.focus = function () { | ||
| _this.refs.input.focus && _this.refs.input.focus(); | ||
| }, _this.blur = function () { | ||
| _this.refs.input.blur && _this.refs.input.blur(); | ||
| }, _temp), _possibleConstructorReturn(_this, _ret); | ||
| } | ||
| _createClass(TextInput, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| var _props = this.props, | ||
| accessibilityLabel = _props.accessibilityLabel, | ||
| autoComplete = _props.autoComplete, | ||
| autoFocus = _props.autoFocus, | ||
| editable = _props.editable, | ||
| keyboardType = _props.keyboardType, | ||
| maxLength = _props.maxLength, | ||
| maxNumberOfLines = _props.maxNumberOfLines, | ||
| numberOfLines = _props.numberOfLines, | ||
| onBlur = _props.onBlur, | ||
| onFocus = _props.onFocus, | ||
| onChange = _props.onChange, | ||
| onChangeText = _props.onChangeText, | ||
| onInput = _props.onInput, | ||
| placeholder = _props.placeholder, | ||
| password = _props.password, | ||
| secureTextEntry = _props.secureTextEntry, | ||
| style = _props.style, | ||
| value = _props.value, | ||
| id = _props.id, | ||
| others = _props.others; | ||
| var _props2 = this.props, | ||
| _props2$type = _props2.type, | ||
| type = _props2$type === undefined ? 'default' : _props2$type, | ||
| multiline = _props2.multiline, | ||
| multiple = _props2.multiple; | ||
| _createClass(TextInput, [{ | ||
| key: 'render', | ||
| value: function render() { | ||
| var _props = this.props, | ||
| accessibilityLabel = _props.accessibilityLabel, | ||
| autoComplete = _props.autoComplete, | ||
| autoFocus = _props.autoFocus, | ||
| editable = _props.editable, | ||
| keyboardType = _props.keyboardType, | ||
| maxLength = _props.maxLength, | ||
| maxNumberOfLines = _props.maxNumberOfLines, | ||
| numberOfLines = _props.numberOfLines, | ||
| onBlur = _props.onBlur, | ||
| onFocus = _props.onFocus, | ||
| onChange = _props.onChange, | ||
| onChangeText = _props.onChangeText, | ||
| onInput = _props.onInput, | ||
| placeholder = _props.placeholder, | ||
| password = _props.password, | ||
| secureTextEntry = _props.secureTextEntry, | ||
| style = _props.style, | ||
| value = _props.value, | ||
| id = _props.id, | ||
| others = _props.others; | ||
| var _props2 = this.props, | ||
| _props2$type = _props2.type, | ||
| type = _props2$type === undefined ? 'default' : _props2$type, | ||
| multiline = _props2.multiline, | ||
| multiple = _props2.multiple; | ||
| multiline = multiple || multiline; | ||
| var propsCommon = { | ||
| 'aria-label': accessibilityLabel, | ||
| autoComplete: autoComplete && 'on', | ||
| autofocus: autoFocus, | ||
| maxLength: maxLength, | ||
| onChange: (onChange || onChangeText) && this.handleChange, | ||
| onInput: onInput && this.handleInput, | ||
| onBlur: onBlur && this.handleBlur, | ||
| onFocus: onFocus && this.handleFocus, | ||
| placeholder: placeholder, | ||
| style: _extends({}, styles.initial, style), | ||
| value: value, | ||
| id: id | ||
| }; | ||
| multiline = multiple || multiline; | ||
| var propsCommon = { | ||
| 'aria-label': accessibilityLabel, | ||
| autoComplete: autoComplete && 'on', | ||
| autofocus: autoFocus, | ||
| maxLength: maxLength, | ||
| onChange: (onChange || onChangeText) && this.handleChange, | ||
| onInput: onInput && this.handleInput, | ||
| onBlur: onBlur && this.handleBlur, | ||
| onFocus: onFocus && this.handleFocus, | ||
| placeholder: placeholder, | ||
| style: _extends({}, styles.initial, style), | ||
| value: value, | ||
| id: id, | ||
| ref: 'input' | ||
| }; | ||
| if (typeof editable !== 'undefined' && !editable) { | ||
| propsCommon.readOnly = true; | ||
| } else { | ||
| //由于weex input readOnly默认值恢复还成问题，此处需要强制指定false,否则如果用户设置过readonly true 就永远无法修改了。 | ||
| if (_nukeEnv.isWeex) { | ||
| propsCommon.readOnly = false; | ||
| } | ||
| } | ||
| if (typeof editable !== 'undefined' && !editable) { | ||
| propsCommon.readOnly = true; | ||
| } else { | ||
| //由于weex input readOnly默认值恢复还成问题，此处需要强制指定false,否则如果用户设置过readonly true 就永远无法修改了。 | ||
| if (_nukeEnv.isWeex) { | ||
| propsCommon.readOnly = false; | ||
| } | ||
| } | ||
| type = typeMap[keyboardType] || type; | ||
| if (password || secureTextEntry) { | ||
| type = 'password'; | ||
| } | ||
| type = typeMap[keyboardType] || type; | ||
| if (password || secureTextEntry) { | ||
| type = 'password'; | ||
| } | ||
| if (_nukeEnv.isWeex) { | ||
| if (multiline) { | ||
| return (0, _rax.createElement)('textarea', _extends({}, propsCommon, { rows: 20, disabled: propsCommon.readOnly })); | ||
| } else { | ||
| // https://github.com/alibaba/weex/blob/dev/doc/components/input.md | ||
| return (0, _rax.createElement)('input', _extends({}, propsCommon, { type: type, disabled: propsCommon.readOnly })); | ||
| } | ||
| } else { | ||
| if (_nukeEnv.isWeex) { | ||
| if (multiline) { | ||
| return (0, _rax.createElement)('textarea', _extends({}, propsCommon, { rows: 20, disabled: propsCommon.readOnly })); | ||
| } else { | ||
| // https://github.com/alibaba/weex/blob/dev/doc/components/input.md | ||
| return (0, _rax.createElement)('input', _extends({}, propsCommon, { type: type, disabled: propsCommon.readOnly })); | ||
| } | ||
| } else { | ||
| var input = void 0; | ||
| if (multiline) { | ||
| var propsMultiline = { | ||
| maxRows: maxNumberOfLines || numberOfLines, | ||
| minRows: numberOfLines | ||
| }; | ||
| var input = void 0; | ||
| if (multiline) { | ||
| var propsMultiline = { | ||
| maxRows: maxNumberOfLines || numberOfLines, | ||
| minRows: numberOfLines | ||
| }; | ||
| input = (0, _rax.createElement)( | ||
| 'textarea', | ||
| _extends({}, propsCommon, propsMultiline, others), | ||
| propsCommon.value | ||
| ); | ||
| } else { | ||
| input = (0, _rax.createElement)('input', _extends({}, propsCommon, others, { type: type })); | ||
| } | ||
| input = (0, _rax.createElement)( | ||
| 'textarea', | ||
| _extends({}, propsCommon, propsMultiline, others), | ||
| propsCommon.value | ||
| ); | ||
| } else { | ||
| input = (0, _rax.createElement)('input', _extends({}, propsCommon, others, { type: type })); | ||
| } | ||
| return input; | ||
| } | ||
| } | ||
| }]); | ||
| return input; | ||
| } | ||
| } | ||
| }]); | ||
| return TextInput; | ||
| return TextInput; | ||
| }(_rax.Component); | ||
| var styles = { | ||
| initial: { | ||
| appearance: 'none', | ||
| backgroundColor: 'transparent', | ||
| borderColor: '#000000', | ||
| borderWidth: 0, | ||
| boxSizing: 'border-box', | ||
| color: '#000000', | ||
| padding: 0, | ||
| paddingLeft: '8rem', | ||
| // lineHeight: '24rem', | ||
| fontSize: '24rem', | ||
| minHeight: '36rem' } | ||
| initial: { | ||
| appearance: 'none', | ||
| backgroundColor: 'transparent', | ||
| borderColor: '#000000', | ||
| borderWidth: 0, | ||
| boxSizing: 'border-box', | ||
| color: '#000000', | ||
| padding: 0, | ||
| paddingLeft: '8rem', | ||
| // lineHeight: '24rem', | ||
| fontSize: '24rem', | ||
| minHeight: '36rem' } | ||
| }; | ||
@@ -197,0 +202,0 @@ |
| { | ||
| "name": "nuke-components", | ||
| "version": "0.2.5", | ||
| "version": "0.2.6", | ||
| "description": "nuke原件库", | ||
@@ -5,0 +5,0 @@ "main": "lib/index", |
@@ -12,14 +12,14 @@ /* @jsx createElement */ | ||
| const typeMap = { | ||
| 'default': 'text', | ||
| 'ascii-capable': 'text', | ||
| 'numbers-and-punctuation': 'number', | ||
| 'url': 'url', | ||
| 'number-pad': 'number', | ||
| 'phone-pad': 'tel', | ||
| 'name-phone-pad': 'text', | ||
| 'email-address': 'email', | ||
| 'decimal-pad': 'number', | ||
| 'twitter': 'text', | ||
| 'web-search': 'search', | ||
| 'numeric': 'number' | ||
| 'default': 'text', | ||
| 'ascii-capable': 'text', | ||
| 'numbers-and-punctuation': 'number', | ||
| 'url': 'url', | ||
| 'number-pad': 'number', | ||
| 'phone-pad': 'tel', | ||
| 'name-phone-pad': 'text', | ||
| 'email-address': 'email', | ||
| 'decimal-pad': 'number', | ||
| 'twitter': 'text', | ||
| 'web-search': 'search', | ||
| 'numeric': 'number' | ||
| }; | ||
@@ -29,139 +29,145 @@ | ||
| handleInput = (e) => { | ||
| let text = e.value; | ||
| // Shim Event | ||
| if (isWeex) { | ||
| e = { | ||
| nativeEvent: { | ||
| text | ||
| }, | ||
| value: text | ||
| }; | ||
| } | ||
| this.props.onInput(e); | ||
| }; | ||
| handleInput = (e) => { | ||
| let text = e.value; | ||
| // Shim Event | ||
| if (isWeex) { | ||
| e = { | ||
| nativeEvent: { | ||
| text | ||
| }, | ||
| value: text | ||
| }; | ||
| } | ||
| this.props.onInput(e); | ||
| }; | ||
| handleChange = (e) => { | ||
| let text = e.value; | ||
| // Shim Event | ||
| if (isWeex) { | ||
| e = { | ||
| nativeEvent: { | ||
| text | ||
| }, | ||
| value: text | ||
| }; | ||
| } | ||
| handleChange = (e) => { | ||
| let text = e.value; | ||
| // Shim Event | ||
| if (isWeex) { | ||
| e = { | ||
| nativeEvent: { | ||
| text | ||
| }, | ||
| value: text | ||
| }; | ||
| } | ||
| this.props.onChange && this.props.onChange(e); | ||
| this.props.onChangeText && this.props.onChangeText(text); | ||
| }; | ||
| this.props.onChange && this.props.onChange(e); | ||
| this.props.onChangeText && this.props.onChangeText(text); | ||
| }; | ||
| handleFocus = (e) => this.props.onFocus(e); | ||
| handleBlur = (e) => this.props.onBlur(e); | ||
| handleFocus = (e) => this.props.onFocus(e); | ||
| handleBlur = (e) => this.props.onBlur(e); | ||
| focus = () => { | ||
| this.refs.input.focus && this.refs.input.focus(); | ||
| } | ||
| blur = () => { | ||
| this.refs.input.blur && this.refs.input.blur(); | ||
| } | ||
| render() { | ||
| const { | ||
| accessibilityLabel, | ||
| autoComplete, | ||
| autoFocus, | ||
| editable, | ||
| keyboardType, | ||
| maxLength, | ||
| maxNumberOfLines, | ||
| render() { | ||
| const { | ||
| accessibilityLabel, | ||
| autoComplete, | ||
| autoFocus, | ||
| editable, | ||
| keyboardType, | ||
| maxLength, | ||
| maxNumberOfLines, | ||
| numberOfLines, | ||
| onBlur, | ||
| onFocus, | ||
| onChange, | ||
| onChangeText, | ||
| onInput, | ||
| placeholder, | ||
| password, | ||
| secureTextEntry, | ||
| style, | ||
| value, | ||
| id, | ||
| others | ||
| } = this.props; | ||
| numberOfLines, | ||
| onBlur, | ||
| onFocus, | ||
| onChange, | ||
| onChangeText, | ||
| onInput, | ||
| placeholder, | ||
| password, | ||
| secureTextEntry, | ||
| style, | ||
| value, | ||
| id, | ||
| others | ||
| } = this.props; | ||
| let { type ='default', multiline , multiple } = this.props; | ||
| let { type ='default', multiline , multiple } = this.props; | ||
| multiline= multiple || multiline; | ||
| let propsCommon = { | ||
| 'aria-label': accessibilityLabel, | ||
| autoComplete: autoComplete && 'on', | ||
| autofocus:autoFocus, | ||
| maxLength, | ||
| onChange: (onChange || onChangeText) && this.handleChange, | ||
| onInput: onInput && this.handleInput, | ||
| onBlur: onBlur && this.handleBlur, | ||
| onFocus: onFocus && this.handleFocus, | ||
| placeholder, | ||
| style: { | ||
| ...styles.initial, | ||
| ...style | ||
| }, | ||
| value, | ||
| id, | ||
| ref: 'input' | ||
| }; | ||
| multiline= multiple || multiline; | ||
| let propsCommon = { | ||
| 'aria-label': accessibilityLabel, | ||
| autoComplete: autoComplete && 'on', | ||
| autofocus:autoFocus, | ||
| maxLength, | ||
| onChange: (onChange || onChangeText) && this.handleChange, | ||
| onInput: onInput && this.handleInput, | ||
| onBlur: onBlur && this.handleBlur, | ||
| onFocus: onFocus && this.handleFocus, | ||
| placeholder, | ||
| style: { | ||
| ...styles.initial, | ||
| ...style | ||
| }, | ||
| value, | ||
| id | ||
| }; | ||
| if (typeof editable !== 'undefined' && !editable) { | ||
| propsCommon.readOnly = true; | ||
| }else{ | ||
| //由于weex input readOnly默认值恢复还成问题，此处需要强制指定false,否则如果用户设置过readonly true 就永远无法修改了。 | ||
| if(isWeex){ | ||
| propsCommon.readOnly = false; | ||
| } | ||
| } | ||
| if (typeof editable !== 'undefined' && !editable) { | ||
| propsCommon.readOnly = true; | ||
| }else{ | ||
| //由于weex input readOnly默认值恢复还成问题，此处需要强制指定false,否则如果用户设置过readonly true 就永远无法修改了。 | ||
| if(isWeex){ | ||
| propsCommon.readOnly = false; | ||
| } | ||
| } | ||
| type = typeMap[keyboardType] || type; | ||
| if (password || secureTextEntry) { | ||
| type = 'password'; | ||
| } | ||
| type = typeMap[keyboardType] || type; | ||
| if (password || secureTextEntry) { | ||
| type = 'password'; | ||
| } | ||
| if (isWeex) { | ||
| if (multiline) { | ||
| return <textarea {...propsCommon} rows={20} disabled={propsCommon.readOnly} />; | ||
| } else { | ||
| // https://github.com/alibaba/weex/blob/dev/doc/components/input.md | ||
| return <input {...propsCommon} type={type} disabled={propsCommon.readOnly} />; | ||
| } | ||
| if (isWeex) { | ||
| if (multiline) { | ||
| return <textarea {...propsCommon} rows={20} disabled={propsCommon.readOnly} />; | ||
| } else { | ||
| // https://github.com/alibaba/weex/blob/dev/doc/components/input.md | ||
| return <input {...propsCommon} type={type} disabled={propsCommon.readOnly} />; | ||
| } | ||
| } else { | ||
| } else { | ||
| let input; | ||
| if (multiline) { | ||
| const propsMultiline = { | ||
| maxRows: maxNumberOfLines || numberOfLines, | ||
| minRows: numberOfLines | ||
| }; | ||
| let input; | ||
| if (multiline) { | ||
| const propsMultiline = { | ||
| maxRows: maxNumberOfLines || numberOfLines, | ||
| minRows: numberOfLines | ||
| }; | ||
| input = <textarea {...propsCommon} {...propsMultiline} {...others}>{propsCommon.value}</textarea>; | ||
| input = <textarea {...propsCommon} {...propsMultiline} {...others}>{propsCommon.value}</textarea>; | ||
| } else { | ||
| input = <input {...propsCommon} {...others} type={type} />; | ||
| } | ||
| } else { | ||
| input = <input {...propsCommon} {...others} type={type} />; | ||
| } | ||
| return input; | ||
| } | ||
| } | ||
| return input; | ||
| } | ||
| } | ||
| } | ||
| const styles = { | ||
| initial: { | ||
| appearance: 'none', | ||
| backgroundColor: 'transparent', | ||
| borderColor: '#000000', | ||
| borderWidth: 0, | ||
| boxSizing: 'border-box', | ||
| color: '#000000', | ||
| padding: 0, | ||
| paddingLeft: '8rem', | ||
| // lineHeight: '24rem', | ||
| fontSize: '24rem', | ||
| minHeight: '36rem', // default height | ||
| } | ||
| initial: { | ||
| appearance: 'none', | ||
| backgroundColor: 'transparent', | ||
| borderColor: '#000000', | ||
| borderWidth: 0, | ||
| boxSizing: 'border-box', | ||
| color: '#000000', | ||
| padding: 0, | ||
| paddingLeft: '8rem', | ||
| // lineHeight: '24rem', | ||
| fontSize: '24rem', | ||
| minHeight: '36rem', // default height | ||
| } | ||
| }; | ||
| export default TextInput; |
@@ -10,49 +10,49 @@ /** @jsx createElement */ | ||
| } | ||
| press(){ | ||
| console.log(1); | ||
| press = (e) =>{ | ||
| console.log(e); | ||
| } | ||
| focus = (e)=>{ | ||
| this.refs.input.focus(); | ||
| } | ||
| blur = (e)=>{ | ||
| this.refs.input.blur(); | ||
| } | ||
| change=(e)=>{ | ||
| console.log('输入框的值--->',e.target.value || e.value); | ||
| } | ||
| render() { | ||
| return ( | ||
| <View> | ||
| <View style={{backgroundColor:'grey',height:'200rem'}}> | ||
| </View> | ||
| <View style={{height:'200rem'}}> | ||
| <Image source={{uri: '//img.alicdn.com/tps/TB1l8ZsNpXXXXaQXVXXXXXXXXXX-160-280.jpg'}} style={{width: '160rem',height: '280rem',}} resizeMode={'cover'}/> | ||
| </View> | ||
| <ScrollView style={{height:200}} onEndReachedThreshold={300} onEndReached={()=>{}}> | ||
| <View>第1个</View> | ||
| <View>第2个</View> | ||
| <View>第3个</View> | ||
| <View>第4个</View> | ||
| <View>第5个</View> | ||
| <View>第6个</View> | ||
| <View>第7个</View> | ||
| <View>第8个</View> | ||
| <View>第9个</View> | ||
| <View>第10个</View> | ||
| <View>第11个</View> | ||
| <View>第12个</View> | ||
| </ScrollView> | ||
| <TouchableHighlight onPress={this.press.bind(this)}> | ||
| <View style={{backgroundColor:'blue',height:'30rem',justifyContent:'center',alignItems:'center'}}> | ||
| <Text style={{color:'#ffffff'}}>摸我</Text> | ||
| <View> | ||
| <View style={{backgroundColor:'grey',height:'200rem'}}> | ||
| </View> | ||
| </TouchableHighlight> | ||
| <Switch size="small" value={true}/> | ||
| <Switch | ||
| value={false}/> | ||
| <Text style={{color:'#ffffff'}}>Hello, Nuke</Text> | ||
| <TextInput | ||
| placeholder="试着输入一些内容" | ||
| autoFocus multiline | ||
| onFocus={() => console.log('onFocus')} | ||
| onBlur={() => console.log('onBlur')} | ||
| onInput={() => console.log('onInput')} | ||
| style={{ | ||
| width: '200rem', | ||
| height: '200rem', | ||
| border: '1px solid # 000' | ||
| }} | ||
| /> | ||
| <View style={{height:'200rem'}}> | ||
| <Image source={{uri: '//img.alicdn.com/tps/TB1l8ZsNpXXXXaQXVXXXXXXXXXX-160-280.jpg'}} style={{width: '160rem',height: '280rem',}} resizeMode={'cover'}/> | ||
| </View> | ||
| <ScrollView style={{height:200}} onEndReachedThreshold={300} onEndReached={()=>{}}> | ||
| <View>第1个</View> | ||
| <View>第2个</View> | ||
| <View>第3个</View> | ||
| <View>第4个</View> | ||
| <View>第5个</View> | ||
| <View>第6个</View> | ||
| <View>第7个</View> | ||
| <View>第8个</View> | ||
| <View>第9个</View> | ||
| <View>第10个</View> | ||
| <View>第11个</View> | ||
| <View>第12个</View> | ||
| </ScrollView> | ||
| <TouchableHighlight style={{backgroundColor:'#3089dc',height:'40rem',justifyContent:'center',alignItems:'center'}} onPress={this.press}> | ||
| <Text style={{color:'#ffffff'}}>TouchableHighlight 点击</Text> | ||
| </TouchableHighlight> | ||
| <Switch size="small" value={true}/> | ||
| <Switch value={false}/> | ||
| <Text style={{color:'#ffffff'}}>Hello, Nuke</Text> | ||
| <TextInput ref="input" onChange={this.change} style={{width: '600rem',height: '60rem',backgroundColor: '#f3f3f3'}}/> | ||
| <TouchableHighlight style={{backgroundColor:'#3089dc',height:'40rem',justifyContent:'center',alignItems:'center'}} onPress={this.focus}> | ||
| <Text style={{color:'#ffffff'}}>让 input 获得焦点</Text> | ||
| </TouchableHighlight> | ||
| <TouchableHighlight style={{marginTop:'20rem',backgroundColor:'#3089dc',height:'40rem',justifyContent:'center',alignItems:'center'}} onPress={this.blur}> | ||
| <Text style={{color:'#ffffff'}}>让 input 失去焦点</Text> | ||
| </TouchableHighlight> | ||
| </View> | ||
@@ -59,0 +59,0 @@ ) |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.02%
105178
- Lines of code
- increased by0.64%
2057
No dependency changes