cx 22.4.1 → 22.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.4.1",
+   "version": "22.4.2",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/core.d.ts

@@ -29,6 +29,8 @@ declare namespace Cx {
 
    type AccessorChain<M> = {
       toString(): string;
+      valueOf(): string;
+      nameOf(): string;
    } & {
       [prop in keyof M]: AccessorChain<M[prop]>;
    };

package/src/data/comparer.spec.js

@@ -1,38 +1,38 @@
-import {sorter} from './comparer';
-import assert from 'assert';
+import { sorter } from "./comparer";
+import assert from "assert";
 
-describe('comparer', function() {
-   describe('sorter', function() {
-      it('orders by numeric values ASC', function () {
+describe("comparer", function () {
+   describe("sorter", function () {
+      it("orders by numeric values ASC", function () {
          let records = [
-            {value: 3, id: 1},
-            {value: -1, id: 2},
-            {value: 2, id: 3},
-            {value: null, id: 4},
-            {value: null, id: 5},
+            { value: 3, id: 1 },
+            { value: -1, id: 2 },
+            { value: 2, id: 3 },
+            { value: null, id: 4 },
+            { value: null, id: 5 },
          ];
 
-         let sort = sorter([{value: {bind: 'value'}, direction: 'ASC'}]);
+         let sort = sorter([{ value: { bind: "value" }, direction: "ASC" }]);
 
          let sorted = sort(records);
 
-         assert.equal(sorted[0].value, null);
-         assert.equal(sorted[1].value, null);
-         assert.equal(sorted[2].value, -1);
-         assert.equal(sorted[3].value, 2);
-         assert.equal(sorted[4].value, 3);
+         assert.equal(sorted[0].value, -1);
+         assert.equal(sorted[1].value, 2);
+         assert.equal(sorted[2].value, 3);
+         assert.equal(sorted[3].value, null);
+         assert.equal(sorted[4].value, null);
       });
 
-      it('orders by numeric values DESC', function () {
+      it("orders by numeric values DESC", function () {
          let records = [
-            {value: 3, id: 1},
-            {value: 1, id: 2},
-            {value: -2, id: 3},
-            {value: null, id: 4},
-            {value: null, id: 5},
+            { value: 3, id: 1 },
+            { value: 1, id: 2 },
+            { value: -2, id: 3 },
+            { value: null, id: 4 },
+            { value: null, id: 5 },
          ];
 
-         let sort = sorter([{value: {bind: 'value'}, direction: 'DESC'}]);
+         let sort = sorter([{ value: { bind: "value" }, direction: "DESC" }]);
 
          let sorted = sort(records);
 
@@ -43,14 +43,14 @@ describe('comparer', function() {
          assert.equal(sorted[4].value, null);
       });
 
-      it('supports field', function () {
+      it("supports field", function () {
          let records = [
-            {value: 3, id: 1},
-            {value: 1, id: 2},
-            {value: 2, id: 3}
+            { value: 3, id: 1 },
+            { value: 1, id: 2 },
+            { value: 2, id: 3 },
          ];
 
-         let sort = sorter([{field: 'value', direction: 'ASC'}]);
+         let sort = sorter([{ field: "value", direction: "ASC" }]);
          let sorted = sort(records);
          assert.equal(sorted[0].value, 1);
          assert.equal(sorted[1].value, 2);

package/src/data/createAccessorModelProxy.js

@@ -1,21 +1,43 @@
+const emptyFn = () => {};
+
 export function createAccessorModelProxy(chain = "") {
-   const proxy = new Proxy(() => {}, {
-      get: (target, name) => {
-         if (name === "isAccessorChain") return true;
-         if (typeof name !== "string") return this;
-         if (name === "toString" || name === "valueOf") return proxy;
+   let lastOp = null;
+   let lastName = null;
+
+   const proxy = new Proxy(emptyFn, {
+      get: (_, name) => {
+         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;
+         lastName = name;
          return createAccessorModelProxy(newChain);
       },
 
       apply() {
-         return chain;
+         switch (lastOp) {
+            case "nameOf":
+               if (lastName != null) return lastName;
+               const lastDotIndex = chain.lastIndexOf(".");
+               return lastDotIndex > 0 ? chain.substring(lastDotIndex + 1) : chain;
+
+            default:
+               return chain;
+         }
       },
    });
-   proxy.isAccessorChain = true;
    return proxy;
 }
 

package/src/data/createAccessorModelProxy.spec.tsx

@@ -5,19 +5,33 @@ interface Model {
    firstName: string;
    address: {
       city: string;
+      streetNumber: number;
    };
 }
 
 describe("createAccessorModelProxy", () => {
    it("generates correct paths", () => {
-      var model = createAccessorModelProxy<Model>();
+      let model = createAccessorModelProxy<Model>();
       assert.strictEqual(model.firstName.toString(), "firstName");
       assert.strictEqual(model.address.toString(), "address");
       assert.strictEqual(model.address.city.toString(), "address.city");
    });
 
    it("can be used in string templates", () => {
-      var model = createAccessorModelProxy<Model>();
+      let model = createAccessorModelProxy<Model>();
       assert.strictEqual("address.city", `${model.address.city}`);
+      assert.strictEqual("address.city", "" + model.address.city);
+      assert.strictEqual("address.city.suffix", model.address.city + ".suffix");
+   });
+
+   it("nameOf returns name of the last prop ", () => {
+      let model = createAccessorModelProxy<Model>();
+      assert.strictEqual(model.firstName.nameOf(), "firstName");
+      assert.strictEqual(model.address.nameOf(), "address");
+      assert.strictEqual(model.address.city.nameOf(), "city");
+
+      let { streetNumber, city } = model.address;
+      assert.strictEqual(streetNumber.nameOf(), "streetNumber");
+      assert.strictEqual(city.nameOf(), "city");
    });
 });

package/src/ui/Controller.d.ts

@@ -18,6 +18,26 @@ export class Controller<D = any> {
    store: View<D>;
    widget: any;
 
+   addTrigger<V1>(name: string, args: [Cx.AccessorChain<V1>], callback: (v1: V1) => void, autoRun?: boolean): void;
+   addTrigger<V1, V2>(
+      name: string,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>],
+      callback: (v1: V1, v2: V2) => void,
+      autoRun?: boolean
+   ): void;
+   addTrigger<V1, V2, V3>(
+      name: string,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>],
+      callback: (v1: V1, v2: V2, v3: V3) => void,
+      autoRun?: boolean
+   ): void;
+   addTrigger<V1, V2, V3, V4>(
+      name: string,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>, Cx.AccessorChain<V4>],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4) => void,
+      autoRun?: boolean
+   ): void;
+
    addTrigger(
       name: string,
       args: (string | Cx.AccessorChain<any>)[],
@@ -25,7 +45,24 @@ export class Controller<D = any> {
       autoRun?: boolean
    ): void;
 
-   addComputable(name: string, args: string[], callback: (...args) => any): void;
+   addComputable<V1, R>(path: Cx.AccessorChain<R>, args: [Cx.AccessorChain<V1>], callback: (v1: V1) => R): void;
+   addComputable<V1, V2, R>(
+      path: Cx.AccessorChain<R>,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>],
+      callback: (v1: V1, v2: V2) => R
+   ): void;
+   addComputable<V1, V2, V3, R>(
+      path: Cx.AccessorChain<R>,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>],
+      callback: (v1: V1, v2: V2, v3: V3) => R
+   ): void;
+   addComputable<V1, V2, V3, V4, R>(
+      path: Cx.AccessorChain<R>,
+      args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>, Cx.AccessorChain<V4>],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4) => R
+   ): void;
+
+   addComputable(path: string, args: (string | Cx.AccessorChain<any>)[], callback: (...args) => any): void;
 
    removeTrigger(name: string): void;