@aehrc/smart-forms-renderer 0.7.2 → 0.8.0

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerOptionFields.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 { StyledFormGroup } from '../Item.styles';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import CheckboxSingle from '../ItemParts/CheckboxSingle';
+import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
+import type { QuestionnaireItem, QuestionnaireResponseItemAnswer } from 'fhir/r4';
+
+interface OpenChoiceCheckboxAnswerOptionFieldsProps {
+  qItem: QuestionnaireItem;
+  answers: QuestionnaireResponseItemAnswer[];
+  openLabelText: string | null;
+  openLabelValue: string;
+  openLabelChecked: boolean;
+  readOnly: boolean;
+  orientation: ChoiceItemOrientation;
+  onValueChange: (changedOptionValue: string | null, changedOpenLabelValue: string | null) => void;
+  onOpenLabelCheckedChange: (checked: boolean) => void;
+  onOpenLabelInputChange: (input: string) => void;
+}
+
+function OpenChoiceCheckboxAnswerOptionFields(props: OpenChoiceCheckboxAnswerOptionFieldsProps) {
+  const {
+    qItem,
+    answers,
+    openLabelText,
+    openLabelValue,
+    openLabelChecked,
+    readOnly,
+    orientation,
+    onValueChange,
+    onOpenLabelCheckedChange,
+    onOpenLabelInputChange
+  } = props;
+
+  return (
+    <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
+      {qItem.answerOption?.map((option) => {
+        if (option['valueCoding']) {
+          return (
+            <CheckboxSingle
+              key={option.valueCoding.code ?? ''}
+              value={option.valueCoding.code ?? ''}
+              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+              readOnly={readOnly}
+              isChecked={answers.some(
+                (answer) => JSON.stringify(answer) === JSON.stringify(option)
+              )}
+              onCheckedChange={(changedValue) => onValueChange(changedValue, null)}
+            />
+          );
+        }
+
+        if (option['valueString']) {
+          return (
+            <CheckboxSingle
+              key={option.valueString}
+              value={option.valueString}
+              label={option.valueString}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueString === option.valueString)}
+              onCheckedChange={(changedValue) => onValueChange(changedValue, null)}
+            />
+          );
+        }
+
+        if (option['valueInteger']) {
+          return (
+            <CheckboxSingle
+              key={option.valueInteger}
+              value={option.valueInteger.toString()}
+              label={option.valueInteger.toString()}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueInteger === option.valueInteger)}
+              onCheckedChange={(changedValue) => onValueChange(changedValue, null)}
+            />
+          );
+        }
+
+        return null;
+      })}
+
+      {openLabelText ? (
+        <CheckboxSingleWithOpenLabel
+          value={openLabelValue}
+          label={openLabelText}
+          isChecked={openLabelChecked}
+          onCheckedChange={onOpenLabelCheckedChange}
+          onInputChange={onOpenLabelInputChange}
+        />
+      ) : null}
+    </StyledFormGroup>
+  );
+}
+
+export default OpenChoiceCheckboxAnswerOptionFields;

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceCheckboxAnswerOptionItem.tsx

@@ -17,13 +17,11 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 import Grid from '@mui/material/Grid';
-import { CheckBoxOption, ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import { CheckBoxOption } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import CheckboxSingle from '../ItemParts/CheckboxSingle';
 import { getOpenLabelText } from '../../../utils/itemControl';
-import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
-import { QFormGroup } from '../Item.styles';
 import {
   getOldOpenLabelAnswer,
   updateQrOpenChoiceCheckboxAnswers
@@ -33,22 +31,25 @@ import debounce from 'lodash.debounce';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import OpenChoiceCheckboxAnswerOptionFields from './OpenChoiceCheckboxAnswerOptionFields';
 
 interface OpenChoiceCheckboxAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithIsRepeatedAttribute {
+    PropsWithIsRepeatedAttribute,
+    PropsWithTextShownAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
   orientation: ChoiceItemOrientation;
 }
 
 function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptionItemProps) {
-  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+  const { qItem, qrItem, orientation, isRepeated, textShown = true, onQrItemChange } = props;
 
   // Init answers
   const qrOpenChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
@@ -115,79 +116,59 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
     [handleValueChange]
   ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
 
-  const openChoiceCheckbox = (
-    <QFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
-      {qItem.answerOption?.map((option) => {
-        if (option['valueCoding']) {
-          return (
-            <CheckboxSingle
-              key={option.valueCoding.code ?? ''}
-              value={option.valueCoding.code ?? ''}
-              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
-              readOnly={readOnly}
-              isChecked={answers.some(
-                (answer) => JSON.stringify(answer) === JSON.stringify(option)
-              )}
-              onCheckedChange={(changedValue) => handleValueChange(changedValue, null)}
-            />
-          );
-        } else if (option['valueString']) {
-          return (
-            <CheckboxSingle
-              key={option.valueString}
-              value={option.valueString}
-              label={option.valueString}
-              readOnly={readOnly}
-              isChecked={answers.some((answer) => answer.valueString === option.valueString)}
-              onCheckedChange={(changedValue) => handleValueChange(changedValue, null)}
-            />
-          );
-        } else if (option['valueInteger']) {
-          return (
-            <CheckboxSingle
-              key={option.valueInteger}
-              value={option.valueInteger.toString()}
-              label={option.valueInteger.toString()}
+  function handleOpenLabelCheckedChange(checked: boolean) {
+    handleValueChange(null, openLabelValue);
+    setOpenLabelChecked(checked);
+  }
+
+  function handleOpenLabelInputChange(newValue: string) {
+    setOpenLabelValue(newValue);
+    updateOpenLabelValueWithDebounce(newValue);
+  }
+
+  if (textShown) {
+    return (
+      <FullWidthFormComponentBox data-test="q-item-open-choice-checkbox-answer-option-box">
+        <Grid container columnSpacing={6}>
+          <Grid item xs={5}>
+            <LabelWrapper qItem={qItem} />
+          </Grid>
+          <Grid item xs={7}>
+            <OpenChoiceCheckboxAnswerOptionFields
+              qItem={qItem}
+              answers={answers}
+              openLabelText={openLabelText}
+              openLabelValue={openLabelValue}
+              openLabelChecked={openLabelChecked}
               readOnly={readOnly}
-              isChecked={answers.some((answer) => answer.valueInteger === option.valueInteger)}
-              onCheckedChange={(changedValue) => handleValueChange(changedValue, null)}
+              orientation={orientation}
+              onValueChange={handleValueChange}
+              onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
+              onOpenLabelInputChange={handleOpenLabelInputChange}
             />
-          );
-        } else {
-          return null;
-        }
-      })}
-
-      {openLabelText ? (
-        <CheckboxSingleWithOpenLabel
-          value={openLabelValue}
-          label={openLabelText}
-          isChecked={openLabelChecked}
-          onCheckedChange={(checked) => {
-            handleValueChange(null, openLabelValue);
-            setOpenLabelChecked(checked);
-          }}
-          onInputChange={(input) => {
-            setOpenLabelValue(input);
-            updateOpenLabelValueWithDebounce(input);
-          }}
-        />
-      ) : null}
-    </QFormGroup>
-  );
+            <DisplayInstructions displayInstructions={displayInstructions} />
+          </Grid>
+        </Grid>
+      </FullWidthFormComponentBox>
+    );
+  }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-open-choice-checkbox-answer-option-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
-        </Grid>
-        <Grid item xs={7}>
-          {openChoiceCheckbox}
-          <DisplayInstructions displayInstructions={displayInstructions} />
-        </Grid>
-      </Grid>
-    </FullWidthFormComponentBox>
+    <>
+      <OpenChoiceCheckboxAnswerOptionFields
+        qItem={qItem}
+        answers={answers}
+        openLabelText={openLabelText}
+        openLabelValue={openLabelValue}
+        openLabelChecked={openLabelChecked}
+        readOnly={readOnly}
+        orientation={orientation}
+        onValueChange={handleValueChange}
+        onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
+        onOpenLabelInputChange={handleOpenLabelInputChange}
+      />
+      <DisplayInstructions displayInstructions={displayInstructions} />
+    </>
   );
 }
 

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceItemSwitcher.tsx

@@ -28,19 +28,21 @@ import OpenChoiceRadioAnswerOptionItem from './OpenChoiceRadioAnswerOptionItem';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 
 interface OpenChoiceItemSwitcherProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithTextShownAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
   const orientation = getChoiceOrientation(qItem);
 
   switch (getOpenChoiceControlType(qItem)) {
@@ -49,9 +51,10 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
         <OpenChoiceCheckboxAnswerOptionItem
           qItem={qItem}
           qrItem={qrItem}
+          orientation={orientation}
           isRepeated={qItem['repeats'] ?? false}
+          textShown={textShown}
           onQrItemChange={onQrItemChange}
-          orientation={orientation}
         />
       );
     case OpenChoiceItemControl.Radio:
@@ -59,9 +62,9 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
         <OpenChoiceRadioAnswerOptionItem
           qItem={qItem}
           qrItem={qrItem}
+          orientation={orientation}
           isRepeated={qItem['repeats'] ?? false}
           onQrItemChange={onQrItemChange}
-          orientation={orientation}
         />
       );
     case OpenChoiceItemControl.Autocomplete:

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerOptionFields.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 type { ChangeEvent } from 'react';
+import React from 'react';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { StyledRadioGroup } from '../Item.styles';
+import RadioButtonWithOpenLabel from '../ItemParts/RadioButtonWithOpenLabel';
+import RadioAnswerOptionButtons from '../ItemParts/RadioAnswerOptionButtons';
+
+interface OpenChoiceRadioAnswerOptionFieldsProps {
+  qItem: QuestionnaireItem;
+  valueRadio: string | null;
+  openLabelText: string | null;
+  openLabelValue: string | null;
+  openLabelSelected: boolean;
+  orientation: ChoiceItemOrientation;
+  readOnly: boolean;
+  onValueChange: (changedOptionValue: string | null, changedOpenLabelValue: string | null) => void;
+}
+
+function OpenChoiceRadioAnswerOptionFields(props: OpenChoiceRadioAnswerOptionFieldsProps) {
+  const {
+    qItem,
+    valueRadio,
+    openLabelText,
+    openLabelValue,
+    openLabelSelected,
+    orientation,
+    readOnly,
+    onValueChange
+  } = props;
+
+  return (
+    <StyledRadioGroup
+      row={orientation === ChoiceItemOrientation.Horizontal}
+      name={qItem.text}
+      id={qItem.id}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => onValueChange(e.target.value, null)}
+      value={valueRadio}
+      data-test="q-item-radio-group">
+      <RadioAnswerOptionButtons qItem={qItem} readOnly={readOnly} />
+
+      {openLabelText ? (
+        <RadioButtonWithOpenLabel
+          value={openLabelValue}
+          label={openLabelText}
+          readOnly={readOnly}
+          isSelected={openLabelSelected}
+          onInputChange={(input) => onValueChange(null, input)}
+        />
+      ) : null}
+    </StyledRadioGroup>
+  );
+}
+
+export default OpenChoiceRadioAnswerOptionFields;

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceRadioAnswerOptionItem.tsx

@@ -15,19 +15,15 @@
  * limitations under the License.
  */
 
-import type { ChangeEvent } from 'react';
 import React, { useState } from 'react';
 import Grid from '@mui/material/Grid';
-import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { getOpenLabelText } from '../../../utils/itemControl';
-import { QRadioGroup } from '../Item.styles';
 import { getOldOpenLabelAnswer } from '../../../utils/openChoice';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import ChoiceRadioSingle from '../ChoiceItems/ChoiceRadioSingle';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
-import RadioButtonWithOpenLabel from '../ItemParts/RadioButtonWithOpenLabel';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
@@ -35,6 +31,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import OpenChoiceRadioAnswerOptionFields from './OpenChoiceRadioAnswerOptionFields';
 
 interface OpenChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -119,59 +116,6 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
     }
   }
 
-  const openChoiceRadio = (
-    <QRadioGroup
-      row={orientation === ChoiceItemOrientation.Horizontal}
-      name={qItem.text}
-      id={qItem.id}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => handleValueChange(e.target.value, null)}
-      value={valueRadio}
-      data-test="q-item-radio-group">
-      {qItem.answerOption?.map((option) => {
-        if (option['valueCoding']) {
-          return (
-            <ChoiceRadioSingle
-              key={option.valueCoding.code ?? ''}
-              value={option.valueCoding.code ?? ''}
-              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
-              readOnly={readOnly}
-            />
-          );
-        } else if (option['valueString']) {
-          return (
-            <ChoiceRadioSingle
-              key={option.valueString}
-              value={option.valueString}
-              label={option.valueString}
-              readOnly={readOnly}
-            />
-          );
-        } else if (option['valueInteger']) {
-          return (
-            <ChoiceRadioSingle
-              key={option.valueInteger}
-              value={option.valueInteger.toString()}
-              label={option.valueInteger.toString()}
-              readOnly={readOnly}
-            />
-          );
-        } else {
-          return null;
-        }
-      })}
-
-      {openLabelText ? (
-        <RadioButtonWithOpenLabel
-          value={openLabelValue}
-          label={openLabelText}
-          readOnly={readOnly}
-          isSelected={openLabelSelected}
-          onInputChange={(input) => handleValueChange(null, input)}
-        />
-      ) : null}
-    </QRadioGroup>
-  );
-
   return (
     <FullWidthFormComponentBox data-test="q-item-open-choice-radio-answer-option-box">
       <Grid container columnSpacing={6}>
@@ -179,7 +123,16 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
           <LabelWrapper qItem={qItem} />
         </Grid>
         <Grid item xs={7}>
-          {openChoiceRadio}
+          <OpenChoiceRadioAnswerOptionFields
+            qItem={qItem}
+            valueRadio={valueRadio}
+            openLabelText={openLabelText}
+            openLabelValue={openLabelValue}
+            openLabelSelected={openLabelSelected}
+            orientation={orientation}
+            readOnly={readOnly}
+            onValueChange={handleValueChange}
+          />
           <DisplayInstructions displayInstructions={displayInstructions} />
         </Grid>
       </Grid>

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerOptionField.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { getAnswerOptionLabel } from '../../../utils/openChoice';
+import { StandardTextField } from '../Textfield.styles';
+import Autocomplete from '@mui/material/Autocomplete';
+import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+
+interface OpenChoiceSelectAnswerOptionFieldProps extends PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  options: QuestionnaireItemAnswerOption[];
+  valueSelect: QuestionnaireItemAnswerOption | null;
+  onChange: (newValue: QuestionnaireItemAnswerOption | string | null) => void;
+}
+
+function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFieldProps) {
+  const { qItem, options, valueSelect, isTabled, onChange } = props;
+
+  const { displayUnit, displayPrompt, readOnly, entryFormat } = useRenderingExtensions(qItem);
+
+  return (
+    <Autocomplete
+      id={qItem.id}
+      value={valueSelect ?? null}
+      options={options}
+      getOptionLabel={(option) => getAnswerOptionLabel(option)}
+      onChange={(_, newValue) => onChange(newValue)}
+      freeSolo
+      autoHighlight
+      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+      disabled={readOnly}
+      size="small"
+      placeholder={entryFormat}
+      renderInput={(params) => (
+        <StandardTextField
+          isTabled={isTabled}
+          label={displayPrompt}
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {params.InputProps.endAdornment}
+                {displayUnit}
+              </>
+            )
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default OpenChoiceSelectAnswerOptionField;