@pega/react-sdk-overrides 0.23.6

package/lib/templates/ListView/index.tsx

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

package/lib/templates/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -0,0 +1,42 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+declare const PCore;
+export default function MultiReferenceReadOnly(props) {
+  const { getPConnect, label, hideLabel, config } = props;
+  const { referenceList, readonlyContextList } = config;
+
+  // When referenceList does not contain selected values, it should be replaced with readonlyContextList while calling SimpleTableManual
+  let readonlyContextObject;
+  if ( !PCore.getAnnotationUtils().isProperty(referenceList)) {
+    readonlyContextObject = {
+      referenceList: readonlyContextList
+    };
+  }
+
+  const component =  getPConnect().createComponent({
+    type: "SimpleTable",
+    config: {
+      ...config,
+      ...readonlyContextObject,
+      label,
+      hideLabel
+    }
+  });
+
+   return (
+    <React.Fragment>{component}</React.Fragment>
+  )
+}
+
+MultiReferenceReadOnly.defaultProps = {
+  label: "",
+  hideLabel: false
+};
+
+MultiReferenceReadOnly.propTypes = {
+  config: PropTypes.object.isRequired,
+  getPConnect: PropTypes.func.isRequired,
+  label: PropTypes.string,
+  hideLabel: PropTypes.bool
+};

package/lib/templates/MultiReferenceReadOnly/index.tsx

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

package/lib/templates/NarrowWide/NarrowWide/NarrowWide.css

@@ -0,0 +1,21 @@
+.psdk-narrow-wide-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-narrow-wide-column .psdk-narrow-column-column {
+  width: 30%;
+  float: left;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  height: 100%;
+
+}
+
+.psdk-narrow-wide-column .psdk-wide-column-column {
+  width: 70%;
+  float: left;
+  padding: 0rem 0rem 0rem 0.3125rem;
+  height: 100%;
+
+}

package/lib/templates/NarrowWide/NarrowWide/NarrowWide.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import './NarrowWide.css';
+
+export default function NarrowWide(props) {
+  // const {a, b /*, cols, icon, title */ } = props;
+  const {a, b, children} = props;
+
+  return (
+    <React.Fragment>
+    {children && children.length === 2 &&
+      <div className="psdk-narrow-wide-column">
+      <div className="psdk-narrow-column-column">
+        {children[0]}
+      </div>
+      <div className="psdk-wide-column-column">
+        {children[1]}
+      </div>
+    </div>
+    }
+    {a && b &&
+      <div className="psdk-narrow-wide-column">
+      <div className="psdk-narrow-column-column">
+        {a}
+      </div>
+      <div className="psdk-wide-column-column">
+        {b}
+      </div>
+    </div>
+    }
+    </React.Fragment>
+
+  )
+
+}

package/lib/templates/NarrowWide/NarrowWide/index.tsx

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

package/lib/templates/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -0,0 +1,53 @@
+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 NarrowWideDetails(props) {
+  const { a, b, children } = props;
+  const arFields: Array<any> = [];
+
+  for (const child of children) {
+    const theChildPConn = child.props.getPConnect();
+    const theChildrenOfChild = theChildPConn.getChildren();
+    arFields.push(theChildrenOfChild);
+  }
+
+  if (arFields.length !== 2) {
+    // eslint-disable-next-line no-console
+    console.error(`NarrowWideDetails expects 2 children and received ${arFields.length}`);
+  }
+
+
+  return (
+    <React.Fragment>
+    {children && children.length === 2 &&
+      <div className="psdk-narrow-wide-column">
+        <div className="psdk-narrow-column-column">
+          <DetailsFields fields={arFields[0]} />
+        </div>
+        <div className="psdk-wide-column-column">
+          <DetailsFields fields={arFields[1]} />
+        </div>
+      </div>
+    }
+    {a && b &&
+      <div className="psdk-narrow-wide-column">
+        <div className="psdk-narrow-column-column">
+          {a}
+        </div>
+        <div className="psdk-wide-column-column">
+          {b}
+        </div>
+      </div>
+    }
+    </React.Fragment>
+  )
+}
+
+NarrowWideDetails.propTypes = {
+  // showLabel: PropTypes.bool,
+  // label: PropTypes.string,
+  // getPConnect: PropTypes.func.isRequired,
+  // template: PropTypes.string.isRequired
+};

package/lib/templates/NarrowWide/NarrowWideDetails/index.tsx

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

package/lib/templates/NarrowWide/NarrowWideForm/NarrowWideForm.css

@@ -0,0 +1,21 @@
+.psdk-narrow-wide-column {
+  display: flow-root;
+  height: 100%;
+}
+
+/* Create two equal columns that floats next to each other */
+.psdk-narrow-wide-column .psdk-narrow-column-column {
+  width: 30%;
+  float: left;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  height: 100%;
+
+}
+
+.psdk-narrow-wide-column .psdk-wide-column-column {
+  width: 70%;
+  float: left;
+  padding: 0rem 0rem 0rem 0.3125rem;
+  height: 100%;
+
+}

package/lib/templates/NarrowWide/NarrowWideForm/NarrowWideForm.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import './NarrowWideForm.css';
+
+export default function NarrowWideForm(props) {
+  const {children} = props;
+
+  return (
+    <React.Fragment>
+    {children && children.length === 2 &&
+      <div className="psdk-narrow-wide-column">
+      <div className="psdk-narrow-column-column">
+        {children[0]}
+      </div>
+      <div className="psdk-wide-column-column">
+        {children[1]}
+      </div>
+    </div>
+    }
+    </React.Fragment>
+
+  )
+
+}

package/lib/templates/NarrowWide/NarrowWideForm/index.tsx

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

package/lib/templates/NarrowWide/NarrowWidePage/NarrowWidePage.tsx

@@ -0,0 +1,38 @@
+import React, { Children } from "react";
+import PropTypes from "prop-types";
+
+// import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
+import NarrowWide from '@pega/react-sdk-components/lib/components/templates/NarrowWide';
+
+/*
+ * The wrapper handles knowing how to take in just children and mapping
+ * to the Cosmos template.
+ */
+export default function NarrowWidePage(props) {
+  const { children, title, templateCol, icon } = props;
+  const childArray = Children.toArray(children);
+
+  return (
+    <div>
+    <NarrowWide
+        a={childArray[0]}
+        b={childArray[1]}
+        title={title}
+        cols={templateCol}
+        icon={icon?.replace("pi pi-", "")}
+      />
+    </div>
+  );
+}
+
+NarrowWidePage.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  title: PropTypes.string.isRequired,
+  templateCol: PropTypes.string,
+  icon: PropTypes.string
+};
+
+NarrowWidePage.defaultProps = {
+  templateCol: "1fr 1fr",
+  icon: ""
+};

package/lib/templates/NarrowWide/NarrowWidePage/index.tsx

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

package/lib/templates/OneColumn/OneColumn/OneColumn.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid } from "@material-ui/core";
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((/* theme */) => ({
+  colStyles: {
+    display: "grid",
+    gap: "1rem",
+    alignContent: "baseline",
+  },
+}));
+
+
+export default function OneColumn(props) {
+  const classes = useStyles();
+
+  const { children} = props;
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12} className={classes.colStyles}>
+        {children.map(child => { return child; } )}
+      </Grid>
+    </Grid>
+  )
+}
+
+OneColumn.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  // template: PropTypes.string.isRequired
+};

package/lib/templates/OneColumn/OneColumn/index.tsx

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

package/lib/templates/OneColumn/OneColumnPage/OneColumnPage.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import OneColumn from '@pega/react-sdk-components/lib/components/templates/OneColumn';
+
+/*
+ * The wrapper handles knowing how to take in just children
+ *  and mapping to the TwoColumn template.
+ */
+export default function OneColumnPage(props) {
+
+  return (
+    <OneColumn
+       {...props}
+    />
+  );
+}
+
+OneColumnPage.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+};
+
+OneColumnPage.defaultProps = {
+};

package/lib/templates/OneColumn/OneColumnPage/index.tsx

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

package/lib/templates/OneColumn/OneColumnTab/OneColumnTab.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export default function OneColumnTab(props) {
+  const { children} = props;
+
+  return (
+    <div id="OneColumnTab">
+      {children}
+    </div>
+  )
+}
+
+OneColumnTab.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  // template: PropTypes.string.isRequired
+};

package/lib/templates/OneColumn/OneColumnTab/index.tsx

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

package/lib/templates/PromotedFilters/PromotedFilters.css

@@ -0,0 +1,7 @@
+.psdk-grid-filter {
+  display: grid;
+  grid-template-columns: repeat(2,minmax(0,1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

package/lib/templates/PromotedFilters/PromotedFilters.tsx

@@ -0,0 +1,160 @@
+import React, { useCallback, useMemo, useState, createElement, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+
+import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import ListView from '@pega/react-sdk-components/lib/components/templates/ListView';
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import './PromotedFilters.css';
+
+declare const PCore;
+const localeCategory = 'SimpleTable';
+const SUPPORTED_TYPES_IN_PROMOTED_FILTERS = [
+  'TextInput',
+  'Percentage',
+  'Email',
+  'Integer',
+  'Decimal',
+  'Checkbox',
+  'DateTime',
+  'Date',
+  'Time',
+  'Text',
+  'TextArea',
+  'Currency',
+  'URL',
+  'RichText'
+];
+
+function Filters({ filters, transientItemID, localeReference }) {
+  return filters.map((filter, index) => {
+    const filterClone = { ...filter };
+    // convert any field which is not supported to TextInput and delete the placeholder as it may contain placeholder specific to original type.
+    if (!SUPPORTED_TYPES_IN_PROMOTED_FILTERS.includes(filterClone.type)) {
+      filterClone.type = 'TextInput';
+      delete filterClone.config.placeholder;
+    }
+    filterClone.config.contextName = transientItemID;
+    filterClone.config.readOnly = false;
+    filterClone.config.context = transientItemID;
+    filterClone.config.localeReference = localeReference;
+    const c11nEnv = PCore.createPConnect({
+      meta: filterClone,
+      options: {
+        hasForm: true,
+        contextName: transientItemID
+      }
+    });
+
+    // eslint-disable-next-line react/no-array-index-key
+    return <React.Fragment key={index}>{createElement(createPConnectComponent(), c11nEnv)}</React.Fragment>;
+  });
+}
+
+function isValidInput(input) {
+  return Object.values(input).findIndex((v) => v) >= 0;
+}
+
+export default function PromotedFilters(props) {
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const { getPConnect, viewName, filters, listViewProps, pageClass } = props;
+  const [initTable, setInitTable] = useState(false);
+  const [payload, setPayload] = useState({});
+  const filtersProperties = {};
+
+  filters.forEach((filter) => {
+    filtersProperties[PCore.getAnnotationUtils().getPropertyName(filter.config.value)] = '';
+  });
+
+  const transientItemID = useMemo(() => {
+    const filtersWithClassID = {
+      ...filtersProperties,
+      classID: pageClass
+    };
+    return getPConnect().getContainerManager().addTransientItem({
+      id: viewName,
+      data: filtersWithClassID
+    });
+  }, []);
+
+  function formatPromotedFilters(promotedFilters) {
+    return Object.entries(promotedFilters).reduce((acc, [field, value]) => {
+      if (value) {
+        acc[field] = {
+          lhs: {
+            field
+          },
+          comparator: "EQ",
+          rhs: {
+            value
+          }
+        };
+      }
+      return acc;
+    }, {});
+  }
+
+  const getFilterData = useCallback(
+    (e) => {
+      e.preventDefault(); // to prevent un-intended forms submission.
+
+      const changes = PCore.getFormUtils().getChanges(transientItemID);
+      const formValues = {};
+      Object.keys(changes).forEach((key) => {
+        if (!['context_data', 'pageInstructions'].includes(key)) {
+          formValues[key] = changes[key];
+        }
+      });
+      const promotedFilters = formatPromotedFilters(formValues);
+      if (PCore.getFormUtils().isFormValid(transientItemID) && isValidInput(formValues)) {
+        setInitTable(true);
+        const Query: any = {
+          dataViewParameters: {}
+        };
+
+        if (!Utils.isEmptyObject(promotedFilters)) {
+          Query.query = { filter: { filterConditions: promotedFilters } };
+        }
+        setPayload(Query);
+      }
+    },
+    [transientItemID]
+  );
+
+  const clearFilterData = useCallback(() => {
+    PCore.getContainerUtils().clearTransientData(transientItemID);
+    setInitTable(false);
+    getPConnect()?.getListActions?.()?.setSelectedRows([]); // Clear the selection (if any made by user)
+  }, [transientItemID]);
+
+  return (
+    <Fragment>
+      <div>{listViewProps.title}</div>
+      <div className="psdk-grid-filter">
+        <Filters filters={filters} transientItemID={transientItemID} localeReference={listViewProps.localeReference}/>
+      </div>
+      <div>
+        <Button key='1' type='button' onClick={clearFilterData} data-testid='clear' variant='contained' color='primary'>
+            {localizedVal('Clear', localeCategory)}
+        </Button>
+        <Button style={{float: 'right'}} key='2' type='submit' onClick={getFilterData} data-testid='search' variant='contained' color='primary'>
+            {localizedVal('Search', localeCategory)}
+        </Button>
+      </div>
+      {initTable && <ListView {...listViewProps} title='' payload={payload}
+         isSearchable
+         tableDisplay={{
+           show: initTable
+         }}
+       />}
+    </Fragment>
+  );
+}
+
+PromotedFilters.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  viewName: PropTypes.string.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  listViewProps: PropTypes.objectOf(PropTypes.any).isRequired,
+  pageClass: PropTypes.string.isRequired
+};

package/lib/templates/PromotedFilters/index.tsx

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

package/lib/templates/SimpleTable/SimpleTable/SimpleTable.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import FieldGroupTemplate from '@pega/react-sdk-components/lib/components/templates/FieldGroupTemplate/';
+import SimpleTableManual from '@pega/react-sdk-components/lib/components/templates/SimpleTableManual';
+
+declare const PCore: any;
+
+export default function SimpleTable(props) {
+  const { getPConnect, multiRecordDisplayAs, allowTableEdit } = props;
+
+  let { contextClass } = props;
+  if (!contextClass) {
+    let listName = getPConnect().getComponentConfig().referenceList;
+    listName = PCore.getAnnotationUtils().getPropertyName(listName);
+    contextClass = getPConnect().getFieldMetadata(listName)?.pageClass;
+  }
+  if (multiRecordDisplayAs === 'fieldGroup') {
+    const fieldGroupProps = { ...props, contextClass };
+    return <FieldGroupTemplate {...fieldGroupProps} />;
+  } else {
+    const simpleTableManualProps = {...props, contextClass};
+    if (allowTableEdit === false) {
+      simpleTableManualProps.hideAddRow = true;
+      simpleTableManualProps.hideDeleteRow = true;
+      simpleTableManualProps.disableDragDrop = true;
+    }
+    return <SimpleTableManual {...simpleTableManualProps} />;
+  }
+}

package/lib/templates/SimpleTable/SimpleTable/index.tsx

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