@variocube/app-ui 1.14.0

package/src/date-pickers/PlainTimeAdapter.ts

@@ -0,0 +1,247 @@
+import { Unit } from "@date-io/core/IUtils";
+import { Temporal } from "@js-temporal/polyfill";
+import {MuiPickersAdapter} from "@mui/x-date-pickers/internals";
+import {DateTimeFormat, Now, PlainTime} from "../temporal";
+import {parsePlainTime} from "./parse";
+import {durationToUnit, TemporalAdapter} from "./TemporalAdapter";
+
+export class PlainTimeAdapter extends TemporalAdapter<PlainTime> implements MuiPickersAdapter<PlainTime> {
+    lib = "PlainTimeAdapter";
+
+    date(value?: any): PlainTime | null {
+        if (value === null) {
+            return null;
+        }
+        if (value === undefined) {
+            return Now.plainTimeISO();
+        }
+
+        if (value instanceof PlainTime) {
+            return value;
+        }
+
+        if (typeof value === "string") {
+            try {
+                return PlainTime.from(value, {overflow: "reject"});
+            }
+            catch (error) {
+                return this.parse(value, this.formats.fullTime);
+            }
+        }
+
+        console.error("Unexpected value", value);
+        return null;
+    }
+
+    toJsDate(value: PlainTime): Date {
+        const date = new Date();
+        date.setHours(value.hour, value.minute, value.second, value.millisecond);
+        return date;
+    }
+
+    parseISO(isString: string): PlainTime {
+        return PlainTime.from(isString);
+    }
+
+    parse(value: string, format: string | DateTimeFormat): PlainTime | null {
+        try {
+            return parsePlainTime(value, format as any as DateTimeFormat);
+        }
+        catch (error) {
+            console.warn("Could not parse", {value, format});
+        }
+        return null;
+    }
+
+    isValid(value: any): boolean {
+        return this.date(value) != null;
+    }
+
+    isEqual(value: any, comparing: any): boolean {
+        const first = this.date(value);
+        const second = this.date(comparing);
+        if (first === second) {
+            return true;
+        }
+        if (!first || !second) {
+            return false;
+        }
+        return first.equals(second);
+    }
+
+    isSameHour(value: PlainTime, comparing: PlainTime): boolean {
+        return value.hour == comparing.hour;
+    }
+
+    startOfDay(value: PlainTime): PlainTime {
+        return new PlainTime();
+    }
+
+    endOfDay(value: PlainTime): PlainTime {
+        return new PlainTime();
+    }
+
+    getHours(value: PlainTime): number {
+        return value.hour;
+    }
+
+    setHours(value: PlainTime, count: number): PlainTime {
+        return value.with({hour: count});
+    }
+
+    getMinutes(value: PlainTime): number {
+        return value.minute;
+    }
+
+    setMinutes(value: PlainTime, count: number): PlainTime {
+        return value.with({minute: count});
+    }
+
+    getSeconds(value: PlainTime): number {
+        return value.second;
+    }
+
+    setSeconds(value: PlainTime, count: number): PlainTime {
+        return value.with({second: count});
+    }
+
+    setMonth(value: PlainTime, count: number): PlainTime {
+        return value;
+    }
+
+    setYear(value: PlainTime, count: number): PlainTime {
+        return value;
+    }
+
+    mergeDateAndTime(date: PlainTime, time: PlainTime): PlainTime {
+        return time;
+    }
+
+    addSeconds(value: PlainTime, count: number): PlainTime {
+        return value.add({seconds: count});
+    }
+
+    addMinutes(value: PlainTime, count: number): PlainTime {
+        return value.add({minutes: count});
+    }
+
+    addHours(value: PlainTime, count: number): PlainTime {
+        return value.add({hours: count});
+    }
+
+    addDays(value: PlainTime, count: number): PlainTime {
+        return value.add({days: count});
+    }
+
+    addWeeks(value: PlainTime, count: number): PlainTime {
+        return value.add({weeks: count});
+    }
+
+    addMonths(value: PlainTime, count: number): PlainTime {
+        return value.add({months: count});
+    }
+
+    getDiff(value: PlainTime, comparing: string | Temporal.PlainTime, unit?: Unit | undefined): number {
+        return durationToUnit(value.until(comparing), unit);
+    }
+
+    isSameDay(value: PlainTime, comparing: PlainTime): boolean {
+        return true;
+    }
+
+    isSameMonth(value: Temporal.PlainTime, comparing: Temporal.PlainTime): boolean {
+        return true;
+    }
+
+    isSameYear(value: Temporal.PlainTime, comparing: Temporal.PlainTime): boolean {
+        return true;
+    }
+
+    isAfter(value: Temporal.PlainTime, comparing: Temporal.PlainTime): boolean {
+        return PlainTime.compare(value, comparing) > 0;
+    }
+
+    isAfterDay(value: Temporal.PlainTime, comparing: Temporal.PlainTime): boolean {
+        return false;
+    }
+
+    isAfterYear(value: Temporal.PlainTime, comparing: Temporal.PlainTime): boolean {
+        return false;
+    }
+
+    isBeforeDay(value: Temporal.PlainTime, comparing: Temporal.PlainTime): boolean {
+        return false;
+    }
+
+    isBeforeYear(value: Temporal.PlainTime, comparing: Temporal.PlainTime): boolean {
+        return false;
+    }
+
+    isBefore(value: Temporal.PlainTime, comparing: Temporal.PlainTime): boolean {
+        return PlainTime.compare(value, comparing) < 0;
+    }
+
+    isWithinRange(value: Temporal.PlainTime, [start, end]: [Temporal.PlainTime, Temporal.PlainTime]): boolean {
+        return PlainTime.compare(value, start) > 0 && PlainTime.compare(value, end) < 0;
+    }
+
+    startOfYear(value: Temporal.PlainTime): Temporal.PlainTime {
+        return value;
+    }
+
+    endOfYear(value: Temporal.PlainTime): Temporal.PlainTime {
+        return value;
+    }
+
+    startOfMonth(value: Temporal.PlainTime): Temporal.PlainTime {
+        return value;
+    }
+
+    endOfMonth(value: Temporal.PlainTime): Temporal.PlainTime {
+        return value;
+    }
+
+    startOfWeek(value: Temporal.PlainTime): Temporal.PlainTime {
+        return value;
+    }
+
+    endOfWeek(value: Temporal.PlainTime): Temporal.PlainTime {
+        return value;
+    }
+
+    getMonth(value: Temporal.PlainTime): number {
+        return 1;
+    }
+
+    getDaysInMonth(value: Temporal.PlainTime): number {
+        return 30;
+    }
+
+    getNextMonth(value: Temporal.PlainTime): Temporal.PlainTime {
+        return value;
+    }
+
+    getPreviousMonth(value: Temporal.PlainTime): Temporal.PlainTime {
+        return value;
+    }
+
+    getMonthArray(value: Temporal.PlainTime): Temporal.PlainTime[] {
+        throw new Error("Method not implemented.");
+    }
+
+    getYear(value: Temporal.PlainTime): number {
+        throw new Error("Method not implemented.");
+    }
+
+    getWeekdays(): string[] {
+        throw new Error("Method not implemented.");
+    }
+
+    getWeekArray(date: Temporal.PlainTime): Temporal.PlainTime[][] {
+        throw new Error("Method not implemented.");
+    }
+
+    getYearRange(start: Temporal.PlainTime, end: Temporal.PlainTime): Temporal.PlainTime[] {
+        throw new Error("Method not implemented.");
+    }
+}

package/src/date-pickers/PlainTimePicker.spec.tsx

@@ -0,0 +1,22 @@
+import {PlainTime} from "../temporal";
+import {act, create, ReactTestRenderer} from "react-test-renderer";
+import * as React from "react";
+import {PlainTimePicker} from "./PlainTimePicker";
+
+describe("PlainTimePicker", () => {
+
+    test("render", () => {
+        let element: ReactTestRenderer;
+        act(() => {
+            element = create(
+                <PlainTimePicker
+                    locale="de"
+                    value={new PlainTime(22, 33)}
+                    onChange={() => {}}
+                />);
+        })
+        const {value} = element!.root.findByType("input").props;
+        expect(value).toBe("22:33");
+    });
+
+});

package/src/date-pickers/PlainTimePicker.tsx

@@ -0,0 +1,45 @@
+import {PlainTime} from "../temporal";
+import {useLocale} from "./useLocale";
+import {useRenderInput, UseRenderInputProps} from "./useRenderInput";
+import {LocalizationProvider, TimePicker} from "@mui/x-date-pickers";
+import * as React from "react";
+import {PlainTimeAdapter} from "./PlainTimeAdapter";
+
+interface PlainTimePickerProps {
+    value: PlainTime | null;
+    onChange: (value: PlainTime | null) => any;
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+
+    /**
+     * Allows overriding the locale. Only use for testing.
+     */
+    locale?: string;
+}
+
+export function PlainTimePicker(props: PlainTimePickerProps & UseRenderInputProps) {
+    const {
+        value,
+        onChange, label,
+        locale: suppliedLocale,
+        disabled,
+        ...renderInputProps
+    } = props;
+
+    const locale = useLocale(suppliedLocale);
+    const renderInput = useRenderInput(renderInputProps);
+
+    return (
+        <LocalizationProvider dateAdapter={PlainTimeAdapter} adapterLocale={locale}>
+            <TimePicker
+                label={label}
+                value={value}
+                disableMaskedInput
+                onChange={onChange}
+                disabled={disabled}
+                renderInput={renderInput}
+            />
+        </LocalizationProvider>
+    );
+}

package/src/date-pickers/TemporalAdapter.ts

@@ -0,0 +1,150 @@
+import {DateTimeFormat, Duration, PlainDate, PlainDateTime, PlainTime} from "../temporal";
+import {DateIOFormats, Unit} from "@date-io/core/IUtils";
+import {getFormatString} from "./getFormatString";
+
+export class TemporalAdapter<T extends PlainDate | PlainDateTime | PlainTime> {
+    formats: Record<keyof DateIOFormats, DateTimeFormat>;
+
+    constructor({locale = "default"}) {
+        this.formats = createFormats(locale);
+    }
+
+    getCurrentLocaleCode(): string {
+        return this.formats.fullDate.resolvedOptions().locale;
+    }
+
+    is12HourCycleInCurrentLocale(): boolean {
+        return this.formats.fullTime.resolvedOptions().hour12 ?? false;
+    }
+
+    getFormatHelperText(format: string | DateTimeFormat): string {
+        return getFormatString(format as DateTimeFormat, {
+            year: "YYYY",
+            month: "MM",
+            day: "DD",
+            hour: "HH",
+            minute: "MM",
+            second: "SS"
+        });
+    }
+
+    isNull(value: T | null): boolean {
+        return Boolean(value);
+    }
+
+    toISO(value: T): string {
+        return value.toString();
+    }
+
+    format(value: T, formatKey: keyof DateIOFormats) {
+        return this.formats[formatKey].format(value);
+    }
+
+    formatByString(value: T, format: string | DateTimeFormat): string {
+        return (format as DateTimeFormat).format(value);
+    }
+
+    formatNumber(numberToFormat: string): string {
+        return numberToFormat;
+    }
+
+    getMeridiemText(ampm: "am" | "pm"): string {
+        return ampm.toUpperCase();
+    }
+}
+
+export function durationToUnit(duration: Duration, unit?: Unit) {
+    return unit == "quarters"
+        ? Math.floor(duration.total("months") / 4)
+        : duration.total(unit || "milliseconds");
+}
+
+function createFormats(locale = "default") {
+    const entries = Object.entries(FORMAT_OPTIONS)
+        .map(([key, options]) => [key, new DateTimeFormat(locale, options)] as const);
+    return Object.fromEntries(entries) as Record<keyof DateIOFormats<DateTimeFormat>, DateTimeFormat>;
+}
+
+const FORMAT_OPTIONS = {
+    /** Localized full date @example "Jan 1, 2019" */
+    fullDate: {dateStyle: "medium"},
+
+    /** Partially localized full date with weekday, useful for text-to-speech accessibility @example "Tuesday, January 1, 2019" */
+    fullDateWithWeekday: {dateStyle: "full"},
+
+    /** Date format string with month and day of month @example "1 January" */
+    normalDate: {day: "numeric", month: "long"},
+
+    /** Date format string with weekday, month and day of month @example "Wed, Jan 1" */
+    normalDateWithWeekday: {day: "numeric", month: "long", weekday: "short"},
+
+    /** Shorter day format @example "Jan 1" */
+    shortDate: {day: "numeric", month: "short"},
+
+    /** Year format string @example "2019" */
+    year: {year: "numeric"},
+
+    /** Month format string @example "January" */
+    month: {month: "long"},
+
+    /** Short month format string @example "Jan" */
+    monthShort: {month: "short"},
+
+    /** Month with year format string @example "January 2018" */
+    monthAndYear: {month: "long", year: "numeric"},
+
+    /** Month with date format string @example "January 1" */
+    monthAndDate: {day: "numeric", month: "long"},
+
+    /** Weekday format string @example "Wednesday" */
+    weekday: {weekday: "long"},
+
+    /** Short weekday format string @example "Wed" */
+    weekdayShort: {weekday: "short"},
+
+    /** Day format string @example "1" */
+    dayOfMonth: {day: "numeric"},
+
+    /** Hours format string @example "11" */
+    hours12h: {hour: "numeric", hour12: true},
+
+    /** Hours format string @example "23" */
+    hours24h: {hour: "numeric"},
+
+    /** Minutes format string @example "44" */
+    minutes: {minute: "2-digit"},
+
+    /** Seconds format string @example "00" */
+    seconds: {second: "2-digit"},
+
+    /** Full time localized format string @example "11:44 PM" for US, "23:44" for Europe */
+    fullTime: {timeStyle: "short"},
+
+    /** Not localized full time format string @example "11:44 PM" */
+    fullTime12h: {timeStyle: "short"},
+
+    /** Not localized full time format string @example "23:44" */
+    fullTime24h: {timeStyle: "short"},
+
+    /** Date & time format string with localized time @example "Jan 1, 2018 11:44 PM" */
+    fullDateTime: {dateStyle: "medium", timeStyle: "short"},
+
+    /** Not localized date & Time format 12h @example "Jan 1, 2018 11:44 PM" */
+    fullDateTime12h: {dateStyle: "medium", timeStyle: "short"},
+
+    /** Not localized date & Time format 24h @example "Jan 1, 2018 23:44" */
+    fullDateTime24h: {dateStyle: "medium", timeStyle: "short"},
+
+    /** Localized keyboard input friendly date format @example "02/13/2020 */
+    keyboardDate: {year: "numeric", month: "2-digit", day: "2-digit"},
+
+    /** Localized keyboard input friendly date/time format @example "02/13/2020 23:44" */
+    keyboardDateTime: {year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric"},
+
+    /** Partially localized keyboard input friendly date/time 12h format @example "02/13/2020 11:44 PM" */
+    keyboardDateTime12h: {year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric"},
+
+    /** Partially localized keyboard input friendly date/time 24h format @example "02/13/2020 23:44" */
+    keyboardDateTime24h: {year: "numeric", month: "2-digit", day: "2-digit", hour: "numeric", minute: "numeric"},
+
+} as const;