Support React form fields

src/Classes/MyRadio/MyRadioForm.php

@@ -318,6 +318,16 @@ public function render($frmcustom = [])
             $captcha = null;
         }
 
+        // If we're using a React field, load in the prerequisites
+        $hasReact = !empty(array_filter(/**
+         * @param MyRadioFormField $field
+         * @return boolean
+         */            $this->fields,
+            function ($field) {
+                return $field->getType() === MyRadioFormField::TYPE_REACT;
+            }
+        ));
+
         $fields = [];
         $redact = [];
         foreach ($this->fields as $field) {
@@ -346,6 +356,22 @@ public function render($frmcustom = [])
                 ->addVariable('redact', $redact)
                 ->addVariable('captcha', $captcha)
                 ->addVariable('frm_custom', $frmcustom);
+
+        if ($hasReact) {
+            $reactComponentFields = [];
+            foreach ($fields as $field) {
+                if ($field['type'] !== MyRadioFormField::TYPE_REACT) {
+                    continue;
+                }
+                $componentType = $field['options']['component'];
+                if (!isset($reactComponentFields[$componentType])) {
+                    $reactComponentFields[$componentType] = [];
+                }
+                $reactComponentFields[$componentType][] = $field;
+            }
+            $twig = $twig->addVariable('react', $reactComponentFields);
+        }
+
         $twig->render();
     }
 

src/Classes/MyRadio/MyRadioFormField.php

@@ -252,6 +252,22 @@ class MyRadioFormField
      */
     const TYPE_SECTION_CLOSE = 0x16;
 
+    /**
+     * The constant used to specify this MyRadioFormField is a custom React component.
+     *
+     * It takes the following custom options:
+     * * component - the name of the component to render
+     *  (must be default export of a file called "Public/js/myradio.form.react.{component|lowercase}.js)
+     *
+     * The component is imported from the above file, and rendered with the following props:
+     * * formName: the name of the form
+     * * field: the output of $this->render(), JSON-encoded
+     *
+     * It should render an <input type="hidden" name={formName + "-" + field.name} value={JSON.stringify(value)} />
+     * (in other words, a input named the same as all other field inputs, with the field's value JSON-encoded).
+     */
+    const TYPE_REACT = 0x17;
+
     /**
      * The name/id of the Form Field.
      *
@@ -602,6 +618,7 @@ public function render()
      * @return mixed The submitted field value
      *
      * @throws MyRadioException if the field type does not have a valid read handler
+     * @throws \JsonException if the React field type returns invalid JSON
      *
      * @todo   Verify all returns deal with repeated elements correctly
      */
@@ -843,6 +860,9 @@ public function readValue($prefix)
 
                 return $times;
                 break;
+            case self::TYPE_REACT:
+                // React fields should dump in JSON
+                return json_decode($_REQUEST[$name], true, 512, JSON_THROW_ON_ERROR);
             default:
                 throw new MyRadioException(
                     'Field type ' . $this->type . ' does not have a valid value interpreter definition.'