@olenbetong/appframe-ds 1.7.2 → 1.9.0

package/src/cutoff/CutOffPicker.tsx

@@ -1,165 +1,165 @@
-import "./CutOffPicker.css";
-
-import { Select, Textfield } from "@digdir/designsystemet-react";
-import clsx from "clsx";
-import type { Temporal } from "temporal-polyfill";
-
-import { getLocalizedString } from "../i18n.js";
-import { useCutOff } from "./context.js";
-import { type PeriodType, plainDateToCutOff } from "./utils.js";
-
-export type CutOffPickerProps = {
-	className?: string;
-	disabled?: boolean;
-	/** Period types left out of the type select. */
-	disabledTypes?: PeriodType[];
-	max?: Temporal.PlainDate | string;
-	min?: Temporal.PlainDate | string;
-	/** Designsystemet size of both fields. */
-	"data-size"?: "sm" | "md" | "lg";
-	/**
-	 * Do not sync the `co` and `period` search parameters with the selection - for a form that
-	 * submits the period itself.
-	 */
-	disableSearchParams?: boolean;
-};
-
-function cutOffTypes(): [PeriodType, string][] {
-	return [
-		["AllDates", getLocalizedString("Day")],
-		["WS", getLocalizedString("Week")],
-		["MLD", getLocalizedString("Month")],
-		["MLS", `${getLocalizedString("Month")} (${getLocalizedString("Last sunday")})`],
-		["QLD", getLocalizedString("Quarter")],
-		["QLS", `${getLocalizedString("Quarter")} (${getLocalizedString("Last sunday")})`],
-		["YLD", getLocalizedString("Year")],
-	];
-}
-
-export function getCutOffTypes(disabledTypes: PeriodType[]): [PeriodType, string][] {
-	return cutOffTypes().filter((co) => !disabledTypes.includes(co[0]));
-}
-
-/**
- * Picks the app's cut-off period: a select for the period type (day, week, month, quarter,
- * year) and a field for the period itself, native date/week/month inputs where the browser
- * has them and a select for quarters and years. Reads and writes the period through
- * {@link useCutOff}, so it needs a `CutOffProvider` above it.
- */
-export function CutOffPicker({
-	className,
-	max,
-	min,
-	disabled,
-	disabledTypes,
-	"data-size": size,
-	disableSearchParams = false,
-}: CutOffPickerProps) {
-	let { cutOffType, periods, setPeriod, setCutOffType } = useCutOff({ disableSearchParams });
-
-	function handlePeriodChanged(evt: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
-		if (evt.target.value) {
-			setPeriod(cutOffType, evt.target.value);
-		}
-	}
-
-	let thisYear = new Date().getFullYear();
-	let quarters = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-		.flatMap((dy) => [4, 3, 2, 1].map((q) => `${thisYear - dy}-Q${q}`))
-		.filter((period) => {
-			if (max && period > plainDateToCutOff(max, "QLD")) return false;
-			if (min && period < plainDateToCutOff(min, "QLD")) return false;
-			return true;
-		});
-	let years = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
-		.map((dy) => thisYear - dy)
-		.filter((year) => {
-			if (max && year > Number(plainDateToCutOff(max, "YLD"))) return false;
-			if (min && year < Number(plainDateToCutOff(min, "YLD"))) return false;
-			return true;
-		});
-
-	return (
-		<div className={clsx("ObCutOffPicker-root", className)} data-size={size}>
-			<Select
-				name="co"
-				aria-label={getLocalizedString("Period type")}
-				value={cutOffType}
-				onChange={(evt) => setCutOffType(evt.target.value as PeriodType)}
-				disabled={disabled}
-			>
-				{getCutOffTypes(disabledTypes ?? []).map(([type, label]) => (
-					<Select.Option value={type} key={type}>
-						{label}
-					</Select.Option>
-				))}
-			</Select>
-			{cutOffType === "AllDates" && (
-				<Textfield
-					name="period"
-					aria-label={getLocalizedString("Day")}
-					type="date"
-					value={periods.AllDates}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-					max={max ? plainDateToCutOff(max, "AllDates") : undefined}
-					min={min ? plainDateToCutOff(min, "AllDates") : undefined}
-				/>
-			)}
-			{cutOffType === "WS" && (
-				<Textfield
-					name="period"
-					aria-label={getLocalizedString("Week")}
-					type="week"
-					value={periods.WS.indexOf("W") === -1 ? periods.WS.replace("-", "-W") : periods.WS}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-					max={max ? plainDateToCutOff(max, "WS") : undefined}
-					min={min ? plainDateToCutOff(min, "WS") : undefined}
-				/>
-			)}
-			{(cutOffType === "MLD" || cutOffType === "MLS") && (
-				<Textfield
-					name="period"
-					aria-label={getLocalizedString("Month")}
-					type="month"
-					value={periods.MLD}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-					max={max ? plainDateToCutOff(max, "MLD") : undefined}
-					min={min ? plainDateToCutOff(min, "MLD") : undefined}
-				/>
-			)}
-			{(cutOffType === "QLD" || cutOffType === "QLS") && (
-				<Select
-					name="period"
-					aria-label={getLocalizedString("Quarter")}
-					value={periods.QLD}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-				>
-					{quarters.map((quarter) => (
-						<Select.Option key={quarter} value={quarter}>
-							{quarter}
-						</Select.Option>
-					))}
-				</Select>
-			)}
-			{cutOffType === "YLD" && (
-				<Select
-					name="period"
-					aria-label={getLocalizedString("Year")}
-					value={periods.YLD}
-					onChange={handlePeriodChanged}
-					disabled={disabled}
-				>
-					{years.map((year) => (
-						<Select.Option key={year} value={String(year)}>
-							{year}
-						</Select.Option>
-					))}
-				</Select>
-			)}
-		</div>
-	);
-}
+import "./CutOffPicker.css";
+
+import { Select, Textfield } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+import type { Temporal } from "temporal-polyfill";
+
+import { getLocalizedString } from "../i18n.js";
+import { useCutOff } from "./context.js";
+import { type PeriodType, plainDateToCutOff } from "./utils.js";
+
+export type CutOffPickerProps = {
+	className?: string;
+	disabled?: boolean;
+	/** Period types left out of the type select. */
+	disabledTypes?: PeriodType[];
+	max?: Temporal.PlainDate | string;
+	min?: Temporal.PlainDate | string;
+	/** Designsystemet size of both fields. */
+	"data-size"?: "sm" | "md" | "lg";
+	/**
+	 * Do not sync the `co` and `period` search parameters with the selection - for a form that
+	 * submits the period itself.
+	 */
+	disableSearchParams?: boolean;
+};
+
+function cutOffTypes(): [PeriodType, string][] {
+	return [
+		["AllDates", getLocalizedString("Day")],
+		["WS", getLocalizedString("Week")],
+		["MLD", getLocalizedString("Month")],
+		["MLS", `${getLocalizedString("Month")} (${getLocalizedString("Last sunday")})`],
+		["QLD", getLocalizedString("Quarter")],
+		["QLS", `${getLocalizedString("Quarter")} (${getLocalizedString("Last sunday")})`],
+		["YLD", getLocalizedString("Year")],
+	];
+}
+
+export function getCutOffTypes(disabledTypes: PeriodType[]): [PeriodType, string][] {
+	return cutOffTypes().filter((co) => !disabledTypes.includes(co[0]));
+}
+
+/**
+ * Picks the app's cut-off period: a select for the period type (day, week, month, quarter,
+ * year) and a field for the period itself, native date/week/month inputs where the browser
+ * has them and a select for quarters and years. Reads and writes the period through
+ * {@link useCutOff}, so it needs a `CutOffProvider` above it.
+ */
+export function CutOffPicker({
+	className,
+	max,
+	min,
+	disabled,
+	disabledTypes,
+	"data-size": size,
+	disableSearchParams = false,
+}: CutOffPickerProps) {
+	let { cutOffType, periods, setPeriod, setCutOffType } = useCutOff({ disableSearchParams });
+
+	function handlePeriodChanged(evt: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
+		if (evt.target.value) {
+			setPeriod(cutOffType, evt.target.value);
+		}
+	}
+
+	let thisYear = new Date().getFullYear();
+	let quarters = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+		.flatMap((dy) => [4, 3, 2, 1].map((q) => `${thisYear - dy}-Q${q}`))
+		.filter((period) => {
+			if (max && period > plainDateToCutOff(max, "QLD")) return false;
+			if (min && period < plainDateToCutOff(min, "QLD")) return false;
+			return true;
+		});
+	let years = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+		.map((dy) => thisYear - dy)
+		.filter((year) => {
+			if (max && year > Number(plainDateToCutOff(max, "YLD"))) return false;
+			if (min && year < Number(plainDateToCutOff(min, "YLD"))) return false;
+			return true;
+		});
+
+	return (
+		<div className={clsx("ObCutOffPicker-root", className)} data-size={size}>
+			<Select
+				name="co"
+				aria-label={getLocalizedString("Period type")}
+				value={cutOffType}
+				onChange={(evt) => setCutOffType(evt.target.value as PeriodType)}
+				disabled={disabled}
+			>
+				{getCutOffTypes(disabledTypes ?? []).map(([type, label]) => (
+					<Select.Option value={type} key={type}>
+						{label}
+					</Select.Option>
+				))}
+			</Select>
+			{cutOffType === "AllDates" && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Day")}
+					type="date"
+					value={periods.AllDates}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "AllDates") : undefined}
+					min={min ? plainDateToCutOff(min, "AllDates") : undefined}
+				/>
+			)}
+			{cutOffType === "WS" && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Week")}
+					type="week"
+					value={periods.WS.indexOf("W") === -1 ? periods.WS.replace("-", "-W") : periods.WS}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "WS") : undefined}
+					min={min ? plainDateToCutOff(min, "WS") : undefined}
+				/>
+			)}
+			{(cutOffType === "MLD" || cutOffType === "MLS") && (
+				<Textfield
+					name="period"
+					aria-label={getLocalizedString("Month")}
+					type="month"
+					value={periods.MLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+					max={max ? plainDateToCutOff(max, "MLD") : undefined}
+					min={min ? plainDateToCutOff(min, "MLD") : undefined}
+				/>
+			)}
+			{(cutOffType === "QLD" || cutOffType === "QLS") && (
+				<Select
+					name="period"
+					aria-label={getLocalizedString("Quarter")}
+					value={periods.QLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+				>
+					{quarters.map((quarter) => (
+						<Select.Option key={quarter} value={quarter}>
+							{quarter}
+						</Select.Option>
+					))}
+				</Select>
+			)}
+			{cutOffType === "YLD" && (
+				<Select
+					name="period"
+					aria-label={getLocalizedString("Year")}
+					value={periods.YLD}
+					onChange={handlePeriodChanged}
+					disabled={disabled}
+				>
+					{years.map((year) => (
+						<Select.Option key={year} value={String(year)}>
+							{year}
+						</Select.Option>
+					))}
+				</Select>
+			)}
+		</div>
+	);
+}