From 267b088001d29e011f62d301391023a2c99b2b30 Mon Sep 17 00:00:00 2001
From: Viktor Varland <varl@vlv.io>
Date: Fri, 8 Nov 2019 16:26:08 +0100
Subject: [PATCH] refactor(textarea): align 'on' function handlers

BREAKING CHANGE: `onChange` is called with two parameters:
First parameter an object with properties for `checked`, `name`, and
`value`.
The second is the React `event` object.
---
 src/TextArea.js | 55 ++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/TextArea.js b/src/TextArea.js
index 721d673b0..62a5f76c1 100644
--- a/src/TextArea.js
+++ b/src/TextArea.js
@@ -78,12 +78,51 @@ export class TextArea extends Component {
         }
     }
 
+    handleChange = e => {
+        const { onChange, readOnly, disabled } = this.props
+
+        if (disabled || readOnly) {
+            return
+        }
+
+        if (onChange) {
+            onChange(
+                {
+                    value: e.target.value,
+                    name: this.props.name,
+                },
+                e
+            )
+        }
+    }
+
+    handleBlur = e => {
+        const { onBlur, disabled } = this.props
+
+        if (disabled) {
+            return
+        }
+
+        if (onBlur) {
+            onBlur(e)
+        }
+    }
+
+    handleFocus = e => {
+        const { onFocus, disabled } = this.props
+
+        if (disabled) {
+            return
+        }
+
+        if (onFocus) {
+            onFocus(e)
+        }
+    }
+
     render() {
         const {
             className,
-            onChange,
-            onFocus,
-            onBlur,
             dense,
             disabled,
             readOnly,
@@ -113,9 +152,9 @@ export class TextArea extends Component {
                     disabled={disabled}
                     readOnly={readOnly}
                     tabIndex={tabIndex}
-                    onFocus={onFocus}
-                    onBlur={onBlur}
-                    onChange={onChange}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
+                    onChange={this.handleChange}
                     rows={rows}
                     className={cx({
                         dense,
@@ -160,7 +199,7 @@ TextArea.defaultProps = {
  * @static
  *
  * @prop {string} name
- * @prop {function} onChange
+ * @prop {function} [onChange] - called with the signature `object, event`
  * @prop {function} [onBlur]
  * @prop {function} [onFocus]
  * @prop {string} [className]
@@ -191,7 +230,7 @@ TextArea.propTypes = {
 
     className: propTypes.string,
 
-    onChange: propTypes.func.isRequired,
+    onChange: propTypes.func,
     onFocus: propTypes.func,
     onBlur: propTypes.func,