Add custom textarea component

Nelson Menezes · Nelson Menezes · commit c5e8cd69f447 · 2017-02-27T12:25:23.000+01:00
diff --git a/lib/src/components/CustomInput/CustomInput.jsx b/lib/src/components/CustomInput/CustomInput.jsx
@@ -5,7 +5,6 @@ import rules from './../../rules';
 import Base from './../Base/Base';
 
 export const makeCustomInput = function(WrappedComponent) {
-
     class CustomInput extends Base {
         static propTypes = {
             validations: PropTypes.arrayOf(PropTypes.string).isRequired,
diff --git a/lib/src/components/CustomTextarea/CustomTextarea.jsx b/lib/src/components/CustomTextarea/CustomTextarea.jsx
@@ -0,0 +1,82 @@
+import React, { PropTypes, createElement } from 'react';
+import hoistStatics from 'hoist-non-react-statics';
+import cx from 'classnames';
+import rules from './../../rules';
+import Base from './../Base/Base';
+
+export function makeCustomTextarea(WrappedComponent) {
+    class CustomTextarea extends Base {
+        static propTypes = {
+            validations: PropTypes.arrayOf(PropTypes.string).isRequired,
+            errorClassName: PropTypes.string,
+            containerClassName: PropTypes.string,
+            errorContainerClassName: PropTypes.string
+        };
+
+        static contextTypes = {
+            register: PropTypes.func.isRequired,
+            unregister: PropTypes.func.isRequired,
+            validateState: PropTypes.func.isRequired,
+            components: PropTypes.objectOf(PropTypes.any),
+            errors: PropTypes.objectOf(PropTypes.array)
+        };
+
+        constructor(props, context) {
+            super(props, context);
+
+            this.state = {
+                value: props.value,
+                isChanged: !!props.value,
+                isUsed: false,
+                isChecked: true
+            };
+
+            context.register(this);
+        }
+
+        render() {
+            const {
+                /* eslint-disable */
+                validations,
+                /* eslint-enable */
+                errorClassName,
+                containerClassName,
+                errorContainerClassName,
+                className,
+                value,
+                onChange,
+                onBlur,
+                ...rest } = this.props;
+            // TODO: Refactor conditions
+            const isInvalid = this.state.isUsed &&
+                this.state.isChanged &&
+                !!this.context.errors[this.props.name];
+            const error = isInvalid && this.context.errors[this.props.name][0];
+            let hint = null;
+
+            if (isInvalid) {
+                hint = typeof error === 'function' ? error(this.state.value, this.context.components) : rules[error].hint(this.state.value, this.context.components);
+            }
+
+            const wrappedProps = {
+                containerClassName: cx({
+                    [containerClassName]: !!containerClassName,
+                    [errorContainerClassName]: !!error && errorContainerClassName
+                }),
+                className: cx({
+                    [className]: !!className,
+                    [errorClassName]: !!error && errorClassName
+                }),
+                onChange: this.onChange,
+                onBlur: this.onBlur,
+                value: this.state.value,
+                hint,
+                ...rest
+            };
+
+            return createElement(WrappedComponent, wrappedProps);
+        }
+    }
+
+    return hoistStatics(CustomTextarea, WrappedComponent);
+}
diff --git a/lib/src/components/Textarea/Textarea.jsx b/lib/src/components/Textarea/Textarea.jsx
@@ -1,77 +1,21 @@
 import React, { PropTypes } from 'react';
-import cx from 'classnames';
-import rules from './../../rules';
-import Base from './../Base/Base';
-
-export default class Textarea extends Base {
-    static propTypes = {
-        validations: PropTypes.arrayOf(PropTypes.string).isRequired,
-        errorClassName: PropTypes.string,
-        containerClassName: PropTypes.string,
-        errorContainerClassName: PropTypes.string
-    };
-
-    static contextTypes = {
-        register: PropTypes.func.isRequired,
-        unregister: PropTypes.func.isRequired,
-        validateState: PropTypes.func.isRequired,
-        components: PropTypes.objectOf(PropTypes.any),
-        errors: PropTypes.objectOf(PropTypes.array)
-    };
-
-    constructor(props, context) {
-        super(props, context);
-
-        this.state = {
-            value: props.value,
-            isChanged: !!props.value,
-            isUsed: false,
-            isChecked: true
-        };
-
-        context.register(this);
-    }
+import { makeCustomTextarea } from './../CustomTextarea/CustomTextarea';
 
+export default makeCustomTextarea(React.createClass({
     render() {
-        const {
-            /* eslint-disable */
-            validations,
-            /* eslint-enable */
-            errorClassName,
-            containerClassName,
-            errorContainerClassName,
-            className,
-            ...rest } = this.props;
-        // TODO: Refactor conditions
-        const isInvalid = this.state.isUsed &&
-            this.state.isChanged &&
-            !!this.context.errors[this.props.name];
-        const error = isInvalid && this.context.errors[this.props.name][0];
-        let hint = null;
-
-        if (isInvalid) {
-            hint = typeof error === 'function' ? error(this.state.value, this.context.components) : rules[error].hint(this.state.value, this.context.components);
-        }
+        const { containerClassName, hint, ...rest } = this.props;
 
         return (
-            <div
-              className={cx({
-                  [containerClassName]: !!containerClassName,
-                  [errorContainerClassName]: !!error && errorContainerClassName
-              })}
-            >
+            <div className={containerClassName}>
                 <textarea
-                  {...rest}
-                  className={cx({
-                      [className]: !!className,
-                      [errorClassName]: !!error && errorClassName
-                  })}
-                  onChange={this.onChange}
-                  onBlur={this.onBlur}
-                  value={this.state.value}
-                />
+                    {...rest}
+                    className={this.props.className}
+                    onChange={this.props.onChange}
+                    onBlur={this.props.onBlur}
+                    value={this.props.value}
+                    />
                 {hint}
             </div>
-        );
+        )
     }
-}
+}));
