@pega/sdk 0.0.3 → 0.0.4

package/templates/react-sdk-reference/src/components/field/DateTime/DateTime.tsx

@@ -17,12 +17,27 @@ export default function DateTime(props: DateTimeProps) {
   const TextInput = getComponentFromRegistry('TextInput');
   const FieldValueList = getComponentFromRegistry('FieldValueList');
 
-  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+  } = props;
 
   const environmentInfo = PCore.getEnvironmentInfo();
   const timezone = environmentInfo && environmentInfo.getTimeZone();
 
-  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);
+  const [dateValue, setDateValue] = useState<Dayjs | null>(
+    value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null,
+  );
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -43,16 +58,16 @@ export default function DateTime(props: DateTimeProps) {
 
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDateTime = format(props.value, 'datetime', {
-      format: `${dateFormatInfo.dateFormatString} hh:mm a`
+      format: `${dateFormatInfo.dateFormatString} hh:mm a`,
     });
     return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
     const formattedDateTime = format(props.value, 'datetime', {
-      format: `${dateFormatInfo.dateFormatString} hh:mm a`
+      format: `${dateFormatInfo.dateFormatString} hh:mm a`,
     });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant="stacked" />;
   }
 
   if (readOnly) {
@@ -62,7 +77,7 @@ export default function DateTime(props: DateTimeProps) {
 
   const testProps: any = { 'data-test-id': testId };
 
-  const handleChange = date => {
+  const handleChange = (date) => {
     const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
     const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
     setDateValue(timeZoneDateTime);
@@ -93,8 +108,8 @@ export default function DateTime(props: DateTimeProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProps }
-        }
+          InputProps: { ...testProps },
+        },
       }}
     />
   );

package/templates/react-sdk-reference/src/components/field/Decimal/Decimal.tsx

@@ -41,7 +41,7 @@ export default function Decimal(props: DecimalProps) {
     showGroupSeparators,
     testId,
     placeholder,
-    formatter
+    formatter,
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -80,7 +80,7 @@ export default function Decimal(props: DecimalProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant="stacked" />;
   }
 
   const testProps: any = { 'data-test-id': testId };
@@ -89,7 +89,7 @@ export default function Decimal(props: DecimalProps) {
     handleEvent(actions, 'changeNblur', propName, values);
   }
 
-  const handleChange = val => {
+  const handleChange = (val) => {
     setValues(val.value);
   };
 
@@ -100,13 +100,13 @@ export default function Decimal(props: DecimalProps) {
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
-      size='small'
+      size="small"
       required={required}
       disabled={disabled}
       error={status === 'error'}
       label={label}
       value={values}
-      onValueChange={val => {
+      onValueChange={(val) => {
         handleChange(val);
       }}
       onBlur={!readOnly ? decimalOnBlur : undefined}

package/templates/react-sdk-reference/src/components/field/Dropdown/Dropdown.tsx

@@ -15,7 +15,7 @@ interface IOption {
 
 const flattenParameters = (params = {}) => {
   const flatParams = {};
-  Object.keys(params).forEach(key => {
+  Object.keys(params).forEach((key) => {
     const { name, value: theVal } = params[key];
     flatParams[name] = theVal;
   });
@@ -23,18 +23,18 @@ const flattenParameters = (params = {}) => {
   return flatParams;
 };
 
-const preProcessColumns = columnList => {
-  return columnList.map(col => {
+const preProcessColumns = (columnList) => {
+  return columnList.map((col) => {
     const tempColObj = { ...col };
     tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
     return tempColObj;
   });
 };
 
-const getDisplayFieldsMetaData = columnList => {
-  const displayColumns = columnList.filter(col => col.display === 'true');
+const getDisplayFieldsMetaData = (columnList) => {
+  const displayColumns = columnList.filter((col) => col.display === 'true');
   const metaDataObj: any = { key: '', primary: '', secondary: [] };
-  const keyCol = columnList.filter(col => col.key === 'true');
+  const keyCol = columnList.filter((col) => col.key === 'true');
   metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
   for (let index = 0; index < displayColumns.length; index += 1) {
     if (displayColumns[index].primary === 'true') {
@@ -78,7 +78,7 @@ export default function Dropdown(props: DropdownProps) {
     datasourceMetadata,
     hideLabel,
     onRecordChange,
-    fieldMetadata
+    fieldMetadata,
   } = props;
   let { placeholder = '' } = props;
   const context = getPConnect().getContextName();
@@ -104,22 +104,28 @@ export default function Dropdown(props: DropdownProps) {
   if (deferDatasource && datasourceMetadata?.datasource?.name) {
     listType = 'datapage';
     datasource = datasourceMetadata.datasource.name;
-    const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+    const {
+      parameters: dataSourceParameters,
+      propertyForDisplayText,
+      propertyForValue,
+    } = datasourceMetadata.datasource;
     parameters = flattenParameters(dataSourceParameters);
-    const displayProp = propertyForDisplayText.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+    const displayProp = propertyForDisplayText.startsWith('@P')
+      ? propertyForDisplayText.substring(3)
+      : propertyForDisplayText;
     const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
     columns = [
       {
         key: 'true',
         setProperty: 'Associated property',
-        value: valueProp
+        value: valueProp,
       },
       {
         display: 'true',
         primary: 'true',
         useForSearch: true,
-        value: displayProp
-      }
+        value: displayProp,
+      },
     ];
   }
   columns = preProcessColumns(columns);
@@ -130,7 +136,7 @@ export default function Dropdown(props: DropdownProps) {
       const optionsList = [...list];
       optionsList.unshift({
         key: placeholder,
-        value: thePConn.getLocalizedValue(placeholder, '', '')
+        value: thePConn.getLocalizedValue(placeholder, '', ''),
       }); // 2nd and 3rd args empty string until typedef marked correctly
       setOptions(optionsList);
     }
@@ -141,11 +147,11 @@ export default function Dropdown(props: DropdownProps) {
       getDataPage(datasource, parameters, context).then((results: any) => {
         const optionsData: any[] = [];
         const displayColumn = getDisplayFieldsMetaData(columns);
-        results?.forEach(element => {
+        results?.forEach((element) => {
           const val = element[displayColumn.primary]?.toString();
           const obj = {
             key: element[displayColumn.key] || element.pyGUID,
-            value: val
+            value: val,
           };
           optionsData.push(obj);
         });
@@ -154,7 +160,9 @@ export default function Dropdown(props: DropdownProps) {
     }
   }, []);
 
-  const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter(field => field?.classID === className)[0] : fieldMetadata;
+  const metaData = Array.isArray(fieldMetadata)
+    ? fieldMetadata.filter((field) => field?.classID === className)[0]
+    : fieldMetadata;
 
   let displayName = metaData?.datasource?.propertyForDisplayText;
   displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
@@ -170,7 +178,11 @@ export default function Dropdown(props: DropdownProps) {
       return (
         <FieldValueList
           name={hideLabel ? '' : label}
-          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          value={thePConn.getLocalizedValue(
+            val,
+            localePath,
+            thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName),
+          )}
         />
       );
     }
@@ -179,8 +191,12 @@ export default function Dropdown(props: DropdownProps) {
       return (
         <FieldValueList
           name={hideLabel ? '' : label}
-          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-          variant='stacked'
+          value={thePConn.getLocalizedValue(
+            val,
+            localePath,
+            thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName),
+          )}
+          variant="stacked"
         />
       );
     }
@@ -189,7 +205,7 @@ export default function Dropdown(props: DropdownProps) {
   };
 
   if (displayMode) {
-    return displayFn(displayMode, options.find(option => option.key === value)?.value || value);
+    return displayFn(displayMode, options.find((option) => option.key === value)?.value || value);
   }
 
   if (readOnly) {
@@ -197,10 +213,10 @@ export default function Dropdown(props: DropdownProps) {
   }
 
   const testProps: any = {
-    'data-test-id': testId
+    'data-test-id': testId,
   };
 
-  const handleChange = evt => {
+  const handleChange = (evt) => {
     const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;
     handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
     if (onRecordChange) {
@@ -216,7 +232,7 @@ export default function Dropdown(props: DropdownProps) {
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
       placeholder={thePConn.getLocalizedValue(placeholder, '', '')} // 2nd and 3rd args empty string until typedef marked correctly
-      size='small'
+      size="small"
       required={required}
       disabled={disabled}
       onChange={!readOnly ? handleChange : undefined}
@@ -225,12 +241,16 @@ export default function Dropdown(props: DropdownProps) {
       value={value === '' && !readOnly ? placeholder : value}
       select
       slotProps={{
-        input: { ...readOnlyProp, ...testProps }
+        input: { ...readOnlyProp, ...testProps },
       }}
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>
-          {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          {thePConn.getLocalizedValue(
+            option.value,
+            localePath,
+            thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName),
+          )}
         </MenuItem>
       ))}
     </TextField>

package/templates/react-sdk-reference/src/components/field/Email/Email.tsx

@@ -28,7 +28,7 @@ export default function Email(props: EmailProps) {
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
   } = props;
 
   const pConn = getPConnect();
@@ -48,7 +48,7 @@ export default function Email(props: EmailProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
   }
 
   if (readOnly) {
@@ -69,10 +69,10 @@ export default function Email(props: EmailProps) {
   return (
     <TextField
       fullWidth
-      variant='outlined'
+      variant="outlined"
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
-      size='small'
+      size="small"
       required={required}
       disabled={disabled}
       onChange={handleChange}
@@ -80,16 +80,16 @@ export default function Email(props: EmailProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      type='email'
+      type="email"
       slotProps={{
         input: {
           startAdornment: (
-            <InputAdornment position='start'>
+            <InputAdornment position="start">
               <MailOutlineOutlinedIcon />
             </InputAdornment>
           ),
-          inputProps: { ...testProps }
-        }
+          inputProps: { ...testProps },
+        },
       }}
     />
   );

package/templates/react-sdk-reference/src/components/field/Group/Group.tsx

@@ -22,7 +22,7 @@ export default function Group(props: GroupProps) {
   const content = useMemo(() => {
     return (
       <Grid container spacing={2}>
-        {children?.map(child => (
+        {children?.map((child) => (
           <Grid size={{ xs: 12 }} key={child.key}>
             {child}
           </Grid>

package/templates/react-sdk-reference/src/components/field/Integer/Integer.tsx

@@ -27,7 +27,7 @@ export default function Integer(props: IntegerProps) {
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
   } = props;
 
   const pConn = getPConnect();
@@ -47,7 +47,7 @@ export default function Integer(props: IntegerProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
   }
 
   if (readOnly) {
@@ -83,7 +83,7 @@ export default function Integer(props: IntegerProps) {
       variant={readOnly ? 'standard' : 'outlined'}
       helperText={helperTextToDisplay}
       placeholder={placeholder ?? ''}
-      size='small'
+      size="small"
       required={required}
       disabled={disabled}
       onChange={intOnChange}
@@ -91,9 +91,9 @@ export default function Integer(props: IntegerProps) {
       error={status === 'error'}
       label={label}
       value={inputValue}
-      type='text'
+      type="text"
       slotProps={{
-        htmlInput: { inputMode: 'numeric', pattern: '[0-9]*', ...testProps }
+        htmlInput: { inputMode: 'numeric', pattern: '[0-9]*', ...testProps },
       }}
     />
   );

package/templates/react-sdk-reference/src/components/field/Location/Location.tsx

@@ -20,12 +20,12 @@ interface LocationProps extends PConnFieldProps {
 const mapContainerStyle = {
   width: '100%',
   height: '300px',
-  marginTop: '0px'
+  marginTop: '0px',
 };
 
 const defaultCenter = {
   lat: 18.5204,
-  lng: 73.8567
+  lng: 73.8567,
 };
 
 const disabledMapOptions = {
@@ -38,7 +38,7 @@ const disabledMapOptions = {
   scaleControl: false,
   streetViewControl: false,
   rotateControl: false,
-  fullscreenControl: false
+  fullscreenControl: false,
 };
 
 export default function Location(props: LocationProps) {
@@ -62,7 +62,7 @@ export default function Location(props: LocationProps) {
     coordinates = '',
     onlyCoordinates = false,
     showMap,
-    showMapReadOnly
+    showMapReadOnly,
   } = props;
 
   const pConn = getPConnect();
@@ -79,7 +79,7 @@ export default function Location(props: LocationProps) {
 
   const { isLoaded } = useLoadScript({
     googleMapsApiKey: pConn.getGoogleMapsAPIKey?.() || '',
-    libraries: ['places', 'geocoding']
+    libraries: ['places', 'geocoding'],
   });
 
   const hasError = status === 'error' && !!validatemessage && !disabled;
@@ -111,7 +111,7 @@ export default function Location(props: LocationProps) {
         setMarkerPosition(null);
       }
     },
-    [actions, propName, coordPropName]
+    [actions, propName, coordPropName],
   );
 
   const handlePlaceChanged = useCallback(() => {
@@ -153,7 +153,7 @@ export default function Location(props: LocationProps) {
   const handleGetCurrentLocation = useCallback(() => {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
-        position => {
+        (position) => {
           const lat = position.coords.latitude;
           const lng = position.coords.longitude;
           const coordinateString = `${lat}, ${lng}`;
@@ -181,9 +181,9 @@ export default function Location(props: LocationProps) {
             });
           }
         },
-        error => {
+        (error) => {
           console.error('Error getting current location: ', error);
-        }
+        },
       );
     }
   }, [actions, propName, coordPropName, onlyCoordinates]);
@@ -193,13 +193,18 @@ export default function Location(props: LocationProps) {
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant="stacked" />;
   }
 
   const map = (
     <div style={{ opacity: disabled ? 0.7 : 1 }}>
       <Box mt={1} style={{ flex: 1 }}>
-        <GoogleMap mapContainerStyle={mapContainerStyle} center={mapCenter} zoom={14} options={disabled ? disabledMapOptions : undefined}>
+        <GoogleMap
+          mapContainerStyle={mapContainerStyle}
+          center={mapCenter}
+          zoom={14}
+          options={disabled ? disabledMapOptions : undefined}
+        >
           {markerPosition && <Marker position={markerPosition} />}
         </GoogleMap>
       </Box>
@@ -220,7 +225,7 @@ export default function Location(props: LocationProps) {
   return (
     <div>
       {hasError && (
-        <Alert severity='error' sx={{ mb: 1 }}>
+        <Alert severity="error" sx={{ mb: 1 }}>
           {validatemessage}
         </Alert>
       )}
@@ -240,14 +245,14 @@ export default function Location(props: LocationProps) {
           slotProps={{
             input: {
               endAdornment: (
-                <InputAdornment position='end'>
-                  <IconButton onClick={handleGetCurrentLocation} disabled={disabled} edge='end'>
+                <InputAdornment position="end">
+                  <IconButton onClick={handleGetCurrentLocation} disabled={disabled} edge="end">
                     <AddLocationAltIcon />
                   </IconButton>
                 </InputAdornment>
               ),
-              inputProps: { ...testProps }
-            }
+              inputProps: { ...testProps },
+            },
           }}
         />
       )}