Merged in feature/custom-form-elements (pull request #11)

Feature/custom form elements

Approved-by: Alex Smith <alex.smith@mubaloo.com>

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,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import Field from 'components/Field';
+import FieldView from 'components/FieldView';
+
 import './style.scss';
 
 export default class CrudField extends Component {
@@ -61,7 +64,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}
@@ -74,10 +77,12 @@ export default class CrudField extends Component {
         const className = classNames('crud-field', { pending });
 
         return (
-            <span className={className}
+            <FieldView
+                type={type}
+                value={value}
+                className={className}
                 onClick={this.onEditStart}
-
-            >{value}</span>
+            />
         );
     }
 }

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/FieldView/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function FieldView({ type, value, ...props }) {
+    if (type === 'textarea') {
+        return (
+            <pre {...props}>
+                {value}
+            </pre>
+        );
+    }
+
+    return (
+        <span {...props}>
+            {value}
+        </span>
+    );
+}
+
+FieldView.propTypes = {
+    value: PropTypes.any,
+    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'
     }
 };
 

webpack.config.js

@@ -53,6 +53,7 @@ function getPlugins() {
     if (__DEV__) {
         return [
             ...common,
+            new webpack.HotModuleReplacementPlugin(),
             new Dotenv()
         ];
     }
@@ -71,6 +72,8 @@ function getEntry() {
 
     if (__DEV__) {
         return [
+            'webpack/hot/only-dev-server',
+            'webpack-hot-middleware/client?reload=true',
             'react-hot-loader/patch',
             ...common
         ];