feat(input-time-picker): support fractional seconds

packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx

@@ -50,6 +50,7 @@ import {
 } from "../../utils/focusTrapComponent";
 import { FocusTrap } from "focus-trap";
 import {
+  formatTimePart,
   formatTimeString,
   isValidTime,
   localizeTimeString,
@@ -68,6 +69,7 @@ import localizedFormat from "dayjs/esm/plugin/localizedFormat";
 import preParsePostFormat from "dayjs/esm/plugin/preParsePostFormat";
 import updateLocale from "dayjs/esm/plugin/updateLocale";
 import { getSupportedLocale } from "../../utils/locale";
+import { decimalPlaces } from "../../utils/math";
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
 const supportedDayJsLocaleToLocaleConfigImport = new Map([
@@ -129,6 +131,13 @@ dayjs.extend(localizedFormat);
 dayjs.extend(preParsePostFormat);
 dayjs.extend(updateLocale);
 
+interface DayJSTimeParts {
+  hour: number;
+  minute: number;
+  second: number;
+  millisecond: number;
+}
+
 @Component({
   tag: "calcite-input-time-picker",
   styleUrl: "input-time-picker.scss",
@@ -323,6 +332,8 @@ export class InputTimePicker
 
   private dialogId = `time-picker-dialog--${guid()}`;
 
+  private localeConfig;
+
   /** whether the value of the input was changed as a result of user typing or not */
   private userChangedValue = false;
 
@@ -476,20 +487,107 @@ export class InputTimePicker
     // we need to set the corresponding locale before parsing, otherwise it defaults to English (possible dayjs bug)
     dayjs.locale(this.effectiveLocale.toLowerCase());
 
-    const dayjsParseResult = dayjs(value, ["LTS", "LT"]);
+    const nonFractionalSecondParts = this.delocalizeTimeStringToParts(value);
 
-    if (dayjsParseResult.isValid()) {
-      let unformattedTimeString = `${dayjsParseResult.get("hour")}:${dayjsParseResult.get(
-        "minute"
-      )}`;
+    let delocalizedTimeString;
+
+    if (this.shouldIncludeFractionalSeconds()) {
+      const stepPrecision = decimalPlaces(this.step);
+      const centisecondParts = this.delocalizeTimeStringToParts(value, "S");
 
-      if (this.shouldIncludeSeconds()) {
-        unformattedTimeString += `:${dayjsParseResult.get("seconds") || 0}`;
+      if (stepPrecision === 1) {
+        if (centisecondParts.millisecond !== 0) {
+          delocalizedTimeString = this.getTimeStringFromParts(centisecondParts);
+        } else {
+          delocalizedTimeString = this.getTimeStringFromParts(nonFractionalSecondParts);
+        }
+      } else {
+        const decisecondParts = this.delocalizeTimeStringToParts(value, "SS");
+
+        if (stepPrecision === 2) {
+          if (decisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(decisecondParts);
+          } else if (centisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(centisecondParts);
+          } else {
+            delocalizedTimeString = this.getTimeStringFromParts(nonFractionalSecondParts);
+          }
+        } else if (stepPrecision >= 3) {
+          const millisecondParts = this.delocalizeTimeStringToParts(value, "SSS");
+
+          if (millisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(millisecondParts);
+          } else if (decisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(decisecondParts);
+          } else if (centisecondParts.millisecond !== 0) {
+            delocalizedTimeString = this.getTimeStringFromParts(centisecondParts);
+          } else {
+            delocalizedTimeString = this.getTimeStringFromParts(nonFractionalSecondParts);
+          }
+        }
       }
+    } else {
+      delocalizedTimeString = this.getTimeStringFromParts(nonFractionalSecondParts);
+    }
+
+    return delocalizedTimeString;
+  }
+
+  private delocalizeTimeStringToParts(
+    localizedTimeString: string,
+    fractionalSecondFormatToken?: "S" | "SS" | "SSS"
+  ): DayJSTimeParts {
+    const ltsFormatString = this.localeConfig?.formats?.LTS;
+    const fractionalSecondTokenMatch = ltsFormatString.match(/ss\.*(S+)/g);
+
+    if (fractionalSecondFormatToken && this.shouldIncludeFractionalSeconds()) {
+      const secondFormatToken = `ss.${fractionalSecondFormatToken}`;
+      this.localeConfig.formats.LTS = fractionalSecondTokenMatch
+        ? ltsFormatString.replace(fractionalSecondTokenMatch[0], secondFormatToken)
+        : ltsFormatString.replace("ss", secondFormatToken);
+    } else if (fractionalSecondTokenMatch) {
+      this.localeConfig.formats.LTS = ltsFormatString.replace(fractionalSecondTokenMatch[0], "ss");
+    }
+
+    dayjs.updateLocale(
+      this.getSupportedDayJSLocale(getSupportedLocale(this.effectiveLocale)),
+      this.localeConfig
+    );
+
+    const dayjsParseResult = dayjs(localizedTimeString, ["LTS", "LT"]);
+
+    if (dayjsParseResult.isValid()) {
+      return {
+        hour: dayjsParseResult.get("hour"),
+        minute: dayjsParseResult.get("minute"),
+        second: dayjsParseResult.get("second"),
+        millisecond: dayjsParseResult.get("millisecond"),
+      };
+    }
+    return {
+      hour: null,
+      minute: null,
+      second: null,
+      millisecond: null,
+    };
+  }
 
-      return formatTimeString(unformattedTimeString) || "";
+  private getTimeStringFromParts(parts: DayJSTimeParts): string {
+    let timeString = "";
+    if (!parts) {
+      return timeString;
     }
-    return "";
+    if (parts.hour !== null && parts.minute !== null) {
+      timeString = `${formatTimePart(parts.hour)}:${formatTimePart(parts.minute)}`;
+      if (this.shouldIncludeSeconds() && parts.second !== null) {
+        timeString += `:${formatTimePart(parts.second)}`;
+        if (this.shouldIncludeFractionalSeconds() && parts.millisecond !== null) {
+          const second = (parts.millisecond * 0.001).toFixed(decimalPlaces(this.step));
+          timeString += `.${second.toString().replace("0.", "")}`;
+        }
+      }
+    }
+    return timeString;
   }
 
   private popoverCloseHandler = () => {
@@ -531,17 +629,19 @@ export class InputTimePicker
 
       const newValue = this.delocalizeTimeString(this.calciteInputEl.value);
 
-      this.setValue(newValue);
+      if (isValidTime(newValue)) {
+        this.setValue(newValue);
 
-      const localizedTimeString = localizeTimeString({
-        value: this.value,
-        locale: this.effectiveLocale,
-        numberingSystem: this.numberingSystem,
-        includeSeconds: this.shouldIncludeSeconds(),
-      });
+        const localizedTimeString = localizeTimeString({
+          value: this.value,
+          locale: this.effectiveLocale,
+          numberingSystem: this.numberingSystem,
+          includeSeconds: this.shouldIncludeSeconds(),
+        });
 
-      if (newValue && this.calciteInputEl.value !== localizedTimeString) {
-        this.setInputValue(localizedTimeString);
+        if (newValue && this.calciteInputEl.value !== localizedTimeString) {
+          this.setInputValue(localizedTimeString);
+        }
       }
     } else if (key === "ArrowDown") {
       this.open = true;
@@ -554,22 +654,29 @@ export class InputTimePicker
     }
   };
 
+  private getSupportedDayJSLocale(locale: string) {
+    const dayjsLocale = locale.toLowerCase();
+    if (dayjsLocale === "no") {
+      return "nb";
+    }
+    if (dayjsLocale === "pt-pt") {
+      return "pt";
+    }
+    return dayjsLocale;
+  }
+
   private async loadDateTimeLocaleData(): Promise<void> {
     let supportedLocale = getSupportedLocale(this.effectiveLocale).toLowerCase();
 
-    if (supportedLocale === "no") {
-      supportedLocale = "nb";
-    }
-
-    if (supportedLocale === "pt-pt") {
-      supportedLocale = "pt";
-    }
+    supportedLocale = this.getSupportedDayJSLocale(supportedLocale);
 
     const { default: localeConfig } = await supportedDayJsLocaleToLocaleConfigImport.get(
       supportedLocale
     )();
 
-    dayjs.locale(localeConfig, null, true);
+    this.localeConfig = localeConfig;
+
+    dayjs.locale(this.localeConfig, null, true);
     dayjs.updateLocale(supportedLocale, this.getExtendedLocaleConfig(supportedLocale));
   }
 
@@ -656,6 +763,10 @@ export class InputTimePicker
     return this.step < 60;
   }
 
+  private shouldIncludeFractionalSeconds(): boolean {
+    return decimalPlaces(this.step) > 0;
+  }
+
   private setCalcitePopoverEl = (el: HTMLCalcitePopoverElement): void => {
     this.popoverEl = el;
   };

packages/calcite-components/src/components/time-picker/assets/time-picker/t9n/messages.json

@@ -5,6 +5,9 @@
   "meridiem": "AM/PM",
   "meridiemDown": "Decrease AM/PM",
   "meridiemUp": "Increase AM/PM",
+  "fractionalSecond": "Fractional second",
+  "fractionalSecondDown": "Decrease fractional second",
+  "fractionalSecondUp": "Increase fractional second",
   "minute": "Minute",
   "minuteDown": "Decrease minute",
   "minuteUp": "Increase minute",

packages/calcite-components/src/components/time-picker/resources.ts

@@ -2,6 +2,8 @@ export const CSS = {
   button: "button",
   buttonBottomLeft: "button--bottom-left",
   buttonBottomRight: "button--bottom-right",
+  buttonFractionalSecondDown: "button--fractionalSecond-down",
+  buttonFractionalSecondUp: "button--fractionalSecond-up",
   buttonHourDown: "button--hour-down",
   buttonHourUp: "button--hour-up",
   buttonMeridiemDown: "button--meridiem-down",
@@ -14,6 +16,7 @@ export const CSS = {
   buttonTopRight: "button--top-right",
   column: "column",
   delimiter: "delimiter",
+  fractionalSecond: "fractionalSecond",
   hour: "hour",
   input: "input",
   meridiem: "meridiem",

packages/calcite-components/src/components/time-picker/time-picker.e2e.ts

@@ -2,6 +2,7 @@ import { newE2EPage } from "@stencil/core/testing";
 import { accessible, defaults, focusable, hidden, renders, t9n } from "../../tests/commonTests";
 import { formatTimePart } from "../../utils/time";
 import { CSS } from "./resources";
+import { getElementXY } from "../../tests/utils";
 
 const letterKeys = [
   "a",
@@ -1091,4 +1092,48 @@ describe("calcite-time-picker", () => {
 
     expect(await page.find(`calcite-time-picker >>> .${CSS.second}`)).toBeNull();
   });
+
+  describe("fractional second support", () => {
+    it("upward nudge of empty fractional second sets to 0 for step=0.1", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-time-picker step="0.1"></calcite-time-picker>`);
+      const [buttonUpLocationX, buttonUpLocationY] = await getElementXY(
+        page,
+        "calcite-time-picker",
+        ".button--fractionalSecond-up"
+      );
+      await page.mouse.click(buttonUpLocationX, buttonUpLocationY);
+      await page.waitForChanges();
+      const fractionalSecondEl = await page.find(`calcite-time-picker >>> .input.fractionalSecond`);
+      expect(fractionalSecondEl.innerHTML).toEqual("0");
+    });
+
+    it("upward nudge of empty fractional second sets to 00 for step=0.01", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-time-picker step="0.01"></calcite-time-picker>`);
+      const [buttonUpLocationX, buttonUpLocationY] = await getElementXY(
+        page,
+        "calcite-time-picker",
+        ".button--fractionalSecond-up"
+      );
+      await page.mouse.click(buttonUpLocationX, buttonUpLocationY);
+      await page.waitForChanges();
+      const fractionalSecondEl = await page.find(`calcite-time-picker >>> .input.fractionalSecond`);
+      expect(fractionalSecondEl.innerHTML).toEqual("00");
+    });
+
+    it("upward nudge of empty fractional second sets to 000 for step=0.001", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-time-picker step="0.001"></calcite-time-picker>`);
+      const [buttonUpLocationX, buttonUpLocationY] = await getElementXY(
+        page,
+        "calcite-time-picker",
+        ".button--fractionalSecond-up"
+      );
+      await page.mouse.click(buttonUpLocationX, buttonUpLocationY);
+      await page.waitForChanges();
+      const fractionalSecondEl = await page.find(`calcite-time-picker >>> .input.fractionalSecond`);
+      expect(fractionalSecondEl.innerHTML).toEqual("000");
+    });
+  });
 });