From d5e17842a9e903a03594622436b1f179e5c90ae0 Mon Sep 17 00:00:00 2001 From: LuLaValva Date: Fri, 1 Sep 2023 13:15:03 -0700 Subject: [PATCH] fix(calendar): move utilities into separate file for Marko 4 --- src/components/ebay-calendar/component.js | 87 ++----------------- src/components/ebay-calendar/date-utils.js | 84 ++++++++++++++++++ src/components/ebay-calendar/index.marko | 2 +- src/components/ebay-date-textbox/component.js | 5 +- 4 files changed, 97 insertions(+), 81 deletions(-) create mode 100644 src/components/ebay-calendar/date-utils.js diff --git a/src/components/ebay-calendar/component.js b/src/components/ebay-calendar/component.js index 061867d1f..8d2071d29 100644 --- a/src/components/ebay-calendar/component.js +++ b/src/components/ebay-calendar/component.js @@ -1,5 +1,14 @@ // @ts-check +import { + dateArgToISO, + fromISO, + getWeekdayInfo, + localeOverride, + offsetISO, + toISO, +} from "./date-utils"; + const DAY_UPDATE_KEYMAP = { ArrowRight: 1, ArrowLeft: -1, @@ -406,81 +415,3 @@ export default class extends Marko.Component { return true; } } - -/** - * @param {string} localeName - * @return {number} 0 or 7 is Sun, 1 is Mon, -1 or 6 is Sat - */ -export function findFirstDayOfWeek(localeName) { - // weekInfo only exists on some browsers, so we default to Sunday otherwise - // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/weekInfo - - const locale = - /** @type {Intl.Locale & { weekInfo?: { firstDay: number } }} */ ( - new Intl.Locale(localeName) - ); - if (locale.weekInfo) { - return locale.weekInfo.firstDay; - } - return 0; -} - -/** - * @param {string} localeName - */ -export function getWeekdayInfo(localeName) { - const firstDayOfWeek = findFirstDayOfWeek(localeName); - - const weekdayLabelFormatter = new Intl.DateTimeFormat(localeName, { - weekday: "short", - }); - const weekday = new Date(2022, 9, 2 + firstDayOfWeek); // October 2, 2022 was a Sunday - const weekdayLabels = [...Array(7)].map(() => { - const dayLabel = weekdayLabelFormatter.format(weekday); - weekday.setDate(weekday.getDate() + 1); - return dayLabel; - }); - - return { firstDayOfWeek, weekdayLabels }; -} - -/** - * @param {DateConstructor["arguments"]} arg - */ -export function dateArgToISO(arg) { - if (!arg) return undefined; - if (/^\d\d\d\d-\d\d-\d\d$/g.test(arg)) return arg; - return toISO(new Date(arg)); -} - -/** - * @param {Date} date - * @returns {DayISO} - */ -export function toISO(date) { - return /** @type {DayISO} */ (date.toISOString().slice(0, 10)); -} - -/** - * @param {DayISO} iso - */ -export function fromISO(iso) { - return new Date(iso); -} - -/** - * @param {DayISO} iso - * @param {number} days - */ -export function offsetISO(iso, days) { - const date = fromISO(iso); - date.setUTCDate(date.getUTCDate() + days); - return toISO(date); -} - -/** - * @param {string | undefined} locale - */ -export function localeOverride(locale) { - return locale || navigator.language; -} diff --git a/src/components/ebay-calendar/date-utils.js b/src/components/ebay-calendar/date-utils.js new file mode 100644 index 000000000..b0f5cab30 --- /dev/null +++ b/src/components/ebay-calendar/date-utils.js @@ -0,0 +1,84 @@ +// @ts-check + +/** + * Always in `YYYY-MM-DD` format + * @typedef {`${number}-${number}-${number}`} DayISO + */ + +/** + * @param {string} localeName + * @return {number} 0 or 7 is Sun, 1 is Mon, -1 or 6 is Sat + */ +export function findFirstDayOfWeek(localeName) { + // weekInfo only exists on some browsers, so we default to Sunday otherwise + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/weekInfo + + const locale = + /** @type {Intl.Locale & { weekInfo?: { firstDay: number } }} */ ( + new Intl.Locale(localeName) + ); + if (locale.weekInfo) { + return locale.weekInfo.firstDay; + } + return 0; +} + +/** + * @param {string} localeName + */ +export function getWeekdayInfo(localeName) { + const firstDayOfWeek = findFirstDayOfWeek(localeName); + + const weekdayLabelFormatter = new Intl.DateTimeFormat(localeName, { + weekday: "short", + }); + const weekday = new Date(2022, 9, 2 + firstDayOfWeek); // October 2, 2022 was a Sunday + const weekdayLabels = [...Array(7)].map(() => { + const dayLabel = weekdayLabelFormatter.format(weekday); + weekday.setDate(weekday.getDate() + 1); + return dayLabel; + }); + + return { firstDayOfWeek, weekdayLabels }; +} + +/** + * @param {DateConstructor["arguments"]} arg + */ +export function dateArgToISO(arg) { + if (!arg) return undefined; + if (/^\d\d\d\d-\d\d-\d\d$/g.test(arg)) return arg; + return toISO(new Date(arg)); +} + +/** + * @param {Date} date + * @returns {DayISO} + */ +export function toISO(date) { + return /** @type {DayISO} */ (date.toISOString().slice(0, 10)); +} + +/** + * @param {DayISO} iso + */ +export function fromISO(iso) { + return new Date(iso); +} + +/** + * @param {DayISO} iso + * @param {number} days + */ +export function offsetISO(iso, days) { + const date = fromISO(iso); + date.setUTCDate(date.getUTCDate() + days); + return toISO(date); +} + +/** + * @param {string | undefined} locale + */ +export function localeOverride(locale) { + return locale || navigator.language; +} diff --git a/src/components/ebay-calendar/index.marko b/src/components/ebay-calendar/index.marko index 58c15836a..935100b43 100644 --- a/src/components/ebay-calendar/index.marko +++ b/src/components/ebay-calendar/index.marko @@ -1,5 +1,5 @@ // @ts-check -import {localeOverride, toISO} from "./component" +import { toISO } from "./date-utils" $ var numMonths = input.numMonths || 1; $ var monthDates = [...Array(numMonths)].map((_, i) => component.getMonthDate(state.offset + i)); diff --git a/src/components/ebay-date-textbox/component.js b/src/components/ebay-date-textbox/component.js index c09cbfb06..262aae25e 100644 --- a/src/components/ebay-date-textbox/component.js +++ b/src/components/ebay-date-textbox/component.js @@ -1,7 +1,7 @@ // @ts-check import Expander from "makeup-expander"; -import { dateArgToISO, toISO } from "../ebay-calendar/component"; +import { dateArgToISO, toISO } from "../ebay-calendar/date-utils"; const MIN_WIDTH_FOR_DOUBLE_PANE = 600; @@ -46,6 +46,7 @@ export default class extends Marko.Component { } onMount() { + /** @type {any} */ this.expander = new Expander(/** @type {HTMLElement} */ (this.el), { hostSelector: ".ebay-date-textbox--main > .icon-btn", contentSelector: ".date-textbox__popover", @@ -55,7 +56,7 @@ export default class extends Marko.Component { } onDestroy() { - this.expander?.destroy(); + if (this.expander) this.expander.destroy(); } /**