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 && (
-
- Remove
-
- )}
+
+ Remove
+
>
@@ -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 && (
-
- +
-
- )}
+
+ Remove
+
);