@pega/react-sdk-overrides 0.23.6

package/lib/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.css

@@ -0,0 +1,19 @@
+
+.psdk-csf-status-style {
+  /* background-color: #e9eef3;
+  border-radius: calc(0.25 * 0.5rem);
+  color: #4c5a67; */
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: calc(0.5rem * 2.5);
+  height: calc(0.5rem * 2.5);
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.psdk-case-summary-fields {
+  padding: calc(2 * 0.5rem);
+  display: grid;
+  grid-row-gap: calc(2 * 0.5rem);
+}

package/lib/designSystemExtensions/CaseSummaryFields/CaseSummaryFields.tsx

@@ -0,0 +1,156 @@
+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)
+};

package/lib/designSystemExtensions/CaseSummaryFields/index.tsx

@@ -0,0 +1 @@
+export { default } from './CaseSummaryFields';

package/lib/designSystemExtensions/DetailsFields/DetailsFields.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable react/no-array-index-key */
+import React, { createElement, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  fieldLabel: {
+    display: 'block',
+    fontWeight: 400,
+    color: theme.palette.text.secondary
+  },
+  fieldValue: {
+    fontWeight: 400,
+    color: theme.palette.text.primary
+  }
+}));
+
+export default function DetailsFields(props) {
+  // const componentName = "DetailsFields";
+  const { fields } = props;
+  const classes = useStyles();
+  const fieldComponents: Array<any> = [];
+
+  fields?.forEach((field, index) => {
+    const thePConn = field.getPConnect();
+    const theCompType = thePConn.getComponentName().toLowerCase();
+    const { label, value } = thePConn.getConfigProps();
+    // If value is "" then also we would have to get viewMetadata using getReferencedView.
+    if (theCompType === 'reference' || value === '') {
+      const configObj = thePConn?.getReferencedView();
+      configObj.config.readOnly = theCompType === 'reference';
+      configObj.config.displayMode = 'LABELS_LEFT';
+      const propToUse = { ...thePConn.getInheritedProps() };
+      configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
+      fieldComponents.push({
+        type: theCompType,
+        label,
+        value: (
+          <React.Fragment key={index}>
+            {createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())}
+          </React.Fragment>
+        )
+      });
+    } else {
+      fieldComponents.push({ type: theCompType, value, label });
+    }
+  });
+
+  function getGridItemLabel(field: any, keyVal: string) {
+    const dispValue = field.label;
+
+    return (
+      <Grid item xs={6} key={keyVal}>
+        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>
+          {dispValue}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function formatItemValue(inField: any) {
+    const { type, value } = inField;
+    let formattedVal = value;
+
+    // eslint-disable-next-line sonarjs/no-small-switch
+    switch (type) {
+      case 'date':
+        formattedVal = format(value, type);
+        break;
+
+      default:
+        // No match means we return the value as we received it
+        break;
+    }
+
+    // Finally, if the value is undefined or an empty string, we want to display it as "---"
+    if (formattedVal === undefined || formattedVal === '') {
+      formattedVal = '---';
+    }
+
+    return formattedVal;
+  }
+
+  function getGridItemValue(field: any, keyVal: string) {
+    const formattedValue = formatItemValue(field);
+
+    return (
+      <Grid item xs={6} key={keyVal}>
+        <Typography variant='body2' component='span' className={classes.fieldValue}>
+          {formattedValue}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function getGridItem(field: any, keyVal: string) {
+
+    return (
+      <Grid item xs={12} key={keyVal}>
+        <Typography variant='body2' component='span' className={classes.fieldValue}>
+          {field?.value}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  function getGridItems() {
+    const gridItems: Array<any> = fieldComponents.map((field, index) => {
+      if (field?.type === 'reference') {
+        return field?.value;
+      } else if (isValidElement(field?.value)) {
+        return (
+          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+            {getGridItem(field, `${index}-item`)}
+          </Grid>
+        );
+      } else {
+        return (
+          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>
+            {getGridItemLabel(field, `${index}-label`)}
+            {getGridItemValue(field, `${index}-value`)}
+          </Grid>
+        );
+      }
+    });
+    return gridItems;
+  }
+
+  return <React.Fragment>{getGridItems()}</React.Fragment>;
+}
+
+DetailsFields.defaultProps = {
+  fields: []
+};
+
+DetailsFields.propTypes = {
+  fields: PropTypes.arrayOf(PropTypes.any)
+};

package/lib/designSystemExtensions/DetailsFields/index.tsx

@@ -0,0 +1 @@
+export { default } from './DetailsFields';

package/lib/designSystemExtensions/FieldGroup/FieldGroup.tsx

@@ -0,0 +1,113 @@
+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: {
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  fieldMargin: {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: theme.palette.text.secondary
+  },
+  fieldValue: {
+    fontWeight: 400,
+    color: theme.palette.text.primary
+  }
+}));
+
+const FieldGroup = 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;
+  }
+
+  return (
+    <React.Fragment>
+      <Grid container spacing={4} justifyContent='space-between'>
+        <Grid item style={{ width: '100%' }}>
+          {fields.length > 0 && (
+            <div className={classes.fieldMargin}>
+              <b>{props.name}</b>
+            </div>
+          )}
+          {getGridItems()}
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default FieldGroup;

package/lib/designSystemExtensions/FieldGroup/index.tsx

@@ -0,0 +1 @@
+export { default } from './FieldGroup';

package/lib/designSystemExtensions/FieldGroupList/FieldGroupList.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import Grid from '@material-ui/core/Grid';
+import Divider from '@material-ui/core/Divider';
+import Link from '@material-ui/core/Link';
+
+import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+
+declare const PCore: any;
+
+const FieldGroupList = props => {
+  let menuIconOverride$ = 'trash';
+  if (menuIconOverride$) {
+    menuIconOverride$ = Utils.getImageSrc(
+      menuIconOverride$,
+      PCore.getAssetLoader().getStaticServerUrl()
+    );
+  }
+
+  return (
+    <Grid container spacing={4} justifyContent='space-between'>
+      <Grid item style={{ width: '100%' }}>
+        <Grid container spacing={1}>
+          {props.items.map(item => (
+            <Grid item style={{ width: '100%' }}>
+              <b>{item.name}</b>
+              <button
+                type='button'
+                style={{ float: 'right' }}
+                className='psdk-utility-button'
+                id={`delete-row-${Utils.getLastChar(item.name)}`}
+                onClick={() => {
+                  props.onDelete(item.id);
+                }}
+              >
+                <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$}></img>
+              </button>
+              {item.children}
+              <br />
+              <Divider />
+              <br />
+            </Grid>
+          ))}
+          <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>
+            +Add
+          </Link>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default FieldGroupList;

package/lib/designSystemExtensions/FieldGroupList/index.tsx

@@ -0,0 +1 @@
+export { default } from './FieldGroupList';

package/lib/designSystemExtensions/FieldValueList/FieldValueList.tsx

@@ -0,0 +1,106 @@
+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';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  fieldMargin: {
+    // paddingRight: theme.spacing(1),
+    // paddingLeft: theme.spacing(1),
+    // paddingTop: theme.spacing(1),
+    // paddingBottom: theme.spacing(1),
+    // marginRight: theme.spacing(1),
+    // marginLeft: theme.spacing(1),
+    // marginTop: theme.spacing(1),
+    // marginBottom: theme.spacing(1)
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: theme.palette.text.secondary
+  },
+  fieldValue: {
+    fontWeight: 400,
+    color: theme.palette.text.primary
+  }
+}));
+
+const FieldValueList = props => {
+  const classes = useStyles();
+
+  const fields: any = [];
+
+  // eslint-disable-next-line guard-for-in
+  for (const label in props.item) {
+    fields.push({ label, value: props.item[label] });
+  }
+
+  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 undefined or an empty string, we want to display it as "---"
+    if (formattedVal === undefined || 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 container spacing={1} key={item.label}>
+          {getGridItemLabel(item.label)}
+          {getGridItemValue(item.value)}
+        </Grid>
+      );
+    });
+    return gridItems;
+  }
+
+  return (
+    <React.Fragment>
+      <Grid container spacing={4} justifyContent='space-between'>
+        <Grid item style={{ width: '100%' }}>
+          {getGridItems()}
+        </Grid>
+      </Grid>
+    </React.Fragment>
+  );
+};
+
+export default FieldValueList;

package/lib/designSystemExtensions/FieldValueList/index.tsx

@@ -0,0 +1 @@
+export { default } from './FieldValueList';