@pega/react-sdk-overrides 0.23.17 → 0.23.18

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

@@ -1,46 +1,77 @@
-import React from 'react';
+import React, { createElement } 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 createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
 
 export default function Details(props) {
-  const { children, label, showLabel, getPConnect } = props;
-  const arFields: Array<any> = [];
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
 
   // Get the inherited props from the parent to determine label settings
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
-  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);
+  // 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 (
-    <div id='DetailsOneColumn'>
-      {propsToUse.showLabel && (
-        <div className='template-title-container'>
-          <span>{propsToUse.label}</span>
-        </div>
+    <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={12} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
+        </Grid>
       )}
       <Grid container spacing={1}>
-        <Grid item xs={12}>
-          <DetailsFields fields={arFields[0]} />
-        </Grid>
+        {children.map((child, i) => (
+          <Grid item xs={12} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
       </Grid>
-    </div>
+    </FieldGroup>
   );
 }
 
 Details.defaultProps = {
   label: undefined,
-  showLabel: true
+  showLabel: true,
+  showHighlightedData: false
 };
 
 Details.propTypes = {
   showLabel: PropTypes.bool,
   label: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired
+  getPConnect: PropTypes.func.isRequired,
+  showHighlightedData: PropTypes.bool
 };

package/lib/template/Details/DetailsThreeColumn/DetailsThreeColumn.tsx

@@ -1,45 +1,77 @@
-import React from 'react';
-// import PropTypes from "prop-types";
+import React, { createElement } 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 createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
 
 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);
-  }
+  const { label, showLabel, getPConnect, showHighlightedData } = 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()
+      })
+    );
 
-  if (arFields.length !== 3) {
-    // eslint-disable-next-line no-console
-    console.error(`DetailsThreeColumn expects 3 children and received ${arFields.length}`);
+  // 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 (
-    <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]} />
+    <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={4} key={`hf-${i + 1}`}>
+              {child}
+            </Grid>
+          ))}
         </Grid>
+      )}
+      <Grid container spacing={1}>
+        {children.map((child, i) => (
+          <Grid item xs={4} key={`r-${i + 1}`}>
+            {child}
+          </Grid>
+        ))}
       </Grid>
-    </div>
+    </FieldGroup>
   );
 }
 
+DetailsThreeColumn.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
 DetailsThreeColumn.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/Details/DetailsTwoColumn/DetailsTwoColumn.tsx

@@ -1,43 +1,77 @@
-import React from "react";
-// import PropTypes from "prop-types";
+import React, { createElement } 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 createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
+import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
 
 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);
-  }
+  const { label, showLabel, getPConnect, showHighlightedData } = props;
 
-  if (arFields.length !== 2) {
-    // eslint-disable-next-line no-console
-    console.error(`DetailsTwoColumn expects 2 children and received ${arFields.length}`);
-  }
+  // 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);
+    });
+  }
 
   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]} />
+    <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>
-    </div>
-  )
+    </FieldGroup>
+  );
 }
 
+DetailsTwoColumn.defaultProps = {
+  label: undefined,
+  showLabel: true,
+  showHighlightedData: false
+};
+
 DetailsTwoColumn.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/ListView/DefaultViewMeta.js

@@ -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;
+}