fix tsc issue with template types

heswell · heswell · commit 2c7982e62b49 · 2025-08-31T15:00:05.000+01:00
diff --git a/vuu-ui/packages/vuu-ui-controls/src/time-input/MaskedInput.ts b/vuu-ui/packages/vuu-ui-controls/src/time-input/MaskedInput.ts
@@ -122,6 +122,10 @@ export class MaskedInput extends EventEmitter<MaskedInputEvents> {
     return this.#value.slice(6, 8) as Seconds;
   }
 
+  get value() {
+    return this.#value;
+  }
+
   /**
    * Setting the value this way invokes 'controlled' mode
    */
diff --git a/vuu-ui/packages/vuu-ui-controls/src/time-input/TimeInput.tsx b/vuu-ui/packages/vuu-ui-controls/src/time-input/TimeInput.tsx
@@ -26,7 +26,6 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
       onChange,
       onCommit,
       placeholder = "hh:mm:ss",
-      showTemplateWhileEditing,
       value,
       ...htmlAttributes
     },
@@ -45,7 +44,6 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(
       defaultValue,
       onChange,
       onCommit,
-      showTemplateWhileEditing,
       value,
     });
 
diff --git a/vuu-ui/packages/vuu-ui-controls/src/time-input/useTimeInput.ts b/vuu-ui/packages/vuu-ui-controls/src/time-input/useTimeInput.ts
@@ -25,41 +25,36 @@ export interface TimeInputHookProps {
   defaultValue?: TimeString;
   onChange?: (time: TimeString) => void;
   onCommit: CommitHandler<HTMLInputElement, Date>;
-  showTemplateWhileEditing?: boolean;
   value?: TimeString;
 }
 
 export const useTimeInput = ({
   defaultValue,
   onChange,
   onCommit,
-  showTemplateWhileEditing = true,
   value,
 }: TimeInputHookProps) => {
   console.log(`useTimeInput defaultValue = ${defaultValue} value=${value}`);
   const mousedDownRef = useRef(false);
-  const maskedInput = useMemo<MaskedInput>(() => {
-    const mask = new MaskedInput(defaultValue, null, showTemplateWhileEditing);
-    mask.on("change", (value) => {
-      onChange?.(value);
-    });
-    return mask;
-  }, [defaultValue, onChange, showTemplateWhileEditing]);
-
+  const maskedInputRef = useRef<MaskedInput | undefined>(undefined);
   useMemo(() => {
-    if (isValidTimeString(value)) {
-      maskedInput.value = value;
+    if (maskedInputRef.current === undefined) {
+      maskedInputRef.current = new MaskedInput(defaultValue, null);
+      maskedInputRef.current.on("change", (value) => {
+        onChange?.(value);
+      });
     }
-  }, [maskedInput, value]);
 
-  const setInputEl = useCallback<RefCallback<HTMLInputElement>>(
-    (el) => {
-      if (el) {
-        maskedInput.input = el;
-      }
-    },
-    [maskedInput],
-  );
+    if (isValidTimeString(value) && value !== maskedInputRef.current?.value) {
+      maskedInputRef.current.value = value;
+    }
+  }, [defaultValue, onChange, value]);
+
+  const setInputEl = useCallback<RefCallback<HTMLInputElement>>((el) => {
+    if (el && maskedInputRef.current) {
+      maskedInputRef.current.input = el;
+    }
+  }, []);
   const back = useRef(false);
 
   const commitValue = useCallback<CommitHandler<HTMLInputElement, string>>(
@@ -79,49 +74,51 @@ export const useTimeInput = ({
 
   const handleKeyDown = useCallback<KeyboardEventHandler<HTMLInputElement>>(
     (e) => {
-      console.log(`handleKeyDown ${e.key} cursorPos ${maskedInput.cursorPos}`);
-      if (e.key === "Backspace") {
-        maskedInput.backspace();
-        back.current = true;
-      } else if (isDigit(e.key)) {
-        maskedInput.update(e.key);
-      } else if (e.key === "ArrowLeft") {
-        maskedInput.moveFocus("left");
-      } else if (e.key === "ArrowRight") {
-        maskedInput.moveFocus("right");
-      } else if (e.key === "ArrowUp") {
-        maskedInput.incrementValue();
-      } else if (e.key === "ArrowDown") {
-        maskedInput.decrementValue();
-      } else if (e.key === "v" && e.metaKey) {
-        // keyboard paste, do not prevent default
-        return;
-      } else if (e.key === "Tab") {
-        return;
-      } else if (e.key === "Enter") {
-        commitValue(e, maskedInput.value);
+      const { current: maskedInput } = maskedInputRef;
+      if (maskedInput) {
+        if (e.key === "Backspace") {
+          maskedInput.backspace();
+          back.current = true;
+        } else if (isDigit(e.key)) {
+          maskedInput.update(e.key);
+        } else if (e.key === "ArrowLeft") {
+          maskedInput.moveFocus("left");
+        } else if (e.key === "ArrowRight") {
+          maskedInput.moveFocus("right");
+        } else if (e.key === "ArrowUp") {
+          maskedInput.incrementValue();
+        } else if (e.key === "ArrowDown") {
+          maskedInput.decrementValue();
+        } else if (e.key === "v" && e.metaKey) {
+          // keyboard paste, do not prevent default
+          return;
+        } else if (e.key === "Tab") {
+          return;
+        } else if (e.key === "Enter") {
+          commitValue(e, maskedInput.value);
+        }
       }
       e.preventDefault();
     },
-    [commitValue, maskedInput],
+    [commitValue],
   );
 
   const handleClick = useCallback(() => {
     // maskedInput.click();
   }, []);
 
   const handleDoubleClick = useCallback(() => {
-    maskedInput.doubleClick();
-  }, [maskedInput]);
+    maskedInputRef.current?.doubleClick();
+  }, []);
 
   const handlePaste = useCallback<ClipboardEventHandler<HTMLInputElement>>(
     (e) => {
       const value = e.clipboardData.getData("text");
       if (isValidTimeString(value)) {
-        maskedInput.pasteValue(value);
+        maskedInputRef.current?.pasteValue(value);
       }
     },
-    [maskedInput],
+    [],
   );
 
   const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
@@ -135,9 +132,9 @@ export const useTimeInput = ({
     if (mousedDownRef.current) {
       mousedDownRef.current = false;
     } else {
-      maskedInput.focus();
+      maskedInputRef.current?.focus();
     }
-  }, [maskedInput]);
+  }, []);
 
   const handleMouseDown = useCallback<MouseEventHandler>((e) => {
     mousedDownRef.current = true;
@@ -157,15 +154,15 @@ export const useTimeInput = ({
       if (input.selectionStart === 0 && input.selectionEnd === 8) {
         console.log("full select");
       }
-      maskedInput.click();
+      maskedInputRef.current?.click();
     },
-    [maskedInput],
+    [],
   );
 
   return {
     inputRef: setInputEl,
     eventHandlers: {
-      onBlur: maskedInput.blur,
+      onBlur: maskedInputRef.current?.blur,
       onChange: handleChange,
       onClick: handleClick,
       onDoubleClick: handleDoubleClick,
diff --git a/vuu-ui/packages/vuu-ui-controls/src/vuu-time-picker/VuuTimePicker.tsx b/vuu-ui/packages/vuu-ui-controls/src/vuu-time-picker/VuuTimePicker.tsx
@@ -37,11 +37,7 @@ export const VuuTimePicker = ({
 
   return (
     <div {...htmlAttributes} className={cx(classBase, className)}>
-      <TimeInput
-        defaultValue={defaultValue}
-        onCommit={handleCommit}
-        showTemplateWhileEditing={false}
-      />
+      <TimeInput defaultValue={defaultValue} onCommit={handleCommit} />
     </div>
   );
 };
diff --git a/vuu-ui/packages/vuu-ui-controls/test/MaskedInput.test.ts b/vuu-ui/packages/vuu-ui-controls/test/MaskedInput.test.ts
@@ -10,115 +10,48 @@ const MockEl = (setSelectionRange?: (from: number, to: number) => void): any =>
   })();
 
 describe("MaskedInput", () => {
-  it("is empty before interaction", () => {
-    const maskedInput = new MaskedInput("", MockEl());
-    expect(maskedInput.value).toEqual("");
+  describe("WHEN uncontrolled", () => {
+    it("retains initial value before interaction", () => {
+      const maskedInput = new MaskedInput("00:00:00", MockEl());
+      expect(maskedInput.value).toEqual("00:00:00");
+    });
   });
 
-  describe("WHEN showTemplateWhileEditing is true", () => {
-    describe("AND no value set and focus received", () => {
-      it("THEN value = template and cursor position = 0", () => {
-        vi.useFakeTimers();
-
-        const maskedInput = new MaskedInput("", MockEl());
-        maskedInput.focus();
-        expect(maskedInput.value).toEqual("hh:mm:ss");
-
-        vi.advanceTimersToNextTimer();
+  describe("WHEN focus received", () => {
+    it("THEN value = '00:00:00' and cursor position = 0", () => {
+      vi.useFakeTimers();
 
-        expect(maskedInput.cursorPos).toEqual(0);
-        expect(maskedInput.selectionStart).toEqual(0);
-        expect(maskedInput.selectionEnd).toEqual(2);
-      });
+      const maskedInput = new MaskedInput("00:00:00", MockEl());
+      maskedInput.focus();
+      vi.advanceTimersToNextTimer();
+      expect(maskedInput.cursorPos).toEqual(0);
+      expect(maskedInput.selectionStart).toEqual(0);
+      expect(maskedInput.selectionEnd).toEqual(2);
     });
 
-    describe("AND focus received and zero pressed 6 times", () => {
-      it("THEN value is edited correctly, cursor positions are correct and final value = '00:00:00'", () => {
-        const maskedInput = new MaskedInput("", MockEl());
+    describe("AND 1-6 key pressed", () => {
+      it("THEN value is edited correctly, cursor positions are correct and final value = '12:34:56'", () => {
+        const maskedInput = new MaskedInput("00:00:00", MockEl());
         vi.useFakeTimers();
-
         maskedInput.focus();
-
         vi.advanceTimersToNextTimer();
-
         // prettier-ignore
-        const expectedValues = ["0h:mm:ss","00:mm:ss","00:0m:ss","00:00:ss","00:00:0s","00:00:00"]
+        const expectedValues = ["10:00:00","12:00:00","12:30:00","12:34:00","12:34:50","12:34:56"]
         const expectedCursorPositions = [1, 3, 4, 6, 7, 6];
         for (let i = 0; i < 6; i++) {
-          maskedInput.update("0");
+          maskedInput.update(String(i + 1) as Digit);
           expect(maskedInput.value).toEqual(expectedValues[i]);
           expect(maskedInput.cursorPos).toEqual(expectedCursorPositions[i]);
         }
       });
-      describe("AND backspace pressed 3 times", () => {
-        it("THEN value = template and cursor position = 0", () => {
-          const maskedInput = new MaskedInput("", MockEl());
-          vi.useFakeTimers();
-
-          maskedInput.focus();
-
-          vi.advanceTimersToNextTimer();
-
-          // prettier-ignore
-          const expectedValues = ["00:00:ss","00:mm:ss", "hh:mm:ss"]
-          const expectedCursorPositions = [3, 0, 0];
-          for (let i = 0; i < 6; i++) {
-            maskedInput.update("0");
-          }
-          for (let i = 0; i < 3; i++) {
-            maskedInput.backspace();
-            expect(maskedInput.cursorPos).toEqual(expectedCursorPositions[i]);
-            expect(maskedInput.value).toEqual(expectedValues[i]);
-          }
-        });
-      });
     });
-  });
-});
-describe("WHEN showTemplateWhileEditing is false", () => {
-  describe("AND no value set and focus received", () => {
-    it("THEN value = '00:00:00' and cursor position = 0", () => {
-      vi.useFakeTimers();
-
-      const maskedInput = new MaskedInput("", MockEl(), false);
-      maskedInput.focus();
-      expect(maskedInput.value).toEqual("00:00:00");
-
-      vi.advanceTimersToNextTimer();
-
-      expect(maskedInput.cursorPos).toEqual(0);
-      expect(maskedInput.selectionStart).toEqual(0);
-      expect(maskedInput.selectionEnd).toEqual(2);
-    });
-  });
-
-  describe("AND focus received and 1-6 key pressed", () => {
-    it("THEN value is edited correctly, cursor positions are correct and final value = '12:34:56'", () => {
-      const maskedInput = new MaskedInput("", MockEl(), false);
-      vi.useFakeTimers();
-
-      maskedInput.focus();
 
-      vi.advanceTimersToNextTimer();
-
-      // prettier-ignore
-      const expectedValues = ["10:00:00","12:00:00","12:30:00","12:34:00","12:34:50","12:34:56"]
-      const expectedCursorPositions = [1, 3, 4, 6, 7, 6];
-      for (let i = 0; i < 6; i++) {
-        maskedInput.update(String(i + 1) as Digit);
-        expect(maskedInput.value).toEqual(expectedValues[i]);
-        expect(maskedInput.cursorPos).toEqual(expectedCursorPositions[i]);
-      }
-    });
     describe("AND backspace pressed 3 times", () => {
       it("THEN value = template and cursor position = 0", () => {
-        const maskedInput = new MaskedInput("", MockEl(), false);
+        const maskedInput = new MaskedInput("00:00:00", MockEl());
         vi.useFakeTimers();
-
         maskedInput.focus();
-
         vi.advanceTimersToNextTimer();
-
         // prettier-ignore
         const expectedValues = ["12:34:00","12:00:00", "00:00:00"]
         const expectedCursorPositions = [3, 0, 0];
diff --git a/vuu-ui/packages/vuu-utils/src/date/date-utils.ts b/vuu-ui/packages/vuu-utils/src/date/date-utils.ts
@@ -4,14 +4,12 @@ export function toCalendarDate(d: Date) {
   return new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate());
 }
 
-type oneToFive = 1 | 2 | 3 | 4 | 5;
-type zeroToFive = 0 | oneToFive;
-type sixToNine = 6 | 7 | 8 | 9;
-type zeroToNine = zeroToFive | sixToNine;
-type oneToNine = oneToFive | sixToNine;
-
+export type oneToFive = 1 | 2 | 3 | 4 | 5;
+export type zeroToFive = 0 | oneToFive;
+export type sixToNine = 6 | 7 | 8 | 9;
+export type zeroToNine = zeroToFive | sixToNine;
+export type oneToNine = oneToFive | sixToNine;
 export type TimeUnit = "hours" | "minutes" | "seconds";
-
 export type Hours = `${0 | 1}${zeroToNine}` | `2${0 | 1 | 2 | 3}`;
 export type Minutes = `${zeroToFive}${zeroToNine}`;
 export type Seconds = `${zeroToFive}${zeroToNine}`;
@@ -22,7 +20,10 @@ export type TimeUnitValue<T extends TimeUnit> = T extends "hours"
     ? Minutes
     : Seconds;
 
-export type TimeString = `${Hours}:${Minutes}:${Seconds}`;
+// This should work, works fine in TypeScript playground, but crashes tsc
+// export type TimeString = `${Hours}:${Minutes}:${Seconds}`;
+export type TimeString =
+  `${number}${number}:${number}${number}:${number}${number}`;
 
 type YYYY = `19${zeroToNine}${zeroToNine}` | `20${zeroToNine}${zeroToNine}`;
 type MM = `0${oneToNine}` | `1${0 | 1 | 2}`;
diff --git a/vuu-ui/showcase/src/examples/UiControls/TimeInput.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/TimeInput.examples.tsx
