ES6 assets/js/src/form/fields/field.jsx

assets/js/src/form/fields/field.jsx

@@ -1,132 +1,119 @@
-define([
+import React from 'react';
-  'react',
+import FormFieldText from 'form/fields/text.jsx';
-  'form/fields/text.jsx',
+import FormFieldTextarea from 'form/fields/textarea.jsx';
-  'form/fields/textarea.jsx',
+import FormFieldSelect from 'form/fields/select.jsx';
-  'form/fields/select.jsx',
+import FormFieldRadio from 'form/fields/radio.jsx';
-  'form/fields/radio.jsx',
+import FormFieldCheckbox from 'form/fields/checkbox.jsx';
-  'form/fields/checkbox.jsx',
+import FormFieldSelection from 'form/fields/selection.jsx';
-  'form/fields/selection.jsx',
+import FormFieldDate from 'form/fields/date.jsx';
-  'form/fields/date.jsx',
+import jQuery from 'jquery';
-  'jquery',
-],
-(
-  React,
-  FormFieldText,
-  FormFieldTextarea,
-  FormFieldSelect,
-  FormFieldRadio,
-  FormFieldCheckbox,
-  FormFieldSelection,
-  FormFieldDate,
-  jQuery
-) => {
-  const FormField = React.createClass({
-    renderField: function renderField(data, inline = false) {
-      let description = false;
-      if (data.field.description) {
-        description = (
-          <p className="description">{ data.field.description }</p>
-        );
-      }
 
-      let field = false;
+const FormField = React.createClass({
-      let dataField = data.field;
+  renderField: function renderField(data, inline = false) {
+    let description = false;
+    if (data.field.description) {
+      description = (
+        <p className="description">{ data.field.description }</p>
+      );
+    }
 
-      if (data.field.field !== undefined) {
+    let field = false;
-        dataField = jQuery.merge(dataField, data.field.field);
+    let dataField = data.field;
-      }
 
-      switch (dataField.type) {
+    if (data.field.field !== undefined) {
-        case 'text':
+      dataField = jQuery.merge(dataField, data.field.field);
-          field = (<FormFieldText {...data} />);
+    }
-          break;
 
-        case 'textarea':
+    switch (dataField.type) {
-          field = (<FormFieldTextarea {...data} />);
+      case 'text':
-          break;
+        field = (<FormFieldText {...data} />);
+        break;
 
-        case 'select':
+      case 'textarea':
-          field = (<FormFieldSelect {...data} />);
+        field = (<FormFieldTextarea {...data} />);
-          break;
+        break;
 
-        case 'radio':
+      case 'select':
-          field = (<FormFieldRadio {...data} />);
+        field = (<FormFieldSelect {...data} />);
-          break;
+        break;
 
-        case 'checkbox':
+      case 'radio':
-          field = (<FormFieldCheckbox {...data} />);
+        field = (<FormFieldRadio {...data} />);
-          break;
+        break;
 
-        case 'selection':
+      case 'checkbox':
-          field = (<FormFieldSelection {...data} />);
+        field = (<FormFieldCheckbox {...data} />);
-          break;
+        break;
 
-        case 'date':
+      case 'selection':
-          field = (<FormFieldDate {...data} />);
+        field = (<FormFieldSelection {...data} />);
-          break;
+        break;
 
-        case 'reactComponent':
+      case 'date':
-          field = (<data.field.component {...data} />);
+        field = (<FormFieldDate {...data} />);
-          break;
+        break;
 
-        default:
+      case 'reactComponent':
-          field = 'invalid';
+        field = (<data.field.component {...data} />);
-          break;
+        break;
-      }
 
-      if (inline === true) {
+      default:
-        return (
+        field = 'invalid';
-          <span key={`field-${data.index || 0}`}>
+        break;
-            { field }
+    }
-            { description }
+
-          </span>
+    if (inline === true) {
-        );
-      }
       return (
-        <div key={`field-${data.index || 0}`}>
+        <span key={`field-${data.index || 0}`}>
           { field }
           { description }
-        </div>
+        </span>
       );
-    },
+    }
-    render: function render() {
+    return (
-      let field = false;
+      <div key={`field-${data.index || 0}`}>
+        { field }
+        { description }
+      </div>
+    );
+  },
+  render: function render() {
+    let field = false;
 
-      if (this.props.field.fields !== undefined) {
+    if (this.props.field.fields !== undefined) {
-        field = this.props.field.fields.map((subfield, index) => this.renderField({
+      field = this.props.field.fields.map((subfield, index) => this.renderField({
-          index,
+        index,
-          field: subfield,
+        field: subfield,
-          item: this.props.item,
+        item: this.props.item,
-          onValueChange: this.props.onValueChange || false,
+        onValueChange: this.props.onValueChange || false,
-        }));
+      }));
-      } else {
+    } else {
-        field = this.renderField(this.props);
+      field = this.renderField(this.props);
-      }
+    }
 
-      let tip = false;
+    let tip = false;
-      if (this.props.field.tip) {
+    if (this.props.field.tip) {
-        tip = (
+      tip = (
-          <p className="description">{ this.props.field.tip }</p>
+        <p className="description">{ this.props.field.tip }</p>
-        );
-      }
-
-      return (
-        <tr className={`form-field-row-${this.props.field.name}`}>
-          <th scope="row">
-            <label
-              htmlFor={`field_${this.props.field.name}`}
-            >
-              { this.props.field.label }
-              { tip }
-            </label>
-          </th>
-          <td>
-            { field }
-          </td>
-        </tr>
       );
-    },
+    }
-  });
 
-  return FormField;
+    return (
+      <tr className={`form-field-row-${this.props.field.name}`}>
+        <th scope="row">
+          <label
+            htmlFor={`field_${this.props.field.name}`}
+          >
+            { this.props.field.label }
+            { tip }
+          </label>
+        </th>
+        <td>
+          { field }
+        </td>
+      </tr>
+    );
+  },
 });
+
+export default FormField;