cx 25.4.1 → 25.5.0

package/src/ui/adapter/ArrayAdapter.js

@@ -1,142 +1,152 @@
-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";
-
-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.recordsAccessor && this.recordsAccessor) {
-         instance.recordsAccessor = this.recordsAccessor.bindInstance
-            ? this.recordsAccessor.bindInstance(instance)
-            : this.recordsAccessor;
-      }
-   }
-
-   getRecords(context, instance, records, parentStore) {
-      if (!instance.recordStoreCache) this.initInstance(context, instance);
-
-      return this.mapRecords(context, instance, records, parentStore, instance.recordsAccessor);
-   }
-
-   mapRecords(context, instance, records, parentStore, recordsAccessor) {
-      let result = [];
-
-      if (!instance.recordStoreCache) this.initInstance(context, instance);
-
-      if (isArray(records))
-         records.forEach((data, index) => {
-            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);
-
-      return result;
-   }
-
-   mapRecord(context, instance, data, parentStore, recordsAccessor, index) {
-      let recordStore = instance.recordStoreCache.get(data);
-
-      if (recordsAccessor) {
-         if (!recordStore)
-            recordStore = new ArrayElementView({
-               store: parentStore,
-               arrayAccessor: recordsAccessor,
-               itemIndex: index,
-               recordAlias: this.recordName,
-               indexAlias: this.indexName,
-               immutable: this.immutable,
-               sealed: this.sealed,
-            });
-         else {
-            recordStore.setStore(parentStore);
-            recordStore.setIndex(index);
-         }
-      } else {
-         if (!recordStore)
-            recordStore = new ReadOnlyDataView({
-               store: parentStore,
-               data: {
-                  [this.recordName]: data,
-                  [this.indexName]: index,
-               },
-               immutable: this.immutable,
-               sealed: this.sealed,
-            });
-         else {
-            recordStore.setStore(parentStore);
-         }
-      }
-
-      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,
-      };
-   }
-
-   setFilter(filterFn) {
-      this.filterFn = filterFn;
-   }
-
-   getComparer(sortOptions) {
-      return sortOptions ? Culture.getComparer(sortOptions) : null;
-   }
-
-   buildSorter(sorters) {
-      if (isArray(sorters) && sorters.length > 0) {
-         let fieldValueMapper;
-         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 });
-         }
-         this.sorter = sorter(
-            sorters.map((x) => {
-               let s = Object.assign({}, x);
-               if (s.field && s.value == null) s.value = fieldValueMapper(s);
-               if (!s.comparer)
-                  s.comparer = this.getComparer(isDefined(s.sortOptions) ? s.sortOptions : this.sortOptions);
-               return s;
-            }),
-            dataAccessor
-         );
-      } else {
-         this.sorter = null;
-      }
-   }
-
-   sort(sorters) {
-      this.buildSorter(sorters);
-   }
-}
-
-ArrayAdapter.prototype.immutable = false;
-ArrayAdapter.prototype.sealed = false;
-
-ArrayAdapter.autoInit = true;
+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";
+
+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();
+         instance.cacheByKey = {};
+      }
+
+      if (!instance.recordsAccessor && this.recordsAccessor) {
+         instance.recordsAccessor = this.recordsAccessor.bindInstance
+            ? this.recordsAccessor.bindInstance(instance)
+            : this.recordsAccessor;
+      }
+   }
+
+   getRecords(context, instance, records, parentStore) {
+      if (!instance.recordStoreCache) this.initInstance(context, instance);
+
+      return this.mapRecords(context, instance, records, parentStore, instance.recordsAccessor);
+   }
+
+   mapRecords(context, instance, records, parentStore, recordsAccessor) {
+      let result = [];
+
+      if (!instance.recordStoreCache) this.initInstance(context, instance);
+
+      if (isArray(records))
+         records.forEach((data, index) => {
+            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);
+
+      return result;
+   }
+
+   mapRecord(context, instance, data, parentStore, recordsAccessor, index) {
+      let key = this.cacheByKeyField && this.keyField ? data[this.keyField] : null;
+      let recordStore = key != null ? instance.cacheByKey[key] : instance.recordStoreCache.get(data);
+
+      if (recordsAccessor) {
+         if (!recordStore)
+            recordStore = new ArrayElementView({
+               store: parentStore,
+               arrayAccessor: recordsAccessor,
+               itemIndex: index,
+               recordAlias: this.recordName,
+               indexAlias: this.indexName,
+               immutable: this.immutable,
+               sealed: this.sealed,
+            });
+         else {
+            recordStore.setStore(parentStore);
+            recordStore.setIndex(index);
+         }
+      } else {
+         if (!recordStore)
+            recordStore = new ReadOnlyDataView({
+               store: parentStore,
+               data: {
+                  [this.recordName]: data,
+                  [this.indexName]: index,
+               },
+               immutable: this.immutable,
+               sealed: this.sealed,
+            });
+         else {
+            recordStore.setStore(parentStore);
+            recordStore.setData(data);
+         }
+      }
+
+      // cache by the key or by data reference
+      if (key != null) instance.cacheByKey[key] = recordStore;
+      else instance.recordStoreCache.set(data, recordStore);
+
+      return {
+         store: recordStore,
+         index: index,
+         data: data,
+         type: "data",
+         key: this.keyField ? data[this.keyField] : index,
+      };
+   }
+
+   setFilter(filterFn) {
+      this.filterFn = filterFn;
+   }
+
+   getComparer(sortOptions) {
+      return sortOptions ? Culture.getComparer(sortOptions) : null;
+   }
+
+   buildSorter(sorters) {
+      if (isArray(sorters) && sorters.length > 0) {
+         let fieldValueMapper;
+         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 });
+         }
+         this.sorter = sorter(
+            sorters.map((x) => {
+               let s = Object.assign({}, x);
+               if (s.field && s.value == null) s.value = fieldValueMapper(s);
+               if (!s.comparer)
+                  s.comparer = this.getComparer(isDefined(s.sortOptions) ? s.sortOptions : this.sortOptions);
+               return s;
+            }),
+            dataAccessor,
+         );
+      } else {
+         this.sorter = null;
+      }
+   }
+
+   sort(sorters) {
+      this.buildSorter(sorters);
+   }
+}
+
+ArrayAdapter.prototype.immutable = false;
+ArrayAdapter.prototype.sealed = false;
+ArrayAdapter.prototype.keyField = null;
+ArrayAdapter.prototype.cacheByKeyField = true;
+
+ArrayAdapter.autoInit = true;

package/src/ui/adapter/TreeAdapter.js

@@ -1,100 +1,101 @@
-import { getAccessor } from "../../data/getAccessor";
-import { isArray } from "../../util/isArray";
-import { ArrayAdapter } from "./ArrayAdapter";
-
-export class TreeAdapter extends ArrayAdapter {
-   init() {
-      super.init();
-      this.childrenAccessor = getAccessor({ bind: `${this.recordName}.${this.childrenField}` });
-
-      if (this.restoreExpandedNodesOnLoad) {
-         if (!this.keyField)
-            throw new Error(
-               "Stateful tree adapter requires keyField property to be specified on either Grid or data adapter."
-            );
-
-         this.expandedState = {
-            next: new Set(),
-         };
-      }
-   }
-
-   mapRecords(context, instance, data, parentStore, recordsAccessor) {
-      let nodes = super.mapRecords(context, instance, data, parentStore, recordsAccessor);
-      let result = [];
-
-      if (this.restoreExpandedNodesOnLoad) {
-         this.expandedState = {
-            current: this.expandedState.next,
-            next: new Set(),
-         };
-      }
-
-      this.processList(context, instance, 0, "", nodes, result);
-
-      return result;
-   }
-
-   processList(context, instance, level, parentKey, nodes, result) {
-      nodes.forEach((record) => {
-         record.key = parentKey + record.key;
-         this.processNode(context, instance, level, result, record);
-      });
-   }
-
-   processNode(context, instance, level, result, record) {
-      let isHiddenRootNode = level == 0 && this.hideRootNodes;
-      if (!isHiddenRootNode) result.push(record);
-      let { data, store } = record;
-      data.$level = this.hideRootNodes ? level - 1 : level;
-      if (!data[this.leafField]) {
-         if (this.restoreExpandedNodesOnLoad && data[this.expandedField] == null)
-            data[this.expandedField] = this.expandedState.current.has(data[this.keyField]);
-
-         if (data[this.expandedField] || isHiddenRootNode) {
-            if (this.restoreExpandedNodesOnLoad) this.expandedState.next.add(data[this.keyField]);
-
-            if (data[this.childrenField]) {
-               let childNodes = super.mapRecords(
-                  context,
-                  instance,
-                  data[this.childrenField],
-                  store,
-                  this.childrenAccessor
-               );
-               this.processList(context, instance, level + 1, record.key + ":", childNodes, result);
-            } else if (this.load && !data[this.loadedField] && !data[this.loadingField]) {
-               store.set(`${this.recordName}.${this.loadingField}`, true);
-               let response = this.load(context, instance, data);
-               Promise.resolve(response)
-                  .then((children) => {
-                     store.set(`${this.recordName}.${this.childrenField}`, children);
-                     store.set(`${this.recordName}.${this.loadedField}`, true);
-                     store.set(`${this.recordName}.${this.loadingField}`, false);
-                  })
-                  .catch((response) => {
-                     store.set(`${this.recordName}.${this.loadingField}`, false);
-                     if (this.onLoadError) this.onLoadError(response);
-                  });
-            }
-         } else data[this.expandedField] = false;
-      }
-   }
-
-   sort(sorters) {
-      if (this.foldersFirst) {
-         if (!sorters || !isArray(sorters)) sorters = [];
-         sorters = [{ field: this.leafField, direction: "ASC" }, ...sorters];
-      }
-      super.sort(sorters);
-   }
-}
-
-TreeAdapter.prototype.childrenField = "$children";
-TreeAdapter.prototype.expandedField = "$expanded";
-TreeAdapter.prototype.leafField = "$leaf";
-TreeAdapter.prototype.loadingField = "$loading";
-TreeAdapter.prototype.loadedField = "$loaded";
-TreeAdapter.prototype.foldersFirst = true;
-TreeAdapter.prototype.isTreeAdapter = true;
-TreeAdapter.prototype.hideRootNodes = false;
+import { getAccessor } from "../../data/getAccessor";
+import { isArray } from "../../util/isArray";
+import { ArrayAdapter } from "./ArrayAdapter";
+
+export class TreeAdapter extends ArrayAdapter {
+   init() {
+      super.init();
+      this.childrenAccessor = getAccessor({ bind: `${this.recordName}.${this.childrenField}` });
+
+      if (this.restoreExpandedNodesOnLoad) {
+         if (!this.keyField)
+            throw new Error(
+               "Stateful tree adapter requires keyField property to be specified on either Grid or data adapter.",
+            );
+
+         this.expandedState = {
+            next: new Set(),
+         };
+      }
+   }
+
+   mapRecords(context, instance, data, parentStore, recordsAccessor) {
+      let nodes = super.mapRecords(context, instance, data, parentStore, recordsAccessor);
+      let result = [];
+
+      if (this.restoreExpandedNodesOnLoad) {
+         this.expandedState = {
+            current: this.expandedState.next,
+            next: new Set(),
+         };
+      }
+
+      this.processList(context, instance, 0, "", nodes, result);
+
+      return result;
+   }
+
+   processList(context, instance, level, parentKey, nodes, result) {
+      nodes.forEach((record) => {
+         record.key = parentKey + record.key;
+         this.processNode(context, instance, level, result, record);
+      });
+   }
+
+   processNode(context, instance, level, result, record) {
+      let isHiddenRootNode = level == 0 && this.hideRootNodes;
+      if (!isHiddenRootNode) result.push(record);
+      let { data, store } = record;
+      data.$level = this.hideRootNodes ? level - 1 : level;
+      if (!data[this.leafField]) {
+         if (this.restoreExpandedNodesOnLoad && data[this.expandedField] == null)
+            data[this.expandedField] = this.expandedState.current.has(data[this.keyField]);
+
+         if (data[this.expandedField] || isHiddenRootNode) {
+            if (this.restoreExpandedNodesOnLoad) this.expandedState.next.add(data[this.keyField]);
+
+            if (data[this.childrenField]) {
+               let childNodes = super.mapRecords(
+                  context,
+                  instance,
+                  data[this.childrenField],
+                  store,
+                  this.childrenAccessor,
+               );
+               this.processList(context, instance, level + 1, record.key + ":", childNodes, result);
+            } else if (this.load && !data[this.loadedField] && !data[this.loadingField]) {
+               store.set(`${this.recordName}.${this.loadingField}`, true);
+               let response = this.load(context, instance, data);
+               Promise.resolve(response)
+                  .then((children) => {
+                     store.set(`${this.recordName}.${this.childrenField}`, children);
+                     store.set(`${this.recordName}.${this.loadedField}`, true);
+                     store.set(`${this.recordName}.${this.loadingField}`, false);
+                  })
+                  .catch((response) => {
+                     store.set(`${this.recordName}.${this.loadingField}`, false);
+                     if (this.onLoadError) this.onLoadError(response);
+                  });
+            }
+         } else data[this.expandedField] = false;
+      }
+   }
+
+   sort(sorters) {
+      if (this.foldersFirst) {
+         if (!sorters || !isArray(sorters)) sorters = [];
+         sorters = [{ field: this.leafField, direction: "ASC" }, ...sorters];
+      }
+      super.sort(sorters);
+   }
+}
+
+TreeAdapter.prototype.childrenField = "$children";
+TreeAdapter.prototype.expandedField = "$expanded";
+TreeAdapter.prototype.leafField = "$leaf";
+TreeAdapter.prototype.loadingField = "$loading";
+TreeAdapter.prototype.loadedField = "$loaded";
+TreeAdapter.prototype.foldersFirst = true;
+TreeAdapter.prototype.isTreeAdapter = true;
+TreeAdapter.prototype.hideRootNodes = false;
+TreeAdapter.prototype.cacheByKeyField = false;

package/src/ui/createFunctionalComponent.d.ts

@@ -1 +1 @@
-export function createFunctionalComponent<T, X>(factory: (props: T) => X): (props: T) => X;
+export function createFunctionalComponent<T, X>(factory: (props: T) => X): (props: T) => X;

package/src/ui/createFunctionalComponent.js

@@ -1,5 +1,5 @@
-import { createComponentFactory, isComponentFactory } from '../util/Component';
-import { flattenProps } from '../ui/flattenProps';
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { flattenProps } from "../ui/flattenProps";
 import { PureContainer } from "./PureContainer";
 import { UseParentLayout } from "./layout/UseParentLayout";
 import { StoreProxy } from "../data/StoreProxy";
@@ -9,6 +9,7 @@ let currentInstance = null;
 
 class FunctionalComponent extends PureContainer {
    initInstance(context, instance) {
+      instance.store = instance.parentStore;
       this.clear();
       currentInstance = instance;
       this.add(this.childrenFactory(this.props));
@@ -18,49 +19,43 @@ class FunctionalComponent extends PureContainer {
    }
 
    explore(context, instance) {
-      if (this.layout)
-         this.layout.items = instance.content;
-      else
-         this.items = instance.content;
+      if (this.layout) this.layout.items = instance.content;
+      else this.items = instance.content;
       this.exploreItems(context, instance, instance.content);
       if (instance.computables) {
-         instance.computables.forEach(cb => cb(instance.store.getData()))
+         instance.computables.forEach((cb) => cb(instance.store.getData()));
       }
    }
 }
 
 export function createFunctionalComponent(factory) {
-   if (isComponentFactory(factory))
-      return factory;
+   if (isComponentFactory(factory)) return factory;
 
-   return createComponentFactory(
-      factory,
-      (props = {}) => {
-         let innerProps = flattenProps(props);
-         delete innerProps.visible;
-         delete innerProps.if;
-         delete innerProps.controller;
-         delete innerProps.layout;
-         delete innerProps.outerLayout;
-         delete innerProps.putInto;
-         delete innerProps.contentFor;
-         delete innerProps.jsxAttributes;
-         delete innerProps.$type;
-         delete innerProps.vdomKey;
+   return createComponentFactory(factory, (props = {}) => {
+      let innerProps = flattenProps(props);
+      delete innerProps.visible;
+      delete innerProps.if;
+      delete innerProps.controller;
+      delete innerProps.layout;
+      delete innerProps.outerLayout;
+      delete innerProps.putInto;
+      delete innerProps.contentFor;
+      delete innerProps.jsxAttributes;
+      delete innerProps.$type;
+      delete innerProps.vdomKey;
 
-         return {
-            type: FunctionalComponent,
-            visible: isDefined(props.if) ? props.if : isDefined(props.visible) ? props.visible : true,
-            layout: props.layout || UseParentLayout,
-            controller: props.controller,
-            outerLayout: props.outerLayout,
-            putInto: props.contentFor || props.putInto,
-            vdomKey: props.vdomKey,
-            childrenFactory: factory,
-            props: innerProps
-         };
-      }
-   )
+      return {
+         type: FunctionalComponent,
+         visible: isDefined(props.if) ? props.if : isDefined(props.visible) ? props.visible : true,
+         layout: props.layout || UseParentLayout,
+         controller: props.controller,
+         outerLayout: props.outerLayout,
+         putInto: props.contentFor || props.putInto,
+         vdomKey: props.vdomKey,
+         childrenFactory: factory,
+         props: innerProps,
+      };
+   });
 }
 
 export function getCurrentInstance() {

package/src/ui/layout/ContentPlaceholder.d.ts

@@ -1,19 +1,19 @@
-import * as Cx from "../../core";
-import { RenderingContext } from "../RenderingContext";
-
-interface ContentPlaceholderProps extends Cx.PureContainerProps {
-   name?: Cx.StringProp;
-
-   scoped?: boolean;
-
-   /* Set to true to allow all registered content elements to render inside the placeholder. Otherwise only one element is rendered. */
-   allowMultiple?: boolean;
-}
-
-export class ContentPlaceholder extends Cx.Widget<ContentPlaceholderProps> {}
-
-interface ContentPlaceholderScopeProps extends Cx.PureContainerProps {
-   name?: string | string[];
-}
-
-export class ContentPlaceholderScope extends Cx.Widget<ContentPlaceholderScopeProps> {}
+import * as Cx from "../../core";
+import { RenderingContext } from "../RenderingContext";
+
+interface ContentPlaceholderProps extends Cx.PureContainerProps {
+   name?: Cx.StringProp;
+
+   scoped?: boolean;
+
+   /* Set to true to allow all registered content elements to render inside the placeholder. Otherwise only one element is rendered. */
+   allowMultiple?: boolean;
+}
+
+export class ContentPlaceholder extends Cx.Widget<ContentPlaceholderProps> {}
+
+interface ContentPlaceholderScopeProps extends Cx.PureContainerProps {
+   name?: string | string[];
+}
+
+export class ContentPlaceholderScope extends Cx.Widget<ContentPlaceholderScopeProps> {}