@pega/react-sdk-overrides 0.23.26 → 0.23.28

package/lib/helpers/date-format-utils.ts

@@ -1,16 +1,17 @@
 import { getLocale } from './formatters/common';
 
-
 export const dateFormatInfoDefault = {
-  dateFormatString: "MM/DD/YYYY",
-  dateFormatStringLong: "MMM DD, YYYY",
-  dateFormatStringLC: "mm/dd/yyyy",
-  dateFormatMask: "__/__/____"
-}
+  dateFormatString: 'MM/DD/YYYY',
+  dateFormatStringLong: 'MMM DD, YYYY',
+  dateFormatStringLC: 'mm/dd/yyyy',
+  dateFormatMask: '__/__/____'
+};
 
-export const getDateFormatInfo = () => {
+export const getDateFormatInfo = (): typeof dateFormatInfoDefault => {
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'CosmosFields';
   const theDateFormatInfo = dateFormatInfoDefault;
-  const theLocale = getLocale(); // PCore.getEnvironmentInfo().getUseLocale() || "US-en";
+  const theLocale = getLocale();
 
   // NOTE: this date was chosen since it has a day larger than 12. If you change it,
   //  you'll need to change the indexOf values below!
@@ -25,29 +26,38 @@ export const getDateFormatInfo = () => {
   const locDD = theTestDateLocaleString.indexOf('30');
   const locYYYY = theTestDateLocaleString.indexOf('2023');
 
+  // If localized placeholder exists for one of day/month/year then show it otherwise fall back to ddmmyyyy
+  const localizedPlaceholderExists =
+    localizedVal('month_placeholder', localeCategory) !== 'month_placeholder' ||
+    localizedVal('day_placeholder', localeCategory) !== 'day_placeholder' ||
+    localizedVal('year_placeholder', localeCategory) !== 'year_placeholder';
+
   const arrPieces = [
     {
       loc: locMM,
       format: 'MM',
       longFormat: 'MMM',
-      placeholder: 'mm',
-      mask: '__'
+      placeholder: localizedPlaceholderExists ? localizedVal('month_placeholder', localeCategory) : 'mm',
+      mask: '__',
+      separator: theTestDateLocaleString[locMM + 2]
     },
     {
       loc: locDD,
       format: 'DD',
       longFormat: 'DD',
-      placeholder: 'dd',
-      mask: '__'
+      placeholder: localizedPlaceholderExists ? localizedVal('day_placeholder', localeCategory) : 'dd',
+      mask: '__',
+      separator: theTestDateLocaleString[locDD + 2]
     },
     {
       loc: locYYYY,
       format: 'YYYY',
       longFormat: 'YYYY',
-      placeholder: 'yyyy',
-      mask: '____'
+      placeholder: localizedPlaceholderExists ? localizedVal('year_placeholder', localeCategory) : 'yyyy',
+      mask: '____',
+      separator: theTestDateLocaleString[locYYYY + 4]
     }
-   ];
+  ];
 
   // Sort the associative array by order of appearance (loc) of each piece
   arrPieces.sort((a, b) => {
@@ -57,10 +67,10 @@ export const getDateFormatInfo = () => {
   });
 
   // Construct the structure to return...
-  theDateFormatInfo.dateFormatString = `${arrPieces[0].format}/${arrPieces[1].format}/${arrPieces[2].format}`;
+  theDateFormatInfo.dateFormatString = `${arrPieces[0].format}${arrPieces[0].separator}${arrPieces[1].format}${arrPieces[1].separator}${arrPieces[2].format}`;
   theDateFormatInfo.dateFormatStringLong = `${arrPieces[0].longFormat} ${arrPieces[1].longFormat}, ${arrPieces[2].longFormat}`;
-  theDateFormatInfo.dateFormatStringLC = `${arrPieces[0].placeholder}/${arrPieces[1].placeholder}/${arrPieces[2].placeholder}`;
-  theDateFormatInfo.dateFormatMask = `${arrPieces[0].mask}/${arrPieces[1].mask}/${arrPieces[2].mask}`;
+  theDateFormatInfo.dateFormatStringLC = `${arrPieces[0].placeholder}${arrPieces[0].separator}${arrPieces[1].placeholder}${arrPieces[1].separator}${arrPieces[2].placeholder}`;
+  theDateFormatInfo.dateFormatMask = `${arrPieces[0].mask}${arrPieces[0].separator}${arrPieces[1].mask}${arrPieces[1].separator}${arrPieces[2].mask}`;
 
   return theDateFormatInfo;
-}
+};

package/lib/helpers/{event-utils.js → event-utils.ts}

@@ -1,14 +1,14 @@
 // From DX Components src/utils/event-utils.js
 
-const handleEvent = (actions, eventType, propName, value) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
   switch (eventType) {
-    case "change":
+    case 'change':
       actions.updateFieldValue(propName, value);
       break;
-    case "blur":
+    case 'blur':
       actions.triggerFieldChange(propName, value);
       break;
-    case "changeNblur":
+    case 'changeNblur':
       actions.updateFieldValue(propName, value);
       actions.triggerFieldChange(propName, value);
       break;

package/lib/helpers/{field-group-utils.js → field-group-utils.ts}

@@ -1,4 +1,4 @@
-import { createElement } from 'react';
+import { createElement, ReactElement } from 'react';
 
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
 
@@ -28,17 +28,16 @@ export const getReferenceList = pConn => {
  * @param {*} viewConfigPath - boolean value to check for children in config
  * @returns {*} - return the react element of the view
  */
-export const buildView = (pConn, index, viewConfigPath) => {
+export function buildView(pConn, index, viewConfigPath): ReactElement {
   const context = pConn.getContextName();
   const referenceList = getReferenceList(pConn);
 
   const isDatapage = referenceList.startsWith('D_');
-  const pageReference = isDatapage
-    ? `${referenceList}[${index}]`
-    : `${pConn.getPageReference()}${referenceList}[${index}]`;
-  const meta = viewConfigPath
-    ? pConn.getRawMetadata().children[0].children[0]
-    : pConn.getRawMetadata().children[0];
+  const pageReference = isDatapage ? `${referenceList}[${index}]` : `${pConn.getPageReference()}${referenceList}[${index}]`;
+  const meta = viewConfigPath ? pConn.getRawMetadata().children[0].children[0] : pConn.getRawMetadata().children[0];
+
+  delete meta?.config?.ruleClass;
+
   const config = {
     meta,
     options: {
@@ -48,10 +47,10 @@ export const buildView = (pConn, index, viewConfigPath) => {
       hasForm: true
     }
   };
-  // eslint-disable-next-line no-undef
+
   const view = PCore.createPConnect(config);
   if (pConn.getConfigProps()?.displayMode === 'LABELS_LEFT') {
     view.getPConnect()?.setInheritedProp('displayMode', 'LABELS_LEFT');
   }
   return createElement(createPConnectComponent(), view);
-};
+}

package/lib/helpers/formatters/Boolean.ts

@@ -0,0 +1,21 @@
+function Boolean(value, { allowEmpty = true, tick = '', cross = '' } = {}) {
+  if ((!allowEmpty && !value) || value === false || value?.toString()?.toLowerCase() === 'false' || value === 0 || value === '0') {
+    return cross || '';
+  }
+  if (value === true || value?.toString()?.toLowerCase() === 'true' || value === 1 || value === '1') {
+    return tick || '';
+  }
+  if (allowEmpty && (value === 'null' || value === '' || value === null || typeof value === 'undefined')) {
+    return '- -';
+  }
+  return value;
+}
+
+export default {
+  TrueFalse: (value, options) =>
+    Boolean(value, {
+      ...options,
+      tick: options.trueLabel || 'True',
+      cross: options.falseLabel || 'False'
+    })
+};

package/lib/helpers/formatters/{Currency.js → Currency.ts}

@@ -1,8 +1,9 @@
-import { getLocale } from "./common";
-import CurrencyMap from "./CurrencyMap";
+import { getLocale } from './common';
+import CurrencyMap from './CurrencyMap';
 
-function NumberFormatter(value, { locale, decPlaces = 2 } = {}) {
-  const currentLocale = getLocale(locale);
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function NumberFormatter(value, { locale = 'en-US', decPlaces = 2, style = '', currency = 'USD' } = {}): string {
+  const currentLocale: string | undefined = getLocale(locale);
   if (value !== null && value !== undefined) {
     return Number(value).toLocaleString(currentLocale, {
       minimumFractionDigits: decPlaces,
@@ -13,11 +14,11 @@ function NumberFormatter(value, { locale, decPlaces = 2 } = {}) {
 }
 
 function CurrencyFormatter(
-  value,
-  { symbol = true, position, locale, decPlaces = 2, style = "currency", currency = "USD" } = {}
-) {
-  const currentLocale = getLocale(locale);
-  let formattedValue = value;
+  value: string,
+  { symbol = true, position = 'before', locale = 'en-US', decPlaces = 2, style = 'currency', currency = 'USD' } = {}
+): string {
+  const currentLocale: string | undefined = getLocale(locale);
+  let formattedValue: string = value;
   if (value !== null && value !== undefined && value !== '') {
     formattedValue = NumberFormatter(value, {
       locale: currentLocale,
@@ -26,14 +27,14 @@ function CurrencyFormatter(
       currency
     });
 
-    let countryCode =  currentLocale.split("-")[1].toUpperCase();
+    let countryCode: string | undefined = currentLocale?.split('-')[1].toUpperCase();
 
     // If countryCode is still undefined, setting it as US
-    if( !countryCode ){
+    if (!countryCode) {
       countryCode = 'US';
     }
 
-    let code;
+    let code: string;
     if (symbol) {
       code = CurrencyMap[countryCode]?.symbolFormat;
     } else {
@@ -42,22 +43,19 @@ function CurrencyFormatter(
 
     // if position is provided, change placeholder accordingly.
     if (position && code) {
-      if (position.toLowerCase() === "before" && code.indexOf("{#}") === 0) {
+      if (position.toLowerCase() === 'before' && code.startsWith('{#}')) {
         code = code.slice(3) + code.slice(0, 3);
-      } else if (
-        position.toLowerCase() === "after" &&
-        code.indexOf("{#}") === code.length - 3
-      ) {
+      } else if (position.toLowerCase() === 'after' && code.indexOf('{#}') === code.length - 3) {
         code = code.slice(-3) + code.slice(0, -3);
       }
     }
-    return code?.replace("{#}", formattedValue) || formattedValue;
+    return code?.replace('{#}', formattedValue) || formattedValue;
   }
   return formattedValue;
 }
 
-function SymbolFormatter(value, { symbol, suffix = true, locale } = {}) {
-  let formattedValue = value;
+function SymbolFormatter(value, { symbol = '$', suffix = true, locale = 'en-US' } = {}): string {
+  let formattedValue: string = value;
   if (value !== null && value !== undefined) {
     formattedValue = NumberFormatter(value, { locale });
     return suffix ? `${formattedValue}${symbol}` : `${symbol}${formattedValue}`;
@@ -67,16 +65,13 @@ function SymbolFormatter(value, { symbol, suffix = true, locale } = {}) {
 
 export default {
   Currency: (value, options) => CurrencyFormatter(value, options),
-  "Currency-Code": (value, options) =>
-    CurrencyFormatter(value, { ...options, symbol: false }),
+  'Currency-Code': (value, options) => CurrencyFormatter(value, { ...options, symbol: false }),
   Decimal: (value, options) => NumberFormatter(value, options),
-  "Decimal-Auto": (value, options) =>
+  'Decimal-Auto': (value, options) =>
     NumberFormatter(value, {
       ...options,
       decPlaces: Number.isInteger(value) ? 0 : 2
     }),
-  Integer: (value, options) =>
-    NumberFormatter(value, { ...options, decPlaces: 0 }),
-  Percentage: (value, options) =>
-    SymbolFormatter(value, { ...options, symbol: "%" })
+  Integer: (value, options) => NumberFormatter(value, { ...options, decPlaces: 0 }),
+  Percentage: (value, options) => SymbolFormatter(value, { ...options, symbol: '%' })
 };