@pega/sdk 0.0.5 → 0.0.7

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

@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+
+import LabelText from '../../common/LabelText';
+import DisplayField from '../../common/DisplayField';
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import HelperText from '../../common/HelperText';
+import Radio from '../../design-system/Radio';
+import handleEvent from '../../helpers/event-utils';
+import Utils from '../../helpers/utils';
+import { PConnFieldProps } from '../../../types/PConnProps';
+
+// Can't use RadioButtonProps until getLocaleRuleNameFromKeys is NOT private
+interface RadioButtonsProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on RadioButtons here
+  inline: boolean;
+  fieldMetadata?: any;
+  variant?: string;
+  datasource?: any;
+
+  imagePosition?: string;
+  imageSize?: string;
+  showImageDescription?: string;
+  hideFieldLabels?: boolean;
+}
+
+export default function RadioButtons(props: RadioButtonsProps) {
+  const {
+    getPConnect,
+    label,
+    value = '',
+    readOnly,
+    disabled,
+    validatemessage,
+    helperText,
+    status,
+    required,
+    inline,
+    displayMode,
+    hideLabel,
+    fieldMetadata,
+  } = props;
+
+  const thePConn = getPConnect();
+  const actions = thePConn.getActionsApi();
+  const propName = (thePConn.getStateProps() as any).value;
+  const configProps = thePConn.getConfigProps();
+  const className = thePConn.getCaseInfo().getClassName();
+
+  const [theSelectedButton, setSelectedButton] = useState(value);
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  let configProperty = (thePConn.getRawMetadata() as any)?.config?.value || '';
+  configProperty = configProperty.startsWith('@P') ? configProperty.substring(3) : configProperty;
+  configProperty = configProperty.startsWith('.') ? configProperty.substring(1) : configProperty;
+
+  const metaData = Array.isArray(fieldMetadata)
+    ? fieldMetadata.filter((field) => field?.classID === className)[0]
+    : fieldMetadata;
+  let displayName = metaData?.datasource?.propertyForDisplayText;
+  displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
+
+  const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
+  const localeClass = localeContext === 'datapage' ? '@baseclass' : className;
+  const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : configProperty;
+  const localePath = localeContext === 'datapage' ? displayName : localeName;
+
+  // theOptions will be an array of JSON objects that are literally key/value pairs.
+  //  Ex: [ {key: "Basic", value: "Basic"} ]
+  const theOptions = Utils.getOptionList(configProps, thePConn.getDataObject(''));
+
+  useEffect(() => {
+    // This update theSelectedButton which will update the UI to show the selected button correctly
+    setSelectedButton(value);
+  }, [value]);
+
+  if (['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode || '')) {
+    return (
+      <DisplayField
+        type="radio"
+        label={label}
+        value={thePConn.getLocalizedValue(
+          value,
+          localePath,
+          thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName),
+        )}
+        hideLabel={hideLabel}
+        variant={displayMode === 'STACKED_LARGE_VAL' ? 'stacked' : 'inline'}
+      />
+    );
+  }
+
+  const handleChange = (val) => {
+    if (readOnly) return;
+
+    const selectedValue = theOptions.find((option) => option.key === val);
+    handleEvent(actions, 'changeNblur', propName, selectedValue.key);
+  };
+
+  return (
+    <FormFieldWrapper style={{ width: '100%' }}>
+      {label && <LabelText label={label} required={required} style={{ color: '#fff', paddingBottom: 10 }} />}
+      <Radio
+        options={theOptions.map((theOption) => ({
+          label: theOption.value,
+          value: theOption.key,
+        }))}
+        readOnly={readOnly}
+        selectedValue={theSelectedButton}
+        onChange={handleChange}
+        inline={inline}
+        disabled={disabled}
+      />
+
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

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

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

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

@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import { TextInput as RNTextInput } from 'react-native-paper';
+
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import LabelText from '../../common/LabelText';
+import HelperText from '../../common/HelperText';
+import DisplayField from '../../common/DisplayField';
+import { FORM_INPUT_PROPS } from '../../common/inputTheme';
+import handleEvent from '../../helpers/event-utils';
+import { PConnFieldProps } from '../../../types/PConnProps';
+
+interface TextAreaProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextArea here
+  fieldMetadata?: any;
+}
+
+export default function TextArea(props: TextAreaProps) {
+  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) {
+    // update internal value
+    setInputValue(value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
+  return (
+    <FormFieldWrapper>
+      <RNTextInput
+        multiline
+        numberOfLines={5}
+        {...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}
+        style={{ minHeight: 100, maxHeight: 200 }}
+      />
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

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

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

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

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { TextInput as RNTextInput } from 'react-native-paper';
+
+import FormFieldWrapper from '../../common/FormFieldWrapper';
+import LabelText from '../../common/LabelText';
+import HelperText from '../../common/HelperText';
+import DisplayField from '../../common/DisplayField';
+import { FORM_INPUT_PROPS } from '../../common/inputTheme';
+import handleEvent from '../../helpers/event-utils';
+import { PConnFieldProps } from '../../../types/PConnProps';
+
+interface TextInputProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  fieldMetadata?: any;
+  additionalProps?: object;
+}
+
+export default function TextInput(props: TextInputProps) {
+  const {
+    getPConnect,
+    placeholder,
+    validatemessage,
+    label,
+    hideLabel,
+    helperText,
+    required,
+    disabled,
+    value = '',
+    status,
+    readOnly,
+    displayMode,
+    testId,
+  } = 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>
+      <RNTextInput
+        {...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/TextInput/index.tsx

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

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

@@ -0,0 +1,86 @@
+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 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 URL here
+  fieldMetadata?: any;
+}
+
+export default function URL(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>
+      <RNTextInput
+        {...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}
+        keyboardType="url" // This optimizes the keyboard for URL entry
+        autoCapitalize="none" // URLs are typically lowercase
+        autoCorrect={false} // Prevents unwanted autocorrection
+      />
+      <HelperText type={status === 'error' ? 'error' : 'info'} value={helperTextToDisplay} />
+    </FormFieldWrapper>
+  );
+}

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

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

package/templates/react-native-sdk-reference/src/components/helpers/data_page.ts

@@ -0,0 +1,20 @@
+export const getDataPage = (dataPageName, parameters, context) => {
+  let dataViewParams;
+  if (parameters) {
+    dataViewParams = {
+      dataViewParameters: parameters,
+    };
+  }
+  return new Promise((resolve, reject) => {
+    (PCore.getDataApiUtils().getData(dataPageName, dataViewParams, context) as any)
+      .then((response) => {
+        resolve(response.data.data);
+      })
+      .catch((e) => {
+        if (e) {
+          // check specific error if 401, and wiped out if so stored token is stale.  Fetcch new tokens.
+          reject(e);
+        }
+      });
+  });
+};

package/templates/react-native-sdk-reference/src/components/helpers/event-utils.ts

@@ -0,0 +1,20 @@
+// From DX Components src/utils/event-utils.js
+
+const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+  switch (eventType) {
+    case 'change':
+      actions.updateFieldValue(propName, value);
+      break;
+    case 'blur':
+      actions.triggerFieldChange(propName, value);
+      break;
+    case 'changeNblur':
+      actions.updateFieldValue(propName, value);
+      actions.triggerFieldChange(propName, value);
+      break;
+    default:
+      break;
+  }
+};
+
+export default handleEvent;

package/templates/react-native-sdk-reference/src/components/helpers/instructions-utils.ts

@@ -0,0 +1,57 @@
+export const setVisibilityForList = (c11nEnv, visibility) => {
+  const { selectionMode, selectionList, renderMode, referenceList } = c11nEnv.getComponentConfig();
+  // usecase:multiselect, fieldgroup, editable table
+  if (
+    (selectionMode === PCore.getConstants().LIST_SELECTION_MODE.MULTI && selectionList) ||
+    (renderMode === 'Editable' && referenceList)
+  ) {
+    c11nEnv.getListActions().setVisibility(visibility);
+  }
+};
+
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  const referencePropParent = referenceProp?.split('.').pop();
+  return parentPropName === referencePropParent;
+};
+
+const updateNewInstructions = (c11nEnv, selectionList) => {
+  const { datasource: { parameters = {} } = {} } = c11nEnv.getFieldMetadata(selectionList) || {};
+  const compositeKeys: any = [];
+  Object.values(parameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, selectionList)) compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+  });
+  c11nEnv.getListActions().initDefaultPageInstructions(selectionList, compositeKeys);
+};
+
+const insertInstruction = (c11nEnv, selectionList, selectionKey, primaryField, item, additionalFields) => {
+  const { id, primary } = item;
+  const actualProperty = selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey;
+  const displayProperty = primaryField.startsWith('.') ? primaryField.substring(1) : primaryField;
+  const rows = c11nEnv.getValue(`${c11nEnv.getPageReference()}${selectionList}`) || [];
+  const startIndex = rows.length;
+  const content = {
+    [actualProperty]: id,
+    [displayProperty]: primary,
+    nonFormProperties: actualProperty !== displayProperty ? [displayProperty] : [],
+  };
+  // additional fields(ex:composite keys) to be submitted
+  additionalFields
+    ?.map((key) => {
+      return key.startsWith('.') ? key.substring(1) : key;
+    })
+    .forEach((col, index) => {
+      content[col] = item.secondaryFieldValues[index];
+    });
+  c11nEnv.getListActions().insert(content, startIndex);
+};
+
+const deleteInstruction = (c11nEnv, selectionList, selectionKey, item) => {
+  const { id } = item;
+  const actualProperty = selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey;
+  const rows = c11nEnv.getValue(`${c11nEnv.getPageReference()}${selectionList}`) || [];
+  const index = rows.findIndex((row) => row[actualProperty] === id);
+  c11nEnv.getListActions().deleteEntry(index);
+};
+
+export { updateNewInstructions, insertInstruction, deleteInstruction };

package/templates/react-native-sdk-reference/src/components/helpers/state-utils.tsx

@@ -0,0 +1,46 @@
+import { useContext } from 'react';
+import { connect, Provider, shallowEqual } from 'react-redux';
+
+import ReactReduxContext from '../../bridge/Context/StoreContext';
+
+const connectToState = (mapStateToProps = () => {}) => {
+  return (Component: any) => {
+    const ConnectedComponent = connect(mapStateToProps, null, null, {
+      areStatePropsEqual: (next, prev: any) => {
+        // Compare visibility
+        const prevWasVisible = prev.visibility !== false;
+        if (next.visibility !== undefined && next.visibility !== prevWasVisible) {
+          return false;
+        }
+        // Compare start props
+        const c11nEnv = next.getPConnect();
+        const allStateProps = c11nEnv.getStateProps();
+        for (const key of Object.keys(allStateProps)) {
+          if (
+            !shallowEqual(next[key], prev[key]) ||
+            (next.routingInfo && !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))
+          ) {
+            return false;
+          }
+        }
+        /* TODO For some rawConfig we are not getting routingInfo under allStateProps */
+        return !(
+          'routingInfo' in next &&
+          (!shallowEqual(next.routingInfo, prev.routingInfo) || !PCore.isDeepEqual(next.routingInfo, prev.routingInfo))
+        );
+      },
+    })(Component);
+
+    return (ownProps = {}) => {
+      const { store } = useContext<any>(ReactReduxContext);
+
+      return (
+        <Provider store={store}>
+          <ConnectedComponent {...ownProps} />
+        </Provider>
+      );
+    };
+  };
+};
+
+export default connectToState;

package/templates/react-native-sdk-reference/src/components/helpers/template-utils.ts

@@ -0,0 +1,75 @@
+export function getAllFields(pConnect: any) {
+  const metadata = pConnect.getRawMetadata();
+  let allFields: any[] = [];
+  if (metadata.children && metadata.children.map) {
+    allFields = metadata.children.map((fields) => {
+      const children = fields.children instanceof Array ? fields.children : [];
+      return children.map((field) => field.config);
+    });
+  }
+  return allFields;
+}
+
+export function filterForFieldValueList(fields: any[]) {
+  return fields
+    .filter(({ visibility }) => visibility !== false)
+    .map(({ value, label }) => ({
+      id: label.toLowerCase(),
+      name: label,
+      value,
+    }));
+}
+
+/**
+ * Determine if the current view is the view of the case step/assignment.
+ * @param {Function} pConnect PConnect object for the component
+ */
+export function getIsAssignmentView(pConnect) {
+  // Get caseInfo content from the store which contains the view info about the current assignment/step
+  // TODO To be replaced with pConnect.getCaseInfo().getCurrentAssignmentView when it's available
+  const assignmentViewClass = pConnect.getValue(PCore.getConstants().CASE_INFO.CASE_INFO_CLASSID);
+  const assignmentViewName = pConnect.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);
+
+  const assignmentViewId = `${assignmentViewName}!${assignmentViewClass}`;
+
+  // Get the info about the current view from pConnect
+  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
+
+  return assignmentViewId === currentViewId;
+}
+
+/**
+ * A hook that gets the instructions content for a view.
+ * @param {Function} pConnect PConnect object for the component
+ * @param {string} [instructions="casestep"] 'casestep', 'none', or the html content of a Rule-UI-Paragraph rule (processed via core's paragraph annotation handler)
+ */
+export function getInstructions(pConnect, instructions: string = 'casestep'): string | undefined {
+  const caseStepInstructions =
+    PCore.getConstants().CASE_INFO.INSTRUCTIONS && pConnect.getValue(PCore.getConstants().CASE_INFO.INSTRUCTIONS);
+
+  // Determine if this view is the current assignment/step view
+  const isCurrentAssignmentView = getIsAssignmentView(pConnect);
+
+  // Case step instructions
+  if (instructions === 'casestep' && isCurrentAssignmentView && caseStepInstructions?.length) {
+    return caseStepInstructions;
+  }
+
+  // No instructions
+  if (instructions === 'none') {
+    return undefined;
+  }
+
+  // If the annotation wasn't processed correctly, don't return any instruction text
+  if (instructions?.startsWith('@PARAGRAPH')) {
+    return undefined;
+  }
+
+  // Custom instructions from the view
+  // The raw metadata for `instructions` will be something like '@PARAGRAPH .SomeParagraphRule' but
+  // it is evaluated by core logic to the content
+  if (instructions !== 'casestep' && instructions !== 'none') {
+    return instructions;
+  }
+  return undefined;
+}