converts textarea to new formatting

src/client/components/forms/Form/index.js

@@ -43,8 +43,6 @@ const Form = (props) => {
     disableSuccessStatus,
   } = props;
 
-  console.log(fields);
-
   const submit = (e) => {
     setSubmitted(true);
 

src/client/components/forms/field-types/Textarea/index.js

@@ -1,70 +1,87 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import fieldType from '../../fieldType';
+import useFieldType from '../../useFieldType';
+import Label from '../../Label';
+import Error from '../../Error';
 
 import './index.scss';
 
-const errorMessage = 'Please fill in the textarea';
-
-const validate = value => value.length > 0;
+const defaultError = 'Please fill in the field';
+const defaultValidate = value => value.length > 0;
 
 const Textarea = (props) => {
   const {
-    className,
-    style,
-    error,
-    label,
-    value,
-    onChange,
-    disabled,
-    placeholder,
-    id,
     name,
+    required,
+    defaultValue,
+    valueOverride,
+    validate,
+    style,
+    width,
+    errorMessage,
+    label,
+    placeholder,
   } = props;
 
+  const {
+    value,
+    showError,
+    onChange,
+    formProcessing,
+  } = useFieldType({
+    name,
+    required,
+    defaultValue,
+    valueOverride,
+    validate,
+  });
+
+  const classes = [
+    'field-type',
+    'textarea',
+    showError && 'error',
+  ].filter(Boolean).join(' ');
+
   return (
-    <div
-      className={className}
-      style={style}
-    >
-      {error}
-      {label}
+    <div className={classes} style={{
+      ...style,
+      width: width ? `${width}%` : null
+    }}>
+      <Error showError={showError} message={errorMessage} />
+      <Label htmlFor={name} label={label} required={required} />
       <textarea
         value={value || ''}
         onChange={onChange}
-        disabled={disabled}
+        disabled={formProcessing ? 'disabled' : undefined}
         placeholder={placeholder}
-        id={id || name}
+        id={name}
         name={name}
       />
     </div>
   );
-};
+}
 
 Textarea.defaultProps = {
-  className: null,
-  style: {},
-  error: null,
   label: null,
-  value: '',
-  onChange: null,
-  disabled: null,
-  placeholder: null,
-  id: null,
-  name: 'textarea',
-};
+  required: false,
+  processing: false,
+  defaultValue: null,
+  validate: defaultValidate,
+  errorMessage: defaultError,
+  width: 100,
+  style: {},
+}
 
 Textarea.propTypes = {
-  className: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  defaultValue: PropTypes.string,
+  defaultValidate: PropTypes.func,
+  errorMessage: PropTypes.string,
+  width: PropTypes.number,
   style: PropTypes.shape({}),
-  error: PropTypes.node,
-  label: PropTypes.node,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  disabled: PropTypes.string,
-  placeholder: PropTypes.string,
-  id: PropTypes.string,
-  name: PropTypes.string,
-};
+  processing: PropTypes.bool,
+  label: PropTypes.string,
+}
 
-export default fieldType(Textarea, 'textarea', validate, errorMessage);
+export default Textarea;

src/client/components/forms/field-types/index.js

@@ -1,21 +1,21 @@
-// import email from './Email';
-// import group from './Group';
+import email from './Email';
+import group from './Group';
 import hidden from './HiddenInput';
 import input from './Input';
 // import upload from './Upload';
-// import password from './Password';
-// import repeater from './Repeater';
-// import textarea from './Textarea';
+import password from './Password';
+import repeater from './Repeater';
+import textarea from './Textarea';
 import select from './Select';
 
 export default {
-  // email,
-  // group,
+  email,
+  group,
   hidden,
   input,
   // upload,
-  // password,
-  // repeater,
-  // textarea,
+  password,
+  repeater,
+  textarea,
   select,
 };