@pega/dx-component-builder-sdk 0.23.1 → 0.23.2

package/tests/assets/components/SDK-React/createAll/override-sdk/field/TextInput/TextInput.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from 'react';
+import { TextField } from '@material-ui/core';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import type { 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) {
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    /* onChange, onBlur */
+    readOnly,
+    testId,
+    fieldMetadata,
+    helperText,
+    displayMode,
+    hideLabel
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn.getStateProps()["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=''
+      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/components/SDK-React/createAll/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/components/SDK-React/createAll/override-sdk/field/TextInput/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/field/Time/Time.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { KeyboardTimePicker } from '@material-ui/pickers';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import dayjs from 'dayjs';
+import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import type { 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) {
+  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/components/SDK-React/createAll/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/components/SDK-React/createAll/override-sdk/field/Time/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/field/URL/URL.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import TextInput from '@pega/react-sdk-components/lib/components/field/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldValueList';
+import type { 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) {
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel
+  } = 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=''
+      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/components/SDK-React/createAll/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/components/SDK-React/createAll/override-sdk/field/URL/index.tsx

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

package/tests/assets/components/SDK-React/createAll/override-sdk/field/UserReference/UserReference.tsx

@@ -0,0 +1,189 @@
+import React, { Fragment, memo, useEffect, useState } from 'react';
+import { Typography } from '@material-ui/core';
+import AutoComplete from '@pega/react-sdk-components/lib/components/field/AutoComplete';
+import Dropdown from '@pega/react-sdk-components/lib/components/field/Dropdown';
+import { getUserId, isUserNameAvailable } from './UserReferenceUtils';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 errors)
+declare const PCore: any;
+
+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) => {
+  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 no-unused-vars, @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 => {
+          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()
+        .invokeRestApi('getListData', { queryPayload })
+        .then(res => {
+          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 = (
+        <Fragment>
+          {/*
+            TODO: This has to be replaced with Operator Component
+          */}
+          <div>
+            <Typography variant='caption'>{label}</Typography>
+            <Typography variant='body1'>{userName}</Typography>
+          </div>
+        </Fragment>
+      );
+    }
+  } 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/components/SDK-React/createAll/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/components/SDK-React/createAll/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/components/SDK-React/createAll/override-sdk/field/UserReference/index.tsx

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

package/tests/assets/components/SDK-React/createAll/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**.

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/ActionButtons/ActionButtons.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { makeStyles } from '@material-ui/core/styles';
+
+import Button from '@material-ui/core/Button';
+import { Grid, Divider } from "@material-ui/core";
+
+// ActionButtons does NOT have getPConnect. So, no need to extend from PConnProps
+interface ActionButtonsProps {
+  // If any, enter additional props that only exist on this component
+  arMainButtons?: Array<any>,
+  arSecondaryButtons?: Array<any>,
+  onButtonPress: any
+}
+
+
+const useStyles = makeStyles((/* theme */) => ({
+  button: {
+    padding: "0px 5px",
+  },
+  divider: {
+    marginTop: "10px",
+    marginBottom: "10px"
+  }
+}));
+
+
+export default function ActionButtons(props: ActionButtonsProps) {
+  const { arMainButtons = [], arSecondaryButtons = [], onButtonPress } = props;
+  const classes = useStyles();
+  const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  const localeCategory = 'Assignment';
+
+  function _onButtonPress(sAction: string, sButtonType: string) {
+
+    onButtonPress(sAction, sButtonType);
+  }
+
+  return (
+    <React.Fragment>
+      <Divider className={classes.divider}/>
+      <Grid container spacing={4} justifyContent="space-between">
+        <Grid item>
+          <Grid container spacing={1}>
+          {arSecondaryButtons.map((sButton) => (
+                  <Grid item key={sButton.name}>
+                    <Button variant="contained" color="secondary" onClick={() => { _onButtonPress(sButton.jsAction, "secondary")}} >{localizedVal(sButton.name, localeCategory)}</Button>
+                  </Grid>
+                ))}
+          </Grid>
+        </Grid>
+        <Grid item>
+          <Grid container spacing={1}>
+          {arMainButtons.map((mButton) => (
+                  <Grid item key={mButton.name}>
+                    <Button variant="contained" color="primary" onClick={() => { _onButtonPress(mButton.jsAction, "primary")}} >{localizedVal(mButton.name, localeCategory)}</Button>
+                  </Grid>
+                ))}
+          </Grid>
+        </Grid>
+      </Grid>
+
+    </React.Fragment>
+
+  )
+}

package/tests/assets/components/SDK-React/createAll/override-sdk/infra/ActionButtons/index.tsx

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