feat(date-time-picker-web): implement useSetupProps hook and date-utils for date picker

Author: samuelreichert

packages/pluggableWidgets/date-time-picker-web/src/hooks/useSetupProps.ts

@@ -0,0 +1,147 @@
+import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { DatePickerProps } from "react-datepicker";
+import { DateTimePickerContainerProps, TypeEnum } from "typings/DateTimePickerProps";
+import { MXSessionLocale } from "../../typings/global";
+import { DatePickerController } from "../helpers/DatePickerController";
+import { getLocale, pickerDateFormat, setupLocales } from "../utils/date-utils";
+
+export type Day = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export function useSetupProps(
+    {
+        tabIndex,
+        type,
+        dateFormat,
+        timeFormat,
+        dateTimeFormat,
+        placeholder,
+        dateAttribute,
+        editable,
+        ariaRequired,
+        onEnter,
+        onLeave
+    }: DateTimePickerContainerProps,
+    controller: DatePickerController
+): DatePickerProps {
+    const id = `DateFilter${generateUUID()}`;
+    const locale = getLocale();
+    const calendarStartDay = locale.firstDayOfWeek as Day;
+    const calendarLocale = setupLocales(locale);
+
+    const formatProps = formatPropsBuilder(
+        type,
+        dateFormat,
+        timeFormat,
+        dateTimeFormat,
+        dateAttribute.value ?? new Date(),
+        null,
+        locale
+    );
+
+    const popperProps: Pick<
+        DatePickerProps,
+        "popperPlacement" | "popperProps" | "showPopperArrow" | "popperModifiers"
+    > = {
+        popperPlacement: "bottom-start",
+        popperProps: {
+            strategy: "fixed",
+            transform: false
+        },
+        showPopperArrow: false,
+        popperModifiers: [
+            {
+                name: "computeStyles",
+                options: {
+                    gpuAcceleration: false
+                },
+                fn: () => ({})
+            }
+        ]
+    };
+
+    return {
+        // Static props
+        allowSameDay: false,
+        autoFocus: false,
+        calendarClassName: "widget-datetimepicker-calendar",
+        className: "widget-datetimepicker-input",
+        dropdownMode: "select",
+        enableTabLoop: true,
+        shouldCloseOnSelect: false,
+        showMonthDropdown: true,
+        showYearDropdown: true,
+        strictParsing: true,
+        useWeekdaysShort: false,
+
+        // Base props
+        ariaLabelledBy: `${id}-label`,
+        ariaRequired: ariaRequired.toString(),
+        disabled: editable === "never",
+        locale: calendarLocale,
+        placeholderText: placeholder?.status === "available" ? placeholder.value : "",
+        tabIndex: tabIndex ?? 0,
+
+        // Formatting props
+        calendarStartDay,
+        ...formatProps,
+
+        // Events props
+        onBlur: () => onLeave?.canExecute && !onLeave.isExecuting && onLeave.execute(),
+        onCalendarClose: controller.handleCalendarClose,
+        onCalendarOpen: controller.handleCalendarOpen,
+        onChange: controller.handlePickerChange,
+        onChangeRaw: controller.UNSAFE_handleChangeRaw,
+        onFocus: () => onEnter?.canExecute && !onEnter.isExecuting && onEnter.execute(),
+        onKeyDown: controller.handleKeyDown,
+
+        // Popper props
+        ...popperProps
+    };
+}
+
+function formatPropsBuilder(
+    type: TypeEnum,
+    dateFormat: string,
+    timeFormat: string,
+    dateTimeFormat: string,
+    date: Date,
+    endDate: Date | null,
+    locale: MXSessionLocale
+): Omit<DatePickerProps, "onChange"> {
+    switch (type) {
+        case "date":
+            return {
+                dateFormat: dateFormat || pickerDateFormat(locale),
+                showTimeSelect: false,
+                showTimeSelectOnly: false,
+                selected: date
+            };
+        case "time":
+            return {
+                dateFormat: timeFormat || "h:mm aa",
+                showTimeSelect: true,
+                showTimeSelectOnly: true,
+                timeIntervals: 15,
+                timeCaption: "Time",
+                selected: date
+            };
+        case "datetime":
+            return {
+                dateFormat: dateTimeFormat || pickerDateFormat(locale),
+                showTimeSelect: true,
+                timeIntervals: 15,
+                timeCaption: "Time",
+                timeFormat: timeFormat || "h:mm aa",
+                selected: date
+            };
+        case "range":
+            return {
+                dateFormat: dateFormat || pickerDateFormat(locale),
+                selected: date,
+                isClearable: true,
+                selectsRange: true,
+                startDate: date,
+                endDate: endDate
+            };
+    }
+}

packages/pluggableWidgets/date-time-picker-web/src/utils/date-utils.ts

@@ -0,0 +1,89 @@
+import * as locales from "date-fns/locale";
+import { registerLocale } from "react-datepicker";
+import { MXSessionLocale } from "../../typings/global";
+
+/**
+ * This function takes format string and replace
+ * single "d" and "M" with their "double" equivalent
+ * Main purpose is to "fix" value formats accepted
+ * by DateFilter input. Idea is that if format string is
+ * uses short format (e.g d-M-yyyy) user should still
+ * be able to type value with leading zeros "09-02-2002".
+ *
+ * Example:
+ * "d/M/yyyy" -> "dd/MM/yyyy"
+ *
+ * @param formatString
+ */
+export function doubleMonthOrDayWhenSingle(formatString: string): string {
+    return formatString.replaceAll(/d+|M+/g, m => (m.length > 1 ? m : m + m));
+}
+
+/**
+ * Given a date formatter string replaces all uppercase 'E' to the lowercase 'e'
+ * this function returns the same string with the above characters replaced.
+ * Example: "YYww.E" returns "YYww.e"
+ * @function dayOfWeekWhenUpperCase
+ * @param {string} formatString The string used to find cases of uppercase E.
+ * @return {string} The same string but with 'E' in lowercase ('e').
+ *
+ */
+export function dayOfWeekWhenUpperCase(formatString: string): string {
+    return formatString.replaceAll(/E/g, m => m.toLowerCase());
+}
+
+/**
+ * Map current app date format to date picker date format(s).
+ * @returns {string|string[]}
+ */
+export function pickerDateFormat(locale: MXSessionLocale): string | string[] {
+    const {
+        patterns: { date: appDateFormat }
+    } = locale;
+    let dateFormat: string | string[];
+    // Replace with full patterns d -> dd, M -> MM
+    dateFormat = doubleMonthOrDayWhenSingle(appDateFormat);
+    // Replace Date format E to follow unicode standard (e...eeee)
+    dateFormat = dayOfWeekWhenUpperCase(dateFormat);
+    // Use multiple formats if formats are not equal
+    return dateFormat === appDateFormat ? dateFormat : [dateFormat, appDateFormat];
+}
+
+interface DateFilterLocale {
+    [key: string]: locales.Locale;
+}
+
+/**
+ * Reg current locale in datepicker config.
+ * Later this locale can be passed to datepicker as locale prop.
+ * @returns {string} registered locale.
+ */
+export function setupLocales(locale: MXSessionLocale): string {
+    const { languageTag = "en-US" } = locale;
+
+    const [language] = languageTag.split("-");
+    const languageTagWithoutDash = languageTag.replace("-", "");
+
+    if (languageTagWithoutDash in locales) {
+        registerLocale(language, (locales as DateFilterLocale)[languageTagWithoutDash]);
+    } else if (language in locales) {
+        registerLocale(language, (locales as DateFilterLocale)[language]);
+    }
+
+    return language;
+}
+
+export function getLocale(): MXSessionLocale {
+    return window.mx
+        ? window.mx.session.getConfig().locale
+        : {
+              languageTag: "en-US",
+              code: "en_US",
+              firstDayOfWeek: 0,
+              patterns: {
+                  date: "M/d/yyyy",
+                  datetime: "M/d/yyyy, h:mm a",
+                  time: "h:mm a"
+              }
+          };
+}

packages/pluggableWidgets/date-time-picker-web/typings/global.d.ts

@@ -0,0 +1,30 @@
+export interface MXLocalePatterns {
+    date: string;
+    datetime: string;
+    time: string;
+}
+
+export interface MXSessionLocale {
+    code: string;
+    firstDayOfWeek: number;
+    languageTag: string;
+    patterns: MXLocalePatterns;
+}
+
+export interface MXSessionConfig {
+    locale: MXSessionLocale;
+}
+
+export interface MXSession {
+    getConfig(): MXSessionConfig;
+}
+
+export interface MXGlobalObject {
+    session: MXSession;
+}
+
+declare global {
+    interface Window {
+        mx?: MXGlobalObject;
+    }
+}