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

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

@@ -1,48 +1,43 @@
-define([
+import React from 'react';
-  'react',
-],
-(
-  React
-) => {
-  const FormFieldCheckbox = React.createClass({
-    onValueChange: function onValueChange(e) {
-      e.target.value = this.checkbox.checked ? '1' : '0';
-      return this.props.onValueChange(e);
-    },
-    render: function render() {
-      if (this.props.field.values === undefined) {
-        return false;
-      }
 
-      // isChecked will be true only if the value is "1"
+const FormFieldCheckbox = React.createClass({
-      // it will be false in case value is "0" or empty
+  onValueChange: function onValueChange(e) {
-      const isChecked = !!(Number(this.props.item[this.props.field.name]));
+    e.target.value = this.checkbox.checked ? '1' : '0';
-      const options = Object.keys(this.props.field.values).map(
+    return this.props.onValueChange(e);
-        (value, index) => (
+  },
-          <p key={`checkbox-${index}`}>
+  render: function render() {
-            <label htmlFor={this.props.field.name}>
+    if (this.props.field.values === undefined) {
-              <input
+      return false;
-                ref={(c) => { this.checkbox = c; }}
+    }
-                type="checkbox"
-                value="1"
-                checked={isChecked}
-                onChange={this.onValueChange}
-                name={this.props.field.name}
-                id={this.props.field.name}
-              />
-              { this.props.field.values[value] }
-            </label>
-          </p>
-          )
-      );
 
-      return (
+    // isChecked will be true only if the value is "1"
-        <div>
+    // it will be false in case value is "0" or empty
-          { options }
+    const isChecked = !!(Number(this.props.item[this.props.field.name]));
-        </div>
+    const options = Object.keys(this.props.field.values).map(
-      );
+      value => (
-    },
+        <p key={`checkbox-${value}`}>
-  });
+          <label htmlFor={this.props.field.name}>
+            <input
+              ref={(c) => { this.checkbox = c; }}
+              type="checkbox"
+              value="1"
+              checked={isChecked}
+              onChange={this.onValueChange}
+              name={this.props.field.name}
+              id={this.props.field.name}
+            />
+            { this.props.field.values[value] }
+          </label>
+        </p>
+        )
+    );
 
-  return FormFieldCheckbox;
+    return (
+      <div>
+        { options }
+      </div>
+    );
+  },
 });
+
+export default FormFieldCheckbox;