feat(TextArea): add minHeight property, docs example (#1679)

* add minHeight property, example to docs

* add rows prop/adjust minHeight prop usage

* mixed(TextArea): update docs, tests, props and typings

* fix(Textarea): move back minHeight prop to style

docs/app/Examples/addons/TextArea/Usage/TextAreaExample.js → docs/app/Examples/addons/TextArea/Types/TextAreaExampleTextArea.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Form, TextArea } from 'semantic-ui-react'
 
-const TextAreaExample = () => (
+const TextAreaExampleTextArea = () => (
   <Form>
     <TextArea placeholder='Tell us more' />
   </Form>
 )
 
-export default TextAreaExample
+export default TextAreaExampleTextArea

docs/app/Examples/addons/TextArea/Types/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const TextAreaTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='TextArea'
+      description='A default TextArea.'
+      examplePath='addons/TextArea/Types/TextAreaExampleTextArea'
+    />
+  </ExampleSection>
+)
+
+export default TextAreaTypesExamples

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleAutoHeight.js

@@ -3,7 +3,7 @@ import { Form, TextArea } from 'semantic-ui-react'
 
 const TextAreaExampleAutoHeight = () => (
   <Form>
-    <TextArea placeholder='Try adding multiple lines' autoHeight />
+    <TextArea autoHeight placeholder='Try adding multiple lines' />
   </Form>
 )
 

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleAutoHeightMinHeight.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form, TextArea } from 'semantic-ui-react'
+
+const TextAreaExampleAutoHeightMinHeight = () => (
+  <Form>
+    <TextArea autoHeight placeholder='Try adding multiple lines' style={{ minHeight: 100 }} />
+  </Form>
+)
+
+export default TextAreaExampleAutoHeightMinHeight

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleAutoHeightRows.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form, TextArea } from 'semantic-ui-react'
+
+const TextAreaExampleAutoHeightRows = () => (
+  <Form>
+    <TextArea autoHeight placeholder='Try adding multiple lines' rows={1} />
+  </Form>
+)
+
+export default TextAreaExampleAutoHeightRows

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleMinHeight.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form, TextArea } from 'semantic-ui-react'
+
+const TextAreaExampleMinHeight = () => (
+  <Form>
+    <TextArea placeholder='Tell us more' style={{ minHeight: 100 }} />
+  </Form>
+)
+
+export default TextAreaExampleMinHeight

docs/app/Examples/addons/TextArea/Usage/TextAreaExampleRows.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Form, TextArea } from 'semantic-ui-react'
+
+const TextAreaExampleRows = () => (
+  <Form>
+    <TextArea rows={2} placeholder='Tell us more' />
+  </Form>
+)
+
+export default TextAreaExampleRows

docs/app/Examples/addons/TextArea/Usage/index.js

@@ -1,20 +1,36 @@
 import React from 'react'
+
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-const TextAreaTypesExamples = () => (
+const TextAreaUsageExamples = () => (
   <ExampleSection title='Usage'>
     <ComponentExample
-      title='TextArea'
-      description='A default TextArea.'
-      examplePath='addons/TextArea/Usage/TextAreaExample'
+      title='Min Height'
+      description='A TextArea can have a minimum height.'
+      examplePath='addons/TextArea/Usage/TextAreaExampleMinHeight'
     />
+
+    <ComponentExample
+      title='Rows'
+      description='A TextArea can have a minimum number of rows.'
+      examplePath='addons/TextArea/Usage/TextAreaExampleRows'
+    />
+
     <ComponentExample
       title='Auto Height'
       description='A TextArea can adjust its height to fit its contents.'
       examplePath='addons/TextArea/Usage/TextAreaExampleAutoHeight'
     />
+    <ComponentExample
+      description='A TextArea can adjust its height to fit its contents and depend on minHeight value.'
+      examplePath='addons/TextArea/Usage/TextAreaExampleAutoHeightMinHeight'
+    />
+    <ComponentExample
+      description='A TextArea can adjust its height to fit its contents and depend on rows value.'
+      examplePath='addons/TextArea/Usage/TextAreaExampleAutoHeightRows'
+    />
   </ExampleSection>
 )
 
-export default TextAreaTypesExamples
+export default TextAreaUsageExamples

docs/app/Examples/addons/TextArea/index.js

@@ -1,8 +1,11 @@
 import React from 'react'
+
+import Types from './Types'
 import Usage from './Usage'
 
 const TextAreaExamples = () => (
   <div>
+    <Types />
     <Usage />
   </div>
 )

src/addons/TextArea/TextArea.d.ts

@@ -11,11 +11,18 @@ export interface TextAreaProps {
 
   /**
    * Called on change.
+   *
    * @param {SyntheticEvent} event - The React SyntheticEvent object
    * @param {object} data - All props and the event value.
    */
   onChange?: (event: React.FormEvent<HTMLTextAreaElement>, data: TextAreaOnChangeData) => void;
 
+  /** Indicates row count for a TextArea. */
+  rows?: number;
+
+  /** Custom TextArea style. */
+  style?: Object;
+
   /** The value of the textarea. */
   value?: string;
 }

src/addons/TextArea/TextArea.js

@@ -1,5 +1,7 @@
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+
 import {
   customPropTypes,
   getElementType,
@@ -31,12 +33,19 @@ class TextArea extends Component {
      */
     onChange: PropTypes.func,
 
+    /** Indicates row count for a TextArea. */
+    rows: PropTypes.number,
+
+    /** Custom TextArea style. */
+    style: PropTypes.object,
+
     /** The value of the textarea. */
     value: PropTypes.string,
   }
 
   static defaultProps = {
     as: 'textarea',
+    rows: 3,
   }
 
   componentDidMount() {
@@ -56,45 +65,50 @@ class TextArea extends Component {
 
   focus = () => (this.ref.focus())
 
-  handleChange = (e) => {
-    const { onChange } = this.props
-    if (onChange) onChange(e, { ...this.props, value: e.target && e.target.value })
+  handleChange = e => {
+    const value = _.get(e, 'target.value')
 
-    this.updateHeight(e.target)
+    _.invoke(this.props, 'onChange', e, { ...this.props, value })
+    this.updateHeight()
   }
 
   handleRef = c => (this.ref = c)
 
   removeAutoHeightStyles = () => {
-    this.ref.removeAttribute('rows')
     this.ref.style.height = null
-    this.ref.style.minHeight = null
     this.ref.style.resize = null
   }
 
   updateHeight = () => {
-    if (!this.ref) return
-
     const { autoHeight } = this.props
-    if (!autoHeight) return
+    if (!this.ref || !autoHeight) return
 
     let { borderTopWidth, borderBottomWidth } = window.getComputedStyle(this.ref)
     borderTopWidth = parseInt(borderTopWidth, 10)
     borderBottomWidth = parseInt(borderBottomWidth, 10)
 
-    this.ref.rows = '1'
-    this.ref.style.minHeight = '0'
     this.ref.style.resize = 'none'
     this.ref.style.height = 'auto'
     this.ref.style.height = (this.ref.scrollHeight + borderTopWidth + borderBottomWidth) + 'px'
   }
 
   render() {
-    const { value } = this.props
+    const { rows, style, value } = this.props
+    const minHeight = _.get(style, 'minHeight', 0)
+
     const rest = getUnhandledProps(TextArea, this.props)
     const ElementType = getElementType(TextArea, this.props)
 
-    return <ElementType{...rest} onChange={this.handleChange} ref={this.handleRef} value={value} />
+    return (
+      <ElementType
+        {...rest}
+        onChange={this.handleChange}
+        ref={this.handleRef}
+        rows={rows}
+        style={{ ...style, minHeight }}
+        value={value}
+      />
+    )
   }
 }