@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/components/FormComponents/RepeatGroup/AddItemButton.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Box, Button } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import type { RepeatGroupSingle } from '../../../interfaces/repeatGroup.interface';
+
+interface AddItemButtonProps {
+  repeatGroups: RepeatGroupSingle[];
+  onAddItem: () => void;
+}
+
+function AddItemButton(props: AddItemButtonProps) {
+  const { repeatGroups, onAddItem } = props;
+
+  const isDisabled = repeatGroups[repeatGroups.length - 1].qrItem === null;
+
+  return (
+    <Box display="flex" flexDirection="row-reverse">
+      <Button
+        variant="contained"
+        startIcon={<AddIcon />}
+        disabled={isDisabled}
+        onClick={onAddItem}
+        data-test="button-add-repeat-item">
+        Add Item
+      </Button>
+    </Box>
+  );
+}
+
+export default AddItemButton;

package/src/components/FormComponents/RepeatGroup/DeleteItemButton.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { RepeatDeleteTooltip } from '../RepeatItem/RepeatItem.styles';
+import { IconButton } from '@mui/material';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import type { QuestionnaireResponseItem } from 'fhir/r4';
+
+interface DeleteItemButtonProps {
+  nullableQrItem: QuestionnaireResponseItem | null;
+  numOfRepeatGroups: number;
+  onDeleteItem: () => void;
+}
+
+function DeleteItemButton(props: DeleteItemButtonProps) {
+  const { nullableQrItem, numOfRepeatGroups, onDeleteItem } = props;
+
+  const isDisabled = nullableQrItem === null || numOfRepeatGroups === 1;
+
+  return (
+    <RepeatDeleteTooltip className="repeat-group-delete" title="Delete item">
+      <span>
+        <IconButton size="small" color="error" disabled={isDisabled} onClick={onDeleteItem}>
+          <RemoveCircleOutlineIcon />
+        </IconButton>
+      </span>
+    </RepeatDeleteTooltip>
+  );
+}
+
+export default DeleteItemButton;

package/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import type { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
+import { QGroupContainerBox } from '../../Box.styles';
+import { Card, Collapse, Divider } from '@mui/material';
+import { QGroupHeadingTypography } from '../Typography.styles';
+import { TransitionGroup } from 'react-transition-group';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { nanoid } from 'nanoid';
+import RepeatGroupItem from './RepeatGroupItem';
+import AddItemButton from './AddItemButton';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface RepeatGroupProps extends PropsWithQrRepeatGroupChangeHandler {
+  qItem: QuestionnaireItem;
+  qrItems: QuestionnaireResponseItem[];
+  groupCardElevation: number;
+}
+
+function RepeatGroup(props: RepeatGroupProps) {
+  const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
+
+  const initialRepeatGroups = useInitialiseRepeatGroups(qrItems);
+
+  const [repeatGroups, setRepeatGroups] = useState(initialRepeatGroups);
+
+  function handleAnswerChange(newQrItem: QuestionnaireResponseItem, index: number) {
+    const updatedRepeatGroups = [...repeatGroups];
+
+    if (newQrItem.item) {
+      updatedRepeatGroups[index].qrItem = {
+        linkId: newQrItem.linkId,
+        text: newQrItem.text,
+        item: newQrItem.item
+      };
+    }
+
+    setRepeatGroups(updatedRepeatGroups);
+    onQrRepeatGroupChange({
+      linkId: qItem.linkId,
+      qrItems: updatedRepeatGroups.flatMap((singleGroup) =>
+        singleGroup.qrItem ? [singleGroup.qrItem] : []
+      )
+    });
+  }
+
+  function handleDeleteItem(index: number) {
+    const updatedRepeatGroups = [...repeatGroups];
+
+    updatedRepeatGroups.splice(index, 1);
+
+    setRepeatGroups(updatedRepeatGroups);
+    onQrRepeatGroupChange({
+      linkId: qItem.linkId,
+      qrItems: updatedRepeatGroups.flatMap((singleGroup) =>
+        singleGroup.qrItem ? [singleGroup.qrItem] : []
+      )
+    });
+  }
+
+  function handleAddItem() {
+    setRepeatGroups([
+      ...repeatGroups,
+      {
+        nanoId: nanoid(),
+        qrItem: null
+      }
+    ]);
+  }
+
+  return (
+    <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
+      <Card elevation={groupCardElevation} sx={{ p: 3, py: 2.5, mb: 3.5 }}>
+        <QGroupHeadingTypography variant="h6">
+          <LabelWrapper qItem={qItem} />
+        </QGroupHeadingTypography>
+        <Divider sx={{ mt: 1, mb: 1.5 }} light />
+        <TransitionGroup>
+          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+            const answeredQrItem = createEmptyQrItem(qItem);
+            if (nullableQrItem) {
+              answeredQrItem.item = nullableQrItem.item;
+            }
+
+            return (
+              <Collapse key={nanoId} timeout={200}>
+                <RepeatGroupItem
+                  qItem={qItem}
+                  answeredQrItem={answeredQrItem}
+                  nullableQrItem={nullableQrItem}
+                  numOfRepeatGroups={repeatGroups.length}
+                  groupCardElevation={groupCardElevation + 1}
+                  onDeleteItem={() => handleDeleteItem(index)}
+                  onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+                />
+              </Collapse>
+            );
+          })}
+        </TransitionGroup>
+
+        <AddItemButton repeatGroups={repeatGroups} onAddItem={handleAddItem} />
+      </Card>
+    </QGroupContainerBox>
+  );
+}
+
+export default RepeatGroup;

package/src/components/FormComponents/RepeatGroup/RepeatGroupItem.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { RepeatGroupContainerStack } from '../RepeatItem/RepeatItem.styles';
+import { Box } from '@mui/material';
+import GroupItem from '../GroupItem/GroupItem';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import DeleteItemButton from './DeleteItemButton';
+
+interface RepeatGroupItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  answeredQrItem: QuestionnaireResponseItem;
+  nullableQrItem: QuestionnaireResponseItem | null;
+  numOfRepeatGroups: number;
+  groupCardElevation: number;
+  onDeleteItem: () => void;
+}
+
+function RepeatGroupItem(props: RepeatGroupItemProps) {
+  const {
+    qItem,
+    answeredQrItem,
+    nullableQrItem,
+    numOfRepeatGroups,
+    groupCardElevation,
+    onDeleteItem,
+    onQrItemChange
+  } = props;
+
+  return (
+    <RepeatGroupContainerStack direction="row" justifyContent="end">
+      <Box sx={{ flexGrow: 1 }}>
+        <GroupItem
+          qItem={qItem}
+          qrItem={answeredQrItem}
+          isRepeated={true}
+          groupCardElevation={groupCardElevation + 1}
+          onQrItemChange={onQrItemChange}
+        />
+      </Box>
+      <DeleteItemButton
+        nullableQrItem={nullableQrItem}
+        numOfRepeatGroups={numOfRepeatGroups}
+        onDeleteItem={onDeleteItem}
+      />
+    </RepeatGroupContainerStack>
+  );
+}
+
+export default RepeatGroupItem;

package/src/components/FormComponents/RepeatItem/AddItemButton.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Box, Button } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import type { RepeatAnswer } from '../../../interfaces/repeatItem.interface';
+
+interface AddItemButtonProps {
+  repeatAnswers: RepeatAnswer[];
+  onAddItem: () => void;
+}
+
+function AddItemButton(props: AddItemButtonProps) {
+  const { repeatAnswers, onAddItem } = props;
+
+  const isDisabled = repeatAnswers[repeatAnswers.length - 1].answer === null;
+
+  return (
+    <Box display="flex" flexDirection="row-reverse">
+      <Button
+        variant="contained"
+        startIcon={<AddIcon />}
+        disabled={isDisabled}
+        onClick={onAddItem}
+        data-test="button-add-repeat-item">
+        Add Item
+      </Button>
+    </Box>
+  );
+}
+
+export default AddItemButton;

package/src/components/FormComponents/RepeatItem/DeleteItemButton.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { RepeatDeleteTooltip } from './RepeatItem.styles';
+import { IconButton } from '@mui/material';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import type { QuestionnaireResponseItemAnswer } from 'fhir/r4';
+
+interface DeleteItemButtonProps {
+  answer: QuestionnaireResponseItemAnswer | null;
+  numOfRepeatAnswers: number;
+  onDeleteAnswer: () => void;
+}
+
+function DeleteItemButton(props: DeleteItemButtonProps) {
+  const { answer, numOfRepeatAnswers, onDeleteAnswer } = props;
+
+  const isDisabled = answer === null || numOfRepeatAnswers === 1;
+
+  return (
+    <RepeatDeleteTooltip className="repeat-item-delete" title="Delete item">
+      <span>
+        <IconButton size="small" color="error" disabled={isDisabled} onClick={onDeleteAnswer}>
+          <RemoveCircleOutlineIcon fontSize="small" />
+        </IconButton>
+      </span>
+    </RepeatDeleteTooltip>
+  );
+}
+
+export default DeleteItemButton;

package/src/components/FormComponents/RepeatItem/RepeatField.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Box } from '@mui/material';
+import { RepeatItemContainerStack } from './RepeatItem.styles';
+import SingleItem from '../SingleItem/SingleItem';
+import type {
+  QuestionnaireItem,
+  QuestionnaireResponseItem,
+  QuestionnaireResponseItemAnswer
+} from 'fhir/r4';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import DeleteItemButton from './DeleteItemButton';
+
+interface RepeatFieldProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  answer: QuestionnaireResponseItemAnswer | null;
+  numOfRepeatAnswers: number;
+  onDeleteAnswer: () => void;
+}
+
+function RepeatField(props: RepeatFieldProps) {
+  const { qItem, qrItem, answer, numOfRepeatAnswers, onDeleteAnswer, onQrItemChange } = props;
+
+  return (
+    <RepeatItemContainerStack direction="row">
+      <Box sx={{ flexGrow: 1 }}>
+        <SingleItem
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={qItem.repeats ?? false}
+          isTabled={false}
+          onQrItemChange={onQrItemChange}
+        />
+      </Box>
+      <DeleteItemButton
+        answer={answer}
+        numOfRepeatAnswers={numOfRepeatAnswers}
+        onDeleteAnswer={onDeleteAnswer}
+      />
+    </RepeatItemContainerStack>
+  );
+}
+
+export default RepeatField;

package/src/components/FormComponents/RepeatItem/RepeatItem.styles.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Stack, styled, Tooltip } from '@mui/material';
+
+export const RepeatDeleteTooltip = styled(Tooltip)(() => ({
+  marginLeft: 8
+}));
+
+export const RepeatItemContainerStack = styled(Stack)(() => ({
+  alignItems: 'center',
+  paddingBottom: 8
+}));
+
+export const RepeatGroupContainerStack = styled(Stack)(() => ({
+  alignItems: 'center',
+  paddingBottom: 16
+}));

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -0,0 +1,116 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState } from 'react';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { nanoid } from 'nanoid';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import AddItemButton from './AddItemButton';
+import { TransitionGroup } from 'react-transition-group';
+import RepeatField from './RepeatField';
+import { Collapse } from '@mui/material';
+import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+
+interface RepeatItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function RepeatItem(props: RepeatItemProps) {
+  const { qItem, qrItem, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayInstructions } = useRenderingExtensions(qItem);
+
+  const initialRepeatAnswers = useInitialiseRepeatAnswers(qrItem);
+
+  const [repeatAnswers, setRepeatAnswers] = useState(initialRepeatAnswers);
+
+  // Event Handlers
+  function handleAnswerChange(newQrItem: QuestionnaireResponseItem, index: number) {
+    const updatedRepeatAnswers = [...repeatAnswers];
+    updatedRepeatAnswers[index].answer = newQrItem.answer ? newQrItem.answer[0] : null;
+
+    setRepeatAnswers(updatedRepeatAnswers);
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: updatedRepeatAnswers.flatMap((repeatAnswer) =>
+        repeatAnswer.answer ? [repeatAnswer.answer] : []
+      )
+    });
+  }
+
+  function handleDeleteItem(index: number) {
+    const updatedRepeatAnswers = [...repeatAnswers];
+
+    updatedRepeatAnswers.splice(index, 1);
+
+    setRepeatAnswers(updatedRepeatAnswers);
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: updatedRepeatAnswers.flatMap((repeatAnswer) =>
+        repeatAnswer.answer ? [repeatAnswer.answer] : []
+      )
+    });
+  }
+
+  function handleAddItem() {
+    setRepeatAnswers([
+      ...repeatAnswers,
+      {
+        nanoId: nanoid(),
+        answer: null
+      }
+    ]);
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-repeat-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <TransitionGroup>
+          {repeatAnswers.map(({ nanoId, answer }, index) => {
+            const repeatAnswerQrItem = createEmptyQrItem(qItem);
+            if (answer) {
+              repeatAnswerQrItem.answer = [answer];
+            }
+
+            return (
+              <Collapse key={nanoId} timeout={200}>
+                <RepeatField
+                  qItem={qItem}
+                  qrItem={repeatAnswerQrItem}
+                  answer={answer}
+                  numOfRepeatAnswers={repeatAnswers.length}
+                  onDeleteAnswer={() => handleDeleteItem(index)}
+                  onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+                />
+              </Collapse>
+            );
+          })}
+        </TransitionGroup>
+      </ItemFieldGrid>
+
+      <AddItemButton repeatAnswers={repeatAnswers} onAddItem={handleAddItem} />
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default RepeatItem;

package/src/components/FormComponents/SingleItem/SingleItem.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useCallback } from 'react';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
+import SingleItemSwitcher from './SingleItemSwitcher';
+
+interface SingleItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function SingleItem(props: SingleItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
+
+  const handleQrItemChange = useCallback(
+    (newQrItem: QuestionnaireResponseItem) => {
+      if (newQrItem.answer) {
+        updateEnableWhenItem(qItem.linkId, newQrItem.answer);
+      }
+      onQrItemChange(newQrItem);
+    },
+    [updateEnableWhenItem, onQrItemChange, qItem.linkId]
+  );
+
+  return (
+    <SingleItemSwitcher
+      qItem={qItem}
+      qrItem={qrItem}
+      isRepeated={isRepeated}
+      isTabled={isTabled}
+      onQrItemChange={handleQrItemChange}
+    />
+  );
+}
+
+export default SingleItem;