diff --git a/src/components/shared/wizard/RenderField.tsx b/src/components/shared/wizard/RenderField.tsx index 8f7c3500fc..7780f36342 100644 --- a/src/components/shared/wizard/RenderField.tsx +++ b/src/components/shared/wizard/RenderField.tsx @@ -5,23 +5,28 @@ import cn from "classnames"; import { useClickOutsideField } from "../../../hooks/wizardHooks"; import { isJson } from "../../../utils/utils"; import { getMetadataCollectionFieldName } from "../../../utils/resourceUtils"; -import DropDown from "../DropDown"; +import DropDown, { DropDownType } from "../DropDown"; import RenderDate from "../RenderDate"; import { parseISO } from "date-fns"; +import { FieldProps } from "formik"; +import { MetadataField } from "../../../slices/eventSlice"; const childRef = React.createRef(); /** * This component renders an editable field for single values depending on the type of the corresponding metadata */ const RenderField = ({ -// @ts-expect-error TS(7031): Binding element 'field' implicitly has an 'any' ty... Remove this comment to see the full error message field, -// @ts-expect-error TS(7031): Binding element 'metadataField' implicitly has an ... Remove this comment to see the full error message metadataField, -// @ts-expect-error TS(7031): Binding element 'form' implicitly has an 'any' typ... Remove this comment to see the full error message form, showCheck = false, isFirstField = false, +}: { + field: FieldProps["field"] + metadataField: MetadataField + form: FieldProps["form"] + showCheck?: boolean, + isFirstField?: boolean, }) => { const { t } = useTranslation(); @@ -29,8 +34,7 @@ const RenderField = ({ const {editMode, setEditMode} = useClickOutsideField(childRef, isFirstField); // Handle key down event and check if pressed key leads to leaving edit mode -// @ts-expect-error TS(7006): Parameter 'event' implicitly has an 'any' type. - const handleKeyDown = (event, type) => { + const handleKeyDown = (event: React.KeyboardEvent, type: MetadataField["type"]) => { const { key } = event; // keys pressable for leaving edit mode const keys = ["Escape", "Tab", "Enter"]; @@ -99,8 +103,6 @@ const RenderField = ({ text={field.value} editMode={editMode} setEditMode={setEditMode} -// @ts-expect-error TS(2322): Type '{ field: any; form: any; text: any; editMode... Remove this comment to see the full error message - isFirst={isFirstField} showCheck={showCheck} handleKeyDown={handleKeyDown} /> @@ -112,8 +114,6 @@ const RenderField = ({ form={form} editMode={editMode} setEditMode={setEditMode} -// @ts-expect-error TS(2322): Type '{ field: any; text: any; form: any; editMode... Remove this comment to see the full error message - isFirst={isFirstField} showCheck={showCheck} handleKeyDown={handleKeyDown} /> @@ -143,14 +143,15 @@ const RenderField = ({ // Renders editable field for a boolean value const EditableBooleanValue = ({ -// @ts-expect-error TS(7031): Binding element 'field' implicitly has an 'any' ty... Remove this comment to see the full error message field, -// @ts-expect-error TS(7031): Binding element 'handleKeyDown' implicitly has an ... Remove this comment to see the full error message handleKeyDown, -// @ts-expect-error TS(7031): Binding element 'initialValues' implicitly has an ... Remove this comment to see the full error message form: { initialValues }, -// @ts-expect-error TS(7031): Binding element 'showCheck' implicitly has an 'any... Remove this comment to see the full error message showCheck, +}: { + field: FieldProps["field"] + handleKeyDown: (event: React.KeyboardEvent, type: string) => void + form: FieldProps["form"] + showCheck?: boolean, }) => { return (
handleKeyDown(e, "input")} ref={childRef}> @@ -169,20 +170,21 @@ const EditableBooleanValue = ({ // Renders editable field for a data value const EditableDateValue = ({ -// @ts-expect-error TS(7031): Binding element 'field' implicitly has an 'any' ty... Remove this comment to see the full error message field, -// @ts-expect-error TS(7031): Binding element 'text' implicitly has an 'any' typ... Remove this comment to see the full error message text, -// @ts-expect-error TS(7031): Binding element 'setFieldValue' implicitly has an ... Remove this comment to see the full error message form: { setFieldValue, initialValues }, -// @ts-expect-error TS(7031): Binding element 'editMode' implicitly has an 'any'... Remove this comment to see the full error message editMode, -// @ts-expect-error TS(7031): Binding element 'setEditMode' implicitly has an 'a... Remove this comment to see the full error message setEditMode, -// @ts-expect-error TS(7031): Binding element 'showCheck' implicitly has an 'any... Remove this comment to see the full error message showCheck, -// @ts-expect-error TS(7031): handleKeyDown +}: { + field: FieldProps["field"] + text: string + form: FieldProps["form"] + editMode: boolean | undefined + setEditMode: (e: boolean) => void + showCheck?: boolean, + handleKeyDown: (event: React.KeyboardEvent, type: string) => void }) => editMode ? (
void + handleKeyDown: (event: React.KeyboardEvent, type: string) => void + form: FieldProps["form"] + showCheck?: boolean, }) => { const { t } = useTranslation(); @@ -253,11 +256,10 @@ const EditableSingleSelect = ({ setFieldValue(field.name, element.value)} + handleChange={(element) => element && setFieldValue(field.name, element.value)} placeholder={`-- ${t("SELECT_NO_OPTION_SELECTED")} --`} tabIndex={10} autoFocus={true} @@ -285,20 +287,21 @@ const EditableSingleSelect = ({ // Renders editable text area const EditableSingleValueTextArea = ({ -// @ts-expect-error TS(7031): Binding element 'field' implicitly has an 'any' ty... Remove this comment to see the full error message field, -// @ts-expect-error TS(7031): Binding element 'text' implicitly has an 'any' typ... Remove this comment to see the full error message text, -// @ts-expect-error TS(7031): Binding element 'editMode' implicitly has an 'any'... Remove this comment to see the full error message editMode, -// @ts-expect-error TS(7031): Binding element 'setEditMode' implicitly has an 'a... Remove this comment to see the full error message setEditMode, -// @ts-expect-error TS(7031): Binding element 'handleKeyDown' implicitly has an ... Remove this comment to see the full error message handleKeyDown, -// @ts-expect-error TS(7031): Binding element 'initialValues' implicitly has an ... Remove this comment to see the full error message form: { initialValues }, -// @ts-expect-error TS(7031): Binding element 'showCheck' implicitly has an 'any... Remove this comment to see the full error message showCheck, +}: { + field: FieldProps["field"] + text: string + editMode: boolean | undefined + setEditMode: (e: boolean) => void + handleKeyDown: (event: React.KeyboardEvent, type: string) => void + form: FieldProps["form"] + showCheck?: boolean, }) => { return editMode ? (
void + handleKeyDown: (event: React.KeyboardEvent, type: string) => void + showCheck?: boolean, }) => { return editMode ? (
void + showCheck?: boolean, + handleKeyDown: (event: React.KeyboardEvent, type: string) => void }) => { const { t } = useTranslation(); @@ -405,7 +410,7 @@ const EditableSingleValueTime = ({ handleKeyDown(event, "date") } }, - onBlur: (event) => { + onBlur: () => { setEditMode(false) } } diff --git a/src/components/shared/wizard/RenderMultiField.tsx b/src/components/shared/wizard/RenderMultiField.tsx index be0d4955b9..5aa0c6637e 100644 --- a/src/components/shared/wizard/RenderMultiField.tsx +++ b/src/components/shared/wizard/RenderMultiField.tsx @@ -2,6 +2,8 @@ import React, { useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import cn from "classnames"; import { useClickOutsideField } from "../../../hooks/wizardHooks"; +import { FieldInputProps, FieldProps } from "formik"; +import { MetadataField } from "../../../slices/eventSlice"; const childRef = React.createRef(); @@ -9,14 +11,17 @@ const childRef = React.createRef(); * This component renders an editable field for multiple values depending on the type of the corresponding metadata */ const RenderMultiField = ({ -// @ts-expect-error TS(7031): Binding element 'fieldInfo' implicitly has an 'any... Remove this comment to see the full error message fieldInfo, onlyCollectionValues = false, -// @ts-expect-error TS(7031): Binding element 'field' implicitly has an 'any' ty... Remove this comment to see the full error message field, -// @ts-expect-error TS(7031): Binding element 'form' implicitly has an 'any' typ... Remove this comment to see the full error message form, showCheck = false, +}: { + fieldInfo: MetadataField + onlyCollectionValues?: boolean + field: FieldProps["field"] + form: FieldProps["form"] + showCheck?: boolean, }) => { // Indicator if currently edit mode is activated const {editMode, setEditMode} = useClickOutsideField(childRef); @@ -26,14 +31,12 @@ const RenderMultiField = ({ let fieldValue = [...field.value]; // Handle change of value user currently types in -// @ts-expect-error TS(7006): Parameter 'e' implicitly has an 'any' type. - const handleChange = (e) => { + const handleChange = (e: React.ChangeEvent) => { const itemValue = e.target.value; setInputValue(itemValue); }; -// @ts-expect-error TS(7006): Parameter 'event' implicitly has an 'any' type. - const handleKeyDown = (event) => { + const handleKeyDown = (event: React.KeyboardEvent) => { // Check if pressed key is Enter if (event.keyCode === 13 && inputValue !== "") { event.preventDefault(); @@ -55,8 +58,7 @@ const RenderMultiField = ({ // add input to formik field value if not already added and input in collection of possible values if ( !fieldValue.find((e) => e === newInputValue) && - // @ts-expect-error TS(7006): Parameter 'e' implicitly has an 'any' type. - fieldInfo.collection.find((e) => e.value === newInputValue) + fieldInfo.collection?.find((e) => e.value === newInputValue) ) { fieldValue[fieldValue.length] = newInputValue; form.setFieldValue(field.name, fieldValue); @@ -75,8 +77,7 @@ const RenderMultiField = ({ } // Remove item/value from inserted field values -// @ts-expect-error TS(7006): Parameter 'key' implicitly has an 'any' type. - const removeItem = (key) => { + const removeItem = (key: number) => { fieldValue.splice(key, 1); form.setFieldValue(field.name, fieldValue); }; @@ -124,22 +125,23 @@ const RenderMultiField = ({ // Renders multi select const EditMultiSelect = ({ -// @ts-expect-error TS(7031): Binding element 'collection' implicitly has an 'an... Remove this comment to see the full error message collection, -// @ts-expect-error TS(7031): Binding element 'handleKeyDown' implicitly has an ... Remove this comment to see the full error message handleKeyDown, -// @ts-expect-error TS(7031): Binding element 'handleChange' implicitly has an '... Remove this comment to see the full error message handleChange, - // @ts-expect-error TS(7031): Binding element 'handleChange' implicitly has an '... Remove this comment to see the full error message handleBlur, -// @ts-expect-error TS(7031): Binding element 'inputValue' implicitly has an 'an... Remove this comment to see the full error message inputValue, -// @ts-expect-error TS(7031): Binding element 'removeItem' implicitly has an 'an... Remove this comment to see the full error message removeItem, -// @ts-expect-error TS(7031): Binding element 'field' implicitly has an 'any' ty... Remove this comment to see the full error message field, -// @ts-expect-error TS(7031): Binding element 'fieldValue' implicitly has an 'an... Remove this comment to see the full error message fieldValue, +}: { + collection: { [key: string]: unknown }[] + handleKeyDown: (event: React.KeyboardEvent) => void + handleChange: (event: React.ChangeEvent) => void + handleBlur: (refCurrent: string) => void + inputValue: HTMLInputElement["value"] + removeItem: (key: number) => void + field: FieldProps["field"] + fieldValue: FieldInputProps["value"] }) => { const { t } = useTranslation(); @@ -170,7 +172,6 @@ const EditMultiSelect = ({ /> {/* Display possible options for values as some kind of dropdown */} -{/* @ts-expect-error TS(7006): Parameter 'item' implicitly has an 'any' type. */} {collection.map((item, key) => ( ))} @@ -194,20 +195,21 @@ const EditMultiSelect = ({ // Renders editable field input for multiple values const EditMultiValue = ({ -// @ts-expect-error TS(7031): Binding element 'setEditMode' implicitly has an 'a... Remove this comment to see the full error message setEditMode, -// @ts-expect-error TS(7031): Binding element 'inputValue' implicitly has an 'an... Remove this comment to see the full error message inputValue, -// @ts-expect-error TS(7031): Binding element 'removeItem' implicitly has an 'an... Remove this comment to see the full error message removeItem, -// @ts-expect-error TS(7031): Binding element 'handleChange' implicitly has an '... Remove this comment to see the full error message handleChange, -// @ts-expect-error TS(7031): Binding element 'handleKeyDown' implicitly has an ... Remove this comment to see the full error message handleKeyDown, -// @ts-expect-error TS(7031): Binding element 'field' implicitly has an 'any' ty... Remove this comment to see the full error message field, -// @ts-expect-error TS(7031): Binding element 'fieldValue' implicitly has an 'an... Remove this comment to see the full error message fieldValue, +}: { + setEditMode: (e: boolean) => void + inputValue: HTMLInputElement["value"] + removeItem: (key: number) => void + handleChange: (event: React.ChangeEvent) => void + handleKeyDown: (event: React.KeyboardEvent) => void + field: FieldProps["field"] + fieldValue: FieldInputProps["value"] }) => { const { t } = useTranslation(); @@ -238,24 +240,21 @@ const EditMultiValue = ({ }; // Shows the values of the array in non-edit mode -const ShowValue : React.FC<{ - setEditMode: any, - form: any, - field: any, - showCheck: any, - fieldValue?: any, -}> = ({ +const ShowValue = ({ setEditMode, form: { initialValues }, field, showCheck, - fieldValue, +}: { + setEditMode: (e: boolean) => void + form: FieldProps["form"] + field: FieldProps["field"] + showCheck: any, }) => { return (
setEditMode(true)} className="show-edit"> {field.value instanceof Array && field.value.length !== 0 ? (
    -{/* @ts-expect-error TS(7006): Parameter 'item' implicitly has an 'any' type. */} {field.value.map((item, key) => (
  • {item} diff --git a/src/slices/eventSlice.ts b/src/slices/eventSlice.ts index 10854a06df..75785a0a72 100644 --- a/src/slices/eventSlice.ts +++ b/src/slices/eventSlice.ts @@ -89,9 +89,9 @@ export type Event = { workflow_state: string, } -type MetadataField = { +export type MetadataField = { differentValues?: boolean, - collection?: {}[], // different for e.g. languages and presenters + collection?: { [key: string]: unknown }[], // different for e.g. languages and presenters id: string, label: string, readOnly: boolean,