From 4be4e1b237cbf8157b25bf4f9ad51921be5207fe Mon Sep 17 00:00:00 2001
From: "Mahmoud.Zakria" <mahmoud.zakria@dunnhumby.com>
Date: Fri, 15 Feb 2019 13:15:02 +0100
Subject: [PATCH] convert to hooks

---
 src/TextArea/index.jsx | 393 ++++++++++++++++++++---------------------
 1 file changed, 196 insertions(+), 197 deletions(-)

diff --git a/src/TextArea/index.jsx b/src/TextArea/index.jsx
index 3100147d..06cab107 100644
--- a/src/TextArea/index.jsx
+++ b/src/TextArea/index.jsx
@@ -7,211 +7,210 @@
  *
  */
 
-import React                                 from 'react';
-import PropTypes                             from 'prop-types';
+import React, {
+    useRef, useImperativeHandle, forwardRef,
+} from 'react';
+import PropTypes                              from 'prop-types';
 
-import { attachEvents, mapAria, generateId } from '../utils';
-import ThemeContext                          from '../Theming/ThemeContext';
-import { createCssMap }                      from '../Theming';
+import { attachEvents, mapAria, generateId }  from '../utils';
+import { useTheme }                           from '../Theming';
 
+const componentName = 'TextArea';
 
-export default class TextArea extends React.Component
+const TextArea = forwardRef( ( props, ref ) =>
 {
-    static contextType = ThemeContext;
+    const cssMap = useTheme( componentName, props );
 
-    static propTypes =
-    {
-        /**
-         *  ARIA properties
-         */
-        aria : PropTypes.objectOf( PropTypes.oneOfType( [
-            PropTypes.bool,
-            PropTypes.number,
-            PropTypes.string,
-        ] ) ),
-        /**
-         *  HTML attribute controlling input auto capitalize
-         */
-        autoCapitalize : PropTypes.oneOf( [
-            'on',
-            'off',
-            'none',
-            'sentences',
-            'words',
-            'characters',
-        ] ),
-        /**
-         *  HTML attribute controlling input auto complete
-         */
-        autoComplete : PropTypes.oneOf( [ 'on', 'off' ] ),
-        /**
-         *  HTML attribute controlling input auto correct (Safari-specific)
-         */
-        autoCorrect  : PropTypes.oneOf( [ 'on', 'off' ] ),
-        /**
-         *  Extra CSS class name
-         */
-        className    : PropTypes.string,
-        /**
-         *  CSS class map
-         */
-        cssMap       : PropTypes.objectOf( PropTypes.string ),
-        /**
-         *  Display as error/invalid
-         */
-        hasError     : PropTypes.bool,
-        /**
-         *  HTML id attribute
-         */
-        id           : PropTypes.string,
-        /**
-         *  Display as disabled
-         */
-        isDisabled   : PropTypes.bool,
-        /**
-         *  Display as read-only
-         */
-        isReadOnly   : PropTypes.bool,
-        /**
-         *  Blur callback function
-         */
-        onBlur       : PropTypes.func,
-        /**
-         *  Input change callback function
-         */
-        onChange     : PropTypes.func,
-        /**
-         *  Input click callback function
-         */
-        onClick      : PropTypes.func,
-        /**
-         *  Focus callback function
-         */
-        onFocus      : PropTypes.func,
-        /**
-         *  Key down callback function
-         */
-        onKeyDown    : PropTypes.func,
-        /**
-         *  Key press callback function
-         */
-        onKeyPress   : PropTypes.func,
-        /**
-         *  Key up callback function
-         */
-        onKeyUp      : PropTypes.func,
-        /**
-         *  Mouse out callback function
-         */
-        onMouseOut   : PropTypes.func,
-        /**
-         *  Mouse over  callback function
-         */
-        onMouseOver  : PropTypes.func,
-        /**
-         *  Placeholder text
-         */
-        placeholder  : PropTypes.string,
-        /**
-         *  TextArea resize handle
-         */
-        resize       : PropTypes.oneOf(
-            [
-                'horizontal',
-                'vertical',
-                'both',
-                'none',
-            ],
-        ),
-        /**
-         *  The visible number of lines in a text area
-         */
-        rows       : PropTypes.number,
-        /**
-         *  HTML attribute controlling input spell check
-         */
-        spellCheck : PropTypes.bool,
-        /**
-         *  Input text alignment
-         */
-        textAlign  : PropTypes.oneOf( [ 'left', 'right' ] ),
-        /**
-         *  Input string value
-         */
-        value      : PropTypes.string,
-    };
+    const textAreaRef = useRef();
 
-    static defaultProps =
-    {
-        aria           : undefined,
-        autoCapitalize : undefined,
-        autoComplete   : undefined,
-        autoCorrect    : undefined,
-        className      : undefined,
-        cssMap         : undefined,
-        hasError       : false,
-        id             : undefined,
-        isDisabled     : false,
-        isReadOnly     : false,
-        onBlur         : undefined,
-        onChange       : undefined,
-        onClick        : undefined,
-        onFocus        : undefined,
-        onKeyDown      : undefined,
-        onKeyPress     : undefined,
-        onKeyUp        : undefined,
-        onMouseOut     : undefined,
-        onMouseOver    : undefined,
-        placeholder    : undefined,
-        resize         : undefined,
-        rows           : 2,
-        spellCheck     : undefined,
-        textAlign      : 'left',
-        value          : '',
-    };
+    useImperativeHandle( ref, () => ( {
+        focus : () => textAreaRef.current.focus(),
+    } ) );
 
-    static displayName = 'TextArea';
+    const {
+        aria,
+        autoCapitalize,
+        autoComplete,
+        autoCorrect,
+        id = generateId( componentName ),
+        isDisabled,
+        isReadOnly,
+        placeholder,
+        rows,
+        spellCheck,
+        value,
+    } = props;
 
-    textAreaRef = React.createRef();
+    return (
+        <textarea
+            { ...mapAria( aria ) }
+            { ...attachEvents( props ) }
+            autoCapitalize = { autoCapitalize }
+            autoComplete   = { autoComplete }
+            autoCorrect    = { autoCorrect }
+            className      = { cssMap.main }
+            disabled       = { isDisabled }
+            id             = { id }
+            placeholder    = { placeholder }
+            readOnly       = { isReadOnly }
+            ref            = { textAreaRef }
+            rows           = { rows }
+            spellCheck     = { spellCheck }
+            value          = { value } />
+    );
+} );
 
-    focus()
-    {
-        this.textAreaRef.current.focus();
-    }
+TextArea.propTypes =
+{
+    /**
+     *  ARIA properties
+     */
+    aria : PropTypes.objectOf( PropTypes.oneOfType( [
+        PropTypes.bool,
+        PropTypes.number,
+        PropTypes.string,
+    ] ) ),
+    /**
+     *  HTML attribute controlling input auto capitalize
+     */
+    autoCapitalize : PropTypes.oneOf( [
+        'on',
+        'off',
+        'none',
+        'sentences',
+        'words',
+        'characters',
+    ] ),
+    /**
+     *  HTML attribute controlling input auto complete
+     */
+    autoComplete : PropTypes.oneOf( [ 'on', 'off' ] ),
+    /**
+     *  HTML attribute controlling input auto correct (Safari-specific)
+     */
+    autoCorrect  : PropTypes.oneOf( [ 'on', 'off' ] ),
+    /**
+     *  Extra CSS class name
+     */
+    className    : PropTypes.string,
+    /**
+     *  CSS class map
+     */
+    cssMap       : PropTypes.objectOf( PropTypes.string ),
+    /**
+     *  Display as error/invalid
+     */
+    hasError     : PropTypes.bool,
+    /**
+     *  HTML id attribute
+     */
+    id           : PropTypes.string,
+    /**
+     *  Display as disabled
+     */
+    isDisabled   : PropTypes.bool,
+    /**
+     *  Display as read-only
+     */
+    isReadOnly   : PropTypes.bool,
+    /**
+     *  Blur callback function
+     */
+    onBlur       : PropTypes.func,
+    /**
+     *  Input change callback function
+     */
+    onChange     : PropTypes.func,
+    /**
+     *  Input click callback function
+     */
+    onClick      : PropTypes.func,
+    /**
+     *  Focus callback function
+     */
+    onFocus      : PropTypes.func,
+    /**
+     *  Key down callback function
+     */
+    onKeyDown    : PropTypes.func,
+    /**
+     *  Key press callback function
+     */
+    onKeyPress   : PropTypes.func,
+    /**
+     *  Key up callback function
+     */
+    onKeyUp      : PropTypes.func,
+    /**
+     *  Mouse out callback function
+     */
+    onMouseOut   : PropTypes.func,
+    /**
+     *  Mouse over  callback function
+     */
+    onMouseOver  : PropTypes.func,
+    /**
+     *  Placeholder text
+     */
+    placeholder  : PropTypes.string,
+    /**
+     *  TextArea resize handle
+     */
+    resize       : PropTypes.oneOf(
+        [
+            'horizontal',
+            'vertical',
+            'both',
+            'none',
+        ],
+    ),
+    /**
+     *  The visible number of lines in a text area
+     */
+    rows       : PropTypes.number,
+    /**
+     *  HTML attribute controlling input spell check
+     */
+    spellCheck : PropTypes.bool,
+    /**
+     *  Input text alignment
+     */
+    textAlign  : PropTypes.oneOf( [ 'left', 'right' ] ),
+    /**
+     *  Input string value
+     */
+    value      : PropTypes.string,
+};
+
+TextArea.defaultProps =
+{
+    aria           : undefined,
+    autoCapitalize : undefined,
+    autoComplete   : undefined,
+    autoCorrect    : undefined,
+    className      : undefined,
+    cssMap         : undefined,
+    hasError       : false,
+    id             : undefined,
+    isDisabled     : false,
+    isReadOnly     : false,
+    onBlur         : undefined,
+    onChange       : undefined,
+    onClick        : undefined,
+    onFocus        : undefined,
+    onKeyDown      : undefined,
+    onKeyPress     : undefined,
+    onKeyUp        : undefined,
+    onMouseOut     : undefined,
+    onMouseOver    : undefined,
+    placeholder    : undefined,
+    resize         : undefined,
+    rows           : 2,
+    spellCheck     : undefined,
+    textAlign      : 'left',
+    value          : '',
+};
 
-    render()
-    {
-        const {
-            aria,
-            autoCapitalize,
-            autoComplete,
-            autoCorrect,
-            cssMap = createCssMap( this.context.TextArea, this.props ),
-            id = generateId( 'TextArea' ),
-            isDisabled,
-            isReadOnly,
-            placeholder,
-            rows,
-            spellCheck,
-            value
-        } = this.props;
+TextArea.displayName = componentName;
 
-        return (
-            <textarea
-                { ...mapAria( aria ) }
-                { ...attachEvents( this.props ) }
-                autoCapitalize = { autoCapitalize }
-                autoComplete   = { autoComplete }
-                autoCorrect    = { autoCorrect }
-                className      = { cssMap.main }
-                disabled       = { isDisabled }
-                id             = { id }
-                placeholder    = { placeholder }
-                readOnly       = { isReadOnly }
-                ref            = { this.textAreaRef }
-                rows           = { rows }
-                spellCheck     = { spellCheck }
-                value          = { value } />
-        );
-    }
-}
+export default TextArea;