@pega/react-sdk-components 0.23.26 → 0.23.27

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

@@ -1,12 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable no-plusplus */
-/* eslint-disable guard-for-in */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable @typescript-eslint/no-shadow */
-/* eslint-disable no-shadow */
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
+import { useState, useEffect, useRef } from 'react';
 import { createStyles, makeStyles } from '@material-ui/core/styles';
-import { Utils } from '../../helpers/utils';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -39,6 +36,9 @@ import { Radio } from '@material-ui/core';
 import Checkbox from '@material-ui/core/Checkbox';
 import { filterData } from '../../helpers/simpleTableHelpers';
 import './ListView.css';
+import { getDateFormatInfo } from '../../helpers/date-format-utils';
+import { getCurrencyOptions } from '../../field/Currency/currency-utils';
+import { format } from '../../helpers/formatters';
 import useInit from './hooks';
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 let myRows;
@@ -49,8 +49,10 @@ let menuColumnLabel = '';
 let sortColumnId;
 const filterByColumns = [];
 export default function ListView(props) {
-    const { getPConnect, bInForm } = props;
-    const { globalSearch, referenceList, rowClickAction, selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, presets } = props;
+    const { getPConnect, bInForm = true } = props;
+    const { globalSearch, referenceList, 
+    /* rowClickAction, */
+    selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, readonlyContextList: selectedValues, value } = props;
     const ref = useRef({}).current;
     const cosmosTableRef = useRef();
     // List component context
@@ -58,8 +60,16 @@ export default function ListView(props) {
     const { meta } = listContext;
     const xRayApis = PCore.getDebugger().getXRayRuntime();
     const xRayUid = xRayApis.startXRay();
-    useInit({ ...props, setListContext, ref, showDynamicFields, xRayUid, cosmosTableRef });
+    useInit({
+        ...props,
+        setListContext,
+        ref,
+        showDynamicFields,
+        xRayUid,
+        cosmosTableRef
+    });
     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 */
@@ -75,16 +85,16 @@ export default function ListView(props) {
     const [open, setOpen] = useState(false);
     const [showSnackbar, setShowSnackbar] = useState(false);
     const [snackbarMessage, setSnackbarMessage] = useState('');
-    const [selectedValue, setSelectedValue] = useState('');
+    const [selectedValue, setSelectedValue] = useState(value);
     // This basically will hold the list of all current filters
     const filters = useRef({});
     // Will contain the list of columns specific for an instance
-    let columnList = useRef([]);
-    let dashboardFilterPayload;
+    const columnList = useRef([]);
+    const filterPayload = useRef();
     // Will be sent in the dashboardFilterPayload
     let selectParam = [];
     // dataview parameters coming from the ListPage
-    // This constant will also be used for parameters coming from from other components/utility fnctions in future
+    // This constant will also be used for parameters coming from from other components/utility functions in future
     const dataViewParameters = parameters;
     const useStyles = makeStyles((theme) => createStyles({
         root: {
@@ -150,14 +160,9 @@ export default function ListView(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) => {
@@ -178,8 +183,8 @@ export default function ListView(props) {
         setPage(0);
     };
     const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
-    function getHeaderCells(colFields, fields, presetFields) {
-        const arReturn = colFields.map((field, index) => {
+    function getHeaderCells(colFields, fields) {
+        return colFields.map((field, index) => {
             let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
             if (theField.indexOf('.') === 0) {
                 theField = theField.substring(1);
@@ -187,17 +192,12 @@ export default function ListView(props) {
             const colIndex = fields.findIndex(ele => ele.name === theField);
             const displayAsLink = field.config.displayAsLink;
             const headerRow = {};
-            headerRow.id = theField;
+            headerRow.id = fields[index].id;
             headerRow.type = field.type;
             headerRow.displayAsLink = displayAsLink;
-            headerRow.numeric =
-                field.type === 'Decimal' ||
-                    field.type === 'Integer' ||
-                    field.type === 'Percentage' ||
-                    field.type === 'Currency' ||
-                    false;
+            headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false;
             headerRow.disablePadding = false;
-            headerRow.label = presetFields[index].config.label;
+            headerRow.label = fields[index].label;
             if (colIndex > -1) {
                 headerRow.classID = fields[colIndex].classID;
             }
@@ -209,14 +209,6 @@ export default function ListView(props) {
             }
             return headerRow;
         });
-        return arReturn;
-    }
-    function updateFields(arFields, theColumns) {
-        const arReturn = arFields.filter(ele => ele.type !== 'reference');
-        arReturn.forEach((field, index) => {
-            arReturn[index].config.name = theColumns[index].id;
-        });
-        return arReturn;
     }
     function getUsingData(arTableData) {
         if (selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) {
@@ -226,48 +218,9 @@ export default function ListView(props) {
                 console.error('pyGUID or pyID values are mandatory to select the required row from the list');
             }
         }
-        const arReturn = arTableData?.map((data) => {
-            const row = data;
-            return row;
-        });
-        return arReturn;
-    }
-    function updateData(listData, fieldData) {
-        const returnList = new Array();
-        listData?.forEach(row => {
-            // copy
-            const rowData = JSON.parse(JSON.stringify(row));
-            fieldData.forEach(field => {
-                const config = field.config;
-                let fieldName;
-                let formattedDate;
-                let myFormat;
-                switch (field.type) {
-                    case 'Date':
-                        fieldName = config.name;
-                        myFormat = config.formatter;
-                        if (!myFormat) {
-                            myFormat = 'Date';
-                        }
-                        formattedDate = Utils.generateDate(rowData[fieldName], myFormat);
-                        rowData[fieldName] = formattedDate;
-                        break;
-                    case 'DateTime':
-                        fieldName = config.name;
-                        myFormat = config.formatter;
-                        if (!myFormat) {
-                            myFormat = 'DateTime-Long';
-                        }
-                        formattedDate = Utils.generateDateTime(rowData[fieldName], myFormat);
-                        rowData[fieldName] = formattedDate;
-                        break;
-                    default:
-                        break;
-                }
-            });
-            returnList.push(rowData);
+        return arTableData?.map((data) => {
+            return data;
         });
-        return returnList;
     }
     function getMyColumnList(arCols) {
         const myColList = [];
@@ -290,34 +243,33 @@ export default function ListView(props) {
     // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
     function processFilterChange(data) {
         const { filterId, filterExpression } = data;
-        dashboardFilterPayload = {
+        let dashboardFilterPayload = {
             query: {
                 filter: {},
                 select: []
             }
         };
         filters.current[filterId] = filterExpression;
-        // eslint-disable-next-line no-unneeded-ternary
-        let isDateRange = data.filterExpression?.AND ? true : false;
+        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.forEach(col => {
+        columnList.current.forEach(col => {
             selectParam.push({
                 field: col
             });
         });
         // Checking if the triggered filter is applicable for this list
-        if (data.filterExpression !== null && !(columnList.length && columnList.includes(field))) {
+        if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
             return;
         }
         // 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;
         // Iterating over the current filters list to create filter data which will be POSTed
-        for (const filterExp in filters.current) {
+        for (const filterExp of Object.keys(filters.current)) {
             const filter = filters.current[filterExp];
             // If the filter is null then we can skip this iteration
             if (filter === null) {
@@ -325,10 +277,9 @@ export default function ListView(props) {
                 continue;
             }
             // Checking if the filter is of type- Date Range
-            // eslint-disable-next-line no-unneeded-ternary
-            isDateRange = filter?.AND ? true : false;
+            isDateRange = filter?.AND;
             field = getFieldFromFilter(filter, isDateRange);
-            if (!(columnList.length && columnList.includes(field))) {
+            if (!(columnList.current.length && columnList.current.includes(field))) {
                 // eslint-disable-next-line no-continue
                 continue;
             }
@@ -336,7 +287,7 @@ export default function ListView(props) {
             validFilter = true;
             /** Below are the 2 cases for- Text & Date-Range filter types where we'll construct filter data which will be sent in the dashboardFilterPayload
              * In Constellation DX Components, through Repeating Structures they might be using several APIs to do it. We're doing it here
-            */
+             */
             if (isDateRange) {
                 const dateRelationalOp = filter?.AND ? 'AND' : 'OR';
                 dashboardFilterPayload.query.filter.filterConditions = {
@@ -370,37 +321,40 @@ export default function ListView(props) {
         if (!validFilter) {
             dashboardFilterPayload = undefined;
         }
+        filterPayload.current = dashboardFilterPayload;
         fetchDataFromServer();
     }
     // Will be triggered when EVENT_DASHBOARD_FILTER_CLEAR_ALL fires
     function processFilterClear() {
-        dashboardFilterPayload = undefined;
+        filterPayload.current = undefined;
         fetchDataFromServer();
     }
-    useEffect(() => {
-        setTimeout(() => {
-            PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, data => {
-                processFilterChange(data);
-            }, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
-            PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL, () => {
-                filters.current = {};
-                processFilterClear();
-            }, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
-        }, 0);
-    }, []);
     function fetchAllData(fields) {
         let query = null;
         if (payload) {
             query = payload.query;
         }
         else if (fields?.length && meta.isQueryable) {
-            query = { select: fields };
+            if (filterPayload.current) {
+                query = {
+                    select: fields,
+                    filter: filterPayload.current?.query?.filter
+                };
+            }
+            else {
+                query = { select: fields };
+            }
         }
-        else if (dashboardFilterPayload) {
-            query = dashboardFilterPayload.query;
+        else if (filterPayload.current) {
+            query = filterPayload.current?.query;
         }
         const context = getPConnect().getContextName();
-        return PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, query);
+        // getDataAsync isn't returning correct data for the Page(i.e. ListView within a page) case
+        return !bInForm
+            ? // @ts-ignore - 3rd parameter "context" should be optional in getData method
+                PCore.getDataApiUtils().getData(referenceList, payload)
+            : // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'object'
+                PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, query);
     }
     const buildSelect = (fieldDefs, colId, patchQueryFields = [], compositeKeys = []) => {
         const listFields = [];
@@ -439,10 +393,17 @@ export default function ListView(props) {
     };
     const addItemKeyInSelect = (fieldDefs, itemKey, select, compositeKeys) => {
         const elementFound = getField(fieldDefs, itemKey);
-        if (itemKey && !elementFound && Array.isArray(select) && !(compositeKeys !== null && compositeKeys?.length) && !select.find(sel => sel.field === itemKey)) {
-            return [...select, {
+        if (itemKey &&
+            !elementFound &&
+            Array.isArray(select) &&
+            !(compositeKeys !== null && compositeKeys?.length) &&
+            !select.find(sel => sel.field === itemKey)) {
+            return [
+                ...select,
+                {
                     field: itemKey
-                }];
+                }
+            ];
         }
         return select;
     };
@@ -463,12 +424,10 @@ export default function ListView(props) {
         let listFields = fieldDefs ? buildSelect(fieldDefs, undefined, patchQueryFields, compositeKeys) : [];
         listFields = addItemKeyInSelect(fieldDefs, itemKey, listFields, compositeKeys);
         const workListJSON = await fetchAllData(listFields);
-        // don't update these fields until we return from promise
-        let fields = presets[0].children[0].children;
         // this is an unresovled version of this.fields$, need unresolved, so can get the property reference
         const columnFields = componentConfig.presets[0].children[0].children;
-        const tableDataResults = workListJSON['data'];
-        const myColumns = getHeaderCells(columnFields, fieldDefs, fields);
+        const tableDataResults = !bInForm ? workListJSON.data.data : workListJSON.data;
+        const myColumns = getHeaderCells(columnFields, fieldDefs);
         const selectParams = [];
         myColumns.forEach(column => {
             selectParams.push({
@@ -479,12 +438,11 @@ export default function ListView(props) {
         selectParams.forEach(col => {
             colList.push(col.field);
         });
-        columnList = colList;
-        fields = updateFields(fields, myColumns);
+        columnList.current = colList;
         setResponse(tableDataResults);
         const usingDataResults = getUsingData(tableDataResults);
         // store globally, so can be searched, filtered, etc.
-        myRows = updateData(usingDataResults, fields);
+        myRows = usingDataResults;
         myDisplayColumnList = getMyColumnList(myColumns);
         // At this point, if we have data ready to render and haven't been asked
         //  to NOT call setRows and setColumns, call them
@@ -505,12 +463,25 @@ export default function ListView(props) {
     useEffect(() => {
         if (listContext.meta) {
             fetchDataFromServer();
+            setTimeout(() => {
+                PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, data => {
+                    processFilterChange(data);
+                }, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
+                PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL, () => {
+                    filters.current = {};
+                    processFilterClear();
+                }, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
+            }, 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());
+            };
         }
     }, [listContext]);
     function searchFilter(value, rows) {
         function filterArray(el) {
             const bReturn = false;
-            for (const key in el) {
+            for (const key of Object.keys(el)) {
                 // only search columsn that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
                 if (myDisplayColumnList.includes(key)) {
                     let myVal = el[key];
@@ -544,7 +515,7 @@ export default function ListView(props) {
     function openAssignment(row) {
         const { pxRefObjectClass, pzInsKey } = row;
         const sTarget = thePConn.getContainerName();
-        const options = { containerName: sTarget };
+        const options = { containerName: sTarget, channelName: '' };
         thePConn
             .getActionsApi()
             .openAssignment(pzInsKey, pxRefObjectClass, options)
@@ -555,16 +526,16 @@ export default function ListView(props) {
             showToast(`openAssignment failed!`);
         });
     }
-    function _rowClick(row) {
-        // eslint-disable-next-line sonarjs/no-small-switch
-        switch (rowClickAction) {
-            case 'openAssignment':
-                openAssignment(row);
-                break;
-            default:
-                break;
-        }
-    }
+    // function _rowClick(row: any) {
+    //   // eslint-disable-next-line sonarjs/no-small-switch
+    //   switch (rowClickAction) {
+    //     case 'openAssignment':
+    //       openAssignment(row);
+    //       break;
+    //     default:
+    //       break;
+    //   }
+    // }
     function openWork(row) {
         const { pxRefObjectKey } = row;
         const pxRefObjectClass = row.pxRefObjectClass || row.pxObjClass;
@@ -590,7 +561,7 @@ export default function ListView(props) {
     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('');
@@ -602,9 +573,7 @@ export default function ListView(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);
@@ -648,9 +617,9 @@ export default function ListView(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;
@@ -661,15 +630,15 @@ export default function ListView(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;
@@ -679,14 +648,14 @@ export default function ListView(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);
         }
@@ -750,7 +719,8 @@ export default function ListView(props) {
             }
             if (column.isAssignmentLink) {
                 thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
-                    containerName: 'primary'
+                    containerName: 'primary',
+                    channelName: ''
                 });
             }
             else {
@@ -772,7 +742,7 @@ export default function ListView(props) {
     }
     function _listTitle() {
         const defaultTitle = 'List';
-        let title = resolvedConfigProps.title ? resolvedConfigProps.title : defaultTitle;
+        let title = resolvedConfigProps.title || resolvedConfigProps?.label || defaultTitle;
         const inheritedProps = resolvedConfigProps?.inheritedProps;
         // Let any title in resolvedConfigProps that isn't the default take precedence
         //  but only look in inheritedProps if they exist
@@ -799,9 +769,7 @@ export default function ListView(props) {
         else {
             reqObj[rowID] = value;
         }
-        getPConnect()
-            ?.getListActions?.()
-            ?.setSelectedRows([reqObj]);
+        getPConnect()?.getListActions?.()?.setSelectedRows([reqObj]);
         setSelectedValue(value);
     };
     const onCheckboxClick = event => {
@@ -814,119 +782,60 @@ export default function ListView(props) {
             compositeKeys.forEach(element => {
                 reqObj[element] = selectedRow[element];
             });
-            reqObj['$selected'] = checked;
+            reqObj.$selected = checked;
         }
         else {
             reqObj[rowID] = value;
-            reqObj['$selected'] = checked;
+            reqObj.$selected = checked;
+        }
+        getPConnect()?.getListActions()?.setSelectedRows([reqObj]);
+    };
+    const processColumnValue = (column, value) => {
+        let val;
+        const type = column.type;
+        let theDateFormatInfo;
+        let theFormat;
+        let theCurrencyOptions;
+        switch (type) {
+            case 'Date':
+            case 'DateTime':
+                theDateFormatInfo = getDateFormatInfo();
+                theFormat = type === 'DateTime' ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong;
+                val = format(value, column.type, { format: theFormat });
+                break;
+            case 'Currency':
+                theCurrencyOptions = getCurrencyOptions(PCore?.getEnvironmentInfo()?.getLocale());
+                val = format(value, column.type, theCurrencyOptions);
+                break;
+            default:
+                val = column.format && typeof value === 'number' ? column.format(value) : value;
         }
-        getPConnect()
-            ?.getListActions()
-            ?.setSelectedRows([reqObj]);
+        return val;
     };
-    return (React.createElement(React.Fragment, null,
-        arColumns && arColumns.length > 0 && (React.createElement(Paper, { className: classes.paper },
-            React.createElement(Typography, { className: classes.title, variant: 'h6', color: 'textPrimary', gutterBottom: true }, _listTitle()),
-            globalSearch && (React.createElement(Grid, { container: true, spacing: 1, alignItems: 'flex-end', className: classes.search },
-                React.createElement(Grid, { item: true },
-                    React.createElement(SearchIcon, null)),
-                React.createElement(Grid, { item: true },
-                    React.createElement(TextField, { label: 'Search', fullWidth: true, variant: 'outlined', placeholder: '', size: 'small', id: "search", onChange: _onSearch })))),
-            React.createElement(React.Fragment, null, bInForm ? (React.createElement(TableContainer, { className: classes.tableInForm },
-                React.createElement(Table, { stickyHeader: true, "aria-label": 'sticky table' },
-                    React.createElement(TableHead, null,
-                        React.createElement(TableRow, null, arColumns.map(column => {
-                            return (React.createElement(TableCell, { className: classes.cell, key: column.id, sortDirection: orderBy === column.id ? order : false },
-                                React.createElement(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id) },
-                                    column.label,
-                                    _showFilteredIcon(column.id) && (React.createElement(FilterListIcon, { className: classes.filteredIcon })),
-                                    orderBy === column.id ? (React.createElement("span", { className: classes.visuallyHidden }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null),
-                                React.createElement(MoreIcon, { className: classes.moreIcon, onClick: event => {
-                                        _menuClick(event, column.id, column.type, column.label);
-                                    } })));
-                        }))),
-                    React.createElement(TableBody, null, stableSort(arRows, getComparator(order, orderBy))
-                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                        .map(row => {
-                        return (React.createElement(TableRow, { key: row.pxRefObjectInsName || row.pyID, onClick: () => {
-                                _rowClick(row);
-                            } }, arColumns.map(column => {
-                            const value = row[column.id];
-                            return (React.createElement(TableCell, { key: column.id, align: column.align, className: classes.cell }, _showButton(column.id, row) || column.displayAsLink ? (React.createElement(Link, { component: 'button', onClick: () => {
-                                    _listViewClick(row, column);
-                                } }, column.format && typeof value === 'number'
-                                ? column.format(value)
-                                : value)) : (React.createElement(React.Fragment, null, column.format && typeof value === 'number'
-                                ? column.format(value)
-                                : value))));
-                        })));
-                    }))))) : (React.createElement(TableContainer, null,
-                React.createElement(Table, null,
-                    React.createElement(TableHead, null,
-                        React.createElement(TableRow, null,
-                            (selectionMode === SELECTION_MODE.SINGLE ||
-                                selectionMode === SELECTION_MODE.MULTI) && React.createElement(TableCell, null),
-                            arColumns.map(column => {
-                                return (React.createElement(TableCell, { className: classes.cell, key: column.id, sortDirection: orderBy === column.id ? order : false },
-                                    React.createElement(TableSortLabel, { active: orderBy === column.id, direction: orderBy === column.id ? order : 'asc', onClick: createSortHandler(column.id) },
-                                        column.label,
-                                        orderBy === column.id ? (React.createElement("span", { className: classes.visuallyHidden }, order === 'desc' ? 'sorted descending' : 'sorted ascending')) : null)));
-                            }))),
-                    React.createElement(TableBody, null, arRows &&
-                        arRows.length > 0 &&
-                        stableSort(arRows, getComparator(order, orderBy))
-                            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                            .map(row => {
-                            return (React.createElement(TableRow, { key: row[rowID], onClick: () => {
-                                    _rowClick(row);
-                                } },
-                                selectionMode === SELECTION_MODE.SINGLE && (React.createElement(TableCell, null,
-                                    React.createElement(Radio, { onChange: handleChange, value: row[rowID], name: 'radio-buttons', inputProps: { 'aria-label': 'A' }, checked: selectedValue === row[rowID] }))),
-                                selectionMode === SELECTION_MODE.MULTI && (React.createElement(TableCell, null,
-                                    React.createElement(Checkbox, { onChange: onCheckboxClick, value: row[rowID] }))),
-                                arColumns.map(column => {
-                                    const value = row[column.id];
-                                    return (React.createElement(TableCell, { className: classes.cell, key: column.id, align: column.align }, column.format && typeof value === 'number'
-                                        ? column.format(value)
-                                        : value));
-                                })));
-                        }))),
-                arRows && arRows.length === 0 && (React.createElement("div", { className: 'no-records' }, "No records found."))))),
-            arRows && arRows.length > 0 && (React.createElement(TablePagination, { rowsPerPageOptions: [10, 25, 100], component: 'div', count: arRows.length, rowsPerPage: rowsPerPage, page: page, onPageChange: handleChangePage, onRowsPerPageChange: handleChangeRowsPerPage })))),
-        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: '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, { 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"))),
-        React.createElement(Snackbar, { open: showSnackbar, autoHideDuration: 3000, onClose: handleSnackbarClose, message: snackbarMessage, action: React.createElement(IconButton, { size: 'small', "aria-label": 'close', color: 'inherit', onClick: handleSnackbarClose },
-                React.createElement(CloseIcon, { fontSize: 'small' })) })));
+    return (_jsxs(_Fragment, { children: [arColumns && arColumns.length > 0 && (_jsxs(Paper, { className: classes.paper, children: [_jsx(Typography, { className: classes.title, variant: 'h6', color: 'textPrimary', gutterBottom: true, children: _listTitle() }), globalSearch && (_jsxs(Grid, { container: true, spacing: 1, alignItems: 'flex-end', className: classes.search, children: [_jsx(Grid, { item: true, children: _jsx(SearchIcon, {}) }), _jsx(Grid, { item: true, children: _jsx(TextField, { label: PCore.getLocaleUtils().getLocaleValue('Search', 'Search'), fullWidth: true, variant: 'outlined', placeholder: '', size: 'small', id: 'search', onChange: _onSearch }) })] })), _jsx(_Fragment, { children: !bInForm ? (_jsx(TableContainer, { id: 'list-view', className: classes.tableInForm, children: _jsxs(Table, { stickyHeader: true, "aria-label": 'sticky table', children: [_jsx(TableHead, { children: _jsx(TableRow, { children: arColumns.map(column => {
+                                                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 => {
+                                                        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 &&
+                                                stableSort(arRows, getComparator(order, orderBy))
+                                                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                                    .map(row => {
+                                                    return (_jsxs(TableRow, { children: [selectionMode === SELECTION_MODE.SINGLE && (_jsx(TableCell, { children: _jsx(Radio, { onChange: handleChange, value: row[rowID], name: 'radio-buttons', inputProps: { 'aria-label': 'A' }, checked: selectedValue === row[rowID] }) })), selectionMode === SELECTION_MODE.MULTI && (_jsx(TableCell, { children: _jsx(Checkbox, { onChange: onCheckboxClick, checked: selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID]), value: row[rowID] }) })), arColumns.map(column => {
+                                                                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' }) }) })] }));
 }
-ListView.defaultProps = {};
-ListView.propTypes = {
-    getPConnect: PropTypes.func.isRequired
-};
 //# sourceMappingURL=ListView.js.map