@pega/react-sdk-overrides 0.23.6

package/lib/forms/Currency/Currency.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+// import { TextField } from "@material-ui/core";
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+
+// Using control from: https://github.com/unicef/material-ui-currency-textfield
+
+export default function Currency(props) {
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    /* onChange, onBlur, */
+    readOnly,
+    testId,
+    helperText,
+    displayMode
+  } = props;
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn.getStateProps().value;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  // console.log(`Currency: label: ${label} value: ${value}`);
+
+  let readOnlyProp = {}; // Note: empty if NOT ReadOnly
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  const [currValue, setCurrValue] = useState();
+
+  useEffect(() => {
+    // const testVal = value;
+    setCurrValue(value.toString());
+  }, [value]);
+
+  if(displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />
+  }
+
+  function currOnChange(event, inValue) {
+    // console.log(`Currency currOnChange inValue: ${inValue}`);
+
+    // update internal value
+    setCurrValue(inValue);
+  }
+
+  function currOnBlur(event, inValue) {
+    // console.log(`Currency currOnBlur inValue: ${inValue}`);
+    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
+  }
+
+  return (
+    <CurrencyTextField
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder=''
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={currOnChange}
+      onBlur={!readOnly ? currOnBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={currValue}
+      type='text'
+      outputFormat='number'
+      textAlign='left'
+      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}
+    />
+  );
+}

package/lib/forms/Currency/index.tsx

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

package/lib/forms/Date/Date.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { KeyboardDatePicker } from '@material-ui/pickers';
+import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+
+export default function Date(props) {
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode
+  } = props;
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn.getStateProps().value;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  if(displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />
+  }
+
+  if (readOnly) {
+    // const theReadOnlyComp = <TextInput props />
+    return <TextInput {...props} />;
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  const handleChange = date => {
+    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    onChange({ value: changeValue });
+  };
+
+  const handleAccept = date => {
+    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    handleEvent(actions, 'changeNblur', propName, changeValue);
+  };
+
+  return (
+    <KeyboardDatePicker
+      disableToolbar
+      variant='inline'
+      inputVariant='outlined'
+      placeholder='mm/dd/yyyy'
+      fullWidth
+      autoOk
+      required={required}
+      disabled={disabled}
+      format='MM/DD/YYYY'
+      mask='__/__/____'
+      error={status === 'error'}
+      helperText={helperTextToDisplay}
+      size='small'
+      label={label}
+      value={value || null}
+      onChange={handleChange}
+      onBlur={!readOnly ? onBlur : undefined}
+      onAccept={handleAccept}
+      InputProps={{ ...testProp }}
+    />
+  );
+}

package/lib/forms/Date/index.tsx

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

package/lib/forms/DateTime/DateTime.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { KeyboardDateTimePicker } from '@material-ui/pickers';
+import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+
+export default function DateTime(props) {
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    readOnly,
+    testId,
+    helperText,
+    displayMode
+  } = props;
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = pConn.getStateProps().value;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  if(displayMode === 'LABELS_LEFT'){
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field}/>
+  }
+
+  if (readOnly) {
+    return <TextInput {...props} />;
+  }
+
+  const handleChange = date => {
+    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    onChange({ value: changeValue });
+  };
+
+  const handleAccept = date => {
+    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    handleEvent(actions, 'changeNblur', propName, changeValue);
+  };
+
+  //
+  // 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 (
+    <KeyboardDateTimePicker
+      variant='inline'
+      inputVariant='outlined'
+      fullWidth
+      autoOk
+      required={required}
+      disabled={disabled}
+      placeholder='mm/dd/yyyy hh:mm am'
+      format='MM/DD/YYYY hh:mm a'
+      mask='__/__/____ __:__ _m'
+      minutesStep={5}
+      error={status === 'error'}
+      helperText={helperTextToDisplay}
+      size='small'
+      label={label}
+      value={value || null}
+      onChange={handleChange}
+      onAccept={handleAccept}
+      data-test-id={testId}
+    />
+  );
+}

package/lib/forms/DateTime/index.tsx

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

package/lib/forms/Decimal/Decimal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+
+export default function Decimal(props) {
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    helperText,
+    displayMode
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  if(displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />
+  }
+
+  if (readOnly) {
+    return <TextInput {...props} />;
+  }
+
+  return (
+    <TextField
+      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}
+      type='text'
+      inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}
+    />
+  );
+}

package/lib/forms/Decimal/index.tsx

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

package/lib/forms/Dropdown/Dropdown.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import { TextField } from '@material-ui/core';
+import MenuItem from '@material-ui/core/MenuItem';
+import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+
+interface IOption {
+  key: string;
+  value: string;
+}
+
+export default function Dropdown(props) {
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    placeholder,
+    value = '',
+    datasource = [],
+    validatemessage,
+    status,
+    readOnly,
+    testId,
+    helperText
+  } = props;
+  const [options, setOptions] = useState<Array<IOption>>([]);
+  const helperTextToDisplay = validatemessage || helperText;
+
+  const thePConn = getPConnect();
+  const actionsApi = thePConn.getActionsApi();
+  const propName = thePConn.getStateProps().value;
+
+  useEffect(() => {
+    const optionsList = Utils.getOptionList(props, getPConnect().getDataObject());
+    optionsList.unshift({ key: 'Select', value: 'Select...' });
+    setOptions(optionsList);
+  }, [datasource]);
+
+  let readOnlyProp = {};
+
+  if (readOnly) {
+    readOnlyProp = { readOnly: true };
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  const handleChange = evt => {
+    const selectedValue = evt.target.value === 'Select' ? '' : evt.target.value;
+    handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
+  };
+
+  // Material UI shows a warning if the component is rendered before options are set.
+  //  So, hold off on rendering anything until options are available...
+  return options.length === 0 ? null : (
+    <TextField
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder={placeholder}
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={!readOnly ? handleChange : undefined}
+      error={status === 'error'}
+      label={label}
+      value={value === '' && !readOnly ? 'Select' : value}
+      select
+      InputProps={{ ...readOnlyProp, ...testProp }}
+    >
+      {options.map((option: any) => (
+        <MenuItem key={option.key} value={option.key}>
+          {option.value}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+}

package/lib/forms/Dropdown/index.tsx

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

package/lib/forms/Email/Email.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { TextField, InputAdornment } from '@material-ui/core';
+import MailOutlineIcon from '@material-ui/icons/MailOutline';
+import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+
+export default function Email(props) {
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  if(displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />
+  }
+
+  if (readOnly) {
+    return <TextInput {...props} />;
+  }
+
+
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  return (
+    <TextField
+      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}
+      type='email'
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position='start'>
+            <MailOutlineIcon />
+          </InputAdornment>
+        ),
+        inputProps: { ...testProp }
+      }}
+    />
+  );
+}

package/lib/forms/Email/index.tsx

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

package/lib/forms/Integer/Integer.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+
+export default function Integer(props) {
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  // console.log(`Integer: label: ${label} value: ${value}`);
+
+  if(displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />
+  }
+
+  if (readOnly) {
+    return <TextInput {...props} />;
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  function intOnChange(event) {
+    // console.log(`Integer intOnChange inValue: ${event.target.value}`);
+
+    // Disallow "." and "," (separators) since this is an integer field
+    //  Mimics Pega Integer behavior (where separator characters are "eaten" if they're typed)
+    const disallowedChars = ['.', ','];
+    const theAttemptedValue = event.target.value;
+    const lastChar = theAttemptedValue.slice(-1);
+
+    if (disallowedChars.includes(lastChar)) {
+      event.target.value = theAttemptedValue.slice(0, -1);
+    }
+
+    // Pass through to the Constellation change handler
+    onChange(event);
+  }
+
+  return (
+    <TextField
+      fullWidth
+      variant={readOnly ? 'standard' : 'outlined'}
+      helperText={helperTextToDisplay}
+      placeholder=''
+      size='small'
+      required={required}
+      disabled={disabled}
+      onChange={intOnChange}
+      onBlur={!readOnly ? onBlur : undefined}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      type='text'
+      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+    />
+  );
+}

package/lib/forms/Integer/index.tsx

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

package/lib/forms/Percentage/Percentage.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { TextField } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import TextInput from '@pega/react-sdk-components/lib/components/forms/TextInput';
+import FieldValueList from '@pega/react-sdk-components/lib/components/designSystemExtensions/FieldValueList';
+
+// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
+const useStyles = makeStyles((/* theme */) => ({
+  input: {
+    '& input[type=number]': {
+      '-moz-appearance': 'textfield'
+    },
+    '& input[type=number]::-webkit-outer-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    },
+    '& input[type=number]::-webkit-inner-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0
+    }
+  }
+}));
+
+export default function Percentage(props) {
+  const classes = useStyles();
+
+  const {
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    status,
+    onChange,
+    onBlur,
+    readOnly,
+    testId,
+    helperText,
+    displayMode
+  } = props;
+  const helperTextToDisplay = validatemessage || helperText;
+
+  // console.log(`Percentage: label: ${label} value: ${value}`);
+
+  if(displayMode === 'LABELS_LEFT') {
+    const field = {
+      [label]: value
+    };
+    return <FieldValueList item={field} />
+  }
+
+  if (readOnly) {
+    return <TextInput {...props} />;
+  }
+
+  let testProp = {};
+
+  testProp = {
+    'data-test-id': testId
+  };
+
+  return (
+    <TextField
+      className={classes.input}
+      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}
+      type='number'
+      inputProps={{ ...testProp }}
+    />
+  );
+}

package/lib/forms/Percentage/index.tsx

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