cx 26.4.4 → 26.5.1

package/src/data/createAccessorModelProxy.ts

@@ -1,66 +1,66 @@
-// Homomorphic mapped type preserves Go-to-Definition in IDEs
-// -? strips optionality, as clause filters conflicting method names
-type AccessorChainMap<M> = {
-   [K in keyof M as Exclude<K, "toString" | "valueOf" | "nameOf">]-?: AccessorChain<M[K]>;
-};
-
-// Check if a type is `any` using the intersection trick
-type IsAny<T> = 0 extends 1 & T ? true : false;
-
-export type AccessorChain<M> = (IsAny<M> extends true
-   ? { [key: string]: any } // Allow any property access for `any` type
-   : [M] extends [object]
-     ? AccessorChainMap<M> // Direct mapping preserves IDE navigation
-     : [NonNullable<M>] extends [object]
-       ? AccessorChainMap<NonNullable<M>> // Fallback for nullable types (e.g. optional properties)
-       : {}) & {
-   toString(): string;
-   valueOf(): M | undefined;
-   nameOf(): string;
-};
-
-const emptyFn = () => {};
-
-export function createAccessorModelProxy<M>(chain: string = ""): AccessorChain<M> {
-   let lastOp: string | null = null;
-
-   const proxy = new Proxy(emptyFn, {
-      get: (_, name: string | symbol) => {
-         if (typeof name !== "string") return proxy;
-
-         switch (name) {
-            case "isAccessorChain":
-               return true;
-
-            case "toString":
-            case "valueOf":
-            case "nameOf":
-               lastOp = name;
-               return proxy;
-         }
-
-         let newChain = chain;
-         if (newChain.length > 0) newChain += ".";
-         newChain += name;
-         return createAccessorModelProxy(newChain);
-      },
-
-      apply(): string {
-         switch (lastOp) {
-            case "nameOf":
-               const lastDotIndex = chain.lastIndexOf(".");
-               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
-
-            default:
-               return chain;
-         }
-      },
-   });
-   return proxy as unknown as AccessorChain<M>;
-}
-
-export const createModel = createAccessorModelProxy;
-
-export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
-   return value != null && !!(value as any).isAccessorChain;
-}
+// Homomorphic mapped type preserves Go-to-Definition in IDEs
+// -? strips optionality, as clause filters conflicting method names
+type AccessorChainMap<M> = {
+   [K in keyof M as Exclude<K, "toString" | "valueOf" | "nameOf">]-?: AccessorChain<M[K]>;
+};
+
+// Check if a type is `any` using the intersection trick
+type IsAny<T> = 0 extends 1 & T ? true : false;
+
+export type AccessorChain<M> = (IsAny<M> extends true
+   ? { [key: string]: any } // Allow any property access for `any` type
+   : [M] extends [object]
+     ? AccessorChainMap<M> // Direct mapping preserves IDE navigation
+     : [NonNullable<M>] extends [object]
+       ? AccessorChainMap<NonNullable<M>> // Fallback for nullable types (e.g. optional properties)
+       : {}) & {
+   toString(): string;
+   valueOf(): M | undefined;
+   nameOf(): string;
+};
+
+const emptyFn = () => {};
+
+export function createAccessorModelProxy<M>(chain: string = ""): AccessorChain<M> {
+   let lastOp: string | null = null;
+
+   const proxy = new Proxy(emptyFn, {
+      get: (_, name: string | symbol) => {
+         if (typeof name !== "string") return proxy;
+
+         switch (name) {
+            case "isAccessorChain":
+               return true;
+
+            case "toString":
+            case "valueOf":
+            case "nameOf":
+               lastOp = name;
+               return proxy;
+         }
+
+         let newChain = chain;
+         if (newChain.length > 0) newChain += ".";
+         newChain += name;
+         return createAccessorModelProxy(newChain);
+      },
+
+      apply(): string {
+         switch (lastOp) {
+            case "nameOf":
+               const lastDotIndex = chain.lastIndexOf(".");
+               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
+
+            default:
+               return chain;
+         }
+      },
+   });
+   return proxy as unknown as AccessorChain<M>;
+}
+
+export const createModel = createAccessorModelProxy;
+
+export function isAccessorChain<M>(value: unknown): value is AccessorChain<M> {
+   return value != null && !!(value as any).isAccessorChain;
+}

package/src/ui/Format.spec.ts

@@ -0,0 +1,32 @@
+import assert from "assert";
+import { Format } from "./Format";
+
+// The `quarter` formatter is registered eagerly when ui/Format is imported,
+// so these tests do not need enableCultureSensitiveFormatting().
+describe("Format - quarter", function () {
+   it("renders the calendar quarter with the default pattern", function () {
+      assert.equal(Format.value(new Date(2020, 0, 15), "quarter"), "Q1 2020");
+      assert.equal(Format.value(new Date(2020, 5, 1), "quarter"), "Q2 2020");
+      assert.equal(Format.value(new Date(2020, 11, 31), "quarter"), "Q4 2020");
+   });
+
+   it("supports custom patterns and the {yy} token", function () {
+      assert.equal(Format.value(new Date(2020, 0, 1), "quarter;{yy}Q{q}"), "20Q1");
+      assert.equal(Format.value(new Date(2020, 8, 1), "quarter;{q}Q{yyyy}"), "3Q2020");
+   });
+
+   it("accepts both lowercase and uppercase placeholders", function () {
+      assert.equal(Format.value(new Date(2020, 0, 1), "quarter;{YY}Q{Q}"), "20Q1");
+      assert.equal(Format.value(new Date(2020, 0, 1), "quarter;Q{Q} {YYYY}"), "Q1 2020");
+   });
+
+   it("treats the input as an exclusive range end with the exclusive flag", function () {
+      assert.equal(Format.value(new Date(2021, 0, 1), "quarter;{yy}Q{q};exclusive"), "20Q4");
+      assert.equal(Format.value(new Date(2021, 0, 1), "quarter;{yy}Q{q};ex"), "20Q4");
+   });
+
+   it("falls back to the default pattern when the pattern argument is empty (quarter;;e)", function () {
+      assert.equal(Format.value(new Date(2021, 0, 1), "quarter;;e"), "Q4 2020");
+      assert.equal(Format.value(new Date(2020, 0, 1), "quarter;;e"), "Q4 2019");
+   });
+});

package/src/ui/Format.ts

@@ -1,12 +1,31 @@
 import { Culture, getCurrentCultureCache } from "./Culture";
 import { Format as Fmt, resolveMinMaxFractionDigits, setGetFormatCacheCallback } from "../util/Format";
 import { setGetExpressionCacheCallback } from "../data/Expression";
-import { setGetStringTemplateCacheCallback } from "../data/StringTemplate";
-import { parseDateInvariant } from "../util";
+import { setGetStringTemplateCacheCallback, StringTemplate } from "../data/StringTemplate";
+import { dateQuarter, dayBefore, parseDateInvariant } from "../util";
 import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
 
 export const Format = Fmt;
 
+// The `quarter` formatter renders a calendar quarter via a string-template
+// pattern with `{q}` (quarter number), `{yyyy}` and `{yy}` (year) placeholders.
+// Placeholders are case-insensitive (`{Q}`, `{YYYY}`, `{YY}` work too). It lives
+// here rather than in util/Format because it depends on StringTemplate from the
+// data layer, which util/ cannot import. It is registered eagerly since it does
+// not depend on culture settings.
+Fmt.registerFactory("quarter", (fmt: any, pattern?: string, mode?: string) => {
+   let exclusive = mode === "exclusive" || mode === "ex" || mode === "e";
+   let template = StringTemplate.get(pattern || "Q{q} {yyyy}");
+   return (value: any) => {
+      let date = parseDateInvariant(value);
+      if (exclusive) date = dayBefore(date);
+      let q = dateQuarter(date);
+      let yyyy = date.getFullYear();
+      let yy = String(yyyy % 100).padStart(2, "0");
+      return template({ q, Q: q, yyyy, YYYY: yyyy, yy, YY: yy });
+   };
+});
+
 let cultureSensitiveFormatsRegistered = false;
 
 export function resolveNumberFormattingFlags(flags?: string): any {
@@ -86,6 +105,12 @@ export function enableCultureSensitiveFormatting() {
       return (value: any) => formatter.format(parseDateInvariant(value));
    });
 
+   Fmt.registerFactory(["dayBefore", "daybefore"], (fmt: any, format = "yyyyMd hhmm") => {
+      let culture = Culture.getDateTimeCulture();
+      let formatter = culture.getFormatter(format);
+      return (value: any) => formatter.format(dayBefore(parseDateInvariant(value)));
+   });
+
    setGetFormatCacheCallback(() => {
       let cache = getCurrentCultureCache();
       if (!cache.formatCache) cache.formatCache = {};

package/src/ui/Repeater.spec.tsx

@@ -1,181 +1,181 @@
-import { Store } from "../data/Store";
-import { Repeater } from "./Repeater";
-import { bind } from "./bind";
-import { createTestRenderer, act } from "../util/test/createTestRenderer";
-import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
-
-import assert from "assert";
-
-describe("Repeater", () => {
-   it("allows sorting", async () => {
-      let data = [
-         {
-            value: "C",
-         },
-         {
-            value: "B",
-         },
-         {
-            value: "A",
-         },
-      ];
-
-      let widget = (
-         <cx>
-            <div>
-               <Repeater records={data} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
-                  <div text={bind("$item.value")} />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = await createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["A"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-   });
-
-   it("changes are properly updated", async () => {
-      let divInstances: any[] = [];
-      let widget = (
-         <cx>
-            <div>
-               <Repeater records={bind("data")} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
-                  <div
-                     text={bind("$item.value")}
-                     onExplore={(context, instance) => {
-                        divInstances.push(instance);
-                     }}
-                  />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            data: [
-               {
-                  value: "C",
-               },
-               {
-                  value: "B",
-               },
-            ],
-         },
-      });
-
-      const component = await createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-
-      divInstances = [];
-
-      await act(async () => {
-         store.update("data", (data) => [{ value: "A" }, ...data]);
-      });
-
-      assert.deepEqual(component.toJSON(), {
-         type: "div",
-         props: {},
-         children: [
-            {
-               type: "div",
-               props: {},
-               children: ["A"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["B"],
-            },
-            {
-               type: "div",
-               props: {},
-               children: ["C"],
-            },
-         ],
-      });
-
-      assert.equal(divInstances.length, 3);
-      assert.equal(divInstances[0].store.get("$item.value"), "A");
-      assert.equal(divInstances[1].store.get("$item.value"), "B");
-      assert.equal(divInstances[2].store.get("$item.value"), "C");
-   });
-
-   it("infers T from AccessorChain<T[]> for onCreateFilter callback", () => {
-      interface Item {
-         name: string;
-         active: boolean;
-      }
-
-      interface AppModel {
-         items: Item[];
-         $item: Item;
-      }
-
-      const m = createAccessorModelProxy<AppModel>();
-
-      // onCreateFilter should receive (record: Item) => boolean when T is inferred from AccessorChain<Item[]>
-      const widget = (
-         <cx>
-            <div>
-               <Repeater
-                  records={m.items}
-                  recordAlias={m.$item}
-                  onCreateFilter={() => (record) => {
-                     // If T is correctly inferred as Item, record.name should be string
-                     const name: string = record.name;
-                     // @ts-expect-error - record.name should be string, not number
-                     const wrong: number = record.name;
-                     return record.active;
-                  }}
-               >
-                  <div text={m.$item.name} />
-               </Repeater>
-            </div>
-         </cx>
-      );
-
-      assert.ok(widget);
-   });
-});
+import { Store } from "../data/Store";
+import { Repeater } from "./Repeater";
+import { bind } from "./bind";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+
+import assert from "assert";
+
+describe("Repeater", () => {
+   it("allows sorting", async () => {
+      let data = [
+         {
+            value: "C",
+         },
+         {
+            value: "B",
+         },
+         {
+            value: "A",
+         },
+      ];
+
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={data} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div text={bind("$item.value")} />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+   });
+
+   it("changes are properly updated", async () => {
+      let divInstances: any[] = [];
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={bind("data")} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div
+                     text={bind("$item.value")}
+                     onExplore={(context, instance) => {
+                        divInstances.push(instance);
+                     }}
+                  />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            data: [
+               {
+                  value: "C",
+               },
+               {
+                  value: "B",
+               },
+            ],
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      divInstances = [];
+
+      await act(async () => {
+         store.update("data", (data) => [{ value: "A" }, ...data]);
+      });
+
+      assert.deepEqual(component.toJSON(), {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      assert.equal(divInstances.length, 3);
+      assert.equal(divInstances[0].store.get("$item.value"), "A");
+      assert.equal(divInstances[1].store.get("$item.value"), "B");
+      assert.equal(divInstances[2].store.get("$item.value"), "C");
+   });
+
+   it("infers T from AccessorChain<T[]> for onCreateFilter callback", () => {
+      interface Item {
+         name: string;
+         active: boolean;
+      }
+
+      interface AppModel {
+         items: Item[];
+         $item: Item;
+      }
+
+      const m = createAccessorModelProxy<AppModel>();
+
+      // onCreateFilter should receive (record: Item) => boolean when T is inferred from AccessorChain<Item[]>
+      const widget = (
+         <cx>
+            <div>
+               <Repeater
+                  records={m.items}
+                  recordAlias={m.$item}
+                  onCreateFilter={() => (record) => {
+                     // If T is correctly inferred as Item, record.name should be string
+                     const name: string = record.name;
+                     // @ts-expect-error - record.name should be string, not number
+                     const wrong: number = record.name;
+                     return record.active;
+                  }}
+               >
+                  <div text={m.$item.name} />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      assert.ok(widget);
+   });
+});

package/src/util/Format.spec.ts

@@ -47,6 +47,17 @@ describe("Format", function () {
       });
    });
 
+   describe("daybefore", function () {
+      it("formats the date shifted back by one day", function () {
+         assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "daybefore"), "3/31/2015 05:06");
+         assert.equal(Format.value(new Date(2015, 3, 1, 5, 6, 14), "dayBefore"), "3/31/2015 05:06");
+      });
+
+      it("steps back across month and year boundaries", function () {
+         assert.equal(Format.value(new Date(2021, 0, 1), "daybefore"), "12/31/2020 00:00");
+      });
+   });
+
    describe("ellipsis", function () {
       it("can shorten long texts", function () {
          assert.equal(Format.value("This is a very long text.", "ellipsis;7"), "This...");

package/src/util/Format.ts

@@ -5,6 +5,7 @@ import { isUndefined } from "../util/isUndefined";
 import { isArray } from "../util/isArray";
 import { capitalize } from "./capitalize";
 import { parseDateInvariant } from "./date/parseDateInvariant";
+import { dayBefore } from "./date/dayBefore";
 
 //Culture dependent formatters are defined in the ui package.
 
@@ -98,6 +99,11 @@ let formatFactory: Record<string, (...args: any[]) => (value: any) => string> =
       return (value: any) => date(value) + " " + time(value);
    },
 
+   dayBefore: function () {
+      let datetime = formatFactory.datetime();
+      return (value: any) => datetime(dayBefore(parseDateInvariant(value)));
+   },
+
    ellipsis: function (part0, length, where) {
       length = Number(length);
       if (!(length > 3)) length = 10;
@@ -168,6 +174,7 @@ formatFactory.ps = formatFactory.percentageSign;
 formatFactory.d = formatFactory.date;
 formatFactory.t = formatFactory.time;
 formatFactory.dt = formatFactory.datetime;
+formatFactory.daybefore = formatFactory.dayBefore;
 formatFactory.zeropad = formatFactory.zeroPad;
 formatFactory.leftpad = formatFactory.leftPad;
 formatFactory.capitalize = formatFactory.capitalize;

package/src/util/date/dateQuarter.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns the calendar quarter (1-4) the given date falls in.
+ * @param date
+ * @returns {number}
+ */
+export function dateQuarter(date: Date): number {
+   return Math.floor(date.getMonth() / 3) + 1;
+}

package/src/util/date/dayBefore.ts

@@ -0,0 +1,15 @@
+/**
+ * Returns a new `Date` representing the calendar day before the given date,
+ * keeping the same time of day. Month and year boundaries are handled
+ * automatically. The input is not mutated.
+ *
+ * Useful for displaying the exclusive end of a date range as an inclusive
+ * value, e.g. a period ending at `2021-01-01` shown as `Dec 2020`.
+ * @param date
+ * @returns {Date}
+ */
+export function dayBefore(date: Date): Date {
+   let result = new Date(date.getTime());
+   result.setDate(result.getDate() - 1);
+   return result;
+}

package/src/util/date/index.ts

@@ -1,4 +1,6 @@
 export * from "./dateDiff";
+export * from "./dateQuarter";
+export * from "./dayBefore";
 export * from "./zeroTime";
 export * from "./monthStart";
 export * from "./lowerBoundCheck";