@pega/react-sdk-overrides 0.23.6

package/lib/helpers/formatters/Date.js

@@ -0,0 +1,77 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import utc from "dayjs/plugin/utc";
+import tzone from "dayjs/plugin/timezone";
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(tzone);
+
+const types = ["fromNow", "customFormat"];
+
+// value should be in ISO 8601 format.
+function DateFormatter(
+  value,
+  { type = types[1], format = "DD/MM/YYYY", timezone } = {}
+) {
+  if (!value) return value;
+  switch (type) {
+    case types[1]:
+      if (timezone) return dayjs(value).tz(timezone).format(format);
+      return dayjs(value).format(format);
+    case types[0]:
+      return dayjs(value).from(dayjs());
+    default:
+      return value;
+  }
+}
+// value should be in hh:mm:ss format (00:00:00 - 23:59:59).
+function TimeFormatter(value, options) {
+  if (!value) return value;
+  const { locale = "en-US" } = options;
+  const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
+  if (value.length === 8 && timeOnlyRegex.test(value)) {
+    const tempDate = new Date();
+    const hours = parseInt(value.substr(0, 2), 10);
+    const minutes = parseInt(value.substr(3, 2), 10);
+    const seconds = parseInt(value.substr(6, 2), 10);
+    tempDate.setHours(hours);
+    tempDate.setMinutes(minutes);
+    tempDate.setSeconds(seconds);
+    return tempDate.toLocaleTimeString(locale);
+  }
+  return DateFormatter(value, options);
+}
+
+export default {
+  "DateTime-Long": (value, options) =>
+    DateFormatter(value, { ...options, type: "customFormat", format: "LLL" }),
+  "DateTime-Short": (value, options) =>
+    DateFormatter(value, {
+      ...options,
+      type: "customFormat",
+      format: "MMM DD, YYYY"
+    }),
+  "DateTime-Since": (value) => DateFormatter(value, { type: "fromNow" }),
+  "Time-Only": (value, options) =>
+    TimeFormatter(value, {
+      ...options,
+      type: "customFormat",
+      format: "hh:mm:ss A"
+    }),
+  convertToTimezone: (value, options) => {
+    return value && options && options.timezone
+      ? DateFormatter(value, {
+          ...options,
+          type: "customFormat",
+          format: "YYYY-MM-DDTHH:mm:ss"
+        })
+      : value;
+  },
+  convertFromTimezone: (value, timezone) =>
+    value && timezone ? dayjs.tz(value, timezone).utc().format() : value,
+  Date: (value, options) =>
+    DateFormatter(value, { type: "customFormat", ...options })
+};

package/lib/helpers/formatters/common.js

@@ -0,0 +1,10 @@
+export function getLocale(locale) {
+  if (locale) return locale;
+  return document.documentElement.lang;
+}
+
+export function getCurrentTimezone(timezone) {
+  if (timezone) return timezone;
+  // eslint-disable-next-line no-undef
+  return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
+}

package/lib/helpers/formatters/index.js

@@ -0,0 +1,120 @@
+import Boolean from "./Boolean";
+import Currency from "./Currency";
+import DateFormatter from "./Date";
+import { getCurrentTimezone, getLocale } from "./common";
+
+export default {
+  ...Boolean,
+  ...Currency,
+  ...DateFormatter
+};
+
+function getDateObject(text) {
+  // TODO - cleanup formatters util functions as DX APIs are returning values per ISO std now.
+  const timeStamp = text.replace(/-/g, "");
+  const isDateTime = timeStamp.indexOf("GMT") !== -1;
+  const year = parseInt(timeStamp.substr(0, 4), 10);
+  const month = parseInt(timeStamp.substr(4, 2), 10) - 1;
+  const day = parseInt(timeStamp.substr(6, 2), 10);
+
+  const date = new Date();
+
+  date.setDate(day);
+  date.setMonth(month);
+  date.setFullYear(year);
+
+  if (isDateTime) {
+    const hours = parseInt(timeStamp.substr(9, 2), 10);
+    const minutes = parseInt(timeStamp.substr(11, 2), 10);
+    const seconds = parseInt(timeStamp.substr(13, 2), 10);
+    const ms = parseInt(timeStamp.substr(16, 3), 10);
+    date.setHours(hours);
+    date.setMinutes(minutes);
+    date.setSeconds(seconds);
+    date.setMilliseconds(ms);
+  }
+
+  return date;
+}
+
+function isIsoDate(str) {
+  if (!/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(str)) return false;
+  const d = new Date(str);
+  return d.toISOString() === str;
+}
+
+function parseDateInISO(value) {
+  const isMilliSeconds = new RegExp("^[0-9]+$").exec(value);
+  if (isMilliSeconds) {
+    const date = new Date(parseInt(value, 10));
+    return date.toISOString();
+  }
+
+  if (isIsoDate(value)) {
+    const date = new Date(value);
+    return date.toISOString();
+  }
+
+  return value ? getDateObject(value).toISOString() : value;
+}
+
+export function format(value, type, options) {
+  let formattedValue;
+
+  switch (type?.toLowerCase()) {
+    case "currency": {
+      const defaultOptions = {
+        locale: getLocale(),
+        position: "before",
+        decPlaces: 2
+      };
+      const params = { ...defaultOptions, ...options };
+      formattedValue = Currency.Currency(value, params);
+      break;
+    }
+
+    case "decimal": {
+      const defaultOptions = { locale: getLocale(), decPlaces: 2 };
+      const params = { ...defaultOptions, ...options };
+      formattedValue = Currency.Decimal(value, params);
+      break;
+    }
+
+    case "integer": {
+      const defaultOptions = { locale: getLocale() };
+      const params = { ...defaultOptions, ...options };
+      formattedValue = Currency.Integer(value, params);
+      break;
+    }
+
+    case "date": {
+      const defaultOptions = {
+        format: "MMM DD, YYYY",
+        timezone: getCurrentTimezone()
+      };
+      const params = { ...defaultOptions, ...options };
+      formattedValue = DateFormatter.Date(parseDateInISO(value), params);
+      break;
+    }
+
+    case "datetime": {
+      const defaultOptions = {
+        format: "MMM DD, YYYY h:mm A",
+        timezone: getCurrentTimezone()
+      };
+      const params = { ...defaultOptions, ...options };
+      formattedValue = DateFormatter.Date(parseDateInISO(value), params);
+      break;
+    }
+
+    case "boolean":
+    case "checkbox": {
+      formattedValue = Boolean.TrueFalse(value, { allowEmpty: false });
+      break;
+    }
+
+    default:
+      formattedValue = value;
+  }
+  return formattedValue;
+}

package/lib/helpers/utils.ts

@@ -0,0 +1,334 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(customParseFormat);
+dayjs.extend(localizedFormat);
+dayjs.extend(relativeTime);
+
+export class Utils {
+  static lastControlID: number = 0;
+
+  static getUniqueControlID(): string {
+    const sPrefix = 'control-';
+
+    this.lastControlID += 1;
+
+    return sPrefix + this.lastControlID.toString();
+  }
+
+  static getOptionList(configProps: any, dataObject: any): Array<any> {
+    const listType = configProps.listType;
+    let arReturn: Array<any> = [];
+
+    if (listType) {
+      switch (listType.toLowerCase()) {
+        case 'associated':
+          // data source should be an array
+          if (typeof configProps.datasource === 'object') {
+            arReturn = configProps.datasource;
+          }
+          break;
+
+        case 'datapage':
+          // get data page
+          // eslint-disable-next-line no-case-declarations
+          const dataPage = configProps.datasource;
+          if (dataObject[dataPage]) {
+            // eslint-disable-next-line no-alert
+            alert('need to handle data page');
+          } else {
+            let listSourceItems = configProps.listOutput;
+            if (typeof dataPage === 'object' && !Array.isArray(listSourceItems)) {
+              listSourceItems = dataPage.source ? dataPage.source : [];
+            }
+            (listSourceItems || []).forEach(item => {
+              item.value = item.text ? item.text : item.value;
+            });
+            arReturn = listSourceItems || [];
+          }
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    return arReturn;
+  }
+
+  static getInitials(userName: string): string {
+    let userInitials = userName;
+
+    if (userName && userName !== '') {
+      userInitials = userName.charAt(0);
+
+      if (userName.lastIndexOf(' ') > 0) {
+        const lastName = userName.substring(userName.lastIndexOf(' ') + 1);
+        userInitials += lastName.charAt(0);
+      } else if (userName.lastIndexOf('.') > 0) {
+        const lastName = userName.substring(userName.lastIndexOf('.') + 1);
+        userInitials += lastName.charAt(0);
+      }
+    } else {
+      userInitials = '';
+    }
+
+    return userInitials.toUpperCase();
+  }
+
+  static getImageSrc(name: string, serverUrl: string): string {
+    let iconName = name.replace('pi-', '').replace('pi ', '').trim();
+    if (iconName === 'line-chart') {
+      iconName = 'chart-line';
+    }
+
+    return this.getIconPath(serverUrl).concat(iconName).concat('.svg');
+  }
+
+  static getIconPath(serverUrl: string): string {
+    // Directory in the constellation folder where the icons will be
+    return serverUrl.concat('icons/');
+  }
+
+  static getBooleanValue(inValue: any): boolean {
+    let bReturn = false;
+
+    if (typeof inValue === 'string') {
+      // Experiment with having "" be true, too (and "on")
+      if (inValue.toLowerCase() === 'true' || inValue.toLowerCase() === 'on' || inValue === '') {
+        bReturn = true;
+      }
+    } else {
+      bReturn = inValue;
+    }
+
+    return bReturn;
+  }
+
+  // Note: Explored using formatters/format but that doesn't do the same as this function.  So not possible to just invoke
+  //  format and do away with all the separate Pega possible dateFormats.
+  static generateDate(dateVal, dateFormat) {
+    let sReturnDate = dateVal;
+
+    if (dateVal === null || dateVal === '') {
+      return dateVal;
+    }
+
+    // VRS: Dont think we need the below line.  Commenting out for now. (2020.05.20)
+    // dateTimeVal = dateTimeVal.replace("GMT", "+0000")
+    // Anything else would require a specific String pattern be specified as an argument to the dayjs constructor
+
+    // if date has a ".", then of the format YYYMMDD[T]HHmmss[.]SSS Z, need to change to YYYYMMDD
+    if (dateVal.indexOf('.') >= 0) {
+      // VRS: Dont think we need the dateVal.replace("GMT", "+0000").  Commenting out for now. (2020.05.20)
+      // dateVal = dayjs(dateVal.replace("GMT", "+0000"), "YYYYMMDD[T]HHmmss[.]SSS Z").format("YYYYMMDD");
+      // dateVal format appears to be YYYY-MM-DDThh:mm:ss.SSSZ (which is the default dayjs expected format)
+      // Don't change the dateVal passed to dayjs (rather just set a default sReturnDate--if that is what we want to do)
+      //  (better might be just doing that in a default switch block)
+      sReturnDate = dayjs(dateVal).format('YYYYMMDD');
+    }
+
+    switch (dateFormat) {
+      case 'Date-Short':
+        // 1/1/01
+        sReturnDate = dayjs(dateVal).format('M/D/YY');
+        break;
+      case 'Date-Short-YYYY':
+        // 1/1/2001
+        sReturnDate = dayjs(dateVal).format('M/D/YYYY');
+        break;
+      case 'Date-Short-Custom':
+        // 01/01/01
+        sReturnDate = dayjs(dateVal).format('MM/DD/YY');
+        break;
+      case 'Date-Short-Custom-YYYY':
+        // 01/01/2001
+        sReturnDate = dayjs(dateVal).format('L');
+        break;
+      case 'Date-Medium':
+        // Jan 1, 2001
+        sReturnDate = dayjs(dateVal).format('ll');
+        break;
+      case 'Date-DayMonthYear-Custom':
+        // 01-Jan-2001
+        sReturnDate = dayjs(dateVal).format('DD-MMM-YYYY');
+        break;
+      case 'Date-Full':
+        // Monday, January 1, 2001
+        sReturnDate = dayjs(dateVal).format('dddd, MMMM D, YYYY');
+        break;
+      case 'DateTime-Frame':
+      case 'DateTime-Frame-Short':
+      case 'DateTime-Since':
+        // 2 days, 5 hours ago
+        sReturnDate = dayjs(dateVal).fromNow();
+        break;
+      case 'Date-Long':
+        // January 1, 2001
+        sReturnDate = dayjs(dateVal).format('MMMM D, YYYY');
+        break;
+      case 'Date-ISO-8601':
+        // 2001/01/01 y/m/d
+        sReturnDate = dayjs(dateVal).format('YYYY/MM/DD');
+        break;
+      case 'Date-Gregorian-1':
+        // 01 January, 2001
+        sReturnDate = dayjs(dateVal).format('DD MMMM, YYYY');
+        break;
+      case 'Date-Gregorian-2':
+        // January 01, 2001
+        sReturnDate = dayjs(dateVal).format('MMMM DD, YYYY');
+        break;
+      case 'Date-Gregorian-3':
+        // 2001, January 01
+        sReturnDate = dayjs(dateVal).format('YYYY, MMMM DD');
+        break;
+      case 'DateTime-Custom':
+        break;
+      default:
+        break;
+    }
+
+    return sReturnDate;
+  }
+
+  // Note: Explored using formatters/format but that doesn't do the same as this function.  So not possible to just invoke
+  //  format and do away with all the separate Pega possible dateFormats.
+  static generateDateTime(dateTimeVal, dateFormat) {
+    let sReturnDate = dateTimeVal;
+
+    if (dateTimeVal === null || dateTimeVal === '') {
+      return dateTimeVal;
+    }
+
+    // VRS: Dont think we need the below line.  Commenting out for now. (2020.05.20)
+    // dateTimeVal = dateTimeVal.replace("GMT", "+0000")
+    // dateTimeVal format appears to be YYYY-MM-DDThh:mm:ss.SSSZ (which is the default dayjs expected format)
+    // Anything else would require a specific String pattern be specified as an argument to the dayjs constructor
+
+    switch (dateFormat) {
+      case 'DateTime-Short':
+        // 1/1/01 1:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('M/D/YY h:mm A');
+        break;
+      case 'DateTime-Short-Custom':
+        // 01/01/01 01:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('MM/DD/YY hh:mm A');
+        break;
+      case 'DateTime-Short-YYYY-Custom':
+        // 01/01/2001 01:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('M/D/YYYY hh:mm A');
+        break;
+      case 'DateTime-Short-YYYY':
+        // 1/1/2001 1:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('M/D/YYYY h:mm A');
+        break;
+      case 'DateTime-Medium':
+        // Jan 1, 2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('MMM D, YYYY h:mm:ss A');
+        break;
+      case 'DateTime-Long':
+        // January 1, 2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('MMMM D, YYYY h:mm:ss A');
+        break;
+      case 'DateTime-DayMonthYear-Custom':
+        // 01-Jan-2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('DD-MMM-YYYY h:mm:ss A');
+        break;
+      case 'DateTime-Full':
+        // Monday, January 1, 2001 1:00 AM EDT
+        sReturnDate = dayjs(dateTimeVal).format('dddd, MMMM D, YYYY h:mm A z');
+        break;
+      case 'DateTime-Frame':
+      case 'DateTime-Frame-Short':
+      case 'DateTime-Since':
+        // 2 days, 5 hours ago
+        sReturnDate = dayjs(dateTimeVal).fromNow();
+        break;
+      case 'DateTime-ISO-8601':
+        // 2001/01/01 1:00:00 AM     y/m/d
+        sReturnDate = dayjs(dateTimeVal).format('YYYY/MM/DD h:mm:ss A');
+        break;
+      case 'DateTime-Gregorian-1':
+        // 01 January, 2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('DD MMMM, YYYY h:mm:ss A');
+        break;
+      case 'DateTime-Gregorian-2':
+        // January 01, 2001 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('MMMM DD, YYYY h:mm:ss A');
+        break;
+      case 'DateTime-Gregorian-3':
+        // 2001, January 01 1:00:00 AM
+        sReturnDate = dayjs(dateTimeVal).format('YYYY, MMMM DD h:mm:ss A');
+        break;
+      case 'DateTime-Custom':
+        break;
+      default:
+        break;
+    }
+
+    return sReturnDate;
+  }
+
+  static getSeconds(sTime): any {
+    return dayjs(sTime).valueOf();
+  }
+
+  static getIconFromFileType(fileType): string {
+    let icon = 'document-doc';
+    if (!fileType) return icon;
+    if (fileType.startsWith('audio')) {
+      icon = 'audio';
+    } else if (fileType.startsWith('video')) {
+      icon = 'video';
+    } else if (fileType.startsWith('image')) {
+      icon = 'picture';
+    } else if (fileType.includes('pdf')) {
+      icon = 'document-pdf';
+    } else {
+      const [, subtype] = fileType.split('/');
+      const foundMatch = sources => {
+        return sources.some(key => subtype.includes(key));
+      };
+
+      if (foundMatch(['excel', 'spreadsheet'])) {
+        icon = 'document-xls';
+      } else if (foundMatch(['zip', 'compressed', 'gzip', 'rar', 'tar'])) {
+        icon = 'document-compress';
+      }
+    }
+
+    return icon;
+  }
+
+  static getIconForAttachment(attachment) {
+    let icon;
+    switch (attachment.type) {
+      case 'FILE':
+        icon = this.getIconFromFileType(attachment.mimeType);
+        break;
+      case 'URL':
+        icon = 'chain';
+        break;
+      default:
+        icon = 'document-doc';
+    }
+    return icon;
+  }
+
+  static getLastChar(text) {
+    return text.charAt(text.length - 1);
+  }
+
+  static isEmptyObject(obj: Object): Boolean {
+    return Object.keys(obj).length === 0;
+  }
+
+  static isObject(objValue) {
+    return objValue && typeof objValue === 'object' && objValue.constructor === Object;
+  }
+}
+
+export default Utils;

package/lib/helpers/versionHelpers.ts

@@ -0,0 +1,50 @@
+/**
+ * versionHelpers.ts
+ *
+ * Container helper functions that can identify which version of
+ * PCore/PConnect is being run
+ */
+
+declare const PCore;
+
+export const sdkVersion = "8.7";
+
+export function compareSdkPCoreVersions() {
+
+  // const theConstellationVersion = PCore.getPCoreVersion();
+
+  // eslint-disable-next-line no-console
+  console.warn(`Using Constellation version ${PCore.getPCoreVersion()}. Ensure this is the same version as your Infinity server.`);
+
+  // JA Testing
+  // debugger;
+
+  // const svcParams = [
+  //   {
+  //     "field" : "type",
+  //     "value" : "Field"
+  //   },
+  //   {
+  //     "field" : "subtype",
+  //     "value" : "Text",
+  //   }
+  // ];
+
+  // const options = {};
+
+  // const AssetLoader = PCore.getAssetLoader();
+
+  // AssetLoader
+  //    .getSvcComponentsConfig(svcParams, options)
+  //    .then((response) => {
+  //       if (response?.data?.components?.[0]) {
+  //         console.log(response.data.components[0]);
+  //       }
+  //       throw new Error('bad response');
+  //    })
+  //    .catch(() => {
+  //       throw new Error('no response:');
+  //    });
+
+
+}

package/lib/infra/ActionButtons/ActionButtons.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from '@material-ui/core/styles';
+
+import Button from '@material-ui/core/Button';
+import { Grid, Divider } from "@material-ui/core";
+
+
+
+const useStyles = makeStyles((/* theme */) => ({
+  button: {
+    padding: "0px 5px",
+  },
+  divider: {
+    marginTop: "10px",
+    marginBottom: "10px"
+  }
+}));
+
+
+export default function ActionButtons(props) {
+  const { arMainButtons, arSecondaryButtons, onButtonPress } = props;
+  const classes = useStyles();
+
+  function _onButtonPress(sAction: string, sButtonType: string) {
+
+    onButtonPress(sAction, sButtonType);
+  }
+
+  return (
+    <React.Fragment>
+      <Divider className={classes.divider}/>
+      <Grid container spacing={4} justifyContent="space-between">
+        <Grid item>
+          <Grid container spacing={1}>
+          {arSecondaryButtons.map((sButton) => (
+                  <Grid item key={sButton.name}>
+                    <Button variant="contained" color="secondary" onClick={() => { _onButtonPress(sButton.jsAction, "secondary")}} >{sButton.name}</Button>
+                  </Grid>
+                ))}
+          </Grid>
+        </Grid>
+        <Grid item>
+          <Grid container spacing={1}>
+          {arMainButtons.map((mButton) => (
+                  <Grid item key={mButton.name}>
+                    <Button variant="contained" color="primary" onClick={() => { _onButtonPress(mButton.jsAction, "primary")}} >{mButton.name}</Button>
+                  </Grid>
+                ))}
+          </Grid>
+        </Grid>
+      </Grid>
+
+    </React.Fragment>
+
+  )
+}
+
+ActionButtons.propTypes = {
+  arMainButtons: PropTypes.array,
+  arSecondaryButtons: PropTypes.array,
+  onButtonPress: PropTypes.func
+  // buildName: PropTypes.string
+};
+
+ActionButtons.defaultProps = {
+  arMainButtons: [],
+  arSecondaryButtons: []
+  // buildName: null
+};

package/lib/infra/ActionButtons/index.tsx

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