fix: adressed comments on pr about <ConditionalRender />

EAVFW · Mar 1, 2024 · ebc0f7e · ebc0f7e
1 parent 444209a
commit ebc0f7e
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 37 deletions.
diff --git a/packages/core/src/components/renderers/column-renderer/ColumnRenderer.tsx b/packages/core/src/components/renderers/column-renderer/ColumnRenderer.tsx
@@ -28,7 +28,19 @@ export const ColumnRenderer: React.FC<ColumnRendererProps> = ({ column, question
         const question = findQuestionByLogicalName(column.ref!, questions);
         if (!question) return null;
         if (question.visible && question.visible?.rule) {
-            return <ConditionalRender key={question.logicalName} style={fullRowStyle} model={question} />
+            return (
+                <ConditionalRender
+                    key={question.logicalName}
+                    engine={question.visible?.type}
+                    rule={question.visible?.rule}
+                >
+                    <Question
+                        key={question.logicalName}
+                        style={fullRowStyle}
+                        model={question}
+                    />
+                </ConditionalRender>
+            )
         }
         return <Question key={question.logicalName} style={fullRowStyle} model={question} />
     }
@@ -40,7 +52,19 @@ export const ColumnRenderer: React.FC<ColumnRendererProps> = ({ column, question
                 const question = findQuestionByLogicalName(innerRow.ref!, questions);
                 if (!question) return null;
                 if (question.visible && question.visible?.rule) {
-                    return <ConditionalRender key={question.logicalName} model={question} />
+                    return (
+                        <ConditionalRender
+                            key={question.logicalName}
+                            engine={question.visible?.type}
+                            rule={question.visible?.rule}
+                        >
+                            <Question
+                                key={question.logicalName}
+                                style={fullRowStyle}
+                                model={question}
+                            />
+                        </ConditionalRender>
+                    )
                 }
                 return <Question key={question.logicalName} model={question} />
             } else {

diff --git a/packages/core/src/components/renderers/conditional-render/ConditionalRender.tsx b/packages/core/src/components/renderers/conditional-render/ConditionalRender.tsx
@@ -1,51 +1,44 @@
 
-import { QuestionModel } from "../../../model/QuestionModel";
 import { useEffect, useState } from "react";
-import React from "react";
-import { resolveQuickFormService } from "../../../services/QuickFormServices";
 import { useQuickForm } from "../../../state";
-import { Question } from "../../../components/question/Question";
 
 type ConditionalRenderProps = {
-    model: QuestionModel;
-    style?: React.CSSProperties;
+    engine: string;
+    rule: string;
+    children: JSX.Element;
 }
 
-export const ConditionalRender: React.FC<ConditionalRenderProps> = ({ model, style }) => {
-    const logger = resolveQuickFormService("logger");
+export const ConditionalRender = ({ engine, rule, children }: ConditionalRenderProps) => {
     const [visible, setIsVisible] = useState(false);
     const { getCurrentSlide } = useQuickForm();
-    logger.log("ConditionalRender for question {@model} InputProps", model);
+    // const logger = resolveQuickFormService("logger");
+    // logger.log("ConditionalRender for question {@model} InputProps", model);
 
-    // function evalInScope(js: string, contextAsScope: any) {
-    //     return new Function(`with (this) { return (${js}); }`).call(contextAsScope);
-    // }
+    useEffect(() => {
+        const shouldRender = functionInScope(rule, { getCurrentSlide });
+        setIsVisible(shouldRender)
+    }, [getCurrentSlide().questions])
 
-    interface Context {
-        [key: string]: any;
+    if (!visible) {
+        return null;
     }
 
-    function functionInScope(js: string, context: Context): boolean {
-        const keys = Object.keys(context);
-        const values = keys.map(key => context[key]);
+    return children;
+}
 
-        const func: Function = new Function(...keys, `return ${js};`);
+interface Context {
+    [key: string]: any;
+}
 
-        return (func as (...args: any[]) => any)(...values);
-    }
+function functionInScope(js: string, context: Context): boolean {
+    const keys = Object.keys(context);
+    const values = keys.map(key => context[key]);
 
-    useEffect(() => {
-        if (model.visible && model.visible?.rule) {
-            const shouldRender = functionInScope(model.visible.rule, { getCurrentSlide });
-            setIsVisible(shouldRender)
-        }
-    }, [getCurrentSlide().questions])
+    const func: Function = new Function(...keys, `return ${js};`);
 
-    if (!visible) {
-        return null;
-    }
+    return (func as (...args: any[]) => any)(...values);
+}
 
-    return (
-        <Question key={model.logicalName} style={style} model={model} />
-    )
-}
+// function evalInScope(js: string, contextAsScope: any) {
+//     return new Function(`with (this) { return (${js}); }`).call(contextAsScope);
+// }
diff --git a/packages/core/src/components/renderers/row-renderer/RowRenderer.tsx b/packages/core/src/components/renderers/row-renderer/RowRenderer.tsx
@@ -32,7 +32,20 @@ export const RowRenderer: React.FC<RowRendererProps> = ({ row, questions }) => {
     if (!question) return null;
 
     if (question.visible && question.visible?.rule) {
-        return <ConditionalRender style={fullRowStyle} model={question} />
+
+        return (
+            <ConditionalRender
+                key={question.logicalName}
+                engine={question.visible?.type}
+                rule={question.visible?.rule}
+            >
+                <Question
+                    key={question.logicalName}
+                    style={fullRowStyle}
+                    model={question}
+                />
+            </ConditionalRender>
+        )
     }
 
     return <Question key={question.logicalName} style={fullRowStyle} model={question} />

diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
@@ -50,7 +50,15 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
                 <ul>
                     {submitFields.map((sf, idx) => {
                         if (sf.visible && sf.visible?.rule) {
-                            return <ConditionalRender key={sf.logicalName} model={sf} />
+                            return (
+                                <ConditionalRender
+                                    key={sf.logicalName}
+                                    engine={sf.visible?.type}
+                                    rule={sf.visible?.rule}
+                                >
+                                    <Question key={sf.logicalName} model={sf} />
+                                </ConditionalRender>
+                            )
                         }
                         return (
                             <Question key={sf.logicalName} model={sf} />