@openmrs/esm-utils 3.1.15-pre.718 → 3.1.15-pre.730

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-utils",
-  "version": "3.1.15-pre.718",
+  "version": "3.1.15-pre.730",
   "license": "MPL-2.0",
   "description": "Helper utilities for OpenMRS",
   "browser": "dist/openmrs-esm-utils.js",
@@ -43,10 +43,11 @@
   },
   "peerDependencies": {
     "dayjs": "1.x",
+    "i18next": "19.x",
     "rxjs": "6.x"
   },
   "dependencies": {
     "semver": "^7.3.2"
   },
-  "gitHead": "4f30619d9e3db89532aafd059d9d12740782501b"
+  "gitHead": "e054367bca570e181a4cf718ffc6aba16a9adaf7"
 }

package/src/omrs-dates.test.ts

@@ -4,6 +4,11 @@ import {
   isOmrsDateStrict,
 } from "./omrs-dates";
 import dayjs from "dayjs";
+import timezoneMock from "timezone-mock";
+import { formatDate, formatDatetime, formatTime } from ".";
+import { i18n } from "i18next";
+
+window.i18next = { language: "en" } as i18n;
 
 describe("Openmrs Dates", () => {
   it("converts js Date object to omrs date string version", () => {
@@ -41,4 +46,61 @@ describe("Openmrs Dates", () => {
     ).toDate();
     expect(toOmrsIsoString(date, true)).toEqual("2018-03-18T21:05:03.999+0000");
   });
+
+  it("formats 'Today' with respect to the locale", () => {
+    const testDate = new Date();
+    window.i18next.language = "en";
+    expect(formatDate(testDate)).toEqual("Today");
+    expect(formatDate(testDate, "no day")).toEqual("Today");
+    expect(formatDate(testDate, "no year")).toEqual("Today");
+    expect(formatDate(testDate, "wide")).toEqual("Today");
+    window.i18next.language = "sw";
+    expect(formatDate(testDate)).toEqual("Leo");
+    window.i18next.language = "ru";
+    expect(formatDate(testDate)).toEqual("Сегодня");
+  });
+
+  it("formats dates with respect to the locale", () => {
+    timezoneMock.register("UTC");
+    const testDate = new Date("2021-12-09");
+    window.i18next.language = "en";
+    expect(formatDate(testDate)).toEqual("09-Dec-2021");
+    expect(formatDate(testDate, "no day")).toEqual("Dec 2021");
+    expect(formatDate(testDate, "no year")).toEqual("09 Dec");
+    expect(formatDate(testDate, "wide")).toEqual("09 — Dec — 2021");
+    window.i18next.language = "fr";
+    expect(formatDate(testDate)).toEqual("09 déc. 2021");
+    expect(formatDate(testDate, "no day")).toEqual("déc. 2021");
+    expect(formatDate(testDate, "no year")).toEqual("09 déc.");
+    expect(formatDate(testDate, "wide")).toEqual("09 — déc. — 2021");
+    window.i18next.language = "sw";
+    expect(formatDate(testDate)).toEqual("09 Des 2021");
+    window.i18next.language = "ru";
+    expect(formatDate(testDate, "wide")).toEqual("09 — дек. — 2021 г.");
+  });
+
+  it("formats times with respect to the locale", () => {
+    timezoneMock.register("Australia/Adelaide");
+    const testDate = new Date("2021-12-09T13:15:33");
+    window.i18next.language = "en";
+    expect(formatTime(testDate)).toEqual("01:15 PM");
+    window.i18next.language = "es-CO";
+    expect(formatTime(testDate)).toMatch(/1:15 p.\sm./); // it's not a normal space between the 'p.' and 'm.'
+    window.i18next.language = "es-MX";
+    expect(formatTime(testDate)).toEqual("13:15");
+  });
+
+  it("formats datetimes with respect to the locale", () => {
+    timezoneMock.register("US/Pacific");
+    const testDate = new Date("2022-02-09T13:15:33");
+    const todayDate = new Date();
+    todayDate.setHours(15);
+    todayDate.setMinutes(20);
+    window.i18next.language = "en";
+    expect(formatDatetime(testDate)).toEqual("09-Feb-2022, 01:15 PM");
+    expect(formatDatetime(todayDate)).toEqual("Today, 03:20 PM");
+    window.i18next.language = "ht";
+    expect(formatDatetime(testDate)).toEqual("09 févr. 2022, 13:15");
+    expect(formatDatetime(todayDate)).toEqual("Aujourd’hui, 15:20");
+  });
 });

package/src/omrs-dates.ts

@@ -1,3 +1,8 @@
+/**
+ * @module
+ * @category Date and time
+ */
+import { i18n } from "i18next";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import isToday from "dayjs/plugin/isToday";
@@ -5,6 +10,12 @@ import isToday from "dayjs/plugin/isToday";
 dayjs.extend(utc);
 dayjs.extend(isToday);
 
+declare global {
+  interface Window {
+    i18next: i18n;
+  }
+}
+
 export type DateInput = string | number | Date;
 
 const isoFormat = "YYYY-MM-DDTHH:mm:ss.SSSZZ";
@@ -79,6 +90,7 @@ export function toOmrsIsoString(date: DateInput, toUTC = false): string {
 }
 
 /**
+ * @deprecated use `formatTime`
  * Formats the input as a time string using the format "HH:mm".
  */
 export function toOmrsTimeString24(date: DateInput) {
@@ -86,6 +98,7 @@ export function toOmrsTimeString24(date: DateInput) {
 }
 
 /**
+ * @deprecated use `formatTime`
  * Formats the input as a time string using the format "HH:mm A".
  */
 export function toOmrsTimeString(date: DateInput) {
@@ -93,6 +106,7 @@ export function toOmrsTimeString(date: DateInput) {
 }
 
 /**
+ * @deprecated use `formatDate(date, "wide")`
  * Formats the input as a date string using the format "DD - MMM - YYYY".
  */
 export function toOmrsDayDateFormat(date: DateInput) {
@@ -100,6 +114,7 @@ export function toOmrsDayDateFormat(date: DateInput) {
 }
 
 /**
+ * @deprecated use `formatDate(date, "no year")`
  * Formats the input as a date string using the format "DD-MMM".
  */
 export function toOmrsYearlessDateFormat(date: DateInput) {
@@ -107,8 +122,112 @@ export function toOmrsYearlessDateFormat(date: DateInput) {
 }
 
 /**
+ * @deprecated use `formatDate(date)`
  * Formats the input as a date string. By default the format "YYYY-MMM-DD" is used.
  */
 export function toOmrsDateFormat(date: DateInput, format = "YYYY-MMM-DD") {
   return dayjs(date).format(format);
 }
+
+const DATE_FORMAT_YYYY_MMM_DD = {
+  year: "numeric",
+  month: "short",
+  day: "2-digit",
+};
+const DATE_FORMAT_YYYY_MMM = {
+  year: "numeric",
+  month: "short",
+};
+const DATE_FORMAT_MMM_DD = {
+  month: "short",
+  day: "2-digit",
+};
+
+export type FormatDateMode = "standard" | "no year" | "no day" | "wide";
+
+/**
+ * Formats the input date according to the current locale and the
+ * given format mode.
+ *
+ * `standard`: "13 Dec 2021"
+ * `no year`:  "13 Dec"
+ * `no day`:   "Dec 2021"
+ * `wide`:     "13 — Dec — 2021"
+ */
+export function formatDate(date: Date, mode: FormatDateMode = "standard") {
+  const options = (
+    {
+      standard: DATE_FORMAT_YYYY_MMM_DD,
+      wide: DATE_FORMAT_YYYY_MMM_DD,
+      "no year": DATE_FORMAT_MMM_DD,
+      "no day": DATE_FORMAT_YYYY_MMM,
+    } as Record<string, Intl.DateTimeFormatOptions>
+  )[mode];
+  let locale = getLocale();
+  if (dayjs(date).isToday()) {
+    // This produces the word "Today" in the language of `locale`
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+    let localeString = rtf.format(0, "day");
+    localeString =
+      localeString[0].toLocaleUpperCase(locale) + localeString.slice(1);
+    return localeString;
+  } else {
+    if (locale == "en") {
+      // This locale override is here rather than in `getLocale`
+      // because Americans should see AM/PM for times.
+      locale = "en-GB";
+    }
+    let localeString = date.toLocaleDateString(locale, options);
+    if (locale == "en-GB" && mode == "standard") {
+      // Custom formatting for English. Use hyphens instead of spaces.
+      localeString = localeString.replace(/ /g, "-");
+    }
+    if (mode == "wide") {
+      localeString = localeString.replace(/ /g, " — "); // space-emdash-space
+      if (/ru.*/.test(locale)) {
+        // Remove the extra em-dash that gets added between the year and the suffix 'r.'
+        const len = localeString.length;
+        localeString =
+          localeString.slice(0, len - 5) +
+          localeString.slice(len - 5).replace(" — ", " ");
+      }
+    }
+    return localeString;
+  }
+}
+
+/**
+ * Formats the input as a time, according to the current locale.
+ * 12-hour or 24-hour clock depends on locale.
+ */
+export function formatTime(date: Date) {
+  return date.toLocaleTimeString(getLocale(), {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+/**
+ * Formats the input into a string showing the date and time, according
+ * to the current locale. The `mode` parameter is as described for
+ * `formatDate`.
+ *
+ * This is created by concatenating the results of `formatDate`
+ * and `formatTime` with a comma and space. This agrees with the
+ * output of `Date.prototype.toLocaleString` for *most* locales.
+ */
+export function formatDatetime(date: Date, mode: FormatDateMode = "standard") {
+  const dateString = formatDate(date, mode);
+  const timeString = formatTime(date);
+  return `${dateString}, ${timeString}`;
+}
+
+function getLocale() {
+  let language = window.i18next.language;
+  language = language.replace("_", "-"); // just in case
+  // hack for `ht` until https://unicode-org.atlassian.net/browse/CLDR-14956 is fixed
+  if (language === "ht") {
+    language = "fr-HT";
+  }
+  return language;
+}