fix: supporting widgets for designer

EAVFW · Oct 4, 2024 · 00a5e03 · 00a5e03
1 parent 1585804
commit 00a5e03
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormIntroSettingsView.tsx
@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import { JSONSchema7TypeName, JSONSchema7 } from "json-schema";
 import React from "react";
 import { RichTextField } from "./rjsf/Widgets/RichTextWidget";
-import { QuickformDesignerFields } from "./QuickFormQuestionsView";
+import { QuickformDesignerFields, QuickformDesignerWidgets } from "./QuickFormQuestionsView";
 
 const introSlideSchema = {
     label: "Intro Settings",
@@ -80,7 +80,7 @@ export const QuickFormIntroSettingsView = () => {
             return { ...old };
         });
     }, [enableIntro, dispatch]);
-
+    console.log("QuickformDesignerWidgets", QuickformDesignerWidgets);
     return (
         <div className={mergeClasses(styles.section, styles.sectionSlim)}>
             <div style={{ display: "flex", justifyContent: "center", alignItems: enableIntro ? "" : "end", marginTop: "10px" }}>
@@ -90,7 +90,8 @@ export const QuickFormIntroSettingsView = () => {
                 <Form
                     templates={{ FieldTemplate, BaseInputTemplate }}
                     validator={validator}
-                    fields={{  ...QuickformDesignerFields }}
+                    fields={QuickformDesignerFields }
+                    widgets={QuickformDesignerWidgets }
                     {...introSlideSchema}
                     formData={intro}
                     onChange={(a) => {

diff --git a/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx b/packages/designer/src/Components/Views/QuickFormQuestionsView.tsx
@@ -5,19 +5,24 @@ import validator from '@rjsf/validator-ajv8';
 import { Dropdown, DropdownProps, Option, mergeClasses, Field, Input, MessageBar, MessageBarBody, MessageBarTitle, makeStyles, tokens, shorthands } from '@fluentui/react-components';
 import { useViewStyles } from "../Styles/useViewStyles.styles";
 import { QuickFormDesignerDefinition } from "../../Types/QuickFormDefinition";
-import { FieldProps, ariaDescribedByIds } from "@rjsf/utils";
+import { FieldProps, WidgetProps, ariaDescribedByIds } from "@rjsf/utils";
 import { FieldTemplate } from "./rjsf/FieldTemplate";
 import { BaseInputTemplate } from "./rjsf/BaseInputTemplate";
 
 import { InputComponentMetadata, resolveInputComponentSchemas } from "@eavfw/quickform-core";
 
 
 export const QuickformDesignerFields = {} as { [key: string]: React.FC<FieldProps> };
+export const QuickformDesignerWidgets = {} as { [key: string]: React.FC<WidgetProps> };
 
 export function registerInputControlDesignerField<T = any>(field: string, component: React.FC<FieldProps<T>>) {
     QuickformDesignerFields[field] = component as React.FC<FieldProps>;
 }
 
+export function registerInputControlDesignerWidget<T = any>(widget: string, component: React.FC<WidgetProps<T>>) {
+    QuickformDesignerWidgets[widget] = component as React.FC<WidgetProps>;
+}
+
 const useQuickFormQuestionsViewStyles = makeStyles({
     messageBar: {
         ...shorthands.margin("0.285714rem"),

diff --git a/packages/designer/src/Components/Views/QuickFormSettingsView.tsx b/packages/designer/src/Components/Views/QuickFormSettingsView.tsx
@@ -10,6 +10,7 @@ import { JSONSchema7 } from "json-schema";
 import { defaultQuickFormTokens } from "@eavfw/quickform-core";
 import { Controls } from "@eavfw/apps";
 import { IconEnum } from "@eavfw/quickform-core/src/components/icons/IconResolver";
+import { QuickformDesignerFields, QuickformDesignerWidgets } from "./QuickFormQuestionsView";
 
 const quickformSettingsSchema = {
     label: "QuickForm Feature Flags",
@@ -134,13 +135,15 @@ export const QuickFormSettingsView = () => {
     }
 
     console.log("Settings Data", [quickformSettingsSchema.schema.properties.tokens.properties, JSON.stringify(formData, null, 4)]);
-
+    console.log("QuickformDesignerWidgets", QuickformDesignerWidgets);
     return (
         <div className={mergeClasses(styles.section, quickformSettingsStyles.container)}>
             <div className={mergeClasses(styles.sectionSlim, styles.section)}>
                 <Form templates={{ FieldTemplate, BaseInputTemplate }}
                     validator={validator}
                     {...quickformSettingsSchema}
+                    fields={QuickformDesignerFields}
+                    widgets={QuickformDesignerWidgets}
                     formData={formData}
                     onChange={(a, b) => {
                         console.log("change", [a, b]);