cx 24.10.7 → 24.10.8

package/src/ui/layout/ContentPlaceholder.js

@@ -1,6 +1,7 @@
 import { Widget } from "../Widget";
 import { PureContainer } from "../PureContainer";
 import { isString } from "../../util/isString";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
 
 export class ContentPlaceholder extends PureContainer {
    declareData() {
@@ -13,12 +14,23 @@ export class ContentPlaceholder extends PureContainer {
       instance.content = null;
       let { data } = instance;
 
-      const content = context.content && context.content[data.name];
-      if (content && !this.scoped) this.setContent(context, instance, content);
-      else
+      if (this.allowMultiple) {
+         const contentList = context.contentList && context.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.pushNamedValue("contentPlaceholder", data.name, (content) => {
             this.setContent(context, instance, content);
          });
+      } else {
+         const content = context.content && context.content[data.name];
+         if (content && !this.scoped) this.setContent(context, instance, content);
+         else
+            context.pushNamedValue("contentPlaceholder", data.name, (content) => {
+               this.setContent(context, instance, content);
+            });
+      }
 
       if (this.scoped)
          instance.unregisterContentPlaceholder = () => {
@@ -78,6 +90,7 @@ export class ContentPlaceholderScope extends PureContainer {
       this.name.forEach((name) => {
          context.pushNamedValue("contentPlaceholder", name, null);
          context.pushNamedValue("content", name, null);
+         context.pushNamedValue("contentList", name, []);
       });
       super.explore(context, instance);
    }
@@ -86,6 +99,7 @@ export class ContentPlaceholderScope extends PureContainer {
       this.name.forEach((name) => {
          context.popNamedValue("contentPlaceholder", name);
          context.popNamedValue("content", name);
+         context.popNamedValue("contentList", name);
       });
    }
 }

package/src/ui/layout/ContentPlaceholder.spec.js

@@ -3,7 +3,7 @@ import { VDOM } from "../Widget";
 import { HtmlElement } from "../../widgets/HtmlElement";
 import { Store } from "../../data/Store";
 import { Controller } from "../Controller";
-import { ContentPlaceholder } from "./ContentPlaceholder";
+import { ContentPlaceholder, ContentPlaceholderScope } from "./ContentPlaceholder";
 
 import renderer from "react-test-renderer";
 import assert from "assert";
@@ -128,6 +128,126 @@ describe("ContentPlaceholder", () => {
       });
    });
 
+   it("allows putting multiple entries inside when content is defined before and after the placeholder", () => {
+      let store = new Store();
+      const component = renderer.create(
+         <Cx store={store} subscribe immediate>
+            <div>
+               <PureContainer>
+                  <h2 putInto="headers">Header1</h2>
+                  <h2 putInto="headers">Header2</h2>
+               </PureContainer>
+               <header>
+                  <ContentPlaceholder name="headers" allowMultiple />
+               </header>
+               <PureContainer>
+                  <h2 putInto="headers">Header3</h2>
+                  <h2 putInto="headers">Header4</h2>
+               </PureContainer>
+            </div>
+         </Cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "header",
+               props: {},
+               children: [
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header1"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header2"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header3"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header4"],
+                  },
+               ],
+            },
+         ],
+      });
+   });
+
+   it("allows putting multiple entries into separate placeholders using content placeholder scopes", () => {
+      let store = new Store();
+      const component = renderer.create(
+         <Cx store={store} subscribe immediate>
+            <div>
+               <ContentPlaceholderScope name="headers">
+                  <h2 putInto="headers">Header1</h2>
+                  <h2 putInto="headers">Header2</h2>
+                  <header>
+                     <ContentPlaceholder name="headers" allowMultiple />
+                  </header>
+               </ContentPlaceholderScope>
+
+               <ContentPlaceholderScope name="headers">
+                  <header>
+                     <ContentPlaceholder name="headers" allowMultiple />
+                  </header>
+                  <h2 putInto="headers">Header3</h2>
+                  <h2 putInto="headers">Header4</h2>
+               </ContentPlaceholderScope>
+            </div>
+         </Cx>,
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "header",
+               props: {},
+               children: [
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header1"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header2"],
+                  },
+               ],
+            },
+            {
+               type: "header",
+               props: {},
+               children: [
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header3"],
+                  },
+                  {
+                     type: "h2",
+                     props: {},
+                     children: ["Header4"],
+                  },
+               ],
+            },
+         ],
+      });
+   });
+
    it("is used for defining body position in outer layouts", () => {
       let store = new Store();