@pega/dx-component-builder-sdk 8.23.15 → 8.23.17

package/tests/assets/components/SDK-React/create/override-sdk/template/DetailsThreeColumn/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "DetailsThreeColumn",
+    "name": "DetailsThreeColumn",
+    "label": "Details (Three column)",
+    "description": "Details (Three column)",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/DetailsThreeColumn/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -0,0 +1,79 @@
+import React, { createElement } from 'react';
+import Grid from '@material-ui/core/Grid';
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+// import type { PConnProps } from '../../../../types/PConnProps';
+
+
+// Can't use PConnProps until getPConnect().getChildren() type is ok
+// interface DetailsTwoColumnProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   showLabel: boolean,
+//   label: string,
+//   showHighlightedData: boolean
+// }
+
+
+export default function DetailsTwoColumn(props /* : DetailsTwoColumnProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
+  const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
+
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  // Set display mode prop and re-create the children so this part of the dom tree renders
+  // in a readonly (display) mode instead of a editable
+  getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+  getPConnect().setInheritedProp('readOnly', true);
+  const children = getPConnect()
+    .getChildren()
+    .map((configObject, index) =>
+      createElement(createPConnectComponent(), {
+        ...configObject,
+        // eslint-disable-next-line react/no-array-index-key
+        key: index.toString()
+      })
+    );
+
+  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
+  let highlightedDataArr = [];
+  if (showHighlightedData) {
+    const { highlightedData = [] } = getPConnect().getRawMetadata().config;
+    highlightedDataArr = highlightedData.map(field => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
+
+      return getPConnect().createComponent(field,
+        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+    });
+  }
+
+  return (
+    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+      {showHighlightedData && highlightedDataArr.length > 0 && (
+        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+          {highlightedDataArr.map((child, i) => (
+            <Grid item xs={6} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={6} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/DetailsTwoColumn/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "DetailsTwoColumn",
+    "name": "DetailsTwoColumn",
+    "label": "Details (Two column)",
+    "description": "Details (Two column)",
+    "type": "Template",
+    "subtype": "DETAILS",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/DetailsTwoColumn/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -0,0 +1,110 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useMemo } from 'react';
+import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface FieldGroupTemplateProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  referenceList?: Array<any>,
+  contextClass: string,
+  renderMode?: string,
+  heading?: string,
+  lookForChildInConfig?: boolean,
+  displayMode?: string,
+  fieldHeader?: string,
+  allowTableEdit: boolean
+}
+
+
+export default function FieldGroupTemplate(props: FieldGroupTemplateProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+  const FieldGroupList = getComponentFromMap('FieldGroupList');
+
+  const {
+    referenceList = [],
+    renderMode,
+    contextClass,
+    getPConnect,
+    lookForChildInConfig,
+    heading = '',
+    displayMode,
+    fieldHeader,
+    allowTableEdit: allowAddEdit
+  } = props;
+  const pConn = getPConnect();
+  const resolvedList = getReferenceList(pConn);
+  pConn.setReferenceList(resolvedList);
+  const pageReference = `${pConn.getPageReference()}${resolvedList}`;
+  const isReadonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+  const HEADING = heading ?? 'Row';
+
+  const getDynamicHeaderProp = (item, index) => {
+    if (fieldHeader === 'propertyRef' && heading && item[heading.substring(1)]) {
+      return item[heading.substring(1)];
+    }
+    return `Row ${index + 1}`;
+  };
+
+  const addRecord = () => {
+    if (PCore.getPCoreVersion()?.includes('8.7')) {
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
+    } else {
+      pConn.getListActions().insert({}, referenceList.length, null);  // 3rd arg null until typedef marked correctly as optional
+    }
+  };
+
+  if (!isReadonlyMode) {
+    const addFieldGroupItem = () => {
+      addRecord();
+    };
+    const deleteFieldGroupItem = index => {
+      if (PCore.getPCoreVersion()?.includes('8.7')) {
+        pConn.getListActions().deleteEntry(index, pageReference);
+      } else {
+        pConn.getListActions().deleteEntry(index, null);  // 2nd arg null until typedef marked correctly as optional
+      }
+    };
+    if (referenceList.length === 0 && allowAddEdit !== false) {
+      addFieldGroupItem();
+    }
+
+    const MemoisedChildren = useMemo(() => {
+      return referenceList.map((item, index) => ({
+        id: index,
+        name:
+          fieldHeader === 'propertyRef'
+            ? getDynamicHeaderProp(item, index)
+            : `${HEADING} ${index + 1}`,
+        children: buildView(pConn, index, lookForChildInConfig)
+      }));
+    }, [referenceList?.length]);
+
+    return (
+      <FieldGroupList
+        items={MemoisedChildren}
+        onAdd={allowAddEdit !== false ? addFieldGroupItem : undefined}
+        onDelete={allowAddEdit !== false ? deleteFieldGroupItem : undefined}
+      />
+    );
+  }
+
+  pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+  const memoisedReadOnlyList = useMemo(() => {
+    return referenceList.map((item, index) => {
+      const key = item[heading] || `field-group-row-${index}`;
+      return (
+        <FieldGroup
+          key={key}
+          name={fieldHeader === 'propertyRef' ? getDynamicHeaderProp(item, index) : `${HEADING} ${index + 1}`}
+        >
+          {buildView(pConn, index, lookForChildInConfig)}
+        </FieldGroup>
+      );
+    });
+  }, []);
+
+  return <div>{memoisedReadOnlyList}</div>;
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/FieldGroupTemplate/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/InlineDashboard/InlineDashboard.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Grid, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// InlineDashboard does NOT have getPConnect. So, no need to extend from PConnProps
+interface InlineDashboardProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  title: string,
+  filterPosition?: string
+}
+
+
+const useStyles = makeStyles((/* theme */) => ({
+  headerStyles: {
+    fontWeight: 500,
+    fontSize: '1.25rem'
+  },
+  containerStyles: {
+    marginTop: '1rem',
+    marginBottom: '1rem'
+  },
+  colStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  },
+  filterContainerStyles: {
+    display: 'grid',
+    gap: '1rem',
+    gridTemplateColumns: 'repeat(7, 1fr);'
+  },
+  inlineStyles: {
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline',
+    marginTop: '1rem'
+  }
+}));
+
+export default function InlineDashboard(props: InlineDashboardProps) {
+  const classes = useStyles();
+
+  const { children, title, filterPosition } = props;
+
+  const direction = filterPosition === 'inline-start' ? 'row-reverse' : 'row';
+  return (
+    <>
+      <Typography variant='h4' className={classes.headerStyles}>
+        {title}
+      </Typography>
+
+      {filterPosition === 'block-start' && (
+        <Grid container spacing={2} direction='column-reverse' className={classes.containerStyles}>
+          <Grid item xs={12} className={classes.colStyles}>
+            {children[0]}
+          </Grid>
+          <Grid item xs={12} className={classes.filterContainerStyles}>
+            {children[1]}
+          </Grid>
+        </Grid>
+      )}
+      {filterPosition !== 'block-start' && (
+        <Grid container spacing={2} direction={direction} className={classes.containerStyles}>
+          <Grid item xs={9}>
+            {children[0]}
+          </Grid>
+          <Grid item xs={3} className={classes.inlineStyles}>
+            {children[1]}
+          </Grid>
+        </Grid>
+      )}
+    </>
+  );
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/InlineDashboard/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/InlineDashboardPage/InlineDashboardPage.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useMemo, Children, useEffect, useState } from 'react';
+
+import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+
+interface InlineDashboardPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  children: Array<any>,
+  title: string,
+  icon?: string,
+  filterPosition?: string
+}
+
+
+export default function InlineDashboardPage(props: InlineDashboardPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const InlineDashboard = getComponentFromMap("InlineDashboard");
+
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const { children, getPConnect, icon = '', filterPosition = 'block-start'  } = props;
+  const [filterComponents, setFilterComponents] = useState([]);
+  const childArray = useMemo(() => {
+    return Children.toArray(children);
+  }, [children]);
+
+  const allFilters = getPConnect().getRawMetadata().children[1];
+
+  useEffect(() => {
+    setFilterComponents(buildFilterComponents(getPConnect, allFilters));
+  }, []);
+
+  const inlineProps = props;
+  // Region layout views
+  inlineProps.children[0] = childArray[0];
+  // filter items
+  inlineProps.children[1] = filterComponents;
+
+  return <InlineDashboard {...inlineProps} />;
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/InlineDashboardPage/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/ListPage/ListPage.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ListPageProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  parameters: object
+}
+
+
+export default function ListPage(props: ListPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const ListView = getComponentFromMap('ListView');
+
+ // special case for ListView - add in a prop
+ const listViewProps = {...props, bInForm: false};
+  return (
+    <ListView  {...listViewProps}></ListView>
+  )
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/ListPage/config-ext.json

@@ -0,0 +1,8 @@
+{
+    "componentKey": "ListPage",
+    "name": "ListPage",
+    "type": "Template",
+    "subtype": "PAGE",
+    "label": "List page",
+    "properties": []
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/ListPage/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/template/ListView/DefaultViewMeta.ts

@@ -0,0 +1,222 @@
+const LOCALIZATON_ANNOTATION = '@L ';
+const PROPERTY_ANNOTATION = '@P .';
+const USER_ANNOTATION = '@USER .';
+const ASSOCIATED_ANNOTATION = '@ASSOCIATED .';
+const ASSOCIATION_ANNOTATION = '@CA ';
+
+const getDefaultConfig = (fieldMeta, classID, show) => {
+  const {
+    name,
+    label,
+    fieldID,
+    fieldType,
+    dataType,
+    type,
+    classID: fieldMetaClassID,
+    displayAs,
+    displayAsLink,
+    category,
+    associationClassID,
+    associationID
+  } = fieldMeta;
+  return {
+    value: (associationClassID ? ASSOCIATION_ANNOTATION : PROPERTY_ANNOTATION).concat(fieldID),
+    label: LOCALIZATON_ANNOTATION.concat(name || label),
+    fieldType,
+    propertyType: dataType || type,
+    classID: classID || fieldMetaClassID,
+    displayAs,
+    displayAsLink,
+    category,
+    show,
+    ...(associationClassID ? { associationLabel: LOCALIZATON_ANNOTATION.concat(category) } : {}),
+    associationID
+  };
+};
+
+
+export default function getDefaultViewMeta(fieldMeta, classID, showField) {
+  const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } =
+    fieldMeta;
+  const mapperKey = type && displayAs ? type.concat(':').concat(displayAs) : type;
+  const defaultConfig = getDefaultConfig(fieldMeta, classID, showField);
+  let viewMeta;
+  switch (mapperKey) {
+    case 'True-False:pxCheckbox':
+      viewMeta = {
+        type: 'Checkbox',
+        config: {
+          ...defaultConfig,
+          trueLabel: '@L Yes',
+          falseLabel: '@L No',
+          caption: LOCALIZATON_ANNOTATION.concat(name || label),
+          label: undefined
+        }
+      };
+      break;
+    case 'Decimal:pxCurrency':
+      viewMeta = {
+        type: 'Currency',
+        config: defaultConfig
+      };
+      break;
+    case 'Date Time:pxDateTime':
+    case 'Date & time:pxDateTime':
+      viewMeta = {
+        type: 'DateTime',
+        config: defaultConfig
+      };
+      break;
+    case 'Date:pxDateTime':
+    case 'Date only:pxDateTime':
+      viewMeta = {
+        type: 'Date',
+        config: defaultConfig
+      };
+      break;
+    case 'Decimal:pxNumber':
+      viewMeta = {
+        type: 'Decimal',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxEmail':
+      viewMeta = {
+        type: 'Email',
+        config: defaultConfig
+      };
+      break;
+    case 'Integer:pxInteger':
+      viewMeta = {
+        type: 'Integer',
+        config: defaultConfig
+      };
+      break;
+    case 'Decimal:pxPercentage':
+      viewMeta = {
+        type: 'Percentage',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxPhone':
+      viewMeta = {
+        type: 'Phone',
+        config: {
+          ...defaultConfig,
+          datasource: {
+            source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+            fields: {
+              value: '@P .pyCallingCode'
+            }
+          }
+        }
+      };
+      break;
+    case 'TimeOfDay:pxDateTime':
+      viewMeta = {
+        type: 'Time',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxURL':
+    case 'Text:pxUrl':
+      viewMeta = {
+        type: 'URL',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxTextArea':
+      viewMeta = {
+        type: 'TextArea',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxRichTextEditor':
+      viewMeta = {
+        type: 'RichText',
+        config: defaultConfig
+      };
+      break;
+    case 'Text:pxAutoComplete':
+      if (isUserReference || fieldType === 'User reference') {
+        viewMeta = {
+          type: 'UserReference',
+          config: {
+            ...defaultConfig,
+            value: USER_ANNOTATION.concat(fieldID),
+            placeholder: 'Select...',
+            displayAs: 'Search box',
+            associationID,
+            associationLabel: undefined
+          }
+        };
+      } else {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'AutoComplete',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxDropdown':
+      if (isUserReference || fieldType === 'User reference') {
+        viewMeta = {
+          type: 'UserReference',
+          config: {
+            ...defaultConfig,
+            value: USER_ANNOTATION.concat(fieldID),
+            placeholder: 'Select...',
+            displayAs: 'Drop-down list',
+            associationID,
+            associationLabel: undefined
+          }
+        };
+      } else {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'Dropdown',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxRadioButtons':
+      {
+        const { tableType = '' } = datasource || {};
+        viewMeta = {
+          type: 'RadioButtons',
+          config: {
+            ...defaultConfig,
+            placeholder: 'Select...',
+            listType: 'associated',
+            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+            deferDatasource: tableType === 'DataPage'
+          }
+        };
+      }
+      break;
+    case 'Text:pxTextInput':
+      viewMeta = {
+        type: 'TextInput',
+        config: defaultConfig
+      };
+      break;
+    default:
+      viewMeta = {
+        type,
+        config: defaultConfig
+      };
+  }
+  return viewMeta;
+}

package/tests/assets/components/SDK-React/create/override-sdk/template/ListView/ListView.css

@@ -0,0 +1,10 @@
+.no-records {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+}
+
+.react-datepicker-popper {
+  z-index: 9999 !important;
+}