cx 22.3.4 → 22.3.5

package/src/ui/Instance.js

@@ -11,6 +11,7 @@ import { isArray } from "../util/isArray";
 import { isObject } from "../util/isObject";
 import { isNonEmptyArray } from "../util/isNonEmptyArray";
 import { isUndefined } from "../util/isUndefined";
+import { isAccessorChain } from "../data/createAccessorModelProxy";
 
 let instanceId = 1000;
 
@@ -116,8 +117,8 @@ export class Instance {
          ins = ins.widget.isContent
             ? ins.contentPlaceholder
             : ins.parent.outerLayout === ins
-               ? ins.parent.parent
-               : ins.parent;
+            ? ins.parent.parent
+            : ins.parent;
       }
       renderList.reverse();
    }
@@ -416,10 +417,10 @@ export class Instance {
                let action = p.action(value, this);
                this.store.dispatch(action);
                changed = true;
-            } else if (isString(p.bind)) {
+            } else if (isString(p.bind) || isAccessorChain(p.bind)) {
                changed = this.store.set(p.bind, value);
             }
-         }
+         } else if (isAccessorChain(p)) changed = this.store.set(p.toString(), value);
       });
       return changed;
    }
@@ -544,7 +545,7 @@ export class InstanceCache {
    }
 
    getChild(widget, store, key) {
-      let k = this.keyPrefix + (key != null ? key : (widget.vdomKey || widget.widgetId));
+      let k = this.keyPrefix + (key != null ? key : widget.vdomKey || widget.widgetId);
       let instance = this.children[k];
 
       if (

package/src/ui/Repeater.d.ts

@@ -1,12 +1,22 @@
-import * as Cx from "../core";
+import {
+   RecordsProp,
+   RecordAlias,
+   StringProp,
+   SortersProp,
+   StructuredProp,
+   CollatorOptions,
+   Widget,
+   PureContainerProps,
+   Record,
+} from "../core";
 import { Instance } from "./Instance";
 
-interface RepeaterProps extends Cx.PureContainerProps {
-   records: Cx.RecordsProp;
-   recordName?: string;
-   recordAlias?: string;
-   indexName?: string;
-   indexAlias?: string;
+interface RepeaterProps extends PureContainerProps {
+   records: RecordsProp;
+   recordName?: RecordAlias;
+   recordAlias?: RecordAlias;
+   indexName?: RecordAlias;
+   indexAlias?: RecordAlias;
    cached?: boolean;
 
    /** Indicate that parent store data should not be mutated. */
@@ -15,22 +25,22 @@ interface RepeaterProps extends Cx.PureContainerProps {
    /** Indicate that record stores should not be mutated. */
    sealed?: boolean;
 
-   sorters?: Cx.SortersProp;
+   sorters?: SortersProp;
 
    /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
-   sortField?: Cx.StringProp;
+   sortField?: StringProp;
 
-   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Deafults to `"ASC"`. */
-   sortDirection?: Cx.StringProp;
+   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
+   sortDirection?: StringProp;
 
    /** Parameters that affect filtering */
-   filterParams?: Cx.StructuredProp;
+   filterParams?: StructuredProp;
 
    /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance: Instance) => (record: Cx.Record) => boolean;
+   onCreateFilter?: (filterParams: any, instance: Instance) => (record: Record) => boolean;
 
    /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
-   sortOptions?: Cx.CollatorOptions
+   sortOptions?: CollatorOptions;
 }
 
-export class Repeater extends Cx.Widget<RepeaterProps> {}
+export class Repeater extends Widget<RepeaterProps> {}

package/src/ui/Restate.spec.js

@@ -350,7 +350,6 @@ describe("Restate", () => {
       let store = new Store();
       store.subscribe(() => {
          changed = true;
-         console.log("CHANGED");
       });
 
       const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);

package/src/ui/adapter/ArrayAdapter.d.ts

@@ -1,17 +1,16 @@
-import {DataAdapter} from './DataAdapter';
-import {Binding} from "../../data/Binding";
-import {Ref} from "../../data/Ref";
+import { AccessorChain, Prop } from "../../core";
+import { Accessor } from "../../data/getAccessor";
+import { DataAdapter } from "./DataAdapter";
 
-interface Accessor {
-   binding: Binding,
-   ref: Ref
-}
-
-interface Config {
+interface ArrayAdapterConfig {
    immutable?: boolean;
    sealed?: boolean;
+   recordsBinding?: Prop<any[]>;
+   recordsAccessor?: Accessor;
+   recordName: string | AccessorChain<any>;
+   indexName: string | AccessorChain<any>;
 }
 
 export class ArrayAdapter extends DataAdapter {
-   constructor(config: Config);
+   constructor(config: ArrayAdapterConfig);
 }

package/src/ui/adapter/ArrayAdapter.js

@@ -1,22 +1,23 @@
-import { DataAdapter } from './DataAdapter';
-import { ReadOnlyDataView } from '../../data/ReadOnlyDataView';
-import { sorter } from '../../data/comparer';
-import { isArray } from '../../util/isArray';
+import { DataAdapter } from "./DataAdapter";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { sorter } from "../../data/comparer";
+import { isArray } from "../../util/isArray";
 import { ArrayElementView } from "../../data/ArrayElementView";
 import { getAccessor } from "../../data/getAccessor";
 import { Culture } from "../Culture";
-import { isDefined } from '../../util';
-
+import { isDefined } from "../../util";
 
 export class ArrayAdapter extends DataAdapter {
-
    init() {
       this.recordsAccessor = getAccessor(this.recordsBinding ? this.recordsBinding : this.recordsAccessor);
+
+      //resolve accessor chains
+      this.recordName = this.recordName.toString();
+      this.indexName = this.indexName.toString();
    }
 
    initInstance(context, instance) {
-      if (!instance.recordStoreCache)
-         instance.recordStoreCache = new WeakMap();
+      if (!instance.recordStoreCache) instance.recordStoreCache = new WeakMap();
       if (!instance.recordsAccessor && this.recordsAccessor) {
          instance.recordsAccessor = this.recordsAccessor.bindInstance
             ? this.recordsAccessor.bindInstance(instance)
@@ -25,8 +26,7 @@ export class ArrayAdapter extends DataAdapter {
    }
 
    getRecords(context, instance, records, parentStore) {
-      if (!instance.recordStoreCache)
-         this.initInstance(context, instance);
+      if (!instance.recordStoreCache) this.initInstance(context, instance);
 
       return this.mapRecords(context, instance, records, parentStore, instance.recordsAccessor);
    }
@@ -34,22 +34,18 @@ export class ArrayAdapter extends DataAdapter {
    mapRecords(context, instance, records, parentStore, recordsAccessor) {
       let result = [];
 
-      if (!instance.recordStoreCache)
-         this.initInstance(context, instance);
+      if (!instance.recordStoreCache) this.initInstance(context, instance);
 
       if (isArray(records))
          records.forEach((data, index) => {
-
-            if (this.filterFn && !this.filterFn(data))
-               return;
+            if (this.filterFn && !this.filterFn(data)) return;
 
             let record = this.mapRecord(context, instance, data, parentStore, recordsAccessor, index);
 
             result.push(record);
          });
 
-      if (this.sorter)
-         result = this.sorter(result);
+      if (this.sorter) result = this.sorter(result);
 
       return result;
    }
@@ -66,7 +62,7 @@ export class ArrayAdapter extends DataAdapter {
                recordAlias: this.recordName,
                indexAlias: this.indexName,
                immutable: this.immutable,
-               sealed: this.sealed
+               sealed: this.sealed,
             });
          else {
             recordStore.setStore(parentStore);
@@ -78,25 +74,24 @@ export class ArrayAdapter extends DataAdapter {
                store: parentStore,
                data: {
                   [this.recordName]: data,
-                  [this.indexName]: index
+                  [this.indexName]: index,
                },
                immutable: this.immutable,
-               sealed: this.sealed
+               sealed: this.sealed,
             });
          else {
             recordStore.setStore(parentStore);
          }
       }
 
-      if (typeof data == 'object')
-         instance.recordStoreCache.set(data, recordStore);
+      if (typeof data == "object") instance.recordStoreCache.set(data, recordStore);
 
       return {
          store: recordStore,
          index: index,
          data: data,
-         type: 'data',
-         key: this.keyField ? data[this.keyField] : index
+         type: "data",
+         key: this.keyField ? data[this.keyField] : index,
       };
    }
 
@@ -114,21 +109,19 @@ export class ArrayAdapter extends DataAdapter {
          let dataAccessor;
 
          //if all sorters are based on record fields access data directly (faster)
-         if (sorters.every(x => x.field && x.value == null)) {
-            dataAccessor = x => x.data;
-            fieldValueMapper = x => ({ bind: x.field });
-         }
-         else {
-            dataAccessor = x => x.store.getData();
-            fieldValueMapper = x => ({ bind: this.recordName + '.' + x.field });
+         if (sorters.every((x) => x.field && x.value == null)) {
+            dataAccessor = (x) => x.data;
+            fieldValueMapper = (x) => ({ bind: x.field });
+         } else {
+            dataAccessor = (x) => x.store.getData();
+            fieldValueMapper = (x) => ({ bind: this.recordName + "." + x.field });
          }
          this.sorter = sorter(
-            sorters.map(x => {
+            sorters.map((x) => {
                let s = Object.assign({}, x);
-               if (s.field && s.value == null)
-                  s.value = fieldValueMapper(s);
+               if (s.field && s.value == null) s.value = fieldValueMapper(s);
                if (!s.comparer)
-                  s.comparer = this.getComparer(isDefined(s.sortOptions) ? s.sortOptions : this.sortOptions)
+                  s.comparer = this.getComparer(isDefined(s.sortOptions) ? s.sortOptions : this.sortOptions);
                return s;
             }),
             dataAccessor
@@ -146,4 +139,4 @@ export class ArrayAdapter extends DataAdapter {
 ArrayAdapter.prototype.immutable = false;
 ArrayAdapter.prototype.sealed = false;
 
-ArrayAdapter.autoInit = true;
+ArrayAdapter.autoInit = true;

package/src/ui/bind.d.ts

@@ -1,3 +1,4 @@
-import * as Cx from '../core';
+import { Binding, AccessorChain } from "../core";
 
-export function bind(path: string, defaultValue?: any) : Cx.Binding;
+export function bind(path: string, defaultValue?: any): Binding;
+export function bind(chain: AccessorChain<any>, defaultValue?: any): Binding;

package/src/ui/bind.js

@@ -1,6 +1,7 @@
 export function bind(path, defaultValue) {
    return {
-      bind: path,
-      defaultValue
-   }
+      //toString will ensure chain accessors are converted to strings
+      bind: path.toString(),
+      defaultValue,
+   };
 }

package/src/ui/expr.d.ts

@@ -1,3 +1,24 @@
-import * as Cx from '../core';
+import { AccessorChain, Selector, Expr } from "../core";
 
-export function expr(code: string) : Cx.Binding;
+export function expr(code: string): Expr;
+export function expr<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Selector<R>;
+export function expr<V1, V2, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   compute: (v1: V1, v2: V2) => R
+): Selector<R>;
+
+export function expr<V1, V2, V3, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   arg3: AccessorChain<V3>,
+   compute: (v1: V1, v2: V2, v3: V3) => R
+): Selector<R>;
+
+export function expr<V1, V2, V3, V4, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   arg3: AccessorChain<V3>,
+   arg4: AccessorChain<V4>,
+   compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R
+): Selector<R>;

package/src/ui/expr.js

@@ -1,5 +1,17 @@
+import { Binding } from "../data/Binding";
+import { isString } from "../util/isString";
+
 export function expr(text) {
-   return {
-      expr: text
-   }
-}
+   if (isString(text))
+      return {
+         expr: text,
+      };
+
+   let getters = [];
+   let compute = arguments[arguments.length - 1];
+   for (let i = 0; i < arguments.length - 1; i++) getters.push(Binding.get(arguments[i]).value);
+   return (data) => {
+      let argv = getters.map((g) => g(data));
+      return compute.apply(this, argv);
+   };
+}

package/src/widgets/AccessorBindings.spec.tsx

@@ -0,0 +1,66 @@
+import assert from "assert";
+import reactTestRenderer from "react-test-renderer";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+import { Store } from "../data/Store";
+import { expr } from "../ui";
+import { Cx } from "../ui/Cx";
+import { HtmlElement } from "./HtmlElement";
+
+let DummyHack = HtmlElement;
+
+interface Model {
+   $page: {
+      text?: string;
+      a?: number;
+      b?: number;
+   };
+}
+
+let { $page } = createAccessorModelProxy<Model>();
+
+describe("Accessors", () => {
+   it("work as regular bindings", () => {
+      let widget = (
+         <cx>
+            <div text={$page.text} />
+         </cx>
+      );
+
+      let store = new Store<Model>({
+         data: {
+            $page: {
+               text: "Test",
+            },
+         },
+      });
+
+      const component = reactTestRenderer.create(<Cx widget={widget} store={store} />);
+
+      let tree = component.toJSON();
+      assert(tree.type === "div");
+      assert.deepStrictEqual(tree.children, ["Test"]);
+   });
+
+   it("support expressions", () => {
+      let widget = (
+         <cx>
+            <div text={expr($page.a, $page.b, (a, b) => a + b)} />
+         </cx>
+      );
+
+      let store = new Store<Model>({
+         data: {
+            $page: {
+               a: 1,
+               b: 3,
+            },
+         },
+      });
+
+      const component = reactTestRenderer.create(<Cx widget={widget} store={store} />);
+
+      let tree = component.toJSON();
+      assert(tree.type === "div");
+      assert.deepStrictEqual(tree.children, ["4"]);
+   });
+});

package/src/widgets/HtmlElement.d.ts

@@ -11,7 +11,7 @@ interface HtmlElementProps extends Cx.HtmlElementProps {
    tag?: string;
 
    /** HTML to be injected into the element. */
-   html?: string;
+   html?: Cx.StringProp;
 
    styled?: boolean;
 

package/src/widgets/List.d.ts

@@ -1,37 +1,49 @@
-import { Instance } from "./../ui/Instance.d";
-import * as Cx from "../core";
-import { PropertySelection, KeySelection } from "../ui/selection";
-import { Instance } from "../ui/Instance";
-
-interface ListProps extends Cx.StyledContainerProps {
+import {
+   BooleanProp,
+   ClassProp,
+   CollatorOptions,
+   Config,
+   Record,
+   RecordAlias,
+   RecordsProp,
+   SortersProp,
+   StringProp,
+   StructuredProp,
+   StyledContainerProps,
+   StyleProp,
+   Widget,
+} from "../core";
+import { Instance } from "./../ui/Instance";
+
+interface ListProps extends StyledContainerProps {
    /** An array of records to be displayed in the list. */
-   records?: Cx.RecordsProp;
+   records?: RecordsProp;
 
    /** Used for sorting the list. */
-   sorters?: Cx.SortersProp;
+   sorters?: SortersProp;
 
    /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
-   sortField?: Cx.StringProp;
+   sortField?: StringProp;
 
-   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Deafults to `"ASC"`. */
-   sortDirection?: Cx.StringProp;
+   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
+   sortDirection?: StringProp;
 
    /** CSS style that will be applied to all list items. */
-   itemStyle?: Cx.StyleProp;
+   itemStyle?: StyleProp;
 
    /** CSS class that will be applied to all list items. */
-   itemClass?: Cx.ClassProp;
+   itemClass?: ClassProp;
 
    /** CSS class that will be applied to all list items. */
-   itemClassName?: Cx.ClassProp;
+   itemClassName?: ClassProp;
 
-   emptyText?: Cx.StringProp;
+   emptyText?: StringProp;
 
    /** Grouping configuration. */
-   grouping?: Cx.Config;
+   grouping?: Config;
 
-   recordName?: string;
-   indexName?: string;
+   recordName?: RecordAlias;
+   indexName?: RecordAlias;
 
    /** Base CSS class to be applied to the element. Defaults to 'list'. */
    baseClass?: string;
@@ -42,22 +54,22 @@ interface ListProps extends Cx.StyledContainerProps {
    cached?: boolean;
 
    /** Selection configuration. */
-   selection?: Cx.Config;
+   selection?: Config;
 
    /** Parameters that affect filtering */
-   filterParams?: Cx.StructuredProp;
+   filterParams?: StructuredProp;
 
    /** Callback to create a filter function for given filter params. */
-   onCreateFilter?: (filterParams: any, instance: Instance) => (record: Cx.Record) => boolean;
+   onCreateFilter?: (filterParams: any, instance: Instance) => (record: Record) => boolean;
 
    /** Scrolls selection into the view. Default value is false. */
    scrollSelectionIntoView?: boolean;
 
    /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
-   sortOptions?: Cx.CollatorOptions;
+   sortOptions?: CollatorOptions;
 
    /** Parameter used for disabling specific items in the list. */
-   itemDisabled?: Cx.BooleanProp;
+   itemDisabled?: BooleanProp;
 
    /** Lists in this mode perform selection automatically without offering cursor navigation. */
    selectMode?: boolean;
@@ -69,4 +81,4 @@ interface ListProps extends Cx.StyledContainerProps {
    onScroll?: (event: Event, instance: Instance) => void;
 }
 
-export class List extends Cx.Widget<ListProps> {}
+export class List extends Widget<ListProps> {}

package/src/widgets/form/ValidationGroup.spec.js

@@ -21,7 +21,7 @@ describe("ValidationGroup", () => {
 
       let store = new Store();
 
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe />);
+      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
 
       let tree = component.toJSON();
       assert.equal(tree.type, "div");