Changing description fields to text areas in plant term groups form.

Author: krulis-martin

src/components/forms/PlantTermGroupsForm/PlantTermGroupsForm.js

@@ -7,7 +7,7 @@ import { lruMemoize } from 'reselect';
 
 import Icon, { CloseIcon } from '../../icons';
 import Button, { TheButtonGroup } from '../../widgets/TheButton';
-import { TextField } from '../fields';
+import { TextField, TextAreaField } from '../fields';
 
 const validate = values => {
   const errors = { cs: {}, en: {} };
@@ -79,7 +79,7 @@ const PlantTermGroupsForm = ({ initialValues, onSubmit, onClose }) => {
               />
 
               <Field
-                component={TextField}
+                component={TextAreaField}
                 name="cs.description"
                 ignoreDirty
                 maxLength={255}
@@ -112,7 +112,7 @@ const PlantTermGroupsForm = ({ initialValues, onSubmit, onClose }) => {
               />
 
               <Field
-                component={TextField}
+                component={TextAreaField}
                 name="en.description"
                 ignoreDirty
                 maxLength={255}

src/components/forms/fields/TextAreaField.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormControl, FormLabel } from 'react-bootstrap';
+import classnames from 'classnames';
+
+import * as styles from './commonStyles.less';
+
+const TextAreaField = ({
+  input,
+  meta: { active, dirty, error, warning },
+  type = 'text',
+  label = null,
+  children,
+  ignoreDirty = false,
+  className = '',
+  ...props
+}) => (
+  <>
+    {Boolean(label) && (
+      <FormLabel className={error ? 'text-danger' : warning ? 'text-warning' : undefined}>{label}</FormLabel>
+    )}
+    <FormControl
+      {...input}
+      {...props}
+      as="textarea"
+      rows={8}
+      isInvalid={Boolean(error)}
+      className={
+        classnames({
+          'form-control': true,
+          [styles.dirty]: dirty && !ignoreDirty && !error && !warning,
+          [styles.active]: active,
+          'border-danger': error,
+          'border-warning': !error && warning,
+        }) +
+        ' ' +
+        (className || '')
+      }
+    />
+    {error && <Form.Text className="text-danger"> {error} </Form.Text>}
+    {!error && warning && <Form.Text className="text-warning"> {warning} </Form.Text>}
+    {children}
+  </>
+);
+
+TextAreaField.propTypes = {
+  type: PropTypes.string,
+  input: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  children: PropTypes.any,
+  meta: PropTypes.shape({
+    active: PropTypes.bool,
+    dirty: PropTypes.bool,
+    error: PropTypes.any,
+    warning: PropTypes.any,
+  }).isRequired,
+  ignoreDirty: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default TextAreaField;

src/components/forms/fields/index.js

@@ -4,3 +4,4 @@ export { default as NumericTextField } from './NumericTextField.js';
 export { default as SelectField } from './SelectField.js';
 export { default as StandaloneRadioField } from './StandaloneRadioField.js';
 export { default as TextField } from './TextField.js';
+export { default as TextAreaField } from './TextAreaField.js';

src/locales/cs.json

@@ -255,4 +255,4 @@
   "generic.operationFailed": "Operace selhala",
   "generic.reset": "Resetovat",
   "generic.save": "Uložit"
-}
+}