feat: add additional button for multilang array of strings and onblur…

… support
Informasjonsforvaltning · Jan 9, 2025 · 4ccb796 · 4ccb796
1 parent 73b8b81
commit 4ccb796
Showing 1 changed file with 4 additions and 26 deletions.
diff --git a/libs/ui/src/lib/formik-language-fieldset/index.tsx b/libs/ui/src/lib/formik-language-fieldset/index.tsx
@@ -2,13 +2,12 @@
 
 import { ReactNode, useState } from 'react';
 import { localization } from '@catalog-frontend/utils';
-import { Fieldset, Box, Paragraph, Textfield, ErrorMessage, Chip, Chip } from '@digdir/designsystemet-react';
+import { Fieldset, Box, Paragraph, Textfield, ErrorMessage, Chip } from '@digdir/designsystemet-react';
 import { FastField, useFormikContext } from 'formik';
 
 import styles from './formik-language-fieldset.module.scss';
 import { ISOLanguage, LocalizedStrings } from '@catalog-frontend/types';
 import { TextareaWithPrefix } from '../textarea-with-prefix';
-import _ from 'lodash';
 import { AddButton, DeleteButton } from '../button';
 import _ from 'lodash';
 
@@ -20,7 +19,6 @@ type LanuguageFieldsetProps = {
   requiredLanguages?: Omit<ISOLanguage, 'no'>[];
   as?: typeof Textfield | typeof TextareaWithPrefix;
   multiple?: boolean;
-  multiple?: boolean;
 };
 
 const allowedLanguages = Object.freeze<ISOLanguage[]>(['nb', 'nn', 'en']);
@@ -33,10 +31,8 @@ export const FormikLanguageFieldset = ({
   requiredLanguages,
   as: renderAs = Textfield,
   multiple = false,
-  multiple = false,
 }: LanuguageFieldsetProps) => {
-  const { errors, values, values, getFieldMeta, setFieldValue } = useFormikContext<Record<string, LocalizedStrings>>();
-  const [textValue, setTextValue] = useState<Record<string, string>>({});
+  const { errors, values, getFieldMeta, setFieldValue } = useFormikContext<Record<string, LocalizedStrings>>();
   const [textValue, setTextValue] = useState<Record<string, string>>({});
 
   const handleAddLanguage = (lang: string) => {
@@ -51,24 +47,6 @@ export const FormikLanguageFieldset = ({
     setTextValue((prev) => ({ ...prev, ...{ [lang]: value } }));
   };
 
-  const handleAddTextValue = (code: string, lang: string) => {
-    if(code === 'Enter') {
-      const textValues = [...(values?.[name]?.[lang] as string[]), textValue[lang]];
-      setFieldValue(`${name}.${lang}`, textValues);
-      setTextValue((prev) => ({ ...prev, ...{ [lang]: '' } }));
-    }    
-  };
-
-  const handleRemoveTextValue = (index: number, lang: string) => {
-    const textValues = [...(values?.[name]?.[lang] as string[])];
-    textValues.splice(index, 1);
-    setFieldValue(`${name}.${lang}`, textValues);
-  };
-
-  const handleOnChangeTextValue = (value: string, lang: string) => {
-    setTextValue((prev) => ({ ...prev, ...{ [lang]: value } }));
-  };
-
   const handleAddTextValue = (lang: string) => {
     if (Boolean(textValue[lang]) === true) {
       const textValues = [...(values?.[name]?.[lang] as string[]), textValue[lang]];
@@ -123,8 +101,8 @@ export const FormikLanguageFieldset = ({
                 />
 
                 <DeleteButton
-                  variant='tertiary'
-                  onClick={() => handleRemoveLanguage(lang)}
+                  onKeyDown={(e) => { if(e.code === 'Enter') { handleAddTextValue(lang) } }}
+                  onBlur={() => handleAddTextValue(lang)}
                 />
               </Box>
               <Chip.Group size='sm'>