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);

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Range } from "rc-slider";
+import { optionchangewrapper } from "utils/optionchangewrapper";
+import "rc-slider/assets/index.css";
+
+class RangeWrapper extends React.Component {
+  handleRangeChange = ([min, max] = this.props.defaultValues) => {
+    this.inputMin.value = min;
+    this.inputMax.value = max;
+    const { onOptionChanged, optionName } = this.props;
+    onOptionChanged({
+      optionName,
+      optionValue: [min, max]
+    });
+  };
+
+  handleInputChange = () => {
+    const { onOptionChanged, optionName } = this.props;
+    onOptionChanged({
+      optionName,
+      optionValue: [this.inputMin.value, this.inputMax.value]
+    });
+  };
+
+  render() {
+    const { step, defaultValues, min, max } = this.props;
+    return (
+      <div>
+        <Range
+          min={min}
+          max={max}
+          defaultValue={defaultValues}
+          step={step}
+          onAfterChange={this.handleRangeChange}
+        />
+        <input
+          ref={node => {
+            this.inputMin = node;
+          }}
+          onChange={this.handleInputChange}
+        />
+        <input
+          ref={node => {
+            this.inputMax = node;
+          }}
+          onChange={this.handleInputChange}
+        />
+      </div>
+    );
+  }
+}
+export default optionchangewrapper(RangeWrapper);

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

@@ -0,0 +1,25 @@
+import React from "react";
+import Select from "react-select";
+import { optionchangewrapper } from "utils/optionchangewrapper";
+
+class SelectWrapper extends React.Component {
+  handleOptionChange = selectedOption => {
+    const { onOptionChanged, optionName } = this.props;
+    onOptionChanged({
+      optionName,
+      optionValue: selectedOption
+    });
+  };
+
+  render() {
+    let { value, options, choices } = this.props;
+    return (
+      <Select
+        value={options[value]}
+        onChange={this.handleOptionChange}
+        options={choices}
+      />
+    );
+  }
+}
+export default optionchangewrapper(SelectWrapper);