Added textarea edit field

src/components/AddCrudItem/index.js

@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import Field from 'components/Field';
+
 function getEmptyValue(type) {
-    if (type === 'text') {
+    if (type === 'text' || type === 'textarea') {
         return '';
     }
     if (type === 'number') {
@@ -52,7 +54,7 @@ export default class AddCrudItem extends Component {
         } = this.props;
 
         const fields = Object.keys(docFields).map(key => (
-            <input key={key}
+            <Field key={key}
                 type={docFields[key].type}
                 value={this.state[key]}
                 onChange={this.onFieldChange[key]}

src/components/CrudField/index.js

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import Field from 'components/Field';
+
 import './style.scss';
 
 export default class CrudField extends Component {
@@ -61,7 +63,7 @@ export default class CrudField extends Component {
 
         if (this.state.editing) {
             return (
-                <input className="crud-field editing"
+                <Field className="crud-field editing"
                     disabled={pending}
                     type={type}
                     value={this.state.editValue}

src/components/Field/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function Field({ type, ...props }) {
+    if (type === 'number') {
+        return (
+            <input type="number" {...props} />
+        );
+    }
+
+    if (type === 'textarea') {
+        return (
+            <textarea {...props} />
+        );
+    }
+
+    return (
+        <input type="text" {...props} />
+    );
+}
+
+Field.propTypes = {
+    type: PropTypes.string.isRequired
+};
+

src/components/PhraseAdmin/index.js

@@ -4,7 +4,7 @@ import CrudList from 'containers/CrudList';
 
 const PHRASE_FIELDS = {
     phrase: {
-        type: 'text'
+        type: 'textarea'
     }
 };