cx 24.5.0 → 24.5.2

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

@@ -1,4 +1,4 @@
-import * as Cx from '../../core';
-import { PureContainer } from '../PureContainer';
-
-export class FirstVisibleChildLayout extends PureContainer {}
+import * as Cx from '../../core';
+import { PureContainer } from '../PureContainer';
+
+export class FirstVisibleChildLayout extends PureContainer {}

package/src/ui/layout/FirstVisibleChildLayout.js

@@ -1,66 +1,66 @@
-import {PureContainer} from "../PureContainer";
-
-function isVisibleDeep(instance) {
-   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 {
-
-   checkVisible(context, instance, data) {
-      if (instance.parent.firstVisibleChild)
-         return false;
-      return super.checkVisible(context, instance, data);
-   }
-
-   explore(context, instance) {
-      if (instance.parent.firstVisibleChild)
-         return;
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      if (instance.parent.firstVisibleChild)
-         return;
-      if (isVisibleDeep(instance))
-         instance.parent.firstVisibleChild = instance;
-   }
-
-   render(context, instance, key) {
-      if (instance.parent.firstVisibleChild != instance)
-         return null;
-      return super.render(context, instance, key)
-   }
-}
-
-FirstVisibleChildItem.prototype.useParentLayout = true;
-
-export class FirstVisibleChildLayout extends PureContainer {
-
-   explore(context, instance) {
-      instance.firstVisibleChild = null;
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      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) {
-      return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({items: item});
-   }
+import {PureContainer} from "../PureContainer";
+
+function isVisibleDeep(instance) {
+   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 {
+
+   checkVisible(context, instance, data) {
+      if (instance.parent.firstVisibleChild)
+         return false;
+      return super.checkVisible(context, instance, data);
+   }
+
+   explore(context, instance) {
+      if (instance.parent.firstVisibleChild)
+         return;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      if (instance.parent.firstVisibleChild)
+         return;
+      if (isVisibleDeep(instance))
+         instance.parent.firstVisibleChild = instance;
+   }
+
+   render(context, instance, key) {
+      if (instance.parent.firstVisibleChild != instance)
+         return null;
+      return super.render(context, instance, key)
+   }
+}
+
+FirstVisibleChildItem.prototype.useParentLayout = true;
+
+export class FirstVisibleChildLayout extends PureContainer {
+
+   explore(context, instance) {
+      instance.firstVisibleChild = null;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      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) {
+      return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({items: item});
+   }
 }

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

@@ -1,196 +1,196 @@
-import {Cx} from '../Cx';
-import {VDOM} from '../Widget';
-import {HtmlElement} from '../../widgets/HtmlElement';
-import {Store} from '../../data/Store';
-
-import renderer from 'react-test-renderer';
-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 = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      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 = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      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 = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      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 = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      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}) => <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 = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-            type: 'div',
-            props: {},
-            children: [{type: 'main', props: {}, children: null}]
-         }
-      )
-   });
-
-   it('properly destroys invisible items', () => {
-      let destroyList = [];
-      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 = renderer.create(
-         <Cx widget={widget} store={store} subscribe immediate/>
-      );
-
-      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]);
-   });
-});
-
+import {Cx} from '../Cx';
+import {VDOM} from '../Widget';
+import {HtmlElement} from '../../widgets/HtmlElement';
+import {Store} from '../../data/Store';
+
+import renderer from 'react-test-renderer';
+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 = renderer.create(
+         <Cx widget={widget} store={store} subscribe immediate/>
+      );
+
+      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 = renderer.create(
+         <Cx widget={widget} store={store} subscribe immediate/>
+      );
+
+      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 = renderer.create(
+         <Cx widget={widget} store={store} subscribe immediate/>
+      );
+
+      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 = renderer.create(
+         <Cx widget={widget} store={store} subscribe immediate/>
+      );
+
+      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}) => <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 = renderer.create(
+         <Cx widget={widget} store={store} subscribe immediate/>
+      );
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+            type: 'div',
+            props: {},
+            children: [{type: 'main', props: {}, children: null}]
+         }
+      )
+   });
+
+   it('properly destroys invisible items', () => {
+      let destroyList = [];
+      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 = renderer.create(
+         <Cx widget={widget} store={store} subscribe immediate/>
+      );
+
+      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/LabelsLeftLayout.d.ts

@@ -1,11 +1,11 @@
-import * as Cx from "../../core";
-
-interface LabelLeftLayoutProps extends Cx.StyledContainerProps {
-   /** Additional CSS style to be passed to the label object. */
-   labelStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be passed to the label object. */
-   labelClass?: Cx.ClassProp;
-}
-
-export class LabelsLeftLayout extends Cx.Widget<LabelLeftLayoutProps> {}
+import * as Cx from "../../core";
+
+interface LabelLeftLayoutProps extends Cx.StyledContainerProps {
+   /** Additional CSS style to be passed to the label object. */
+   labelStyle?: Cx.StyleProp;
+
+   /** Additional CSS class to be passed to the label object. */
+   labelClass?: Cx.ClassProp;
+}
+
+export class LabelsLeftLayout extends Cx.Widget<LabelLeftLayoutProps> {}

package/src/ui/layout/LabelsLeftLayout.js

@@ -1,59 +1,59 @@
-import { VDOM, getContent, contentAppend } from "../Widget";
-import { PureContainer } from "../PureContainer";
-import { isArray } from "../../util/isArray";
-import { parseStyle } from "../../util/parseStyle";
-
-function validContent(r) {
-   if (!r.hasOwnProperty("content")) return r;
-   let content = [];
-   for (let key in r) if (key != "label") contentAppend(content, r[key]);
-   return content;
-}
-
-export class LabelsLeftLayout extends PureContainer {
-   init() {
-      this.labelStyle = parseStyle(this.labelStyle);
-      super.init();
-   }
-
-   declareData(...args) {
-      return super.declareData(...args, {
-         labelStyle: { structured: true },
-         labelClass: { structured: true },
-      });
-   }
-
-   render(context, instance, key) {
-      let result = [];
-      let { children, data } = instance;
-      let { CSS, baseClass } = this;
-
-      let labelClass = CSS.expand(CSS.element(baseClass, "label"), data.labelClass);
-
-      const addItem = (r, key) => {
-         if (!r) return;
-         if (r.useParentLayout && isArray(r.content)) r.content.forEach((x, i) => 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) => {
-         addItem(c.vdom, c.key);
-      });
-      return (
-         <table key={key} className={data.classNames} style={data.style}>
-            <tbody>{result}</tbody>
-         </table>
-      );
-   }
-}
-
-LabelsLeftLayout.prototype.baseClass = "labelsleftlayout";
-LabelsLeftLayout.prototype.styled = true;
+import { VDOM, getContent, contentAppend } from "../Widget";
+import { PureContainer } from "../PureContainer";
+import { isArray } from "../../util/isArray";
+import { parseStyle } from "../../util/parseStyle";
+
+function validContent(r) {
+   if (!r.hasOwnProperty("content")) return r;
+   let content = [];
+   for (let key in r) if (key != "label") contentAppend(content, r[key]);
+   return content;
+}
+
+export class LabelsLeftLayout extends PureContainer {
+   init() {
+      this.labelStyle = parseStyle(this.labelStyle);
+      super.init();
+   }
+
+   declareData(...args) {
+      return super.declareData(...args, {
+         labelStyle: { structured: true },
+         labelClass: { structured: true },
+      });
+   }
+
+   render(context, instance, key) {
+      let result = [];
+      let { children, data } = instance;
+      let { CSS, baseClass } = this;
+
+      let labelClass = CSS.expand(CSS.element(baseClass, "label"), data.labelClass);
+
+      const addItem = (r, key) => {
+         if (!r) return;
+         if (r.useParentLayout && isArray(r.content)) r.content.forEach((x, i) => 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) => {
+         addItem(c.vdom, c.key);
+      });
+      return (
+         <table key={key} className={data.classNames} style={data.style}>
+            <tbody>{result}</tbody>
+         </table>
+      );
+   }
+}
+
+LabelsLeftLayout.prototype.baseClass = "labelsleftlayout";
+LabelsLeftLayout.prototype.styled = true;