@pega/react-sdk-overrides 0.23.11 → 0.23.13

package/lib/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -0,0 +1,202 @@
+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/designSystemExtension/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,
+                disableUnderline: true
+              }}
+            />
+          );
+      }
+    }
+
+    switch (fieldTypeLower) {
+      case 'textinput':
+      case 'decimal':
+      case 'integer':
+      case 'dropdown':
+        return (
+          <TextField
+            value={field.config.value}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+
+      case 'checkbox': {
+        const { caption, label, value, trueLabel, falseLabel } = field.config;
+        const fieldLabel = label || caption;
+        const fieldValue = value ? trueLabel : falseLabel;
+
+        return (
+          <TextField
+            value={fieldValue}
+            label={fieldLabel}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: true
+            }}
+          />
+        );
+      }
+
+      case 'status':
+        return (
+          <TextField
+            className='psdk-csf-status-style'
+            value={field.config.value}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: 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' }, disableUnderline: true }
+              }}
+            />
+          </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,
+                disableUnderline: true,
+                inputProps: { style: { cursor: 'pointer' } }
+              }}
+            />
+          </a>
+        );
+      }
+
+      case 'date':
+      case 'datetime':
+      case 'currency':
+      case 'boolean':
+        return (
+          <TextField
+            value={format(field.config.value, field.type)}
+            label={field.config.label}
+            InputProps={{
+              readOnly: true,
+              disableUnderline: 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) => {
+      // display the field when either visibility property doesn't exist or is true(if exists)
+      if (field.config.visibility === undefined || field.config.visibility === true) {
+        return (
+          <Grid item xs={6} key={field.config.label}>
+            {getFieldValue(field)}
+          </Grid>
+        );
+      }
+
+      return null;
+    });
+    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 → designSystemExtension}/DetailsFields/DetailsFields.tsx

@@ -42,7 +42,7 @@ export default function DetailsFields(props) {
     const theCompType = thePConn.getComponentName().toLowerCase();
     const { label } = thePConn.getConfigProps();
     const configObj = thePConn?.getReferencedView();
-    configObj.config.readOnly = theCompType === 'reference';
+    configObj.config.readOnly = true;
     configObj.config.displayMode = 'LABELS_LEFT';
     const propToUse = { ...thePConn.getInheritedProps() };
     configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;

package/lib/{designSystemExtensions → designSystemExtension}/Operator/Operator.tsx

@@ -166,6 +166,7 @@ export default function Operator(props) {
         onClick={showOperatorDetails}
         InputProps={{
           readOnly: true,
+          disableUnderline: true,
           inputProps: {style: {cursor: 'pointer'}}
         }}
       />

package/lib/{forms → field}/AutoComplete/AutoComplete.tsx

@@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { TextField } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import isDeepEqual from 'fast-deep-equal/react';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 interface IOption {
   key: string;
@@ -64,7 +65,6 @@ export default function AutoComplete(props) {
   const actionsApi = thePConn.getActionsApi();
   const propName = thePConn.getStateProps().value;
 
-
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
     setDatasource(datasource);
@@ -72,7 +72,7 @@ export default function AutoComplete(props) {
 
   const flattenParameters = (params = {}) => {
     const flatParams = {};
-    Object.keys(params).forEach((key) => {
+    Object.keys(params).forEach(key => {
       const { name, value: theVal } = params[key];
       flatParams[name] = theVal;
     });
@@ -132,6 +132,13 @@ export default function AutoComplete(props) {
     }
   }, []);
 
+  if (displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />;
+  }
+
   if (value) {
     const index = options?.findIndex(element => element.key === value);
     if (index > -1) {
@@ -142,7 +149,7 @@ export default function AutoComplete(props) {
   }
 
   const handleChange = (event: object, newValue) => {
-    const val = newValue ? newValue.key : '' ;
+    const val = newValue ? newValue.key : '';
     handleEvent(actionsApi, 'changeNblur', propName, val);
   };
 

package/lib/{forms → field}/Checkbox/Checkbox.tsx

@@ -7,17 +7,20 @@ import {
   FormHelperText
 } from '@material-ui/core';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function CheckboxComponent(props) {
   const {
     getPConnect,
+    label,
     value = false,
     readOnly,
     testId,
     required,
     status,
     helperText,
-    validatemessage
+    validatemessage,
+    displayMode
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -33,6 +36,13 @@ export default function CheckboxComponent(props) {
     setChecked(value);
   }, [value]);
 
+  if (displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />;
+  }
+
   const handleChange = event => {
     handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);
   };

package/lib/{forms → field}/Currency/Currency.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 // import { TextField } from "@material-ui/core";
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 // Using control from: https://github.com/unicef/material-ui-currency-textfield
 

package/lib/{forms → field}/Date/Date.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { KeyboardDatePicker } from '@material-ui/pickers';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+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/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Date(props) {
   const {

package/lib/{forms → field}/DateTime/DateTime.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { KeyboardDateTimePicker } from '@material-ui/pickers';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+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/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function DateTime(props) {
   const {

package/lib/field/DateTime/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "DateTime",
+  "label": "Date & time",
+  "description": "Date & time",
+  "type": "Field",
+  "subtype": "DateTime",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/Decimal/Decimal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Decimal(props) {
   const {

package/lib/field/Decimal/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Decimal",
+  "label": "Decimal",
+  "description": "Decimal",
+  "type": "Field",
+  "subtype": "Decimal",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/Dropdown/Dropdown.tsx

@@ -3,6 +3,7 @@ import { TextField } from '@material-ui/core';
 import MenuItem from '@material-ui/core/MenuItem';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 interface IOption {
   key: string;
@@ -22,7 +23,8 @@ export default function Dropdown(props) {
     status,
     readOnly,
     testId,
-    helperText
+    helperText,
+    displayMode
   } = props;
   const [options, setOptions] = useState<Array<IOption>>([]);
   const helperTextToDisplay = validatemessage || helperText;
@@ -39,6 +41,13 @@ export default function Dropdown(props) {
 
   let readOnlyProp = {};
 
+  if (displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />;
+  }
+
   if (readOnly) {
     readOnlyProp = { readOnly: true };
   }

package/lib/field/Dropdown/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Dropdown",
+  "label": "Dropdown",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/Email/Email.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { TextField, InputAdornment } from '@material-ui/core';
 import MailOutlineIcon from '@material-ui/icons/MailOutline';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Email(props) {
   const {

package/lib/field/Email/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Email",
+  "label": "Email",
+  "description": "Email",
+  "type": "Field",
+  "subtype": "Text-Email",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/Integer/Integer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Integer(props) {
   const {

package/lib/field/Integer/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Integer",
+  "label": "Integer",
+  "description": "Integer",
+  "type": "Field",
+  "subtype": "Integer",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/Percentage/Percentage.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { TextField } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 // Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
 const useStyles = makeStyles((/* theme */) => ({

package/lib/field/Percentage/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Percentage",
+  "label": "Percentage",
+  "description": "Percentage",
+  "type": "Field",
+  "subtype": "Decimal-Percentage",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/Phone/Phone.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import MuiPhoneNumber from 'material-ui-phone-number';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Phone(props) {
   const {

package/lib/{forms → field}/RadioButtons/RadioButtons.tsx

@@ -10,6 +10,7 @@ import {
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function RadioButtons(props) {
   const {
@@ -21,7 +22,8 @@ export default function RadioButtons(props) {
     helperText,
     status,
     required,
-    inline
+    inline,
+    displayMode
   } = props;
   const [theSelectedButton, setSelectedButton] = useState(value);
 
@@ -40,6 +42,13 @@ export default function RadioButtons(props) {
     setSelectedButton(value);
   }, [value]);
 
+  if (displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />;
+  }
+
   const handleChange = event => {
     handleEvent(actionsApi, 'changeNblur', propName, event.target.value);
   };
@@ -51,11 +60,12 @@ export default function RadioButtons(props) {
   return (
     <FormControl error={status === 'error'} required={required}>
       <FormLabel component='legend'>{label}</FormLabel>
-      <RadioGroup 
-        value={theSelectedButton} 
-        onChange={handleChange} 
-        onBlur={!readOnly ? handleBlur : undefined} 
-        row={inline}>
+      <RadioGroup
+        value={theSelectedButton}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        row={inline}
+      >
         {theOptions.map(theOption => {
           return (
             <FormControlLabel

package/lib/field/RadioButtons/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "RadioButtons",
+  "label": "Radio buttons",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "properties": [
+  ]
+}

package/lib/field/SemanticLink/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "SemanticLink",
+  "description": "SemanticLink",
+  "type": "Field",
+  "subtype": "ACTION",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/TextArea/TextArea.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function TextArea(props) {
   const {

package/lib/field/TextArea/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "TextArea",
+  "label": "Text area",
+  "description": "Text (paragraph)",
+  "type": "Field",
+  "subtype": "Text-Paragraph",
+  "properties": [
+  ]
+}

package/lib/field/TextContent/config-ext.json

@@ -0,0 +1,8 @@
+{
+  "name": "TextContent",
+  "description": "Text",
+  "type": "Field",
+  "subtype": "DATA_CAPTURE",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/TextInput/TextInput.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function TextInput(props) {
   const {

package/lib/field/TextInput/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "TextInput",
+  "label": "Text input",
+  "description": "Text (single line)",
+  "type": "Field",
+  "subtype": "Text",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/Time/Time.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { KeyboardTimePicker } from '@material-ui/pickers';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import dayjs from 'dayjs';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 export default function Time(props) {
   const {

package/lib/field/Time/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "Time",
+  "label": "Time only",
+  "description": "Time only",
+  "type": "Field",
+  "subtype": "TimeOfDay",
+  "properties": [
+  ]
+}

package/lib/{forms → field}/URL/URL.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TextField } from '@material-ui/core';
-import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 // NOTE: that we had to change the name from URL to URLComponent
 //  Otherwise, we were getting all kinds of weird errors when we

package/lib/field/URL/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "URL",
+  "label": "URL",
+  "description": "URL",
+  "type": "Field",
+  "subtype": "Text-URL",
+  "properties": [
+  ]
+}