@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

package/src/components/FormComponents/QItemChoice/QItemChoiceRadioSingle.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { FormControlLabel, Radio } from '@mui/material';
+
+interface Props {
+  value: string;
+  label: string;
+  readOnly: boolean;
+}
+
+function QItemChoiceRadioSingle(props: Props) {
+  const { value, label, readOnly } = props;
+
+  return (
+    <FormControlLabel
+      disabled={readOnly}
+      value={value}
+      control={<Radio size="small" />}
+      label={label}
+      sx={{ mr: 3 }}
+    />
+  );
+}
+
+export default QItemChoiceRadioSingle;

package/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerOption.js

@@ -0,0 +1,70 @@
+/*
+ * 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, { Fragment } from 'react';
+import { Grid, InputAdornment, MenuItem, Select } from '@mui/material';
+import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+function QItemChoiceSelectAnswerOption(props) {
+    var _a;
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    // Init input value
+    const qrChoiceSelect = qrItem !== null && qrItem !== void 0 ? qrItem : createEmptyQrItem(qItem);
+    let valueSelect = getQrChoiceValue(qrChoiceSelect);
+    if (valueSelect === null) {
+        valueSelect = '';
+    }
+    // Get additional rendering extensions
+    const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } = useRenderingExtensions(qItem);
+    // Event handlers
+    function handleChange(e) {
+        if (qItem.answerOption) {
+            const qrAnswer = findInAnswerOptions(qItem.answerOption, e.target.value);
+            if (qrAnswer) {
+                onQrItemChange(Object.assign(Object.assign({}, createEmptyQrItem(qItem)), { answer: [qrAnswer] }));
+                return;
+            }
+        }
+        onQrItemChange(createEmptyQrItem(qItem));
+    }
+    const choiceSelectAnswerOption = (React.createElement(Select, { id: qItem.id, name: qItem.text, value: valueSelect, disabled: readOnly, fullWidth: true, placeholder: entryFormat, label: displayPrompt, endAdornment: React.createElement(InputAdornment, { position: 'end' }, displayUnit), sx: { maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }, size: "small", onChange: handleChange }, (_a = qItem.answerOption) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
+        var _a;
+        if (option['valueCoding']) {
+            return (React.createElement(MenuItem, { key: option.valueCoding.code, value: option.valueCoding.code }, (_a = option.valueCoding.display) !== null && _a !== void 0 ? _a : option.valueCoding.code));
+        }
+        if (option['valueString']) {
+            return (React.createElement(MenuItem, { key: option.valueString, value: option.valueString }, option.valueString));
+        }
+        if (option['valueInteger']) {
+            return (React.createElement(MenuItem, { key: option.valueInteger, value: option.valueInteger.toString() }, option.valueInteger));
+        }
+        return React.createElement(Fragment, { key: index });
+    })));
+    const renderQItemChoiceSelectAnswerOption = isRepeated ? (React.createElement(React.Fragment, null, choiceSelectAnswerOption)) : (React.createElement(FullWidthFormComponentBox, { "data-test": "q-item-choice-select-answer-option-box" },
+        React.createElement(Grid, { container: true, columnSpacing: 6 },
+            React.createElement(Grid, { item: true, xs: 5 },
+                React.createElement(LabelWrapper, { qItem: qItem })),
+            React.createElement(Grid, { item: true, xs: 7 },
+                choiceSelectAnswerOption,
+                React.createElement(DisplayInstructions, { displayInstructions: displayInstructions })))));
+    return React.createElement(React.Fragment, null, renderQItemChoiceSelectAnswerOption);
+}
+export default QItemChoiceSelectAnswerOption;
+//# sourceMappingURL=QItemChoiceSelectAnswerOption.js.map

package/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QItemChoiceSelectAnswerOption.js","sourceRoot":"","sources":["QItemChoiceSelectAnswerOption.tsx"],"names":[],"mappings":"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"}

package/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerOption.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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, { Fragment } from 'react';
+import type { SelectChangeEvent } from '@mui/material';
+import { Grid, InputAdornment, MenuItem, Select } from '@mui/material';
+
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemChoiceSelectAnswerOption(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Init input value
+  const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem);
+  let valueSelect = getQrChoiceValue(qrChoiceSelect);
+  if (valueSelect === null) {
+    valueSelect = '';
+  }
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Event handlers
+  function handleChange(e: SelectChangeEvent) {
+    if (qItem.answerOption) {
+      const qrAnswer = findInAnswerOptions(qItem.answerOption, e.target.value);
+      if (qrAnswer) {
+        onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
+        return;
+      }
+    }
+    onQrItemChange(createEmptyQrItem(qItem));
+  }
+
+  const choiceSelectAnswerOption = (
+    <Select
+      id={qItem.id}
+      name={qItem.text}
+      value={valueSelect}
+      disabled={readOnly}
+      fullWidth
+      placeholder={entryFormat}
+      label={displayPrompt}
+      endAdornment={<InputAdornment position={'end'}>{displayUnit}</InputAdornment>}
+      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+      size="small"
+      onChange={handleChange}>
+      {qItem.answerOption?.map((option, index) => {
+        if (option['valueCoding']) {
+          return (
+            <MenuItem key={option.valueCoding.code} value={option.valueCoding.code}>
+              {option.valueCoding.display ?? option.valueCoding.code}
+            </MenuItem>
+          );
+        }
+
+        if (option['valueString']) {
+          return (
+            <MenuItem key={option.valueString} value={option.valueString}>
+              {option.valueString}
+            </MenuItem>
+          );
+        }
+
+        if (option['valueInteger']) {
+          return (
+            <MenuItem key={option.valueInteger} value={option.valueInteger.toString()}>
+              {option.valueInteger}
+            </MenuItem>
+          );
+        }
+
+        return <Fragment key={index} />;
+      })}
+    </Select>
+  );
+
+  const renderQItemChoiceSelectAnswerOption = isRepeated ? (
+    <>{choiceSelectAnswerOption}</>
+  ) : (
+    <FullWidthFormComponentBox data-test="q-item-choice-select-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceSelectAnswerOption}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemChoiceSelectAnswerOption}</>;
+}
+
+export default QItemChoiceSelectAnswerOption;

package/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerValueSet.js

@@ -0,0 +1,80 @@
+/*
+ * 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, { useEffect, useMemo } from 'react';
+import { Autocomplete, Grid, Typography } from '@mui/material';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { StandardTextField } from '../Textfield.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useValueSetCodings from '../../../hooks/useValueSetCodings';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { StyledAlert } from '../../Alert.styles';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+function QItemChoiceSelectAnswerValueSet(props) {
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    // Init input value
+    const qrChoiceSelect = qrItem !== null && qrItem !== void 0 ? qrItem : createEmptyQrItem(qItem);
+    let valueCoding;
+    if (qrChoiceSelect.answer) {
+        valueCoding = qrChoiceSelect.answer[0].valueCoding;
+    }
+    // Get additional rendering extensions
+    const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } = useRenderingExtensions(qItem);
+    // Get codings/options from valueSet
+    const { codings, serverError } = useValueSetCodings(qItem);
+    valueCoding = useMemo(() => {
+        const updatedValueCoding = codings.find((queriedCoding) => queriedCoding.code === (valueCoding === null || valueCoding === void 0 ? void 0 : valueCoding.code));
+        return updatedValueCoding !== null && updatedValueCoding !== void 0 ? updatedValueCoding : valueCoding;
+    }, [codings, valueCoding]);
+    // Check and remove populated answer if it is a string
+    // NOTE: $populate will try to populate answer as valueCoding,
+    //       but will fail if answer provided is not within options
+    useEffect(() => {
+        if (qrChoiceSelect.answer && qrChoiceSelect.answer[0].valueString) {
+            onQrItemChange(createEmptyQrItem(qItem));
+        }
+    }, 
+    // Only run effect once - on populate
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // Event handlers
+    function handleChange(_, newValue) {
+        if (newValue) {
+            onQrItemChange(Object.assign(Object.assign({}, createEmptyQrItem(qItem)), { answer: [{ valueCoding: newValue }] }));
+            return;
+        }
+        onQrItemChange(createEmptyQrItem(qItem));
+    }
+    const choiceSelectAnswerValueSet = codings.length > 0 ? (React.createElement(Autocomplete, { id: qItem.id, options: codings, getOptionLabel: (option) => `${option.display}`, value: valueCoding !== null && valueCoding !== void 0 ? valueCoding : null, onChange: handleChange, openOnFocus: true, autoHighlight: true, sx: { maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }, size: "small", disabled: readOnly, placeholder: entryFormat, renderInput: (params) => (React.createElement(StandardTextField, Object.assign({ isTabled: isTabled, label: displayPrompt }, params, { InputProps: Object.assign(Object.assign({}, params.InputProps), { endAdornment: (React.createElement(React.Fragment, null,
+                    params.InputProps.endAdornment,
+                    displayUnit)) }), "data-test": "q-item-choice-dropdown-answer-value-set-field" }))) })) : serverError ? (React.createElement(StyledAlert, { color: "error" },
+        React.createElement(ErrorOutlineIcon, { color: "error", sx: { pr: 0.75 } }),
+        React.createElement(Typography, { variant: "subtitle2" }, "There was an error fetching options from the terminology server"))) : (React.createElement(StyledAlert, { color: "error" },
+        React.createElement(ErrorOutlineIcon, { color: "error", sx: { pr: 0.75 } }),
+        React.createElement(Typography, { variant: "subtitle2" }, "Unable to fetch options from the questionnaire or launch context")));
+    const renderQItemChoiceSelectAnswerValueSet = isRepeated ? (React.createElement(React.Fragment, null, choiceSelectAnswerValueSet)) : (React.createElement(FullWidthFormComponentBox, { "data-test": "q-item-choice-dropdown-answer-value-set-box" },
+        React.createElement(Grid, { container: true, columnSpacing: 6 },
+            React.createElement(Grid, { item: true, xs: 5 },
+                React.createElement(LabelWrapper, { qItem: qItem })),
+            React.createElement(Grid, { item: true, xs: 7 },
+                choiceSelectAnswerValueSet,
+                React.createElement(DisplayInstructions, { displayInstructions: displayInstructions })))));
+    return React.createElement(React.Fragment, null, renderQItemChoiceSelectAnswerValueSet);
+}
+export default QItemChoiceSelectAnswerValueSet;
+//# sourceMappingURL=QItemChoiceSelectAnswerValueSet.js.map

package/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerValueSet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QItemChoiceSelectAnswerValueSet.js","sourceRoot":"","sources":["QItemChoiceSelectAnswerValueSet.tsx"],"names":[],"mappings":"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"}

package/src/components/FormComponents/QItemChoice/QItemChoiceSelectAnswerValueSet.tsx

@@ -0,0 +1,162 @@
+/*
+ * 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 { SyntheticEvent } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { Autocomplete, Grid, Typography } from '@mui/material';
+
+import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { StandardTextField } from '../Textfield.styles';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useValueSetCodings from '../../../hooks/useValueSetCodings';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import { StyledAlert } from '../../Alert.styles';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemChoiceSelectAnswerValueSet(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Init input value
+  const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem);
+  let valueCoding: Coding | undefined;
+  if (qrChoiceSelect.answer) {
+    valueCoding = qrChoiceSelect.answer[0].valueCoding;
+  }
+
+  // Get additional rendering extensions
+  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Get codings/options from valueSet
+  const { codings, serverError } = useValueSetCodings(qItem);
+
+  valueCoding = useMemo(() => {
+    const updatedValueCoding = codings.find(
+      (queriedCoding) => queriedCoding.code === valueCoding?.code
+    );
+    return updatedValueCoding ?? valueCoding;
+  }, [codings, valueCoding]);
+
+  // Check and remove populated answer if it is a string
+  // NOTE: $populate will try to populate answer as valueCoding,
+  //       but will fail if answer provided is not within options
+  useEffect(
+    () => {
+      if (qrChoiceSelect.answer && qrChoiceSelect.answer[0].valueString) {
+        onQrItemChange(createEmptyQrItem(qItem));
+      }
+    },
+    // Only run effect once - on populate
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  // Event handlers
+  function handleChange(_: SyntheticEvent<Element, Event>, newValue: Coding | null) {
+    if (newValue) {
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [{ valueCoding: newValue }]
+      });
+      return;
+    }
+    onQrItemChange(createEmptyQrItem(qItem));
+  }
+
+  const choiceSelectAnswerValueSet =
+    codings.length > 0 ? (
+      <Autocomplete
+        id={qItem.id}
+        options={codings}
+        getOptionLabel={(option) => `${option.display}`}
+        value={valueCoding ?? null}
+        onChange={handleChange}
+        openOnFocus
+        autoHighlight
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        size="small"
+        disabled={readOnly}
+        placeholder={entryFormat}
+        renderInput={(params) => (
+          <StandardTextField
+            isTabled={isTabled}
+            label={displayPrompt}
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {params.InputProps.endAdornment}
+                  {displayUnit}
+                </>
+              )
+            }}
+            data-test="q-item-choice-dropdown-answer-value-set-field"
+          />
+        )}
+      />
+    ) : serverError ? (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server
+        </Typography>
+      </StyledAlert>
+    ) : (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          Unable to fetch options from the questionnaire or launch context
+        </Typography>
+      </StyledAlert>
+    );
+
+  const renderQItemChoiceSelectAnswerValueSet = isRepeated ? (
+    <>{choiceSelectAnswerValueSet}</>
+  ) : (
+    <FullWidthFormComponentBox data-test="q-item-choice-dropdown-answer-value-set-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} />
+        </Grid>
+        <Grid item xs={7}>
+          {choiceSelectAnswerValueSet}
+          <DisplayInstructions displayInstructions={displayInstructions} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
+  );
+  return <>{renderQItemChoiceSelectAnswerValueSet}</>;
+}
+
+export default QItemChoiceSelectAnswerValueSet;

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoice.js

@@ -0,0 +1,49 @@
+/*
+ * 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 { QItemOpenChoiceControl } from '../../../interfaces/choice.enum';
+import QItemOpenChoiceSelectAnswerOption from './QItemOpenChoiceSelectAnswerOption';
+import QItemOpenChoiceSelectAnswerValueSet from './QItemOpenChoiceSelectAnswerValueSet';
+import QItemOpenChoiceAutocomplete from './QItemOpenChoiceAutocomplete';
+import { getOpenChoiceControlType } from '../../../utils/openChoice';
+import { getChoiceOrientation } from '../../../utils/choice';
+import QItemOpenChoiceCheckboxAnswerOption from './QItemOpenChoiceCheckboxAnswerOption';
+import QItemOpenChoiceRadioAnswerOption from './QItemOpenChoiceRadioAnswerOption';
+function QItemOpenChoice(props) {
+    var _a, _b;
+    const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+    const orientation = getChoiceOrientation(qItem);
+    switch (getOpenChoiceControlType(qItem)) {
+        case QItemOpenChoiceControl.Checkbox:
+            return (React.createElement(QItemOpenChoiceCheckboxAnswerOption, { qItem: qItem, qrItem: qrItem, isRepeated: (_a = qItem['repeats']) !== null && _a !== void 0 ? _a : false, onQrItemChange: onQrItemChange, orientation: orientation }));
+        case QItemOpenChoiceControl.Radio:
+            return (React.createElement(QItemOpenChoiceRadioAnswerOption, { qItem: qItem, qrItem: qrItem, isRepeated: (_b = qItem['repeats']) !== null && _b !== void 0 ? _b : false, onQrItemChange: onQrItemChange, orientation: orientation }));
+        case QItemOpenChoiceControl.Autocomplete:
+            return (React.createElement(QItemOpenChoiceAutocomplete, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+        case QItemOpenChoiceControl.Select:
+            if (qItem.answerValueSet) {
+                return (React.createElement(QItemOpenChoiceSelectAnswerValueSet, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+            }
+            else {
+                return (React.createElement(QItemOpenChoiceSelectAnswerOption, { qItem: qItem, qrItem: qrItem, isRepeated: isRepeated, isTabled: isTabled, onQrItemChange: onQrItemChange }));
+            }
+        default:
+            return null;
+    }
+}
+export default QItemOpenChoice;
+//# sourceMappingURL=QItemOpenChoice.js.map

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QItemOpenChoice.js","sourceRoot":"","sources":["QItemOpenChoice.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAEzE,OAAO,iCAAiC,MAAM,qCAAqC,CAAC;AACpF,OAAO,mCAAmC,MAAM,uCAAuC,CAAC;AACxF,OAAO,2BAA2B,MAAM,+BAA+B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,mCAAmC,MAAM,uCAAuC,CAAC;AACxF,OAAO,gCAAgC,MAAM,oCAAoC,CAAC;AAelF,SAAS,eAAe,CAAC,KAAY;;IACnC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACtE,MAAM,WAAW,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEhD,QAAQ,wBAAwB,CAAC,KAAK,CAAC,EAAE;QACvC,KAAK,sBAAsB,CAAC,QAAQ;YAClC,OAAO,CACL,oBAAC,mCAAmC,IAClC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAA,KAAK,CAAC,SAAS,CAAC,mCAAI,KAAK,EACrC,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;QACJ,KAAK,sBAAsB,CAAC,KAAK;YAC/B,OAAO,CACL,oBAAC,gCAAgC,IAC/B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAA,KAAK,CAAC,SAAS,CAAC,mCAAI,KAAK,EACrC,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;QACJ,KAAK,sBAAsB,CAAC,YAAY;YACtC,OAAO,CACL,oBAAC,2BAA2B,IAC1B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;QACJ,KAAK,sBAAsB,CAAC,MAAM;YAChC,IAAI,KAAK,CAAC,cAAc,EAAE;gBACxB,OAAO,CACL,oBAAC,mCAAmC,IAClC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;aACH;iBAAM;gBACL,OAAO,CACL,oBAAC,iCAAiC,IAChC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;aACH;QACH;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC;AAED,eAAe,eAAe,CAAC"}

package/src/components/FormComponents/QItemOpenChoice/QItemOpenChoice.tsx

@@ -0,0 +1,104 @@
+/*
+ * 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 { QItemOpenChoiceControl } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import QItemOpenChoiceSelectAnswerOption from './QItemOpenChoiceSelectAnswerOption';
+import QItemOpenChoiceSelectAnswerValueSet from './QItemOpenChoiceSelectAnswerValueSet';
+import QItemOpenChoiceAutocomplete from './QItemOpenChoiceAutocomplete';
+import { getOpenChoiceControlType } from '../../../utils/openChoice';
+import { getChoiceOrientation } from '../../../utils/choice';
+import QItemOpenChoiceCheckboxAnswerOption from './QItemOpenChoiceCheckboxAnswerOption';
+import QItemOpenChoiceRadioAnswerOption from './QItemOpenChoiceRadioAnswerOption';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemOpenChoice(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const orientation = getChoiceOrientation(qItem);
+
+  switch (getOpenChoiceControlType(qItem)) {
+    case QItemOpenChoiceControl.Checkbox:
+      return (
+        <QItemOpenChoiceCheckboxAnswerOption
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={qItem['repeats'] ?? false}
+          onQrItemChange={onQrItemChange}
+          orientation={orientation}
+        />
+      );
+    case QItemOpenChoiceControl.Radio:
+      return (
+        <QItemOpenChoiceRadioAnswerOption
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={qItem['repeats'] ?? false}
+          onQrItemChange={onQrItemChange}
+          orientation={orientation}
+        />
+      );
+    case QItemOpenChoiceControl.Autocomplete:
+      return (
+        <QItemOpenChoiceAutocomplete
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case QItemOpenChoiceControl.Select:
+      if (qItem.answerValueSet) {
+        return (
+          <QItemOpenChoiceSelectAnswerValueSet
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      } else {
+        return (
+          <QItemOpenChoiceSelectAnswerOption
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
+    default:
+      return null;
+  }
+}
+
+export default QItemOpenChoice;