@pega/react-sdk-overrides 8.23.11 → 23.1.10

package/lib/template/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,11 +1,25 @@
 import React, { createElement } from 'react';
-import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-export default function DetailsTwoColumn(props) {
-  const { label, showLabel, getPConnect, showHighlightedData } = props;
+// 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() };
@@ -37,7 +51,8 @@ export default function DetailsTwoColumn(props) {
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field,
+        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 
@@ -62,16 +77,3 @@ export default function DetailsTwoColumn(props) {
     </FieldGroup>
   );
 }
-
-DetailsTwoColumn.defaultProps = {
-  label: undefined,
-  showLabel: true,
-  showHighlightedData: false
-};
-
-DetailsTwoColumn.propTypes = {
-  showLabel: PropTypes.bool,
-  label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  showHighlightedData: PropTypes.bool
-};

package/lib/template/Details/DynamicTabs/DynamicTabs.tsx

@@ -0,0 +1,78 @@
+import React, { Children, useState, useMemo } from 'react';
+import { makeStyles, Tab, Tabs } from '@material-ui/core';
+import { TabContext, TabPanel } from '@material-ui/lab';
+import { buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
+// import type { PConnProps } from '../../../../types/PConnProps';
+
+const useStyles = makeStyles(() => ({
+  tab: {
+    minWidth: '72px'
+  }
+}));
+
+// ListViewProps can't be used until getComponentConfig is NOT private
+// interface DynamicTabsProps extends PConnProps {
+//   // If any, enter additional props that only exist on this component
+//   showLabel: boolean;
+//   label: string;
+//   referenceList?: Array<any>;
+// }
+
+function DynamicTabs(props /*: DynamicTabsProps */) {
+  const classes = useStyles();
+  const { referenceList, showLabel, label, getPConnect } = props;
+  const pConnect = getPConnect();
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...pConnect.getInheritedProps() };
+  const defaultTabIndex = 0;
+  const { tablabel } = pConnect.getComponentConfig();
+  const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
+  const referenceListData = pConnect.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
+  const memoisedTabViews = useMemo(() => {
+    pConnect.setInheritedProp('displayMode', 'LABELS_LEFT');
+    pConnect.setInheritedProp('readOnly', true);
+
+    return (
+      referenceListData &&
+      Children.toArray(
+        referenceListData.map((item, index) => {
+          return <React.Fragment key={item[tablabelProp]}>{buildView(pConnect, index, '')}</React.Fragment>;
+        })
+      )
+    );
+  }, [referenceListData]);
+  const [panelShown, changePanel] = useState(defaultTabIndex);
+  const handleTabClick = (e, id) => {
+    changePanel(parseInt(id, 10));
+  };
+  // Loop over the tab contents and and pull out the labels for the navigation
+  const tabItems =
+    referenceListData?.map((item, i) => {
+      const currentTabLabel = item[tablabelProp] || PCore.getLocaleUtils().getLocaleValue('No label specified in config', 'Generic');
+      return {
+        name: currentTabLabel,
+        id: i
+      };
+    }) || [];
+
+  return (
+    <>
+      {propsToUse.label && <h3 id="dynamic-tabs-title">{propsToUse.label}</h3>}
+      <TabContext value={panelShown.toString()}>
+        <Tabs onChange={handleTabClick} value={panelShown} variant="scrollable" scrollButtons="auto" indicatorColor="primary" id="dynamic-tabs">
+          {tabItems.map((tab: any) => (
+            <Tab key={tab.id} label={tab.name} value={tab.id} className={classes.tab} />
+          ))}
+        </Tabs>
+
+        {tabItems.map((tab: any) => (
+          <TabPanel key={tab.id} value={tab.id.toString()} tabIndex={+tab.id} id="dynamic-tabpanel">
+            <div>{memoisedTabViews[parseInt(tab.id, 10)] || 'No content exists'}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+    </>
+  );
+}
+
+export default DynamicTabs;

package/lib/template/Details/DynamicTabs/config.json

@@ -0,0 +1,36 @@
+{
+  "name": "DynamicTabs",
+  "label": "Dynamic tabs (list)",
+  "description": "Dynamic tabs (list)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "DynamicTabs.svg",
+  "hideTemplateEdit": true,
+  "hideFromTemplatePicker": true,
+  "viewHeadingLabel": "Default heading",
+  "properties": [
+    {
+      "name": "referenceList",
+      "label": "Data page",
+      "format": "CONTENTPICKERSOURCE"
+    },
+    {
+      "name": "parameters",
+      "label": "Parameters",
+      "format": "PARAMETERS",
+      "showOverride": false
+    },
+    {
+      "name": "tablabel",
+      "label": "Tab label",
+      "format": "PROPERTY",
+      "ofContextClass": true
+    },
+    {
+      "format": "VIEWPICKER",
+      "name": "Views",
+      "label": "Tab content",
+      "ofContextClass": true
+    }
+  ]
+}

package/lib/template/Details/DynamicTabs/index.tsx

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

package/lib/template/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -1,24 +1,35 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
-import FieldGroupList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroupList';
 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';
 
-import PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';
+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
+}
 
-declare const PCore: typeof PCoreType;
 
+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');
 
-export default function FieldGroupTemplate(props) {
   const {
-    referenceList,
+    referenceList = [],
     renderMode,
     contextClass,
     getPConnect,
     lookForChildInConfig,
-    heading,
+    heading = '',
     displayMode,
     fieldHeader,
     allowTableEdit: allowAddEdit
@@ -41,7 +52,7 @@ export default function FieldGroupTemplate(props) {
     if (PCore.getPCoreVersion()?.includes('8.7')) {
       pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
     } else {
-      pConn.getListActions().insert({}, referenceList.length);
+      pConn.getListActions().insert({}, referenceList.length, null);  // 3rd arg null until typedef marked correctly as optional
     }
   };
 
@@ -53,7 +64,7 @@ export default function FieldGroupTemplate(props) {
       if (PCore.getPCoreVersion()?.includes('8.7')) {
         pConn.getListActions().deleteEntry(index, pageReference);
       } else {
-        pConn.getListActions().deleteEntry(index);
+        pConn.getListActions().deleteEntry(index, null);  // 2nd arg null until typedef marked correctly as optional
       }
     };
     if (referenceList.length === 0 && allowAddEdit !== false) {
@@ -97,20 +108,3 @@ export default function FieldGroupTemplate(props) {
 
   return <div>{memoisedReadOnlyList}</div>;
 }
-
-FieldGroupTemplate.defaultProps = {
-  referenceList: [],
-  heading: undefined,
-  contextClass: null,
-  displayMode: undefined
-};
-
-FieldGroupTemplate.propTypes = {
-  referenceList: PropTypes.arrayOf(Object),
-  contextClass: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  renderMode: PropTypes.string.isRequired,
-  heading: PropTypes.string,
-  lookForChildInConfig: PropTypes.bool,
-  displayMode: PropTypes.string
-};

package/lib/template/InlineDashboard/InlineDashboard.tsx

@@ -1,7 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 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: {
@@ -30,7 +39,7 @@ const useStyles = makeStyles((/* theme */) => ({
   }
 }));
 
-export default function InlineDashboard(props) {
+export default function InlineDashboard(props: InlineDashboardProps) {
   const classes = useStyles();
 
   const { children, title, filterPosition } = props;
@@ -65,8 +74,3 @@ export default function InlineDashboard(props) {
     </>
   );
 }
-
-InlineDashboard.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired
-  // template: PropTypes.string.isRequired
-};

package/lib/template/InlineDashboardPage/InlineDashboardPage.tsx

@@ -1,18 +1,33 @@
 import React from 'react';
 import { useMemo, Children, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 
 import { buildFilterComponents } from '@pega/react-sdk-components/lib/components/infra/DashboardFilter/filterUtils';
-import InlineDashboard from '@pega/react-sdk-components/lib/components/template/InlineDashboard';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-export default function InlineDashboardPage(props) {
-  const { children, getPConnect } = props;
+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];
+  const allFilters = getPConnect().getRawMetadata()["children"][1];
 
   useEffect(() => {
     setFilterComponents(buildFilterComponents(getPConnect, allFilters));
@@ -26,16 +41,3 @@ export default function InlineDashboardPage(props) {
 
   return <InlineDashboard {...inlineProps} />;
 }
-
-InlineDashboardPage.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  getPConnect: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  icon: PropTypes.string,
-  filterPosition: PropTypes.string
-};
-
-InlineDashboardPage.defaultProps = {
-  icon: '',
-  filterPosition: 'block-start'
-};

package/lib/template/ListPage/ListPage.tsx

@@ -1,20 +1,21 @@
 import React from "react";
-import PropTypes from "prop-types";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
-import ListView from '@pega/react-sdk-components/lib/components/template/ListView';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-export default function ListPage(props) {
+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  {...props}></ListView>
+    <ListView  {...listViewProps}></ListView>
   )
 }
-
-ListPage.defaultProps = {
-  parameters: undefined
-};
-
-ListPage.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  parameters: PropTypes.objectOf(PropTypes.any)
-};