cx 25.11.1 → 26.0.1

package/src/ui/layout/FirstVisibleChildLayout.js

@@ -1,66 +0,0 @@
-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 +0,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 +0,0 @@
-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 +0,0 @@
-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;

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

@@ -1,15 +0,0 @@
-import * as Cx from "../../core";
-
-interface LabelsTopLayoutProps extends Cx.StyledContainerProps {
-   vertical?: boolean;
-   columns?: number;
-}
-
-export class LabelsTopLayout extends Cx.Widget<LabelsTopLayoutProps> {}
-
-interface LabelsTopLayoutCellProps extends Cx.StyledContainerProps {
-   colSpan?: number;
-   rowSpan?: number;
-}
-
-export class LabelsTopLayoutCell extends Cx.Widget<LabelsTopLayoutCellProps> {}

package/src/ui/layout/LabelsTopLayout.js

@@ -1,135 +0,0 @@
-import {VDOM, getContent, contentAppend} from '../Widget';
-import {Container} from '../Container';
-import {PureContainer} from '../PureContainer';
-import {isArray} from '../../util/isArray';
-import {isUndefined} from '../../util/isUndefined';
-import {isNumber} from "../../util/isNumber";
-
-function validContent(r) {
-   let content = [];
-   for (let key in r)
-      if (key != "label")
-         contentAppend(content, r[key]);
-   return content;
-}
-
-export class LabelsTopLayout extends Container {
-
-   init() {
-      if (this.vertical && isUndefined(this.columns))
-         this.columns = 1;
-
-      super.init();
-   }
-
-   render(context, instance, key) {
-      let {children, data} = instance;
-
-      let state = {
-         rows: [],
-         currentRow: 0,
-         labelCells: [],
-         fieldCells: [],
-         rowCapacities: [this.columns]
-      };
-
-      const processContent = (r) => {
-         if (!r)
-            return;
-         if (isArray(r.content) && r.useParentLayout)
-            r.content.forEach((x) => 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 => processContent(item.vdom));
-
-      this.addRow(state);
-
-      return <table key={key} className={data.classNames} style={data.style}>
-         <tbody>
-         {state.rows}
-         </tbody>
-      </table>;
-   }
-
-   addRow(state) {
-      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, item, data) {
-
-      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;
-LabelsTopLayout.prototype.styled = true;
-
-export class LabelsTopLayoutCell extends PureContainer {
-
-   declareData(...args) {
-      super.declareData(...args, {
-         colSpan: undefined,
-         rowSpan: undefined
-      })
-   }
-
-   render(context, instance, key) {
-
-      let { content } = this.renderChildren(context, instance);
-
-      return {
-         atomic: true,
-         type: 'layout-cell',
-         data: instance.data,
-         content
-      }
-   }
-}
-
-LabelsTopLayoutCell.prototype.styled = true;
-LabelsTopLayoutCell.prototype.useParentLayout = true;

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

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

package/src/ui/layout/UseParentLayout.js

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

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

@@ -1,12 +0,0 @@
-import { View } from "../../data/View";
-import { Instance } from "../Instance";
-import { RenderingContext } from "../RenderingContext";
-
-export function exploreChildren(
-   context: RenderingContext,
-   instance: Instance,
-   children: Instance[],
-   previousResult: Instance[],
-   key?: string,
-   store?: View,
-): Instance[];

package/src/ui/layout/exploreChildren.js

@@ -1,27 +0,0 @@
-export function exploreChildren(context, instance, children, previousResult, key, store) {
-   let newChildren = previousResult || [];
-   let oldChildren = previousResult || newChildren;
-   let identical = previousResult ? 0 : -1;
-
-   for (let c = 0; c < children.length; c++) {
-      let cell = instance.getChild(context, children[c], key, store);
-
-      if (cell.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.exploreStack.push(cell);
-         if (cell.needsExploreCleanup) context.exploreStack.push(cell);
-      }
-   }
-
-   if (identical >= 0 && identical != newChildren.length) newChildren = newChildren.slice(0, identical);
-
-   return newChildren;
-}

package/src/ui/layout/index.js

@@ -1,10 +0,0 @@
-export * from './FirstVisibleChildLayout';
-export * from './UseParentLayout';
-
-export * from './LabelsLeftLayout';
-export * from './LabelsTopLayout';
-
-export * from './Content';
-export * from './ContentPlaceholder';
-
-export * from './exploreChildren';

package/src/ui/selection/KeySelection.d.ts

@@ -1,17 +0,0 @@
-import * as Cx from '../../core';
-
-import { Selection } from './Selection'
-
-interface KeySelectionConfig {
-   bind?: string;
-   multiple?: boolean;
-   keyField?: string;
-   storage?: string;
-   selection?: Cx.Prop<any>,
-   record?: Cx.Prop<any>,
-   index?: Cx.Prop<any>
-}
-
-export class KeySelection extends Selection {
-   constructor(config: KeySelectionConfig);
-}

package/src/ui/selection/KeySelection.js

@@ -1,129 +0,0 @@
-import { Selection } from "./Selection";
-import { isArray } from "../../util/isArray";
-import { isNonEmptyArray } from "../../util/isNonEmptyArray";
-import { shallowEquals } from "../../util/shallowEquals";
-
-export class KeySelection extends Selection {
-   init() {
-      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) {
-      if (this.key != null) return this.key;
-
-      if (!record) return null;
-
-      if (this.keyField) return record[this.keyField];
-
-      var key = {};
-      this.keyFields.forEach((k) => {
-         key[k] = record[k];
-      });
-      return key;
-   }
-
-   areKeysEqual(key1, key2) {
-      if (this.keyField) return key1 === key2 && key1 != null;
-
-      if (!key1 || !key2) return false;
-
-      return !this.keyFields.some((k) => key1[k] !== key2[k]);
-   }
-
-   declareData() {
-      return super.declareData(
-         {
-            $selection: { structured: true },
-         },
-         ...arguments
-      );
-   }
-
-   configureWidget(widget) {
-      if (!this.initialized) this.init();
-
-      widget.$selection = Object.assign(widget.$selection || {}, {
-         keys: this.selection,
-      });
-
-      return super.configureWidget(widget);
-   }
-
-   selectMultiple(store, records, indexes, { toggle, add } = {}) {
-      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) => this.areKeysEqual(x, key));
-                  if (!exists) newSelection.push(key);
-                  else if (toggle) newSelection = newSelection.filter((x) => !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, newSelection) {
-      store.update(this.selection.bind, (data) => (shallowEquals(data, newSelection) ? data : newSelection));
-   }
-
-   getIsSelectedDelegate(store) {
-      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) => 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, record, index) {
-      return this.getIsSelectedDelegate(store)(record, index);
-   }
-}
-
-KeySelection.prototype.multiple = false;
-KeySelection.prototype.keyField = "id";
-KeySelection.prototype.storage = "array";
-KeySelection.autoInit = true;
-
-Selection.alias("key", KeySelection);