@pega/dx-component-builder-sdk 8.23.15 → 8.23.17

package/tests/assets/components/SDK-React/create/override-sdk/field/SemanticLink/SemanticLink.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+/* although this is called the SemanticLink component, we are not yet displaying as a
+SemanticLink in SDK and only showing the value as a read only text field. */
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  fieldMargin: {
+    paddingRight: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginLeft: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  fieldLabel: {
+    fontWeight: 400,
+    color: theme.palette.text.secondary
+  },
+  fieldValue: {
+    fontWeight: 400,
+    color: theme.palette.text.primary
+  }
+}));
+
+interface SemanticLinkProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on SemanticLink here
+  // from previous PropTypes
+  text: string;
+}
+
+export default function SemanticLink(props: SemanticLinkProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const { text, displayMode, label, hideLabel } = props;
+  const classes = useStyles();
+
+  if (displayMode === 'LABELS_LEFT' || (!displayMode && label !== undefined)) {
+    const value = text || '---';
+    return (
+      <Grid container spacing={1} style={{ padding: '4px 0px' }} id="semantic-link-grid">
+        <Grid item xs={6}>
+          <Typography variant="body2" component="span" className={`${classes.fieldLabel} ${classes.fieldMargin}`}>
+            {label}
+          </Typography>
+        </Grid>
+        <Grid item xs={6}>
+          <Typography variant="body2" component="span" className={classes.fieldValue}>
+            {value}
+          </Typography>
+        </Grid>
+      </Grid>
+    );
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={text} variant="stacked" />;
+  }
+}

package/tests/assets/components/SDK-React/create/override-sdk/field/SemanticLink/config-ext.json

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

package/tests/assets/components/SDK-React/create/override-sdk/field/SemanticLink/index.tsx

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

package/tests/assets/components/SDK-React/create/override-sdk/field/SemanticLink/utils.ts

@@ -0,0 +1,52 @@
+// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
+declare const PCore: any;
+
+function getDataReferenceInfo(pConnect, dataRelationshipContext) {
+  if (!pConnect) {
+    throw Error("PConnect parameter is required");
+  }
+
+  let dataContext = "";
+  const payload = {};
+  const pageReference = pConnect.getPageReference();
+  const annotationUtils = PCore.getAnnotationUtils();
+  let fieldMetadata;
+
+  if (pageReference) {
+    /*
+    For page list the page refernce will be something like caseInfo.content.EmployeeRef[1].
+    Need to extract EmployeeRef from caseInfo.content.EmployeeRef[1]
+    */
+    const propertySplit = pageReference.split(".");
+
+    // Regex to match if the property is list type. Eg: EmployeeRef[1]
+    const listPropertyRegex = /([a-z|A-Z]*[[][\d]*)[\]]$/gm;
+    // Regex to match [1] part of the property EmployeeRef[1]
+    const indexRegex = /([[][\d]*[\]])+/gm;
+
+    let contextProperty = dataRelationshipContext !== null ? dataRelationshipContext : propertySplit.pop();
+    const isListProperty = listPropertyRegex.test(contextProperty);
+    contextProperty = isListProperty
+      ? contextProperty.replace(indexRegex, "")
+      : contextProperty;
+    fieldMetadata = pConnect.getFieldMetadata(contextProperty);
+  }
+
+  if (!!fieldMetadata && fieldMetadata.datasource) {
+    const { name, parameters } = fieldMetadata.datasource;
+    dataContext = name;
+    for (const [key, value] of Object.entries(parameters)) {
+      const property = dataRelationshipContext !== null ? annotationUtils.getPropertyName(value) : annotationUtils.getLeafPropertyName(value)
+      payload[key] = pConnect.getValue(`.${property}`);
+    }
+    return { dataContext, dataContextParameters: payload };
+  }
+
+  return {};
+}
+
+function isLinkTextEmpty(text) {
+  return text === "" || text === undefined || text === null;
+}
+
+export default { getDataReferenceInfo, isLinkTextEmpty };

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import type { 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
+  } = 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=""
+      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/components/SDK-React/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/components/SDK-React/create/override-sdk/field/TextArea/index.tsx

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

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+import type { 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/components/SDK-React/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/components/SDK-React/create/override-sdk/field/TextContent/index.tsx

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

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

@@ -0,0 +1,92 @@
+import React, { 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 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) {
+  // 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
+  } = 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/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/components/SDK-React/create/override-sdk/field/TextInput/index.tsx

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

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

@@ -0,0 +1,76 @@
+import React from 'react';
+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 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) {
+  // 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/components/SDK-React/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/components/SDK-React/create/override-sdk/field/Time/index.tsx

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

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+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) {
+  // 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
+  } = 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/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/components/SDK-React/create/override-sdk/field/URL/index.tsx

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