@pega/react-sdk-overrides 0.23.6

package/lib/templates/DefaultForm/DefaultForm.tsx

@@ -0,0 +1,52 @@
+import React, { createElement } from "react";
+import PropTypes from "prop-types";
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+
+import './DefaultForm.css';
+
+export default function DefaultForm(props) {
+  const { getPConnect, NumCols } = props;
+
+  let divClass: string;
+
+  const numCols = NumCols || "1";
+  switch (numCols) {
+    case "1" :
+      divClass = "psdk-default-form-one-column";
+      break;
+    case "2" :
+      divClass = "psdk-default-form-two-column";
+      break;
+    case "3" :
+      divClass = "psdk-default-form-three-column";
+      break;
+    default :
+      divClass = "psdk-default-form-one-column";
+      break;
+  }
+
+  // debugger;
+
+  // repoint the children because they are in a region and we need to not render the region
+  // to take the children and create components for them, put in an array and pass as the
+  // defaultForm kids
+  const arChildren = getPConnect().getChildren()[0].getPConnect().getChildren();
+  // eslint-disable-next-line react/no-array-index-key
+  const dfChildren = arChildren.map((kid, idx) => createElement(createPConnectComponent(), {...kid, key: idx}));
+
+  return (
+    <div className={divClass}>
+      {dfChildren}
+    </div>
+  )
+}
+
+DefaultForm.propTypes = {
+  // children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  NumCols: PropTypes.string
+};
+
+DefaultForm.defaultProps = {
+  NumCols: "1"
+};

package/lib/templates/DefaultForm/index.tsx

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

package/lib/templates/Details/Details/Details.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+// import PropTypes from "prop-types";
+import Grid from '@material-ui/core/Grid';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+
+export default function Details(props) {
+  const { children } = props;
+  const arFields: Array<any> = [];
+
+  for (const child of children) {
+    const theChildPConn = child.props.getPConnect();
+    theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+    theChildPConn.setInheritedProp('readOnly', true);
+    const theChildrenOfChild = theChildPConn.getChildren();
+    arFields.push(theChildrenOfChild);
+  }
+
+  return (
+      <div id="DetailsOneColumn">
+        <Grid container spacing={1}>
+          <Grid item xs={12}>
+            <DetailsFields fields={arFields[0]} />
+          </Grid>
+        </Grid>
+      </div>
+    );
+}
+
+Details.defaultProps = {
+  // children: []
+}
+
+Details.propTypes = {
+  // children: PropTypes.arrayOf(PropTypes.node)
+};

package/lib/templates/Details/Details/index.tsx

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

package/lib/templates/Details/DetailsSubTabs/DetailsSubTabs.tsx

@@ -0,0 +1,65 @@
+import { useState, useEffect, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/react-sdk-components/lib/components/templates/SubTabs/tabUtils';
+import React from 'react';
+import { Tab, Tabs, TextField } from '@material-ui/core';
+import { TabContext, TabPanel } from '@material-ui/lab';
+
+export default function DetailsSubTabs(props) {
+  const { children, label, showLabel, getPConnect } = props;
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
+
+  const defaultTabIndex = 0;
+  const deferLoadedTabs = children[0];
+  let availableTabs = [];
+
+  useEffect(() => {
+    availableTabs = getVisibleTabs(deferLoadedTabs, 'detailsSubTabs');
+  }, [availableTabs]);
+
+  const [currentTabId, setCurrentTabId] = useState(defaultTabIndex.toString());
+
+  const [tabItems, setTabitem] = useState([]);
+  useEffect(() => {
+    const tempTabItems = getTransientTabs(availableTabs, currentTabId, tabItems);
+    setTabitem(tempTabItems);
+  }, [currentTabId]);
+
+  const handleTabClick = (id, index: string) => {
+    setCurrentTabId(index);
+    tabClick(index, availableTabs, currentTabId, setCurrentTabId, tabItems);
+  };
+
+  return (
+    <Fragment>
+      {propsToUse.showLabel && <TextField>{propsToUse.label}</TextField>}
+      <TabContext value={currentTabId.toString()}>
+        <Tabs onChange={handleTabClick} value={currentTabId}>
+          {tabItems.map((tab: any) => (
+            <Tab key={tab.id} label={tab.name} value={tab.id} />
+          ))}
+        </Tabs>
+
+        {tabItems.map((tab: any) => (
+          <TabPanel key={tab.id} value={tab.id} tabIndex={+tab.id}>
+            <div>{tab.content ? tab.content : 'No content exists'}</div>
+          </TabPanel>
+        ))}
+      </TabContext>
+    </Fragment>
+  );
+}
+
+DetailsSubTabs.defaultProps = {
+  children: [],
+  label: undefined,
+  showLabel: true
+};
+
+DetailsSubTabs.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node),
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired
+};

package/lib/templates/Details/DetailsSubTabs/index.tsx

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

package/lib/templates/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+// import PropTypes from "prop-types";
+import Grid from '@material-ui/core/Grid';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+
+export default function DetailsThreeColumn(props) {
+  const { children } = props;
+  const arFields: Array<any> = [];
+
+  for (const child of children) {
+    const theChildPConn = child.props.getPConnect();
+    theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+    theChildPConn.setInheritedProp('readOnly', true);
+    const theChildrenOfChild = theChildPConn.getChildren();
+    arFields.push(theChildrenOfChild);
+  }
+
+  if (arFields.length !== 3) {
+    // eslint-disable-next-line no-console
+    console.error(`DetailsThreeColumn expects 3 children and received ${arFields.length}`);
+  }
+
+  return (
+    <div id='DetailsThreeColumn'>
+      <Grid container spacing={1}>
+        <Grid item xs={4}>
+          <DetailsFields fields={arFields[0]} />
+        </Grid>
+        <Grid item xs={4}>
+          <DetailsFields fields={arFields[1]} />
+        </Grid>
+        <Grid item xs={4}>
+          <DetailsFields fields={arFields[2]} />
+        </Grid>
+      </Grid>
+    </div>
+  );
+}
+
+DetailsThreeColumn.propTypes = {
+  // showLabel: PropTypes.bool,
+  // label: PropTypes.string,
+  // getPConnect: PropTypes.func.isRequired,
+  // template: PropTypes.string.isRequired
+};

package/lib/templates/Details/DetailsThreeColumn/index.tsx

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

package/lib/templates/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+// import PropTypes from "prop-types";
+import Grid from '@material-ui/core/Grid';
+import DetailsFields from '@pega/react-sdk-components/lib/components/designSystemExtensions/DetailsFields';
+
+export default function DetailsTwoColumn(props) {
+  const { children } = props;
+  const arFields: Array<any> = [];
+
+  for (const child of children) {
+    const theChildPConn = child.props.getPConnect();
+    theChildPConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+    theChildPConn.setInheritedProp('readOnly', true);
+    const theChildrenOfChild = theChildPConn.getChildren();
+    arFields.push(theChildrenOfChild);
+  }
+
+  if (arFields.length !== 2) {
+    // eslint-disable-next-line no-console
+    console.error(`DetailsTwoColumn expects 2 children and received ${arFields.length}`);
+  }
+
+
+  return (
+    <div id="DetailsTwoColumn">
+      <Grid container spacing={1}>
+        <Grid item xs={6}>
+          <DetailsFields fields={arFields[0]} />
+        </Grid>
+        <Grid item xs={6}>
+          <DetailsFields fields={arFields[1]} />
+        </Grid>
+      </Grid>
+    </div>
+  )
+}
+
+DetailsTwoColumn.propTypes = {
+  // showLabel: PropTypes.bool,
+  // label: PropTypes.string,
+  // getPConnect: PropTypes.func.isRequired,
+  // template: PropTypes.string.isRequired
+};

package/lib/templates/Details/DetailsTwoColumn/index.tsx

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

package/lib/templates/FieldGroupTemplate/FieldGroupTemplate.tsx

@@ -0,0 +1,94 @@
+/* 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/designSystemExtensions/FieldGroup';
+import FieldGroupList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldGroupList';
+import { getReferenceList, buildView } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
+
+declare const PCore: any;
+
+export default function FieldGroupTemplate(props) {
+  const {
+    referenceList,
+    renderMode,
+    contextClass,
+    getPConnect,
+    lookForChildInConfig,
+    heading,
+    displayMode
+  } = 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 addRecord = () => {
+    if (PCore.getPCoreVersion()?.includes('8.7')) {
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length, pageReference);
+    } else {
+      pConn.getListActions().insert({ classID: contextClass }, referenceList.length);
+    }
+  }
+
+  if (!isReadonlyMode) {
+    const addFieldGroupItem = () => {
+      addRecord();
+    };
+    const deleteFieldGroupItem = index => {
+      if (PCore.getPCoreVersion()?.includes('8.7')) {
+        pConn.getListActions().deleteEntry(index, pageReference);
+      } else {
+        pConn.getListActions().deleteEntry(index);
+      }
+    };
+    if (referenceList.length === 0) {
+      addFieldGroupItem();
+    }
+
+    const MemoisedChildren = useMemo(() => {
+      return referenceList.map((item, index) => ({
+        id: index,
+        name: `${HEADING} ${index + 1}`,
+        children: buildView(pConn, index, lookForChildInConfig)
+      }));
+    }, [referenceList?.length]);
+
+    return (
+      <FieldGroupList
+        items={MemoisedChildren}
+        onAdd={addFieldGroupItem}
+        onDelete={deleteFieldGroupItem}
+      />
+    );
+  }
+
+  pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+  const memoisedReadOnlyList = useMemo(() => {
+    return referenceList.map((item, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <FieldGroup item={item} key={index} name={`${HEADING} ${index + 1}`} />
+    ));
+  }, []);
+
+  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/templates/FieldGroupTemplate/index.tsx

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

package/lib/templates/InlineDashboard/InlineDashboard.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+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) {
+  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>
+      )}
+    </>
+  );
+}
+
+InlineDashboard.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired
+  // template: PropTypes.string.isRequired
+};

package/lib/templates/InlineDashboard/index.tsx

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

package/lib/templates/InlineDashboardPage/InlineDashboardPage.tsx

@@ -0,0 +1,41 @@
+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/templates/InlineDashboard';
+
+export default function InlineDashboardPage(props) {
+  const { children, getPConnect } = 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} />;
+}
+
+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/templates/InlineDashboardPage/index.tsx

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

package/lib/templates/ListPage/ListPage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import ListView from '@pega/react-sdk-components/lib/components/templates/ListView';
+
+export default function ListPage(props) {
+
+  return (
+    <ListView  {...props}></ListView>
+  )
+}
+
+ListPage.defaultProps = {
+  parameters: undefined
+};
+
+ListPage.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  parameters: PropTypes.objectOf(PropTypes.any)
+};

package/lib/templates/ListPage/index.tsx

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

package/lib/templates/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;
+}