@variocube/app-ui 1.14.0

package/src/date-pickers/PlainAdapterCommon.ts

@@ -0,0 +1,125 @@
+import {Now, PlainDate, PlainDateTime} from "../temporal";
+import {Unit} from "@date-io/core/IUtils";
+import {durationToUnit, TemporalAdapter} from "./TemporalAdapter";
+
+export class PlainAdapterCommon<T extends PlainDate | PlainDateTime> extends TemporalAdapter<T> {
+
+    startOfYear(value: T): T {
+        return value.with({day: 1, month: 1}) as T;
+    }
+
+    endOfYear(value: T): T {
+        return value.with({day: 31, month: 12}) as T;
+    }
+
+    startOfMonth(value: T): T {
+        return value.with({day: 1}) as T;
+    }
+
+    endOfMonth(value: T): T {
+        return value.add({months: 1})
+            .with({day: 1})
+            .subtract({days: 1}) as T;
+    }
+
+    startOfWeek(value: T): T {
+        return value.subtract({days: value.dayOfWeek - 1}) as T;
+    }
+
+    endOfWeek(value: T): T {
+        return value.add({days: 7 - value.dayOfWeek}) as T;
+    }
+
+    getNextMonth(value: T): T {
+        return value.add({months: 1}) as T;
+    }
+
+    getPreviousMonth(value: T): T {
+        return value.subtract({months: 1}) as T;
+    }
+
+    isBefore(value: T, comparing: T): boolean {
+        return PlainDateTime.compare(value, comparing) < 0;
+    }
+
+    isAfter(value: T, comparing: T): boolean {
+        return PlainDateTime.compare(value, comparing) > 0;
+    }
+
+    isSameDay(value: T, comparing: T): boolean {
+        return PlainDate.compare(value, comparing) == 0;
+    }
+
+    isSameMonth(value: T, comparing: T): boolean {
+        return value.toPlainYearMonth().equals(comparing.toPlainYearMonth());
+    }
+
+    isSameYear(value: T, comparing: T): boolean {
+        return value.year == comparing.year;
+    }
+
+    isWithinRange(value: T, [start, end]: [T, T]): boolean {
+        return !this.isBefore(value, start) && !this.isAfter(value, end);
+    }
+
+    isBeforeDay(value: T, comparing: T): boolean {
+        return PlainDate.compare(value, comparing) < 0;
+    }
+
+    isAfterDay(value: T, comparing: T): boolean {
+        return PlainDate.compare(value, comparing) > 0;
+    }
+
+    isBeforeYear(value: T, comparing: T): boolean {
+        return value.year < comparing.year;
+    }
+
+    isAfterYear(value: T, comparing: T): boolean {
+        return value.year > comparing.year;
+    }
+
+    getMonth(value: T): number {
+        return value.month;
+    }
+
+    getDaysInMonth(value: T): number {
+        return value.daysInMonth;
+    }
+
+    getYear(value: T): number {
+        return value.year;
+    }
+
+    getWeekdays(): string[] {
+        const today = Now.plainDateISO();
+        const startOfWeek = today.subtract({days: today.dayOfWeek - 1});
+        return [...Array(7).keys()]
+            .map(index => this.formats.weekday.format(startOfWeek.add({days: index})));
+    }
+
+    getMonthArray(value: T): T[] {
+        return [...Array(12).keys()]
+            .map(index => value.with({day: 1, month: index + 1}) as T);
+    }
+
+    getWeekArray(date: T): T[][] {
+        const start = this.startOfWeek(this.startOfMonth(date));
+        const end = this.endOfWeek(this.endOfMonth(date));
+        const weeks = (start.until(end).total("days") + 1) / 7;
+        return [...Array(weeks).keys()].map(weekIndex => {
+            const weekStart = start.add({weeks: weekIndex});
+            return [...Array(7).keys()]
+                .map(index => weekStart.add({days: index}) as T);
+        });
+    }
+
+    getYearRange(start: T, end: T): T[] {
+        return [...Array(end.year - start.year).keys()]
+            .map(yearIndex => start.add({years: yearIndex}) as T);
+    }
+
+    getDiff(value: T, comparing: T | string, unit?: Unit) {
+        return durationToUnit(value.until(comparing), unit);
+    }
+}
+

package/src/date-pickers/PlainDateAdapter.spec.ts

@@ -0,0 +1,50 @@
+import {PlainDate} from "../temporal";
+import {PlainDateAdapter} from "./PlainDateAdapter";
+
+describe("PlainDateAdapter", () => {
+
+    const adapter = new PlainDateAdapter({locale: "de"});
+
+    test("isSameDay", () => {
+        expect(adapter.isSameDay(new PlainDate(2022, 5, 30), new PlainDate(2022, 5, 30))).toBe(true);
+        expect(adapter.isSameDay(new PlainDate(2022, 4, 30), new PlainDate(2022, 5, 30))).toBe(false);
+    });
+
+    test("isSameYear", () => {
+        expect(adapter.isSameYear(new PlainDate(2022, 5, 30), new PlainDate(2022, 5, 30))).toBe(true);
+        expect(adapter.isSameYear(new PlainDate(2022, 4, 30), new PlainDate(2022, 5, 30))).toBe(true);
+        expect(adapter.isSameYear(new PlainDate(2020, 4, 30), new PlainDate(2022, 5, 30))).toBe(false);
+    });
+
+    test("startOfWeek", () => {
+        const startOfWeek = adapter.startOfWeek(new PlainDate(2022, 5, 31));
+        expect(startOfWeek.year).toBe(2022);
+        expect(startOfWeek.month).toBe(5);
+        expect(startOfWeek.day).toBe(30);
+    });
+
+    test("endOfWeek", () => {
+        const startOfWeek = adapter.endOfWeek(new PlainDate(2022, 5, 31));
+        expect(startOfWeek.year).toBe(2022);
+        expect(startOfWeek.month).toBe(6);
+        expect(startOfWeek.day).toBe(5);
+    });
+
+    test("getYearRange", () => {
+        const range = adapter.getYearRange(PlainDate.from("2020-05-05"), PlainDate.from("2025-05-05"));
+        expect(range).toHaveLength(5);
+    });
+
+    test("getWeekArray", () => {
+        const weekArray = adapter.getWeekArray(new PlainDate(2022, 5, 30));
+        expect(weekArray).toHaveLength(6);
+        expect(weekArray[0][0].toString()).toBe("2022-04-25"); // monday of first week
+        expect(weekArray[5][6].toString()).toBe("2022-06-05"); // sunday of last week
+    });
+
+    test("getYearRange", () => {
+        const yearRange = adapter.getYearRange(new PlainDate(1995, 1, 1), new PlainDate(2020, 1, 1));
+        expect(yearRange).toHaveLength(25);
+    })
+
+});

package/src/date-pickers/PlainDateAdapter.ts

@@ -0,0 +1,139 @@
+import {MuiPickersAdapter} from "@mui/x-date-pickers/internals";
+import {DateTimeFormat, Now, PlainDate} from "../temporal";
+import {parsePlainDate} from "./parse";
+import {PlainAdapterCommon} from "./PlainAdapterCommon";
+
+export class PlainDateAdapter extends PlainAdapterCommon<PlainDate> implements MuiPickersAdapter<PlainDate> {
+    lib = "PlainDateAdapter";
+
+    date(value?: any): PlainDate | null {
+        if (value === null) {
+            return null;
+        }
+        if (value === undefined) {
+            return Now.plainDateISO();
+        }
+
+        if (value instanceof PlainDate) {
+            return value;
+        }
+
+        if (typeof value === "string") {
+            try {
+                return PlainDate.from(value, {overflow: "reject"});
+            }
+            catch (error) {
+                return this.parse(value, this.formats.shortDate);
+            }
+        }
+
+        console.error("Unexpected value", value);
+        return null;
+    }
+
+    toJsDate(value: PlainDate): Date {
+        return new Date(value.year, value.month-1, value.day);
+    }
+
+    parseISO(isString: string): PlainDate {
+        return PlainDate.from(isString);
+    }
+
+    parse(value: string, format: string | DateTimeFormat): PlainDate | null {
+        try {
+            return parsePlainDate(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: PlainDate, comparing: PlainDate): boolean {
+        return true;
+    }
+
+    addSeconds(value: PlainDate, count: number): PlainDate {
+        return value.add({seconds: count});
+    }
+
+    addMinutes(value: PlainDate, count: number): PlainDate {
+        return value.add({minutes: count});
+    }
+
+    addHours(value: PlainDate, count: number): PlainDate {
+        return value.add({hours: count});
+    }
+
+    addDays(value: PlainDate, count: number): PlainDate {
+        return value.add({days: count});
+    }
+
+    addWeeks(value: PlainDate, count: number): PlainDate {
+        return value.add({weeks: count});
+    }
+
+    addMonths(value: PlainDate, count: number): PlainDate {
+        return value.add({months: count});
+    }
+
+    startOfDay(value: PlainDate): PlainDate {
+        return value;
+    }
+
+    endOfDay(value: PlainDate): PlainDate {
+        return value;
+    }
+
+    getHours(value: PlainDate): number {
+        return 0;
+    }
+
+    setHours(value: PlainDate, count: number): PlainDate {
+        return value;
+    }
+
+    getMinutes(value: PlainDate): number {
+        return 0;
+    }
+
+    setMinutes(value: PlainDate, count: number): PlainDate {
+        return value;
+    }
+
+    getSeconds(value: PlainDate): number {
+        return 0;
+    }
+
+    setSeconds(value: PlainDate, count: number): PlainDate {
+        return value;
+    }
+
+    setMonth(value: PlainDate, count: number): PlainDate {
+        return value.with({month: count});
+    }
+
+    setYear(value: PlainDate, count: number): PlainDate {
+        return value.with({year: count});
+    }
+
+    mergeDateAndTime(date: PlainDate, time: PlainDate): PlainDate {
+        return date;
+    }
+}

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

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

package/src/date-pickers/PlainDatePicker.tsx

@@ -0,0 +1,73 @@
+import {DatePicker, LocalizationProvider, PickersDay} from "@mui/x-date-pickers";
+import * as React from "react";
+import {PlainDate} from "../temporal";
+import {PlainDateAdapter} from "./PlainDateAdapter";
+import {useRenderInput, UseRenderInputProps} from "./useRenderInput";
+import {useLocale} from "./useLocale";
+
+interface PlainDatePickerProps {
+    value: PlainDate | null;
+    onChange: (value: PlainDate | null) => any;
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+
+	disablePast?: boolean;
+	minDate?: PlainDate;
+	maxDate?: PlainDate;
+	renderDay?: (day: PlainDate, selectedDays: PlainDate[]) => JSX.Element;
+
+	defaultCalendarMonth?: PlainDate;
+
+    /**
+     * Allows overriding the locale. Only use for testing.
+     */
+    locale?: string;
+}
+
+export function PlainDatePicker(props: PlainDatePickerProps & UseRenderInputProps) {
+
+    const {
+        value,
+        onChange,
+        label,
+        disabled,
+		disablePast,
+		minDate,
+		maxDate,
+		renderDay,
+		defaultCalendarMonth,
+        locale: suppliedLocale,
+        ...renderInputProps
+    } = props;
+
+    const locale = useLocale(suppliedLocale);
+
+    const renderInput = useRenderInput(renderInputProps);
+
+    return (
+        <LocalizationProvider dateAdapter={PlainDateAdapter} adapterLocale={locale}>
+            <DatePicker
+                label={label}
+                value={value}
+                disableMaskedInput
+                onChange={onChange}
+                disabled={disabled}
+                renderInput={renderInput}
+				disablePast={disablePast}
+				defaultCalendarMonth={defaultCalendarMonth}
+				minDate={minDate}
+				maxDate={maxDate}
+				renderDay={renderDay !== undefined
+					? (day, selectedDays, pickersDayProps) => (
+						<PickersDay {...pickersDayProps}>
+							{renderDay(day, selectedDays)}
+						</PickersDay>
+					)
+					: undefined
+				}
+            />
+        </LocalizationProvider>
+    );
+}
+

package/src/date-pickers/PlainDateTimeAdapter.spec.ts

@@ -0,0 +1,50 @@
+import {PlainDateTime} from "../temporal";
+import {PlainDateTimeAdapter} from "./PlainDateTimeAdapter";
+
+describe("PlainDateTimeAdapter", () => {
+
+    const adapter = new PlainDateTimeAdapter({locale: "de"});
+
+    test("isSameDay", () => {
+        expect(adapter.isSameDay(new PlainDateTime(2022, 5, 30), new PlainDateTime(2022, 5, 30))).toBe(true);
+        expect(adapter.isSameDay(new PlainDateTime(2022, 4, 30), new PlainDateTime(2022, 5, 30))).toBe(false);
+    });
+
+    test("isSameYear", () => {
+        expect(adapter.isSameYear(new PlainDateTime(2022, 5, 30), new PlainDateTime(2022, 5, 30))).toBe(true);
+        expect(adapter.isSameYear(new PlainDateTime(2022, 4, 30), new PlainDateTime(2022, 5, 30))).toBe(true);
+        expect(adapter.isSameYear(new PlainDateTime(2020, 4, 30), new PlainDateTime(2022, 5, 30))).toBe(false);
+    });
+
+    test("startOfWeek", () => {
+        const startOfWeek = adapter.startOfWeek(new PlainDateTime(2022, 5, 31));
+        expect(startOfWeek.year).toBe(2022);
+        expect(startOfWeek.month).toBe(5);
+        expect(startOfWeek.day).toBe(30);
+    });
+
+    test("endOfWeek", () => {
+        const startOfWeek = adapter.endOfWeek(new PlainDateTime(2022, 5, 31));
+        expect(startOfWeek.year).toBe(2022);
+        expect(startOfWeek.month).toBe(6);
+        expect(startOfWeek.day).toBe(5);
+    });
+
+    test("getYearRange", () => {
+        const range = adapter.getYearRange(PlainDateTime.from("2020-05-05"), PlainDateTime.from("2025-05-05"));
+        expect(range).toHaveLength(5);
+    });
+
+    test("getWeekArray", () => {
+        const weekArray = adapter.getWeekArray(new PlainDateTime(2022, 5, 30));
+        expect(weekArray).toHaveLength(6);
+        expect(weekArray[0][0].toString()).toBe("2022-04-25T00:00:00"); // monday of first week
+        expect(weekArray[5][6].toString()).toBe("2022-06-05T00:00:00"); // sunday of last week
+    });
+
+    test("getYearRange", () => {
+        const yearRange = adapter.getYearRange(new PlainDateTime(1995, 1, 1), new PlainDateTime(2020, 1, 1));
+        expect(yearRange).toHaveLength(25);
+    })
+
+});

package/src/date-pickers/PlainDateTimeAdapter.ts

@@ -0,0 +1,140 @@
+import {MuiPickersAdapter} from "@mui/x-date-pickers/internals";
+import {DateTimeFormat, Now, PlainDateTime} from "../temporal";
+import {parsePlainDateTime} from "./parse";
+import {PlainAdapterCommon} from "./PlainAdapterCommon";
+
+export class PlainDateTimeAdapter extends PlainAdapterCommon<PlainDateTime> implements MuiPickersAdapter<PlainDateTime> {
+    lib = "PlainDateTimeAdapter";
+
+    date(value?: any): PlainDateTime | null {
+        if (value === null) {
+            return null;
+        }
+        if (value === undefined) {
+            return Now.plainDateTimeISO();
+        }
+
+        if (value instanceof PlainDateTime) {
+            return value;
+        }
+
+        if (typeof value === "string") {
+            try {
+                return PlainDateTime.from(value, {overflow: "reject"});
+            }
+            catch (error) {
+                return this.parse(value, this.formats.shortDate);
+            }
+        }
+
+        console.error("Unexpected value", value);
+        return null;
+    }
+
+    toJsDate(value: PlainDateTime): Date {
+        return new Date(value.year, value.month-1, value.day, value.hour, value.minute, value.second, value.millisecond);
+    }
+
+    parseISO(isString: string): PlainDateTime {
+        return PlainDateTime.from(isString);
+    }
+
+    parse(value: string, format: string | DateTimeFormat): PlainDateTime | null {
+        try {
+            return parsePlainDateTime(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: PlainDateTime, comparing: PlainDateTime): boolean {
+        return this.isSameDay(value, comparing) && value.hour == comparing.hour;
+    }
+
+    startOfDay(value: PlainDateTime): PlainDateTime {
+        return value.toPlainDate().toPlainDateTime({hour: 0});
+    }
+
+    endOfDay(value: PlainDateTime): PlainDateTime {
+        return value.toPlainDate().toPlainDateTime({hour: 23, minute: 59, second: 59});
+    }
+
+    getHours(value: PlainDateTime): number {
+        return value.hour;
+    }
+
+    setHours(value: PlainDateTime, count: number): PlainDateTime {
+        return value.with({hour: count});
+    }
+
+    getMinutes(value: PlainDateTime): number {
+        return value.minute;
+    }
+
+    setMinutes(value: PlainDateTime, count: number): PlainDateTime {
+        return value.with({minute: count});
+    }
+
+    getSeconds(value: PlainDateTime): number {
+        return value.second;
+    }
+
+    setSeconds(value: PlainDateTime, count: number): PlainDateTime {
+        return value.with({second: count});
+    }
+
+    setMonth(value: PlainDateTime, count: number): PlainDateTime {
+        return value.with({month: count});
+    }
+
+    setYear(value: PlainDateTime, count: number): PlainDateTime {
+        return value.with({year: count});
+    }
+
+    mergeDateAndTime(date: PlainDateTime, time: PlainDateTime): PlainDateTime {
+        return date.toPlainDate().toPlainDateTime(time);
+    }
+
+    addSeconds(value: PlainDateTime, count: number): PlainDateTime {
+        return value.add({seconds: count});
+    }
+
+    addMinutes(value: PlainDateTime, count: number): PlainDateTime {
+        return value.add({minutes: count});
+    }
+
+    addHours(value: PlainDateTime, count: number): PlainDateTime {
+        return value.add({hours: count});
+    }
+
+    addDays(value: PlainDateTime, count: number): PlainDateTime {
+        return value.add({days: count});
+    }
+
+    addWeeks(value: PlainDateTime, count: number): PlainDateTime {
+        return value.add({weeks: count});
+    }
+
+    addMonths(value: PlainDateTime, count: number): PlainDateTime {
+        return value.add({months: count});
+    }
+
+}

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

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

package/src/date-pickers/PlainDateTimePicker.tsx

@@ -0,0 +1,65 @@
+import {PlainDateTime} from "../temporal";
+import {useLocale} from "./useLocale";
+import {useRenderInput, UseRenderInputProps} from "./useRenderInput";
+import {DateTimePicker, LocalizationProvider, PickersDay} from "@mui/x-date-pickers";
+import * as React from "react";
+import {PlainDateTimeAdapter} from "./PlainDateTimeAdapter";
+
+interface PlainDateTimePickerProps {
+    value: PlainDateTime | null;
+    onChange: (value: PlainDateTime | null) => any;
+    label?: string;
+    disabled?: boolean;
+    required?: boolean;
+
+	disablePast?: boolean;
+	minDateTime?: PlainDateTime;
+	maxDateTime?: PlainDateTime;
+	renderDay?: (day: PlainDateTime, selectedDays: PlainDateTime[]) => JSX.Element;
+
+    /**
+     * Allows overriding the locale. Only use for testing.
+     */
+    locale?: string;
+}
+export function PlainDateTimePicker(props: PlainDateTimePickerProps & UseRenderInputProps) {
+    const {
+        value,
+        onChange,
+        label,
+        disabled,
+		disablePast,
+		minDateTime,
+		maxDateTime,
+		renderDay,
+        locale: suppliedLocale,
+        ...renderInputProps
+    } = props;
+
+    const locale = useLocale(suppliedLocale);
+    const renderInput = useRenderInput(renderInputProps);
+
+    return (
+        <LocalizationProvider dateAdapter={PlainDateTimeAdapter} adapterLocale={locale}>
+            <DateTimePicker
+                label={label}
+                value={value}
+                disableMaskedInput
+                onChange={onChange}
+                disabled={disabled}
+                renderInput={renderInput}
+				disablePast={disablePast}
+				minDateTime={minDateTime}
+				maxDateTime={maxDateTime}
+				renderDay={renderDay !== undefined
+					? (day, selectedDays, pickersDayProps) => (
+						<PickersDay {...pickersDayProps}>
+							{renderDay(day, selectedDays)}
+						</PickersDay>
+					)
+					: undefined
+				}
+            />
+        </LocalizationProvider>
+    );
+}