@pega/react-sdk-components 23.1.10 → 23.1.12

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

@@ -1,9 +1,8 @@
+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 { 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';
@@ -37,26 +36,10 @@ import { Radio } from '@material-ui/core';
 import Checkbox from '@material-ui/core/Checkbox';
 import { filterData } from '../../helpers/simpleTableHelpers';
 import './ListView.css';
-import useInit from './hooks';
 import { getDateFormatInfo } from '../../helpers/date-format-utils';
 import { getCurrencyOptions } from '../../field/Currency/currency-utils';
-import { format } from '../../helpers/formatters/';
-// import type { PConnProps } from '../../../types/PConnProps';
-// ListViewProps can't be used until getComponentConfig is NOT private
-// interface ListViewProps extends PConnProps {
-//   // If any, enter additional props that only exist on this component
-//   bInForm?: boolean,
-//   globalSearch?: boolean,
-//   referenceList?: Array<any>,
-//   rowClickAction?: any,
-//   selectionMode?: string,
-//   referenceType?: string,
-//   payload?: any,
-//   parameters?: any,
-//   compositeKeys?: any,
-//   showDynamicFields?: boolean,
-//   presets?: any
-// }
+import { format } from '../../helpers/formatters';
+import useInit from './hooks';
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 let myRows;
 let myDisplayColumnList;
@@ -65,11 +48,11 @@ let menuColumnType = '';
 let menuColumnLabel = '';
 let sortColumnId;
 const filterByColumns = [];
-export default function ListView(props /* : ListViewProps */) {
+export default function ListView(props) {
     const { getPConnect, bInForm = true } = props;
     const { globalSearch, referenceList, 
     /* rowClickAction, */
-    selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields } = props;
+    selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, readonlyContextList: selectedValues, value } = props;
     const ref = useRef({}).current;
     const cosmosTableRef = useRef();
     // List component context
@@ -77,8 +60,16 @@ export default function ListView(props /* : ListViewProps */) {
     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 */
@@ -94,7 +85,7 @@ export default function ListView(props /* : ListViewProps */) {
     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
@@ -103,7 +94,7 @@ export default function ListView(props /* : ListViewProps */) {
     // 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: {
@@ -112,7 +103,8 @@ export default function ListView(props /* : ListViewProps */) {
         paper: {
             width: '100%',
             marginTop: theme.spacing(2),
-            marginBottom: theme.spacing(2)
+            marginBottom: theme.spacing(2),
+            display: 'grid'
         },
         search: {
             padding: '5px 5px'
@@ -161,20 +153,17 @@ export default function ListView(props /* : ListViewProps */) {
         handleRequestSort(event, property);
     };
     function descendingComparator(a, b, orderedBy) {
-        if (b[orderedBy] < a[orderedBy]) {
+        if (!b[orderedBy] || b[orderedBy] < a[orderedBy]) {
             return -1;
         }
-        if (b[orderedBy] > a[orderedBy]) {
+        if (!a[orderedBy] || b[orderedBy] > a[orderedBy]) {
             return 1;
         }
         return 0;
     }
-    function getComparator(theOrder, orderedBy
-    // eslint-disable-next-line no-unused-vars
-    ) {
+    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) => {
@@ -183,7 +172,7 @@ export default function ListView(props /* : ListViewProps */) {
                 return order;
             return a[1] - b[1];
         });
-        return stabilizedThis.map((el) => el[0]);
+        return stabilizedThis.map(el => el[0]);
     }
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(10);
@@ -196,12 +185,12 @@ export default function ListView(props /* : ListViewProps */) {
     };
     const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
     function getHeaderCells(colFields, fields) {
-        const arReturn = colFields.map((field, index) => {
+        return colFields.map((field, index) => {
             let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
             if (theField.indexOf('.') === 0) {
                 theField = theField.substring(1);
             }
-            const colIndex = fields.findIndex((ele) => ele.name === theField);
+            const colIndex = fields.findIndex(ele => ele.name === theField);
             const displayAsLink = field.config.displayAsLink;
             const headerRow = {};
             headerRow.id = fields[index].id;
@@ -221,7 +210,6 @@ export default function ListView(props /* : ListViewProps */) {
             }
             return headerRow;
         });
-        return arReturn;
     }
     function getUsingData(arTableData) {
         if (selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) {
@@ -231,15 +219,13 @@ export default function ListView(props /* : ListViewProps */) {
                 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 arTableData?.map((data) => {
+            return data;
         });
-        return arReturn;
     }
     function getMyColumnList(arCols) {
         const myColList = [];
-        arCols.forEach((col) => {
+        arCols.forEach(col => {
             myColList.push(col.id);
         });
         return myColList;
@@ -265,14 +251,13 @@ export default function ListView(props /* : ListViewProps */) {
             }
         };
         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.current.forEach((col) => {
+        columnList.current.forEach(col => {
             selectParam.push({
                 field: col
             });
@@ -285,7 +270,7 @@ export default function ListView(props /* : ListViewProps */) {
         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) {
@@ -293,8 +278,7 @@ export default function ListView(props /* : ListViewProps */) {
                 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.current.length && columnList.current.includes(field))) {
                 // eslint-disable-next-line no-continue
@@ -353,7 +337,10 @@ export default function ListView(props /* : ListViewProps */) {
         }
         else if (fields?.length && meta.isQueryable) {
             if (filterPayload.current) {
-                query = { select: fields, filter: filterPayload.current?.query?.filter };
+                query = {
+                    select: fields,
+                    filter: filterPayload.current?.query?.filter
+                };
             }
             else {
                 query = { select: fields };
@@ -365,8 +352,10 @@ export default function ListView(props /* : ListViewProps */) {
         const context = getPConnect().getContextName();
         // getDataAsync isn't returning correct data for the Page(i.e. ListView within a page) case
         return !bInForm
-            ? PCore.getDataApiUtils().getData(referenceList, payload)
-            : PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, query);
+            ? // @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 = [];
@@ -379,23 +368,23 @@ export default function ListView(props /* : ListViewProps */) {
         else {
             // NOTE: If we ever decide to not set up all the `fieldDefs` on select, ensure that the fields
             //  corresponding to `state.groups` are set up. Needed in Client-mode grouping/pagination.
-            fieldDefs.forEach((field) => {
-                if (!listFields.find((f) => f.field === field.name)) {
+            fieldDefs.forEach(field => {
+                if (!listFields.find(f => f.field === field.name)) {
                     listFields.push({
                         field: field.name
                     });
                 }
             });
-            patchQueryFields.forEach((k) => {
-                if (!listFields.find((f) => f.field === k)) {
+            patchQueryFields.forEach(k => {
+                if (!listFields.find(f => f.field === k)) {
                     listFields.push({
                         field: k
                     });
                 }
             });
         }
-        compositeKeys.forEach((k) => {
-            if (!listFields.find((f) => f.field === k)) {
+        compositeKeys.forEach(k => {
+            if (!listFields.find(f => f.field === k)) {
                 listFields.push({
                     field: k
                 });
@@ -409,7 +398,7 @@ export default function ListView(props /* : ListViewProps */) {
             !elementFound &&
             Array.isArray(select) &&
             !(compositeKeys !== null && compositeKeys?.length) &&
-            !select.find((sel) => sel.field === itemKey)) {
+            !select.find(sel => sel.field === itemKey)) {
             return [
                 ...select,
                 {
@@ -423,9 +412,9 @@ export default function ListView(props /* : ListViewProps */) {
         const fieldsMap = getFieldsMap(fieldDefs);
         return fieldsMap.get(columnId);
     };
-    const getFieldsMap = (fieldDefs) => {
+    const getFieldsMap = fieldDefs => {
         const fieldsMap = new Map();
-        fieldDefs.forEach((element) => {
+        fieldDefs.forEach(element => {
             fieldsMap.set(element.id, element);
         });
         return fieldsMap;
@@ -438,16 +427,16 @@ export default function ListView(props /* : ListViewProps */) {
         const workListJSON = await fetchAllData(listFields);
         // 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 = !bInForm ? workListJSON['data'].data : workListJSON['data'];
+        const tableDataResults = !bInForm ? workListJSON.data.data : workListJSON.data;
         const myColumns = getHeaderCells(columnFields, fieldDefs);
         const selectParams = [];
-        myColumns.forEach((column) => {
+        myColumns.forEach(column => {
             selectParams.push({
                 field: column.id
             });
         });
         const colList = [];
-        selectParams.forEach((col) => {
+        selectParams.forEach(col => {
             colList.push(col.field);
         });
         columnList.current = colList;
@@ -476,7 +465,7 @@ export default function ListView(props /* : ListViewProps */) {
         if (listContext.meta) {
             fetchDataFromServer();
             setTimeout(() => {
-                PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, (data) => {
+                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, () => {
@@ -484,16 +473,16 @@ export default function ListView(props /* : ListViewProps */) {
                     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());
+            };
         }
-        return function cleanupSubscriptions() {
-            PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
-            PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL, `dashboard-component-${'id'}`, false, 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];
@@ -573,7 +562,7 @@ export default function ListView(props /* : ListViewProps */) {
     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('');
@@ -629,9 +618,9 @@ export default function ListView(props /* : ListViewProps */) {
     }
     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;
@@ -642,15 +631,15 @@ export default function ListView(props /* : ListViewProps */) {
     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;
@@ -660,14 +649,14 @@ export default function ListView(props /* : ListViewProps */) {
             // 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);
         }
@@ -755,7 +744,7 @@ export default function ListView(props /* : ListViewProps */) {
     function _listTitle() {
         const defaultTitle = 'List';
         let title = resolvedConfigProps.title || resolvedConfigProps?.label || defaultTitle;
-        const inheritedProps = resolvedConfigProps?.['inheritedProps'];
+        const inheritedProps = resolvedConfigProps?.inheritedProps;
         // Let any title in resolvedConfigProps that isn't the default take precedence
         //  but only look in inheritedProps if they exist
         if (title === defaultTitle && inheritedProps) {
@@ -772,9 +761,9 @@ export default function ListView(props /* : ListViewProps */) {
         const value = event.target.value;
         const reqObj = {};
         if (compositeKeys?.length > 1) {
-            const index = response.findIndex((element) => element[rowID] === value);
+            const index = response.findIndex(element => element[rowID] === value);
             const selectedRow = response[index];
-            compositeKeys.forEach((element) => {
+            compositeKeys.forEach(element => {
                 reqObj[element] = selectedRow[element];
             });
         }
@@ -784,21 +773,21 @@ export default function ListView(props /* : ListViewProps */) {
         getPConnect()?.getListActions?.()?.setSelectedRows([reqObj]);
         setSelectedValue(value);
     };
-    const onCheckboxClick = (event) => {
+    const onCheckboxClick = event => {
         const value = event?.target?.value;
         const checked = event?.target?.checked;
         const reqObj = {};
         if (compositeKeys?.length > 1) {
-            const index = response.findIndex((element) => element[rowID] === value);
+            const index = response.findIndex(element => element[rowID] === value);
             const selectedRow = response[index];
-            compositeKeys.forEach((element) => {
+            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]);
     };
@@ -820,98 +809,34 @@ export default function ListView(props /* : ListViewProps */) {
                 val = format(value, column.type, theCurrencyOptions);
                 break;
             default:
-                val = column.format && typeof value === 'number' ? column.format(value) : value;
+                val = column.format && typeof value === 'number' ? column.format(value) : value || '---';
         }
         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: PCore.getLocaleUtils().getLocaleValue('Search', 'Search'), fullWidth: true, variant: "outlined", placeholder: "", size: "small", id: "search", onChange: _onSearch })))),
-            React.createElement(React.Fragment, null, !bInForm ? (React.createElement(TableContainer, { id: "list-view", 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 }, 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, { id: "list-view" },
-                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] },
-                                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 }, processColumnValue(column, 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 || row.pyGUID));
+                                        }) })] }) })) : (_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.pxRefObjectInsName || row.pyGUID || row.pyID));
+                                                }) })] }), 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' }) }) })] }));
 }
 //# sourceMappingURL=ListView.js.map