cx 25.11.1 → 26.0.2

package/build/ui/Text.js

@@ -0,0 +1,21 @@
+import { Widget } from './Widget';
+export class Text extends Widget {
+    init() {
+        if (!this.value && (this.tpl || this.expr || this.bind))
+            this.value = {
+                tpl: this.tpl,
+                expr: this.expr,
+                bind: this.bind
+            };
+        super.init();
+    }
+    declareData(...args) {
+        super.declareData({
+            value: undefined
+        }, ...args);
+    }
+    render(context, { data }, key) {
+        return data.value != null ? data.value : '';
+    }
+}
+Widget.alias('text', Text);

package/build/ui/VDOM.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+import type { Component } from "react";
+import type { unstable_batchedUpdates, render, findDOMNode, createPortal, unstable_renderSubtreeIntoContainer, hydrate, unmountComponentAtNode } from "react-dom";
+import type { createRoot, hydrateRoot } from "react-dom/client";
+export interface VDOMType extends Omit<typeof React, "default"> {
+    allowRenderOutputCaching?: boolean;
+    Component: typeof Component;
+    DOM: {
+        unstable_batchedUpdates: typeof unstable_batchedUpdates;
+        render: typeof render;
+        findDOMNode: typeof findDOMNode;
+        createPortal: typeof createPortal;
+        createRoot: typeof createRoot;
+        hydrateRoot: typeof hydrateRoot;
+        hydrate: typeof hydrate;
+        unmountComponentAtNode: typeof unmountComponentAtNode;
+        unstable_renderSubtreeIntoContainer: typeof unstable_renderSubtreeIntoContainer;
+    };
+}
+export declare const VDOM: VDOMType;

package/build/ui/VDOM.js

@@ -0,0 +1,3 @@
+// @ts-expect-error
+import { VDOM as vdom } from "cx-react";
+export const VDOM = vdom;

package/build/ui/Widget.d.ts

@@ -0,0 +1,111 @@
+import { StructuredSelector } from "../data/StructuredSelector";
+import { Component, CreateConfig } from "../util/Component";
+import { CSS } from "./CSS";
+import { RenderingContext } from "./RenderingContext";
+import type { Controller, ControllerConfig, ControllerFactory } from "./Controller";
+import { BooleanProp, ClassProp, ModProp, StyleProp } from "./Prop";
+import { Instance } from "./Instance";
+export declare const VDOM: import("./VDOM").VDOMType;
+export type ControllerProp = CreateConfig<typeof Controller> | (ControllerConfig & {
+    type?: never;
+    $type?: never;
+}) | ControllerFactory;
+export interface WidgetConfig {
+    /** Visibility of the widget. Defaults to `true`. */
+    visible?: BooleanProp;
+    /** Visibility of the widget. Defaults to `true`. */
+    if?: BooleanProp;
+    /** Outer (wrapper) layout used to display the widget in. */
+    outerLayout?: unknown;
+    /** Inner layout used to display children inside the widget. */
+    layout?: unknown;
+    /** Name of the ContentPlaceholder that should be used to display the widget. */
+    contentFor?: string;
+    /** Name of the ContentPlaceholder that should be used to display the widget. */
+    putInto?: string;
+    /** Key that will be used as the key when rendering the React component.  */
+    vdomKey?: string;
+    /** Controller. */
+    controller?: ControllerProp;
+    onInit?(context: RenderingContext): void;
+    onExplore?(context: RenderingContext, instance: Instance): void;
+    onPrepare?(context: RenderingContext, instance: Instance): void;
+    onCleanup?(context: RenderingContext, instance: Instance): void;
+    onDestroy?(instance: Instance): void;
+}
+/** Style-related config properties for widgets that support styling. */
+export interface WidgetStyleConfig {
+    /**
+     * Additional CSS classes to be applied to the element.
+     * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+     */
+    class?: ClassProp;
+    /**
+     * Additional CSS classes to be applied to the element.
+     * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+     */
+    className?: ClassProp;
+    /** Style object applied to the element. */
+    style?: StyleProp;
+    /** Style object applied to the element. */
+    styles?: StyleProp;
+    /** Base CSS class to be applied to the element. For example, value 'button' will add a class 'cxb-button' to the element. */
+    baseClass?: string;
+    /** Appearance modifier. For example, mod="big" will add the CSS class .cxm-big to the block element. */
+    mod?: ModProp;
+}
+export declare abstract class Widget<Config extends WidgetConfig = WidgetConfig, InstanceType extends Instance = Instance> extends Component {
+    vdomKey?: string | number;
+    jsxSpread?: Record<string, any>[];
+    jsxAttributes?: string[];
+    styles?: any;
+    style?: any;
+    styled: boolean;
+    if?: any;
+    visible: boolean;
+    outerLayout?: Widget;
+    contentFor?: string;
+    putInto?: string;
+    isContent?: boolean;
+    CSS: typeof CSS;
+    baseClass?: string;
+    memoize: boolean;
+    controller?: Controller;
+    isPureContainer?: boolean;
+    useParentLayout?: boolean;
+    widgetId?: number;
+    initialized?: boolean;
+    components?: Record<string, any>;
+    helpers?: Record<string, any>;
+    selector?: StructuredSelector;
+    nameMap?: any;
+    version?: number;
+    onInit?: (context: RenderingContext, instance: Instance) => void;
+    onExplore?: (context: RenderingContext, instance: Instance) => void;
+    onPrepare?: (context: RenderingContext, instance: Instance) => void;
+    onCleanup?: (context: RenderingContext, instance: Instance) => void;
+    onDestroy?: (instance: Instance) => void;
+    exploreCleanup?(context: RenderingContext, instance: InstanceType): void;
+    prepareCleanup?(context: RenderingContext, instance: InstanceType): void;
+    cleanup?(context: RenderingContext, instance: InstanceType): void;
+    prepare?(context: RenderingContext, instance: InstanceType): void;
+    static optimizePrepare?: boolean;
+    constructor(config?: Config);
+    init(): void;
+    protected initComponents(...args: Record<string, any>[]): void;
+    protected initHelpers(...args: Record<string, any>[]): void;
+    protected declareData(...args: Record<string, any>[]): void;
+    protected prepareCSS(_context: RenderingContext, { data }: any): void;
+    prepareData(context: RenderingContext, instance: InstanceType): void;
+    initInstance(_context: RenderingContext, _instance: InstanceType): void;
+    initState(_context: RenderingContext, _instance: InstanceType): void;
+    checkVisible(_context: RenderingContext, _instance: InstanceType, data: any): boolean;
+    explore(context: RenderingContext, instance: InstanceType, data?: any): void;
+    render(context: RenderingContext, instance: InstanceType, key: string): any;
+    update(): void;
+    applyParentStore(instance: any): void;
+    static resetCounter(): void;
+}
+export declare function contentAppend(result: any[], w: any, prependSpace?: boolean): boolean;
+export declare function getContentArray(x: any): any[];
+export declare function getContent(x: any): any;

package/build/ui/Widget.js

@@ -0,0 +1,170 @@
+import { StructuredSelector } from "../data/StructuredSelector";
+import { Component } from "../util/Component";
+import { Console } from "../util/Console";
+import { isArray } from "../util/isArray";
+import { isDefined } from "../util/isDefined";
+import { isString } from "../util/isString";
+import { parseStyle } from "../util/parseStyle";
+import { CSS } from "./CSS";
+import { CSSHelper } from "./CSSHelper";
+import { VDOM as vdom } from "./VDOM";
+export const VDOM = vdom;
+let widgetId = 100;
+export class Widget extends Component {
+    // runtime values
+    widgetId;
+    initialized;
+    components;
+    helpers;
+    selector;
+    nameMap;
+    version;
+    static optimizePrepare;
+    constructor(config) {
+        super(config);
+        this.widgetId = widgetId++;
+        if (isArray(this.jsxSpread)) {
+            if (!this.jsxAttributes)
+                this.jsxAttributes = [];
+            this.jsxSpread.forEach((spread) => {
+                for (const key in spread) {
+                    this[key] = spread[key];
+                    this.jsxAttributes.push(key);
+                }
+            });
+        }
+    }
+    init() {
+        if (this.styles)
+            this.style = this.styles;
+        if (this.styled)
+            this.style = parseStyle(this.style);
+        else if (this.style) {
+            Console.warn("Components that allow use of the style attribute should set styled = true on their prototype. This will be an error in future versions.");
+            this.style = parseStyle(this.style);
+            this.styled = true;
+        }
+        if (typeof this.if !== "undefined")
+            this.visible = this.if;
+        this.declareData();
+        if (this.outerLayout) {
+            if (isArray(this.outerLayout))
+                throw new Error("Only single element outer layout is supported.");
+            //TODO: better handle the case when outer layout is an array. How to get around circular dependency to PureContainer
+            this.outerLayout = Widget.create(this.outerLayout, {});
+        }
+        if (this.contentFor)
+            this.putInto = this.contentFor;
+        if (this.putInto)
+            this.isContent = true;
+        if (isString(this.CSS))
+            this.CSS = CSSHelper.get(this.CSS);
+        this.initHelpers();
+        this.initComponents();
+        this.initialized = true;
+    }
+    initComponents(...args) {
+        if (args.length > 0) {
+            this.components = Object.assign({}, ...args);
+            for (const k in this.components) {
+                if (!this.components[k])
+                    delete this.components[k];
+            }
+        }
+    }
+    initHelpers(...args) {
+        if (args.length > 0) {
+            this.helpers = Object.assign({}, ...args);
+        }
+    }
+    declareData(...args) {
+        const options = {};
+        if (this.styled) {
+            options.class = options.className = options.style = { structured: true };
+        }
+        const props = {
+            visible: undefined,
+            mod: {
+                structured: true,
+            },
+            ...options,
+        };
+        Object.assign(props, ...args);
+        this.selector = new StructuredSelector({ props: props, values: this });
+        this.nameMap = this.selector.nameMap;
+    }
+    prepareCSS(_context, { data }) {
+        data.classNames = this.CSS.expand(this.CSS.block(this.baseClass, data.mod, data.stateMods), data.class, data.className);
+        data.style = parseStyle(data.style);
+    }
+    prepareData(context, instance) {
+        if (this.styled)
+            this.prepareCSS(context, instance);
+    }
+    initInstance(_context, _instance) { }
+    initState(_context, _instance) { }
+    checkVisible(_context, _instance, data) {
+        return data.visible;
+    }
+    explore(context, instance, data) {
+        if (this.components) {
+            instance.components = {};
+            for (const cmp in this.components) {
+                const ins = instance.getChild(context, this.components[cmp], "cmp-" + cmp, instance.store);
+                if (ins.scheduleExploreIfVisible(context))
+                    instance.components[cmp] = ins;
+            }
+        }
+    }
+    render(context, instance, key) {
+        Console.log(this);
+        throw new Error('Widget\'s render method should be overridden. This error usually happens if with incorrect imports, i.e. import { TextField } from "cx/data". Please check the console for details about the component configuration.');
+    }
+    update() {
+        this.version = (this.version || 0) + 1;
+    }
+    applyParentStore(instance) {
+        instance.store = instance.parentStore;
+        // check when this is actually needed, perhaps this is needed only for tables and repeated elements
+        // if (instance.cached) delete instance.cached.rawData; // force prepareData to execute again
+    }
+    static resetCounter() {
+        widgetId = 100;
+    }
+}
+Widget.prototype.visible = true;
+Widget.prototype.memoize = true; //cache rendered content and use it if possible
+Widget.prototype.CSS = CSS;
+Widget.prototype.styled = false;
+Widget.namespace = "ui.";
+Widget.optimizePrepare = true;
+Widget.factory = (type, _config, _more) => {
+    throw new Error(`Invalid widget type: ${type}.`);
+};
+export function contentAppend(result, w, prependSpace) {
+    if (w == null || w === false)
+        return false;
+    if (isArray(w))
+        w.forEach((c) => contentAppend(result, c));
+    else if (isDefined(w.content) && !w.atomic)
+        return contentAppend(result, w.content, false);
+    else {
+        if (prependSpace)
+            result.push(" ");
+        result.push(w);
+    }
+    return true;
+}
+export function getContentArray(x) {
+    let result = [];
+    contentAppend(result, x, false);
+    return result;
+}
+export function getContent(x) {
+    let result = getContentArray(x);
+    if (result.length == 0)
+        return null;
+    if (result.length == 1)
+        return result[0];
+    return result;
+}

package/build/ui/ZIndexManager.d.ts

@@ -0,0 +1,4 @@
+export declare class ZIndexManager {
+    static next(): number;
+    static reset(zIndex: number): void;
+}

package/build/ui/ZIndexManager.js

@@ -0,0 +1,9 @@
+let lastZIndex = 10000;
+export class ZIndexManager {
+    static next() {
+        return ++lastZIndex;
+    }
+    static reset(zIndex) {
+        lastZIndex = zIndex;
+    }
+}

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

@@ -0,0 +1,48 @@
+import { DataAdapter, DataAdapterRecord, DataAdapterConfig } from "./DataAdapter";
+import { Accessor } from "../../data/getAccessor";
+import { RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import { View } from "../../data/View";
+import { Prop, Sorter, CollatorOptions } from "../Prop";
+export interface RecordStoreCache {
+    recordStoreCache: WeakMap<any, View>;
+    cacheByKey: Record<string | number, View>;
+    recordsAccessor?: Accessor;
+}
+export interface ArrayAdapterConfig extends DataAdapterConfig {
+    recordsBinding?: Prop<any[]>;
+    recordsAccessor?: Accessor | string;
+    keyField?: string;
+    cacheByKeyField?: boolean;
+    sortOptions?: CollatorOptions;
+    preserveOrder?: boolean;
+}
+export interface ExtendedSorter extends Sorter {
+    comparer?: (a: any, b: any) => number;
+    sortOptions?: CollatorOptions;
+}
+export interface ResolvedSorter {
+    getter: (x: any) => any;
+    factor: number;
+    compare: (a: any, b: any) => number;
+}
+export declare class ArrayAdapter<T = any> extends DataAdapter<T> {
+    recordsAccessor: Accessor;
+    recordsBinding?: Prop<T[]>;
+    keyField: string | null;
+    cacheByKeyField: boolean;
+    sortOptions?: CollatorOptions;
+    preserveOrder?: boolean;
+    isTreeAdapter: boolean;
+    protected sorter?: (data: DataAdapterRecord<T>[]) => DataAdapterRecord<T>[];
+    constructor(config?: ArrayAdapterConfig);
+    init(): void;
+    initInstance(context: RenderingContext, instance: Instance & Partial<RecordStoreCache>): void;
+    getRecords(context: RenderingContext, instance: Instance & Partial<RecordStoreCache>, records: T[], parentStore: View): DataAdapterRecord<T>[];
+    mapRecords(context: RenderingContext, instance: Instance & Partial<RecordStoreCache>, records: T[], parentStore: View, recordsAccessor?: Accessor): DataAdapterRecord<T>[];
+    mapRecord(context: RenderingContext, instance: Instance & Partial<RecordStoreCache>, data: T, parentStore: View, recordsAccessor: Accessor | undefined, index: number): DataAdapterRecord<T>;
+    setFilter(filterFn?: (data: T) => boolean): void;
+    getComparer(sortOptions?: CollatorOptions): ((a: any, b: any) => number) | undefined;
+    buildSorter(sorters: ExtendedSorter[]): void;
+    sort(sorters?: Sorter[] | ExtendedSorter[]): void;
+}

package/build/ui/adapter/ArrayAdapter.js

@@ -0,0 +1,148 @@
+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, isObject } from "../../util";
+export class ArrayAdapter extends DataAdapter {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        this.recordsAccessor = getAccessor(this.recordsBinding ?? this.recordsAccessor);
+        this.recordName = this.recordName?.toString() || "$record";
+        this.indexName = this.indexName?.toString() || "$index";
+    }
+    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;
+                const record = this.mapRecord(context, instance, data, parentStore, recordsAccessor, index);
+                result.push(record);
+            });
+        }
+        if (this.sorter && !this.preserveOrder) {
+            result = this.sorter(result);
+        }
+        return result;
+    }
+    mapRecord(context, instance, data, parentStore, recordsAccessor, index) {
+        const key = this.cacheByKeyField && this.keyField && isObject(data) ? 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);
+            }
+        }
+        if (key != null) {
+            instance.cacheByKey[key] = recordStore;
+        }
+        else if (isObject(data)) {
+            instance.recordStoreCache.set(data, recordStore);
+        }
+        return {
+            store: recordStore,
+            index: index,
+            data: data,
+            type: "data",
+            key: this.keyField && isObject(data) ? data[this.keyField] : index,
+        };
+    }
+    setFilter(filterFn) {
+        this.filterFn = filterFn;
+    }
+    getComparer(sortOptions) {
+        return sortOptions ? Culture.getComparer(sortOptions) : undefined;
+    }
+    buildSorter(sorters) {
+        if (isArray(sorters) && sorters.length > 0) {
+            let dataAccessor;
+            let fieldValueMapper;
+            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) => {
+                const 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 = undefined;
+        }
+    }
+    sort(sorters) {
+        if (sorters) {
+            this.buildSorter(sorters);
+        }
+    }
+}
+ArrayAdapter.prototype.immutable = false;
+ArrayAdapter.prototype.sealed = false;
+ArrayAdapter.prototype.keyField = null;
+ArrayAdapter.prototype.cacheByKeyField = true;
+ArrayAdapter.prototype.isTreeAdapter = false;
+ArrayAdapter.autoInit = true;

package/build/ui/adapter/ArrayAdapter.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/ui/adapter/ArrayAdapter.spec.js

@@ -0,0 +1,44 @@
+import { RenderingContext } from "../RenderingContext";
+import { Instance } from "../Instance";
+import assert from "assert";
+import { Store } from "../../data";
+import { ArrayAdapter } from "./ArrayAdapter";
+describe("ArrayAdapter", () => {
+    it("maps data into records", () => {
+        let adapter = new ArrayAdapter();
+        let data = [
+            {
+                id: 1,
+                text: "1",
+            },
+            {
+                id: 2,
+                text: "2",
+            },
+        ];
+        let store = new Store();
+        let records = adapter.mapRecords(new RenderingContext(), new Instance(null, "1", null, store), data, store);
+        assert.equal(records.length, 2);
+        assert.equal(records[0].data, records[0].store.get("$record"));
+        assert.equal(records[1].data, records[1].store.get("$record"));
+    });
+    it("can sort data", () => {
+        let adapter = new ArrayAdapter();
+        adapter.sort([{ field: "id", direction: "DESC" }]);
+        let data = [
+            {
+                id: 1,
+                text: "1",
+            },
+            {
+                id: 2,
+                text: "2",
+            },
+        ];
+        let store = new Store();
+        let records = adapter.mapRecords(new RenderingContext(), new Instance(null, "1", null, store), data, store);
+        assert.equal(records.length, 2);
+        assert.equal(data[1], records[0].store.get("$record"));
+        assert.equal(data[0], records[1].store.get("$record"));
+    });
+});

package/build/ui/adapter/DataAdapter.d.ts

@@ -0,0 +1,30 @@
+import { Component } from "../../util/Component";
+import { Instance } from "../Instance";
+import { View } from "../../data/View";
+import { RenderingContext } from "../RenderingContext";
+import { Sorter } from "../Prop";
+export type DataAdapterRecordType = "data" | "group-header" | "group-footer";
+export interface DataAdapterRecord<T = any> {
+    data: T;
+    index?: number;
+    key: string;
+    store: View;
+    type?: DataAdapterRecordType;
+}
+export interface DataAdapterConfig {
+    recordName?: string;
+    indexName?: string;
+    immutable?: boolean;
+    sealed?: boolean;
+}
+export declare abstract class DataAdapter<T = any> extends Component {
+    recordName: string;
+    indexName: string;
+    immutable: boolean;
+    sealed?: boolean;
+    protected filterFn?: (data: T) => boolean;
+    constructor(config?: DataAdapterConfig);
+    abstract getRecords(context: RenderingContext, instance: Instance, records: T[], parentStore: View): DataAdapterRecord<T>[];
+    setFilter(filterFn?: (data: T) => boolean): void;
+    sort(sorters?: Sorter[]): void;
+}

package/build/ui/adapter/DataAdapter.js

@@ -0,0 +1,13 @@
+import { Component } from "../../util/Component";
+export class DataAdapter extends Component {
+    constructor(config) {
+        super(config);
+    }
+    setFilter(filterFn) {
+        this.filterFn = filterFn;
+    }
+    sort(sorters) { }
+}
+DataAdapter.prototype.recordName = "$record";
+DataAdapter.prototype.indexName = "$index";
+DataAdapter.prototype.immutable = false;