@pega/sdk 0.0.5 → 0.0.6

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

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { DatePickerInput } from 'react-native-paper-dates';
+
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import DisplayField from '../../common/DisplayField';
+import HelperText from '../../common/HelperText';
+import { FORM_INPUT_THEME } from '../../common/inputTheme';
+import handleEvent from '../../helpers/event-utils';
+import { PConnFieldProps } from '@/types/PConnProps';
+
+function getFormattedDate(date: Date) {
+  return `${date.getFullYear()}-${(date.getMonth() + 1)
+    .toString()
+    .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+}
+
+function getDateValue(date: string): Date | undefined {
+  const parts = date.split('-');
+  if (parts.length !== 3) {
+    return;
+  }
+  const year = parseInt(parts[0], 10);
+  const month = parseInt(parts[1], 10) - 1; // Months are zero-based in JavaScript
+  const day = parseInt(parts[2], 10);
+  return new window.Date(year, month, day);
+}
+
+interface DateProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  fieldMetadata?: any;
+  additionalProps?: object;
+}
+
+export default function Date(props: DateProps) {
+  const {
+    getPConnect,
+    label,
+    value = '',
+    validatemessage,
+    helperText,
+    status,
+    displayMode,
+    hideLabel,
+    disabled,
+
+    readOnly,
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const [inputDate, setInputDate] = useState<Date | undefined>(getDateValue(value));
+
+  const handleDateChange = (d: Date | undefined) => {
+    if (!d) {
+      return;
+    }
+    setInputDate(d);
+    handleEvent(actions, 'changeNblur', propName, getFormattedDate(d));
+  };
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode || '')) {
+    return (
+      <DisplayField
+        type="date"
+        label={label}
+        value={value}
+        hideLabel={hideLabel}
+        variant={displayMode === 'STACKED_LARGE_VAL' ? 'stacked' : 'inline'}
+      />
+    );
+  }
+
+  return (
+    <FormFieldWrapper>
+      <DatePickerInput
+        mode="outlined"
+        locale="en"
+        theme={FORM_INPUT_THEME}
+        label={label}
+        value={inputDate}
+        onChange={handleDateChange}
+        inputMode="start"
+        hasError={status === 'error'}
+        readOnly={readOnly}
+        disabled={disabled}
+      />
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

package/templates/react-native-sdk-reference/src/components/field/Date/index.tsx

@@ -0,0 +1 @@
+export { default } from './Date';

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

@@ -0,0 +1,211 @@
+import isDeepEqual from 'fast-deep-equal/react';
+import { useEffect, useState } from 'react';
+import { Dropdown as RNDropdown } from 'react-native-paper-dropdown';
+import { TextInput } from 'react-native-paper';
+
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import HelperText from '../../common/HelperText';
+import { FORM_INPUT_PROPS } from '../../common/inputTheme';
+import { getDataPage } from '../../helpers/data_page';
+import handleEvent from '../../helpers/event-utils';
+import Utils from '../../helpers/utils';
+import DisplayField from '../../common/DisplayField';
+
+function CustomDropdownInput(props: any) {
+  const { placeholder, label, rightIcon, selectedLabel, mode, disabled, error } = props;
+
+  return (
+    <TextInput
+      {...FORM_INPUT_PROPS}
+      placeholder={placeholder}
+      label={label}
+      value={selectedLabel}
+      right={rightIcon}
+      mode={mode}
+      editable={false}
+      disabled={disabled}
+      error={error}
+    />
+  );
+}
+
+interface IOption {
+  key: string;
+  value: string;
+}
+
+const flattenParameters = (params = {}) => {
+  const flatParams = {};
+  Object.keys(params).forEach((key) => {
+    const { name, value: theVal } = params[key];
+    flatParams[name] = theVal;
+  });
+
+  return flatParams;
+};
+
+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 metaDataObj: any = { key: '', primary: '', secondary: [] };
+  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') {
+      metaDataObj.primary = displayColumns[index].value;
+    } else {
+      metaDataObj.secondary.push(displayColumns[index].value);
+    }
+  }
+  return metaDataObj;
+};
+
+export default function Dropdown(props: any) {
+  const {
+    getPConnect,
+    label,
+    value = '',
+    validatemessage,
+    status,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    deferDatasource,
+    datasourceMetadata,
+    onRecordChange,
+    placeholder,
+    hideLabel,
+  } = props;
+
+  const context = getPConnect().getContextName();
+  let { listType, parameters, datasource = [], columns = [] } = props;
+  const [options, setOptions] = useState<IOption[]>([]);
+  const [theDatasource, setDatasource] = useState<any[] | null>(null);
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const thePConn = getPConnect();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = (thePConn.getStateProps() as any).value;
+  // const className = thePConn.getCaseInfo().getClassName();
+  // const refName = propName?.slice(propName.lastIndexOf('.') + 1);
+
+  if (!isDeepEqual(datasource, theDatasource)) {
+    // inbound datasource is different, so update theDatasource (to trigger useEffect)
+    setDatasource(datasource);
+  }
+
+  // convert associated to datapage listtype and transform props
+  // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
+  if (deferDatasource && datasourceMetadata?.datasource?.name) {
+    listType = 'datapage';
+    datasource = datasourceMetadata.datasource.name;
+    const {
+      parameters: dataSourceParameters,
+      propertyForDisplayText,
+      propertyForValue,
+    } = datasourceMetadata.datasource;
+    parameters = flattenParameters(dataSourceParameters);
+    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,
+      },
+      {
+        display: 'true',
+        primary: 'true',
+        useForSearch: true,
+        value: displayProp,
+      },
+    ];
+  }
+  columns = preProcessColumns(columns);
+
+  useEffect(() => {
+    if (theDatasource) {
+      const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly
+      // const optionsList = [...list];
+      // optionsList.unshift({
+      //   key: placeholder,
+      //   value: thePConn.getLocalizedValue(placeholder, '', '')
+      // }); // 2nd and 3rd args empty string until typedef marked correctly
+      setOptions(list);
+    }
+  }, [theDatasource]);
+
+  useEffect(() => {
+    if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {
+      getDataPage(datasource, parameters, context).then((results: any) => {
+        const optionsData: any[] = [];
+        const displayColumn = getDisplayFieldsMetaData(columns);
+        results?.forEach((element) => {
+          const val = element[displayColumn.primary]?.toString();
+          const obj = {
+            key: element[displayColumn.key] || element.pyGUID,
+            value: val,
+          };
+          optionsData.push(obj);
+        });
+        setOptions(optionsData);
+      });
+    }
+  }, []);
+
+  // const metaData = Array.isArray(fieldMetadata)
+  //   ? fieldMetadata.filter((field) => field?.classID === className)[0]
+  //   : fieldMetadata;
+
+  // const displayNameProp = metaData?.datasource?.propertyForDisplayText;
+  // const displayName = displayNameProp?.slice(displayNameProp.lastIndexOf('.') + 1);
+
+  const handleChange = (value) => {
+    handleEvent(actionsApi, 'changeNblur', propName, value);
+    if (onRecordChange) {
+      onRecordChange(value);
+    }
+  };
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode || '')) {
+    return (
+      <DisplayField
+        type="dropdown"
+        label={label}
+        value={value}
+        hideLabel={hideLabel}
+        variant={displayMode === 'STACKED_LARGE_VAL' ? 'stacked' : 'inline'}
+      />
+    );
+  }
+
+  return (
+    <FormFieldWrapper>
+      <RNDropdown
+        label={label}
+        placeholder={placeholder}
+        CustomDropdownInput={CustomDropdownInput}
+        options={options.map((option) => ({
+          label: option.value,
+          value: option.key,
+        }))}
+        value={value}
+        onSelect={handleChange}
+        mode={'outlined'}
+        testID={testId}
+        disabled={readOnly}
+      />
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

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

@@ -0,0 +1 @@
+export { default } from './Dropdown';

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

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import { TextInput as RNTextInput } from 'react-native-paper';
+
+import { PConnFieldProps } from '../../../types/PConnProps';
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import HelperText from '../../common/HelperText';
+import handleEvent from '../../helpers/event-utils';
+import DisplayField from '../../common/DisplayField';
+import LabelText from '../../common/LabelText';
+import { FORM_INPUT_PROPS } from '../../common/inputTheme';
+
+type EmailProps = PConnFieldProps;
+
+export default function Email(props: EmailProps) {
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    readOnly,
+    testId,
+    helperText,
+    placeholder,
+    displayMode,
+    hideLabel,
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode || '')) {
+    return (
+      <DisplayField
+        type="text"
+        label={label}
+        value={value}
+        hideLabel={hideLabel}
+        variant={displayMode === 'STACKED_LARGE_VAL' ? 'stacked' : 'inline'}
+      />
+    );
+  }
+
+  function handleChange(value: string) {
+    setInputValue(value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
+  return (
+    <FormFieldWrapper>
+      <RNTextInput
+        keyboardType="email-address"
+        {...FORM_INPUT_PROPS}
+        label={<LabelText label={label} required={required} />}
+        value={inputValue}
+        onChangeText={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        error={status === 'error'}
+        testID={testId}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

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

@@ -0,0 +1 @@
+export { default } from './Email';

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

@@ -0,0 +1,47 @@
+import React, { ReactElement, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { PConnFieldProps } from '../../../types/PConnProps';
+import FieldGroup from '../../design-system/FieldGroup';
+
+interface GroupProps extends PConnFieldProps {
+  children: ReactElement[];
+  heading: string;
+  showHeading: boolean;
+  instructions?: string;
+  collapsible: boolean;
+  type: string;
+}
+
+export default function Group(props: GroupProps) {
+  const { children, heading, showHeading, instructions, collapsible } = props;
+
+  const content = useMemo(() => {
+    return (
+      <View style={styles.container}>
+        {children?.map((child) => (
+          <View style={styles.child} key={child.key}>
+            {child}
+          </View>
+        ))}
+      </View>
+    );
+  }, [children]);
+
+  if (!children) return null;
+
+  return (
+    <FieldGroup name={showHeading ? heading : undefined} collapsible={collapsible} instructions={instructions}>
+      {content}
+    </FieldGroup>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+  },
+  child: {
+    width: '100%',
+    marginBottom: 16,
+  },
+});

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

@@ -0,0 +1 @@
+export { default } from './Group';

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

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { TextInput } from 'react-native-paper';
+
+import { PConnFieldProps } from '../../../types/PConnProps';
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import HelperText from '../../common/HelperText';
+import handleEvent from '../../helpers/event-utils';
+import LabelText from '../../common/LabelText';
+import DisplayField from '../../common/DisplayField';
+import { FORM_INPUT_PROPS } from '../../common/inputTheme';
+
+interface TextInputProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Integer here
+  fieldMetadata?: any;
+}
+
+export default function Integer(props: TextInputProps) {
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    readOnly,
+    testId,
+    helperText,
+    placeholder,
+    displayMode,
+    hideLabel,
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode || '')) {
+    return (
+      <DisplayField
+        type="text"
+        label={label}
+        value={value}
+        hideLabel={hideLabel}
+        variant={displayMode === 'STACKED_LARGE_VAL' ? 'stacked' : 'inline'}
+      />
+    );
+  }
+
+  function handleChange(value) {
+    setInputValue(value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
+  return (
+    <FormFieldWrapper>
+      <TextInput
+        keyboardType="number-pad"
+        {...FORM_INPUT_PROPS}
+        label={<LabelText label={label} required={required} />}
+        value={inputValue}
+        onChangeText={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        error={status === 'error'}
+        testID={testId}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

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

@@ -0,0 +1 @@
+export { default } from './Integer';

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

@@ -0,0 +1,85 @@
+import parsePhoneNumber from 'libphonenumber-js';
+import { useState } from 'react';
+import { TextInput as RNTextInput } from 'react-native-paper';
+import { PhoneNumberInput, getCountryByCode } from 'react-native-paper-phone-number-input';
+
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import HelperText from '../../common/HelperText';
+import handleEvent from '../../helpers/event-utils';
+import DisplayField from '../../common/DisplayField';
+import { FORM_INPUT_PROPS, FORM_INPUT_THEME } from '../../common/inputTheme';
+
+export default function Phone(props: any) {
+  const {
+    getPConnect,
+    label,
+    validatemessage,
+    helperText,
+    status,
+    readOnly,
+    disabled,
+    testId,
+    value = '',
+    displayMode,
+    hideLabel,
+  } = props;
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const { country = 'US', nationalNumber = '' }: any = parsePhoneNumber(value) || {};
+
+  const [countryCode, setCountryCode] = useState<string>(country); // Default country code
+  const [phoneNumber, setPhoneNumber] = useState<string | undefined>(nationalNumber); // Default phone number
+  const { dialCode } = getCountryByCode(countryCode); // Get country details
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const handleBlur = () => {
+    handleEvent(actions, 'changeNblur', propName, `${dialCode}${phoneNumber}`);
+  };
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode || '')) {
+    return (
+      <DisplayField
+        type="text"
+        label={label}
+        value={value}
+        hideLabel={hideLabel}
+        variant={displayMode === 'STACKED_LARGE_VAL' ? 'stacked' : 'inline'}
+      />
+    );
+  }
+
+  if (readOnly || disabled) {
+    return (
+      <FormFieldWrapper>
+        <RNTextInput
+          {...FORM_INPUT_PROPS}
+          label={label}
+          value={phoneNumber}
+          testID={testId}
+          readOnly={readOnly}
+          disabled={disabled}
+        />
+      </FormFieldWrapper>
+    );
+  }
+
+  return (
+    <FormFieldWrapper style={{ paddingBlock: 8 }}>
+      <PhoneNumberInput
+        label={label}
+        mode="outlined"
+        theme={FORM_INPUT_THEME}
+        code={countryCode}
+        setCode={setCountryCode}
+        phoneNumber={phoneNumber}
+        setPhoneNumber={setPhoneNumber}
+        onBlur={handleBlur}
+      />
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

package/templates/react-native-sdk-reference/src/components/field/Phone/index.ts

@@ -0,0 +1 @@
+export { default } from './Phone';