@pega/dx-component-builder-sdk 0.23.10 → 0.23.12

package/tests/assets/sdk-r/components/create/override-sdk/field/TextArea/TextArea.tsx

@@ -0,0 +1,78 @@
+import { TextField } from '@material-ui/core';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/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) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    fieldMetadata,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const maxLength = fieldMetadata?.maxLength;
+
+  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) {
+    // Not just emitting a read only Textfield like some other components do
+    //  since we want to preserve the minRows, maxRows info.
+    readOnlyProp = { readOnly: true };
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  return (
+    <TextField
+      multiline
+      minRows={5}
+      maxRows={5}
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      onBlur={!readOnly ? onBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+    />
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/TextArea/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "TextArea",
+    "name": "TextArea",
+    "label": "Text area",
+    "description": "Text (paragraph)",
+    "type": "Field",
+    "subtype": "Text-Paragraph",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/TextArea/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/TextContent/TextContent.tsx

@@ -0,0 +1,47 @@
+import { Typography } from '@material-ui/core';
+
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface TextContentProps extends PConnProps {
+  // If any, enter additional props that only exist on TextContent here
+  content: string;
+  displayAs: 'Paragraph' | 'Heading 1' | 'Heading 2' | 'Heading 3' | 'Heading 4';
+}
+
+export default function TextContent(props: TextContentProps) {
+  type ExpectedDisplayAs = 'Paragraph' | 'Heading 1' | 'Heading 2' | 'Heading 3' | 'Heading 4';
+  type ExpectedVariants = 'body1' | 'h1' | 'h2' | 'h3' | 'h4';
+
+  const { content, displayAs }: { content: string; displayAs: ExpectedDisplayAs } = props;
+
+  let theVariant: ExpectedVariants = 'body1';
+
+  switch (displayAs) {
+    case 'Paragraph':
+      theVariant = 'body1';
+      break;
+
+    case 'Heading 1':
+      theVariant = 'h1';
+      break;
+
+    case 'Heading 2':
+      theVariant = 'h2';
+      break;
+
+    case 'Heading 3':
+      theVariant = 'h3';
+      break;
+
+    case 'Heading 4':
+      theVariant = 'h4';
+      break;
+
+    default:
+      // eslint-disable-next-line no-console
+      console.error(`TextContent got an expected displayAs prop: ${displayAs}`);
+      break;
+  }
+
+  return <Typography variant={theVariant}>{content}</Typography>;
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/TextContent/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "label": "TextContent",
+    "componentKey": "TextContent",
+    "name": "TextContent",
+    "description": "Text",
+    "type": "Field",
+    "subtype": "DATA_CAPTURE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/TextContent/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/TextInput/TextInput.tsx

@@ -0,0 +1,94 @@
+import { useState, useEffect } from 'react';
+import { TextField } from '@material-ui/core';
+
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface TextInputProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on TextInput here
+  fieldMetadata?: any;
+}
+
+export default function TextInput(props: TextInputProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    /* onChange, onBlur */
+    readOnly,
+    testId,
+    fieldMetadata,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const [inputValue, setInputValue] = useState('');
+  const maxLength = fieldMetadata?.maxLength;
+
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  useEffect(() => {
+    setInputValue(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' />;
+  }
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  function handleChange(event) {
+    // update internal value
+    setInputValue(event?.target?.value);
+  }
+
+  function handleBlur() {
+    handleEvent(actions, 'changeNblur', propName, inputValue);
+  }
+
+  return (
+    <TextField
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={handleChange}
+      onBlur={!readOnly ? handleBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={inputValue}
+      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+    />
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/TextInput/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "TextInput",
+    "name": "TextInput",
+    "label": "Text input",
+    "description": "Text (single line)",
+    "type": "Field",
+    "subtype": "Text",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/TextInput/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/Time/Time.tsx

@@ -0,0 +1,76 @@
+import { KeyboardTimePicker } from '@material-ui/pickers';
+import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import dayjs from 'dayjs';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface TimeProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Time here
+}
+
+export default function Time(props: TimeProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const TextInput = getComponentFromMap('TextInput');
+
+  const { label, required, disabled, value = '', validatemessage, status, onChange, readOnly, helperText, displayMode, hideLabel, testId } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  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 = {
+    'data-test-id': testId
+  };
+
+  const handleChange = date => {
+    const theValue = date && date.isValid() ? date.format('HH:mm') : null;
+    onChange({ value: theValue });
+  };
+
+  let timeValue: any = null;
+  if (value) {
+    const timeArray = value.split(':').map(itm => Number(itm));
+    timeValue = dayjs().hour(timeArray[0]).minute(timeArray[1]);
+  }
+
+  //
+  // 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 (
+    <KeyboardTimePicker
+      variant='inline'
+      inputVariant='outlined'
+      placeholder='hh:mm am'
+      keyboardIcon={<AccessTimeIcon />}
+      fullWidth
+      required={required}
+      disabled={disabled}
+      error={status === 'error'}
+      helperText={helperTextToDisplay}
+      minutesStep={5}
+      size='small'
+      label={label}
+      autoOk
+      mask='__:__ _m'
+      format='hh:mm a'
+      value={timeValue}
+      onChange={handleChange}
+      InputProps={{ inputProps: { ...testProp } }}
+    />
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Time/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "Time",
+    "name": "Time",
+    "label": "Time only",
+    "description": "Time only",
+    "type": "Field",
+    "subtype": "TimeOfDay",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Time/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/URL/URL.tsx

@@ -0,0 +1,72 @@
+import { TextField } from '@material-ui/core';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface URLComponentProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on URLComponent here
+}
+
+// NOTE: that we had to change the name from URL to URLComponent
+//  Otherwise, we were getting all kinds of weird errors when we
+//  referred to URL as a component.
+export default function URLComponent(props: URLComponentProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+  const TextInput = getComponentFromMap('TextInput');
+
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    placeholder
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  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 = {
+    'data-test-id': testId
+  };
+
+  return (
+    <TextField
+      type='url'
+      fullWidth
+      variant='outlined'
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      onBlur={!readOnly ? onBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      InputProps={{ inputProps: { ...testProp } }}
+    />
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/URL/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "componentKey": "URL",
+    "name": "URL",
+    "label": "URL",
+    "description": "URL",
+    "type": "Field",
+    "subtype": "Text-URL",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/URL/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/UserReference/UserReference.tsx

@@ -0,0 +1,191 @@
+import { memo, useEffect, useState } from 'react';
+import { Typography } from '@material-ui/core';
+
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
+
+const DROPDOWN_LIST = 'Drop-down list';
+const SEARCH_BOX = 'Search box';
+
+interface UserReferenceProps extends PConnProps {
+  // If any, enter additional props that only exist on URLComponent here
+  displayAs?: string;
+  label?: string;
+  value?: any;
+  testId?: string;
+  placeholder?: string;
+  helperText?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  validatemessage?: string;
+  showAsFormattedText?: boolean;
+  additionalProps?: object;
+  hideLabel?: boolean;
+  variant?: string;
+  onChange?: any;
+}
+
+const UserReference = (props: UserReferenceProps) => {
+  // Get emitted components from map (so we can get any override that may exist)
+  const AutoComplete = getComponentFromMap('AutoComplete');
+  const Dropdown = getComponentFromMap('Dropdown');
+
+  const {
+    label = '',
+    displayAs = '',
+    getPConnect,
+    value = '',
+    testId = '',
+    helperText = '',
+    validatemessage = '',
+    placeholder = '',
+    showAsFormattedText = false,
+    additionalProps = {},
+    hideLabel = false,
+    readOnly = false,
+    required = false,
+    disabled = false,
+    onChange,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    variant = 'inline'
+  } = props;
+  const [dropDownDataSource, setDropDownDataSource] = useState([]);
+  const [userName, setUserName] = useState('');
+  const OPERATORS_DP = PCore.getEnvironmentInfo().getDefaultOperatorDP();
+  const userId = getUserId(value);
+
+  useEffect(() => {
+    if (userId && readOnly && showAsFormattedText) {
+      if (isUserNameAvailable(value)) {
+        setUserName(value.userName);
+      } else {
+        // if same user ref field is referred in view as editable & readonly formatted text
+        // referenced users won't be available, so get user details from dx api
+        const { getOperatorDetails } = PCore.getUserApi();
+        getOperatorDetails(userId).then((res: any) => {
+          if (res.data && res.data.pyOperatorInfo && res.data.pyOperatorInfo.pyUserName) {
+            setUserName(res.data.pyOperatorInfo.pyUserName);
+          }
+        });
+      }
+    } else if (displayAs === DROPDOWN_LIST) {
+      const queryPayload = {
+        dataViewName: OPERATORS_DP
+      };
+
+      PCore.getRestClient()
+        // @ts-ignore - Argument of type '{ queryPayload: { dataViewName: string; }; }' is not assignable to parameter of type 'RestApiOptionsObject'
+        // @ts-ignore - Expected 3 arguments, but got 2
+        .invokeRestApi('getListData', { queryPayload })
+        .then((res: any) => {
+          const ddDataSource = res.data.data.map(listItem => ({
+            key: listItem.pyUserIdentifier,
+            value: listItem.pyUserName
+          }));
+          setDropDownDataSource(ddDataSource);
+        })
+        .catch(err => {
+          // eslint-disable-next-line no-console
+          console.error(err);
+        });
+    }
+  }, [displayAs, readOnly, showAsFormattedText, value]);
+
+  let userReferenceComponent: any = null;
+
+  if (readOnly && showAsFormattedText) {
+    if (userId) {
+      userReferenceComponent = (
+        <>
+          {/*
+            TODO: This has to be replaced with Operator Component
+          */}
+          <div>
+            <Typography variant='caption'>{label}</Typography>
+            <Typography variant='body1'>{userName}</Typography>
+          </div>
+        </>
+      );
+    }
+  } else {
+    if (displayAs === SEARCH_BOX) {
+      const columns = [
+        {
+          value: 'pyUserName',
+          display: 'true',
+          useForSearch: true,
+          primary: 'true'
+        },
+        {
+          value: 'pyUserIdentifier',
+          setProperty: 'Associated property',
+          key: 'true',
+          display: 'true',
+          secondary: 'true',
+          useForSearch: 'true'
+        }
+      ];
+
+      userReferenceComponent = (
+        <AutoComplete
+          additionalProps={additionalProps}
+          label={label}
+          getPConnect={getPConnect}
+          datasource={OPERATORS_DP}
+          listType='datapage'
+          columns={columns}
+          testId={testId}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          disabled={disabled}
+          required={required}
+          helperText={helperText}
+          validatemessage={validatemessage}
+          value={userId}
+          hideLabel={hideLabel}
+          onChange={onChange}
+        />
+      );
+    }
+    if (displayAs === DROPDOWN_LIST) {
+      userReferenceComponent = (
+        <Dropdown
+          additionalProps={additionalProps}
+          datasource={dropDownDataSource}
+          listType='associated'
+          getPConnect={getPConnect}
+          label={label}
+          value={userId}
+          testId={testId}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          disabled={disabled}
+          required={required}
+          helperText={helperText}
+          validatemessage={validatemessage}
+          hideLabel={hideLabel}
+          onChange={onChange}
+        />
+      );
+    }
+  }
+
+  return userReferenceComponent;
+};
+
+// as objects are there in props, shallow comparision fails & re-rendering of comp happens even with
+// same key value pairs in obj. hence using custom comparison function on when to re-render
+const comparisonFn = (prevProps, nextProps) => {
+  return (
+    getUserId(prevProps.value) === getUserId(nextProps.value) &&
+    prevProps.validatemessage === nextProps.validatemessage &&
+    prevProps.required === nextProps.required &&
+    prevProps.disabled === nextProps.disabled &&
+    prevProps.readOnly === nextProps.readOnly
+  );
+};
+
+export default memo(UserReference, comparisonFn);

package/tests/assets/sdk-r/components/create/override-sdk/field/UserReference/UserReferenceUtils.ts

@@ -0,0 +1,13 @@
+export const getUserId = user => {
+  let userId = '';
+  if (typeof user === 'object' && user !== null && user.userId) {
+    userId = user.userId;
+  } else if (typeof user === 'string' && user) {
+    userId = user;
+  }
+  return userId;
+};
+
+export const isUserNameAvailable = user => {
+  return typeof user === 'object' && user !== null && user.userName;
+};

package/tests/assets/sdk-r/components/create/override-sdk/field/UserReference/config-ext.json

@@ -0,0 +1,9 @@
+{
+    "label": "UserReference",
+    "componentKey": "UserReference",
+    "name": "UserReference",
+    "description": "User reference",
+    "type": "Field",
+    "subtype": "DATA_CAPTURE",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/UserReference/index.tsx

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

package/tests/assets/sdk-r/components/create/override-sdk/field/_field.md

@@ -0,0 +1,6 @@
+# The **override-sdk/field** directory
+
+The **src/components/override-sdk/field** directory contains the code for **field** components for which you want to override the default implementation for use with the **React SDK**.
+
+When you run the **npm run  create** command to override the default implementation of a **field** component, the generated code that you can use as a starting point
+for your component development will be placed in type-specific and component-specific folders in **src/components/override-sdk/field**.