@pega/react-sdk-overrides 23.1.10 → 23.1.12

package/lib/field/Dropdown/Dropdown.tsx

@@ -1,30 +1,64 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { TextField } from '@material-ui/core';
 import MenuItem from '@material-ui/core/MenuItem';
+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 { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-// import type { PConnFieldProps } from '../../../types/PConnProps';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface IOption {
   key: string;
   value: string;
 }
 
-// Can't use DropdownProps with 8.23 until getLocaleRuleNameFromKeys is NOT private
-// interface DropdownProps extends PConnFieldProps {
-//   // If any, enter additional props that only exist on Dropdown here
-//   datasource?: Array<any>,
-//   onRecordChange?: any,
-//   fieldMetadata?: any,
-//   // eslint-disable-next-line react/no-unused-prop-types
-//   listType: string,
-//   // eslint-disable-next-line react/no-unused-prop-types
-//   additionalProps?: object
-// }
-
+const flattenParameters = (params = {}) => {
+  const flatParams = {};
+  Object.keys(params).forEach(key => {
+    const { name, value: theVal } = params[key];
+    flatParams[name] = theVal;
+  });
+
+  return flatParams;
+};
+
+const preProcessColumns = columnList => {
+  return columnList.map(col => {
+    const tempColObj = { ...col };
+    tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+    return tempColObj;
+  });
+};
+
+const getDisplayFieldsMetaData = columnList => {
+  const displayColumns = columnList.filter(col => col.display === 'true');
+  const metaDataObj: any = { key: '', primary: '', secondary: [] };
+  const keyCol = columnList.filter(col => col.key === 'true');
+  metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+  for (let index = 0; index < displayColumns.length; index += 1) {
+    if (displayColumns[index].primary === 'true') {
+      metaDataObj.primary = displayColumns[index].value;
+    } else {
+      metaDataObj.secondary.push(displayColumns[index].value);
+    }
+  }
+  return metaDataObj;
+};
+
+interface DropdownProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Dropdown here
+  datasource?: any[];
+  onRecordChange?: any;
+  fieldMetadata?: any;
+  listType: string;
+  deferDatasource?: boolean;
+  datasourceMetadata?: any;
+  parameters?: any;
+  columns: any[];
+}
 
-export default function Dropdown(props /* : DropdownProps */) {
+export default function Dropdown(props: DropdownProps) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldValueList = getComponentFromMap('FieldValueList');
 
@@ -34,39 +68,93 @@ export default function Dropdown(props /* : DropdownProps */) {
     required,
     disabled,
     value = '',
-    datasource = [],
     validatemessage,
     status,
     readOnly,
     testId,
     helperText,
     displayMode,
+    deferDatasource,
+    datasourceMetadata,
     hideLabel,
     onRecordChange,
     fieldMetadata
   } = props;
-  let { placeholder = "" } = props;
+  let { placeholder = '' } = props;
+  const context = getPConnect().getContextName();
+  let { listType, parameters, datasource = [], columns = [] } = props;
   placeholder = placeholder || 'Select...';
-  const [options, setOptions] = useState<Array<IOption>>([]);
+  const [options, setOptions] = useState<IOption[]>([]);
+  const [theDatasource, setDatasource] = useState<any[] | null>(null);
   const helperTextToDisplay = validatemessage || helperText;
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
-  const propName = thePConn.getStateProps()["value"];
+  const propName = (thePConn.getStateProps() as any).value;
   const className = thePConn.getCaseInfo().getClassName();
   const refName = propName?.slice(propName.lastIndexOf('.') + 1);
 
+  if (!isDeepEqual(datasource, theDatasource)) {
+    // inbound datasource is different, so update theDatasource (to trigger useEffect)
+    setDatasource(datasource);
+  }
+
+  // convert associated to datapage listtype and transform props
+  // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
+  if (deferDatasource && datasourceMetadata?.datasource?.name) {
+    listType = 'datapage';
+    datasource = datasourceMetadata.datasource.name;
+    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',
+        setProperty: 'Associated property',
+        value: valueProp
+      },
+      {
+        display: 'true',
+        primary: 'true',
+        useForSearch: true,
+        value: displayProp
+      }
+    ];
+  }
+  columns = preProcessColumns(columns);
+
+  useEffect(() => {
+    if (theDatasource) {
+      const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly
+      const optionsList = [...list];
+      optionsList.unshift({
+        key: placeholder,
+        value: thePConn.getLocalizedValue(placeholder, '', '')
+      }); // 2nd and 3rd args empty string until typedef marked correctly
+      setOptions(optionsList);
+    }
+  }, [theDatasource]);
+
   useEffect(() => {
-    const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly
-    const optionsList = [...list];
-    optionsList.unshift({
-      key: placeholder,
-      value: thePConn.getLocalizedValue(placeholder, '', '')
-    }); // 2nd and 3rd args empty string until typedef marked correctly
-    setOptions(optionsList);
-  }, [datasource]);
+    if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {
+      getDataPage(datasource, parameters, context).then((results: any) => {
+        const optionsData: any[] = [];
+        const displayColumn = getDisplayFieldsMetaData(columns);
+        results?.forEach(element => {
+          const val = element[displayColumn.primary]?.toString();
+          const obj = {
+            key: element[displayColumn.key] || element.pyGUID,
+            value: val
+          };
+          optionsData.push(obj);
+        });
+        setOptions(optionsData);
+      });
+    }
+  }, []);
 
-  const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter((field) => field?.classID === className)[0] : fieldMetadata;
+  const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter(field => field?.classID === className)[0] : fieldMetadata;
 
   let displayName = metaData?.datasource?.propertyForDisplayText;
   displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
@@ -81,6 +169,7 @@ export default function Dropdown(props /* : DropdownProps */) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
+        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
       />
     );
@@ -90,8 +179,9 @@ export default function Dropdown(props /* : DropdownProps */) {
     return (
       <FieldValueList
         name={hideLabel ? '' : label}
+        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
         value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-        variant="stacked"
+        variant='stacked'
       />
     );
   }
@@ -106,7 +196,7 @@ export default function Dropdown(props /* : DropdownProps */) {
     'data-test-id': testId
   };
 
-  const handleChange = (evt) => {
+  const handleChange = evt => {
     const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;
     handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
     if (onRecordChange) {
@@ -122,7 +212,7 @@ export default function Dropdown(props /* : DropdownProps */) {
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
       placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
-      size="small"
+      size='small'
       required={required}
       disabled={disabled}
       onChange={!readOnly ? handleChange : undefined}
@@ -134,6 +224,7 @@ export default function Dropdown(props /* : DropdownProps */) {
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>
+          {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'  */}
           {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
         </MenuItem>
       ))}

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

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

package/lib/field/Email/Email.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { TextField, InputAdornment } from '@material-ui/core';
+import { InputAdornment, TextField } from '@material-ui/core';
 import MailOutlineIcon from '@material-ui/icons/MailOutline';
+
 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 EmailProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -26,7 +26,8 @@ export default function Email(props: EmailProps) {
     testId,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -35,7 +36,7 @@ export default function Email(props: EmailProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -51,10 +52,10 @@ export default function Email(props: EmailProps) {
   return (
     <TextField
       fullWidth
-      variant="outlined"
+      variant='outlined'
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
+      placeholder={placeholder ?? ''}
+      size='small'
       required={required}
       disabled={disabled}
       onChange={onChange}
@@ -62,10 +63,10 @@ export default function Email(props: EmailProps) {
       error={status === 'error'}
       label={label}
       value={value}
-      type="email"
+      type='email'
       InputProps={{
         startAdornment: (
-          <InputAdornment position="start">
+          <InputAdornment position='start'>
             <MailOutlineIcon />
           </InputAdornment>
         ),

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

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

package/lib/field/Email/index.tsx

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

package/lib/field/Group/Group.tsx

@@ -0,0 +1,39 @@
+import { ReactElement, useMemo } from 'react';
+import { Grid } from '@material-ui/core';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface GroupProps extends PConnFieldProps {
+  children: ReactElement[];
+  heading: string;
+  showHeading: boolean;
+  instructions?: string;
+  collapsible: boolean;
+  type: string;
+}
+
+export default function Group(props: GroupProps) {
+  const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
+
+  const isReadOnly = displayMode === 'LABELS_LEFT';
+
+  const content = useMemo(() => {
+    return (
+      <Grid container spacing={2}>
+        {children?.map(child => (
+          <Grid item xs={12} key={child.key}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    );
+  }, [children, type, isReadOnly]);
+
+  if (!children) return null;
+
+  return (
+    <FieldGroup name={showHeading ? heading : undefined} collapsible={collapsible} instructions={instructions}>
+      {content}
+    </FieldGroup>
+  );
+}

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

@@ -0,0 +1,7 @@
+{
+  "name": "Group",
+  "label": "Field Group",
+  "description": "Field Group",
+  "type": "Group",
+  "properties": []
+}

package/lib/field/Group/index.tsx

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

package/lib/field/Integer/Integer.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import { TextField } from '@material-ui/core';
+
 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 IntegerProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Integer here
@@ -25,7 +25,8 @@ export default function Integer(props: IntegerProps) {
     testId,
     helperText,
     displayMode,
-    hideLabel
+    hideLabel,
+    placeholder
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -36,7 +37,7 @@ export default function Integer(props: IntegerProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -71,8 +72,8 @@ export default function Integer(props: IntegerProps) {
       fullWidth
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
-      placeholder=""
-      size="small"
+      placeholder={placeholder ?? ''}
+      size='small'
       required={required}
       disabled={disabled}
       onChange={intOnChange}
@@ -80,7 +81,7 @@ export default function Integer(props: IntegerProps) {
       error={status === 'error'}
       label={label}
       value={value}
-      type="text"
+      type='text'
       inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
     />
   );

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

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

package/lib/field/MultiSelect/Multiselect.tsx

@@ -0,0 +1,244 @@
+import { Checkbox, TextField } from '@material-ui/core';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { doSearch, getDisplayFieldsMetaData, useDeepMemo, preProcessColumns, getGroupDataForItemsTree } from './utils';
+import { insertInstruction, deleteInstruction } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
+import { debounce } from 'throttle-debounce';
+
+const icon = <CheckBoxOutlineBlankIcon fontSize='small' />;
+const checkedIcon = <CheckBoxIcon fontSize='small' />;
+
+export default function Multiselect(props) {
+  const {
+    getPConnect,
+    label,
+    placeholder,
+    referenceList,
+    selectionKey,
+    primaryField,
+    initialCaseClass,
+    showSecondaryInSearchOnly = false,
+    listType = '',
+    isGroupData = false,
+    referenceType,
+    secondaryFields,
+    groupDataSource = [],
+    parameters = {},
+    matchPosition = 'contains',
+    maxResultsDisplay,
+    groupColumnsConfig = [{}],
+    selectionList,
+    value
+  } = props;
+  let { datasource = [], columns = [{}] } = props;
+
+  if (referenceList.length > 0) {
+    datasource = referenceList;
+    columns = [
+      {
+        value: primaryField,
+        display: 'true',
+        useForSearch: true,
+        primary: 'true'
+      },
+      {
+        value: selectionKey,
+        setProperty: selectionKey,
+        key: 'true'
+      }
+    ];
+    let secondaryColumns: any = [];
+    if (secondaryFields) {
+      secondaryColumns = secondaryFields.map(secondaryField => ({
+        value: secondaryField,
+        display: 'true',
+        secondary: 'true',
+        useForSearch: 'true'
+      }));
+    } else {
+      secondaryColumns = [
+        {
+          value: selectionKey,
+          display: 'true',
+          secondary: 'true',
+          useForSearch: 'true'
+        }
+      ];
+    }
+    if (referenceType === 'Case') {
+      columns = [...columns, ...secondaryColumns];
+    }
+  }
+  const [inputValue, setInputValue] = useState(value);
+  const [selectedItems, setSelectedItems] = useState([]);
+
+  const dataConfig = useDeepMemo(() => {
+    return {
+      dataSource: datasource,
+      groupDataSource,
+      isGroupData,
+      showSecondaryInSearchOnly,
+      parameters,
+      matchPosition,
+      listType,
+      maxResultsDisplay: maxResultsDisplay || '100',
+      columns: preProcessColumns(columns),
+      groupColumnsConfig: preProcessColumns(groupColumnsConfig)
+    };
+  }, [
+    datasource,
+    groupDataSource,
+    isGroupData,
+    showSecondaryInSearchOnly,
+    parameters,
+    matchPosition,
+    listType,
+    maxResultsDisplay,
+    columns,
+    groupColumnsConfig
+  ]);
+  const groupsDisplayFieldMeta = useMemo(
+    () => (listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.groupColumnsConfig) : null),
+    [dataConfig.groupColumnsConfig]
+  );
+
+  const itemsTreeBaseData = getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) || [];
+
+  const [itemsTree, setItemsTree] = useState(
+    isGroupData ? getGroupDataForItemsTree(groupDataSource, groupsDisplayFieldMeta, showSecondaryInSearchOnly) : []
+  );
+
+  const displayFieldMeta = listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.columns) : null;
+  const getCaseListBasedOnParamsDebounced: any = useRef();
+  const pConn = getPConnect();
+  const contextName = pConn.getContextName();
+  const listActions = pConn.getListActions();
+  const dataApiObj = useRef();
+
+  // main search function trigger
+  const getCaseListBasedOnParams = async (searchText, group, selectedRows, currentItemsTree, isTriggeredFromSearch = false) => {
+    if (referenceList && referenceList.length > 0) {
+      selectedRows = await listActions.getSelectedRows(true);
+
+      selectedRows =
+        selectedRows &&
+        selectedRows.map(item => {
+          return {
+            id: item[selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey],
+            primary: item[primaryField.startsWith('.') ? primaryField.substring(1) : primaryField]
+          };
+        });
+      setSelectedItems(selectedRows);
+    }
+
+    // if items tree is null or text search is triggered then always should use fresh data object, we use the original object
+    const initalItemsTree = isTriggeredFromSearch || !currentItemsTree ? [...itemsTreeBaseData] : [...currentItemsTree];
+    const res = await doSearch(
+      searchText,
+      group,
+      initialCaseClass,
+      displayFieldMeta,
+      dataApiObj.current,
+      initalItemsTree,
+      isGroupData,
+      showSecondaryInSearchOnly,
+      selectedRows || []
+    );
+    setItemsTree(res);
+  };
+
+  useEffect(() => {
+    if (referenceList && referenceList.length > 0) {
+      pConn.setReferenceList(selectionList);
+    }
+  }, [pConn]);
+
+  useEffect(() => {
+    getCaseListBasedOnParamsDebounced.current = debounce(500, getCaseListBasedOnParams);
+  }, []);
+
+  useEffect(() => {
+    if (listType !== 'associated') {
+      PCore.getDataApi()
+        ?.init(dataConfig, contextName)
+        .then(dataObj => {
+          dataApiObj.current = dataObj;
+          if (!isGroupData) {
+            getCaseListBasedOnParamsDebounced.current(inputValue ?? '', '', [...selectedItems], [...itemsTree]);
+          }
+        });
+    }
+  }, [dataConfig, listType, dataConfig.columns, inputValue, dataConfig.groupColumnsConfig, showSecondaryInSearchOnly]);
+
+  const onSearchHandler = ev => {
+    const searchText = ev.target.value;
+    setInputValue(searchText);
+    getCaseListBasedOnParamsDebounced.current(searchText, '', [...selectedItems], [...itemsTree], true);
+  };
+
+  const setSelectedItemsForReferenceList = item => {
+    // Clear error messages if any
+    const propName = pConn.getStateProps().selectionList;
+    pConn.clearErrorMessages({
+      property: propName
+    });
+    const { selected } = item;
+    if (selected) {
+      insertInstruction(pConn, selectionList, selectionKey, primaryField, item);
+    } else {
+      deleteInstruction(pConn, selectionList, selectionKey, item);
+    }
+  };
+
+  const handleChange = (event, newSelectedValues) => {
+    let clickedItem;
+    let updatedItems: any = [];
+    if (newSelectedValues && newSelectedValues.length > 0) {
+      updatedItems = newSelectedValues.map(ele => {
+        ele.selected = true;
+        return ele;
+      });
+    }
+    if (newSelectedValues.length > selectedItems.length) {
+      clickedItem = newSelectedValues.filter(item => !selectedItems.some((ele: any) => ele.id === item.id));
+    } else {
+      clickedItem = selectedItems.filter((item: any) => !newSelectedValues.some((ele: any) => ele.id === item.id));
+      clickedItem[0].selected = false;
+    }
+    itemsTree.forEach(ele => {
+      ele.selected = !!updatedItems.find(item => item.id === ele.id);
+    });
+
+    setSelectedItems(updatedItems);
+    setItemsTree(itemsTree);
+
+    setInputValue('');
+
+    // if this is a referenceList case
+    if (referenceList) setSelectedItemsForReferenceList(clickedItem[0]);
+  };
+
+  return (
+    <Autocomplete
+      multiple
+      fullWidth
+      options={itemsTree}
+      disableCloseOnSelect
+      getOptionSelected={(option: any, val: any) => option?.primary === val?.primary}
+      getOptionLabel={(option: any) => option?.primary}
+      onChange={handleChange}
+      value={selectedItems}
+      renderOption={(option: any, { selected }) => (
+        <>
+          <Checkbox icon={icon} checkedIcon={checkedIcon} style={{ marginRight: 8 }} checked={selected} />
+          {option.primary}
+        </>
+      )}
+      renderInput={params => (
+        <TextField {...params} variant='outlined' fullWidth label={label} placeholder={placeholder} size='small' onChange={onSearchHandler} />
+      )}
+    />
+  );
+}

package/lib/field/MultiSelect/index.tsx

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