@pega/react-sdk-overrides 0.23.25 → 0.23.27

package/lib/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,122 @@
+import React, { forwardRef } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
+
+import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
+
+const useStyles = makeStyles(theme => ({
+  fieldLabel: {
+    position: 'relative',
+    transform: 'translate(0, 0px) scale(1)',
+    marginBottom: '5px',
+    color: theme.palette.text.secondary
+  }
+}));
+
+interface RichTextEditorProps {
+  id?: string;
+  defaultValue: string;
+  label: string;
+  labelHidden: boolean;
+  info: string;
+  testId: string;
+  placeholder: string;
+  disabled: boolean;
+  required: boolean;
+  readOnly: boolean;
+  error: boolean;
+  onBlur: React.EventHandler<any>;
+  onChange: React.EventHandler<any>;
+}
+
+const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
+  const classes = useStyles();
+  const uid = useUID();
+  const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
+
+  const editorRef: any = useConsolidatedRef(ref);
+  let richTextComponent: any = null;
+
+  useAfterInitialEffect(() => {
+    editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design');
+  }, [readOnly, disabled]);
+
+  const filePickerCallback = cb => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    input.addEventListener('change', (e: any) => {
+      const file = e.target.files[0];
+
+      const reader: any = new FileReader();
+      reader.addEventListener('load', () => {
+        /*
+          Note: Now we need to register the blob in TinyMCEs image blob
+          registry. In the next release this part hopefully won't be
+          necessary, as we are looking to handle it internally.
+        */
+        const blobId = `blobid${new Date().getTime()}`;
+        const blobCache = editorRef.current.editorUpload.blobCache;
+        const base64 = reader.result.split(',')[1];
+        const blobInfo = blobCache.create(blobId, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name });
+      });
+      reader.readAsDataURL(file);
+    });
+
+    input.click();
+  };
+
+  if (readOnly) {
+    const value = defaultValue || '--';
+    // eslint-disable-next-line react/no-danger
+    richTextComponent = <div key={id} id={id} className='readonly-richtext-editor' dangerouslySetInnerHTML={{ __html: value }} />;
+  } else {
+    richTextComponent = (
+      <Editor
+        tinymceScriptSrc='tinymce/tinymce.min.js'
+        onInit={(_evt, editor) => {
+          editorRef.current = editor;
+        }}
+        id={id}
+        initialValue={defaultValue}
+        disabled={disabled}
+        init={{
+          placeholder,
+          menubar: false,
+          statusbar: false,
+          min_height: 130,
+          plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+          autoresize_bottom_margin: 0,
+          toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+          toolbar_location: 'bottom',
+          content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+          branding: false,
+          paste_data_images: true,
+          file_picker_types: 'image',
+          file_picker_callback: filePickerCallback
+        }}
+        onBlur={onBlur}
+        onEditorChange={onChange}
+      />
+    );
+  }
+
+  return (
+    <FormControl data-test-id={testId} error={error} required={required}>
+      {!labelHidden && (
+        <InputLabel id='demo-simple-select-error-label' className={classes.fieldLabel}>
+          {label}
+        </InputLabel>
+      )}
+      {richTextComponent}
+      {info && <FormHelperText>{info}</FormHelperText>}
+    </FormControl>
+  );
+});
+
+export default RichTextEditor;

package/lib/designSystemExtension/RichTextEditor/index.tsx

@@ -0,0 +1 @@
+export { default } from './RichTextEditor';

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -1,7 +1,7 @@
 .quick-link-ul-list {
   list-style: none;
   padding: 0;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
   display: grid;
   gap: calc(1rem);
 }
@@ -33,4 +33,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
- }
+}
+
+.quick-link-heading {
+  margin-top: 8px;
+}

package/lib/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -1,25 +1,34 @@
-import React from 'react';
 import { Button } from '@material-ui/core';
 import './WssQuickCreate.css';
 
-export default function WssQuickCreate(props) {
+// WssQuickCreate is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface WssQuickCreateProps {
+  // If any, enter additional props that only exist on this component
+  heading: string;
+  actions?: any[];
+}
+
+export default function WssQuickCreate(props: WssQuickCreateProps) {
   const { heading, actions } = props;
 
   return (
     <div>
-      <h1>{heading}</h1>
-      <ul className='quick-link-ul-list'>
+      <h1 id='quick-links-heading' className='quick-link-heading'>
+        {heading}
+      </h1>
+      <ul id='quick-links' className='quick-link-ul-list'>
         {actions &&
           actions.map(element => {
             return (
-            <li className='quick-link-list' key={element.label}>
-              <Button className='quick-link-button' onClick={element.onClick}>
-                <span className='quick-link-button-span'>
-                  {element.icon && <img className='quick-link-icon' src={element.icon}/>}
-                  <span>{element.label}</span>
-                </span>
-              </Button>
-            </li>
+              <li className='quick-link-list' key={element.label}>
+                <Button className='quick-link-button' onClick={element.onClick}>
+                  <span className='quick-link-button-span'>
+                    {element.icon && <img className='quick-link-icon' src={element.icon} />}
+                    <span>{element.label}</span>
+                  </span>
+                </Button>
+              </li>
             );
           })}
       </ul>

package/lib/field/AutoComplete/AutoComplete.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { TextField } from '@material-ui/core';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
-import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
 import isDeepEqual from 'fast-deep-equal/react';
+
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface IOption {
   key: string;
@@ -36,7 +37,25 @@ const getDisplayFieldsMetaData = columnList => {
   return metaDataObj;
 };
 
-export default function AutoComplete(props) {
+interface AutoCompleteProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on AutoComplete here'
+  displayMode?: string;
+  deferDatasource?: boolean;
+  datasourceMetadata?: any;
+  status?: string;
+  onRecordChange?: any;
+  additionalProps?: object;
+  listType: string;
+  parameters?: any;
+  datasource: any;
+  columns: any[];
+}
+
+export default function AutoComplete(props: AutoCompleteProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TextInput = getComponentFromMap('TextInput');
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
   const {
     getPConnect,
     label,
@@ -54,17 +73,18 @@ export default function AutoComplete(props) {
     hideLabel,
     onRecordChange
   } = props;
+
   const context = getPConnect().getContextName();
   let { listType, parameters, datasource = [], columns = [] } = props;
   const [inputValue, setInputValue] = useState('');
-  const [options, setOptions] = useState<Array<IOption>>([]);
+  const [options, setOptions] = useState<IOption[]>([]);
   const [theDatasource, setDatasource] = useState(null);
   let selectedValue: any = '';
   const helperTextToDisplay = validatemessage || helperText;
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps().value;
+  const propName = (thePConn.getStateProps() as any).value;
 
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
@@ -86,13 +106,10 @@ export default function AutoComplete(props) {
   if (deferDatasource && datasourceMetadata?.datasource?.name) {
     listType = 'datapage';
     datasource = datasourceMetadata.datasource.name;
-    parameters = flattenParameters(datasourceMetadata?.datasource?.parameters);
-    const displayProp = datasourceMetadata.datasource.propertyForDisplayText.startsWith('@P')
-      ? datasourceMetadata.datasource.propertyForDisplayText.substring(3)
-      : datasourceMetadata.datasource.propertyForDisplayText;
-    const valueProp = datasourceMetadata.datasource.propertyForValue.startsWith('@P')
-      ? datasourceMetadata.datasource.propertyForValue.substring(3)
-      : datasourceMetadata.datasource.propertyForValue;
+    const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+    parameters = flattenParameters(dataSourceParameters);
+    const displayProp = propertyForDisplayText.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+    const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
     columns = [
       {
         key: 'true',
@@ -111,14 +128,14 @@ export default function AutoComplete(props) {
 
   useEffect(() => {
     if (listType === 'associated') {
-      setOptions(Utils.getOptionList(props, getPConnect().getDataObject()));
+      setOptions(Utils.getOptionList(props, getPConnect().getDataObject('')));
     }
   }, [theDatasource]);
 
   useEffect(() => {
     if (!displayMode && listType !== 'associated') {
       getDataPage(datasource, parameters, context).then((results: any) => {
-        const optionsData: Array<any> = [];
+        const optionsData: any[] = [];
         const displayColumn = getDisplayFieldsMetaData(columns);
         results?.forEach(element => {
           const val = element[displayColumn.primary]?.toString();

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

@@ -4,8 +4,7 @@
   "description": "Picklist",
   "type": "Field",
   "subtype": "Picklist",
-  "componentKey" : "AutoComplete",
+  "componentKey": "AutoComplete",
   "icon": "",
-  "properties": [
-  ]
+  "properties": []
 }

package/lib/field/CancelAlert/CancelAlert.tsx

@@ -2,11 +2,16 @@ import React, { useState } from 'react';
 import { Button, Grid, IconButton, Snackbar } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import './CancelAlert.css';
 
-declare const PCore;
+interface CancelAlertProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on CancelAlert here
+  pConn: any;
+  updateAlertState: any;
+}
 
-const CancelAlert = props => {
+export default function CancelAlert(props: CancelAlertProps) {
   const { pConn, updateAlertState } = props;
   const [showSnackbar, setShowSnackbar] = useState(false);
   const [snackbarMessage, setSnackbarMessage] = useState('');
@@ -15,6 +20,8 @@ const CancelAlert = props => {
   const caseInfo = pConn.getCaseInfo();
   const caseName = caseInfo.getName();
   const ID = caseInfo.getID();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'ModalContainer';
 
   function showToast(message: string) {
     setSnackbarMessage(message);
@@ -48,12 +55,11 @@ const CancelAlert = props => {
           .then(() => {
             dismissModal();
 
-            PCore.getPubSubUtils().publish(
-              PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CASE_CREATED
-            );
+            // @ts-ignore - second parameter “payload” for publish method should be optional
+            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CASE_CREATED);
           })
           .catch(() => {
-            showToast('Save failed');
+            showToast(localizedVal('Save failed', localeCategory));
           });
         break;
 
@@ -68,10 +74,12 @@ const CancelAlert = props => {
         deletePromise
           .then(() => {
             dismissModal();
+
+            // @ts-ignore - second parameter “payload” for publish method should be optional
             PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
           })
           .catch(() => {
-            showToast('Delete failed.');
+            showToast(localizedVal('Delete failed.', localeCategory));
           });
         break;
 
@@ -86,22 +94,22 @@ const CancelAlert = props => {
         <div className='cancel-alert-top'>
           <h3>{`Delete ${caseName}(${ID})`}</h3>
           <div>
-            <p>{`Are you sure you want to delete ${caseName} (${ID})?`}</p>
-            <p>Alternatively, you can continue working or save your work for later.</p>
+            <p>{`${localizedVal('Are you sure you want to delete', localeCategory)} ${caseName} (${ID})?`}</p>
+            <p>{localizedVal('Alternatively, you can continue working or save your work for later.', localeCategory)}</p>
           </div>
           <div className='action-controls'>
             <Grid container spacing={4} justifyContent='space-between'>
               <Grid item>
                 <Button variant='outlined' color='primary' onClick={() => buttonClick('save')}>
-                  Save for later
+                  {localizedVal('Save for later', localeCategory)}
                 </Button>
               </Grid>
               <Grid item>
                 <Button variant='outlined' color='primary' onClick={() => buttonClick('continue')}>
-                  Continue Working
+                  {localizedVal('Continue Working', localeCategory)}
                 </Button>
                 <Button variant='contained' color='primary' onClick={() => buttonClick('delete')}>
-                  Delete
+                  {localizedVal('Delete', localeCategory)}
                 </Button>
               </Grid>
             </Grid>
@@ -121,6 +129,4 @@ const CancelAlert = props => {
       />
     </>
   );
-};
-
-export default CancelAlert;
+}

package/lib/field/CancelAlert/index.tsx

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

package/lib/field/Checkbox/Checkbox.tsx

@@ -1,35 +1,45 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormGroup,
-  FormHelperText
-} from '@material-ui/core';
+import { useState, useEffect } from 'react';
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
+
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
+  // If any, enter additional props that only exist on Checkbox here
+  value?: boolean;
+  // eslint-disable-next-line react/no-unused-prop-types
+  caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
+}
+
+export default function CheckboxComponent(props: CheckboxProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
 
-export default function CheckboxComponent(props) {
   const {
     getPConnect,
-    label,
     value = false,
     readOnly,
     testId,
     required,
+    disabled,
     status,
     helperText,
     validatemessage,
     displayMode,
-    hideLabel
+    hideLabel,
+    trueLabel,
+    falseLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
   const thePConn = getPConnect();
-  const theConfigProps = thePConn.getConfigProps();
-  const { caption } = theConfigProps;
+  const theConfigProps = thePConn.getConfigProps() as CheckboxProps;
+  const caption = theConfigProps.caption;
   const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps().value;
+  const propName = (thePConn.getStateProps() as any).value;
 
   const [checked, setChecked] = useState(false);
   useEffect(() => {
@@ -38,11 +48,11 @@ export default function CheckboxComponent(props) {
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {
@@ -53,12 +63,12 @@ export default function CheckboxComponent(props) {
     thePConn.getValidationApi().validate(event.target.checked);
   };
 
-  let theCheckbox = <Checkbox color='primary' />;
+  let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
 
   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} onChange={handleChange} readOnly={readOnly} />;
+    theCheckbox = <Checkbox value={value || false} readOnly={readOnly} />;
   }
 
   return (

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

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

package/lib/field/Currency/Currency.tsx

@@ -1,14 +1,24 @@
-import React, { useState, useEffect } from 'react';
-// import { TextField } from "@material-ui/core";
+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 FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
-import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
+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 { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
 
 // Using control from: https://github.com/unicef/material-ui-currency-textfield
 
-export default function Currency(props) {
+interface CurrrencyProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Currency here
+  currencyISOCode?: string;
+}
+
+export default function Currency(props: CurrrencyProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
   const {
     getPConnect,
     label,
@@ -23,32 +33,24 @@ export default function Currency(props) {
     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(",");
+  const [theCurrSym, setCurrSym] = useState('$');
+  const [theCurrDec, setCurrDec] = useState('.');
+  const [theCurrSep, setCurrSep] = useState(',');
 
   useEffect(() => {
     // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
@@ -58,11 +60,6 @@ export default function Currency(props) {
     setCurrSep(theSymbols.theDigitGroupSeparator);
   }, [currencyISOCode]);
 
-  useEffect(() => {
-    // const testVal = value;
-    setCurrValue(value.toString());
-  }, [value]);
-
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
   const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
 
@@ -74,14 +71,6 @@ export default function Currency(props) {
     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);
-  }
-
   function currOnBlur(event, inValue) {
     // console.log(`Currency currOnBlur inValue: ${inValue}`);
     handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
@@ -94,22 +83,22 @@ export default function Currency(props) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=''
+      placeholder={placeholder ?? ''}
       size='small'
       required={required}
       disabled={disabled}
-      onChange={currOnChange}
-      onBlur={!readOnly ? currOnBlur : undefined}
+      readOnly={!!readOnly}
       error={status === 'error'}
       label={label}
-      value={currValue}
+      value={value}
       type='text'
       outputFormat='number'
       textAlign='left'
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}
+      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": []
 }