@pega/react-sdk-overrides 0.23.12 → 0.23.13

package/lib/{templates → template}/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -2,8 +2,8 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldGroup';
-import FieldGroupList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldGroupList';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import FieldGroupList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroupList';
 import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 
 declare const PCore: any;

package/lib/{templates → template}/InlineDashboardPage/InlineDashboardPage.tsx

@@ -3,7 +3,7 @@ import { useMemo, Children, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
-import InlineDashboard from '@pega/react-sdk-components/lib/components/templates/InlineDashboard';
+import InlineDashboard from '@pega/react-sdk-components/lib/components/template/InlineDashboard';
 
 export default function InlineDashboardPage(props) {
   const { children, getPConnect } = props;

package/lib/{templates → template}/ListPage/ListPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import ListView from '@pega/react-sdk-components/lib/components/templates/ListView';
+import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
 
 export default function ListPage(props) {
 

package/lib/{templates → template}/ListView/ListView.tsx

@@ -35,7 +35,7 @@ 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 { filterData } from '@pega/react-sdk-components/lib/components/templates/SimpleTable/simpleTableHelpers';
+import { filterData } from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTable/simpleTableHelpers';
 import './ListView.css';
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -69,11 +69,11 @@ export default function ListView(props) {
   const defRowID = referenceType === 'Case' ? 'pyID' : 'pyGUID';
 
   /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
-  const rowID = compositeKeys && compositeKeys[0] ? compositeKeys[0] : defRowID;
+  const rowID = compositeKeys && compositeKeys?.length === 1 ? compositeKeys[0] : defRowID;
 
   const [arRows, setRows] = useState<Array<any>>([]);
   const [arColumns, setColumns] = useState<Array<any>>([]);
-
+  const [response, setResponse] = useState<Array<any>>([]);
   const [order, setOrder] = useState<Order>('asc');
   const [orderBy, setOrderBy] = useState<keyof any>('');
 
@@ -527,6 +527,8 @@ export default function ListView(props) {
 
     fields = updateFields(fields, myColumns);
 
+    setResponse(tableDataResults);
+
     const usingDataResults = getUsingData(tableDataResults, myColumns);
 
     // store globally, so can be searched, filtered, etc.
@@ -888,18 +890,40 @@ export default function ListView(props) {
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
+    const reqObj = {};
+    if (compositeKeys?.length > 1) {
+      const index = response.findIndex(element => element[rowID] === value);
+      const selectedRow = response[index];
+      compositeKeys.forEach(element => {
+        reqObj[element] = selectedRow[element]
+      });
+    } else {
+      reqObj[rowID] = value;
+    }
     getPConnect()
       ?.getListActions?.()
-      ?.setSelectedRows([{ [rowID]: value }]);
+      ?.setSelectedRows([reqObj]);
     setSelectedValue(value);
   };
 
   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 selectedRow = response[index];
+      compositeKeys.forEach(element => {
+        reqObj[element] = selectedRow[element]
+      });
+      reqObj['$selected'] = checked;
+    } else {
+      reqObj[rowID] = value;
+      reqObj['$selected'] = checked;
+    }
     getPConnect()
       ?.getListActions()
-      ?.setSelectedRows([{ [rowID]: value, $selected: checked }]);
+      ?.setSelectedRows([reqObj]);
   };
 
   return (

package/lib/{templates → template}/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 // import PropTypes from "prop-types";
 // import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
 
 export default function NarrowWideDetails(props) {
   const { a, b, children } = props;

package/lib/{templates → template}/NarrowWide/NarrowWidePage/NarrowWidePage.tsx

@@ -2,7 +2,7 @@ import React, { Children } from "react";
 import PropTypes from "prop-types";
 
 // import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import NarrowWide from '@pega/react-sdk-components/lib/components/templates/NarrowWide/NarrowWide';
+import NarrowWide from '@pega/react-sdk-components/lib/components/template/NarrowWide/NarrowWide';
 
 /*
  * The wrapper handles knowing how to take in just children and mapping

package/lib/{templates → template}/OneColumn/OneColumnPage/OneColumnPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import OneColumn from '@pega/react-sdk-components/lib/components/templates/OneColumn/OneColumn';
+import OneColumn from '@pega/react-sdk-components/lib/components/template/OneColumn/OneColumn';
 
 /*
  * The wrapper handles knowing how to take in just children

package/lib/{templates → template}/PromotedFilters/PromotedFilters.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import ListView from '@pega/react-sdk-components/lib/components/templates/ListView';
+import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import './PromotedFilters.css';
 
@@ -57,7 +57,7 @@ function isValidInput(input) {
 
 export default function PromotedFilters(props) {
   const localizedVal = PCore.getLocaleUtils().getLocaleValue;
-  const { getPConnect, viewName, filters, listViewProps, pageClass } = props;
+  const { getPConnect, viewName, filters, listViewProps, pageClass, parameters } = props;
   const [initTable, setInitTable] = useState(false);
   const [payload, setPayload] = useState({});
   const filtersProperties = {};
@@ -109,7 +109,7 @@ export default function PromotedFilters(props) {
       if (PCore.getFormUtils().isFormValid(transientItemID) && isValidInput(formValues)) {
         setInitTable(true);
         const Query: any = {
-          dataViewParameters: {}
+          dataViewParameters: parameters
         };
 
         if (!Utils.isEmptyObject(promotedFilters)) {
@@ -156,5 +156,6 @@ PromotedFilters.propTypes = {
   viewName: PropTypes.string.isRequired,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   listViewProps: PropTypes.objectOf(PropTypes.any).isRequired,
-  pageClass: PropTypes.string.isRequired
+  pageClass: PropTypes.string.isRequired,
+  parameters: PropTypes.object
 };

package/lib/{templates → template}/SimpleTable/SimpleTable/SimpleTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import FieldGroupTemplate from '@pega/react-sdk-components/lib/components/templates/FieldGroupTemplate/';
-import SimpleTableManual from '@pega/react-sdk-components/lib/components/templates/SimpleTable/SimpleTableManual';
+import FieldGroupTemplate from '@pega/react-sdk-components/lib/components/template/FieldGroupTemplate';
+import SimpleTableManual from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTableManual';
 
 declare const PCore: any;
 

package/lib/{templates → template}/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -8,7 +8,7 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core/styles';
-import { buildFieldsForTable, filterData } from '@pega/react-sdk-components/lib/components/templates/SimpleTable/simpleTableHelpers';
+import { buildFieldsForTable, filterData } from '@pega/react-sdk-components/lib/components/template/SimpleTable/simpleTableHelpers';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import Link from '@material-ui/core/Link';
 import { getReferenceList } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';

package/lib/{templates → template}/SimpleTable/SimpleTableSelect/SimpleTableSelect.tsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from "react";
-import ListView from '@pega/react-sdk-components/lib/components/templates/ListView';
-import SimpleTable from '@pega/react-sdk-components/lib/components/templates/SimpleTable/SimpleTable';
+import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
+import SimpleTable from '@pega/react-sdk-components/lib/components/template/SimpleTable/SimpleTable';
 
-import PromotedFilters from '@pega/react-sdk-components/lib/components/templates/PromotedFilters';
+import PromotedFilters from '@pega/react-sdk-components/lib/components/template/PromotedFilters';
 
 const isSelfReferencedProperty = (param, referenceProp) => {
   const [, parentPropName] = param.split('.');
@@ -98,6 +98,7 @@ export default function SimpleTableSelect(props) {
         filters={filters}
         listViewProps={listViewProps}
         pageClass={pageClass}
+        parameters={parameters}
       />
     );
   }

package/lib/{templates → template}/TwoColumn/TwoColumnPage/TwoColumnPage.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import TwoColumn from '@pega/react-sdk-components/lib/components/templates/TwoColumn/TwoColumn';
+import TwoColumn from '@pega/react-sdk-components/lib/components/template/TwoColumn/TwoColumn';
 
 /*
  * The wrapper handles knowing how to take in just children

package/lib/{templates → template}/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 // import PropTypes from "prop-types";
 // import Grid from '@material-ui/core/Grid';
-import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtension/DetailsFields';
 
 export default function WideNarrowDetails(props) {
   const { a, b, children } = props;

package/lib/{templates → template}/WideNarrow/WideNarrowPage/WideNarrowPage.tsx

@@ -2,7 +2,7 @@ import React, { Children } from "react";
 import PropTypes from "prop-types";
 
 // import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import WideNarrow from '@pega/react-sdk-components/lib/components/templates/WideNarrow/WideNarrow';
+import WideNarrow from '@pega/react-sdk-components/lib/components/template/WideNarrow/WideNarrow';
 
 /*
  * The wrapper handles knowing how to take in just children and mapping

package/lib/{templates → template}/utils.ts

@@ -1,4 +1,4 @@
-//  This file is adapted from React DX components/Templates/utils.js
+//  This file is adapted from React DX components/template/utils.js
 
 export function getAllFields(pConnect: any) {
   const metadata = pConnect.getRawMetadata();

package/lib/{widgets → widget}/Attachment/Attachment.tsx

@@ -4,7 +4,7 @@ import { Button } from '@material-ui/core';
 import React, { useState, useEffect } from 'react';
 import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize, getIconForAttachment } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import './Attachment.css';
-import SummaryList from '@pega/react-sdk-components/lib/components/widgets/SummaryList'
+import SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList'
 import { CircularProgress } from "@material-ui/core";
 import download from "downloadjs";
 

package/lib/{widgets → widget}/FileUtility/FileUtility/FileUtility.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import TextField from '@material-ui/core/TextField';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import download from "downloadjs";
-import SummaryList from '@pega/react-sdk-components/lib/components/widgets/SummaryList';
-import ActionButtonsForFileUtil from '@pega/react-sdk-components/lib/components/widgets/FileUtility/ActionButtonsForFileUtil';
+import SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList';
+import ActionButtonsForFileUtil from '@pega/react-sdk-components/lib/components/widget/FileUtility/ActionButtonsForFileUtil';
 import './FileUtility.css';
 import  { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';

package/lib/{widgets → widget}/SummaryList/SummaryList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SummaryItem from '@pega/react-sdk-components/lib/components/widgets/SummaryItem/index'
+import SummaryItem from '@pega/react-sdk-components/lib/components/widget/SummaryItem/index'
 
 export default function SummaryList(props) {
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.12",
+  "version": "0.23.13",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [

package/lib/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.tsx

@@ -1,156 +0,0 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import isDeepEqual from 'fast-deep-equal/react';
-
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
-import Operator from '@pega/react-sdk-components/lib/components/designSystemExtensions/Operator';
-
-import './CaseSummaryFields.css';
-
-import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
-
-export default function CaseSummaryFields(props) {
-  const { status, showStatus, theFields } = props;
-
-  const [theFieldsToRender, setFieldsToRender] = useState([]);
-  const [theFieldsAsGridItems, setFieldsAsGridItems] = useState<Array<any>>([]);
-
-
-  function getFieldValue(field: any): any {
-    const fieldTypeLower = field.type.toLowerCase();
-
-    if (field.config.value === null || field.config.value === "") {
-      // Special handling for missing value
-      // eslint-disable-next-line sonarjs/no-small-switch
-      switch(fieldTypeLower) {
-        case "caseoperator" :
-          return <Operator caseOpConfig={field.config} />;
-          break;
-
-        default:
-          return <TextField
-            value="---"
-            label={field.config.label}
-            InputProps={{
-              readOnly: true
-            }} />;
-      }
-    }
-
-    switch(fieldTypeLower) {
-      case "textinput" :
-        return <TextField
-          value={field.config.value}
-          label={field.config.label}
-          InputProps={{
-            readOnly: true
-          }} />;
-
-      case "status" :
-        return <TextField
-        className="psdk-csf-status-style"
-        value={field.config.value}
-        label={field.config.label}
-        InputProps={{
-          readOnly: true
-          }} />;
-
-      case "phone":
-        {
-          const displayPhone = (field.config.value !== "") ? field.config.value : "---";
-          return <a href={`tel:${displayPhone}`}>
-            <TextField
-                  value={field.config.value}
-                  label={field.config.label}
-                  InputProps={{
-                    readOnly: true,
-                    inputProps: {style: {cursor: 'pointer'}}
-                  }}
-              />
-          </a>;
-        }
-
-      case "email":
-        {
-          const displayEmail = format(field.config.value, field.type);
-          return <a href={`mailto:${displayEmail}`}>
-            <TextField
-                  value={field.config.value}
-                  label={field.config.label}
-                  InputProps={{
-                    readOnly: true,
-                    inputProps: {style: {cursor: 'pointer'}}
-                  }}
-              />
-          </a>;
-
-        }
-
-      case "date":
-        return <TextField
-              value={format(field.config.value, field.type)}
-              label={field.config.label}
-              InputProps={{
-                readOnly: true
-              }} />;
-
-      case "caseoperator":
-        return <Operator caseOpConfig={field.config} />;
-        break;
-
-        default:
-        return (
-        <span>{field.type.toLowerCase()} {field.config.value}</span>
-        );
-
-    }
-
-  }
-
-
-  // Whenever theFieldsToRender changes, update theFieldsAsGridItems that's used during render
-  useEffect(() => {
-      const arGridItems = theFieldsToRender.map((field: any) => {
-        return ( <Grid item xs={6} key={field.config.label}>{getFieldValue(field)}</Grid> );
-      });
-      setFieldsAsGridItems(arGridItems);
-    },
-    [theFieldsToRender]);
-
-
-  const theFieldsModifiable = theFields;
-
-  // Special Case: if showStatus is true, splice the status value to be 2nd in theFields
-  //  if it's not already there
-  if (showStatus && theFields?.[1].type !== "status") {
-    const oStatus = { type: "status", config: { value: status, label: "Status" }};
-
-    const count = theFieldsModifiable.length;
-    if (count < 2) {
-      theFieldsModifiable.push(oStatus);
-    }
-    else {
-      theFieldsModifiable.splice(1, 0, oStatus);
-    }
-  }
-
-  // At this point, we know what fields we want to render...
-  //  So, update our state if it's changed
-  if (!isDeepEqual(theFieldsToRender, theFieldsModifiable)) {
-    setFieldsToRender(theFieldsModifiable);
-  }
-
-
-  return <React.Fragment>
-    <Grid container className="psdk-case-summary-fields">
-      {theFieldsAsGridItems}
-    </Grid>
-  </React.Fragment>;
-}
-
-CaseSummaryFields.propTypes = {
-  status: PropTypes.string,
-  showStatus: PropTypes.bool,
-  theFields: PropTypes.arrayOf(PropTypes.object)
-};