From a09fdf67e549a41c30c513da3e30e38392878dc6 Mon Sep 17 00:00:00 2001
From: Rory <roryd@cleancatalog.com>
Date: Wed, 5 Jun 2019 15:03:04 -0700
Subject: [PATCH] paragraph form element

---
 components/FormAPI/Form.js      | 499 +++++++++++++++++++++++---------
 components/FormAPI/Paragraph.js |  28 ++
 i/.expo/packager-info.json      |   3 +
 i/.expo/settings.json           |   7 +
 4 files changed, 395 insertions(+), 142 deletions(-)
 create mode 100644 components/FormAPI/Paragraph.js
 create mode 100644 i/.expo/packager-info.json
 create mode 100644 i/.expo/settings.json

diff --git a/components/FormAPI/Form.js b/components/FormAPI/Form.js
index 823389d..00307d1 100755
--- a/components/FormAPI/Form.js
+++ b/components/FormAPI/Form.js
@@ -9,6 +9,7 @@ import Select from './Select';
 import Date from './Date';
 import Scald from './Scald';
 import Select2 from './Select2';
+import Paragraph from './Paragraph';
 import ConditionalSelect from './ConditionalSelect';
 import Location from './Location';
 import JSONTree from "react-native-json-tree";
@@ -413,6 +414,361 @@ export default class FormComponent extends React.Component {
   }
 
 
+  // createFieldArrayCopy(fieldArray, field, fieldName, form, i, isRecursive = false) {
+  //
+  //   if(isRecursive) {
+  //     let asdf;
+  //     let breakpoint;
+  //   }
+  //
+  //   if (fieldArray['#type'] !== undefined) {
+  //
+  //     // If field type is container, we need to drill down and find the form to render
+  //     if (fieldArray['#type'] === 'container') {
+  //       fieldArray = field['und'];
+  //
+  //
+  //       if (fieldArray['#type'] === undefined) {
+  //
+  //         fieldArray = fieldArray[0];
+  //
+  //         if (fieldArray && fieldArray['#type'] === undefined) {
+  //
+  //           // If it's a paragraph, we need to recursively run through and create
+  //           if(fieldArray['#entity_type'] !== undefined && fieldArray['#entity_type'] === 'paragraphs_item') {
+  //             let subForm = [];
+  //             let m = 0;
+  //
+  //             for (const key of Object.keys(fieldArray)) {
+  //               if (fieldArray.hasOwnProperty(key) && key.charAt(0) !== '#') {
+  //                 let field = fieldArray[key];
+  //                 let fieldName = field['machine_name'];
+  //                 subForm = this.createFieldArray(field, field, fieldName, subForm, m, true);
+  //                 m++;
+  //               }
+  //
+  //
+  //             }
+  //             form[i].push(subForm);
+  //
+  //           }
+  //
+  //           else if (fieldArray['target_id'] !== undefined) {
+  //             fieldArray = fieldArray['target_id'];
+  //           } else if (fieldArray['nid'] !== undefined) {
+  //             fieldArray = field['und'][0]['nid'];
+  //           } else if (fieldArray['default'] !== undefined) {
+  //             fieldArray = field['und'][0]['default'];
+  //           } else if (fieldArray['sid'] !== undefined) {
+  //             fieldArray = field['und'][0]['sid'];
+  //           } else if (fieldArray['value'] !== undefined) {
+  //             fieldArray = field['und'][0]['value'];
+  //           } else if (fieldArray['geom'] !== undefined) {
+  //             fieldArray = field['und'][0]['geom'];
+  //           }
+  //         }
+  //       }
+  //     }
+  //
+  //     // Set required values
+  //     let required = fieldArray['#required'];
+  //
+  //     if (typeof fieldArray === 'object' && fieldArray['#type']) {
+  //
+  //       // first determine if field is scald library because in FAPI that is a textfield
+  //       if (fieldArray['#preview_context'] && fieldArray['#preview_context'] === 'mukurtu_scald_media_assets_edit_') {
+  //         form[i].push(<Scald
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValue}
+  //         />);
+  //       } else if (fieldArray['#type'] === 'textfield') {
+  //         form[i].push(<Textfield
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             required={required}
+  //             setFormValue={this.setFormValue}
+  //         />);
+  //       } else if (fieldArray['#type'] === 'text_format') {
+  //         form[i].push(<Textarea
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValue}
+  //         />);
+  //       } else if (fieldArray['#type'] === 'textarea') {
+  //         form[i].push(<Textarea
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValue}
+  //         />);
+  //       } else if (fieldArray['#type'] === 'radios') {
+  //         form[i].push(<Radios
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValueCheckboxes.bind(this)}
+  //         />);
+  //       } else if (fieldArray['#type'] === 'checkboxes') {
+  //         form[i].push(<Checkboxes
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValueCheckboxes.bind(this)}
+  //         />);
+  //       } else if (fieldArray['#type'] === 'checkbox') {
+  //         form[i].push(<Checkbox
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValueCheckbox.bind(this)}
+  //         />);
+  //       }
+  //       // OG group gets special conditional select. Can expand to other conditional fields as needed
+  //       else if (fieldArray['#type'] === 'select' && fieldName === 'og_group_ref') {
+  //         form[i].push(<ConditionalSelect
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValueConditionalSelect.bind(this)}
+  //         />);
+  //
+  //       } else if (fieldArray['#type'] === 'select') {
+  //         form[i].push(<Select
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValue}
+  //         />);
+  //       } else if (['item', 'date_combo'].includes(fieldArray['#type'])) {
+  //         form[i].push(<Date
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             fieldType={fieldArray['#type']}
+  //             setFormValue={this.setFormValueDate.bind(this)}
+  //         />);
+  //       } else if (fieldArray['#type'] === 'geofield_latlon') {
+  //         form[i].push(<Location
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValueLocation.bind(this)}
+  //         />);
+  //       } else if (fieldArray['#type'] === 'select2_hidden') {
+  //         form[i].push(<Select2
+  //             formValues={this.state.formValues}
+  //             fieldName={fieldName}
+  //             field={fieldArray}
+  //             key={fieldName}
+  //             setFormValue={this.setFormValueSelect2.bind(this)}
+  //         />);
+  //       }
+  //     } else {
+  //       console.log(fieldArray['#title']);
+  //     }
+  //   }
+  //
+  //
+  //   return form;
+  // }
+
+
+  createFieldArray(fieldArray, field, fieldName, form, i, isRecursive = false) {
+
+
+    if (fieldArray['#type'] !== undefined) {
+
+      // If field type is container, we need to drill down and find the form to render
+      if (fieldArray['#type'] === 'container') {
+        fieldArray = field['und'];
+
+
+        if (fieldArray['#type'] === undefined) {
+
+          fieldArray = fieldArray[0];
+
+          if (fieldArray && fieldArray['#type'] === undefined) {
+
+            // If it's a paragraph, we need to recursively run through and create
+            if(fieldArray['#entity_type'] !== undefined && fieldArray['#entity_type'] === 'paragraphs_item') {
+
+              form[i].push(<Paragraph
+                  formValues={this.state.formValues}
+                  fieldName={fieldName}
+                  field={fieldArray}
+                  key={fieldName}
+                  setFormValue={this.setFormValue}
+              />);
+
+
+              // let subForm = [];
+              // let m = 0;
+              //
+              // for (const key of Object.keys(fieldArray)) {
+              //   if (fieldArray.hasOwnProperty(key) && key.charAt(0) !== '#') {
+              //     let field = fieldArray[key];
+              //     let fieldName = field['machine_name'];
+              //
+              //
+              //
+              //   }
+              //
+              //
+              // }
+              // form[i].push(subForm);
+
+            }
+
+            else if (fieldArray['target_id'] !== undefined) {
+              fieldArray = fieldArray['target_id'];
+            } else if (fieldArray['nid'] !== undefined) {
+              fieldArray = field['und'][0]['nid'];
+            } else if (fieldArray['default'] !== undefined) {
+              fieldArray = field['und'][0]['default'];
+            } else if (fieldArray['sid'] !== undefined) {
+              fieldArray = field['und'][0]['sid'];
+            } else if (fieldArray['value'] !== undefined) {
+              fieldArray = field['und'][0]['value'];
+            } else if (fieldArray['geom'] !== undefined) {
+              fieldArray = field['und'][0]['geom'];
+            }
+          }
+        }
+      }
+
+      // Set required values
+      let required = fieldArray['#required'];
+
+      if (typeof fieldArray === 'object' && fieldArray['#type']) {
+
+        // first determine if field is scald library because in FAPI that is a textfield
+        if (fieldArray['#preview_context'] && fieldArray['#preview_context'] === 'mukurtu_scald_media_assets_edit_') {
+          form[i].push(<Scald
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValue}
+          />);
+        } else if (fieldArray['#type'] === 'textfield') {
+          form[i].push(<Textfield
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              required={required}
+              setFormValue={this.setFormValue}
+          />);
+        } else if (fieldArray['#type'] === 'text_format') {
+          form[i].push(<Textarea
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValue}
+          />);
+        } else if (fieldArray['#type'] === 'textarea') {
+          form[i].push(<Textarea
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValue}
+          />);
+        } else if (fieldArray['#type'] === 'radios') {
+          form[i].push(<Radios
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValueCheckboxes.bind(this)}
+          />);
+        } else if (fieldArray['#type'] === 'checkboxes') {
+          form[i].push(<Checkboxes
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValueCheckboxes.bind(this)}
+          />);
+        } else if (fieldArray['#type'] === 'checkbox') {
+          form[i].push(<Checkbox
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValueCheckbox.bind(this)}
+          />);
+        }
+        // OG group gets special conditional select. Can expand to other conditional fields as needed
+        else if (fieldArray['#type'] === 'select' && fieldName === 'og_group_ref') {
+          form[i].push(<ConditionalSelect
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValueConditionalSelect.bind(this)}
+          />);
+
+        } else if (fieldArray['#type'] === 'select') {
+          form[i].push(<Select
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValue}
+          />);
+        } else if (['item', 'date_combo'].includes(fieldArray['#type'])) {
+          form[i].push(<Date
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              fieldType={fieldArray['#type']}
+              setFormValue={this.setFormValueDate.bind(this)}
+          />);
+        } else if (fieldArray['#type'] === 'geofield_latlon') {
+          form[i].push(<Location
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValueLocation.bind(this)}
+          />);
+        } else if (fieldArray['#type'] === 'select2_hidden') {
+          form[i].push(<Select2
+              formValues={this.state.formValues}
+              fieldName={fieldName}
+              field={fieldArray}
+              key={fieldName}
+              setFormValue={this.setFormValueSelect2.bind(this)}
+          />);
+        }
+      } else {
+        console.log(fieldArray['#title']);
+      }
+    }
+
+
+    return form;
+  }
+
+
   render() {
     let form = [];
     let sceneRoutes = {};
@@ -440,148 +796,7 @@ export default class FormComponent extends React.Component {
 
           var fieldArray = childrenFields[k];
 
-          if (fieldArray['#type'] !== undefined) {
-
-            // If field type is container, we need to drill down and find the form to render
-            if (fieldArray['#type'] === 'container') {
-              fieldArray = field['und'];
-
-
-              if (fieldArray['#type'] === undefined) {
-
-                fieldArray = fieldArray[0];
-
-                if (fieldArray && fieldArray['#type'] === undefined) {
-
-                  if (fieldArray['target_id'] !== undefined) {
-                    fieldArray = fieldArray['target_id'];
-                  } else if (fieldArray['nid'] !== undefined) {
-                    fieldArray = field['und'][0]['nid'];
-                  } else if (fieldArray['default'] !== undefined) {
-                    fieldArray = field['und'][0]['default'];
-                  } else if (fieldArray['sid'] !== undefined) {
-                    fieldArray = field['und'][0]['sid'];
-                  } else if (fieldArray['value'] !== undefined) {
-                    fieldArray = field['und'][0]['value'];
-                  } else if (fieldArray['geom'] !== undefined) {
-                    fieldArray = field['und'][0]['geom'];
-                  }
-                }
-              }
-            }
-
-            // Set required values
-            let required = fieldArray['#required'];
-
-            if (typeof fieldArray === 'object' && fieldArray['#type']) {
-
-              // first determine if field is scald library because in FAPI that is a textfield
-              if (fieldArray['#preview_context'] && fieldArray['#preview_context'] === 'mukurtu_scald_media_assets_edit_') {
-                form[i].push(<Scald
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValue}
-                />);
-              } else if (fieldArray['#type'] === 'textfield') {
-                form[i].push(<Textfield
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    required={required}
-                    setFormValue={this.setFormValue}
-                />);
-              } else if (fieldArray['#type'] === 'text_format') {
-                form[i].push(<Textarea
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValue}
-                />);
-              } else if (fieldArray['#type'] === 'textarea') {
-                form[i].push(<Textarea
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValue}
-                />);
-              } else if (fieldArray['#type'] === 'radios') {
-                form[i].push(<Radios
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValueCheckboxes.bind(this)}
-                />);
-              } else if (fieldArray['#type'] === 'checkboxes') {
-                form[i].push(<Checkboxes
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValueCheckboxes.bind(this)}
-                />);
-              } else if (fieldArray['#type'] === 'checkbox') {
-                form[i].push(<Checkbox
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValueCheckbox.bind(this)}
-                />);
-              }
-              // OG group gets special conditional select. Can expand to other conditional fields as needed
-              else if (fieldArray['#type'] === 'select' && fieldName === 'og_group_ref') {
-                form[i].push(<ConditionalSelect
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValueConditionalSelect.bind(this)}
-                />);
-
-              } else if (fieldArray['#type'] === 'select') {
-                form[i].push(<Select
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValue}
-                />);
-              } else if (['item', 'date_combo'].includes(fieldArray['#type'])) {
-                form[i].push(<Date
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    fieldType={fieldArray['#type']}
-                    setFormValue={this.setFormValueDate.bind(this)}
-                />);
-              } else if (fieldArray['#type'] === 'geofield_latlon') {
-                form[i].push(<Location
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValueLocation.bind(this)}
-                />);
-              } else if (fieldArray['#type'] === 'select2_hidden') {
-                form[i].push(<Select2
-                    formValues={this.state.formValues}
-                    fieldName={fieldName}
-                    field={fieldArray}
-                    key={fieldName}
-                    setFormValue={this.setFormValueSelect2.bind(this)}
-                />);
-              }
-            } else {
-              console.log(fieldArray['#title']);
-            }
-          }
+         form = this.createFieldArray(fieldArray, field, fieldName, form, i);
         }
       } catch (e) {
         // console.log(e);
diff --git a/components/FormAPI/Paragraph.js b/components/FormAPI/Paragraph.js
new file mode 100644
index 0000000..21d9828
--- /dev/null
+++ b/components/FormAPI/Paragraph.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import {CheckBox} from "react-native-elements";
+
+export default class Paragraph extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      checked: this.props.field['#default_value'] === 1
+    };
+
+  }
+
+  render() {
+
+    let debugProps = this.props;
+
+    let paragraphForm = [];
+
+    paragraphForm.push(<Text>Test Paragraph Form</Text>);
+
+    return <View>
+      {paragraphForm}
+
+    </View>;
+  }
+}
\ No newline at end of file
diff --git a/i/.expo/packager-info.json b/i/.expo/packager-info.json
new file mode 100644
index 0000000..0c248ba
--- /dev/null
+++ b/i/.expo/packager-info.json
@@ -0,0 +1,3 @@
+{
+  "devToolsPort": 19002
+}
\ No newline at end of file
diff --git a/i/.expo/settings.json b/i/.expo/settings.json
new file mode 100644
index 0000000..8e4fcd2
--- /dev/null
+++ b/i/.expo/settings.json
@@ -0,0 +1,7 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null
+}
\ No newline at end of file