react-native-material-textinput - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/Input.js

 import React, { Component } from 'react'
-import { View, TextInput } from 'react-native'
+import { View, TextInput, Platform } from 'react-native'
 import PropTypes from 'prop-types'
@@ -16,2 +16,3 @@ import Label from './Label'
     onChangeText: PropTypes.func,
+    onContentSizeChange: PropTypes.func,
     minHeight: PropTypes.number,
@@ -32,4 +33,3 @@ height: PropTypes.number,
     fontSize: PropTypes.number,
-    fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    multiline: PropTypes.bool
+    fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   }
@@ -42,2 +42,3 @@
     onChangeText: () => {},
+    onContentSizeChange: () => {},
     value: null,
@@ -51,20 +52,22 @@ marginBottom: 8,
     fontSize: 15,
-    fontWeight: 'normal',
-    multiline: false
+    fontWeight: 'normal'
   }
 
-  state = {
-    value: null,
-    focused: false
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      value: null,
+      focused: false,
+      height: props.fontSize * 1.5
+    }
   }
 
   render() {
-    const { focused } = this.state
-    const value = this.props.value != null ? this.props.value : this.state.value
-    const hasValue = value && value.length > 0
-    const active = focused || hasValue
-
+    let { focused, height } = this.state
+    let value = this.props.value != null ? this.props.value : this.state.value
+    let hasValue = value && value.length > 0
+    let active = focused || hasValue
     let {
       minHeight,
-      height,
       maxHeight,
@@ -97,3 +100,2 @@ marginTop,
       underlineActiveHeight,
-      multiline,
       error,
@@ -155,6 +157,9 @@ errorColor,
     }
+    if (props.multiline && props.height) {
+      // Disable autogrow if height prop
+      height = props.height
+    }
     let inputStyle = {
-      minHeight: multiline ? minHeight : 'auto',
-      height: multiline ? height : 'auto',
-      maxHeight: multiline ? maxHeight : 'auto',
+      minHeight,
+      maxHeight,
       paddingTop,
@@ -167,3 +172,10 @@ paddingRight,
       fontSize,
-      fontWeight
+      fontWeight,
+      ...Platform.select({
+        ios: { height: paddingTop + paddingBottom + (props.multiline ? height : fontSize * 1.5) },
+        android: {
+          height: props.multiline ? height : fontSize * 1.5 + paddingTop + paddingBottom,
+          textAlignVertical: 'top'
+        }
+      })
     }
@@ -188,4 +200,4 @@ let errorProps = {
           onChangeText={this._handleChangeText}
+          onContentSizeChange={this._handleContentSizeChange}
           value={value}
-          multiline={multiline}
         />
@@ -220,2 +232,13 @@ <Underline {...underlineProps} />
   }
+
+  _handleContentSizeChange = event => {
+    let { onContentSizeChange, fontSize } = this.props
+    let { height } = event.nativeEvent.contentSize
+
+    this.setState({
+      height: Math.max(fontSize * 1.5, Math.ceil(height))
+    })
+
+    onContentSizeChange(event)
+  }
 }

lib/Label.js

@@ -35,4 +35,4 @@ import React, { Component } from 'react'
   componentWillReceiveProps = nextProps => {
-    const { animatedScale, animatedTranslate } = this.state
-    const { labelDuration, labelActiveScale, labelActiveTop, hasValue, focused } = nextProps
+    let { animatedScale, animatedTranslate } = this.state
+    let { labelDuration, labelActiveScale, labelActiveTop, hasValue, focused } = nextProps
 
@@ -39,0 +39,0 @@ if (this.props.hasValue !== hasValue || this.props.focused !== focused) {

lib/Underline.js

@@ -28,7 +28,7 @@ import React, { Component } from 'react'
   componentWillReceiveProps = nextProps => {
-    const { animatedScaleX, animatedOpacity } = this.state
-    const { error, focused, underlineDuration } = nextProps
+    let { animatedScaleX, animatedOpacity } = this.state
+    let { error, focused, underlineDuration } = nextProps
 
     if (this.props.focused !== focused || this.props.error !== error) {
-      const isActive = focused || error
+      let isActive = focused || error
       let sequence = []
@@ -35,0 +35,0 @@

package.json

 {
   "name": "react-native-material-textinput",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Textual input component for React Native",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -70,6 +70,6 @@ # Material Design Text Input
 fontWeight            | String or Number   | `normal`
-multiline             | Bool               | `false`
 onFocus               | Function
 onBlur                | Function
 onChangeText          | Function
+onContentSizeChange   | Function
 
@@ -90,3 +90,3 @@ ### Underline
 :-------------------- |:------------------ |:----------
-error                 | String             | 
+error                 | String             |
 errorPaddingTop       | Number             | `8`
@@ -93,0 +93,0 @@ errorColor            | String             | `#fc1f4a`

No alert changes

Improved metrics

Total package byte prevSize

230121

increased by0.29%

Lines of code

543

increased by3.82%

No dependency changes