@pega/dx-component-builder-sdk 0.1.26 → 0.1.27

package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache

@@ -26,7 +26,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     testId,
     fieldMetadata,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -34,11 +35,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
 
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
-  if(displayMode === 'LABELS_LEFT'){
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field}/>
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -63,7 +65,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       required={required}
       disabled={disabled}
       onChange={onChange}
-      onBlur={onBlur}
+      onBlur={!readOnly ? onBlur : undefined}
       error={status === 'error'}
       label={label}
       value={value}

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache

@@ -26,7 +26,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     testId,
     fieldMetadata,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -34,11 +35,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
 
   let readOnlyProp = {};
 
-  if(displayMode === 'LABELS_LEFT'){
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field}/>
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -67,7 +69,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       required={required}
       disabled={disabled}
       onChange={onChange}
-      onBlur={onBlur}
+      onBlur={!readOnly ? onBlur : undefined}
       error={status === 'error'}
       label={label}
       value={value}

package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache

@@ -25,7 +25,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -35,11 +36,12 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     'data-test-id': testId
   };
 
-  if(displayMode === 'LABELS_LEFT'){
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field}/>
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -71,7 +73,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     );
   }
 
-
   const handleChange = inputVal => {
     let phoneValue = inputVal && inputVal.replace(/\D+/g, '');
     phoneValue = `+${phoneValue}`;
@@ -84,7 +85,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     onBlur(event);
   };
 
-
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <MuiPhoneNumber
@@ -97,7 +97,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       required={required}
       disabled={disabled}
       onChange={handleChange}
-      onBlur={handleBlur}
+      onBlur={!readOnly ? handleBlur : undefined}
       error={status === 'error'}
       label={label}
       value={value}

package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache

@@ -25,15 +25,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     onBlur,
     readOnly,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if(displayMode === 'LABELS_LEFT'){
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field}/>
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -52,7 +54,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       required={required}
       disabled={disabled}
       onChange={onChange}
-      onBlur={onBlur}
+      onBlur={!readOnly ? onBlur : undefined}
       error={status === 'error'}
       label={label}
       value={value}

package/src/tasks/create/templates/SDK-React/field/TimeofDay/index.tsx.mustache

@@ -25,15 +25,17 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     onChange,
     readOnly,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
   if (displayMode === 'LABELS_LEFT') {
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
   }
 
   if (readOnly) {

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -154,7 +154,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     return theDataRows;
   }
 
-
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <div id="CaseHistory">
@@ -171,13 +170,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     </div>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
-
 }
 
-{{COMPONENT_CLASS_NAME}}.defaultProps = {
-
-};
-
 {{COMPONENT_CLASS_NAME}}.propTypes = {
   getPConnect: PropTypes.func.isRequired
 };

package/src/tasks/create/templates/SDK-React/widget/PAGE/index.tsx.mustache

@@ -37,7 +37,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
     window.open(whatsnewlink);
   }
 
-
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <Card title="AppAnnouncement" className={classes.root}>

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.jsx.mustache

@@ -27,14 +27,7 @@ window.PCore.getUserApi = () => {
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
 
   const props = {
-    label: configProps.label,
-    createLabel: configProps.createLabel,
-    updateLabel: configProps.updateLabel,
-    createOperator: configProps.createOperator,
-    updateOperator: configProps.updateOperator,
-    createDateTime: configProps.createDateTime,
-    updateDateTime: configProps.updateDateTime,
-    hideLabel: configProps.hideLabel,
+    caseOpConfig: configProps,
 
     getPConnect: () => {
       return {

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unused-prop-types */
 import React, {useState} from "react";
 import PropTypes from "prop-types";
 import TextField from '@material-ui/core/TextField';
@@ -11,7 +10,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
-declare const PCore;
+declare const PCore: any;
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -32,36 +31,25 @@ const useStyles = makeStyles((theme) => ({
 // any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props) {
   // const componentName = "Operator";
-  const {
-    label,
-    createLabel,
-    updateLabel,
-    createOperator,
-    updateOperator,
-    createDateTime,
-    updateDateTime
-  } = props;
-
-
+  const { caseOpConfig } = props;
   const classes = useStyles();
 
-
-  const fieldLabel = label.toLowerCase();
+  const fieldLabel = caseOpConfig.label.toLowerCase();
   let caseOpLabel = "---";
   let caseOpName = "---";
   let caseOpId = "";
   let caseTime = null;
 
   if (fieldLabel === "create operator") {
-    caseOpLabel = createLabel;
-    caseOpName = createOperator.userName;
-    caseTime = createDateTime;
-    caseOpId = createOperator.userId;
+    caseOpLabel = caseOpConfig.createLabel;
+    caseOpName = caseOpConfig.createOperator.userName;
+    caseTime = caseOpConfig.createDateTime;
+    caseOpId = caseOpConfig.createOperator.userId;
   } else if (fieldLabel === "update operator") {
-    caseOpLabel = updateLabel;
-    caseOpName = updateOperator.userName;
-    caseTime = updateDateTime;
-    caseOpId = updateOperator.userId;
+    caseOpLabel = caseOpConfig.updateLabel;
+    caseOpName = caseOpConfig.updateOperator.userName;
+    caseTime = caseOpConfig.updateDateTime;
+    caseOpId = caseOpConfig.updateOperator.userId;
   }
 
   // Popover-related
@@ -188,6 +176,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         {{=<% %>=}}
         InputProps={{
           readOnly: true,
+          disableUnderline: true,
           inputProps: {style: {cursor: 'pointer'}}
         }}
         <%={{ }}=%>     {{! revert delimiteres for mustache }}
@@ -210,30 +199,13 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
         {getPopoverGrid()}
       </Popover>
     </React.Fragment>
-    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>;
+	</Styled{{COMPONENT_CLASS_NAME}}Wrapper>;
 
 }
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
-  createLabel: null,
-  updateLabel: null,
-  createOperator: null,
-  updateOperator: null,
-  createDateTime: null,
-  updateDateTime: null
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
-  getPConnect: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  createLabel: PropTypes.string,
-  updateLabel: PropTypes.string,
-  resolveLabel: PropTypes.string,
-  createOperator: PropTypes.objectOf(PropTypes.any),
-  updateOperator: PropTypes.objectOf(PropTypes.any),
-  resolveOperator: PropTypes.objectOf(PropTypes.any),
-  createDateTime: PropTypes.string,
-  updateDateTime: PropTypes.string,
-  resolveDateTime: PropTypes.string,
-  hideLabel: PropTypes.bool
+  caseOpConfig: PropTypes.object.isRequired,
 };