@pega/react-sdk-overrides 0.23.33 → 0.23.35

package/lib/field/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel } from '@material-ui/core';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
@@ -20,6 +20,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
 
   const {
     getPConnect,
+    label,
     value = false,
     readOnly,
     testId,
@@ -73,6 +74,7 @@ export default function CheckboxComponent(props: CheckboxProps) {
 
   return (
     <FormControl required={required} error={status === 'error'}>
+      {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
       <FormGroup>
         <FormControlLabel
           control={theCheckbox}

package/lib/field/Currency/Currency.tsx

@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 
-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 { 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';
 
-// 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
@@ -48,17 +48,11 @@ export default function Currency(props: CurrrencyProps) {
     'data-test-id': testId
   };
 
-  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]);
+  // 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);

package/lib/field/Decimal/Decimal.tsx

@@ -1,4 +1,3 @@
-import { 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';
@@ -7,7 +6,9 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 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
@@ -45,14 +46,9 @@ export default function Decimal(props: DecimalProps) {
   const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
-  const [theCurrDec, setCurrDec] = useState('.');
-  const [theCurrSep, setCurrSep] = useState(',');
-
-  useEffect(() => {
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    setCurrDec(theSymbols.theDecimalIndicator);
-    setCurrSep(theSymbols.theDigitGroupSeparator);
-  }, [currencyISOCode]);
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);

package/lib/field/Group/Group.tsx

@@ -29,6 +29,8 @@ export default function Group(props: GroupProps) {
     );
   }, [children, type, isReadOnly]);
 
+  if (!children) return null;
+
   return (
     <FieldGroup name={showHeading ? heading : undefined} collapsible={collapsible} instructions={instructions}>
       {content}

package/lib/field/Percentage/Percentage.tsx

@@ -1,67 +1,58 @@
-import { TextField } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+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 { 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';
 
-// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
-const useStyles = makeStyles((/* theme */) => ({
-  input: {
-    '& input[type=number]': {
-      '-moz-appearance': 'textfield'
-    },
-    '& input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    '& input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    }
-  }
-}));
-
+/* Using @unicef/material-ui-currency-textfield component here, since it allows formatting decimal values,
+as per the locale.
+*/
 interface PercentageProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Percentage here
+  currencyISOCode?: string;
 }
 
 export default function Percentage(props: PercentageProps) {
   // Get emitted components from map (so we can get any override that may exist)
-  const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const classes = useStyles();
-
   const {
+    getPConnect,
     label,
     required,
     disabled,
     value = '',
     validatemessage,
     status,
-    onChange,
-    onBlur,
+    // onChange,
+    // onBlur,
     readOnly,
+    currencyISOCode = 'USD',
     testId,
     helperText,
     displayMode,
     hideLabel,
     placeholder
   } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
   const helperTextToDisplay = validatemessage || helperText;
 
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
   // console.log(`Percentage: label: ${label} value: ${value}`);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
-  }
-
-  if (readOnly) {
-    return <TextInput {...props} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
   let testProp = {};
@@ -70,9 +61,16 @@ export default function Percentage(props: PercentageProps) {
     'data-test-id': testId
   };
 
+  const theSymbols = getCurrencyCharacters(currencyISOCode);
+  const theCurrDec = theSymbols.theDecimalIndicator;
+  const theCurrSep = theSymbols.theDigitGroupSeparator;
+
+  function PercentageOnBlur(event, inValue) {
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
+
   return (
-    <TextField
-      className={classes.input}
+    <CurrencyTextField
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
@@ -80,13 +78,20 @@ export default function Percentage(props: PercentageProps) {
       size='small'
       required={required}
       disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
+      readOnly={!!readOnly}
       error={status === 'error'}
       label={label}
       value={value}
-      type='number'
-      inputProps={{ ...testProp }}
+      type='text'
+      outputFormat='number'
+      textAlign='left'
+      InputProps={{
+        inputProps: { ...testProp }
+      }}
+      currencySymbol=''
+      decimalCharacter={theCurrDec}
+      digitGroupSeparator={theCurrSep}
+      onBlur={!readOnly ? PercentageOnBlur : undefined}
     />
   );
 }

package/lib/helpers/formatters/index.ts

@@ -80,6 +80,13 @@ export function format(value, type, options = {}): string {
       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 };

package/lib/infra/Containers/FlowContainer/FlowContainer.tsx

@@ -304,11 +304,11 @@ export const FlowContainer = (props: FlowContainerProps) => {
       {!bShowConfirm &&
         (!todo_showTodo ? (
           !displayOnlyFA ? (
-            <Card className={classes.root}>
+            <Card className={`${classes.root} psdk-root`}>
               <CardHeader
                 title={<Typography variant='h6'>{containerName}</Typography>}
                 subheader={`Task in ${caseId} \u2022 Priority ${urgency}`}
-                avatar={<Avatar className={classes.avatar}>{operatorInitials}</Avatar>}
+                avatar={<Avatar className={`${classes.avatar} psdk-avatar`}>{operatorInitials}</Avatar>}
               />
               {displayPageMessages()}
               <MuiPickersUtilsProvider utils={DayjsUtils}>
@@ -318,7 +318,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
               </MuiPickersUtilsProvider>
             </Card>
           ) : (
-            <Card className={classes.root}>
+            <Card className={`${classes.root} psdk-root`}>
               <Typography variant='h6'>{containerName}</Typography>
               {displayPageMessages()}
               <MuiPickersUtilsProvider utils={DayjsUtils}>
@@ -345,7 +345,7 @@ export const FlowContainer = (props: FlowContainerProps) => {
           </div>
         ))}
       {bHasCaseMessages && (
-        <div className={classes.alert}>
+        <div className={`${classes.alert} psdk-alert`}>
           <Alert severity='success'>{caseMessages}</Alert>
         </div>
       )}

package/lib/infra/Containers/ModalViewContainer/ModalViewContainer.tsx

@@ -310,10 +310,10 @@ export default function ModalViewContainer(props: ModalViewContainerProps) {
   return (
     <>
       <Dialog open={bShowModal} aria-labelledby='form-dialog-title'>
-        <DialogTitle id='form-dialog-title' className={classes.dlgTitle}>
+        <DialogTitle id='form-dialog-title' className={`${classes.dlgTitle} psdk-dialog-title`}>
           {title}
         </DialogTitle>
-        <DialogContent className={classes.dlgContent}>
+        <DialogContent className={`${classes.dlgContent} psdk-dialog-content`}>
           {bShowModal ? (
             <MuiPickersUtilsProvider utils={DayjsUtils}>
               <Assignment

package/lib/template/ListView/ListView.tsx

@@ -154,7 +154,8 @@ export default function ListView(props: ListViewProps) {
       paper: {
         width: '100%',
         marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2)
+        marginBottom: theme.spacing(2),
+        display: 'grid'
       },
       search: {
         padding: '5px 5px'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.33",
+  "version": "0.23.35",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [