feat: adds the option to define icons and buttonText pr. slide. Also fixes a bug on multilinetext where focus on inputcontrol did not set the question to active

Author: KasperBaun

packages/core/src/components/icons/IconResolver.tsx

@@ -2,17 +2,18 @@ import { EmailIcon } from "./EmailIcon";
 import { TelephoneIcon } from "./TelephoneIcon";
 import { UserIcon } from "./UserIcon";
 import { IconProps } from "./iconProps";
+import { Checkmark } from '../icons/Checkmark';
 
 export type IconType = "Email" | "Phone" | "User";
 export type IconResolverProps = {
     type: IconType,
 } & IconProps
 
-export const IconResolver: React.FC<IconResolverProps> = ({ type, color, className, size }) => {
+export const IconResolver: React.FC<IconResolverProps> = ({ type, color, className, size, style }): JSX.Element => {
     switch (type) {
-        case "Email": return <EmailIcon className={className} color={color} size={size} />
-        case "Phone": return <TelephoneIcon className={className} color={color} size={size} />
-        case "User": return <UserIcon className={className} color={color} size={size} />
-        default: return <UserIcon className={className} color={color} size={size} />
+        case "Email": return <EmailIcon className={className} color={color} size={size} style={style} />
+        case "Phone": return <TelephoneIcon className={className} color={color} size={size} style={style} />
+        case "User": return <UserIcon className={className} color={color} size={size} style={style} />
+        default: return <Checkmark className={className} color={color} size={size} style={style} />;
     }
 }

packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx

@@ -82,7 +82,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
         span.addEvent("BaseInputComponent:render");
     }
 
-    
+
 
     const resize = () => {
         const input = ref.current;
@@ -104,7 +104,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     }
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-        console.log("BaseInputComponent:handleChange", event.target.value);         
+        console.log("BaseInputComponent:handleChange", event.target.value);
         if (span) {
             span.addEvent("BaseInputComponent:handleChange", { 'value': event.target.value });
         }
@@ -119,9 +119,9 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
     }
 
     /**
-     * The input control is responsible of setting it self focus when becoming active.
-     * - We should also listen to input controls being focused and if not active, trigger a reducer that its set active.
-     *   Ultimatly removing active from other questions. This happens right now when an answer is given (intermediate or not), so not critical.
+     * The input control is responsible of setting itself focused when becoming active.
+     * - We should also listen to inputcontrols being focused and if not active, trigger a reducer that sets it to active. Ultimately removing active from other questions. 
+     * This happens right now when an answer is given (intermediate or not), so not critical.
      */
     useEffect(() => {
         if (questionModel.isActive)
@@ -132,7 +132,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
      * While a base input component is active we should answer the question upon enter.
      */
     useHandleEnterKeypress("baseinput", !questionModel.isActive, () => {
-        answerQuestion(questionModel.logicalName, text,false);
+        answerQuestion(questionModel.logicalName, text, false);
     });
 
     return (

packages/core/src/components/question/input-types/multiline/MultilineInput.tsx

@@ -43,22 +43,26 @@ const useInputTextStyles = makeStyles({
 
 export const MultilineInput: InputComponentType<MultilineProperties> = ({ questionModel }) => {
     const styles = useInputTextStyles();
-    const { isFirstQuestionInCurrentSlide, answerQuestion } = useQuickForm();
+    const { isFirstQuestionInCurrentSlide, answerQuestion, state } = useQuickForm();
     const { placeholder, output } = questionModel;
     const [text, setText] = useState<string>(output || '');
+    const ref = useRef<HTMLTextAreaElement>(null);
 
     const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
         const newValue = event.target.value.replace(/\r?\n/g, '\n'); // Normalize newline characters
         setText(newValue);
         answerQuestion(questionModel.logicalName, newValue, true);
     };
 
-    const ref = useRef<HTMLTextAreaElement>(null);
+    /**
+     * The input control is responsible of setting itself focused when becoming active.
+     * - We should also listen to inputcontrols being focused and if not active, trigger a reducer that sets it to active. Ultimately removing active from other questions. 
+     * This happens right now when an answer is given (intermediate or not), so not critical.
+     */
     useEffect(() => {
-        if (ref.current && isFirstQuestionInCurrentSlide(questionModel.logicalName)) {
-            ref.current.focus();
-        }
-    }, [ref, isFirstQuestionInCurrentSlide, questionModel.logicalName]);
+        if (questionModel.isActive || ref.current && isFirstQuestionInCurrentSlide(questionModel.logicalName))
+            ref.current?.focus();
+    }, [ref, isFirstQuestionInCurrentSlide, questionModel.logicalName, questionModel.isActive]);
 
     return (
         <textarea onBlur={() => answerQuestion(questionModel.logicalName, text, false)}

packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx

@@ -1,25 +1,31 @@
 "use client";
 import React, { useEffect, useRef, useState } from 'react';
 import { useQuickForm } from '../../../state/QuickFormContext';
-import { Button } from '../../button/Button';
+import { Button, Slide } from '../../index';
 import { useHandleEnterKeypress } from '../../../hooks';
-import { Slide } from '../../slide/Slide';
-import { Checkmark } from '../../icons';
-import { quickformtokens } from '../../../style/quickFormTokensDefinition';
+import { quickformtokens } from "../../../style";
 import { mergeClasses } from '@griffel/react';
-
-
+import { IconResolver } from '../../icons/IconResolver';
+import { SlideModel } from '../../../model';
 
 export const SlideRenderer: React.FC = () => {
+
     const { state, goToNextSlide } = useQuickForm();
-    const currentSlide = state.slides[state.currIdx];
+    const [className, setClassName] = useState(state.classes.slide);
+
+    const currentSlide: SlideModel = state.slides[state.currIdx];
+    const buttonText: string = currentSlide.buttonText ?? "OK";
+    const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
+
+    /* KBA - Leaving this for now - have to get back to it since we never actually set .isActive property on question.. so we cant use it to condition with at the moment.. */
+    // const showPressEnter: boolean = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive) === false;
+    console.log("showPressEnter", showPressEnter);
+    console.log("showPressEnterCondition", currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive));
+    console.log("showPressEnterCurrentSlide", currentSlide);
 
-    console.log("SlideRenderer", currentSlide);
     /* Listens to enter key pressed */
-    const enterKeyDisabled = currentSlide.questions.some(q => q.inputType === "multilinetext" && q.isActive);
-    useHandleEnterKeypress("slide", enterKeyDisabled, goToNextSlide);
+    useHandleEnterKeypress("slide", !showPressEnter, goToNextSlide);
 
-    const [className, setClassName] = useState(state.classes.slide);
     let nextAllowedEffectTime = useRef(new Date().getTime());
     useEffect(() => {
         const timeout = setTimeout(() => {
@@ -40,8 +46,13 @@ export const SlideRenderer: React.FC = () => {
             <Button
                 style={{ display: 'flex', alignItems: 'center', justifyContent: 'start' }}
                 onClick={goToNextSlide}
-                showPressEnter={!enterKeyDisabled}
-                children={<>OK<Checkmark style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} /></>} />
+                showPressEnter={showPressEnter}
+                children={
+                    <>
+                        {buttonText}<IconResolver type={currentSlide.icon} style={{ height: '100%', marginLeft: quickformtokens.gap1 }} color={quickformtokens.onPrimary} size={24} />
+                    </>
+                }
+            />
         </div>
     );
 };

packages/core/src/model/SlideModel.ts

@@ -1,10 +1,13 @@
+import { IconType } from "../components/icons/IconResolver";
 import { resolveQuickFormService } from "../services/QuickFormServices";
 import { QuestionModel } from "./QuestionModel";
 import { QuestionJsonModel } from "./json-definitions/JsonDataModels";
 import { QuestionRef } from "./json-definitions/Layout";
 
 export class SlideModel {
     displayName?: string;
+    buttonText?: string;
+    icon?: IconType;
     questions: QuestionModel[] = [];
     rows: Row[];
 

packages/core/src/model/json-definitions/Layout.ts

@@ -1,5 +1,6 @@
 import { QuickFormTokens } from "../../style/quickFormTokensDefinition";
 import { QuickformClassNames } from "../../state/QuickformState";
+import { IconType } from "../../components/icons/IconResolver";
 
 export type LayoutDefinition = {
     classes?: Partial<QuickformClassNames>,
@@ -19,7 +20,9 @@ export type SlideLayout = {
     style?: React.CSSProperties;
     rows?: SlideElements;
     schemaName?: string;
-    logicalName?: string
+    logicalName?: string;
+    buttonText?: string;
+    icon?: IconType;
 }
 
 /**

packages/core/src/services/defaults/DefaultModelTransformer.ts

@@ -91,6 +91,9 @@ function handleLayout(layout: LayoutDefinition, questions: QuickFormQuestionsDef
         Object.values(layout.slides).forEach(slide => {
             const slideModel = new SlideModel();
             slideModel.displayName = slide.title;
+            slideModel.buttonText = slide.buttonText;
+            slideModel.icon = slide.icon;
+
             if (slide.rows) {
                 slideModel.rows = processRows(slide.rows, slideModel, questions, payload);
             }
@@ -112,9 +115,9 @@ function defaultLayout(questions: QuickFormQuestionsDefinition, payload: any): S
     Object.keys(questions).map((key, index) => [key, index] as [string, number])
         .sort(([q1, i1], [q2, i2]) => (questions[q1].order ?? i1) - (questions[q2].order ?? i2))
         .map(([questionKey]) => {
-        let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload);
-        slides.push(slide);
-    });
+            let slide: SlideModel = createSlide({ [questionKey]: questions[questionKey] }, payload);
+            slides.push(slide);
+        });
 
     logger.log("Generated {@slides} from layout", slides);
 
@@ -189,7 +192,7 @@ const transformJSONInput: QuickFormModelTransformer = (definition, payload): Qui
 
     // Transform questions into slides with rows and columns
     if (isDefined(definition.questions)) {
-        if (definition.layout && definition.layout.slides && Object.keys(definition.layout.slides).length>0) {
+        if (definition.layout && definition.layout.slides && Object.keys(definition.layout.slides).length > 0) {
             // If layout is defined, assign slides as per layout
             slides = handleLayout(definition.layout!, definition.questions, payload);
         } else {

packages/playground/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { QuickFormDefinition } from '../../core/src/model';
-import testdata from "./data/allInputControlsTest.json";
+import testdata from "./data/allInputControlsMultipleSlidesTest.json";
 import { QuickFormProvider } from '../../core/src/state';
 import { NavigationButton, QuickForm } from '../../core/src/components';
 import "./components/buttons-input/ButtonsInput";

packages/playground/src/data/allInputControlsMultipleSlidesTest.json

@@ -3,6 +3,8 @@
         "autoAdvanceSlides": false,
         "slides": {
             "slide1": {
+                "buttonText": "Test1",
+                "icon": "undefined",
                 "title": "Test titel",
                 "rows": {
                     "row1": {
@@ -28,6 +30,8 @@
                 }
             },
             "slide2": {
+                "buttonText": "Test2",
+                "icon": "Email",
                 "rows": {
                     "row1": {
                         "columns": {
@@ -52,6 +56,8 @@
                 }
             },
             "slide3": {
+                "buttonText": "Test3",
+                "icon": "undefined",
                 "rows": {
                     "row1": {
                         "columns": {
@@ -177,7 +183,7 @@
             "paragraph": "Test af multilinetext",
             "lang": "DA"
         },
-        "nameTest": {
+        "textTest": {
             "inputType": "text",
             "text": "Text test",
             "paragraph": "Test af text",