cx 25.11.1 → 26.0.1

package/src/ui/layout/ContentPlaceholder.ts

@@ -0,0 +1,133 @@
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { isString } from "../../util/isString";
+import { PureContainerBase, PureContainerConfig } from "../PureContainer";
+import { RenderingContext } from "../RenderingContext";
+import { Widget } from "../Widget";
+import { StringProp } from "../Prop";
+import { Instance } from "../Instance";
+
+export interface ContentPlaceholderConfig extends PureContainerConfig {
+   /** Name of the placeholder. Default is `body`. */
+   name?: StringProp;
+
+   /** Set to `true` to scope the placeholder to a local context. */
+   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 ContentPlaceholderInstance extends Instance<ContentPlaceholder> {
+   declare content?: any;
+   unregisterContentPlaceholder?: () => void;
+}
+
+export class ContentPlaceholder extends PureContainerBase<ContentPlaceholderConfig, ContentPlaceholderInstance> {
+   declare name?: string;
+   declare scoped?: boolean;
+   declare allowMultiple?: boolean;
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         name: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: ContentPlaceholderInstance): void {
+      instance.content = null;
+      let { data } = instance;
+
+      if (this.allowMultiple) {
+         const contentList = (context as any).contentList && (context as any).contentList[data.name];
+         if (isNonEmptyArray(contentList) && !this.scoped)
+            for (let i = 0; i < contentList.length; i++) this.setContent(context, instance, contentList[i]);
+
+         // in multi mode register a callback to allow for more entries to be added
+         (context as any).pushNamedValue("contentPlaceholder", data.name, (content: any) => {
+            this.setContent(context, instance, content);
+         });
+      } else {
+         const content = (context as any).content && (context as any).content[data.name];
+         if (content && !this.scoped) this.setContent(context, instance, content);
+         else
+            (context as any).pushNamedValue("contentPlaceholder", data.name, (content: any) => {
+               this.setContent(context, instance, content);
+            });
+      }
+
+      if (this.scoped)
+         instance.unregisterContentPlaceholder = () => {
+            (context as any).popNamedValue("contentPlaceholder", data.name);
+         };
+
+      super.explore(context, instance);
+   }
+
+   prepare(context: RenderingContext, instance: ContentPlaceholderInstance): void {
+      let { content } = instance;
+      if (this.allowMultiple) {
+         let contentId = "";
+         let shouldUpdate = false;
+         if (content) {
+            for (let i = 0; i < content.length; i++) {
+               let c = content[i];
+               contentId += c.id + "+";
+               shouldUpdate = shouldUpdate || c.shouldUpdate;
+            }
+         }
+         if (instance.cache("content", contentId) || shouldUpdate) instance.markShouldUpdate(context);
+      } else if (instance.cache("content", content) || (content && content.shouldUpdate))
+         instance.markShouldUpdate(context);
+   }
+
+   setContent(context: RenderingContext, instance: ContentPlaceholderInstance, content: any): void {
+      if (this.allowMultiple) {
+         if (instance.content == null) instance.content = [];
+         instance.content.push(content);
+      } else instance.content = content;
+      content.contentPlaceholder = instance;
+   }
+
+   render(context: RenderingContext, instance: ContentPlaceholderInstance, key: any): any {
+      const { content } = instance;
+      if (!content) return super.render(context, instance, key);
+      if (this.allowMultiple) return content.map((x: any) => x.contentVDOM);
+      return content.contentVDOM;
+   }
+}
+
+ContentPlaceholder.prototype.name = "body";
+ContentPlaceholder.prototype.scoped = false;
+ContentPlaceholder.prototype.allowMultiple = false;
+
+Widget.alias("content-placeholder", ContentPlaceholder);
+
+export interface ContentPlaceholderScopeConfig extends PureContainerConfig {
+   name: string | string[];
+}
+
+export class ContentPlaceholderScope extends PureContainerBase<ContentPlaceholderScopeConfig> {
+   declare name: string[];
+
+   init(): void {
+      super.init();
+      if (isString(this.name)) this.name = [this.name];
+   }
+
+   explore(context: RenderingContext, instance: any): void {
+      this.name.forEach((name) => {
+         context.pushNamedValue("contentPlaceholder", name, null);
+         context.pushNamedValue("content", name, null);
+         context.pushNamedValue("contentList", name, []);
+      });
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      this.name.forEach((name) => {
+         context.popNamedValue("contentPlaceholder", name);
+         context.popNamedValue("content", name);
+         context.popNamedValue("contentList", name);
+      });
+   }
+}

package/src/ui/layout/FirstVisibleChildLayout.spec.tsx

@@ -0,0 +1,195 @@
+import { Store } from "../../data/Store";
+import { expr } from "../expr";
+import { createTestRenderer } from "../../util/test/createTestRenderer";
+
+import assert from "assert";
+import { FirstVisibleChildLayout } from "./FirstVisibleChildLayout";
+import { UseParentLayout } from "./UseParentLayout";
+import { PureContainer } from "../PureContainer";
+import { createFunctionalComponent } from "../createFunctionalComponent";
+
+describe("FirstVisibleChildLayout", () => {
+   it("renders only the first child", () => {
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <header></header>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "header", props: {}, children: null }],
+      });
+   });
+
+   it("does not process other widgets", () => {
+      let h = false,
+         m = false,
+         f = false;
+
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <header
+                  onInit={() => {
+                     h = true;
+                  }}
+               />
+               <main
+                  onInit={() => {
+                     m = true;
+                  }}
+               />
+               <footer
+                  onInit={() => {
+                     f = true;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "header", props: {}, children: null }],
+      });
+
+      assert.equal(h, true);
+      assert.equal(m, false);
+      assert.equal(f, false);
+   });
+
+   it("skips the first child if not visible", () => {
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <header visible={false}></header>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: null }],
+      });
+   });
+
+   it("skips pure containers which use parent layouts", () => {
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <PureContainer layout={UseParentLayout}>
+                  <header visible={false}></header>
+               </PureContainer>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: null }],
+      });
+   });
+
+   it("works with functional components", () => {
+      let FC = createFunctionalComponent(({ children }: { children?: any }) => <cx>{children}</cx>);
+
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <FC dummy>
+                  <header visible={false}></header>
+               </FC>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: null }],
+      });
+   });
+
+   it("properly destroys invisible items", () => {
+      let destroyList: number[] = [];
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <div visible={expr("{index} == 0")} onDestroy={() => destroyList.push(0)} />
+               <div visible={expr("{index} == 1")} onDestroy={() => destroyList.push(1)} />
+               <div visible={expr("{index} == 2")} onDestroy={() => destroyList.push(2)} />
+               <div visible={expr("{index} == 3")} onDestroy={() => destroyList.push(3)} />
+               <div visible={expr("{index} == 4")} onDestroy={() => destroyList.push(4)} />
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      store.set("index", 0);
+      component.toJSON();
+      assert.deepEqual(destroyList, []);
+
+      store.set("index", 3);
+      component.toJSON();
+      assert.deepEqual(destroyList, [0]);
+
+      store.set("index", 1);
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3]);
+
+      store.set("index", 4);
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3, 1]);
+
+      store.set("index", 0);
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3, 1, 4]);
+
+      store.set("index", -1);
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3, 1, 4, 0]);
+   });
+});

package/src/ui/layout/FirstVisibleChildLayout.ts

@@ -0,0 +1,60 @@
+import { PureContainerConfig } from "./../PureContainer";
+import { Instance } from "../Instance";
+import { PureContainer } from "../PureContainer";
+import { RenderingContext } from "../RenderingContext";
+
+function isVisibleDeep(instance: Instance): boolean {
+   if (instance.visible && (!instance.widget.isPureContainer || !instance.widget.useParentLayout)) return true;
+   if (instance.children) {
+      for (let i = 0; i < instance.children.length; i++) if (isVisibleDeep(instance.children[i])) return true;
+   }
+   return false;
+}
+
+class FirstVisibleChildItem extends PureContainer {
+   constructor(config: PureContainerConfig) {
+      super(config);
+   }
+
+   checkVisible(context: RenderingContext, instance: any, data: any): boolean {
+      if (instance.parent.firstVisibleChild) return false;
+      return super.checkVisible(context, instance, data);
+   }
+
+   explore(context: RenderingContext, instance: any): void {
+      if (instance.parent.firstVisibleChild) return;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      if (instance.parent.firstVisibleChild) return;
+      if (isVisibleDeep(instance)) instance.parent.firstVisibleChild = instance;
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      if (instance.parent.firstVisibleChild != instance) return null;
+      return super.render(context, instance, key);
+   }
+}
+
+FirstVisibleChildItem.prototype.useParentLayout = true;
+
+export class FirstVisibleChildLayout extends PureContainer {
+   explore(context: RenderingContext, instance: any): void {
+      instance.firstVisibleChild = null;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      let { children, firstVisibleChild } = instance;
+      if (children) {
+         for (let i = 0; i < children.length; i++) if (children[i] != firstVisibleChild) children[i].destroy();
+      }
+      instance.children = [];
+      if (firstVisibleChild) instance.children.push(firstVisibleChild);
+   }
+
+   wrapItem(item: any): any {
+      return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({ items: item });
+   }
+}

package/src/ui/layout/LabelsLeftLayout.scss

@@ -1,12 +1,14 @@
 
+@use "sass:map";
+
 @mixin cx-labelsleftlayout(
    $name: 'labelsleftlayout',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}labelsleftlayout {
       border-spacing: 0;

package/src/ui/layout/LabelsLeftLayout.tsx

@@ -0,0 +1,76 @@
+/** @jsxImportSource react */
+
+import { isArray } from "../../util/isArray";
+import { parseStyle } from "../../util/parseStyle";
+import { StyledContainerBase, StyledContainerConfig } from "../Container";
+import { Instance } from "../Instance";
+import { RenderingContext } from "../RenderingContext";
+import { contentAppend, getContent } from "../Widget";
+import { StyleProp, ClassProp } from "../Prop";
+
+function validContent(r: any): any {
+   if (!r.hasOwnProperty("content")) return r;
+   let content: any[] = [];
+   for (let key in r) if (key != "label") contentAppend(content, r[key]);
+   return content;
+}
+
+export interface LabelsLeftLayoutConfig extends StyledContainerConfig {
+   labelStyle?: StyleProp;
+   labelClass?: ClassProp;
+}
+
+export class LabelsLeftLayout extends StyledContainerBase<LabelsLeftLayoutConfig, Instance> {
+   declare labelStyle?: StyleProp;
+   declare labelClass?: ClassProp;
+
+   constructor(config?: LabelsLeftLayoutConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.labelStyle = parseStyle(this.labelStyle);
+      super.init();
+   }
+
+   declareData(...args: any[]): any {
+      return super.declareData(...args, {
+         labelStyle: { structured: true },
+         labelClass: { structured: true },
+      });
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      let result: any[] = [];
+      let { children, data } = instance;
+      let { CSS, baseClass } = this;
+
+      let labelClass = CSS.expand(CSS.element(baseClass!, "label"), data.labelClass);
+
+      const addItem = (r: any, key: string) => {
+         if (!r) return;
+         if (r.useParentLayout && isArray(r.content))
+            r.content.forEach((x: any, i: number) => addItem(x, key + "-" + i));
+         else {
+            result.push(
+               <tr key={key}>
+                  <td className={labelClass} style={data.labelStyle}>
+                     {getContent(r.label)}
+                  </td>
+                  <td className={CSS.element(baseClass!, "field")}>{validContent(r)}</td>
+               </tr>,
+            );
+         }
+      };
+      children.forEach((c: any) => {
+         addItem(c.vdom, c.key);
+      });
+      return (
+         <table key={key} className={data.classNames} style={data.style}>
+            <tbody>{result}</tbody>
+         </table>
+      );
+   }
+}
+
+LabelsLeftLayout.prototype.baseClass = "labelsleftlayout";

package/src/ui/layout/LabelsTopLayout.scss

@@ -1,12 +1,13 @@
+@use "sass:map";
 
 @mixin cx-labelstoplayout(
    $name: 'labelstoplayout',
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
 
    .#{$block}labelstoplayout {
       border-spacing: 0 3px;

package/src/ui/layout/LabelsTopLayout.tsx

@@ -0,0 +1,156 @@
+/** @jsxImportSource react */
+
+import { VDOM, getContent, contentAppend } from "../Widget";
+import { StyledContainerBase, StyledContainerConfig } from "../Container";
+import { Instance } from "../Instance";
+import { isArray } from "../../util/isArray";
+import { isUndefined } from "../../util/isUndefined";
+import { isNumber } from "../../util/isNumber";
+import { RenderingContext } from "../RenderingContext";
+
+function validContent(r: any): any {
+   let content: any[] = [];
+   for (let key in r) if (key != "label") contentAppend(content, r[key]);
+   return content;
+}
+
+interface LayoutState {
+   rows: any[];
+   currentRow: number;
+   labelCells: any[];
+   fieldCells: any[];
+   rowCapacities: number[];
+}
+
+export interface LabelsTopLayoutConfig extends StyledContainerConfig {
+   vertical?: boolean;
+   columns?: number;
+}
+
+export class LabelsTopLayout extends StyledContainerBase<LabelsTopLayoutConfig, Instance> {
+   declare vertical?: boolean;
+   declare columns?: number;
+
+   constructor(config?: LabelsTopLayoutConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.vertical && isUndefined(this.columns)) this.columns = 1;
+
+      super.init();
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      let { children, data } = instance;
+
+      let state: LayoutState = {
+         rows: [],
+         currentRow: 0,
+         labelCells: [],
+         fieldCells: [],
+         rowCapacities: [this.columns!],
+      };
+
+      const processContent = (r: any) => {
+         if (!r) return;
+         if (isArray(r.content) && r.useParentLayout) r.content.forEach((x: any) => processContent(x));
+         else if (r.atomic && r.type == "layout-cell")
+            this.addItem(state, isArray(r.content) && r.content.length == 1 ? r.content[0] : r.content, r.data);
+         else this.addItem(state, r, {});
+      };
+
+      children.forEach((item: any) => processContent(item.vdom));
+
+      this.addRow(state);
+
+      return (
+         <table key={key} className={data.classNames} style={data.style}>
+            <tbody>{state.rows}</tbody>
+         </table>
+      );
+   }
+
+   addRow(state: LayoutState): void {
+      if (state.labelCells.length > 0) state.rows.push(<tr key={state.rows.length}>{state.labelCells}</tr>);
+
+      if (state.fieldCells.length > 0) state.rows.push(<tr key={state.rows.length}>{state.fieldCells}</tr>);
+
+      state.labelCells = [];
+      state.fieldCells = [];
+      state.currentRow++;
+      if (state.currentRow == state.rowCapacities.length) state.rowCapacities.push(this.columns!);
+   }
+
+   addItem(state: LayoutState, item: any, data: any): void {
+      while (state.labelCells.length == state.rowCapacities[state.currentRow]) this.addRow(state);
+
+      if (data.rowSpan > 1) {
+         for (let row = state.currentRow + 1; row < state.currentRow + data.rowSpan; row++) {
+            if (row == state.rowCapacities.length) state.rowCapacities.push(this.columns!);
+            state.rowCapacities[row] -= data.colSpan || 1;
+         }
+      }
+
+      if (data.colSpan > 1) state.rowCapacities[state.currentRow] -= data.colSpan - 1;
+
+      state.labelCells.push(
+         <td
+            className={this.CSS!.element(this.baseClass!, "label")}
+            key={state.labelCells.length}
+            colSpan={data.colSpan}
+         >
+            {getContent(item.label)}
+         </td>,
+      );
+      state.fieldCells.push(
+         <td
+            className={this.CSS!.element(this.baseClass!, "field")}
+            key={state.fieldCells.length}
+            colSpan={data.colSpan}
+            rowSpan={isNumber(data.rowSpan) ? 2 * data.rowSpan - 1 : undefined}
+            style={data.style}
+         >
+            {validContent(item)}
+         </td>,
+      );
+   }
+}
+
+LabelsTopLayout.prototype.baseClass = "labelstoplayout";
+LabelsTopLayout.prototype.vertical = false;
+LabelsTopLayout.prototype.columns = undefined;
+
+export interface LabelsTopLayoutCellConfig extends StyledContainerConfig {
+   colSpan?: number;
+   rowSpan?: number;
+}
+
+export class LabelsTopLayoutCell extends StyledContainerBase<LabelsTopLayoutCellConfig, Instance> {
+   declare colSpan?: number;
+   declare rowSpan?: number;
+
+   constructor(config?: LabelsTopLayoutCellConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         colSpan: undefined,
+         rowSpan: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      let { content } = (this as any).renderChildren(context, instance);
+
+      return {
+         atomic: true,
+         type: "layout-cell",
+         data: instance.data,
+         content,
+      };
+   }
+}
+
+LabelsTopLayoutCell.prototype.useParentLayout = true;

package/src/ui/layout/UseParentLayout.ts

@@ -0,0 +1,8 @@
+import { PureContainer } from "../PureContainer";
+
+export class UseParentLayout extends PureContainer {
+   declare noLayout?: boolean;   
+}
+
+UseParentLayout.prototype.noLayout = true;
+UseParentLayout.prototype.useParentLayout = true;