@pega/react-sdk-overrides 0.23.17 → 0.23.18

package/lib/template/NarrowWide/NarrowWideDetails/NarrowWideDetails.tsx

@@ -1,53 +1,80 @@
-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/designSystemExtension/DetailsFields';
+import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import { GridSize } 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';
+
+const COLUMN_WIDTHS = [4, 8];
 
 export default function NarrowWideDetails(props) {
-  const { a, b, children } = props;
-  const arFields: Array<any> = [];
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
 
-  for (const child of children) {
-    const theChildPConn = child.props.getPConnect();
-    const theChildrenOfChild = theChildPConn.getChildren();
-    arFields.push(theChildrenOfChild);
-  }
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
-  if (arFields.length !== 2) {
-    // eslint-disable-next-line no-console
-    console.error(`NarrowWideDetails expects 2 children and received ${arFields.length}`);
-  }
+  // 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);
+    });
+  }
 
   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>
-  )
+    <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={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
 }
 
+NarrowWideDetails.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
 NarrowWideDetails.propTypes = {
-  // showLabel: PropTypes.bool,
-  // label: PropTypes.string,
-  // getPConnect: PropTypes.func.isRequired,
-  // template: PropTypes.string.isRequired
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
 };

package/lib/template/WideNarrow/WideNarrowDetails/WideNarrowDetails.tsx

@@ -1,54 +1,80 @@
-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/designSystemExtension/DetailsFields';
+import React, { createElement } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import { GridSize } 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';
+
+const COLUMN_WIDTHS = [8, 4];
 
 export default function WideNarrowDetails(props) {
-  const { a, b, children } = props;
-  const arFields: Array<any> = [];
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
 
-  for (const child of children) {
-    const theChildPConn = child.props.getPConnect();
-    const theChildrenOfChild = theChildPConn.getChildren();
-    arFields.push(theChildrenOfChild);
-  }
+  // Get the inherited props from the parent to determine label settings
+  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
-  if (arFields.length !== 2) {
-    // eslint-disable-next-line no-console
-    console.error(`WideNarrowDetails expects 2 children and received ${arFields.length}`);
-  }
+  // 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';
 
-  return (
-    <React.Fragment>
-    {children && children.length === 2 &&
-      <div className="psdk-wide-narrow-column">
-        <div className="psdk-wide-column-column">
-          <DetailsFields fields={arFields[0]} />
-        </div>
-        <div className="psdk-narrow-column-column">
-          <DetailsFields fields={arFields[1]} />
-        </div>
-      </div>
-    }
-    {a && b &&
-      <div className="psdk-wide-narrow-column">
-        <div className="psdk-wide-column-column">
-          {a}
-        </div>
-        <div className="psdk-narrow-column-column">
-          {b}
-        </div>
-      </div>
-    }
-    </React.Fragment>
-  )
+      // Mark as status display when using pyStatusWork
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
+      }
 
+      return getPConnect().createComponent(field);
+    });
+  }
+
+  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={COLUMN_WIDTHS[i] as GridSize} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={COLUMN_WIDTHS[i] as GridSize} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
+      </Grid>
+    </FieldGroup>
+  );
 }
 
+WideNarrowDetails.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
 WideNarrowDetails.propTypes = {
-  // showLabel: PropTypes.bool,
-  // label: PropTypes.string,
-  // getPConnect: PropTypes.func.isRequired,
-  // template: PropTypes.string.isRequired
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
 };

package/lib/widget/Attachment/Attachment.css

@@ -16,3 +16,10 @@
   position: absolute;
   left: 47%;
 }
+
+file-label::after {
+  display: inline;
+  content: " *";
+  vertical-align: top;
+  color: rgb(217, 28, 41);
+}

package/lib/widget/Attachment/Attachment.tsx

@@ -23,7 +23,7 @@ export default function Attachment(props) {
   );
   let arFileList$: Array<any> = [];
   const pConn = getPConnect();
-
+  const caseID = PCore.getStoreValue('.pyID', 'caseInfo.content', pConn.getContextName());
   let fileTemp: any = {};
 
   let categoryName = '';
@@ -35,6 +35,13 @@ export default function Attachment(props) {
   valueRef = valueRef.indexOf('.') === 0 ? valueRef.substring(1) : valueRef;
   const [file, setFile] = useState(fileTemp);
 
+  const resetAttachmentStoredState = () => {
+    PCore.getStateUtils().updateState(pConn.getContextName(), 'attachmentsList', undefined, {
+      pageReference: 'context_data',
+      isArrayDeepMerge: false
+    });
+  };
+
   const fileDownload = (data, fileName, ext) => {
     const fileData = ext ? `${fileName}.${ext}` : fileName;
     download(atob(data), fileData);
@@ -396,9 +403,36 @@ export default function Attachment(props) {
           };
         });
       }
+
+      if (fileTemp) {
+        const currentAttachmentList = getCurrentAttachmentsList(pConn.getContextName());
+        const index = currentAttachmentList.findIndex(element => element.props.ID === fileTemp.props.ID);
+        let tempFiles: any = [];
+        if (index < 0) {
+          tempFiles = [fileTemp];
+        }
+        PCore.getStateUtils().updateState(
+          pConn.getContextName(),
+          'attachmentsList',
+          [...currentAttachmentList, ...tempFiles],
+          {
+            pageReference: 'context_data',
+            isArrayDeepMerge: false
+          }
+        );
+      }
+
+      PCore.getPubSubUtils().subscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION,
+        resetAttachmentStoredState,
+        caseID
+      );
+      return () => {
+        PCore.getPubSubUtils().unsubscribe(PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.ASSIGNMENT_SUBMISSION, caseID);
+      };
     }
   }
-  }, [""]);
+  }, []);
 
   let content = (
     <div className='file-div'>
@@ -432,7 +466,7 @@ export default function Attachment(props) {
 
   return (
     <div className='file-upload-container'>
-      <span className='label'>{label}</span>
+      <span className={`label ${required ? 'file-label' : ''}`}>{label}</span>
       <section>{content}</section>
     </div>
   );

package/lib/widget/SummaryItem/SummaryItem.tsx

@@ -68,7 +68,7 @@ export default function SummaryItem(props) {
             onClose={handleClose}
           >
           {item.actions && item.actions.map((option) => (
-            <MenuItem style={{fontSize: '14px'}} key={option.id} onClick={option.onClick}>
+            <MenuItem style={{fontSize: '14px'}} key={option.id || option.text} onClick={option.onClick}>
               {option.text}
             </MenuItem>
           ))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/react-sdk-overrides",
-  "version": "0.23.17",
+  "version": "0.23.18",
   "description": "React SDK - Code for overriding components",
   "_filesComment": "During packing, npm ignores everything NOT in the files list",
   "files": [

package/lib/template/utils.ts

@@ -1,23 +0,0 @@
-//  This file is adapted from React DX components/template/utils.js
-
-export function getAllFields(pConnect: any) {
-  const metadata = pConnect.getRawMetadata();
-  let allFields = [];
-  if (metadata.children && metadata.children.map) {
-    allFields = metadata.children.map((fields) => {
-      const children = fields.children instanceof Array ? fields.children : [];
-      return children.map((field) => field.config);
-    });
-  }
-  return allFields;
-}
-
-export function filterForFieldValueList(fields : any) {
-  return fields
-    .filter(({ visibility }) => visibility !== false)
-    .map(({ value, label }) => ({
-      id: label.toLowerCase(),
-      name: label,
-      value
-    }));
-}