@variocube/app-ui 1.15.0 → 1.16.0

package/src/formats/CurrencyFormat.tsx

@@ -1,45 +1,45 @@
-import {useNumberFormat} from "./useNumberFormat";
 import {Fragment, useMemo} from "react";
 import * as React from "react";
+import {useNumberFormat} from "./useNumberFormat";
 
 export type CurrencyDisplay = "symbol" | "name" | "narrowSymbol" | "code";
 export type CurrencySign = "accounting" | "standard";
 
 export interface CurrencyFormatProps {
-    /**
-     * The numeric amount of currency.
-     */
-    value: number | bigint | null | undefined;
+	/**
+	 * The numeric amount of currency.
+	 */
+	value: number | bigint | null | undefined;
 
-    /**
-     * The 3-letter currency identifier.
-     */
-    currency: string;
+	/**
+	 * The 3-letter currency identifier.
+	 */
+	currency: string;
 
-    /**
-     * How to display the currency. Default depends on the browser.
-     */
-    currencyDisplay?: CurrencyDisplay;
+	/**
+	 * How to display the currency. Default depends on the browser.
+	 */
+	currencyDisplay?: CurrencyDisplay;
 
-    /**
-     * The currency sign to use. Default depends on the browser.
-     */
-    currencySign?: CurrencySign;
+	/**
+	 * The currency sign to use. Default depends on the browser.
+	 */
+	currencySign?: CurrencySign;
 
-    /**
-     * Minimum fraction digits. Default depends on the browser.
-     */
-    minimumFractionDigits?: number;
+	/**
+	 * Minimum fraction digits. Default depends on the browser.
+	 */
+	minimumFractionDigits?: number;
 
-    /**
-     * Maximum fraction digits. Default depends on the browser.
-     */
-    maximumFractionDigits?: number;
+	/**
+	 * Maximum fraction digits. Default depends on the browser.
+	 */
+	maximumFractionDigits?: number;
 
-    /**
-     * Overrides the user's locale. Use for testing only.
-     */
-    locale?: string;
+	/**
+	 * Overrides the user's locale. Use for testing only.
+	 */
+	locale?: string;
 }
 
 /**
@@ -48,30 +48,30 @@ export interface CurrencyFormatProps {
  * @constructor
  */
 export function CurrencyFormat(props: CurrencyFormatProps) {
-    const {
-        value,
-        currency,
-        currencyDisplay,
-        currencySign,
-        minimumFractionDigits,
-        maximumFractionDigits,
-        locale,
-    } = props;
+	const {
+		value,
+		currency,
+		currencyDisplay,
+		currencySign,
+		minimumFractionDigits,
+		maximumFractionDigits,
+		locale,
+	} = props;
 
-    const options = useMemo(() => ({
-        style: "currency",
-        currency,
-        currencyDisplay,
-        currencySign,
-        minimumFractionDigits,
-        maximumFractionDigits,
-    }), [currency, currencyDisplay, currencySign, minimumFractionDigits, maximumFractionDigits]);
+	const options = useMemo(() => ({
+		style: "currency",
+		currency,
+		currencyDisplay,
+		currencySign,
+		minimumFractionDigits,
+		maximumFractionDigits,
+	}), [currency, currencyDisplay, currencySign, minimumFractionDigits, maximumFractionDigits]);
 
-    const numberFormat = useNumberFormat(options, locale);
+	const numberFormat = useNumberFormat(options, locale);
 
-    const str = useMemo(() => {
-        return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
-    }, [numberFormat, value]);
+	const str = useMemo(() => {
+		return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
+	}, [numberFormat, value]);
 
-    return <Fragment>{str}</Fragment>;
-}
+	return <Fragment>{str}</Fragment>;
+}

package/src/formats/DecimalFormat.spec.tsx

@@ -1,25 +1,23 @@
-import {act, create, ReactTestRenderer} from "react-test-renderer";
 import * as React from "react";
+import {act, create, ReactTestRenderer} from "react-test-renderer";
 import {DecimalFormat} from "./DecimalFormat";
 
 describe("DecimalFormat", () => {
+	test("render de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<DecimalFormat value={1234.5} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("1\u00a0234,5");
+	});
 
-    test("render de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(<DecimalFormat value={1234.5} locale="de-AT" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("1\u00a0234,5");
-    });
-
-    test("render en-US", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(<DecimalFormat value={1234.5} locale="en-US" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("1,234.5");
-    });
-
-});
+	test("render en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<DecimalFormat value={1234.5} locale="en-US" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("1,234.5");
+	});
+});

package/src/formats/DecimalFormat.tsx

@@ -1,32 +1,32 @@
-import {useNumberFormat} from "./useNumberFormat";
 import {Fragment, useMemo} from "react";
 import * as React from "react";
+import {useNumberFormat} from "./useNumberFormat";
 
 export interface DecimalFormatProps {
-    /**
-     * The numeric amount of currency.
-     */
-    value: number | bigint | null | undefined;
-
-    /**
-     * Minimum fraction digits. Default depends on the browser.
-     */
-    minimumFractionDigits?: number;
-
-    /**
-     * Maximum fraction digits. Default depends on the browser.
-     */
-    maximumFractionDigits?: number;
-
-    /**
-     * Fraction digits. Shorthand to set both `minimumFractionDigits` and `maximumFractionDigits`.
-     */
-    fractionDigits?: number;
-
-    /**
-     * Overrides the user's locale. Use for testing only.
-     */
-    locale?: string;
+	/**
+	 * The numeric amount of currency.
+	 */
+	value: number | bigint | null | undefined;
+
+	/**
+	 * Minimum fraction digits. Default depends on the browser.
+	 */
+	minimumFractionDigits?: number;
+
+	/**
+	 * Maximum fraction digits. Default depends on the browser.
+	 */
+	maximumFractionDigits?: number;
+
+	/**
+	 * Fraction digits. Shorthand to set both `minimumFractionDigits` and `maximumFractionDigits`.
+	 */
+	fractionDigits?: number;
+
+	/**
+	 * Overrides the user's locale. Use for testing only.
+	 */
+	locale?: string;
 }
 
 /**
@@ -35,25 +35,25 @@ export interface DecimalFormatProps {
  * @constructor
  */
 export function DecimalFormat(props: DecimalFormatProps) {
-    const {
-        value,
-        fractionDigits,
-        minimumFractionDigits = fractionDigits,
-        maximumFractionDigits = fractionDigits,
-        locale,
-    } = props;
-
-    const options = useMemo(() => ({
-        style: "decimal",
-        minimumFractionDigits,
-        maximumFractionDigits,
-    }), [minimumFractionDigits, maximumFractionDigits]);
-
-    const numberFormat = useNumberFormat(options, locale);
-
-    const str = useMemo(() => {
-        return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
-    }, [numberFormat, value]);
-
-    return <Fragment>{str}</Fragment>;
-}
+	const {
+		value,
+		fractionDigits,
+		minimumFractionDigits = fractionDigits,
+		maximumFractionDigits = fractionDigits,
+		locale,
+	} = props;
+
+	const options = useMemo(() => ({
+		style: "decimal",
+		minimumFractionDigits,
+		maximumFractionDigits,
+	}), [minimumFractionDigits, maximumFractionDigits]);
+
+	const numberFormat = useNumberFormat(options, locale);
+
+	const str = useMemo(() => {
+		return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
+	}, [numberFormat, value]);
+
+	return <Fragment>{str}</Fragment>;
+}

package/src/formats/DurationFormat.spec.tsx

@@ -1,57 +1,56 @@
-import {act, create, ReactTestRenderer} from "react-test-renderer";
 import * as React from "react";
-import {DurationFormat} from "./DurationFormat";
+import {act, create, ReactTestRenderer} from "react-test-renderer";
 import {Duration, Now} from "../temporal";
+import {DurationFormat} from "./DurationFormat";
 
 describe("DurationFormat", () => {
+	test("render de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<DurationFormat value={Duration.from({days: 5, hours: 2, seconds: 2})} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("5d 02:00:02");
+	});
 
-    test("render de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(<DurationFormat value={Duration.from({days: 5, hours: 2, seconds: 2})} locale="de-AT" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("5d 02:00:02");
-    });
-
-    test("render en-US", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            element = create(<DurationFormat value={Duration.from({days: 5, hours: 2, seconds: 2})} locale="en-US" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("5d 02:00:02");
-    });
+	test("render en-US", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			element = create(<DurationFormat value={Duration.from({days: 5, hours: 2, seconds: 2})} locale="en-US" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("5d 02:00:02");
+	});
 
-    test("balance seconds de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            const duration = Now.instant().until(Now.instant().add({seconds: 10000}))
-                .round({largestUnit: "hours"});
-            element = create(<DurationFormat value={duration} locale="de-AT" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("02:46:40");
-    });
+	test("balance seconds de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			const duration = Now.instant().until(Now.instant().add({seconds: 10000}))
+				.round({largestUnit: "hours"});
+			element = create(<DurationFormat value={duration} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("02:46:40");
+	});
 
-    test("balance days de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            const duration = Now.instant().until(Now.instant().add({hours: 5 * 24}))
-                .round({largestUnit: "days"});
-            element = create(<DurationFormat value={duration} locale="de-AT" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("5d");
-    });
+	test("balance days de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			const duration = Now.instant().until(Now.instant().add({hours: 5 * 24}))
+				.round({largestUnit: "days"});
+			element = create(<DurationFormat value={duration} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("5d");
+	});
 
-    test("complex de-AT", () => {
-        let element: ReactTestRenderer;
-        act(() => {
-            const duration = Duration.from({years: 3, months: 4, weeks: 1, days: 6});
-            element = create(<DurationFormat value={duration} locale="de-AT" />);
-        })
-        const value = element!.root.children[0];
-        expect(value).toBe("3y 4m 1w 6d");
-    });
-});
+	test("complex de-AT", () => {
+		let element: ReactTestRenderer;
+		act(() => {
+			const duration = Duration.from({years: 3, months: 4, weeks: 1, days: 6});
+			element = create(<DurationFormat value={duration} locale="de-AT" />);
+		});
+		const value = element!.root.children[0];
+		expect(value).toBe("3y 4m 1w 6d");
+	});
+});

package/src/formats/DurationFormat.tsx

@@ -1,72 +1,72 @@
-import {Duration} from "../temporal";
-import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
 import * as React from "react";
 import {Fragment, useMemo} from "react";
+import {getSupportedFormatLocale} from "../getSupportedFormatLocale";
+import {Duration} from "../temporal";
 import {DateStyle, TimeStyle} from "./types";
 
 interface DurationFormatProps {
-    /**
-     * The duration value to format.
-     */
-    value?: Duration | null | undefined;
+	/**
+	 * The duration value to format.
+	 */
+	value?: Duration | null | undefined;
 
-    /**
-     * The style of the date format.
-     */
-    dateStyle?: DateStyle | undefined;
+	/**
+	 * The style of the date format.
+	 */
+	dateStyle?: DateStyle | undefined;
 
-    /**
-     * The style of the time format.
-     */
-    timeStyle?: TimeStyle | undefined;
+	/**
+	 * The style of the time format.
+	 */
+	timeStyle?: TimeStyle | undefined;
 
-    /**
-     * Overrides the user's locale. Use for testing only.
-     */
-    locale?: string;
+	/**
+	 * Overrides the user's locale. Use for testing only.
+	 */
+	locale?: string;
 }
 
 export function DurationFormat(props: DurationFormatProps) {
-    const {
-        value,
-        dateStyle,
-        timeStyle,
-        locale: suppliedLocale
-    } = props;
+	const {
+		value,
+		dateStyle,
+		timeStyle,
+		locale: suppliedLocale,
+	} = props;
 
-    if (!value) {
-        return null;
-    }
+	if (!value) {
+		return null;
+	}
 
-    const options = useMemo(() => ({
-        dateStyle,
-        timeStyle,
-    }), [dateStyle, timeStyle]);
+	const options = useMemo(() => ({
+		dateStyle,
+		timeStyle,
+	}), [dateStyle, timeStyle]);
 
-    const locale = useMemo(() => suppliedLocale ?? getSupportedFormatLocale("dateTime"), [suppliedLocale]);
+	const locale = useMemo(() => suppliedLocale ?? getSupportedFormatLocale("dateTime"), [suppliedLocale]);
 
-    const strValue = useMemo(() => {
-        // TODO: this can only be supported once a polyfill or browser support for DurationFormat is available
-        // https://github.com/tc39/proposal-intl-duration-format/
-        // In the meantime, we format the duration in a simple neural format.
-        return formatDuration(value);
-    }, [value, locale, options]);
+	const strValue = useMemo(() => {
+		// TODO: this can only be supported once a polyfill or browser support for DurationFormat is available
+		// https://github.com/tc39/proposal-intl-duration-format/
+		// In the meantime, we format the duration in a simple neural format.
+		return formatDuration(value);
+	}, [value, locale, options]);
 
-    return <Fragment>{strValue}</Fragment>;
+	return <Fragment>{strValue}</Fragment>;
 }
 
 function formatDuration(value: Duration) {
-    const parts = (["years", "months", "weeks", "days"] as const)
-        .map(prop => [prop, value[prop]] as const)
-        .filter(([_, value]) => Boolean(value))
-        .map(([prop, value]) => value + prop.charAt(0));
+	const parts = (["years", "months", "weeks", "days"] as const)
+		.map(prop => [prop, value[prop]] as const)
+		.filter(([_, value]) => Boolean(value))
+		.map(([prop, value]) => value + prop.charAt(0));
 
-    if (value.hours || value.minutes || value.seconds) {
-        const time = [value.hours || 0, value.minutes || 0, value.seconds]
-            .map(value => value.toString().padStart(2, "0"))
-            .join(":");
-        parts.push(time);
-    }
+	if (value.hours || value.minutes || value.seconds) {
+		const time = [value.hours || 0, value.minutes || 0, value.seconds]
+			.map(value => value.toString().padStart(2, "0"))
+			.join(":");
+		parts.push(time);
+	}
 
-    return parts.join(" ");
-}
+	return parts.join(" ");
+}