fix: Changed some typing for React.FC in registerInputControl()

EAVFW · Feb 27, 2024 · b8805b3 · b8805b3
1 parent d567b7f
commit b8805b3
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 34 deletions.
diff --git a/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx b/packages/core/src/components/question/input-types/multiline/MultilineInput.tsx
@@ -6,15 +6,7 @@ import { useQuickForm } from "../../../../state/QuickFormContext";
 import React from "react";
 import { InputProps } from "../../../../model/index";
 
-export type MultilineInput = {
-    readonly placeholder?: string;
-    readonly className?: string;
-    readonly value?: string;
-    readonly onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-    readonly width?: string;
-    readonly focus?: boolean;
-    readonly maxLength?: number;
-}
+
 
 export function MultilineInput({ questionModel, onOutputChange }: InputProps) {
     const { isFirstQuestionInCurrentSlide } = useQuickForm();
@@ -45,9 +37,19 @@ export function MultilineInput({ questionModel, onOutputChange }: InputProps) {
     );
 }
 
+type MultilineInputProps = {
+    readonly placeholder?: string;
+    readonly className?: string;
+    readonly value?: string;
+    readonly onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+    readonly width?: string;
+    readonly focus?: boolean;
+    readonly maxLength?: number;
+}
+
 const QuestionTextArea = forwardRef(
     (
-        { placeholder, className, value, onChange, width, focus = true, maxLength }: MultilineInput,
+        { placeholder, className, value, onChange, width, focus = true, maxLength }: MultilineInputProps,
         passedRef: ForwardedRef<HTMLTextAreaElement>
     ) => {
         const textareaRef = (passedRef as RefObject<HTMLTextAreaElement>) ?? useRef<HTMLTextAreaElement>(null);

diff --git a/packages/core/src/services/defaults/DefaultInputTypeResolver.ts b/packages/core/src/services/defaults/DefaultInputTypeResolver.ts
@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { DropDownProperties, RadioProperties, SliderProperties } from "../../model";
 import { QuestionJsonModel } from "../../model/json/JsonDataModels";
 import { registerQuickFormService } from "../QuickFormServices";
@@ -51,25 +52,27 @@ function parseInputProperties(questionJsonModel: QuestionJsonModel): DropDownPro
 
 registerQuickFormService("inputTypePropertiesTransformer", parseInputProperties);
 
-import React from "react";
 import { TextInput, MultilineInput, DropDownInput } from "../../components/question/input-types/index";
 import { InputProps } from "../../model/InputType";
 
-export type InputComponentType = React.ComponentType<InputProps>;
+export type InputComponentType = FC<InputProps>;
 
 export type InputComponentDictionary = {
     [key: string]: InputComponentType;
 };
 
 const inputComponents: InputComponentDictionary = {
-    "text": TextInput,
     // TODO - Create Radio
     "radio": TextInput,
-    // TODO - Create Slider
-    "slider": TextInput,
-    "multilinetext": MultilineInput,
     // TODO - Create Email
     "email": TextInput,
+    // TODO - Create Toggle
+    "toggle": TextInput,
+
+
+    "text": TextInput,
+    "slider": TextInput,
+    "multilinetext": MultilineInput,
     "dropdown": DropDownInput,
     "none": TextInput,
 };

diff --git a/packages/playground/dist/bundle.js b/packages/playground/dist/bundle.js
diff --git a/packages/playground/dist/index.html b/packages/playground/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>QuickForm development env</title><script defer="defer" src="bundle.js"></script></head><body><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700&amp;display=swap" rel="stylesheet"/><title>QuickForm development env</title><script defer="defer" src="bundle.js"></script></head><body><div id="root"></div></body></html>
diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx
@@ -6,7 +6,6 @@ import { QuickFormProvider } from '../../core/src/state';
 import { Editor } from '@monaco-editor/react';
 import { Button, QuickForm } from '../../core/src/components';
 import "./components/slider/SliderInput";
-import "./components/toggle/ToggleInput";
 
 export const App = () => {
     const [selectedTemplate, setSelectedTemplate] = useState<QuickFormDefinition>(cleanTestData as QuickFormDefinition);

diff --git a/packages/playground/src/components/slider/SliderInput.tsx b/packages/playground/src/components/slider/SliderInput.tsx
@@ -3,7 +3,7 @@ import { InputProps, registerInputComponent } from "@eavfw/quickform-core";
 import { SliderProperties } from "@eavfw/quickform-core/src/model";
 import styles from "./SliderInput.module.css";
 
-export const SliderInput: FC<InputProps> = ({ questionModel, onOutputChange }) => {
+export const SliderInput = ({ questionModel, onOutputChange }:InputProps) => {
     const min = Number((questionModel.inputProperties as SliderProperties).min) || 0;
     const max = Number((questionModel.inputProperties as SliderProperties).max) || 100;
     const unit = 'm2';

diff --git a/packages/playground/src/components/toggle/Toggle.module.css b/packages/playground/src/components/toggle/Toggle.module.css
diff --git a/packages/playground/src/components/toggle/ToggleInput.tsx b/packages/playground/src/components/toggle/ToggleInput.tsx