@pega/custom-dx-components 0.0.1 → 0.8.2

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/DateFormatter.js

@@ -0,0 +1,61 @@
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const types = ['fromNow', 'customFormat'];
+
+
+
+// value should be in ISO 8601 format.
+function DateFormatter(
+  value,
+  { type = types[1], format = "DD/MM/YYYY", tzone } = {}
+) {
+  if (!value) return value;
+  switch (type) {
+    case types[1]:
+      if (tzone) return dayjs(value).tz(tzone).format(format);
+      return dayjs(value).format(format);
+    case types[0]:
+      return dayjs(value).from(dayjs());
+    default:
+      return value;
+  }
+}
+
+// value should be in hh:mm:ss format (00:00:00 - 23:59:59).
+function TimeFormatter(value, options) {
+  if (!value) return value;
+  const { locale = "en-US" } = options;
+  const timeOnlyRegex = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
+  if (value.length === 8 && timeOnlyRegex.test(value)) {
+    const tempDate = new Date();
+    const hours = parseInt(value.substr(0, 2), 10);
+    const minutes = parseInt(value.substr(3, 2), 10);
+    const seconds = parseInt(value.substr(6, 2), 10);
+    tempDate.setHours(hours);
+    tempDate.setMinutes(minutes);
+    tempDate.setSeconds(seconds);
+    return tempDate.toLocaleTimeString(locale);
+  }
+  return DateFormatter(value, options);
+}
+
+export default {
+  Date: (value, options) => DateFormatter(value, { type: 'customFormat', ...options }),
+  'Date-Time-Default': (value, options) =>
+    DateFormatter(value, { ...options, type: 'customFormat', format: 'lll' }),
+  'Time-Default': (value, options) =>
+    TimeFormatter(value, {
+      ...options,
+      type: 'customFormat',
+      format: 'hh:mm A'
+    })
+};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/FormattedText.jsx

@@ -0,0 +1,41 @@
+import { FieldValueList } from '@pega/cosmos-react-core';
+import PropTypes from 'prop-types';
+
+import { format } from './date.js';
+
+export default function FormattedText(props) {
+  const { formatType, label, value, testId, hideLabel, variant, additionalProps } = props;
+
+  let text = value;
+
+  text = format(text, formatType, additionalProps);
+
+  const fields = [
+    {
+      id: label.toLowerCase(),
+      name: hideLabel ? '' : label,
+      value: text
+    }
+  ];
+  return <FieldValueList variant={variant} fields={fields} data-testid={testId} />;
+}
+
+FormattedText.defaultProps = {
+  formatType: 'none',
+  variant: 'stacked',
+  value: undefined,
+  label: '',
+  testId: null,
+  hideLabel: false,
+  additionalProps: {}
+};
+
+FormattedText.propTypes = {
+  formatType: PropTypes.string,
+  variant: PropTypes.oneOf(['inline', 'stacked']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  label: PropTypes.string,
+  testId: PropTypes.string,
+  additionalProps: PropTypes.objectOf(PropTypes.any),
+  hideLabel: PropTypes.bool
+};

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/config.json

@@ -0,0 +1,195 @@
+{
+  "name": "Pega_DXIL_MyDate",
+  "label": "My Date",
+  "description": "My Date",
+  "organization": "Pega",
+  "version": "0.0.1",
+  "library": "DXIL",
+  "allowedApplications": [],
+  "componentKey": "Pega_DXIL_MyDate",
+  "type": "Field",
+  "subtype": "Date",
+  "icon": "images/pz-date-time-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Column settings",
+      "format": "GROUP",
+      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
+      "properties": [
+        {
+          "name": "columnWidth",
+          "label": "Column width",
+          "format": "SELECT",
+          "source": [
+            {
+              "key": "auto",
+              "value": "Auto"
+            },
+            {
+              "key": "custom",
+              "value": "Custom"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "label": "Width (px)",
+          "format": "NUMBER",
+          "visibility": "$this.columnWidth == 'custom'"
+        }
+      ]
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "format": "LABEL",
+          "label": "Year range",
+          "variant": "secondary"
+        },
+        {
+          "format": "INLINE",
+          "elements": [
+            {
+              "key": "next",
+              "format": "LABEL",
+              "label": "Next",
+              "variant": "secondary"
+            },
+            {
+              "key": "nextYears",
+              "format": "NUMBER",
+              "label": "",
+              "name": "nextYearRange",
+              "min": 0
+            },
+            {
+              "key": "year",
+              "format": "LABEL",
+              "label": "years",
+              "variant": "secondary"
+            }
+          ]
+        },
+        {
+          "format": "INLINE",
+          "elements": [
+            {
+              "key": "previous",
+              "format": "LABEL",
+              "label": "Previous",
+              "variant": "secondary"
+            },
+            {
+              "key": "previousYears",
+              "format": "NUMBER",
+              "label": "",
+              "name": "previousYearRange",
+              "min": 0
+            },
+            {
+              "key": "year",
+              "format": "LABEL",
+              "label": "years",
+              "variant": "secondary"
+            }
+          ]
+        },
+        {
+          "name": "showWeekNumber",
+          "label": "Display week numbers on calendar",
+          "format": "BOOLEAN"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        }
+      ]
+    },
+    {
+      "label": "Read-only settings",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "showAsFormattedText",
+          "label": "Show as formatted text",
+          "format": "BOOLEAN"
+        },
+        {
+          "format": "SELECT",
+          "name": "formatter",
+          "label": "Format",
+          "defaultValue": "defaultDate",
+          "source": [
+            {
+              "key": "defaultDate",
+              "value": "Default"
+            },
+            {
+              "key": "DateTime-Long",
+              "value": "Date Time"
+            },
+            {
+              "key": "DateTime-Since",
+              "value": "Since"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label"
+  }
+}