basic frontend demo with react and redux

frontend-react/src/components/widgets/CheckboxAndRadioWrapper.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { optionchangewrapper } from "utils/optionchangewrapper";
+
+class CheckboxAndRadioWrapper extends React.Component {
+  optionChange = (option, optionName, type) => {
+    const optionTypePicker = {
+      radio: option.target.value,
+      checkbox: option.target.checked
+    };
+    const { onOptionChanged } = this.props;
+    onOptionChanged({
+      optionName,
+      optionValue: optionTypePicker[type]
+    });
+  };
+  isChecked = (type, value, optionName) => {
+    const { options } = this.props;
+    return type === "checkbox"
+      ? value
+      : options.hasOwnProperty(optionName) &&
+          options[optionName] === String(value);
+  };
+  renderElements = (elements, componentName) => {
+    return elements.map(({ type, value, name, optionName } = {}) => (
+      <label key={name + type}>
+        <input
+          name={type === "radio" ? `${componentName}-radio` : ""}
+          type={type}
+          value={value}
+          checked={this.isChecked(type, value, optionName)}
+          onChange={option => this.optionChange(option, optionName, type)}
+        />
+        {name}
+      </label>
+    ));
+  };
+
+  render() {
+    const { elements, componentName } = this.props;
+    return (
+      <div>
+        <span>{componentName}</span>
+        {this.renderElements(elements, componentName)}
+      </div>
+    );
+  }
+}
+export default optionchangewrapper(CheckboxAndRadioWrapper);