Add prop validation

Altinn · Nov 1, 2024 · b30e077 · b30e077
1 parent f49b98c
commit b30e077
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 32 deletions.
diff --git a/...omponents/config/editModal/EditOptions/OptionTabs/EditManualOptions/EditManualOptions.tsx b/...omponents/config/editModal/EditOptions/OptionTabs/EditManualOptions/EditManualOptions.tsx
@@ -48,32 +48,30 @@ export function EditManualOptions({ component, handleComponentChange }: EditManu
   };
 
   return (
-    <>
-      <StudioProperty.Group>
-        {component.options?.map((option, index) => {
-          const removeItem = () => handleRemoveOption(index);
-          const key = mappedOptionIds[index];
-          const optionNumber = index + 1;
-          const legend =
-            component.type === 'RadioButtons'
-              ? t('ux_editor.radios_option', { optionNumber })
-              : t('ux_editor.checkboxes_option', { optionNumber });
-          return (
-            <EditOption
-              key={key}
-              legend={legend}
-              onChange={handleOptionChange(index)}
-              onDelete={removeItem}
-              option={option}
-            />
-          );
-        })}
-        <StudioProperty.Button
-          disabled={component.options?.some(({ label }) => !label)}
-          onClick={handleAddOption}
-          property={t('ux_editor.modal_new_option')}
-        />
-      </StudioProperty.Group>
-    </>
+    <StudioProperty.Group>
+      {component.options?.map((option, index) => {
+        const removeItem = () => handleRemoveOption(index);
+        const key = mappedOptionIds[index];
+        const optionNumber = index + 1;
+        const legend =
+          component.type === 'RadioButtons'
+            ? t('ux_editor.radios_option', { optionNumber })
+            : t('ux_editor.checkboxes_option', { optionNumber });
+        return (
+          <EditOption
+            key={key}
+            legend={legend}
+            onChange={handleOptionChange(index)}
+            onDelete={removeItem}
+            option={option}
+          />
+        );
+      })}
+      <StudioProperty.Button
+        disabled={component.options?.some(({ label }) => !label)}
+        onClick={handleAddOption}
+        property={t('ux_editor.modal_new_option')}
+      />
+    </StudioProperty.Group>
   );
 }
diff --git a/.../packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/OptionTabs.tsx b/.../packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/OptionTabs.tsx
@@ -1,5 +1,5 @@
 import { getSelectedOptionsType } from '@altinn/ux-editor/utils/optionsUtils';
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import classes from '@altinn/ux-editor/components/config/editModal/EditOptions/EditOptions.module.css';
 import { EditCodeList, EditCodeListReference } from './EditCodeList';
@@ -9,13 +9,22 @@ import { EditManualOptionsWithEditor } from './EditManualOptionsWithEditor';
 import { EditManualOptions } from './EditManualOptions';
 import { StudioTabs, StudioAlert, StudioErrorMessage } from '@studio/components';
 import { useComponentErrorMessage } from '@altinn/ux-editor/hooks';
+import type { IGenericEditComponent } from '@altinn/ux-editor/components/config/componentConfig';
+import type { SelectionComponentType } from '@altinn/ux-editor/types/FormComponent';
+
+type OptionTabsProps = {
+  optionListIds: string[];
+  renderOptions?: {
+    isLayoutOptionsUnsupported?: boolean;
+  };
+} & Pick<IGenericEditComponent<SelectionComponentType>, 'component' | 'handleComponentChange'>;
 
 export const OptionTabs = ({
-  optionListIds,
   component,
   handleComponentChange,
+  optionListIds,
   renderOptions,
-}): ReactElement => {
+}: OptionTabsProps) => {
   const initialSelectedOptionsType = getSelectedOptionsType(
     component.optionsId,
     component.options,
@@ -79,11 +88,15 @@ export const OptionTabs = ({
   );
 };
 
+type RenderManualOptionsProps = {
+  isLayoutOptionsUnsupported: boolean;
+} & Pick<IGenericEditComponent<SelectionComponentType>, 'component' | 'handleComponentChange'>;
+
 const RenderManualOptions = ({
   component,
   handleComponentChange,
   isLayoutOptionsUnsupported,
-}): ReactElement => {
+}: RenderManualOptionsProps) => {
   const errorMessage = useComponentErrorMessage(component);
   const { t } = useTranslation();
 

diff --git a/...or/src/components/config/editModal/EditOptions/OptionTabs/hooks/useCodeListEditorTexts.ts b/...or/src/components/config/editModal/EditOptions/OptionTabs/hooks/useCodeListEditorTexts.ts
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { CodeListEditorTexts } from '@studio/components';
+import type { CodeListEditorTexts } from '@studio/components';
 
 export const useCodeListEditorTexts = (): CodeListEditorTexts => {
   const { t } = useTranslation();