@pega/react-sdk-components 0.23.25 → 0.23.27

package/lib/components/template/SimpleTable/SimpleTableManual/SimpleTableManual.js

@@ -1,5 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable no-nested-ternary */
-import React, { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -8,13 +9,8 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
-import { buildFieldsForTable, filterData } from '../../../helpers/simpleTableHelpers';
-import { getDataPage } from '../../../helpers/data_page';
 import Link from '@material-ui/core/Link';
-import { getReferenceList } from '../../../helpers/field-group-utils';
-import { Utils } from '../../../helpers/utils';
 import { createElement } from 'react';
-import createPConnectComponent from '../../../../bridge/react_pconnect';
 import TableSortLabel from '@material-ui/core/TableSortLabel';
 import MoreIcon from '@material-ui/icons/MoreVert';
 import Menu from '@material-ui/core/Menu';
@@ -28,6 +24,12 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import Select from '@material-ui/core/Select';
 import Button from '@material-ui/core/Button';
 import TextField from '@material-ui/core/TextField';
+import createPConnectComponent from '../../../../bridge/react_pconnect';
+import { Utils } from '../../../helpers/utils';
+import { getReferenceList } from '../../../helpers/field-group-utils';
+import { getDataPage } from '../../../helpers/data_page';
+import { buildFieldsForTable, filterData, getContext } from '../../../helpers/simpleTableHelpers';
+import { format } from '../../../helpers/formatters';
 const useStyles = makeStyles(( /* theme */) => ({
     label: {
         margin: '8px'
@@ -62,24 +64,27 @@ let myRows;
 export default function SimpleTableManual(props) {
     const classes = useStyles();
     const { getPConnect, referenceList = [], // if referenceList not in configProps$, default to empy list
-    children, renderMode, presets, label: labelProp, showLabel, dataPageName, contextClass, hideAddRow, hideDeleteRow, propertyLabel, fieldMetadata } = props;
+    children, renderMode, presets, label: labelProp, showLabel, dataPageName, contextClass, hideAddRow, hideDeleteRow, propertyLabel, fieldMetadata, editMode, addAndEditRowsWithin, viewForAddAndEditModal, editModeConfig, displayMode, useSeparateViewForEdit, viewForEditModal } = props;
     const pConn = getPConnect();
     const [rowData, setRowData] = useState([]);
     const [elements, setElementsData] = useState([]);
     const [order, setOrder] = useState('asc');
     const [orderBy, setOrderBy] = useState('');
     const [anchorEl, setAnchorEl] = useState(null);
+    const [editAnchorEl, setEditAnchorEl] = useState(null);
     const [open, setOpen] = useState(false);
     const [filterBy, setFilterBy] = useState();
     const [containsDateOrTime, setContainsDateOrTime] = useState(false);
     const [filterType, setFilterType] = useState('string');
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [displayDialogFilterName, setDisplayDialogFilterName] = useState('');
     const [displayDialogContainsFilter, setDisplayDialogContainsFilter] = useState('contains');
     const [displayDialogContainsValue, setDisplayDialogContainsValue] = useState('');
     const [displayDialogDateFilter, setDisplayDialogDateFilter] = useState('notequal');
     const [displayDialogDateValue, setDisplayDialogDateValue] = useState('');
+    const selectedRowIndex = useRef(null);
     const parameters = fieldMetadata?.datasource?.parameters;
+    const { referenceListStr } = getContext(getPConnect());
     const label = labelProp || propertyLabel;
     const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
     if (propsToUse.showLabel === false) {
@@ -90,7 +95,7 @@ export default function SimpleTableManual(props) {
     const resolvedList = getReferenceList(pConn);
     const pageReference = `${pConn.getPageReference()}${resolvedList}`;
     pConn.setReferenceList(resolvedList);
-    const menuIconOverride$ = Utils.getImageSrc('trash', PCore.getAssetLoader().getStaticServerUrl());
+    const menuIconOverride$ = Utils.getImageSrc('trash', Utils.getSDKStaticConentUrl());
     const resolvedFields = children?.[0]?.children || presets?.[0].children?.[0].children;
     // NOTE: props has each child.config with datasource and value undefined
     //  but getRawMetadata() has each child.config with datasource and value showing their unresolved values (ex: "@P thePropName")
@@ -105,20 +110,30 @@ export default function SimpleTableManual(props) {
     //  Neither of these appear in the resolved props
     const rawConfig = rawMetadata?.config;
     const rawFields = rawConfig?.children?.[0]?.children || rawConfig?.presets?.[0].children?.[0]?.children;
+    const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
     const readOnlyMode = renderMode === 'ReadOnly';
     const editableMode = renderMode === 'Editable';
     const showAddRowButton = !readOnlyMode && !hideAddRow;
-    const showDeleteButton = !readOnlyMode && !hideDeleteRow;
+    const allowEditingInModal = (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') && !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
+    const showDeleteButton = editableMode && !hideDeleteRow;
+    const defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
+    const bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
+    const editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
+    const fieldsWithPropNames = rawFields.map((field, index) => {
+        return { ...resolvedFields[index], propName: field.config.value.replace('@P .', '') };
+    });
     useEffect(() => {
-        if (editableMode) {
+        if (editableMode && !allowEditingInModal) {
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             buildElementsForTable();
         }
-        else {
+    }, [referenceList.length]);
+    useEffect(() => {
+        if (readOnlyMode || allowEditingInModal) {
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
             generateRowsData();
         }
-    }, [referenceList.length]);
+    }, [referenceList]);
     // fieldDefs will be an array where each entry will have a "name" which will be the
     //  "resolved" property name (that we can use as the colId) though it's not really
     //  resolved. The buildFieldsForTable helper just removes the "@P " (which is what
@@ -129,18 +144,30 @@ export default function SimpleTableManual(props) {
     const displayedColumns = fieldDefs.map(field => {
         return field.name ? field.name : field.cellRenderer;
     });
+    const getFormattedValue = (val, key) => {
+        const rawField = fieldsWithPropNames.find(item => item.propName === key);
+        let options = {};
+        if (rawField && ['Boolean', 'Checkbox'].includes(rawField.type)) {
+            const { trueLabel, falseLabel } = rawField.config;
+            options = {
+                trueLabel,
+                falseLabel
+            };
+        }
+        return rawField ? format(val, rawField.type, options) : val;
+    };
     // console.log(`SimpleTable displayedColumns:`);
     // console.log(displayedColumns);
     // return the value that should be shown as the contents for the given row data
     //  of the given row field
     function getRowValue(inRowData, inColKey) {
         // See what data (if any) we have to display
-        const refKeys = inColKey.split('.');
+        const refKeys = inColKey?.split('.');
         let valBuilder = inRowData;
         for (const key of refKeys) {
             valBuilder = valBuilder[key];
         }
-        return valBuilder;
+        return getFormattedValue(valBuilder, inColKey);
     }
     const formatRowsData = data => {
         if (!data)
@@ -153,8 +180,8 @@ export default function SimpleTableManual(props) {
         });
     };
     function generateRowsData() {
-        // if dataPageName property value exists then make a datapage fetch call and get the list of data.
-        if (dataPageName) {
+        // if referenceList is empty and dataPageName property value exists then make a datapage fetch call and get the list of data.
+        if (!referenceList.length && dataPageName) {
             getDataPage(dataPageName, parameters, context).then(listData => {
                 const data = formatRowsData(listData);
                 myRows = data;
@@ -194,19 +221,33 @@ export default function SimpleTableManual(props) {
     // console.log(`SimpleTable rowData (${rowData.length} row(s)):`);
     // console.log(JSON.stringify(rowData));
     const addRecord = () => {
-        if (PCore.getPCoreVersion()?.includes('8.7')) {
+        if (allowEditingInModal && defaultView) {
+            pConn
+                .getActionsApi()
+                .openEmbeddedDataModal(defaultView, pConn, referenceListStr, referenceList.length, PCore.getConstants().RESOURCE_STATUS.CREATE);
+        }
+        else if (PCore.getPCoreVersion()?.includes('8.7')) {
             pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
         }
         else {
-            pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
+            pConn.getListActions().insert({ classID: contextClass }, referenceList.length, ''); // 3rd arg null until typedef marked correctly as optional
+        }
+    };
+    const editRecord = () => {
+        setEditAnchorEl(null);
+        if (typeof selectedRowIndex.current === 'number') {
+            pConn
+                .getActionsApi()
+                .openEmbeddedDataModal(bUseSeparateViewForEdit ? editView : defaultView, pConn, referenceListStr, selectedRowIndex.current, PCore.getConstants().RESOURCE_STATUS.UPDATE);
         }
     };
-    const deleteRecord = index => {
+    const deleteRecord = () => {
+        setEditAnchorEl(null);
         if (PCore.getPCoreVersion()?.includes('8.7')) {
-            pConn.getListActions().deleteEntry(index, pageReference);
+            pConn.getListActions().deleteEntry(selectedRowIndex.current, pageReference);
         }
         else {
-            pConn.getListActions().deleteEntry(index);
+            pConn.getListActions().deleteEntry(selectedRowIndex.current, ''); // 2nd arg empty string until typedef marked correctly as optional
         }
     };
     function buildElementsForTable() {
@@ -254,18 +295,13 @@ export default function SimpleTableManual(props) {
         }
         return 0;
     }
-    function getComparator(theOrder, orderedBy
-    // eslint-disable-next-line no-unused-vars
-    ) {
-        return theOrder === 'desc'
-            ? (a, b) => descendingComparator(a, b, orderedBy)
-            : (a, b) => -descendingComparator(a, b, orderedBy);
+    function getComparator(theOrder, orderedBy) {
+        return theOrder === 'desc' ? (a, b) => descendingComparator(a, b, orderedBy) : (a, b) => -descendingComparator(a, b, orderedBy);
     }
-    // eslint-disable-next-line no-unused-vars
     function stableSort(array, comparator) {
         const stabilizedThis = array.map((el, index) => [el, index]);
         stabilizedThis.sort((a, b) => {
-            // eslint-disable-next-line @typescript-eslint/no-shadow, no-shadow
+            // eslint-disable-next-line @typescript-eslint/no-shadow
             const order = comparator(a[0], b[0]);
             if (order !== 0)
                 return order;
@@ -279,8 +315,13 @@ export default function SimpleTableManual(props) {
         menuColumnLabel = labelValue;
         setAnchorEl(event.currentTarget);
     }
+    function editMenuClick(event, index) {
+        selectedRowIndex.current = index;
+        setEditAnchorEl(event.currentTarget);
+    }
     function _menuClose() {
         setAnchorEl(null);
+        setEditAnchorEl(null);
     }
     function _filterMenu() {
         setAnchorEl(null);
@@ -288,9 +329,7 @@ export default function SimpleTableManual(props) {
         for (const filterObj of filterByColumns) {
             if (filterObj.ref === menuColumnId) {
                 setFilterBy(menuColumnLabel);
-                if (filterObj.type === 'Date' ||
-                    filterObj.type === 'DateTime' ||
-                    filterObj.type === 'Time') {
+                if (filterObj.type === 'Date' || filterObj.type === 'DateTime' || filterObj.type === 'Time') {
                     setContainsDateOrTime(true);
                     setFilterType(filterObj.type);
                     setDisplayDialogDateFilter(filterObj.containsFilter);
@@ -353,15 +392,15 @@ export default function SimpleTableManual(props) {
     function updateFilterWithInfo() {
         let bFound = false;
         for (const filterObj of filterByColumns) {
-            if (filterObj['ref'] === menuColumnId) {
-                filterObj['type'] = filterType;
+            if (filterObj.ref === menuColumnId) {
+                filterObj.type = filterType;
                 if (containsDateOrTime) {
-                    filterObj['containsFilter'] = displayDialogDateFilter;
-                    filterObj['containsFilterValue'] = displayDialogDateValue;
+                    filterObj.containsFilter = displayDialogDateFilter;
+                    filterObj.containsFilterValue = displayDialogDateValue;
                 }
                 else {
-                    filterObj['containsFilter'] = displayDialogContainsFilter;
-                    filterObj['containsFilterValue'] = displayDialogContainsValue;
+                    filterObj.containsFilter = displayDialogContainsFilter;
+                    filterObj.containsFilterValue = displayDialogContainsValue;
                 }
                 bFound = true;
                 break;
@@ -371,14 +410,14 @@ export default function SimpleTableManual(props) {
             // add in
             const filterObj = {};
             filterObj.ref = menuColumnId;
-            filterObj['type'] = filterType;
+            filterObj.type = filterType;
             if (containsDateOrTime) {
-                filterObj['containsFilter'] = displayDialogDateFilter;
-                filterObj['containsFilterValue'] = displayDialogDateValue;
+                filterObj.containsFilter = displayDialogDateFilter;
+                filterObj.containsFilterValue = displayDialogDateValue;
             }
             else {
-                filterObj['containsFilter'] = displayDialogContainsFilter;
-                filterObj['containsFilterValue'] = displayDialogContainsValue;
+                filterObj.containsFilter = displayDialogContainsFilter;
+                filterObj.containsFilterValue = displayDialogContainsValue;
             }
             filterByColumns.push(filterObj);
         }
@@ -390,9 +429,9 @@ export default function SimpleTableManual(props) {
     }
     function _showFilteredIcon(columnId) {
         for (const filterObj of filterByColumns) {
-            if (filterObj['ref'] === columnId) {
+            if (filterObj.ref === columnId) {
                 // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-                if (filterObj['containsFilterValue'] !== '') {
+                if (filterObj.containsFilterValue !== '') {
                     return true;
                 }
                 return false;
@@ -402,89 +441,30 @@ export default function SimpleTableManual(props) {
     }
     function results() {
         const len = editableMode ? elements.length : rowData.length;
-        return len ? (React.createElement("span", { style: { fontSize: '0.9em', opacity: '0.7' } },
-            len,
-            " result",
-            len > 1 ? 's' : '')) : null;
+        return len ? (_jsxs("span", { style: { fontSize: '0.9em', opacity: '0.7' }, children: [len, " result", len > 1 ? 's' : ''] })) : null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TableContainer, { component: Paper, style: { margin: '4px 0px' }, id: "simple-table-manual" },
-            propsToUse.label && (React.createElement("h3", { className: classes.label },
-                propsToUse.label,
-                " ",
-                results())),
-            React.createElement(Table, null,
-                React.createElement(TableHead, { className: classes.header },
-                    React.createElement(TableRow, null, fieldDefs.map((field, index) => {
-                        return (React.createElement(TableCell, { key: `head-${displayedColumns[index]}`, className: classes.tableCell }, readOnlyMode ? (React.createElement("div", null,
-                            React.createElement(TableSortLabel, { active: orderBy === displayedColumns[index], direction: orderBy === displayedColumns[index] ? order : 'asc', onClick: createSortHandler(displayedColumns[index]) },
-                                field.label,
-                                _showFilteredIcon(field.name) && (React.createElement(FilterListIcon, { className: classes.moreIcon })),
-                                orderBy === displayedColumns[index] ? (React.createElement("span", { className: classes.visuallyHidden }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null),
-                            React.createElement(MoreIcon, { id: 'menu-icon', className: classes.moreIcon, onClick: event => {
-                                    _menuClick(event, field.name, field.meta.type, field.label);
-                                } }))) : (field.label)));
-                    }))),
-                React.createElement(TableBody, null,
-                    editableMode &&
-                        elements.map((row, index) => {
-                            const theKey = `row-${index}`;
-                            return (React.createElement(TableRow, { key: theKey },
-                                row.map((item, childIndex) => {
-                                    const theColKey = `data-${index}-${childIndex}`;
-                                    return (React.createElement(TableCell, { key: theColKey, className: classes.tableCell }, item));
-                                }),
-                                showDeleteButton && (React.createElement(TableCell, null,
-                                    React.createElement("button", { type: 'button', className: 'psdk-utility-button', id: 'delete-button', onClick: () => deleteRecord(index) },
-                                        React.createElement("img", { className: 'psdk-utility-card-action-svg-icon', src: menuIconOverride$ }))))));
-                        }),
-                    readOnlyMode &&
-                        rowData &&
-                        rowData.length > 0 &&
-                        stableSort(rowData, getComparator(order, orderBy))
-                            .slice(0)
-                            .map(row => {
-                            return (React.createElement(TableRow, { key: row[displayedColumns[0]] }, displayedColumns.map(colKey => {
-                                return (React.createElement(TableCell, { key: colKey, className: classes.tableCell }, typeof row[colKey] === 'boolean' && !row[colKey]
-                                    ? 'False'
-                                    : typeof row[colKey] === 'boolean' && row[colKey]
-                                        ? 'True'
-                                        : row[colKey]));
-                            })));
-                        }))),
-            readOnlyMode && rowData && rowData.length === 0 && (React.createElement("div", { className: 'no-records', id: 'no-records' }, "No records found.")),
-            editableMode && referenceList && referenceList.length === 0 && (React.createElement("div", { className: 'no-records', id: 'no-records' }, "No records found."))),
-        showAddRowButton && (React.createElement("div", { style: { fontSize: '1rem' } },
-            React.createElement(Link, { style: { cursor: 'pointer' }, onClick: addRecord }, "+ Add"))),
-        React.createElement(Menu, { id: 'simple-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: _menuClose },
-            React.createElement(MenuItem, { onClick: _filterMenu },
-                React.createElement(FilterListIcon, null),
-                " Filter"),
-            React.createElement(MenuItem, { onClick: _groupMenu },
-                React.createElement(SubjectIcon, null),
-                " Group")),
-        React.createElement(Dialog, { open: open, onClose: _closeDialog, "aria-labelledby": 'form-dialog-title' },
-            React.createElement(DialogTitle, { id: 'form-dialog-title' },
-                "Filter: ",
-                filterBy),
-            React.createElement(DialogContent, null, containsDateOrTime ? (React.createElement(React.Fragment, null,
-                React.createElement(Select, { value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true },
-                    React.createElement(MenuItem, { value: 'notequal' }, "is not equal to"),
-                    React.createElement(MenuItem, { value: 'equal' }, "is equal to"),
-                    React.createElement(MenuItem, { value: 'after' }, "after"),
-                    React.createElement(MenuItem, { value: 'before' }, "before"),
-                    React.createElement(MenuItem, { value: 'null' }, "is null"),
-                    React.createElement(MenuItem, { value: 'notnull' }, "is not null")),
-                filterType === 'Date' && (React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })),
-                filterType === 'DateTime' && (React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })),
-                filterType === 'Time' && (React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })))) : (React.createElement(React.Fragment, null,
-                React.createElement(Select, { id: 'filter', fullWidth: true, onChange: _dialogContainsFilter, value: displayDialogContainsFilter },
-                    React.createElement(MenuItem, { value: 'contains' }, "Contains"),
-                    React.createElement(MenuItem, { value: 'equals' }, "Equals"),
-                    React.createElement(MenuItem, { value: 'startswith' }, "Starts with")),
-                React.createElement(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'text', fullWidth: true, value: displayDialogContainsValue, onChange: _dialogContainsValue })))),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { onClick: _closeDialog, color: 'secondary' }, "Cancel"),
-                React.createElement(Button, { onClick: _submitFilter, color: 'primary' }, "Submit")))));
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { component: Paper, style: { margin: '4px 0px' }, id: 'simple-table-manual', children: [propsToUse.label && (_jsxs("h3", { className: classes.label, children: [propsToUse.label, " ", results()] })), _jsxs(Table, { children: [_jsx(TableHead, { className: classes.header, children: _jsx(TableRow, { children: fieldDefs.map((field, index) => {
+                                        return (_jsx(TableCell, { className: classes.tableCell, children: readOnlyMode ? (_jsxs("div", { children: [_jsxs(TableSortLabel, { active: orderBy === displayedColumns[index], direction: orderBy === displayedColumns[index] ? order : 'asc', onClick: createSortHandler(displayedColumns[index]), children: [field.label, _showFilteredIcon(field.name) && _jsx(FilterListIcon, { className: classes.moreIcon }), orderBy === displayedColumns[index] ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }), _jsx(MoreIcon, { id: 'menu-icon', className: classes.moreIcon, onClick: event => {
+                                                            _menuClick(event, field.name, field.meta.type, field.label);
+                                                        } })] })) : (field.label) }, `head-${displayedColumns[index]}`));
+                                    }) }) }), _jsxs(TableBody, { children: [editableMode &&
+                                        elements.map((row, index) => {
+                                            const theKey = `row-${index}`;
+                                            return (_jsxs(TableRow, { children: [row.map((item, childIndex) => {
+                                                        const theColKey = `data-${index}-${childIndex}`;
+                                                        return (_jsx(TableCell, { className: classes.tableCell, children: item }, theColKey));
+                                                    }), showDeleteButton && (_jsx(TableCell, { children: _jsx("button", { type: 'button', className: 'psdk-utility-button', id: 'delete-button', "aria-label": 'Delete Cell', onClick: () => deleteRecord(), children: _jsx("img", { className: 'psdk-utility-card-action-svg-icon', src: menuIconOverride$ }) }) }))] }, theKey));
+                                        }), (readOnlyMode || allowEditingInModal) &&
+                                        rowData &&
+                                        rowData.length > 0 &&
+                                        stableSort(rowData, getComparator(order, orderBy))
+                                            .slice(0)
+                                            .map((row, index) => {
+                                            return (_jsx(TableRow, { children: displayedColumns.map(colKey => {
+                                                    return (_jsx(TableCell, { className: classes.tableCell, children: showDeleteButton && colKey === 'DeleteIcon' ? (_jsxs("div", { children: [_jsx(MoreIcon, { id: 'table-edit-menu-icon', className: classes.moreIcon, onClick: event => {
+                                                                        editMenuClick(event, index);
+                                                                    } }), _jsxs(Menu, { id: 'table-edit-menu', anchorEl: editAnchorEl, keepMounted: true, open: Boolean(editAnchorEl), onClose: _menuClose, children: [_jsx(MenuItem, { onClick: () => editRecord(), children: "Edit" }), _jsx(MenuItem, { onClick: () => deleteRecord(), children: "Delete" })] })] })) : typeof row[colKey] === 'boolean' && !row[colKey] ? ('False') : typeof row[colKey] === 'boolean' && row[colKey] ? ('True') : (row[colKey]) }, colKey));
+                                                }) }, row[displayedColumns[0]]));
+                                        })] })] }), readOnlyMode && rowData && rowData.length === 0 && (_jsx("div", { className: 'no-records', id: 'no-records', children: "No records found." })), editableMode && referenceList && referenceList.length === 0 && (_jsx("div", { className: 'no-records', id: 'no-records', children: "No records found." }))] }), showAddRowButton && (_jsx("div", { style: { fontSize: '1rem' }, children: _jsx(Link, { style: { cursor: 'pointer' }, onClick: addRecord, children: "+ Add" }) })), _jsxs(Menu, { id: 'simple-menu', anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: _menuClose, children: [_jsxs(MenuItem, { onClick: _filterMenu, children: [_jsx(FilterListIcon, {}), " Filter"] }), _jsxs(MenuItem, { onClick: _groupMenu, children: [_jsx(SubjectIcon, {}), " Group"] })] }), _jsxs(Dialog, { open: open, onClose: _closeDialog, "aria-labelledby": 'form-dialog-title', children: [_jsxs(DialogTitle, { id: 'form-dialog-title', children: ["Filter: ", filterBy] }), _jsx(DialogContent, { children: containsDateOrTime ? (_jsxs(_Fragment, { children: [_jsxs(Select, { value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true, children: [_jsx(MenuItem, { value: 'notequal', children: "is not equal to" }), _jsx(MenuItem, { value: 'equal', children: "is equal to" }), _jsx(MenuItem, { value: 'after', children: "after" }), _jsx(MenuItem, { value: 'before', children: "before" }), _jsx(MenuItem, { value: 'null', children: "is null" }), _jsx(MenuItem, { value: 'notnull', children: "is not null" })] }), filterType === 'Date' && (_jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'DateTime' && (_jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'Time' && (_jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { id: 'filter', fullWidth: true, onChange: _dialogContainsFilter, value: displayDialogContainsFilter, children: [_jsx(MenuItem, { value: 'contains', children: "Contains" }), _jsx(MenuItem, { value: 'equals', children: "Equals" }), _jsx(MenuItem, { value: 'startswith', children: "Starts with" })] }), _jsx(TextField, { autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'text', fullWidth: true, value: displayDialogContainsValue, onChange: _dialogContainsValue })] })) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: _closeDialog, color: 'secondary', children: "Cancel" }), _jsx(Button, { onClick: _submitFilter, color: 'primary', children: "Submit" })] })] })] }));
 }
 //# sourceMappingURL=SimpleTableManual.js.map