diff --git a/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx b/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx index c14094da..573aa4c7 100644 --- a/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx +++ b/web/src/components/QRFormWrapper/components/group/RepeatableGroups/index.tsx @@ -1,6 +1,6 @@ import { GroupItemProps } from '@beda.software/fhir-questionnaire/vendor/sdc-qrf'; import React from 'react'; -import { useForm, useFieldArray } from 'react-hook-form'; +import { useFieldArray, useForm } from 'react-hook-form'; import s from './RepeatableGroups.module.scss'; import { QuestionItems } from '../../questionItems'; @@ -14,49 +14,38 @@ interface RepeatableGroupsProps { export function RepeatableGroups(props: RepeatableGroupsProps) { const { groupItem, renderGroup } = props; const { parentPath, questionItem } = groupItem; - const { linkId, required } = questionItem; + const { linkId } = questionItem; const baseFieldPath = [...parentPath, linkId]; const fieldName = baseFieldPath.join('.'); - const { control } = useForm({ - defaultValues: { - [fieldName]: { - items: required ? [{}] : [], - }, - }, - }); - + const { control } = useForm(); const { fields, append, remove } = useFieldArray({ control, - name: `${fieldName}.items`, + name: fieldName, }); - const handleAddAnswer = () => { - append({}); - }; - return (
- {fields.map((item, index) => ( - - {renderGroup ? ( - renderGroup({ + {fields.map((field, index) => { + return renderGroup ? ( + + {renderGroup({ index, - input: item, groupItem, - }) - ) : ( - remove(index)} - /> - )} - - ))} + remove: () => remove(index), + })} + + ) : ( + remove(index)} + /> + ); + })}
-
@@ -66,42 +55,35 @@ export function RepeatableGroups(props: RepeatableGroupsProps) { interface RepeatableGroupProps { index: number; - input: any; groupItem: GroupItemProps; - onRemove?: () => void; + remove: () => void; } function useRepeatableGroup(props: RepeatableGroupProps) { - const { index, input, groupItem } = props; + const { index, groupItem, remove } = props; const { parentPath, questionItem, context } = groupItem; const { linkId } = questionItem; - const onRemove = () => { - input.remove(index); - }; - return { - onRemove, + onRemove: remove, parentPath: [...parentPath, linkId, 'items', index.toString()], context: context[0]!, }; } export function RepeatableGroupDefault(props: RepeatableGroupProps) { - const { index, groupItem, onRemove } = props; + const { index, groupItem } = props; const { questionItem } = groupItem; const { item } = questionItem; - const { parentPath, context } = useRepeatableGroup(props); + const { onRemove, parentPath, context } = useRepeatableGroup(props); return ( <>
{`${questionItem.text} #${index + 1}`} - {onRemove && ( - - )} +
@@ -109,20 +91,18 @@ export function RepeatableGroupDefault(props: RepeatableGroupProps) { } export function RepeatableGroupRow(props: RepeatableGroupProps) { - const { groupItem, onRemove } = props; + const { groupItem } = props; const { questionItem } = groupItem; const { item } = questionItem; - const { parentPath, context } = useRepeatableGroup(props); + const { onRemove, parentPath, context } = useRepeatableGroup(props); return (
- {onRemove && ( - - )} +
);