@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

package/src/components/FormComponents/Tables/QItemGroupTable.js.map

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

package/src/components/FormComponents/Tables/QItemGroupTable.tsx

@@ -0,0 +1,171 @@
+/*
+ * 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, { useMemo, useState } from 'react';
+
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import {
+  Button,
+  Divider,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import QItemGroupTableRow from './QItemGroupTableRow';
+import { HeaderTableCell } from './Table.styles';
+import { QGroupContainerBox } from '../../Box.styles';
+import { mapQItemsIndex } from '../../../utils/mapItem';
+import type { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
+import useInitialiseGroupTable from '../../../hooks/useInitialiseGroupTable';
+import { nanoid } from 'nanoid';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import DeleteRowButton from './DeleteRowButton';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface Props extends PropsWithQrRepeatGroupChangeHandler {
+  qItem: QuestionnaireItem;
+  qrItems: QuestionnaireResponseItem[];
+  groupCardElevation: number;
+}
+
+function QItemGroupTable(props: Props) {
+  const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
+
+  const initialisedGroupTables = useInitialiseGroupTable(qrItems);
+
+  const [tableRows, setTableRows] = useState(initialisedGroupTables);
+
+  // Generate item labels as table headers
+  const qItems = qItem.item;
+  const itemLabels: string[] = useMemo(
+    () => qItems?.map((item) => item.text ?? '') ?? [],
+    [qItems]
+  );
+
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+
+  // Check if there are columns within the group table
+  if (!qItems || qItems.length === 0) {
+    return null;
+  }
+
+  // Event Handlers
+  function handleRowChange(newQrRow: QuestionnaireResponseItem, index: number) {
+    const updatedTableRows = [...tableRows];
+
+    if (newQrRow.item) {
+      updatedTableRows[index].qrItem = {
+        linkId: newQrRow.linkId,
+        text: newQrRow.text,
+        item: newQrRow.item
+      };
+    }
+
+    setTableRows(updatedTableRows);
+    onQrRepeatGroupChange({
+      linkId: qItem.linkId,
+      qrItems: updatedTableRows.flatMap((singleRow) => (singleRow.qrItem ? [singleRow.qrItem] : []))
+    });
+  }
+
+  function handleDeleteRow(index: number) {
+    const updatedTableRows = [...tableRows];
+
+    updatedTableRows.splice(index, 1);
+
+    setTableRows(updatedTableRows);
+    onQrRepeatGroupChange({
+      linkId: qItem.linkId,
+      qrItems: updatedTableRows.flatMap((singleRow) => (singleRow.qrItem ? [singleRow.qrItem] : []))
+    });
+  }
+
+  function handleAddRow() {
+    setTableRows([
+      ...tableRows,
+      {
+        nanoId: nanoid(),
+        qrItem: null
+      }
+    ]);
+  }
+
+  return (
+    <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
+      <Typography fontSize={13} variant="h6">
+        <LabelWrapper qItem={qItem} />
+      </Typography>
+      <Divider sx={{ my: 1 }} light />
+      <TableContainer component={Paper} elevation={groupCardElevation}>
+        <Table>
+          <caption>
+            <Stack direction="row" justifyContent="end">
+              <Button
+                variant="contained"
+                size="small"
+                startIcon={<AddIcon />}
+                onClick={handleAddRow}>
+                Add Row
+              </Button>
+            </Stack>
+          </caption>
+          <TableHead>
+            <TableRow>
+              {itemLabels.map((itemLabel) => (
+                <HeaderTableCell key={itemLabel}>{itemLabel}</HeaderTableCell>
+              ))}
+              <TableCell />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {tableRows.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+              const answeredQrItem = createEmptyQrItem(qItem);
+              if (nullableQrItem) {
+                answeredQrItem.item = nullableQrItem.item;
+              }
+
+              return (
+                <TableRow key={nanoId}>
+                  <QItemGroupTableRow
+                    qItem={qItem}
+                    qrItem={answeredQrItem}
+                    qItemsIndexMap={qItemsIndexMap}
+                    onQrItemChange={(newQrGroup) => handleRowChange(newQrGroup, index)}
+                  />
+                  <DeleteRowButton
+                    nullableQrItem={nullableQrItem}
+                    numOfRows={tableRows.length}
+                    onDeleteItem={() => handleDeleteRow(index)}
+                  />
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </QGroupContainerBox>
+  );
+}
+
+export default QItemGroupTable;

package/src/components/FormComponents/Tables/QItemGroupTableRow.js

@@ -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 { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import SingleItem from '../SingleItem/SingleItem';
+import { getQrItemsIndex } from '../../../utils/mapItem';
+import { StandardTableCell } from './Table.styles';
+function QItemGroupTableRow(props) {
+    const { qItem, qrItem, qItemsIndexMap, onQrItemChange } = props;
+    const rowItems = qItem.item;
+    const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+    const rowQrItems = row.item;
+    if (!rowItems || !rowQrItems) {
+        return null;
+    }
+    function handleQrRowItemChange(newQrRowItem) {
+        const qrRow = Object.assign({}, row);
+        updateQrGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+        onQrItemChange(qrRow);
+    }
+    const qrItemsByIndex = getQrItemsIndex(rowItems, rowQrItems, qItemsIndexMap);
+    return (React.createElement(React.Fragment, null, rowItems.map((rowItem, index) => {
+        const qrItem = qrItemsByIndex[index];
+        if (Array.isArray(qrItem)) {
+            return null;
+        }
+        return (React.createElement(StandardTableCell, { key: index, numOfColumns: rowItems.length, isFirst: index === 0 },
+            React.createElement(SingleItem, { key: qItem.linkId, qItem: rowItem, qrItem: qrItem, isRepeated: true, isTabled: true, onQrItemChange: handleQrRowItemChange })));
+    })));
+}
+export default QItemGroupTableRow;
+//# sourceMappingURL=QItemGroupTableRow.js.map

package/src/components/FormComponents/Tables/QItemGroupTableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QItemGroupTableRow.js","sourceRoot":"","sources":["QItemGroupTableRow.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AASnD,SAAS,kBAAkB,CAAC,KAAY;IACtC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEhE,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC;IAC5B,MAAM,GAAG,GAAG,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,UAAU,GAAG,GAAG,CAAC,IAAI,CAAC;IAE5B,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,EAAE;QAC5B,OAAO,IAAI,CAAC;KACb;IAED,SAAS,qBAAqB,CAAC,YAAuC;QACpE,MAAM,KAAK,qBAAmC,GAAG,CAAE,CAAC;QACpD,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;QACzD,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,MAAM,cAAc,GAAG,eAAe,CAAC,QAAQ,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC;IAE7E,OAAO,CACL,0CACG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;QAC/B,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;QAErC,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACzB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,oBAAC,iBAAiB,IAAC,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,KAAK,CAAC;YAChF,oBAAC,UAAU,IACT,GAAG,EAAE,KAAK,CAAC,MAAM,EACjB,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,IAAI,EACd,cAAc,EAAE,qBAAqB,GACrC,CACgB,CACrB,CAAC;IACJ,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,kBAAkB,CAAC"}

package/src/components/FormComponents/Tables/QItemGroupTableRow.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import SingleItem from '../SingleItem/SingleItem';
+import { getQrItemsIndex } from '../../../utils/mapItem';
+import { StandardTableCell } from './Table.styles';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+
+interface Props extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  qItemsIndexMap: Record<string, number>;
+}
+
+function QItemGroupTableRow(props: Props) {
+  const { qItem, qrItem, qItemsIndexMap, onQrItemChange } = props;
+
+  const rowItems = qItem.item;
+  const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const rowQrItems = row.item;
+
+  if (!rowItems || !rowQrItems) {
+    return null;
+  }
+
+  function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
+    const qrRow: QuestionnaireResponseItem = { ...row };
+    updateQrGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+    onQrItemChange(qrRow);
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(rowItems, rowQrItems, qItemsIndexMap);
+
+  return (
+    <>
+      {rowItems.map((rowItem, index) => {
+        const qrItem = qrItemsByIndex[index];
+
+        if (Array.isArray(qrItem)) {
+          return null;
+        }
+
+        return (
+          <StandardTableCell key={index} numOfColumns={rowItems.length} isFirst={index === 0}>
+            <SingleItem
+              key={qItem.linkId}
+              qItem={rowItem}
+              qrItem={qrItem}
+              isRepeated={true}
+              isTabled={true}
+              onQrItemChange={handleQrRowItemChange}
+            />
+          </StandardTableCell>
+        );
+      })}
+    </>
+  );
+}
+
+export default QItemGroupTableRow;

package/src/components/FormComponents/Tables/Table.styles.js

@@ -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 { styled, TableCell } from '@mui/material';
+export const HeaderTableCell = styled(TableCell)(() => ({
+    fontSize: 13,
+    lineHeight: 'normal'
+}));
+export const StandardTableCell = styled(TableCell, {
+    shouldForwardProp: (prop) => prop !== 'numOfColumns' && prop !== 'isFirst'
+})(({ numOfColumns, isFirst }) => ({
+    width: `${100 / numOfColumns}%`,
+    paddingLeft: isFirst ? 8 : 4,
+    paddingRight: 4
+}));
+export const DeleteButtonTableCell = styled(TableCell)(() => ({
+    paddingLeft: 0,
+    paddingRight: 4
+}));
+export const GridTextTableCell = styled(TableCell)(({ theme }) => ({
+    width: '20%',
+    paddingLeft: '18px',
+    paddingRight: '18px',
+    color: theme.palette.text.secondary
+}));
+export const GridAnswerTableCell = styled(TableCell, {
+    shouldForwardProp: (prop) => prop !== 'numOfColumns'
+})(({ numOfColumns }) => ({
+    width: `${80 / numOfColumns}%`,
+    paddingLeft: 5,
+    paddingRight: 5
+}));
+//# sourceMappingURL=Table.styles.js.map

package/src/components/FormComponents/Tables/Table.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.styles.js","sourceRoot":"","sources":["Table.styles.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACtD,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,EAAE;IACjD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,KAAK,SAAS;CAC3E,CAAC,CAA6C,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,KAAK,EAAE,GAAG,GAAG,GAAG,YAAY,GAAG;IAC/B,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5B,YAAY,EAAE,CAAC;CAChB,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5D,WAAW,EAAE,CAAC;IACd,YAAY,EAAE,CAAC;CAChB,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACjE,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,MAAM;IACnB,YAAY,EAAE,MAAM;IACpB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;CACpC,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,SAAS,EAAE;IACnD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,cAAc;CACrD,CAAC,CAA2B,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IAClD,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,GAAG;IAC9B,WAAW,EAAE,CAAC;IACd,YAAY,EAAE,CAAC;CAChB,CAAC,CAAC,CAAC"}

package/src/components/FormComponents/Tables/Table.styles.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 { styled, TableCell } from '@mui/material';
+
+export const HeaderTableCell = styled(TableCell)(() => ({
+  fontSize: 13,
+  lineHeight: 'normal'
+}));
+
+export const StandardTableCell = styled(TableCell, {
+  shouldForwardProp: (prop) => prop !== 'numOfColumns' && prop !== 'isFirst'
+})<{ numOfColumns: number; isFirst: boolean }>(({ numOfColumns, isFirst }) => ({
+  width: `${100 / numOfColumns}%`,
+  paddingLeft: isFirst ? 8 : 4,
+  paddingRight: 4
+}));
+
+export const DeleteButtonTableCell = styled(TableCell)(() => ({
+  paddingLeft: 0,
+  paddingRight: 4
+}));
+
+export const GridTextTableCell = styled(TableCell)(({ theme }) => ({
+  width: '20%',
+  paddingLeft: '18px',
+  paddingRight: '18px',
+  color: theme.palette.text.secondary
+}));
+
+export const GridAnswerTableCell = styled(TableCell, {
+  shouldForwardProp: (prop) => prop !== 'numOfColumns'
+})<{ numOfColumns: number }>(({ numOfColumns }) => ({
+  width: `${80 / numOfColumns}%`,
+  paddingLeft: 5,
+  paddingRight: 5
+}));

package/src/components/FormComponents/TextItem/TextField.js

@@ -0,0 +1,29 @@
+/*
+ * 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 { InputAdornment, TextField as MuiTextField } from '@mui/material';
+import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+function TextField(props) {
+    const { linkId, input, feedback, displayPrompt, displayUnit, entryFormat, readOnly, calcExpUpdated, onInputChange } = props;
+    return (React.createElement(MuiTextField, { id: linkId, value: input, error: !!feedback, onChange: (event) => onInputChange(event.target.value), disabled: readOnly, label: displayPrompt, placeholder: entryFormat, fullWidth: true, multiline: true, size: "small", minRows: 3, InputProps: {
+            endAdornment: (React.createElement(InputAdornment, { position: 'end' },
+                React.createElement(FadingCheckIcon, { fadeIn: calcExpUpdated }),
+                displayUnit))
+        }, helperText: feedback, "data-test": "q-item-text-field" }));
+}
+export default TextField;
+//# sourceMappingURL=TextField.js.map

package/src/components/FormComponents/TextItem/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["TextField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAc3D,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,EACR,cAAc,EACd,aAAa,EACd,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,oBAAC,YAAY,IACX,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,CAAC,CAAC,QAAQ,EACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,aAAa,EACpB,WAAW,EAAE,WAAW,EACxB,SAAS,QACT,SAAS,QACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,CAAC,EACV,UAAU,EAAE;YACV,YAAY,EAAE,CACZ,oBAAC,cAAc,IAAC,QAAQ,EAAE,KAAK;gBAC7B,oBAAC,eAAe,IAAC,MAAM,EAAE,cAAc,GAAI;gBAC1C,WAAW,CACG,CAClB;SACF,EACD,UAAU,EAAE,QAAQ,eACV,mBAAmB,GAC7B,CACH,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}

package/src/components/FormComponents/TextItem/TextField.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 { InputAdornment, TextField as MuiTextField } from '@mui/material';
+import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+
+interface TextFieldProps {
+  linkId: string;
+  input: string;
+  feedback: string;
+  displayPrompt: string;
+  displayUnit: string;
+  entryFormat: string;
+  readOnly: boolean;
+  calcExpUpdated: boolean;
+  onInputChange: (value: string) => void;
+}
+
+function TextField(props: TextFieldProps) {
+  const {
+    linkId,
+    input,
+    feedback,
+    displayPrompt,
+    displayUnit,
+    entryFormat,
+    readOnly,
+    calcExpUpdated,
+    onInputChange
+  } = props;
+
+  return (
+    <MuiTextField
+      id={linkId}
+      value={input}
+      error={!!feedback}
+      onChange={(event) => onInputChange(event.target.value)}
+      disabled={readOnly}
+      label={displayPrompt}
+      placeholder={entryFormat}
+      fullWidth
+      multiline
+      size="small"
+      minRows={3}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position={'end'}>
+            <FadingCheckIcon fadeIn={calcExpUpdated} />
+            {displayUnit}
+          </InputAdornment>
+        )
+      }}
+      helperText={feedback}
+      data-test="q-item-text-field"
+    />
+  );
+}
+
+export default TextField;

package/src/components/FormComponents/TextItem/TextItem.js

@@ -0,0 +1,71 @@
+/*
+ * 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, useState } from 'react';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import useValidationError from '../../../hooks/useValidationError';
+import debounce from 'lodash.debounce';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import TextField from './TextField';
+import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+function TextItem(props) {
+    const { qItem, qrItem, isRepeated, onQrItemChange } = props;
+    // Get additional rendering extensions
+    const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat, regexValidation, maxLength } = useRenderingExtensions(qItem);
+    // Init input value
+    let valueText = '';
+    if ((qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer) && (qrItem === null || qrItem === void 0 ? void 0 : qrItem.answer[0].valueString)) {
+        valueText = qrItem.answer[0].valueString;
+    }
+    const [input, setInput] = useState(valueText);
+    // Perform validation checks
+    const feedback = useValidationError(input, regexValidation, maxLength);
+    // Process calculated expressions
+    const { calcExpUpdated } = useStringCalculatedExpression({
+        qItem: qItem,
+        inputValue: input,
+        setInputValue: (value) => {
+            setInput(value);
+        },
+        onQrItemChange: onQrItemChange
+    });
+    // Event handlers
+    function handleInputChange(newInput) {
+        setInput(newInput);
+        updateQrItemWithDebounce(newInput);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const updateQrItemWithDebounce = useCallback(debounce((input) => {
+        const emptyQrItem = createEmptyQrItem(qItem);
+        if (input !== '') {
+            onQrItemChange(Object.assign(Object.assign({}, emptyQrItem), { answer: [{ valueString: input.trim() }] }));
+        }
+        else {
+            onQrItemChange(emptyQrItem);
+        }
+    }, DEBOUNCE_DURATION), [onQrItemChange, qItem]); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+    if (isRepeated) {
+        return (React.createElement(TextField, { linkId: qItem.linkId, input: input, feedback: feedback, displayPrompt: displayPrompt, displayUnit: displayUnit, entryFormat: entryFormat, readOnly: readOnly, calcExpUpdated: calcExpUpdated, onInputChange: handleInputChange }));
+    }
+    return (React.createElement(FullWidthFormComponentBox, { "data-test": "q-item-text-box" },
+        React.createElement(ItemFieldGrid, { qItem: qItem, displayInstructions: displayInstructions },
+            React.createElement(TextField, { linkId: qItem.linkId, input: input, feedback: feedback, displayPrompt: displayPrompt, displayUnit: displayUnit, entryFormat: entryFormat, readOnly: readOnly, calcExpUpdated: calcExpUpdated, onInputChange: handleInputChange }))));
+}
+export default TextItem;
+//# sourceMappingURL=TextItem.js.map

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

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