fix: AU-2085: react preview values (#1152)

* AU-2085: initial commit

* AU-2085: wip

* AU-2085: wip

* AU-2085: merge

* AU-2085: fix

public/modules/custom/react_form/js/dist/main.min.js.LICENSE.txt

@@ -1,26 +1,31 @@
-/**
- * @license React
- * react-dom.production.min.js
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/** @license React v0.20.2
+ * scheduler.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * @license React
- * react.production.min.js
+/** @license React v17.0.2
+ * react-dom.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * @license React
- * scheduler.production.min.js
+/** @license React v17.0.2
+ * react.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *

public/modules/custom/react_form/js/src/GrantsForm.jsx

@@ -10,13 +10,7 @@ import {
 } from "hds-react";
 import axios from "axios";
 import React, {useReducer} from "react";
-import GrantsTextArea from "./GrantsTextArea";
-import GrantsTextInput from "./GrantsTextInput";
-import GrantsRadios from "./GrantsRadios";
-import GrantsAttachments from "./GrantsAttachments";
-import GrantsSelect from "./GrantsSelect";
-import parse from "html-react-parser";
-import PreviewPage from "./PreviewPage";
+import ProcessForm from "./ProcessForm";
 
 const GrantsForm = (props) => {
   const webForm = props.webform;
@@ -25,9 +19,9 @@ const GrantsForm = (props) => {
   const [webformArray, setWebformArray] = React.useState(false);
 
   function submitForm() {
-    console.log(webformArray);
     alert('Form Submit function called, see your console.log');
   }
+
   const commonReducer = (stepsTotal) => (state, action) => {
     switch (action.type) {
       case 'completeStep': {
@@ -72,14 +66,16 @@ const GrantsForm = (props) => {
         throw new Error();
     }
   };
-  const steppes = Object.keys(webForm).map(function(key) {
-    if((webForm[key]['#type'] ? webForm[key]['#type'] : '') === 'webform_wizard_page') {
+  const steppes = Object.keys(webForm).map(function (key) {
+    if ((webForm[key]['#type'] ? webForm[key]['#type'] : '') === 'webform_wizard_page') {
       return {
         label: webForm[key]['#title'],
         state: StepState.available,
       }
     } else return;
-  }).filter(function(x) { return x !== undefined; });
+  }).filter(function (x) {
+    return x !== undefined;
+  });
   steppes.push({
       label: 'Esikatselu',
       state: StepState.available,
@@ -93,45 +89,41 @@ const GrantsForm = (props) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const lastStep = state.activeStepIndex === state.steps.length - 1;
 
-  const keys = Object.keys(webForm).map(function(key) {
-    return analyseArray(webForm[key], key, [])
-  });
- keys.push(
-   <div
-     key='aa'
-     style={{ display: (state.steps[state.activeStepIndex].label == 'Esikatselu' ? 'block' : 'none') }}
-   >
-     <h2>Title</h2>
-     <PreviewPage webform={webformArray}/>
-   </div>
- )
-
   function handleWebformChange(childKeys, childValue) {
     let tempFormArray = (webformArray === false) ? webForm : webformArray;
     let depth = childKeys.length;
+    console.log(tempFormArray);
+    console.log('depth. ' + depth)
     if (depth == 2) {
       tempFormArray[childKeys[0]][childKeys[1]]['#value'] = childValue;
     } else if (depth == 3) {
       tempFormArray[childKeys[0]][childKeys[1]][childKeys[2]]['#value'] = childValue;
+    } else if (depth == 4) {
+      tempFormArray[childKeys[0]][childKeys[1]][childKeys[2]][childKeys[3]]['#value'] = childValue;
+    } else if (depth == 5) {
+      tempFormArray[childKeys[0]][childKeys[1]][childKeys[2]][childKeys[3]][childKeys[4]]['#value'] = childValue;
     }
-    console.log(tempFormArray)
     setWebformArray(tempFormArray);
   }
+
   async function sendDataAsDraft() {
     const response =
     await axios.patch('kasko_ip_lisa/app_nro123');
     setShowNotification(true);
     setIsLoading(false);
     console.log(response.data)
   }
+
   return (
     <div key="ReactApp" id="ReactApp">
-      <form onSubmit={() => {submitForm()}}>
+      <form onSubmit={() => {
+        submitForm()
+      }}>
         <Stepper
           steps={state.steps}
           language="en"
           selectedStep={state.activeStepIndex}
-          onStepClick={(event, stepIndex) => dispatch({ type: 'setActive', payload: stepIndex })}
+          onStepClick={(event, stepIndex) => dispatch({type: 'setActive', payload: stepIndex})}
           theme={{
             '--hds-not-selected-step-label-color': 'var(--color-black-90)',
             '--hds-step-background-color': 'var(--color-white)',
@@ -143,7 +135,13 @@ const GrantsForm = (props) => {
           }}
         />
         <div>
-          { keys }
+          <ProcessForm
+            webformArray={webformArray}
+            webForm={webForm}
+            state={state}
+            handleWebformChange={handleWebformChange}
+          />
+
         </div>
         <div
           style={{
@@ -156,9 +154,9 @@ const GrantsForm = (props) => {
           <Button
             disabled={state.activeStepIndex === 0}
             variant="secondary"
-            onClick={() => dispatch({ type: 'setActive', payload: state.activeStepIndex - 1 })}
-            style={{ height: 'fit-content', width: 'fit-content' }}
-            iconLeft={<IconArrowLeft />}
+            onClick={() => dispatch({type: 'setActive', payload: state.activeStepIndex - 1})}
+            style={{height: 'fit-content', width: 'fit-content'}}
+            iconLeft={<IconArrowLeft/>}
             theme="black"
           >
             Previous
@@ -167,10 +165,12 @@ const GrantsForm = (props) => {
             variant={lastStep ? 'primary' : 'secondary'}
             onClick={
               lastStep ?
-                () => {submitForm()} :
-                () => dispatch({ type: 'completeStep', payload: state.activeStepIndex })}
-            style={{ height: 'fit-content', width: 'fit-content' }}
-            iconRight={lastStep ? undefined : <IconArrowRight />}
+                () => {
+                  submitForm()
+                } :
+                () => dispatch({type: 'completeStep', payload: state.activeStepIndex})}
+            style={{height: 'fit-content', width: 'fit-content'}}
+            iconRight={lastStep ? undefined : <IconArrowRight/>}
             type={lastStep ? 'submit' : 'button'}
             theme="black"
           >
@@ -182,7 +182,7 @@ const GrantsForm = (props) => {
               isLoading={isLoading}
               variant="supplementary"
               theme="black"
-              iconLeft={<IconUploadCloud />}
+              iconLeft={<IconUploadCloud/>}
               loadingText={Drupal.t("Saving form changes")}
               onClick={async () => {
                 setShowNotification(false);
@@ -213,151 +213,5 @@ const GrantsForm = (props) => {
       </form>
     </div>
   );
-  function analyseArray(analysedArray, key, keyArray) {
-    let tempArray = [];
-    tempArray = tempArray.concat(keyArray);
-    tempArray = tempArray.concat(key);
-    if (analysedArray['#type'] === 'webform_wizard_page') {
-      return (
-        <div
-          key={key}
-          style={{ display: (state.steps[state.activeStepIndex].label == analysedArray['#title'] ? 'block' : 'none') }}
-        >
-          <h2>{analysedArray['#title']}</h2>
-          {
-            Object.keys(analysedArray).map(function(arrayKey) {
-              return (
-                analyseArray(analysedArray[arrayKey], arrayKey, tempArray)
-              )
-            })
-          }
-        </div>
-      );
-    } else if (analysedArray['#type'] === 'webform_section') {
-      return (
-        <div className="js-webform-states-hidden js-form-item form-item js-form-wrapper form-wrapper"
-                 key={key}
-        >
-          <div className="react-form-section">
-            <h3 className="webform-section-title">{analysedArray['#title']}</h3>
-            <div className="webform-section-wrapper">
-              {
-                Object.keys(analysedArray).map(function(arrayKey) {
-                  return (
-                    analyseArray(analysedArray[arrayKey], arrayKey, tempArray)
-                  )
-                })
-              }
-            </div>
-          </div>
-        </div>
-      );
-    } else if (analysedArray['#type'] === 'webform_custom_composite') {
-      return (
-        <Fieldset heading={analysedArray['#title']}
-                  key={key}
-                  border
-                  id={key}>
-          {
-            Object.keys(analysedArray['#element']).map(function(arrayKey) {
-              return (
-                analyseArray(analysedArray['#element'][arrayKey], arrayKey, tempArray)
-              )
-            })
-          }
-        </Fieldset>
-      );
-    } else if (analysedArray['#type'] === 'grants_attachments') {
-      return <GrantsAttachments
-        key={key}
-        id={key}
-        inputArray={analysedArray}
-      />
-    } else if (analysedArray['#type'] === 'textarea') {
-      return <GrantsTextArea
-        key={key}
-        id={key}
-        callbackKey={tempArray}
-        updatedValueCallback={handleWebformChange}
-        inputArray={analysedArray}
-      />
-    } else if (analysedArray['#type'] === 'email') {
-      return <GrantsTextInput
-        key={key}
-        id={key}
-        callbackKey={tempArray}
-        updatedValueCallback={handleWebformChange}
-        inputArray={analysedArray}
-      />
-    } else if (analysedArray['#type'] === 'radios') {
-      return <GrantsRadios
-        key={key}
-        id={key}
-        callbackKey={tempArray}
-        updatedValueCallback={handleWebformChange}
-        inputArray={analysedArray}
-      />
-    } else if (analysedArray['#type'] === 'select') {
-      return <GrantsSelect
-        key={key}
-        id={key}
-        callbackKey={tempArray}
-        updatedValueCallback={handleWebformChange}
-        inputArray={analysedArray}
-      />
-    } else if (analysedArray['#type'] === 'fieldset') {
-      return (
-        <Fieldset heading={analysedArray['#title']}
-                  key={key}
-                  border
-                  id={key}>
-          {
-            Object.keys(analysedArray).map(function(arrayKey) {
-              return (
-                analyseArray(analysedArray[arrayKey], arrayKey, tempArray)
-              )
-            })
-          }
-        </Fieldset>
-      );
-    } else if (analysedArray['#type'] === 'number') {
-      return <GrantsTextInput
-        key={key}
-        id={key}
-        callbackKey={tempArray}
-        updatedValueCallback={handleWebformChange}
-        inputArray={analysedArray}
-      />
-    } else if (analysedArray['#type'] === 'date') {
-      return <GrantsTextInput
-        key={key}
-        id={key}
-        callbackKey={tempArray}
-        updatedValueCallback={handleWebformChange}
-        inputArray={analysedArray}
-      />
-    } else if (analysedArray['#type'] === 'textfield') {
-      return <GrantsTextInput
-        key={key}
-        id={key}
-        callbackKey={tempArray}
-        updatedValueCallback={handleWebformChange}
-        inputArray={analysedArray}
-      />
-
-    } else if (analysedArray['#type'] === 'webform_actions') {
-
-    } else if (analysedArray['#type'] === 'grants_webform_summation_field') {
-
-    } else if (analysedArray['#type'] === 'hidden') {
-
-    } else if (analysedArray['#type'] === 'webform_markup') {
-      return parse(analysedArray['#markup'])
-    } else if (analysedArray['#type'] === 'processed_text') {
-      return parse(analysedArray['#text'])
-    } else {
-      return <div>{analysedArray['#type']}</div>
-    }
-  }
 }
 export default GrantsForm