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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/auth.js

@@ -285,10 +285,10 @@ class PegaAuth {
                         const nSlash = redirectUri.indexOf('/', nLocalhost + 10);
                         const nPort = parseInt(redirectUri.substring(nLocalhost + 10, nSlash));
                         if (-1 !== nLocalhost) {
-                            const options = isHttp ? {} : {
+                            const options = key && cert && !isHttp ? {
                                 key: fs.readFileSync(key),
                                 cert: fs.readFileSync(cert)
-                            };
+                            } : {};
                             const server = (isHttp ? http : https).createServer(options, (req, res) => {
                                 const { method, url } = req;
                                 const { winTitle, winBodyHtml } = this.config;

package/src/cli.js

@@ -6,6 +6,7 @@ import {
   buildComponent,
   buildAllComponents,
   createComponent,
+  createAllComponents,
   deleteComponent,
   deleteAllComponents,
   generateMissingCompanions,
@@ -22,6 +23,7 @@ import {
 
 const TASKS = {
   CREATE: 'create',
+  CREATE_ALL: 'createAll',
   OVERRIDE: 'override',
   OVERRIDE_ALL: 'overrideAll',
   BUILD: 'buildComponent',
@@ -66,6 +68,10 @@ export default async (args = []) => {
       createComponent(options);
       break;
     }
+    case TASKS.CREATE_ALL: {
+      createAllComponents(options);
+      break;
+    }
     case TASKS.OVERRIDE: {
       overrideComponent(options);
       break;

package/src/constants.js

@@ -44,6 +44,14 @@ export const SERVER_TYPE = "serverType";
 export const SERVER_REST_URL = "infinityRestServerUrl";
 export const LP_SERVER_REST_URL = "launchpadRestServerUrl";
 
+/* dxcbConfig.componentDefaults LINT setting/value constants */
+export const LINT_SETTING_KEY = "lintAction";   // LINT_SETTING_KEY is expected to be in sdk-config's dxcbConfig.componentDefaults
+export const LINT_OFF = "off";                  // LINT_OFF: don't run lint
+export const LINT_SHOW = "show";                // LINT_SHOW: run lint, show results, but don't block processing from continuing if there are lint errors/warnings
+export const LINT_BLOCK = "block";              // LINT_BLOCK: run lint, show results, block processing from continuing if there are lint errors/warnings
+export const LINT_DEFAULT = LINT_BLOCK;         // LINT_DEFAULT: the default value to use if the key isn't found or key value isn't valid
+/* END of dxcb.componentdefaults LINT setting/value constants */
+
 export const AUTHENTICATE_SCHEMA = {
   serverType: [
     {
@@ -177,7 +185,28 @@ export const COMPONENT_SCHEMA = {
         value: 'Picklist'
       }
     ],
-    template: ['DETAILS', 'DETAILS-region', 'FORM', 'FORM-region', 'PAGE' ],
+    template: [
+      {
+        name: 'DETAILS',
+        value: 'DETAILS'
+      },
+      {
+        name: 'DETAILS region',
+        value: 'DETAILS-region'
+      },
+      {
+        name: 'FORM',
+        value: 'FORM'
+      },
+      {
+        name: 'FORM region',
+        value: 'FORM-region'
+      },
+      {
+        name: 'PAGE',
+        value: 'PAGE'
+      }
+    ],
     widget: [
       {
         name: 'CASE',

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

@@ -8,6 +8,7 @@ import {
   FormHelperText
 } from '@material-ui/core';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -20,13 +21,16 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 export default function {{COMPONENT_CLASS_NAME}}(props: any) {
   const {
     getPConnect,
+    label,
     value = false,
     readOnly,
     testId,
     required,
     status,
     helperText,
-    validatemessage
+    validatemessage,
+    displayMode,
+    hideLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -42,6 +46,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     setChecked(value);
   }, [value]);
 
+  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' />;
+  }
+
   const handleChange = event => {
     handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);
   };
@@ -67,7 +79,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           control={theCheckbox}
           checked={checked}
           onChange={!readOnly ? handleChange : undefined}
-          onBlur={handleBlur}
+          onBlur={!readOnly ? handleBlur : undefined}
           label={caption}
           labelPlacement='end'
           data-test-id={testId}

package/src/tasks/create/templates/SDK-React/field/Date/demo.stories.jsx.mustache

@@ -11,6 +11,19 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getEnvironmentInfo = () => {
+  return {
+    getUseLocale: () => {
+      return 'en-GB';
+    }
+  };
+};
+
+
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
   const [value, setValue] = useState(configProps.value);
 

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

@@ -5,7 +5,8 @@ import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
-
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+import { dateFormatInfoDefault, getDateFormatInfo} from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -28,18 +29,32 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if(displayMode === 'LABELS_LEFT'){
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field}/>
+  // Start with default dateFormatInfo
+  const dateFormatInfo = dateFormatInfoDefault;
+  // and then update, as needed, based on locale, etc.
+  const theDateFormat = getDateFormatInfo()
+  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;
+  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
+  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
+
+
+  if (displayMode === 'LABELS_LEFT') {
+    const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;
   }
 
   if (readOnly) {
@@ -70,20 +85,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           disableToolbar
           variant='inline'
           inputVariant='outlined'
-          placeholder='mm/dd/yyyy'
+          placeholder={dateFormatInfo.dateFormatStringLC}
+          format={dateFormatInfo.dateFormatString}
+          mask={dateFormatInfo.dateFormatMask}
           fullWidth
           autoOk
           required={required}
           disabled={disabled}
-          format='MM/DD/YYYY'
-          mask='__/__/____'
           error={status === 'error'}
           helperText={helperTextToDisplay}
           size='small'
           label={label}
           value={value || null}
           onChange={handleChange}
-          onBlur={onBlur}
+          onBlur={!readOnly ? onBlur : undefined}
           onAccept={handleAccept}
     {{! pick new delimiteres for mustache }}
     {{=<% %>=}}

package/src/tasks/create/templates/SDK-React/field/DateTime/demo.stories.jsx.mustache

@@ -11,6 +11,18 @@ export default {
   component: {{COMPONENT_CLASS_NAME}}
 };
 
+if (!window.PCore) {
+  window.PCore = {};
+}
+
+window.PCore.getEnvironmentInfo = () => {
+  return {
+    getUseLocale: () => {
+      return 'en-GB';
+    }
+  };
+};
+
 export const Base{{COMPONENT_CLASS_NAME}} = () => {
   const [value, setValue] = useState(configProps.value);
 

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

@@ -5,7 +5,8 @@ import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import PropTypes from 'prop-types';
-
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters/';
+import { dateFormatInfoDefault, getDateFormatInfo} from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -27,26 +28,40 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel
   } = props;
+
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = pConn.getStateProps().value;
   const helperTextToDisplay = validatemessage || helperText;
 
-  if(displayMode === 'LABELS_LEFT'){
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field}/>
+  // Start with default dateFormatInfo
+  const dateFormatInfo = dateFormatInfoDefault;
+  // and then update, as needed, based on locale, etc.
+  const theDateFormat = getDateFormatInfo()
+  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;
+  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
+  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
+
+
+  if (displayMode === 'LABELS_LEFT') {
+    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;
   }
 
   if (readOnly) {
-    // const theReadOnlyComp = <TextInput props />
+    const formattedDate = format(props.value, 'datetime');
+    props.value = formattedDate;
     return <TextInput {...props} />;
   }
 
-
   const handleChange = date => {
     const changeValue = date && date.isValid() ? date.toISOString() : null;
     onChange({ value: changeValue });
@@ -57,6 +72,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
 
+  //
+  // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field
+  //       try an older version of the lib or use DateTimePicker
+  //
+
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <MuiPickersUtilsProvider utils={DayjsUtils}>
@@ -67,9 +87,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
           autoOk
           required={required}
           disabled={disabled}
-          placeholder='mm/dd/yyyy hh:mm am'
-          format='MM/DD/YYYY hh:mm a'
-          mask='__/__/____ __:__ _m'
+          placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
+          format={`${dateFormatInfo.dateFormatString} hh:mm a`}
+          mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
           minutesStep={5}
           error={status === 'error'}
           helperText={helperTextToDisplay}

package/src/tasks/create/templates/SDK-React/field/Decimal/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/Decimal-Currency/demo.stories.jsx.mustache

@@ -31,6 +31,9 @@ export const Base{{COMPONENT_CLASS_NAME}} = () => {
         },
         getStateProps: () => {
           return { value: '.name' };
+        },
+        getComponentName: () => {
+          return 'Currency';
         }
       };
     },

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

@@ -4,7 +4,8 @@ import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import PropTypes from 'prop-types';
-
+import { format } from "@pega/react-sdk-components/lib/components/helpers/formatters";
+import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils.js';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -27,7 +28,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     testId,
     helperText,
-    displayMode
+    displayMode,
+    hideLabel,
+    currencyISOCode = "USD"
   } = props;
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -47,17 +50,32 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
   };
 
   const [currValue, setCurrValue] = useState();
+  const [theCurrSym, setCurrSym] = useState("$");
+  const [theCurrDec, setCurrDec] = useState(".");
+  const [theCurrSep, setCurrSep] = useState(",");
+
+  useEffect(() => {
+    // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
+    const theSymbols = getCurrencyCharacters(currencyISOCode);
+    setCurrSym(theSymbols.theCurrencySymbol);
+    setCurrDec(theSymbols.theDecimalIndicator);
+    setCurrSep(theSymbols.theDigitGroupSeparator);
+  }, [currencyISOCode]);
 
   useEffect(() => {
     // const testVal = value;
     setCurrValue(value.toString());
   }, [value]);
 
-  if(displayMode === 'LABELS_LEFT'){
-    const field = {
-      [label]: value
-    };
-    return <FieldValueList item={field}/>
+  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+
+  if (displayMode === 'LABELS_LEFT') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
   function currOnChange(event, inValue) {
@@ -84,7 +102,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       required={required}
       disabled={disabled}
       onChange={currOnChange}
-      onBlur={currOnBlur}
+      onBlur={!readOnly ? currOnBlur : undefined}
       error={status === 'error'}
       label={label}
       value={currValue}
@@ -95,6 +113,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
 {{=<% %>=}}
       InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}
 <%={{ }}=%>     {{! revert delimiteres for mustache }}
+      currencySymbol={theCurrSym}
+      decimalCharacter={theCurrDec}
+      digitGroupSeparator={theCurrSep}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

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

@@ -46,16 +46,19 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     testId,
     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) {
@@ -68,7 +71,6 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     'data-test-id': testId
   };
 
-
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
     <TextField
@@ -81,7 +83,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/Integer/index.tsx.mustache

@@ -26,15 +26,18 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     testId,
     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) {
@@ -75,7 +78,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
       required={required}
       disabled={disabled}
       onChange={intOnChange}
-      onBlur={onBlur}
+      onBlur={!readOnly ? onBlur : undefined}
       error={status === 'error'}
       label={label}
       value={value}

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

@@ -5,7 +5,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import PropTypes from 'prop-types';
-
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -31,7 +31,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     status,
     readOnly,
     testId,
-    helperText
+    helperText,
+    displayMode,
+    hideLabel,
+    onRecordChange
   } = props;
   const [options, setOptions] = useState<Array<IOption>>([]);
   const helperTextToDisplay = validatemessage || helperText;
@@ -48,6 +51,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
 
   let readOnlyProp = {};
 
+  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) {
     readOnlyProp = { readOnly: true };
   }
@@ -61,12 +72,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
   const handleChange = evt => {
     const selectedValue = evt.target.value === 'Select' ? '' : evt.target.value;
     handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
+    if (onRecordChange) {
+      onRecordChange(evt);
+    }
   };
 
-
-
-
-
   // Material UI shows a warning if the component is rendered before options are set.
   //  So, hold off on rendering anything until options are available...
   return options.length === 0 ? null : (

package/src/tasks/create/templates/SDK-React/field/Text/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-Email/index.tsx.mustache

@@ -27,23 +27,23 @@ export default function {{COMPONENT_CLASS_NAME}}(props: any) {
     readOnly,
     testId,
     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) {
     return <TextInput {...props} />;
   }
 
-
-
   let testProp = {};
 
   testProp = {
@@ -61,7 +61,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}