From 15b0846d506f1fbdda08ade37834937bc25951ee Mon Sep 17 00:00:00 2001
From: LuisFLara <luisf.vazquez@densitylabs.io>
Date: Thu, 21 Nov 2019 18:11:46 -0600
Subject: [PATCH] [MD-349] WIP

---
 .../custom_forms/_integration.html.haml       |  3 ++
 vendor/assets/javascripts/CustomForm.js       | 35 +++++++++++++++++++
 vendor/assets/javascripts/dynamic_forms.js    | 11 ++++++
 3 files changed, 49 insertions(+)
 create mode 100644 vendor/assets/javascripts/CustomForm.js

diff --git a/app/views/dynamic_forms/custom_forms/_integration.html.haml b/app/views/dynamic_forms/custom_forms/_integration.html.haml
index 59d0617..f12646f 100644
--- a/app/views/dynamic_forms/custom_forms/_integration.html.haml
+++ b/app/views/dynamic_forms/custom_forms/_integration.html.haml
@@ -13,6 +13,9 @@
   .col-md-6
     %h3 JSON Schema
     #json_editor_container.w-100.mb-5{:style => "height: 600px;"}
+  .col-md-6
+    %h3 Preview
+    #custom-form.w-100.mb-5{:style => "height: 600px;"}
   .col-md-6
     %h3 UI Schema
     #json_editor_container_ui.w-100.mb-5{:style => "height: 600px;"}
diff --git a/vendor/assets/javascripts/CustomForm.js b/vendor/assets/javascripts/CustomForm.js
new file mode 100644
index 0000000..7674222
--- /dev/null
+++ b/vendor/assets/javascripts/CustomForm.js
@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _reactJsonschemaForm = _interopRequireDefault(require("react-jsonschema-form"));
+
+var _this = void 0;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var CustomForm = function CustomForm(container, jsonSchema, uiSchema) {
+  _react.default.createElement("div", null, _react.default.createElement(_reactJsonschemaForm.default, {
+    schema: { jsonSchema },
+    uiSchema: { uiSchema }
+  }));
+  return renderCustomForm(container, jsonSchema, uiSchema);
+};
+
+var renderCustomForm = function (container, jsonSchema, uiSchema){
+  _reactDom.default.render(_react.default.createElement(CustomForm, {
+    json_schema: jsonSchema,
+    ui_schema: uiSchema
+  }), document.getElementById(container));
+}
+
+
+var _default = CustomForm;
+exports.default = _default;
\ No newline at end of file
diff --git a/vendor/assets/javascripts/dynamic_forms.js b/vendor/assets/javascripts/dynamic_forms.js
index bd290a0..196b3a3 100644
--- a/vendor/assets/javascripts/dynamic_forms.js
+++ b/vendor/assets/javascripts/dynamic_forms.js
@@ -1,8 +1,12 @@
+import CustomForm from "./CustomForm";
+
 //= require jsoneditor
+//= require CustomForm
 
 document.addEventListener("DOMContentLoaded", function(){
   initJsonEditor();
   initJsonEditorUi();
+  updatePreview();
 });
 
 initJsonEditor = function initJsonEditor(){
@@ -44,3 +48,10 @@ initJsonEditorUi = function (){
   const jsonEditor = new JSONEditor(jsonEditorContainer, jsonEditorOptions);
   jsonEditor.set(JSON.parse(uiSchemaField.value));
 }
+
+updatePreview = function updatePreview() {
+  const jsonSchemaField = document.getElementById("custom_form_json_schema");
+  const uiSchemaField = document.getElementById("custom_form_ui_schema");
+  const previewContainer = document.getElementById("custom-form");
+  CustomForm(previewContainer, jsonSchemaField, uiSchemaField);
+}
\ No newline at end of file