From bb0c402c262cdaa70d30865506c87db657f48e13 Mon Sep 17 00:00:00 2001 From: yuanyuli Date: Fri, 17 Jun 2016 18:43:25 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E6=B7=BB=E5=8A=A0ExtendibleTextInput?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 19 ++++++-- demo/Demo.js | 13 ++++- demo/demos/DemoList.js | 4 ++ demo/demos/TextInputAutoGrowDemo.js | 73 +++++++++++++++++++++++++++++ index.js | 3 +- library/ExtendibleTextInput.js | 63 +++++++++++++++++++++++++ 6 files changed, 168 insertions(+), 7 deletions(-) create mode 100644 demo/demos/TextInputAutoGrowDemo.js create mode 100644 library/ExtendibleTextInput.js diff --git a/README.md b/README.md index 5864fda..744f292 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,4 @@ # react-native-yui -**Still under developing, do NOT use** - 此项目志在提供一个性能高、功能全、简单易用、iOS/Android通用的UI库，造福RN开发者。 对于此项目应该囊括哪些组件，我们有以下考虑： @@ -19,7 +17,7 @@ 1. [Text](https://facebook.github.io/react-native/docs/text.html) -2. [TextInput](https://facebook.github.io/react-native/docs/textinput.html) +2. [TextInput](https://facebook.github.io/react-native/docs/textinput.html) 3. [Image](https://facebook.github.io/react-native/docs/image.html) @@ -51,9 +49,20 @@ 待实现 -16. ​ +16. ​**ExtendibleTextInput** + + 可拉伸的TextInput,可以识别Textinput内容的大小自动向下拉伸. + + + Prop | Default | Type | Description| + ------------ | ------------- | ------------ | ----------- + maxHeight | null | number | 可拉伸到的最大长度 | + onHeightExtended | - | func | 当高度拉伸时的回调,返回新高度,变化之前高度,高度差| + + TODO: 可调节行高,行间距. - ​ + + ​ #### 控制组件 diff --git a/demo/Demo.js b/demo/Demo.js index d3cba75..7469965 100644 --- a/demo/Demo.js +++ b/demo/Demo.js @@ -12,11 +12,19 @@ import ButtonDemo from './demos/ButtonDemo'; import ViewPagerDemo from './demos/ViewPagerDemo'; import TabBarDemo from './demos/TabBarDemo'; import MediaKitDemo from './demos/MediaKitDemo'; +import TextInputAutoGrowDemo from './demos/TextInputAutoGrowDemo'; +export default class Demo1 extends Component { + render() { + return ( + + ) + } +} -export default class Demo extends Component { +class Demo extends Component { render() { return ( } + if(route.name === 'TextInputAutoGrow') { + return + } } } diff --git a/demo/demos/DemoList.js b/demo/demos/DemoList.js index dfade4f..ff0ce66 100644 --- a/demo/demos/DemoList.js +++ b/demo/demos/DemoList.js @@ -42,6 +42,10 @@ const dataSource = ds.cloneWithRowsAndSections({ { name: 'MediaKit', desc: '媒体播放' + }, + { + name: 'TextInputAutoGrow', + desc: '自动增长的TextInput' },], 'Control Components': [ { diff --git a/demo/demos/TextInputAutoGrowDemo.js b/demo/demos/TextInputAutoGrowDemo.js new file mode 100644 index 0000000..04e5956 --- /dev/null +++ b/demo/demos/TextInputAutoGrowDemo.js @@ -0,0 +1,73 @@ +'use strict'; + +import React, {Component} from 'react'; +import { + View, + TextInput, + Text +} from 'react-native'; + +import {ExtendibleTextInput} from 'react-native-yui'; + +export default class Demo extends Component { + + constructor(props) { + super(props); + this.state = { + maxHeight: null, + isExtendible: true, + newHeight: 0, + lastHeight: 0, + addedHeight: 0 + }; + } + + render() { + return ( + + 欢迎使用 + "ExtendibleTextInput" + {this.setState({isExtendible:!this.state.isExtendible})}} + style={{marginTop:20}}>点我切换拉伸模式 + {this.state.isExtendible ? '拉伸' : '不可拉伸'} + + {this.setState({newHeight,lastHeight,addedHeight}) + console.log('高度变了') + }} + + /> + + maxHeight : + {this.setState({maxHeight:parseInt(event.nativeEvent.text)})}}/> + + + + NewHeight : + {this.state.newHeight} + + + + LastHeight : + {this.state.lastHeight} + + + + AddedHeight : + {this.state.addedHeight} + + + + + + ); + } +} \ No newline at end of file diff --git a/index.js b/index.js index ea6fcb0..b1b6e5b 100755 --- a/index.js +++ b/index.js @@ -59,7 +59,8 @@ var YUI = { }, get DatePicker() { return ReactNative.DatePicker; - } + }, + get ExtendibleTextInput() {return require('./library/ExtendibleTextInput').default }, } module.exports = YUI; diff --git a/library/ExtendibleTextInput.js b/library/ExtendibleTextInput.js new file mode 100644 index 0000000..54bcc98 --- /dev/null +++ b/library/ExtendibleTextInput.js @@ -0,0 +1,63 @@ +import React, {Component, PropTypes} from 'react'; + +const {number, func, bool} = PropTypes; + +import {View, TextInput} from 'react-native'; + +export default class ExtendibleTextInput extends Component { + constructor(props) { + super(props); + this.state = { + height: 0 + } + } + + _onChange(nativeEvent) { + let newHeight = this.state.height; + if (nativeEvent.contentSize && this.props.isExtendible) { + newHeight = nativeEvent.contentSize.height; + if(this.props.maxHeight) { + if (this.state.height !== newHeight &&newHeight <= this.props.maxHeight&& this.props.onHeightExtended) { + this.props.onHeightExtended(newHeight, this.state.height, newHeight - this.state.height); + } + } else { + if (this.state.height !== newHeight && this.props.onHeightExtended) { + this.props.onHeightExtended(newHeight, this.state.height, newHeight - this.state.height); + } + } + + } + this.setState({ + height: newHeight + }); + } + + _getChangeHeight(height) { + if (this.props.maxHeight == null) { + return (height) + } + return Math.min(height, this.props.maxHeight); + + } + + render() { + return ( + {this._onChange(event.nativeEvent)}} + /> + + ) + } +} + +ExtendibleTextInput.propTypes = { + maxHeight: number, + onHeightExtended: func, + isExtendible: bool +}; +ExtendibleTextInput.defaultProps = { + maxHeight: null, + isExtendible: false +}; \ No newline at end of file From a9fd8a59b5c76df935e96f2861cf0abda326dea2 Mon Sep 17 00:00:00 2001 From: yuanyuli Date: Fri, 17 Jun 2016 19:00:19 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E5=88=A0=E9=99=A4log?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/Demo.js | 12 +----------- demo/demos/TextInputAutoGrowDemo.js | 1 - 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/demo/Demo.js b/demo/Demo.js index 7469965..cfbd389 100644 --- a/demo/Demo.js +++ b/demo/Demo.js @@ -14,17 +14,7 @@ import TabBarDemo from './demos/TabBarDemo'; import MediaKitDemo from './demos/MediaKitDemo'; import TextInputAutoGrowDemo from './demos/TextInputAutoGrowDemo'; - -export default class Demo1 extends Component { - - render() { - return ( - - ) - } -} - -class Demo extends Component { +export default class Demo extends Component { render() { return ( {this.setState({newHeight,lastHeight,addedHeight}) - console.log('高度变了') }} /> From 76c7ed76b3712a5b9c09e6ae402a42caf6553a4d Mon Sep 17 00:00:00 2001 From: yuanyuli Date: Thu, 23 Jun 2016 18:44:12 +0800 Subject: [PATCH 3/6] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index b1b6e5b..71786b4 100755 --- a/index.js +++ b/index.js @@ -60,7 +60,9 @@ var YUI = { get DatePicker() { return ReactNative.DatePicker; }, - get ExtendibleTextInput() {return require('./library/ExtendibleTextInput').default }, -} + get ExtendibleTextInput() { + return require('./library/ExtendibleTextInput').default + } +}; module.exports = YUI; From 072018feb3546b9ca3caf7e3312aa9d493f7b33c Mon Sep 17 00:00:00 2001 From: yuanyuli Date: Fri, 24 Jun 2016 09:55:35 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E4=BF=AE=E6=AD=A3ExtendibleTextInput?= =?UTF-8?q?=E5=90=8D=E7=A7=B0,=E5=B0=86=E5=85=B6=E5=90=88=E5=B9=B6?= =?UTF-8?q?=E5=88=B0TextInput?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demos/TextInputAutoGrowDemo.js | 5 ++--- index.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/demo/demos/TextInputAutoGrowDemo.js b/demo/demos/TextInputAutoGrowDemo.js index 1bef181..ac2bf99 100644 --- a/demo/demos/TextInputAutoGrowDemo.js +++ b/demo/demos/TextInputAutoGrowDemo.js @@ -3,11 +3,10 @@ import React, {Component} from 'react'; import { View, - TextInput, Text } from 'react-native'; -import {ExtendibleTextInput} from 'react-native-yui'; +import {TextInput} from 'react-native-yui'; export default class Demo extends Component { @@ -33,7 +32,7 @@ export default class Demo extends Component { style={{marginTop:20}}>点我切换拉伸模式 {this.state.isExtendible ? '拉伸' : '不可拉伸'} - Date: Mon, 4 Jul 2016 16:53:36 +0800 Subject: [PATCH 5/6] =?UTF-8?q?=E8=B0=83=E6=95=B4Demo=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E6=95=88=E6=9E=9C,=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demos/TextInputAutoGrowDemo.js | 39 +++++++++++++++-------------- library/ExtendibleTextInput.js | 16 +++++++----- 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/demo/demos/TextInputAutoGrowDemo.js b/demo/demos/TextInputAutoGrowDemo.js index ac2bf99..af902c1 100644 --- a/demo/demos/TextInputAutoGrowDemo.js +++ b/demo/demos/TextInputAutoGrowDemo.js @@ -3,7 +3,8 @@ import React, {Component} from 'react'; import { View, - Text + Text, +ScrollView } from 'react-native'; import {TextInput} from 'react-native-yui'; @@ -23,49 +24,49 @@ export default class Demo extends Component { render() { return ( - - 欢迎使用 - "ExtendibleTextInput" + + 欢迎使用 + "ExtendibleTextInput" {this.setState({isExtendible:!this.state.isExtendible})}} - style={{marginTop:20}}>点我切换拉伸模式 - {this.state.isExtendible ? '拉伸' : '不可拉伸'} + style={{marginTop:20,alignSelf:'center'}}>点我切换拉伸模式 + {this.state.isExtendible ? '拉伸' : '不可拉伸'} {this.setState({newHeight,lastHeight,addedHeight}) }} - /> - + maxHeight : {this.setState({maxHeight:parseInt(event.nativeEvent.text)})}}/> + onEndEditing={(event) => {this.setState({maxHeight:event.nativeEvent.text})}}/> - - + + NewHeight : {this.state.newHeight} - - + + LastHeight : {this.state.lastHeight} - - + + AddedHeight : {this.state.addedHeight} - + - + ); } } \ No newline at end of file diff --git a/library/ExtendibleTextInput.js b/library/ExtendibleTextInput.js index 54bcc98..03e3309 100644 --- a/library/ExtendibleTextInput.js +++ b/library/ExtendibleTextInput.js @@ -1,8 +1,8 @@ import React, {Component, PropTypes} from 'react'; -const {number, func, bool} = PropTypes; +const {number, func, bool,string} = PropTypes; -import {View, TextInput} from 'react-native'; +import {TextInput} from 'react-native'; export default class ExtendibleTextInput extends Component { constructor(props) { @@ -13,11 +13,14 @@ export default class ExtendibleTextInput extends Component { } _onChange(nativeEvent) { + if(this.props.onChange) { + this.props.onChange(); + } let newHeight = this.state.height; if (nativeEvent.contentSize && this.props.isExtendible) { newHeight = nativeEvent.contentSize.height; - if(this.props.maxHeight) { - if (this.state.height !== newHeight &&newHeight <= this.props.maxHeight&& this.props.onHeightExtended) { + if (this.props.maxHeight) { + if (this.state.height !== newHeight && newHeight <= this.props.maxHeight && this.props.onHeightExtended) { this.props.onHeightExtended(newHeight, this.state.height, newHeight - this.state.height); } } else { @@ -43,7 +46,8 @@ export default class ExtendibleTextInput extends Component { render() { return ( {console.log('---------------------------------onLayout');}} style={[this.props.style,{height:Math.max(this._getChangeHeight(this.state.height),this.props.style.height)}]} onChange={(event) => {this._onChange(event.nativeEvent)}} /> @@ -53,7 +57,7 @@ export default class ExtendibleTextInput extends Component { } ExtendibleTextInput.propTypes = { - maxHeight: number, + maxHeight: string, onHeightExtended: func, isExtendible: bool }; From 9ac5e48bb7f1a8c08a47084c237d8eaf876719f6 Mon Sep 17 00:00:00 2001 From: yuanyuli Date: Mon, 4 Jul 2016 16:55:25 +0800 Subject: [PATCH 6/6] =?UTF-8?q?=E5=90=88=E5=B9=B6TextInput=E4=B8=8EExtendi?= =?UTF-8?q?bleTextInput?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/index.js b/index.js index 0863c2b..dc39780 100755 --- a/index.js +++ b/index.js @@ -60,9 +60,6 @@ var YUI = { get DatePicker() { return ReactNative.DatePicker; }, - get ExtendibleTextInput() { - return require('./library/ExtendibleTextInput').default - } }; module.exports = YUI;