@pega/react-sdk-components 0.24.4 → 0.25.2

package/lib/components/template/ListView/ListView.js

@@ -2,42 +2,44 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable no-plusplus */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable @typescript-eslint/no-shadow */
-import { useState, useEffect, useRef } from 'react';
-import { createStyles, makeStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TablePagination from '@material-ui/core/TablePagination';
-import TableRow from '@material-ui/core/TableRow';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import Paper from '@material-ui/core/Paper';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import SubjectIcon from '@material-ui/icons/Subject';
-import SearchIcon from '@material-ui/icons/Search';
-import TextField from '@material-ui/core/TextField';
-import Grid from '@material-ui/core/Grid';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Select from '@material-ui/core/Select';
-import Button from '@material-ui/core/Button';
-import Link from '@material-ui/core/Link';
-import Typography from '@material-ui/core/Typography';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import CloseIcon from '@material-ui/icons/Close';
-import { Radio } from '@material-ui/core';
-import Checkbox from '@material-ui/core/Checkbox';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import createStyles from '@mui/styles/createStyles';
+import makeStyles from '@mui/styles/makeStyles';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Paper from '@mui/material/Paper';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import SubjectIcon from '@mui/icons-material/Subject';
+import SearchIcon from '@mui/icons-material/Search';
+import TextField from '@mui/material/TextField';
+import Grid from '@mui/material/Grid';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Select from '@mui/material/Select';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { Radio } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
 import { filterData } from '../../helpers/simpleTableHelpers';
 import './ListView.css';
 import { getDateFormatInfo } from '../../helpers/date-format-utils';
 import { getCurrencyOptions } from '../../field/Currency/currency-utils';
+import { getGenericFieldsLocalizedValue } from '../../helpers/common-utils';
 import { format } from '../../helpers/formatters';
 import useInit from './hooks';
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -51,7 +53,8 @@ export default function ListView(props) {
     const { getPConnect, bInForm = true } = props;
     const { globalSearch, referenceList, 
     /* rowClickAction, */
-    selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, readonlyContextList: selectedValues, value } = props;
+    selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, viewName, readonlyContextList: selectedValues, value, displayAs } = props;
+    let { showRecords } = props;
     const ref = useRef({}).current;
     const cosmosTableRef = useRef();
     // List component context
@@ -59,6 +62,7 @@ export default function ListView(props) {
     const { meta } = listContext;
     const xRayApis = PCore.getDebugger().getXRayRuntime();
     const xRayUid = xRayApis.startXRay();
+    const { current: uniqueId } = useRef(crypto.randomUUID());
     useInit({
         ...props,
         setListContext,
@@ -67,8 +71,8 @@ export default function ListView(props) {
         xRayUid,
         cosmosTableRef
     });
+    useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName });
     const thePConn = getPConnect();
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
     const componentConfig = thePConn.getComponentConfig();
     const resolvedConfigProps = thePConn.getConfigProps();
     /** By default, pyGUID is used for Data classes and pyID is for Work classes as row-id/key */
@@ -143,6 +147,32 @@ export default function ListView(props) {
         }
     }));
     const classes = useStyles();
+    // Hook to clear the selections and update table in AdvancedSearch template when switching between search views
+    function useClearSelectionsAndUpdateTable({ getPConnect, uniqueId, viewName }) {
+        const clearSelectionsAndRefreshList = useCallback(({ viewName: name, clearSelections }) => {
+            if (name === viewName) {
+                const { selectionMode } = getPConnect().getRawConfigProps();
+                if (!selectionMode) {
+                    return;
+                }
+                if (clearSelections) {
+                    if (selectionMode === 'single') {
+                        getPConnect().getListActions().setSelectedRows({});
+                    }
+                    else {
+                        getPConnect().getListActions().clearSelectedRows();
+                    }
+                }
+            }
+        }, [getPConnect, viewName]);
+        useEffect(() => {
+            const identifier = `clear-and-update-advanced-search-selections-${uniqueId}`;
+            PCore.getPubSubUtils().subscribe('update-advanced-search-selections', clearSelectionsAndRefreshList, identifier);
+            return () => {
+                PCore.getPubSubUtils().unsubscribe('update-advanced-search-selections', identifier);
+            };
+        }, [uniqueId, clearSelectionsAndRefreshList]);
+    }
     const handleRequestSort = (event, property) => {
         const isAsc = orderBy === property && order === 'asc';
         setOrder(isAsc ? 'desc' : 'asc');
@@ -191,18 +221,24 @@ export default function ListView(props) {
                 theField = theField.substring(1);
             }
             const colIndex = fields.findIndex(ele => ele.name === theField);
-            const displayAsLink = field.config.displayAsLink;
+            // const displayAsLink = field.config.displayAsLink;
+            const { additionalDetails = {} } = field.config;
+            let shouldDisplayAsSemanticLink = additionalDetails.type === 'DISPLAY_LINK';
+            // TODO: This "if" check has been added for backward compatibility, to be removed once the users are notified about the changes in view metadata of US-517164
+            if (!shouldDisplayAsSemanticLink) {
+                shouldDisplayAsSemanticLink = 'displayAsLink' in field.config && field.config.displayAsLink;
+            }
             const headerRow = {};
             headerRow.id = fields[index].id;
             headerRow.type = field.type;
-            headerRow.displayAsLink = displayAsLink;
+            headerRow.displayAsLink = shouldDisplayAsSemanticLink;
             headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false;
             headerRow.disablePadding = false;
             headerRow.label = fields[index].label;
             if (colIndex > -1) {
                 headerRow.classID = fields[colIndex].classID;
             }
-            if (displayAsLink) {
+            if (shouldDisplayAsSemanticLink) {
                 headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID);
                 if (field.config.value?.startsWith('@CA')) {
                     headerRow.isAssociation = true;
@@ -236,29 +272,43 @@ export default function ListView(props) {
     }
     // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
     function processFilterChange(data) {
-        const { filterId, filterExpression } = data;
+        let filterId;
+        let filterExpression;
+        let isDateRange;
+        let field;
         let dashboardFilterPayload = {
             query: {
                 filter: {},
                 select: []
             }
         };
-        filters.current[filterId] = filterExpression;
-        let isDateRange = data.filterExpression?.AND;
-        // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
-        const relationalOp = 'AND';
-        let field = getFieldFromFilter(filterExpression, isDateRange);
-        selectParam = [];
-        // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-        columnList.current.forEach(col => {
-            selectParam.push({
-                field: col
+        if (displayAs === 'advancedSearch') {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            Object.entries(data).reduce((acc, [item, value]) => {
+                const { filterId, filterExpression } = value;
+                filters.current[filterId] = filterExpression;
+                return acc; // Ensure the accumulator is returned
+            }, {});
+        }
+        else {
+            ({ filterId, filterExpression } = data);
+            filters.current[filterId] = filterExpression;
+            isDateRange = data.filterExpression?.AND;
+            field = getFieldFromFilter(filterExpression, isDateRange);
+            selectParam = [];
+            // Constructing the select parameters list (will be sent in dashboardFilterPayload)
+            columnList.current.forEach(col => {
+                selectParam.push({
+                    field: col
+                });
             });
-        });
-        // Checking if the triggered filter is applicable for this list
-        if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
-            return;
+            // Checking if the triggered filter is applicable for this list
+            if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
+                return;
+            }
         }
+        // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
+        const relationalOp = 'AND';
         // This is a flag which will be used to reset dashboardFilterPayload in case we don't find any valid filters
         let validFilter = false;
         let index = 1;
@@ -300,7 +350,7 @@ export default function ListView(props) {
             else {
                 dashboardFilterPayload.query.filter.filterConditions = {
                     ...dashboardFilterPayload.query.filter.filterConditions,
-                    [`T${index++}`]: { ...filter.condition, ignoreCase: true }
+                    [`T${index++}`]: { ...filter.condition, ...(filter.condition.comparator === 'CONTAINS' ? { ignoreCase: true } : {}) }
                 };
                 if (dashboardFilterPayload.query.filter.logic) {
                     dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} T${index - 1}`;
@@ -324,6 +374,9 @@ export default function ListView(props) {
         fetchDataFromServer();
     }
     function fetchAllData(fields) {
+        if (displayAs === 'advancedSearch' && !showRecords) {
+            return Promise.resolve({ data: null });
+        }
         let query = null;
         if (payload) {
             query = payload.query;
@@ -454,8 +507,35 @@ export default function ListView(props) {
             bCallSetRowsColumns = false;
         };
     }
+    function prepareFilters(data) {
+        return Object.entries(data.payload).reduce((acc, [field, value]) => {
+            if (value) {
+                let comparator = 'EQ';
+                const filterRecord = listContext.meta.fieldDefs.filter(item => item.id === field);
+                if (filterRecord?.[0]?.meta.type === 'TextInput') {
+                    comparator = 'CONTAINS';
+                }
+                acc[field] = {
+                    filterExpression: {
+                        condition: {
+                            lhs: {
+                                field
+                            },
+                            comparator,
+                            rhs: {
+                                value
+                            }
+                        }
+                    },
+                    filterId: field
+                };
+            }
+            return acc;
+        }, {});
+    }
     useEffect(() => {
         if (listContext.meta) {
+            const identifier = `promoted-filters-queryable-${uniqueId}`;
             fetchDataFromServer();
             setTimeout(() => {
                 PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, data => {
@@ -465,10 +545,16 @@ export default function ListView(props) {
                     filters.current = {};
                     processFilterClear();
                 }, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
+                PCore.getPubSubUtils().subscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, data => {
+                    showRecords = data.showRecords;
+                    const filterData = prepareFilters(data);
+                    processFilterChange(filterData);
+                }, identifier);
             }, 0);
             return function cleanupSubscriptions() {
                 PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, `dashboard-component-${'id'}`, getPConnect().getContextName());
                 PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL, `dashboard-component-${'id'}`, getPConnect().getContextName());
+                PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, identifier);
             };
         }
     }, [listContext]);
@@ -510,7 +596,6 @@ export default function ListView(props) {
         const options = { containerName: sTarget, channelName: '' };
         thePConn
             .getActionsApi()
-            // @ts-ignore
             .openAssignment(pzInsKey, pxRefObjectClass, options)
             .then(() => {
             // console.log("openAssignment successful");
@@ -711,7 +796,6 @@ export default function ListView(props) {
                 pzInsKey = row[`${associationCategory}:pzInsKey`];
             }
             if (column.isAssignmentLink) {
-                // @ts-ignore
                 thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
                     containerName: 'primary',
                     channelName: ''
@@ -810,16 +894,17 @@ export default function ListView(props) {
                                                 return (_jsxs(TableCell, { className: classes.cell, sortDirection: orderBy === column.id ? order : false, children: [_jsxs(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id), children: [column.label, _showFilteredIcon(column.id) && _jsx(FilterListIcon, { className: classes.filteredIcon }), orderBy === column.id ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }), _jsx(MoreIcon, { className: classes.moreIcon, onClick: event => {
                                                                 _menuClick(event, column.id, column.type, column.label);
                                                             } })] }, column.id));
-                                            }) }) }), _jsx(TableBody, { children: stableSort(arRows, getComparator(order, orderBy))
-                                            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                                            .map(row => {
-                                            return (_jsx(TableRow, { children: arColumns.map(column => {
-                                                    const value = row[column.id];
-                                                    return (_jsx(TableCell, { align: column.align, className: classes.cell, children: _showButton(column.id, row) || column.displayAsLink ? (_jsx(Link, { component: 'button', onClick: () => {
-                                                                _listViewClick(row, column);
-                                                            }, children: column.format && typeof value === 'number' ? column.format(value) : value })) : (_jsx(_Fragment, { children: column.format && typeof value === 'number' ? column.format(value) : value || '---' })) }, column.id));
-                                                }) }, row.pxRefObjectInsName || row.pyID));
-                                        }) })] }) })) : (_jsxs(TableContainer, { id: 'list-view', children: [_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && _jsx(TableCell, {}), arColumns.map(column => {
+                                            }) }) }), _jsx(TableBody, { children: arRows &&
+                                            stableSort(arRows, getComparator(order, orderBy))
+                                                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                                .map(row => {
+                                                return (_jsx(TableRow, { children: arColumns.map(column => {
+                                                        const value = row[column.id];
+                                                        return (_jsx(TableCell, { align: column.align, className: classes.cell, children: _showButton(column.id, row) || column.displayAsLink ? (_jsx(Link, { component: 'button', onClick: () => {
+                                                                    _listViewClick(row, column);
+                                                                }, underline: 'hover', children: column.format && typeof value === 'number' ? column.format(value) : value })) : (_jsx(_Fragment, { children: column.format && typeof value === 'number' ? column.format(value) : value || '---' })) }, column.id));
+                                                    }) }, row.pxRefObjectInsName || row.pyID));
+                                            }) })] }) })) : (_jsxs(TableContainer, { id: 'list-view', children: [_jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && _jsx(TableCell, {}), arColumns.map(column => {
                                                         return (_jsx(TableCell, { className: classes.cell, sortDirection: orderBy === column.id ? order : false, children: _jsxs(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id), children: [column.label, orderBy === column.id ? (_jsx("span", { className: classes.visuallyHidden, children: order === 'desc' ? 'sorted descending' : 'sorted ascending' })) : null] }) }, column.id));
                                                     })] }) }), _jsx(TableBody, { children: arRows &&
                                                 arRows.length > 0 &&
@@ -830,6 +915,6 @@ export default function ListView(props) {
                                                                 const value = row[column.id];
                                                                 return (_jsx(TableCell, { className: classes.cell, align: column.align, children: processColumnValue(column, value) }, column.id));
                                                             })] }, row[rowID]));
-                                                }) })] }), arRows && arRows.length === 0 && _jsx("div", { className: 'no-records', children: "No records found." })] })) }), arRows && arRows.length > 0 && (_jsx(TablePagination, { id: 'pagination', rowsPerPageOptions: [10, 25, 100], component: 'div', count: arRows.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage }))] })), _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: '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, { 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" })] })] }), _jsx(Snackbar, { open: showSnackbar, autoHideDuration: 3000, onClose: handleSnackbarClose, message: snackbarMessage, action: _jsx(IconButton, { size: 'small', "aria-label": 'close', color: 'inherit', onClick: handleSnackbarClose, children: _jsx(CloseIcon, { fontSize: 'small' }) }) })] }));
+                                                }) })] }), (!arRows || arRows.length === 0) && (_jsx("div", { className: 'no-records', children: getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }))] })) }), arRows && arRows.length > 0 && (_jsx(TablePagination, { id: 'pagination', rowsPerPageOptions: [10, 25, 100], component: 'div', count: arRows.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage }))] })), _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, { variant: 'standard', value: displayDialogDateFilter, onChange: _dialogDateFilter, fullWidth: true, children: [_jsx(MenuItem, { value: 'notequal', children: "is not 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, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'date', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'DateTime' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'datetime-local', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue })), filterType === 'Time' && (_jsx(TextField, { variant: 'standard', autoFocus: true, margin: 'dense', id: 'containsFilter', type: 'time', fullWidth: true, value: displayDialogDateValue, onChange: _dialogDateValue }))] })) : (_jsxs(_Fragment, { children: [_jsxs(Select, { variant: 'standard', 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, { variant: 'standard', 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" })] })] }), _jsx(Snackbar, { open: showSnackbar, autoHideDuration: 3000, onClose: handleSnackbarClose, message: snackbarMessage, action: _jsx(IconButton, { size: 'small', "aria-label": 'close', color: 'inherit', onClick: handleSnackbarClose, children: _jsx(CloseIcon, { fontSize: 'small' }) }) })] }));
 }
 //# sourceMappingURL=ListView.js.map