cx 25.11.1 → 26.0.2

package/src/ui/layout/exploreChildren.ts

@@ -0,0 +1,38 @@
+import { CxChild, RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import { View } from "../../data/View";
+
+export function exploreChildren(
+   context: RenderingContext,
+   instance: Instance,
+   children: CxChild[],
+   previousResult: any[] | null,
+   key: any,
+   store: View,
+): any[] {
+   let newChildren = previousResult || [];
+   let oldChildren = previousResult || newChildren;
+   let identical = previousResult ? 0 : -1;
+
+   for (let c = 0; c < children.length; c++) {
+      let cell = (instance as any).getChild(context, children[c], key, store);
+
+      if ((cell as any).checkVisible(context)) {
+         if (identical >= 0) {
+            if (cell == oldChildren[identical]) identical++;
+            else {
+               newChildren = newChildren.slice(0, identical);
+               identical = -1;
+               newChildren.push(cell);
+            }
+         } else newChildren.push(cell);
+
+         (context as any).exploreStack.push(cell);
+         if ((cell as any).needsExploreCleanup) (context as any).exploreStack.push(cell);
+      }
+   }
+
+   if (identical >= 0 && identical != newChildren.length) newChildren = newChildren.slice(0, identical);
+
+   return newChildren;
+}

package/src/ui/selection/KeySelection.ts

@@ -0,0 +1,165 @@
+import { Selection, SelectionConfig, SelectionOptions } from "./Selection";
+import { isArray } from "../../util/isArray";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { shallowEquals } from "../../util/shallowEquals";
+import { View } from "../../data/View";
+import { Prop } from "../Prop";
+
+export interface KeySelectionConfig extends SelectionConfig {
+   /** Binding path for selection state. */
+   bind?: string;
+
+   /** Set to `true` to allow multiple selection. */
+   multiple?: boolean;
+
+   /** Name of the field used as a key. Default is `id`. */
+   keyField?: string;
+
+   /** Storage format. Can be `array` or `hash`. Default is `array`. */
+   storage?: string;
+
+   /** Selection binding configuration. */
+   selection?: Prop<any>;
+
+   /** Record binding. */
+   record?: Prop<any>;
+
+   /** Index binding. */
+   index?: Prop<any>;
+}
+
+export class KeySelection extends Selection {
+   declare selection: any;
+   declare key: any;
+   declare keyField: string | false;
+   declare keyFields: string[];
+   declare initialized: boolean;
+   declare storage: string;
+
+   constructor(config?: KeySelectionConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.bind && !this.selection)
+         this.selection = {
+            bind: this.bind,
+         };
+
+      if (!this.selection) this.selection = {};
+
+      if (isArray(this.keyFields)) this.keyField = false;
+
+      this.initialized = true;
+   }
+
+   getKey(record: any): any {
+      if (this.key != null) return this.key;
+
+      if (!record) return null;
+
+      if (this.keyField) return record[this.keyField];
+
+      var key: any = {};
+      this.keyFields!.forEach((k) => {
+         key[k] = record[k];
+      });
+      return key;
+   }
+
+   areKeysEqual(key1: any, key2: any): boolean {
+      if (this.keyField) return key1 === key2 && key1 != null;
+
+      if (!key1 || !key2) return false;
+
+      return !this.keyFields!.some((k) => key1[k] !== key2[k]);
+   }
+
+   declareData(...args: any[]): any {
+      return super.declareData(
+         {
+            $selection: { structured: true },
+         },
+         ...args,
+      );
+   }
+
+   configureWidget(widget: any): any {
+      if (!this.initialized) this.init();
+
+      widget.$selection = Object.assign(widget.$selection || {}, {
+         keys: this.selection,
+      });
+
+      return super.configureWidget(widget);
+   }
+
+   selectMultiple(store: View, records: any[], indexes: any[], { toggle, add }: SelectionOptions = {}): any {
+      if (!this.selection.bind) return false;
+
+      if (this.toggle) toggle = true;
+
+      if (!isNonEmptyArray(records)) {
+         if (!toggle && !add) return store.delete(this.selection.bind);
+         return false;
+      }
+
+      var keys = records.map((record) => this.getKey(record));
+      var selection = store.get(this.selection.bind);
+      if (!this.multiple) {
+         let key = keys[0];
+         if (!toggle || !this.areKeysEqual(selection, key)) store.set(this.selection.bind, key);
+         else store.delete(this.selection.bind);
+      } else {
+         if (this.storage == "array") {
+            if (!isArray(selection) || (!toggle && !add)) this.updateSelectionWithShallowEqualsCheck(store, keys);
+            else {
+               let newSelection = [...selection];
+               keys.forEach((key) => {
+                  let exists = selection.some((x: any) => this.areKeysEqual(x, key));
+                  if (!exists) newSelection.push(key);
+                  else if (toggle) newSelection = newSelection.filter((x: any) => !this.areKeysEqual(x, key)); //TODO: optimize
+               });
+               this.updateSelectionWithShallowEqualsCheck(store, newSelection);
+            }
+         } else if (this.storage == "hash") {
+            let newSelection = toggle ? { ...selection } : {};
+            keys.forEach((key) => {
+               newSelection[key] = !newSelection[key];
+            });
+            this.updateSelectionWithShallowEqualsCheck(store, newSelection);
+         }
+      }
+   }
+
+   updateSelectionWithShallowEqualsCheck(store: View, newSelection: any): void {
+      store.update(this.selection.bind, (data: any) => (shallowEquals(data, newSelection) ? data : newSelection));
+   }
+
+   getIsSelectedDelegate(store: View): (record: any, index: any) => boolean {
+      if (!this.selection.bind) return () => false;
+
+      var selection = store.get(this.selection.bind);
+
+      if (this.multiple) {
+         if (this.storage == "array") {
+            selection = selection || [];
+            return (record, index) => selection.some((k: any) => this.areKeysEqual(this.getKey(record), k));
+         } else {
+            selection = selection || {};
+            return (record, index) => selection[this.getKey(record)];
+         }
+      } else return (record, index) => this.areKeysEqual(selection, this.getKey(record));
+   }
+
+   isSelected(store: View, record: any, index: any): boolean {
+      return this.getIsSelectedDelegate(store)(record, index);
+   }
+}
+
+KeySelection.prototype.multiple = false;
+KeySelection.prototype.keyField = "id";
+KeySelection.prototype.storage = "array";
+(KeySelection as any).autoInit = true;
+
+Selection.alias("key", KeySelection);

package/src/ui/selection/PropertySelection.ts

@@ -0,0 +1,87 @@
+import { Selection, SelectionOptions } from "./Selection";
+import { View } from "../../data/View";
+import { isAccessorChain } from "../../data/createAccessorModelProxy";
+import { Binding } from "../Prop";
+
+export interface PropertySelectionConfig {
+   /** Name of the field used to indicate selection. Default is `selected`. */
+   selectedField?: string;
+
+   /** Set to `true` to allow multiple selection. */
+   multiple?: boolean;
+
+   /** Name of the field used as a key. */
+   keyField?: string;
+
+   /** Record binding. */
+   record?: Binding;
+
+   /** Records binding. */
+   records?: Binding;
+
+   /** Index binding. */
+   index?: Binding;
+
+   /** Binding path for selection state. */
+   bind?: string;
+}
+
+export class PropertySelection extends Selection {
+   declare records: any;
+   declare selectedField: string;
+
+   constructor(config?: PropertySelectionConfig) {
+      super(config);
+   }
+
+   selectMultiple(store: View, records: any[], indexes: any[], { toggle, add }: SelectionOptions = {}): any {
+      if (this.toggle) toggle = true;
+
+      if (!this.records) return false;
+
+      let path = isAccessorChain(this.records) ? this.records.toString() : this.records.bind;
+      if (!path) return false;
+
+      let array = store.get(path);
+      let newArray = [...array];
+      let dirty = false;
+
+      if (!toggle && !add) {
+         newArray.forEach((r, i) => {
+            if (r[this.selectedField]) {
+               let nr = Object.assign({}, r);
+               nr[this.selectedField] = false;
+               newArray[i] = nr;
+               dirty = true;
+            }
+         });
+      }
+
+      records.forEach((record, i) => {
+         let index = indexes[i];
+         let rec = newArray[index];
+         if (array[index] !== record) throw new Error("Stale data.");
+
+         let value = rec[this.selectedField];
+         let newValue = add ? true : toggle ? !value : true;
+
+         if (value == newValue) return;
+
+         let newRec = Object.assign({}, rec);
+         newRec[this.selectedField] = newValue;
+         newArray[index] = newRec;
+         dirty = true;
+      });
+
+      if (dirty) store.set(path, newArray);
+   }
+
+   isSelected(store: View, record: any, index: any): boolean {
+      return record && record[this.selectedField!];
+   }
+}
+
+PropertySelection.prototype.selectedField = "selected";
+PropertySelection.prototype.multiple = false;
+
+(Selection as any).alias("property", PropertySelection);

package/src/ui/selection/Selection.ts

@@ -0,0 +1,118 @@
+import { Component } from "../../util/Component";
+import { View } from "../../data/View";
+
+export interface SelectionOptions {
+   toggle?: boolean;
+   add?: boolean;
+}
+
+export interface SelectionConfig {
+   bind?: string;
+   record?: any;
+   index?: any;
+   toggle?: boolean;
+   multiple?: boolean;
+}
+
+export class Selection extends Component {
+   declare bind?: string;
+   declare record?: any;
+   declare index?: any;
+   declare toggle: boolean;
+   declare isDummy: boolean;
+   declare multiple: boolean;
+
+   constructor(config?: SelectionConfig) {
+      super(config);
+   }
+
+   isSelected(store: View, record: any, index: any): boolean {
+      return !!this.bind && store.get(this.bind) === record;
+   }
+
+   getIsSelectedDelegate(store: View): (record: any, index: any) => boolean {
+      return (record, index) => this.isSelected(store, record, index);
+   }
+
+   select(store: View, record: any, index: any, options?: SelectionOptions): any {
+      this.selectMultiple(store, [record], [index], options);
+   }
+
+   selectMultiple(store: View, records: any[], indexes: any[], options?: SelectionOptions): any {
+      //abstract
+   }
+
+   declareData(...args: any[]): any {
+      var declaration = {
+         $selection: { structured: true },
+      };
+
+      return Object.assign(declaration, ...args);
+   }
+
+   configureWidget(widget: any): any {
+      if (this.record || this.index) {
+         widget.$selection = Object.assign(widget.$selection || {}, {
+            record: this.record,
+            index: this.index,
+         });
+      }
+
+      return this.declareData();
+   }
+
+   selectInstance(instance: any, options?: SelectionOptions): any {
+      var { store, data } = instance;
+      if (!data.$selection)
+         throw new Error(
+            "Selection model not properly configured. Using the selectInstance method without specified record and index bindings.",
+         );
+      return this.select(store, data.$selection.record, data.$selection.index, options);
+   }
+
+   isInstanceSelected(instance: any): boolean {
+      var { store, data } = instance;
+      return data.$selection && this.isSelected(store, data.$selection.record, data.$selection.index);
+   }
+}
+
+Selection.prototype.toggle = false;
+
+Selection.namespace = "ui.selection.";
+
+export class SimpleSelection extends Selection {
+   isSelected(store: View, record: any, index: any): boolean {
+      return this.getIsSelectedDelegate(store)(record, index);
+   }
+
+   getIsSelectedDelegate(store: View): (record: any, index: any) => boolean {
+      var selection = this.bind && store.get(this.bind);
+      return (record, index) => record === selection;
+   }
+
+   selectMultiple(store: View, records: any[], index: any[]): void {
+      if (this.bind) store.set(this.bind, records[0]);
+   }
+}
+
+class DummySelection extends Selection {
+   isSelected(store: View, record: any, index: any): boolean {
+      return false;
+   }
+
+   selectMultiple(): void {
+      //dummy
+   }
+
+   selectInstance(): void {
+      //dummy
+   }
+}
+
+DummySelection.prototype.isDummy = true;
+
+Selection.factory = (name: any): Selection => {
+   if (typeof name == "object") return new SimpleSelection(name);
+
+   return new DummySelection();
+};

package/src/ui/tpl.ts

@@ -0,0 +1,5 @@
+export function tpl(text: string) {
+   return {
+      tpl: text
+   }
+}