@oneblink/apps-react 0.6.2-beta.2 → 1.0.0-beta.1

package/dist/components/formStore/table/index.js

@@ -0,0 +1,194 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { Box, Paper, TableContainer, Tooltip } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { FilterList as FilterListIcon, Warning as WarningIcon, ArrowDownward as SortingIcon, } from '@mui/icons-material';
+import { IsHoveringProvider } from '../../../hooks/useIsHovering';
+import { NoResourcesYet } from '../../NoResourcesYet';
+import FormStoreIcon from '../display/FormStoreIcon';
+import HeaderCellMoreButton from './HeaderCellMoreButton';
+const useStyles = makeStyles((theme) => ({
+    tooltip: {
+        zIndex: theme.zIndex.drawer,
+    },
+    sortingIcon: {
+        transition: theme.transitions.create('transform'),
+    },
+    sortingIconDescending: {
+        transform: 'rotate(180deg)',
+    },
+    table: {
+        display: 'inline-block',
+        '& .tbody .tr:last-child .tc': {
+            borderBottom: 0,
+        },
+        '& .tc': {
+            padding: theme.spacing(1),
+            borderBottomColor: theme.palette.divider,
+            borderBottom: '1px solid',
+            display: 'flex',
+            alignItems: 'center',
+            '&.is-clickable': {
+                cursor: 'pointer',
+                transition: theme.transitions.create('transform'),
+                '&:hover': {
+                    backgroundColor: theme.palette.action.hover,
+                },
+            },
+        },
+        '& .td': {
+            position: 'relative',
+            borderRight: '1px solid',
+            borderRightColor: theme.palette.divider,
+            overflowX: 'hidden',
+            // minus 1 to cater for the border
+            minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,
+            '&.is-resizing': {
+                borderRightStyle: 'dashed',
+            },
+        },
+        '& .th': {
+            position: 'relative',
+            fontWeight: theme.typography.fontWeightBold,
+            paddingRight: 0,
+            '& .th-content': {
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                borderRight: '1px solid',
+                borderRightColor: theme.palette.divider,
+                paddingRight: theme.spacing(),
+                '& .th-label': {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    '& .th-icon': {
+                        marginLeft: theme.spacing(),
+                    },
+                },
+            },
+            '& .resizer': {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderWidth: 0,
+                borderLeftStyle: 'solid',
+                borderRightStyle: 'solid',
+                borderColor: theme.palette.divider,
+                paddingTop: theme.spacing(),
+                paddingBottom: theme.spacing(),
+                paddingRight: `calc(${theme.spacing(1)} + 1px)`,
+                position: 'absolute',
+                right: 0,
+                top: theme.spacing(0.5),
+                bottom: theme.spacing(0.5),
+                transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,
+                zIndex: 1,
+                // prevents from scrolling while dragging on touch devices
+                touchAction: 'none',
+                '&:hover': {
+                    borderWidth: '1px',
+                },
+                '&.is-resizing': {
+                    borderWidth: '1px',
+                    borderColor: theme.palette.grey[700],
+                },
+            },
+        },
+    },
+}));
+function FormStoreTable({ getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, isEmptyResults, onChangeFilters, }) {
+    const classes = useStyles();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Paper, null,
+            React.createElement(TableContainer, null,
+                React.createElement("div", { className: classes.table, ...getTableProps() },
+                    React.createElement("div", { className: "thead" }, 
+                    // Loop over the header rows
+                    headerGroups.map((headerGroup) => (
+                    // Apply the header row props
+                    React.createElement("div", { ...headerGroup.getHeaderGroupProps(), className: "tr" }, 
+                    // Loop over the headers in each row
+                    headerGroup.headers.map((headerGroup) => {
+                        var _a, _b, _c, _d, _e;
+                        const sortingProperty = (_a = headerGroup.sorting) === null || _a === void 0 ? void 0 : _a.property;
+                        const sortingDirection = (_b = headerGroup.sorting) === null || _b === void 0 ? void 0 : _b.direction;
+                        return (React.createElement(Tooltip, { title: headerGroup.tooltip || '', arrow: true, key: headerGroup.id, classes: {
+                                popper: classes.tooltip,
+                            } },
+                            React.createElement("div", { className: clsx('th tc', {
+                                    'is-clickable': !!sortingProperty,
+                                }), onClick: sortingProperty
+                                    ? () => {
+                                        onChangeFilters((currentFilters) => {
+                                            switch (sortingDirection) {
+                                                case 'ascending': {
+                                                    return {
+                                                        ...currentFilters,
+                                                        sorting: [
+                                                            {
+                                                                property: sortingProperty,
+                                                                direction: 'descending',
+                                                            },
+                                                        ],
+                                                    };
+                                                }
+                                                case 'descending': {
+                                                    return {
+                                                        ...currentFilters,
+                                                        sorting: undefined,
+                                                    };
+                                                }
+                                                default: {
+                                                    return {
+                                                        ...currentFilters,
+                                                        sorting: [
+                                                            {
+                                                                property: sortingProperty,
+                                                                direction: 'ascending',
+                                                            },
+                                                        ],
+                                                    };
+                                                }
+                                            }
+                                        }, false);
+                                    }
+                                    : undefined, ...headerGroup.getHeaderProps() },
+                                React.createElement(IsHoveringProvider, { className: "th-content" },
+                                    React.createElement("div", { className: "th-label" },
+                                        React.createElement("span", null, headerGroup.headerText),
+                                        sortingDirection && (React.createElement(SortingIcon, { fontSize: "small", color: "primary", className: clsx('th-icon', classes.sortingIcon, {
+                                                [classes.sortingIconDescending]: sortingDirection === 'descending',
+                                            }) })),
+                                        ((_c = headerGroup.filter) === null || _c === void 0 ? void 0 : _c.isInvalid) ? (React.createElement(Tooltip, { title: ((_d = headerGroup.filter) === null || _d === void 0 ? void 0 : _d.validationMessage) ||
+                                                '' },
+                                            React.createElement(WarningIcon, { fontSize: "small", color: "error", className: "th-icon" }))) : ((_e = headerGroup.filter) === null || _e === void 0 ? void 0 : _e.value) ? (React.createElement(FilterListIcon, { fontSize: "small", color: "primary", className: "th-icon" })) : null),
+                                    React.createElement(HeaderCellMoreButton, { headerGroup: headerGroup, onHide: headerGroup.toggleHidden }),
+                                    React.createElement("div", { ...headerGroup.getResizerProps(), className: clsx('resizer', {
+                                            'is-resizing': headerGroup.isResizing,
+                                        }), onClick: (event) => {
+                                            event.stopPropagation();
+                                        } })))));
+                    }))))),
+                    !isEmptyResults ? (React.createElement("div", { ...getTableBodyProps(), className: "tbody" }, 
+                    // Loop over the table rows
+                    rows.map((row) => {
+                        // Prepare the row for display
+                        prepareRow(row);
+                        return (
+                        // Apply the row props
+                        React.createElement("div", { ...row.getRowProps(), className: "tr" }, 
+                        // Loop over the rows cells
+                        row.cells.map((cell) => {
+                            // Apply the cell props
+                            return (React.createElement(IsHoveringProvider, { ...cell.getCellProps(), className: clsx('td tc', {
+                                    'is-resizing': cell.column.isResizing,
+                                }) }, 
+                            // Render the cell contents
+                            cell.render('Cell')));
+                        })));
+                    }))) : (React.createElement(Box, { padding: 2 }))))),
+        isEmptyResults && (React.createElement(NoResourcesYet, { IconComponent: FormStoreIcon, title: "No Records Found..." }, "There are no Submissions matching your filters."))));
+}
+export default React.memo(FormStoreTable);
+//# sourceMappingURL=index.js.map

package/dist/components/formStore/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { TableInstance } from 'react-table'\nimport clsx from 'clsx'\nimport { Box, Paper, TableContainer, Tooltip } from '@mui/material'\nimport makeStyles from '@mui/styles/makeStyles'\nimport {\n  FilterList as FilterListIcon,\n  Warning as WarningIcon,\n  ArrowDownward as SortingIcon,\n} from '@mui/icons-material'\nimport { SubmissionTypes } from '@oneblink/types'\nimport { IsHoveringProvider } from '../../../hooks/useIsHovering'\nimport { NoResourcesYet } from '../../NoResourcesYet'\nimport FormStoreIcon from '../display/FormStoreIcon'\nimport HeaderCellMoreButton from './HeaderCellMoreButton'\nimport { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad'\nimport { formStoreService } from '@oneblink/apps'\n\nconst useStyles = makeStyles((theme) => ({\n  tooltip: {\n    zIndex: theme.zIndex.drawer,\n  },\n  sortingIcon: {\n    transition: theme.transitions.create('transform'),\n  },\n  sortingIconDescending: {\n    transform: 'rotate(180deg)',\n  },\n  table: {\n    display: 'inline-block',\n    '& .tbody .tr:last-child .tc': {\n      borderBottom: 0,\n    },\n    '& .tc': {\n      padding: theme.spacing(1),\n      borderBottomColor: theme.palette.divider,\n      borderBottom: '1px solid',\n      display: 'flex',\n      alignItems: 'center',\n      '&.is-clickable': {\n        cursor: 'pointer',\n        transition: theme.transitions.create('transform'),\n        '&:hover': {\n          backgroundColor: theme.palette.action.hover,\n        },\n      },\n    },\n    '& .td': {\n      position: 'relative',\n      borderRight: '1px solid',\n      borderRightColor: theme.palette.divider,\n      overflowX: 'hidden',\n      // minus 1 to cater for the border\n      minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,\n      '&.is-resizing': {\n        borderRightStyle: 'dashed',\n      },\n    },\n    '& .th': {\n      position: 'relative',\n      fontWeight: theme.typography.fontWeightBold,\n      paddingRight: 0,\n      '& .th-content': {\n        flex: 1,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        borderRight: '1px solid',\n        borderRightColor: theme.palette.divider,\n        paddingRight: theme.spacing(),\n        '& .th-label': {\n          display: 'inline-flex',\n          alignItems: 'center',\n          '& .th-icon': {\n            marginLeft: theme.spacing(),\n          },\n        },\n      },\n      '& .resizer': {\n        display: 'inline-flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        borderWidth: 0,\n        borderLeftStyle: 'solid',\n        borderRightStyle: 'solid',\n        borderColor: theme.palette.divider,\n        paddingTop: theme.spacing(),\n        paddingBottom: theme.spacing(),\n        paddingRight: `calc(${theme.spacing(1)} + 1px)`,\n        position: 'absolute',\n        right: 0,\n        top: theme.spacing(0.5),\n        bottom: theme.spacing(0.5),\n        transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,\n        zIndex: 1,\n        // prevents from scrolling while dragging on touch devices\n        touchAction: 'none',\n        '&:hover': {\n          borderWidth: '1px',\n        },\n        '&.is-resizing': {\n          borderWidth: '1px',\n          borderColor: theme.palette.grey[700],\n        },\n      },\n    },\n  },\n}))\n\ntype FormStoreTableInstance = TableInstance<SubmissionTypes.FormStoreRecord>\n\nfunction FormStoreTable({\n  getTableProps,\n  getTableBodyProps,\n  headerGroups,\n  rows,\n  prepareRow,\n  isEmptyResults,\n  onChangeFilters,\n}: {\n  getTableProps: FormStoreTableInstance['getTableProps']\n  getTableBodyProps: FormStoreTableInstance['getTableBodyProps']\n  headerGroups: FormStoreTableInstance['headerGroups']\n  rows: FormStoreTableInstance['rows']\n  prepareRow: FormStoreTableInstance['prepareRow']\n  isEmptyResults: boolean\n  onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>\n}) {\n  const classes = useStyles()\n\n  return (\n    <>\n      <Paper>\n        <TableContainer>\n          <div className={classes.table} {...getTableProps()}>\n            <div className=\"thead\">\n              {\n                // Loop over the header rows\n                headerGroups.map((headerGroup) => (\n                  // Apply the header row props\n                  <div {...headerGroup.getHeaderGroupProps()} className=\"tr\">\n                    {\n                      // Loop over the headers in each row\n                      headerGroup.headers.map((headerGroup) => {\n                        const sortingProperty = headerGroup.sorting?.property\n                        const sortingDirection = headerGroup.sorting?.direction\n\n                        return (\n                          <Tooltip\n                            title={headerGroup.tooltip || ''}\n                            arrow\n                            key={headerGroup.id}\n                            classes={{\n                              popper: classes.tooltip,\n                            }}\n                          >\n                            <div\n                              className={clsx('th tc', {\n                                'is-clickable': !!sortingProperty,\n                              })}\n                              onClick={\n                                sortingProperty\n                                  ? () => {\n                                      onChangeFilters((currentFilters) => {\n                                        switch (sortingDirection) {\n                                          case 'ascending': {\n                                            return {\n                                              ...currentFilters,\n                                              sorting: [\n                                                {\n                                                  property: sortingProperty,\n                                                  direction: 'descending',\n                                                },\n                                              ],\n                                            }\n                                          }\n                                          case 'descending': {\n                                            return {\n                                              ...currentFilters,\n                                              sorting: undefined,\n                                            }\n                                          }\n                                          default: {\n                                            return {\n                                              ...currentFilters,\n                                              sorting: [\n                                                {\n                                                  property: sortingProperty,\n                                                  direction: 'ascending',\n                                                },\n                                              ],\n                                            }\n                                          }\n                                        }\n                                      }, false)\n                                    }\n                                  : undefined\n                              }\n                              // Apply the header cell props\n                              {...headerGroup.getHeaderProps()}\n                            >\n                              <IsHoveringProvider className=\"th-content\">\n                                <div className=\"th-label\">\n                                  <span>{headerGroup.headerText}</span>\n                                  {sortingDirection && (\n                                    <SortingIcon\n                                      fontSize=\"small\"\n                                      color=\"primary\"\n                                      className={clsx(\n                                        'th-icon',\n                                        classes.sortingIcon,\n                                        {\n                                          [classes.sortingIconDescending]:\n                                            sortingDirection === 'descending',\n                                        },\n                                      )}\n                                    />\n                                  )}\n                                  {headerGroup.filter?.isInvalid ? (\n                                    <Tooltip\n                                      title={\n                                        headerGroup.filter?.validationMessage ||\n                                        ''\n                                      }\n                                    >\n                                      <WarningIcon\n                                        fontSize=\"small\"\n                                        color=\"error\"\n                                        className=\"th-icon\"\n                                      />\n                                    </Tooltip>\n                                  ) : headerGroup.filter?.value ? (\n                                    <FilterListIcon\n                                      fontSize=\"small\"\n                                      color=\"primary\"\n                                      className=\"th-icon\"\n                                    />\n                                  ) : null}\n                                </div>\n                                <HeaderCellMoreButton\n                                  headerGroup={headerGroup}\n                                  onHide={headerGroup.toggleHidden}\n                                />\n                                <div\n                                  {...headerGroup.getResizerProps()}\n                                  className={clsx('resizer', {\n                                    'is-resizing': headerGroup.isResizing,\n                                  })}\n                                  onClick={(event) => {\n                                    event.stopPropagation()\n                                  }}\n                                />\n                              </IsHoveringProvider>\n                            </div>\n                          </Tooltip>\n                        )\n                      })\n                    }\n                  </div>\n                ))\n              }\n            </div>\n            {!isEmptyResults ? (\n              <div {...getTableBodyProps()} className=\"tbody\">\n                {\n                  // Loop over the table rows\n                  rows.map((row) => {\n                    // Prepare the row for display\n                    prepareRow(row)\n                    return (\n                      // Apply the row props\n                      <div {...row.getRowProps()} className=\"tr\">\n                        {\n                          // Loop over the rows cells\n                          row.cells.map((cell) => {\n                            // Apply the cell props\n                            return (\n                              <IsHoveringProvider\n                                {...cell.getCellProps()}\n                                className={clsx('td tc', {\n                                  'is-resizing': cell.column.isResizing,\n                                })}\n                              >\n                                {\n                                  // Render the cell contents\n                                  cell.render('Cell')\n                                }\n                              </IsHoveringProvider>\n                            )\n                          })\n                        }\n                      </div>\n                    )\n                  })\n                }\n              </div>\n            ) : (\n              <Box padding={2} />\n            )}\n          </div>\n        </TableContainer>\n      </Paper>\n\n      {isEmptyResults && (\n        <NoResourcesYet\n          IconComponent={FormStoreIcon}\n          title=\"No Records Found...\"\n        >\n          There are no Submissions matching your filters.\n        </NoResourcesYet>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormStoreTable)\n"]}

package/dist/components/formStore/table/useFormStoreTable.d.ts

@@ -0,0 +1,12 @@
+import { FormStoreRecord } from '@oneblink/types/typescript/submissions';
+import { FormTypes } from '@oneblink/types';
+import { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad';
+import { formStoreService } from '@oneblink/apps';
+export default function FormStoreTable({ form, formElements, formStoreRecords, filters, onChangeFilters, submissionIdValidationMessage, }: {
+    formStoreRecords: FormStoreRecord[];
+    form: FormTypes.Form;
+    formElements: FormTypes.FormElementWithName[];
+    filters: formStoreService.FormStoreFilters;
+    onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>;
+    submissionIdValidationMessage?: string;
+}): import("react-table").TableInstance<FormStoreRecord>;

package/dist/components/formStore/table/useFormStoreTable.js

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { useFlexLayout, useResizeColumns, useTable, } from 'react-table';
+import { format } from 'date-fns';
+import generateColumns from './generateColumns';
+import ActionedByTableCell from './ActionedByTableCell';
+import TableCellCopyButton from './TableCellCopyButton';
+import { localisationService } from '@oneblink/apps';
+const defaultColumn = {
+    minWidth: 150,
+    width: 225,
+};
+const localStorageKey = (formId) => `REACT_TABLE_STATE_FORM_STORE_${formId}`;
+export default function FormStoreTable({ form, formElements, formStoreRecords, filters, onChangeFilters, submissionIdValidationMessage, }) {
+    const columns = React.useMemo(() => {
+        var _a, _b, _c, _d;
+        return generateColumns({
+            formElements,
+            filters,
+            parentElementNames: [],
+            onChangeFilters,
+            allowCopy: true,
+            initialColumns: [
+                {
+                    id: 'SUBMITTED_AT',
+                    headerText: 'Submission Date Time',
+                    sorting: {
+                        property: 'dateTimeSubmitted',
+                        direction: (_b = (_a = filters.sorting) === null || _a === void 0 ? void 0 : _a.find(({ property }) => property === 'dateTimeSubmitted')) === null || _b === void 0 ? void 0 : _b.direction,
+                    },
+                    filter: {
+                        type: 'DATETIME',
+                        value: filters.dateTimeSubmitted,
+                        onChange: (newValue) => {
+                            onChangeFilters((currentFilters) => ({
+                                ...currentFilters,
+                                dateTimeSubmitted: newValue,
+                            }), false);
+                        },
+                    },
+                    Cell: ({ row: { original: formStoreRecord }, }) => {
+                        const text = format(new Date(formStoreRecord.dateTimeSubmitted), localisationService.getDateFnsFormats().longDateTime);
+                        return (React.createElement(React.Fragment, null,
+                            text,
+                            React.createElement(TableCellCopyButton, { text: text })));
+                    },
+                },
+                {
+                    id: 'SUBMITTED_BY',
+                    headerText: 'Submitted By',
+                    sorting: undefined,
+                    filter: {
+                        type: 'TEXT',
+                        value: filters.submittedBy,
+                        onChange: (newValue) => {
+                            onChangeFilters((currentFilters) => ({
+                                ...currentFilters,
+                                submittedBy: newValue,
+                            }), true);
+                        },
+                    },
+                    Cell: ({ row: { original: formStoreRecord }, }) => (React.createElement(ActionedByTableCell, { userProfile: formStoreRecord.user, developerKey: formStoreRecord.key, variant: "outlined" })),
+                },
+                {
+                    id: 'SUBMISSION_ID',
+                    headerText: 'Submission Id',
+                    sorting: undefined,
+                    filter: {
+                        type: 'SUBMISSION_ID',
+                        value: filters.submissionId,
+                        validationMessage: submissionIdValidationMessage,
+                        isInvalid: !!submissionIdValidationMessage,
+                        onChange: (newValue) => {
+                            onChangeFilters((currentFilters) => ({
+                                ...currentFilters,
+                                submissionId: newValue,
+                            }), true);
+                        },
+                    },
+                    Cell: ({ row: { original: formStoreRecord }, }) => (React.createElement(React.Fragment, null,
+                        formStoreRecord.submissionId,
+                        React.createElement(TableCellCopyButton, { text: formStoreRecord.submissionId }))),
+                },
+                {
+                    id: 'EXTERNAL_ID',
+                    headerText: 'External Id',
+                    sorting: {
+                        property: 'externalId',
+                        direction: (_d = (_c = filters.sorting) === null || _c === void 0 ? void 0 : _c.find(({ property }) => property === 'externalId')) === null || _d === void 0 ? void 0 : _d.direction,
+                    },
+                    filter: {
+                        type: 'TEXT',
+                        value: filters.externalId,
+                        onChange: (newValue) => {
+                            onChangeFilters((currentFilters) => ({
+                                ...currentFilters,
+                                externalId: newValue,
+                            }), true);
+                        },
+                    },
+                    Cell: ({ row: { original: formStoreRecord }, }) => (React.createElement(React.Fragment, null,
+                        formStoreRecord.externalId,
+                        formStoreRecord.externalId && (React.createElement(TableCellCopyButton, { text: formStoreRecord.externalId })))),
+                },
+            ],
+        });
+    }, [filters, formElements, onChangeFilters, submissionIdValidationMessage]);
+    const [initialState] = React.useState(() => {
+        const text = localStorage.getItem(localStorageKey(form.id));
+        if (text) {
+            return JSON.parse(text);
+        }
+    });
+    const table = useTable({
+        columns,
+        data: formStoreRecords,
+        defaultColumn,
+        autoResetHiddenColumns: false,
+        autoResetResize: false,
+        initialState: initialState
+            ? initialState
+            : { hiddenColumns: ['SUBMISSION_ID', 'EXTERNAL_ID'] },
+    }, useFlexLayout, useResizeColumns);
+    React.useEffect(() => {
+        if (!table.state.columnResizing.isResizingColumn) {
+            localStorage.setItem(localStorageKey(form.id), JSON.stringify(table.state));
+        }
+    }, [form.id, table.state]);
+    return table;
+}
+//# sourceMappingURL=useFormStoreTable.js.map

package/dist/components/formStore/table/useFormStoreTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormStoreTable.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/useFormStoreTable.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport {\n  CellProps,\n  useFlexLayout,\n  useResizeColumns,\n  useTable,\n  TableState,\n} from 'react-table'\nimport { format } from 'date-fns'\nimport generateColumns from './generateColumns'\nimport ActionedByTableCell from './ActionedByTableCell'\nimport TableCellCopyButton from './TableCellCopyButton'\nimport { FormTypes } from '@oneblink/types'\nimport { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad'\nimport { formStoreService, localisationService } from '@oneblink/apps'\n\nconst defaultColumn = {\n  minWidth: 150,\n  width: 225,\n}\n\nconst localStorageKey = (formId: number) =>\n  `REACT_TABLE_STATE_FORM_STORE_${formId}`\n\nexport default function FormStoreTable({\n  form,\n  formElements,\n  formStoreRecords,\n  filters,\n  onChangeFilters,\n  submissionIdValidationMessage,\n}: {\n  formStoreRecords: FormStoreRecord[]\n  form: FormTypes.Form\n  formElements: FormTypes.FormElementWithName[]\n  filters: formStoreService.FormStoreFilters\n  onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>\n  submissionIdValidationMessage?: string\n}) {\n  const columns = React.useMemo(() => {\n    return generateColumns({\n      formElements,\n      filters,\n      parentElementNames: [],\n      onChangeFilters,\n      allowCopy: true,\n      initialColumns: [\n        {\n          id: 'SUBMITTED_AT',\n          headerText: 'Submission Date Time',\n          sorting: {\n            property: 'dateTimeSubmitted',\n            direction: filters.sorting?.find(\n              ({ property }) => property === 'dateTimeSubmitted',\n            )?.direction,\n          },\n          filter: {\n            type: 'DATETIME',\n            value: filters.dateTimeSubmitted as\n              | { $gte?: string; $lte?: string }\n              | undefined,\n            onChange: (newValue) => {\n              onChangeFilters(\n                (currentFilters) => ({\n                  ...currentFilters,\n                  dateTimeSubmitted: newValue,\n                }),\n                false,\n              )\n            },\n          },\n          Cell: ({\n            row: { original: formStoreRecord },\n          }: CellProps<FormStoreRecord>) => {\n            const text = format(\n              new Date(formStoreRecord.dateTimeSubmitted),\n              localisationService.getDateFnsFormats().longDateTime,\n            )\n            return (\n              <>\n                {text}\n                <TableCellCopyButton text={text} />\n              </>\n            )\n          },\n        },\n        {\n          id: 'SUBMITTED_BY',\n          headerText: 'Submitted By',\n          sorting: undefined,\n          filter: {\n            type: 'TEXT',\n            value: filters.submittedBy as { $regex: string } | undefined,\n            onChange: (newValue) => {\n              onChangeFilters(\n                (currentFilters) => ({\n                  ...currentFilters,\n                  submittedBy: newValue,\n                }),\n                true,\n              )\n            },\n          },\n          Cell: ({\n            row: { original: formStoreRecord },\n          }: CellProps<FormStoreRecord>) => (\n            <ActionedByTableCell\n              userProfile={formStoreRecord.user}\n              developerKey={formStoreRecord.key}\n              variant=\"outlined\"\n            />\n          ),\n        },\n        {\n          id: 'SUBMISSION_ID',\n          headerText: 'Submission Id',\n          sorting: undefined,\n          filter: {\n            type: 'SUBMISSION_ID',\n            value: filters.submissionId as { $eq: string } | undefined,\n            validationMessage: submissionIdValidationMessage,\n            isInvalid: !!submissionIdValidationMessage,\n            onChange: (newValue) => {\n              onChangeFilters(\n                (currentFilters) => ({\n                  ...currentFilters,\n                  submissionId: newValue,\n                }),\n                true,\n              )\n            },\n          },\n          Cell: ({\n            row: { original: formStoreRecord },\n          }: CellProps<FormStoreRecord>) => (\n            <>\n              {formStoreRecord.submissionId}\n              <TableCellCopyButton text={formStoreRecord.submissionId} />\n            </>\n          ),\n        },\n        {\n          id: 'EXTERNAL_ID',\n          headerText: 'External Id',\n          sorting: {\n            property: 'externalId',\n            direction: filters.sorting?.find(\n              ({ property }) => property === 'externalId',\n            )?.direction,\n          },\n          filter: {\n            type: 'TEXT',\n            value: filters.externalId as { $regex: string } | undefined,\n            onChange: (newValue) => {\n              onChangeFilters(\n                (currentFilters) => ({\n                  ...currentFilters,\n                  externalId: newValue,\n                }),\n                true,\n              )\n            },\n          },\n          Cell: ({\n            row: { original: formStoreRecord },\n          }: CellProps<FormStoreRecord>) => (\n            <>\n              {formStoreRecord.externalId}\n              {formStoreRecord.externalId && (\n                <TableCellCopyButton text={formStoreRecord.externalId} />\n              )}\n            </>\n          ),\n        },\n      ],\n    })\n  }, [filters, formElements, onChangeFilters, submissionIdValidationMessage])\n\n  const [initialState] = React.useState<Partial<TableState<FormStoreRecord>>>(\n    () => {\n      const text = localStorage.getItem(localStorageKey(form.id))\n      if (text) {\n        return JSON.parse(text)\n      }\n    },\n  )\n\n  const table = useTable(\n    {\n      columns,\n      data: formStoreRecords,\n      defaultColumn,\n      autoResetHiddenColumns: false,\n      autoResetResize: false,\n      initialState: initialState\n        ? initialState\n        : { hiddenColumns: ['SUBMISSION_ID', 'EXTERNAL_ID'] },\n    },\n    useFlexLayout,\n    useResizeColumns,\n  )\n\n  React.useEffect(() => {\n    if (!table.state.columnResizing.isResizingColumn) {\n      localStorage.setItem(\n        localStorageKey(form.id),\n        JSON.stringify(table.state),\n      )\n    }\n  }, [form.id, table.state])\n\n  return table\n}\n"]}

package/dist/components/messages/LargeIconMessage.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+declare type Props = {
+    IconComponent: React.ComponentType<{
+        className: string;
+    }>;
+    title: string;
+    variant: 'primary' | 'success' | 'error' | 'warning';
+    gutterTop?: boolean;
+    gutterBottom?: boolean;
+    children?: React.ReactNode;
+    action?: React.ReactNode;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/messages/LargeIconMessage.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import makeStyles from '@mui/styles/makeStyles';
+import { Typography, Grid, Container } from '@mui/material';
+// Styles
+const useStyles = makeStyles((theme) => ({
+    gutterTop: {
+        paddingTop: theme.spacing(4),
+    },
+    gutterBottom: {
+        marginBottom: theme.spacing(4),
+    },
+    iconContainer: {
+        textAlign: 'center',
+    },
+    icon: {
+        fontSize: theme.spacing(16),
+    },
+    primaryText: {
+        color: theme.palette.primary.main,
+    },
+    successText: {
+        color: theme.palette.success.main,
+    },
+    errorText: {
+        color: theme.palette.error.main,
+    },
+    warningText: {
+        color: theme.palette.warning.main,
+    },
+}));
+// TODO: Come back to this
+// interface StyledIconContainerProps {
+//   gutterTop?: boolean
+// }
+// const StyledIconContainer = styled('div', {
+//   shouldForwardProp: (prop) => prop !== 'gutterTop',
+// })<StyledIconContainerProps>(({ theme, gutterTop }) => ({
+//   textAlign: 'center',
+//   ...(gutterTop
+//     ? {
+//         paddingTop: theme.spacing(4),
+//       }
+//     : {}),
+// }))
+function LargeIconMessage({ IconComponent, title, variant, gutterTop, gutterBottom, children, action, }) {
+    const classes = useStyles();
+    const textClassName = clsx({
+        [classes.primaryText]: variant === 'primary',
+        [classes.successText]: variant === 'success',
+        [classes.errorText]: variant === 'error',
+        [classes.warningText]: variant === 'warning',
+    });
+    return (React.createElement(Container, { maxWidth: "sm" },
+        React.createElement("div", { className: clsx(classes.iconContainer, {
+                [classes.gutterTop]: gutterTop,
+            }) },
+            React.createElement(IconComponent, { className: clsx(classes.icon, textClassName) })),
+        React.createElement(Typography, { variant: "h5", align: "center", gutterBottom: true, className: textClassName }, title),
+        children ? (React.createElement(Typography, { align: "center", variant: "body2", paragraph: !!action, className: clsx({
+                [classes.gutterBottom]: !action && gutterBottom,
+            }) }, children)) : null,
+        action && (React.createElement(Grid, { container: true, justifyContent: "center", className: clsx({
+                [classes.gutterBottom]: gutterBottom,
+            }) }, action))));
+}
+export default React.memo(LargeIconMessage);
+//# sourceMappingURL=LargeIconMessage.js.map

package/dist/components/messages/LargeIconMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LargeIconMessage.js","sourceRoot":"","sources":["../../../src/components/messages/LargeIconMessage.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport makeStyles from '@mui/styles/makeStyles'\nimport { Typography, Grid, Container } from '@mui/material'\n// import { styled } from '@mui/material/styles'\n\ntype Props = {\n  IconComponent: React.ComponentType<{\n    className: string\n  }>\n  title: string\n  variant: 'primary' | 'success' | 'error' | 'warning'\n  gutterTop?: boolean\n  gutterBottom?: boolean\n  children?: React.ReactNode\n  action?: React.ReactNode\n}\n// Styles\nconst useStyles = makeStyles((theme) => ({\n  gutterTop: {\n    paddingTop: theme.spacing(4),\n  },\n  gutterBottom: {\n    marginBottom: theme.spacing(4),\n  },\n  iconContainer: {\n    textAlign: 'center',\n  },\n  icon: {\n    fontSize: theme.spacing(16),\n  },\n  primaryText: {\n    color: theme.palette.primary.main,\n  },\n  successText: {\n    color: theme.palette.success.main,\n  },\n  errorText: {\n    color: theme.palette.error.main,\n  },\n  warningText: {\n    color: theme.palette.warning.main,\n  },\n}))\n\n// TODO: Come back to this\n// interface StyledIconContainerProps {\n//   gutterTop?: boolean\n// }\n\n// const StyledIconContainer = styled('div', {\n//   shouldForwardProp: (prop) => prop !== 'gutterTop',\n// })<StyledIconContainerProps>(({ theme, gutterTop }) => ({\n//   textAlign: 'center',\n//   ...(gutterTop\n//     ? {\n//         paddingTop: theme.spacing(4),\n//       }\n//     : {}),\n// }))\n\nfunction LargeIconMessage({\n  IconComponent,\n  title,\n  variant,\n  gutterTop,\n  gutterBottom,\n  children,\n  action,\n}: Props) {\n  const classes = useStyles()\n  const textClassName = clsx({\n    [classes.primaryText]: variant === 'primary',\n    [classes.successText]: variant === 'success',\n    [classes.errorText]: variant === 'error',\n    [classes.warningText]: variant === 'warning',\n  })\n  return (\n    <Container maxWidth=\"sm\">\n      <div\n        className={clsx(classes.iconContainer, {\n          [classes.gutterTop]: gutterTop,\n        })}\n      >\n        <IconComponent className={clsx(classes.icon, textClassName)} />\n      </div>\n      <Typography\n        variant=\"h5\"\n        align=\"center\"\n        gutterBottom\n        className={textClassName}\n      >\n        {title}\n      </Typography>\n      {children ? (\n        <Typography\n          align=\"center\"\n          variant=\"body2\"\n          paragraph={!!action}\n          className={clsx({\n            [classes.gutterBottom]: !action && gutterBottom,\n          })}\n        >\n          {children}\n        </Typography>\n      ) : null}\n      {action && (\n        <Grid\n          container\n          justifyContent=\"center\"\n          className={clsx({\n            [classes.gutterBottom]: gutterBottom,\n          })}\n        >\n          {action}\n        </Grid>\n      )}\n    </Container>\n  )\n}\n\nexport default React.memo<Props>(LargeIconMessage)\n"]}

package/dist/components/pickers/V4CompatibleDatePicker.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { MobileDatePickerProps } from '@mui/x-date-pickers';
+import { TextField, IconButton } from '@mui/material';
+declare type RemainingPickerProps = Omit<MobileDatePickerProps<Date>, 'onError' | 'renderInput' | 'toolbarFormat' | 'rightArrowIcon' | 'leftArrowIcon' | 'maxDate' | 'minDate' | 'inputFormat'>;
+declare type TextFieldProps = React.ComponentProps<typeof TextField>;
+declare type IconButtonProps = React.ComponentProps<typeof IconButton>;
+declare type Props = RemainingPickerProps & {
+    name?: string;
+    label?: string;
+    maxDate?: string | Date;
+    maxDateMessage?: string;
+    minDate?: string | Date;
+    minDateMessage?: string;
+    margin?: TextFieldProps['margin'];
+    size?: TextFieldProps['size'];
+    placeholder?: string;
+    InputProps?: TextFieldProps['InputProps'];
+    inputVariant?: TextFieldProps['variant'];
+    onBlur?: TextFieldProps['onBlur'];
+    startIconButton?: boolean;
+    endIconButton?: boolean;
+    iconButtonEdge?: IconButtonProps['edge'];
+    iconButtonSize?: IconButtonProps['size'];
+    helperText?: string | React.ReactNode;
+    error?: boolean;
+    required?: boolean;
+    'data-cypress'?: string;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/pickers/V4CompatibleDatePicker.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { MobileDatePicker } from '@mui/x-date-pickers';
+import { TextField, InputAdornment, IconButton } from '@mui/material';
+import { DateRange } from '@mui/icons-material';
+import useBooleanState from '../../hooks/useBooleanState';
+import { localisationService } from '@oneblink/apps';
+const emptyFn = () => {
+    //
+};
+const V4CompatibleDatePicker = ({ name, label, maxDate, maxDateMessage, minDate, minDateMessage, margin, size, placeholder, InputProps, onChange, inputVariant, onBlur, disabled, startIconButton, endIconButton, iconButtonEdge, iconButtonSize, helperText: helperTextProp, error, required, 'data-cypress': dataCypress, ...rest }) => {
+    const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false);
+    const [helperText, setHelperText] = React.useState(undefined);
+    const handleError = React.useCallback((error) => {
+        switch (error) {
+            case 'invalidDate': {
+                return setHelperText('Invalid Date Time');
+            }
+            case 'maxDate': {
+                return setHelperText(maxDateMessage);
+            }
+            case 'minDate': {
+                return setHelperText(minDateMessage);
+            }
+            default: {
+                return setHelperText(undefined);
+            }
+        }
+    }, [maxDateMessage, minDateMessage]);
+    const convertedMaxDate = React.useMemo(() => {
+        if (typeof maxDate === 'string') {
+            return new Date(maxDate);
+        }
+    }, [maxDate]);
+    const convertedMinDate = React.useMemo(() => {
+        if (typeof minDate === 'string') {
+            return new Date(minDate);
+        }
+    }, [minDate]);
+    const onAccept = React.useCallback((date) => {
+        const currentValue = rest.value instanceof Date ? rest.value.toISOString() : rest.value;
+        if (currentValue !== ((date === null || date === void 0 ? void 0 : date.toISOString()) || null)) {
+            onChange(date);
+        }
+    }, [onChange, rest.value]);
+    return (React.createElement(MobileDatePicker, { open: isOpen, onOpen: setIsOpen, onClose: setIsClosed, renderInput: (props) => (React.createElement(TextField, { ...props, name: name, label: label, required: required, helperText: helperTextProp || helperText, ...(error ? { error } : {}), fullWidth: true, margin: margin, size: size, placeholder: placeholder, variant: inputVariant, onBlur: onBlur, InputProps: {
+                startAdornment: startIconButton ? (React.createElement(InputAdornment, { position: "start" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(DateRange, null)))) : undefined,
+                endAdornment: endIconButton ? (React.createElement(InputAdornment, { position: "end" },
+                    React.createElement(IconButton, { edge: iconButtonEdge, size: iconButtonSize, onClick: setIsOpen, disabled: disabled },
+                        React.createElement(DateRange, null)))) : undefined,
+                ...(InputProps ? InputProps : {}),
+            }, "data-cypress": dataCypress })), maxDate: convertedMaxDate, minDate: convertedMinDate, onError: handleError, 
+        // This triggers everytime a component of the while date changes within the picker
+        onChange: emptyFn, onAccept: onAccept, inputFormat: localisationService.getDateFnsFormats().shortDateTime, disabled: disabled, ...rest }));
+};
+export default React.memo(V4CompatibleDatePicker);
+//# sourceMappingURL=V4CompatibleDatePicker.js.map

package/dist/components/pickers/V4CompatibleDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"V4CompatibleDatePicker.js","sourceRoot":"","sources":["../../../src/components/pickers/V4CompatibleDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { MobileDatePicker, MobileDatePickerProps } from '@mui/x-date-pickers'\nimport { TextField, InputAdornment, IconButton } from '@mui/material'\nimport { DateRange } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { localisationService } from '@oneblink/apps'\n\ntype RemainingPickerProps = Omit<\n  MobileDatePickerProps<Date>,\n  | 'onError'\n  | 'renderInput'\n  | 'toolbarFormat'\n  | 'rightArrowIcon'\n  | 'leftArrowIcon'\n  | 'maxDate'\n  | 'minDate'\n  | 'inputFormat'\n>\n\ntype TextFieldProps = React.ComponentProps<typeof TextField>\ntype IconButtonProps = React.ComponentProps<typeof IconButton>\n\ntype Props = RemainingPickerProps & {\n  name?: string\n  label?: string\n  maxDate?: string | Date\n  maxDateMessage?: string\n  minDate?: string | Date\n  minDateMessage?: string\n  margin?: TextFieldProps['margin']\n  size?: TextFieldProps['size']\n  placeholder?: string\n  InputProps?: TextFieldProps['InputProps']\n  inputVariant?: TextFieldProps['variant']\n  onBlur?: TextFieldProps['onBlur']\n  startIconButton?: boolean\n  endIconButton?: boolean\n  iconButtonEdge?: IconButtonProps['edge']\n  iconButtonSize?: IconButtonProps['size']\n  helperText?: string | React.ReactNode\n  error?: boolean\n  required?: boolean\n  'data-cypress'?: string\n}\n\nconst emptyFn = () => {\n  //\n}\nconst V4CompatibleDatePicker = ({\n  name,\n  label,\n  maxDate,\n  maxDateMessage,\n  minDate,\n  minDateMessage,\n  margin,\n  size,\n  placeholder,\n  InputProps,\n  onChange,\n  inputVariant,\n  onBlur,\n  disabled,\n  startIconButton,\n  endIconButton,\n  iconButtonEdge,\n  iconButtonSize,\n  helperText: helperTextProp,\n  error,\n  required,\n  'data-cypress': dataCypress,\n  ...rest\n}: Props) => {\n  const [isOpen, setIsOpen, setIsClosed] = useBooleanState(false)\n  const [helperText, setHelperText] = React.useState<string | undefined>(\n    undefined,\n  )\n  const handleError = React.useCallback(\n    (error: Parameters<Required<MobileDatePickerProps>['onError']>[0]) => {\n      switch (error) {\n        case 'invalidDate': {\n          return setHelperText('Invalid Date Time')\n        }\n        case 'maxDate': {\n          return setHelperText(maxDateMessage)\n        }\n        case 'minDate': {\n          return setHelperText(minDateMessage)\n        }\n        default: {\n          return setHelperText(undefined)\n        }\n      }\n    },\n    [maxDateMessage, minDateMessage],\n  )\n\n  const convertedMaxDate = React.useMemo(() => {\n    if (typeof maxDate === 'string') {\n      return new Date(maxDate)\n    }\n  }, [maxDate])\n  const convertedMinDate = React.useMemo(() => {\n    if (typeof minDate === 'string') {\n      return new Date(minDate)\n    }\n  }, [minDate])\n\n  const onAccept = React.useCallback(\n    (date: Date | null) => {\n      const currentValue =\n        rest.value instanceof Date ? rest.value.toISOString() : rest.value\n\n      if (currentValue !== (date?.toISOString() || null)) {\n        onChange(date)\n      }\n    },\n    [onChange, rest.value],\n  )\n\n  return (\n    <MobileDatePicker\n      open={isOpen}\n      onOpen={setIsOpen}\n      onClose={setIsClosed}\n      renderInput={(props) => (\n        <TextField\n          {...props}\n          name={name}\n          label={label}\n          required={required}\n          helperText={helperTextProp || helperText}\n          {...(error ? { error } : {})}\n          fullWidth\n          margin={margin}\n          size={size}\n          placeholder={placeholder}\n          variant={inputVariant}\n          onBlur={onBlur}\n          InputProps={{\n            startAdornment: startIconButton ? (\n              <InputAdornment position=\"start\">\n                <IconButton\n                  edge={iconButtonEdge}\n                  size={iconButtonSize}\n                  onClick={setIsOpen}\n                  disabled={disabled}\n                >\n                  <DateRange />\n                </IconButton>\n              </InputAdornment>\n            ) : undefined,\n            endAdornment: endIconButton ? (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  edge={iconButtonEdge}\n                  size={iconButtonSize}\n                  onClick={setIsOpen}\n                  disabled={disabled}\n                >\n                  <DateRange />\n                </IconButton>\n              </InputAdornment>\n            ) : undefined,\n            ...(InputProps ? InputProps : {}),\n          }}\n          data-cypress={dataCypress}\n        />\n      )}\n      maxDate={convertedMaxDate}\n      minDate={convertedMinDate}\n      onError={handleError}\n      // This triggers everytime a component of the while date changes within the picker\n      onChange={emptyFn}\n      onAccept={onAccept}\n      inputFormat={localisationService.getDateFnsFormats().shortDateTime}\n      disabled={disabled}\n      {...rest}\n    />\n  )\n}\n\nexport default React.memo<Props>(V4CompatibleDatePicker)\n"]}