@pega/react-sdk-overrides 0.23.13 → 0.23.15

package/lib/designSystemExtension/FieldGroup/FieldGroup.tsx

@@ -1,18 +1,6 @@
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
-import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
-
-function generateFields(item, fields) {
-  for (const label in item) {
-    if (Utils.isObject(item[label])) {
-      generateFields(item[label], fields);
-    } else if (label !== 'classID') {
-      fields.push({ label, value: item[label] });
-    }
-  }
-}
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -27,83 +15,31 @@ const useStyles = makeStyles(theme => ({
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1)
   },
-  fieldLabel: {
-    fontWeight: 400,
-    color: theme.palette.text.secondary
-  },
-  fieldValue: {
-    fontWeight: 400,
-    color: theme.palette.text.primary
+  fullWidth: {
+    width: '100%'
   }
 }));
 
 const FieldGroup = props => {
+  const { children, name } = props;
   const classes = useStyles();
 
-  const fields: any = [];
-  generateFields(props.item, fields);
-
-  function getGridItemLabel(label) {
-    const dispValue = label;
-
-    return (
-      <Grid item xs={6}>
-        <Typography
-          variant='body2'
-          component='span'
-          className={`${classes.fieldLabel} ${classes.fieldMargin}`}
-        >
-          {dispValue}
-        </Typography>
-      </Grid>
-    );
-  }
-
-  function formatItemValue(value) {
-    let formattedVal = value;
-
-    // if the value is an empty string, we want to display it as "---"
-    if (formattedVal === '') {
-      formattedVal = '---';
-    }
-
-    return formattedVal;
-  }
-
-  function getGridItemValue(value) {
-    const formattedValue = formatItemValue(value);
-
-    return (
-      <Grid item xs={6}>
-        <Typography variant='body2' component='span' className={classes.fieldValue}>
-          {formattedValue}
-        </Typography>
-      </Grid>
-    );
-  }
-
-  function getGridItems() {
-    const gridItems = fields.map((item) => {
-      return (
-        <Grid key={`${item.label}-${item.value}`} container spacing={1}>
-          {getGridItemLabel(item.label)}
-          {getGridItemValue(item.value)}
-        </Grid>
-      );
-    });
-    return gridItems;
-  }
+  const descAndChildren = (
+    <Grid container>
+      <div className={classes.fullWidth}>{children}</div>
+    </Grid>
+  );
 
   return (
     <React.Fragment>
       <Grid container spacing={4} justifyContent='space-between'>
         <Grid item style={{ width: '100%' }}>
-          {fields.length > 0 && (
+          {name && (
             <div className={classes.fieldMargin}>
               <b>{props.name}</b>
             </div>
           )}
-          {getGridItems()}
+          {descAndChildren}
         </Grid>
       </Grid>
     </React.Fragment>

package/lib/field/DateTime/DateTime.tsx

@@ -3,6 +3,7 @@ import { KeyboardDateTimePicker } from '@material-ui/pickers';
 import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/';
 
 export default function DateTime(props) {
   const {
@@ -25,13 +26,16 @@ export default function DateTime(props) {
   const helperTextToDisplay = validatemessage || helperText;
 
   if(displayMode === 'LABELS_LEFT'){
+    const formattedDate = format(props.value, 'datetime');
     const field = {
-      [label]: value
+      [label]: formattedDate
     };
     return <FieldValueList item={field}/>
   }
 
   if (readOnly) {
+    const formattedDate = format(props.value, 'datetime');
+    props.value = formattedDate;
     return <TextInput {...props} />;
   }
 

package/lib/field/Dropdown/Dropdown.tsx

@@ -24,7 +24,8 @@ export default function Dropdown(props) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    onRecordChange
   } = props;
   const [options, setOptions] = useState<Array<IOption>>([]);
   const helperTextToDisplay = validatemessage || helperText;
@@ -61,6 +62,9 @@ export default function Dropdown(props) {
   const handleChange = evt => {
     const selectedValue = evt.target.value === 'Select' ? '' : evt.target.value;
     handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
+    if (onRecordChange) {
+      onRecordChange(evt);
+    }
   };
 
   // Material UI shows a warning if the component is rendered before options are set.

package/lib/helpers/field-group-utils.js

@@ -17,8 +17,6 @@ export const getReferenceList = pConn => {
     } else if (resolvePage.startsWith('D_') && !resolvePage.endsWith('.pxResults')) {
       resolvePage = `${resolvePage}.pxResults`;
     }
-  } else {
-    resolvePage = `${pConn.getPageReference().replace('caseInfo.content', '')}${resolvePage}`;
   }
   return resolvePage;
 };

package/lib/{template/SimpleTable → helpers}/simpleTableHelpers.ts

@@ -1,4 +1,4 @@
-import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { Utils } from './utils';
 
 declare const PCore;
 

package/lib/infra/View/View.tsx

@@ -104,7 +104,7 @@ export default function View(props) {
 
     return (
       <div className='grid-column'>
-        {showLabel && template !== 'SubTabs' && template !== 'SimpleTable' && (
+        {showLabel && template !== 'SubTabs' && template !== 'SimpleTable' && template !== 'Details' && (
           <div className='template-title-container'>
             <span>{label}</span>
           </div>

package/lib/template/Details/Details/Details.tsx

@@ -1,12 +1,15 @@
-import React from "react";
-// import PropTypes from "prop-types";
+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/designSystemExtension/DetailsFields';
 
 export default function Details(props) {
-  const { children } = props;
+  const { children, label, showLabel, getPConnect } = props;
   const arFields: Array<any> = [];
 
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
   for (const child of children) {
     const theChildPConn = child.props.getPConnect();
     theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');
@@ -16,20 +19,28 @@ export default function Details(props) {
   }
 
   return (
-      <div id="DetailsOneColumn">
-        <Grid container spacing={1}>
-          <Grid item xs={12}>
-            <DetailsFields fields={arFields[0]} />
-          </Grid>
+    <div id='DetailsOneColumn'>
+      {propsToUse.showLabel && (
+        <div className='template-title-container'>
+          <span>{propsToUse.label}</span>
+        </div>
+      )}
+      <Grid container spacing={1}>
+        <Grid item xs={12}>
+          <DetailsFields fields={arFields[0]} />
         </Grid>
-      </div>
-    );
+      </Grid>
+    </div>
+  );
 }
 
 Details.defaultProps = {
-  // children: []
-}
+  label: undefined,
+  showLabel: true
+};
 
 Details.propTypes = {
-  // children: PropTypes.arrayOf(PropTypes.node)
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired
 };

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -80,8 +80,12 @@ export default function FieldGroupTemplate(props) {
   pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
   const memoisedReadOnlyList = useMemo(() => {
     return referenceList.map((item, index) => (
-      // eslint-disable-next-line react/no-array-index-key
-      <FieldGroup item={item} key={index} name={`${HEADING} ${index + 1}`} />
+      <FieldGroup
+        key={item[heading]}
+        name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}
+      >
+        {buildView(pConn, index, lookForChildInConfig)}
+      </FieldGroup>
     ));
   }, []);
 

package/lib/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/template/SimpleTable/SimpleTable/simpleTableHelpers';
+import { filterData } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 import './ListView.css';
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };

package/lib/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/template/SimpleTable/simpleTableHelpers';
+import { buildFieldsForTable, filterData } from '@pega/react-sdk-components/lib/components/helpers/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/package.json

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