Yui ExtendibleTextInput

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: 可调节行高,行间距.
 
-    ​
+
+   ​
 
 #### 控制组件
 

demo/Demo.js

@@ -12,9 +12,7 @@ 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 Demo extends Component {
   render() {
@@ -57,5 +55,8 @@ export default class Demo extends Component {
     if(route.name === 'MediaKit') {
       return <MediaKitDemo />
     }
+    if(route.name === 'TextInputAutoGrow') {
+      return <TextInputAutoGrowDemo />
+    }
   }
 }

demo/demos/DemoList.js

@@ -42,6 +42,10 @@ const dataSource = ds.cloneWithRowsAndSections({
     {
       name: 'MediaKit',
       desc: '媒体播放'
+    },
+    {
+      name: 'TextInputAutoGrow',
+      desc: '自动增长的TextInput'
     },],
   'Control Components': [
     {

demo/demos/TextInputAutoGrowDemo.js

@@ -0,0 +1,72 @@
+'use strict';
+
+import React, {Component} from 'react';
+import {
+  View,
+  Text,
+ScrollView
+} from 'react-native';
+
+import {TextInput} 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 (
+      <ScrollView
+        style={{flex: 1, backgroundColor: 'white'}}>
+        <Text style={{fontSize : 30,marginTop:64,alignSelf:'center'}}>欢迎使用</Text>
+        <Text style={{fontSize : 20,marginTop:10,alignSelf:'center'}}>"ExtendibleTextInput"</Text>
+        <Text
+          onPress={() => {this.setState({isExtendible:!this.state.isExtendible})}}
+          style={{marginTop:20,alignSelf:'center'}}>点我切换拉伸模式</Text>
+        <Text style={{fontSize: 20,alignSelf:'center'}}> {this.state.isExtendible ? '拉伸' : '不可拉伸'} </Text>
+
+        <TextInput
+          placeholder={'Writing.....'}
+          maxHeight={this.state.maxHeight}
+          multiline = {true}
+          isExtendible={this.state.isExtendible}
+          style={{borderWidth:1,width:200,height:38,fontSize: 29,alignSelf:'center'}}
+          onHeightExtended={(newHeight,lastHeight,addedHeight) => {this.setState({newHeight,lastHeight,addedHeight})
+          }}
+        />
+        <View style={{flexDirection:'row',marginTop:150,alignSelf:'center'}}>
+          <Text style={{position:'absolute',right:-10 ,fontSize: 15}}>maxHeight : </Text>
+          <TextInput style={{position:'absolute',left:10,width:100 ,height:15,fontSize: 15}}
+                     placeholder={this.state.maxHeight?this.state.maxHeight:'maxHeight'}
+                     onEndEditing={(event) => {this.setState({maxHeight:event.nativeEvent.text})}}/>
+        </View>
+        <View style={{width:190,backgroundColor:'black',height:1,marginTop:16,alignSelf:'center'}}/>
+        <View style={{flexDirection:'row',alignSelf:'center'}}>
+          <Text style={{position:'absolute',right:-10 ,fontSize: 15}}>NewHeight : </Text>
+          <Text style={{position:'absolute',left:10,width:100 ,fontSize: 15}}> {this.state.newHeight} </Text>
+        </View>
+        <View style={{width:190,backgroundColor:'black',height:1,marginTop:16,alignSelf:'center'}}/>
+        <View style={{flexDirection:'row',alignSelf:'center'}}>
+          <Text style={{position:'absolute',right:-10 ,fontSize: 15}}>LastHeight : </Text>
+          <Text style={{position:'absolute',left:10,width:100 ,fontSize: 15}}> {this.state.lastHeight} </Text>
+        </View>
+        <View style={{width:190,backgroundColor:'black',height:1,marginTop:16,alignSelf:'center'}}/>
+        <View style={{flexDirection:'row',alignSelf:'center'}}>
+          <Text style={{position:'absolute',right:-10 ,fontSize: 15}}>AddedHeight : </Text>
+          <Text style={{position:'absolute',left:10,width:100 ,fontSize: 15}}> {this.state.addedHeight} </Text>
+        </View>
+        <View style={{width:190,backgroundColor:'black',height:1,marginTop:16,alignSelf:'center'}}/>
+
+
+      </ScrollView>
+    );
+  }
+}

index.js

@@ -10,7 +10,7 @@ var YUI = {
     return ReactNative.Text;
   },
   get TextInput() {
-    return ReactNative.TextInput;
+    return require('./library/ExtendibleTextInput').default;
   },
   get Image() {
     return ReactNative.Image;
@@ -59,7 +59,7 @@ var YUI = {
   },
   get DatePicker() {
     return ReactNative.DatePicker;
-  }
-}
+  },
+};
 
 module.exports = YUI;

library/ExtendibleTextInput.js

@@ -0,0 +1,67 @@
+import React, {Component, PropTypes} from 'react';
+
+const {number, func, bool,string} = PropTypes;
+
+import {TextInput} from 'react-native';
+
+export default class ExtendibleTextInput extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      height: 0
+    }
+  }
+
+  _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) {
+          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 (
+      <TextInput {...this.props} {...this.style}
+        //onLayout方法不执行,无法再挂载阶段获取容器的行高
+        // onLayout={() => {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)}}
+      />
+
+    )
+  }
+}
+
+ExtendibleTextInput.propTypes = {
+  maxHeight: string,
+  onHeightExtended: func,
+  isExtendible: bool
+};
+ExtendibleTextInput.defaultProps = {
+  maxHeight: null,
+  isExtendible: false
+};