@pega/sdk 0.0.1

package/templates/react-sdk-reference/src/components/helpers/formatters/Date.ts

@@ -0,0 +1,71 @@
+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: string, { type = types[1], format = 'DD/MM/YYYY', timezone = 'America/New_York' } = {}) {
+  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/templates/react-sdk-reference/src/components/helpers/formatters/common.ts

@@ -0,0 +1,14 @@
+export function getLocale(locale: string = '') {
+  // use locale if specified
+  if (locale) return locale;
+  // otherwise, use operator locale if it's defined
+  if (PCore.getEnvironmentInfo().getLocale()) return PCore.getEnvironmentInfo().getLocale();
+  // fallback
+  return Intl.DateTimeFormat().resolvedOptions().locale;
+}
+
+export function getCurrentTimezone(timezone?: string) {
+  // use timezone if specified
+  if (timezone) return timezone;
+  return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
+}

package/templates/react-sdk-reference/src/components/helpers/formatters/index.ts

@@ -0,0 +1,130 @@
+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): Date {
+  // 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();
+  // Fix to handle all the dates, raised via https://github.com/pegasystems/react-sdk-components/issues/442
+  date.setFullYear(year, month, day);
+
+  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 = /^[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 = {}): string {
+  let formattedValue: string;
+
+  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 'percentage': {
+      const defaultOptions = { locale: getLocale(), decPlaces: 2 };
+      const params = { ...defaultOptions, ...options };
+      formattedValue = Currency.Percentage(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, ...options });
+      break;
+    }
+
+    case 'userreference': {
+      formattedValue = value.userName;
+      break;
+    }
+
+    default:
+      formattedValue = value;
+  }
+  return formattedValue;
+}

package/templates/react-sdk-reference/src/components/helpers/instructions-utils.ts

@@ -0,0 +1,38 @@
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  const referencePropParent = referenceProp?.split('.').pop();
+  return parentPropName === referencePropParent;
+};
+
+const updateNewInstuctions = (c11nEnv, selectionList) => {
+  const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(selectionList) || {};
+  const compositeKeys: any = [];
+  Object.values(parameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, selectionList)) compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+  });
+  c11nEnv.getListActions().initDefaultPageInstructions(selectionList, compositeKeys);
+};
+
+const insertInstruction = (c11nEnv, selectionList, selectionKey, primaryField, item) => {
+  const { id, primary } = item;
+  const actualProperty = selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey;
+  const displayProperty = primaryField.startsWith('.') ? primaryField.substring(1) : primaryField;
+  const rows = c11nEnv.getValue(`${c11nEnv.getPageReference()}${selectionList}`) || [];
+  const startIndex = rows.length;
+  const content = {
+    [actualProperty]: id,
+    [displayProperty]: primary,
+    nonFormProperties: actualProperty !== displayProperty ? [displayProperty] : []
+  };
+  c11nEnv.getListActions().insert(content, startIndex);
+};
+
+const deleteInstruction = (c11nEnv, selectionList, selectionKey, item) => {
+  const { id } = item;
+  const actualProperty = selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey;
+  const rows = c11nEnv.getValue(`${c11nEnv.getPageReference()}${selectionList}`) || [];
+  const index = rows.findIndex(row => row[actualProperty] === id);
+  c11nEnv.getListActions().deleteEntry(index);
+};
+
+export { updateNewInstuctions, insertInstruction, deleteInstruction };

package/templates/react-sdk-reference/src/components/helpers/object-utils.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the value of the key from objectInfo/caseInfo
+ * Added fallback to retrieve from caseInfo if objectInfo not present.
+ * @param pConnect
+ * @param key
+ * @returns the value of key
+ */
+export const getResolvedConstantValue = (pConnect: typeof PConnect, key: string) => {
+  return pConnect.getValue(PCore.getResolvedConstantValue(key)) || pConnect.getValue(key);
+};

package/templates/react-sdk-reference/src/components/helpers/reactContextHelpers.ts

@@ -0,0 +1,3 @@
+// This file re-exports NavContext and useNavBar from @pega/sdk-react
+// for backward compatibility with existing consumers in this sample app.
+export { NavContext, useNavBar } from '@pega/sdk-react';