@pega/dx-component-builder-sdk 23.1.13 → 23.1.15

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyBoolean/index.tsx

@@ -1,20 +1,36 @@
+/* eslint-disable react/no-array-index-key */
 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';
+import { insertInstruction, deleteInstruction, updateNewInstuctions } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { makeStyles } from '@material-ui/core/styles';
 import StyledPegaDxilMyBooleanWrapper from './styles';
 
 interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on this componentName
   value?: boolean;
-  // eslint-disable-next-line react/no-unused-prop-types
   caption?: string;
   trueLabel?: string;
   falseLabel?: string;
+  selectionMode?: string;
+  datasource?: any;
+  selectionKey?: string;
+  selectionList?: any;
+  primaryField: string;
+  readonlyContextList: any;
+  referenceList: string;
 }
 
+const useStyles = makeStyles(() => ({
+  checkbox: {
+    display: 'flex',
+    flexDirection: 'column'
+  }
+}));
+
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -24,7 +40,9 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
 
   const {
     getPConnect,
-    value = false,
+    label,
+    caption,
+    value,
     readOnly,
     testId,
     required,
@@ -35,22 +53,34 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     displayMode,
     hideLabel,
     trueLabel,
-    falseLabel
+    falseLabel,
+    selectionMode,
+    datasource,
+    selectionKey,
+    selectionList,
+    primaryField,
+    referenceList,
+    readonlyContextList: selectedvalues
   } = props;
+  const classes = useStyles();
   const helperTextToDisplay = validatemessage || helperText;
-
   const thePConn = getPConnect();
-  const theConfigProps = thePConn.getConfigProps() as PegaDxilMyBooleanProps;
-  const caption = theConfigProps.caption;
   const actionsApi = thePConn.getActionsApi();
   const propName = (thePConn.getStateProps() as any).value;
 
-  const [checked, setChecked] = useState(false);
+  const [checked, setChecked] = useState<any>(false);
   useEffect(() => {
     // This update theSelectedButton which will update the UI to show the selected button correctly
     setChecked(value);
   }, [value]);
 
+  useEffect(() => {
+    if (referenceList?.length > 0) {
+      thePConn.setReferenceList(selectionList);
+      updateNewInstuctions(thePConn, selectionList);
+    }
+  }, [thePConn]);
+
   if (displayMode === 'LABELS_LEFT') {
     return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
@@ -67,31 +97,80 @@ export default function PegaDxilMyBoolean(props: PegaDxilMyBooleanProps) {
     thePConn.getValidationApi().validate(event.target.checked);
   };
 
-  let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
+  const handleChangeMultiMode = (event, element) => {
+    if (event.target.checked) {
+      insertInstruction(thePConn, selectionList, selectionKey, primaryField, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    } else {
+      deleteInstruction(thePConn, selectionList, selectionKey, {
+        id: element.key,
+        primary: element.text ?? element.value
+      });
+    }
+    thePConn.clearErrorMessages({
+      property: selectionList,
+      category: '',
+      context: ''
+    });
+  };
 
-  if (readOnly) {
-    // Workaround for lack of InputProps readOnly from https://github.com/mui-org/material-ui/issues/17043
-    //  Also note that we need to turn off the onChange call in the FormControlLabel wrapper, too. See below!
-    theCheckbox = <Checkbox value={value || false} readOnly={readOnly} />;
+  let theCheckbox;
+  const listOfCheckboxes: any = [];
+  if (selectionMode === 'multi') {
+    const listSourceItems = datasource?.source ?? [];
+    const dataField: any = selectionKey?.split?.('.')[1];
+    listSourceItems.forEach((element, index) => {
+      listOfCheckboxes.push(
+        <FormControlLabel
+          control={
+            <Checkbox
+              key={index}
+              checked={selectedvalues?.some?.(data => data[dataField] === element.key)}
+              onChange={event => handleChangeMultiMode(event, element)}
+              onBlur={() => {
+                thePConn.getValidationApi().validate(selectedvalues, selectionList);
+              }}
+              data-testid={`${testId}:${element.value}`}
+            />
+          }
+          key={index}
+          label={element.text ?? element.value}
+          labelPlacement='end'
+          data-test-id={testId}
+        />
+      );
+    });
+    theCheckbox = <div className={classes.checkbox}>{listOfCheckboxes}</div>;
+  } else {
+    theCheckbox = (
+      <FormControlLabel
+        control={
+          <Checkbox
+            color='primary'
+            checked={checked}
+            onChange={!readOnly ? handleChange : undefined}
+            onBlur={!readOnly ? handleBlur : undefined}
+            value={value}
+            disabled={disabled}
+            readOnly={readOnly}
+          />
+        }
+        label={caption}
+        labelPlacement='end'
+        data-test-id={testId}
+      />
+    );
   }
 
   return (
     <StyledPegaDxilMyBooleanWrapper>
       <FormControl required={required} error={status === 'error'}>
-        <FormGroup>
-          <FormControlLabel
-            control={theCheckbox}
-            checked={checked}
-            onChange={!readOnly ? handleChange : undefined}
-            onBlur={!readOnly ? handleBlur : undefined}
-            label={caption}
-            labelPlacement='end'
-            data-test-id={testId}
-          />
-        </FormGroup>
+        {!hideLabel && <FormLabel component='legend'>{label}</FormLabel>}
+        <FormGroup>{theCheckbox}</FormGroup>
         <FormHelperText>{helperTextToDisplay}</FormHelperText>
       </FormControl>
     </StyledPegaDxilMyBooleanWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyCurrency/index.tsx

@@ -1,15 +1,15 @@
-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 '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
 import StyledPegaDxilMyCurrencyWrapper from './styles';
 
-// 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 PegaDxilMyCurrencyProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
@@ -52,17 +52,11 @@ export default function PegaDxilMyCurrency(props: PegaDxilMyCurrencyProps) {
     '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/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDateTime/demo.stories.tsx

@@ -15,7 +15,14 @@ window.PCore = {
         return 'en-GB';
       }
     };
-  }
+  },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
+  },
 };
 
 const meta: Meta<typeof PegaDxilMyDateTime> = {

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/config.json

@@ -50,6 +50,161 @@
         }
       ]
     },
+    {
+      "label": "Read-only settings",
+      "format": "GROUP",
+      "properties": [
+        {
+          "format": "SELECT",
+          "name": "formatter",
+          "label": "Format",
+          "defaultValue": "defaultDecimal",
+          "source": [
+            {
+              "key": "defaultDecimal",
+              "value": "Default"
+            },
+            {
+              "key": "Integer",
+              "value": "Integer"
+            },
+            {
+              "key": "Currency",
+              "value": "Currency"
+            },
+            {
+              "key": "Percentage",
+              "value": "Percentage"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "format": "CASCADE",
+      "visibility": "(formatter = Currency)",
+      "source": {
+        "format": "SELECT",
+        "label": "ISO Code Selection",
+        "name": "isoCodeSelection",
+        "defaultValue": "constant",
+        "source": [
+          {
+            "key": "constant",
+            "value": "Constant"
+          },
+          {
+            "key": "propertyRef",
+            "value": "Property Reference"
+          }
+        ]
+      },
+      "cascadeElements": [
+        {
+          "key": "currencyISOCode",
+          "format": "TEXT",
+          "name": "currencyISOCode",
+          "label": "Currency ISO Code",
+          "defaultValue": "USD",
+          "match": "constant"
+        },
+        {
+          "key": "currencyISOCode",
+          "format": "PROPERTY",
+          "name": "currencyISOCode",
+          "label": "Currency ISO Code",
+          "match": "propertyRef"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "currencyDisplay",
+      "label": "Currency display",
+      "visibility": "(formatter = Currency)",
+      "defaultValue": "symbol",
+      "source": [
+        {
+          "key": "symbol",
+          "value": "Auto"
+        },
+        {
+          "key": "code",
+          "value": "Code"
+        },
+        {
+          "key": "name",
+          "value": "Name"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "negative",
+      "label": "Negative number display",
+      "visibility": "(formatter = Currency)",
+      "defaultValue": "minus-sign",
+      "source": [
+        {
+          "key": "minus-sign",
+          "value": "Standard"
+        },
+        {
+          "key": "parentheses",
+          "value": "Accounting"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "notation",
+      "label": "Notation",
+      "visibility": "(!negative = parentheses)&&(!formatter = Percentage)",
+      "defaultValue": "standard",
+      "source": [
+        {
+          "key": "standard",
+          "value": "Standard"
+        },
+        {
+          "key": "compact",
+          "value": "Compact"
+        }
+      ]
+    },
+    {
+      "format": "SELECT",
+      "name": "currencyDecimalPrecision",
+      "label": "Decimal places shown",
+      "visibility": "(formatter = Currency)",
+      "defaultValue": "auto",
+      "source": [
+        {
+          "key": "auto",
+          "value": "Auto"
+        },
+        {
+          "key": "0",
+          "value": "None"
+        },
+        {
+          "key": "1",
+          "value": "1"
+        },
+        {
+          "key": "2",
+          "value": "2"
+        },
+        {
+          "key": "3",
+          "value": "3"
+        },
+        {
+          "key": "4",
+          "value": "4"
+        }
+      ]
+    },
     {
       "label": "Conditions",
       "format": "GROUP",

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyDecimal/index.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.js';
@@ -15,6 +14,7 @@ interface PegaDxilMyDecimalProps extends PConnFieldProps {
   currencyISOCode?: string;
   decimalPrecision?: number;
   showGroupSeparators?: string;
+  formatter?: string;
 }
 
 // Duplicated runtime code from React SDK
@@ -41,7 +41,8 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
     decimalPrecision = 2,
     showGroupSeparators = true,
     testId,
-    placeholder
+    placeholder,
+    formatter
   } = props;
 
   const pConn = getPConnect();
@@ -49,17 +50,19 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
   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 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} />;
@@ -95,7 +98,7 @@ export default function PegaDxilMyDecimal(props: PegaDxilMyDecimalProps) {
       outputFormat='number'
       textAlign='left'
       InputProps={{ inputProps: { ...testProp } }}
-      currencySymbol=''
+      currencySymbol={readOnly && formatter === 'Currency' ? theCurrSym : ''}
       decimalCharacter={theCurrDec}
       digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalPlaces={decimalPrecision}

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/demo.stories.tsx

@@ -10,6 +10,20 @@ const meta: Meta<typeof PegaDxilMyPercentage> = {
   excludeStories: /.*Data$/
 };
 
+window.PCore = {
+  ...window.PCore,
+  getEnvironmentInfo: (): any => {
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
+};
+
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyPercentage>;
 
@@ -22,10 +36,16 @@ export const BasePegaDxilMyPercentage: Story = args => {
     fieldMetadata,
     getPConnect: () => {
       return {
+        getComponentName: () => {
+          return 'Percentage';
+        },
         getActionsApi: () => {
           return {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
+            },
+            triggerFieldChange: (propName, theValue) => {
+              setValue(theValue);
             }
           };
         },

package/tests/assets/sdk-r/components/createAll/custom-sdk/field/Pega_DXIL_MyPercentage/index.tsx

@@ -1,69 +1,61 @@
-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.js';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import StyledPegaDxilMyPercentageWrapper from './styles';
 
-// 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 PegaDxilMyPercentageProps extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
+  currencyISOCode: string;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
   // 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 = {};
@@ -72,10 +64,17 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
     '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 (
     <StyledPegaDxilMyPercentageWrapper>
-      <TextField
-        className={classes.input}
+      <CurrencyTextField
         fullWidth
         variant={readOnly ? 'standard' : 'outlined'}
         helperText={helperTextToDisplay}
@@ -83,15 +82,21 @@ export default function PegaDxilMyPercentage(props: PegaDxilMyPercentageProps) {
         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}
       />
     </StyledPegaDxilMyPercentageWrapper>
   );
 }
-

package/tests/assets/sdk-r/components/createAll/custom-sdk/template/Pega_DXIL_MyDetails/demo.stories.tsx

@@ -26,6 +26,13 @@ window.PCore = {
       }
     };
   },
+  getLocaleUtils: (): any => {
+    return {
+      getLocaleValue: value => {
+        return value;
+      }
+    };
+  },
   getEnvironmentInfo: (): any => {
     return {
       getUseLocale: () => {
@@ -63,6 +70,9 @@ export const BasePegaDxilMyDetails: Story = args => {
         },
         resolveConfigProps: () => {
           /* nothing */
+        },
+        createComponent: () => {
+          /* nothing */
         }
       };
     }