@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/field/Currency/Currency.tsx

@@ -1,12 +1,14 @@
-import React, { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
-import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// Using control from: https://github.com/unicef/material-ui-currency-textfield
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 
 interface CurrrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Currency here
@@ -31,45 +33,26 @@ export default function Currency(props: CurrrencyProps) {
     helperText,
     displayMode,
     hideLabel,
-    currencyISOCode = 'USD'
+    currencyISOCode = 'USD',
+    placeholder
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps()["value"];
+  const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
   // console.log(`Currency: label: ${label} value: ${value}`);
 
-  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
-
-  if (readOnly) {
-    readOnlyProp = { readOnly: true };
-  }
-
-  let testProp = {};
-
-  testProp = {
+  const testProp = {
     'data-test-id': testId
   };
 
-  const [currValue, setCurrValue] = useState('');
-  const [theCurrSym, setCurrSym] = useState('$');
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrSym(theSymbols.theCurrencySymbol);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
-
-  useEffect(() => {
-    // const testVal = value;
-    setCurrValue(value.toString());
-  }, [value]);
+  // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrSym = theSymbols.theCurrencySymbol;
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
@@ -79,15 +62,7 @@ export default function Currency(props: CurrrencyProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant="stacked" />;
-  }
-
-  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-  function currOnChange(event, inValue) {
-    // console.log(`Currency currOnChange inValue: ${inValue}`);
-
-    // update internal value
-    setCurrValue(event?.target?.value);
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
   function currOnBlur(event, inValue) {
@@ -102,22 +77,22 @@ export default function Currency(props: CurrrencyProps) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
+      placeholder={placeholder ?? ''}
+      size='small'
       required={required}
       disabled={disabled}
-      onChange={currOnChange}
-      onBlur={!readOnly ? currOnBlur : undefined}
+      readOnly={!!readOnly}
       error={status === 'error'}
       label={label}
-      value={currValue}
-      type="text"
-      outputFormat="number"
-      textAlign="left"
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}
+      value={value}
+      type='text'
+      outputFormat='number'
+      textAlign='left'
+      InputProps={{ inputProps: { ...testProp } }}
       currencySymbol={theCurrSym}
       decimalCharacter={theCurrDec}
       digitGroupSeparator={theCurrSep}
+      onBlur={!readOnly ? currOnBlur : undefined}
     />
   );
 }

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

@@ -4,7 +4,6 @@
   "description": "Currency",
   "type": "Field",
   "subtype": "Decimal-Currency",
-  "componentKey" : "Currency",
-  "properties": [
-  ]
+  "componentKey": "Currency",
+  "properties": []
 }

package/lib/field/Currency/currency-utils.ts

@@ -1,11 +1,9 @@
 // eslint-disable-next-line import/no-named-default
-import { default as CurrencyAlias} from '@pega/react-sdk-components/lib/components/helpers/formatters/Currency';
+import { default as CurrencyAlias } from '@pega/react-sdk-components/lib/components/helpers/formatters/Currency';
 // eslint-disable-next-line import/no-named-default
 import { default as CurrencyMapAlias } from '@pega/react-sdk-components/lib/components/helpers/formatters/CurrencyMap';
 
-
 export const getCurrencyOptions = (inISOCode: string) => {
-
   const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || PCore.getEnvironmentInfo().getLocale() || 'en-US';
 
   let currMapToUse = CurrencyMapAlias.US;
@@ -15,12 +13,12 @@ export const getCurrencyOptions = (inISOCode: string) => {
   //  If no ISO code, use locale
   //  If no locale, default to US
   if (inISOCode) {
-    if (inISOCode === "EUR") {
+    if (inISOCode === 'EUR') {
       currMapToUse = CurrencyMapAlias.NL;
-      localeToUse = "nl-NL";
+      localeToUse = 'nl-NL';
     } else {
       // For all other ISO codes, use first 2 characters as the lookup from CurrencyMap
-      const countryCode = inISOCode.substring(0,2);
+      const countryCode = inISOCode.substring(0, 2);
       currMapToUse = CurrencyMapAlias[countryCode];
     }
   } else if (operatorLocale) {
@@ -34,23 +32,19 @@ export const getCurrencyOptions = (inISOCode: string) => {
 
   // If no currMapToUse at this point, default to US as a failsafe
   if (!currMapToUse) {
-    currMapToUse = CurrencyMapAlias['US'];
+    currMapToUse = CurrencyMapAlias.US;
   }
 
   const theCode = currMapToUse.currencyCode.substring(0, 3);
-  const currencyOptions = { locale: localeToUse, style: "currency", currency: theCode }
-
-  return currencyOptions;
-
-}
-
+  return { locale: localeToUse, style: 'currency', currency: theCode };
+};
 
 export const getCurrencyCharacters = (inISOCode: string) => {
   const theCurrencyChars = {
     theCurrencySymbol: '$',
     theDecimalIndicator: '.',
     theDigitGroupSeparator: ','
-  }
+  };
 
   const theCurrencyOptions = getCurrencyOptions(inISOCode);
 
@@ -71,5 +65,4 @@ export const getCurrencyCharacters = (inISOCode: string) => {
   // console.log(`theCurrencyChars: symbol: ${theCurrencyChars.theCurrencySymbol} | theDigitGroupSeparator: ${theCurrencyChars.theDigitGroupSeparator} | theDecimalIndicator: ${theCurrencyChars.theDecimalIndicator}`);
 
   return theCurrencyChars;
-
-}
+};

package/lib/field/Date/Date.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { KeyboardDatePicker } from '@material-ui/pickers';
+
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 // Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server
 function getFormattedDate(date) {
@@ -39,7 +39,7 @@ export default function Date(props: DateProps) {
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps()["value"];
+  const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
   // Start with default dateFormatInfo
@@ -51,13 +51,17 @@ export default function Date(props: DateProps) {
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
   if (displayMode === 'LABELS_LEFT') {
-    const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });
+    const formattedDate = format(props.value, 'date', {
+      format: dateFormatInfo.dateFormatString
+    });
     return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant="stacked" />;
+    const formattedDate = format(props.value, 'date', {
+      format: dateFormatInfo.dateFormatString
+    });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -71,13 +75,13 @@ export default function Date(props: DateProps) {
     'data-test-id': testId
   };
 
-  const handleChange = (date) => {
+  const handleChange = date => {
     if (date && date.isValid()) {
       onChange({ value: getFormattedDate(date) });
     }
   };
 
-  const handleAccept = (date) => {
+  const handleAccept = date => {
     if (date && date.isValid()) {
       handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
     }
@@ -86,8 +90,8 @@ export default function Date(props: DateProps) {
   return (
     <KeyboardDatePicker
       disableToolbar
-      variant="inline"
-      inputVariant="outlined"
+      variant='inline'
+      inputVariant='outlined'
       placeholder={dateFormatInfo.dateFormatStringLC}
       format={dateFormatInfo.dateFormatString}
       mask={dateFormatInfo.dateFormatMask}
@@ -97,7 +101,7 @@ export default function Date(props: DateProps) {
       disabled={disabled}
       error={status === 'error'}
       helperText={helperTextToDisplay}
-      size="small"
+      size='small'
       label={label}
       value={value || null}
       onChange={handleChange}

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

@@ -4,7 +4,6 @@
   "description": "Date only",
   "type": "Field",
   "subtype": "Date",
-  "componentKey" : "Date",
-  "properties": [
-  ]
+  "componentKey": "Date",
+  "properties": []
 }

package/lib/field/DateTime/DateTime.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { KeyboardDateTimePicker } from '@material-ui/pickers';
+
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -33,7 +33,7 @@ export default function DateTime(props: DateTimeProps) {
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps()["value"];
+  const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
   // Start with default dateFormatInfo
@@ -55,7 +55,7 @@ export default function DateTime(props: DateTimeProps) {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
     });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -63,12 +63,12 @@ export default function DateTime(props: DateTimeProps) {
     return <TextInput {...props} value={formattedDateTime} />;
   }
 
-  const handleChange = (date) => {
+  const handleChange = date => {
     const changeValue = date && date.isValid() ? date.toISOString() : null;
     onChange({ value: changeValue });
   };
 
-  const handleAccept = (date) => {
+  const handleAccept = date => {
     const changeValue = date && date.isValid() ? date.toISOString() : null;
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
@@ -80,8 +80,8 @@ export default function DateTime(props: DateTimeProps) {
 
   return (
     <KeyboardDateTimePicker
-      variant="inline"
-      inputVariant="outlined"
+      variant='inline'
+      inputVariant='outlined'
       fullWidth
       autoOk
       required={required}
@@ -92,7 +92,7 @@ export default function DateTime(props: DateTimeProps) {
       minutesStep={5}
       error={status === 'error'}
       helperText={helperTextToDisplay}
-      size="small"
+      size='small'
       label={label}
       value={value || null}
       onChange={handleChange}

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

@@ -4,6 +4,5 @@
   "description": "Date & time",
   "type": "Field",
   "subtype": "DateTime",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/Decimal/Decimal.tsx

@@ -1,18 +1,21 @@
-import React, { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
+
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-// Using control from: https://github.com/unicef/material-ui-currency-textfield
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 
 interface DecimalProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Decimal here
   currencyISOCode?: string;
   decimalPrecision?: number;
   showGroupSeparators?: string;
+  formatter?: string;
 }
 
 export default function Decimal(props: DecimalProps) {
@@ -35,56 +38,42 @@ export default function Decimal(props: DecimalProps) {
     currencyISOCode = 'USD',
     decimalPrecision = 2,
     showGroupSeparators = true,
-    testId
+    testId,
+    placeholder,
+    formatter
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
-  const propName = pConn.getStateProps()["value"];
+  const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
-  const [decValue, setDecimalvalue] = useState('');
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
-
-  useEffect(() => {
-    setDecimalvalue(value.toString());
-  }, [value]);
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+  const theCurrSym = theSymbols.theCurrencySymbol;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
+  let formattedValue = '';
+  if (formatter === 'Currency') {
+    formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
+  } else {
+    formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  }
 
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
-
-  if (readOnly) {
-    readOnlyProp = { readOnly: true };
-  }
-
-  let testProp = {};
-
-  testProp = {
+  const testProp = {
     'data-test-id': testId
   };
 
-  function decimalOnChange(event) {
-    // update internal value
-    setDecimalvalue(event?.target?.value);
-  }
-
   function decimalOnBlur(event, inValue) {
     handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
   }
@@ -94,23 +83,23 @@ export default function Decimal(props: DecimalProps) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
+      placeholder={placeholder ?? ''}
+      size='small'
       required={required}
       disabled={disabled}
-      onChange={decimalOnChange}
-      onBlur={!readOnly ? decimalOnBlur : undefined}
       error={status === 'error'}
       label={label}
-      value={decValue}
-      type="text"
-      outputFormat="number"
-      textAlign="left"
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: decValue } }}
-      currencySymbol=""
+      value={value}
+      readOnly={!!readOnly}
+      type='text'
+      outputFormat='number'
+      textAlign='left'
+      InputProps={{ inputProps: { ...testProp } }}
+      currencySymbol={readOnly && formatter === 'Currency' ? theCurrSym : ''}
       decimalCharacter={theCurrDec}
       digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalPlaces={decimalPrecision}
+      onBlur={!readOnly ? decimalOnBlur : undefined}
     />
   );
 }

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

@@ -4,6 +4,5 @@
   "description": "Decimal",
   "type": "Field",
   "subtype": "Decimal",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/Decimal/index.tsx

@@ -1 +1 @@
-export { default } from './Decimal';
+export { default } from './Decimal';