cx 25.4.1 → 25.5.0

package/src/widgets/Button.js

@@ -1,118 +1,118 @@
-import { Widget, VDOM, getContentArray } from "../ui/Widget";
-import { HtmlElement } from "./HtmlElement";
-import { yesNo } from "./overlay/alerts";
-import { Icon } from "./Icon";
-import { preventFocus } from "../ui/FocusManager";
-import { isFunction } from "../util/isFunction";
-import { isDefined } from "../util/isDefined";
-import { coalesce } from "../util/coalesce";
-
-export class Button extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         confirm: { structured: true },
-         pressed: undefined,
-         icon: undefined,
-         disabled: undefined,
-         enabled: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pressed: data.pressed,
-      };
-      if (isDefined(data.enabled)) data.disabled = !data.enabled;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      instance.data.parentDisabled = context.parentDisabled;
-      instance.data.parentStrict = context.parentStrict;
-
-      if (instance.cache("parentDisabled", context.parentDisabled)) instance.markShouldUpdate(context);
-      if (instance.cache("parentStrict", context.parentStrict)) instance.markShouldUpdate(context);
-
-      super.explore(context, instance);
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      if (!this.focusOnMouseDown) {
-         props.onMouseDown = (e) => {
-            if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) == false) return;
-            preventFocus(e);
-         };
-      }
-
-      if (this.dismiss) {
-         let { onClick } = props;
-
-         props.onClick = (...args) => {
-            if (onClick && onClick(...args) === false) return;
-
-            if (instance.parentOptions && isFunction(instance.parentOptions.dismiss)) instance.parentOptions.dismiss();
-         };
-      }
-
-      if (this.tag === "button") props.type = this.submit ? "submit" : "button";
-
-      delete props.confirm;
-      delete props.dismiss;
-      delete props.pressed;
-      delete props.submit;
-      delete props.focusOnMouseDown;
-      delete props.icon;
-      delete props.enabled;
-
-      let oldOnClick,
-         { data } = instance;
-
-      props.disabled = coalesce(data.parentStrict ? data.parentDisabled : null, data.disabled, data.parentDisabled);
-
-      if (data.confirm) {
-         oldOnClick = props.onClick;
-         props.onClick = () => {
-            yesNo(data.confirm).then((btn) => {
-               if (btn == "yes") oldOnClick.call(this, null, instance);
-            });
-         };
-      }
-
-      let icon, children;
-
-      if (data.icon) {
-         icon = Icon.render(data.icon, {
-            key: "icon",
-            className: this.CSS.element(this.baseClass, "icon"),
-         });
-         children = getContentArray(props.children);
-         props.children = [icon, ...children];
-         props.className = this.CSS.expand(
-            props.className,
-            this.CSS.state("icon"),
-            children.length == 0 && this.CSS.state("empty")
-         );
-
-         if (children.length == 0) {
-            props.children.push(
-               <span key="baseline" className={this.CSS.element(this.baseClass, "baseline")}>
-                  &nbsp;
-               </span>
-            );
-         }
-      }
-   }
-}
-
-Button.prototype.tag = "button";
-Button.prototype.baseClass = "button";
-Button.prototype.icon = false;
-Button.prototype.focusOnMouseDown = false;
-Button.prototype.submit = false;
-
-Widget.alias("button", Button);
+import { Widget, VDOM, getContentArray } from "../ui/Widget";
+import { HtmlElement } from "./HtmlElement";
+import { yesNo } from "./overlay/alerts";
+import { Icon } from "./Icon";
+import { preventFocus } from "../ui/FocusManager";
+import { isFunction } from "../util/isFunction";
+import { isDefined } from "../util/isDefined";
+import { coalesce } from "../util/coalesce";
+
+export class Button extends HtmlElement {
+   declareData() {
+      super.declareData(...arguments, {
+         confirm: { structured: true },
+         pressed: undefined,
+         icon: undefined,
+         disabled: undefined,
+         enabled: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pressed: data.pressed,
+      };
+      if (isDefined(data.enabled)) data.disabled = !data.enabled;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      instance.data.parentDisabled = context.parentDisabled;
+      instance.data.parentStrict = context.parentStrict;
+
+      if (instance.cache("parentDisabled", context.parentDisabled)) instance.markShouldUpdate(context);
+      if (instance.cache("parentStrict", context.parentStrict)) instance.markShouldUpdate(context);
+
+      super.explore(context, instance);
+   }
+
+   attachProps(context, instance, props) {
+      super.attachProps(context, instance, props);
+
+      if (!this.focusOnMouseDown) {
+         props.onMouseDown = (e) => {
+            if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) == false) return;
+            preventFocus(e);
+         };
+      }
+
+      if (this.dismiss) {
+         let { onClick } = props;
+
+         props.onClick = (...args) => {
+            if (onClick && onClick(...args) === false) return;
+
+            if (instance.parentOptions && isFunction(instance.parentOptions.dismiss)) instance.parentOptions.dismiss();
+         };
+      }
+
+      if (this.tag === "button") props.type = this.submit ? "submit" : "button";
+
+      delete props.confirm;
+      delete props.dismiss;
+      delete props.pressed;
+      delete props.submit;
+      delete props.focusOnMouseDown;
+      delete props.icon;
+      delete props.enabled;
+
+      let oldOnClick,
+         { data } = instance;
+
+      props.disabled = coalesce(data.parentStrict ? data.parentDisabled : null, data.disabled, data.parentDisabled);
+
+      if (data.confirm) {
+         oldOnClick = props.onClick;
+         props.onClick = () => {
+            yesNo(data.confirm).then((btn) => {
+               if (btn == "yes") oldOnClick.call(this, null, instance);
+            });
+         };
+      }
+
+      let icon, children;
+
+      if (data.icon) {
+         icon = Icon.render(data.icon, {
+            key: "icon",
+            className: this.CSS.element(this.baseClass, "icon"),
+         });
+         children = getContentArray(props.children);
+         props.children = [icon, ...children];
+         props.className = this.CSS.expand(
+            props.className,
+            this.CSS.state("icon"),
+            children.length == 0 && this.CSS.state("empty")
+         );
+
+         if (children.length == 0) {
+            props.children.push(
+               <span key="baseline" className={this.CSS.element(this.baseClass, "baseline")}>
+                  &nbsp;
+               </span>
+            );
+         }
+      }
+   }
+}
+
+Button.prototype.tag = "button";
+Button.prototype.baseClass = "button";
+Button.prototype.icon = false;
+Button.prototype.focusOnMouseDown = false;
+Button.prototype.submit = false;
+
+Widget.alias("button", Button);

package/src/widgets/CxCredit.scss

@@ -1,37 +1,37 @@
-@mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
-
-   .#{$block}#{$name} {
-      width: 50px;
-      height: 50px;
-      opacity: 0.5;
-      transition: opacity 0.3s ease-in-out;
-      background: rgba(255, 255, 255, 0.1);
-      cursor: pointer;
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-
-      &:hover {
-         opacity: 1;
-      }
-
-      &.#{$mod}inline {
-         position: relative;
-         bottom: auto;
-         right: auto;
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      width: 100%;
-      height: 100%;
-   }
-}
-
-@if (cx-should-include("cx/widgets/CxCredit")) {
-   @include cx-cxcredit();
-}
+@mixin cx-cxcredit($name: "cxcredit", $besm: $cx-besm) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+   $mod: map-get($besm, mod);
+
+   .#{$block}#{$name} {
+      width: 50px;
+      height: 50px;
+      opacity: 0.5;
+      transition: opacity 0.3s ease-in-out;
+      background: rgba(255, 255, 255, 0.1);
+      cursor: pointer;
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+
+      &:hover {
+         opacity: 1;
+      }
+
+      &.#{$mod}inline {
+         position: relative;
+         bottom: auto;
+         right: auto;
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      width: 100%;
+      height: 100%;
+   }
+}
+
+@if (cx-should-include("cx/widgets/CxCredit")) {
+   @include cx-cxcredit();
+}

package/src/widgets/HighlightedSearchText.js

@@ -1,36 +1,36 @@
-import { Widget } from "../ui/Widget";
-import { VDOM } from "../ui/VDOM";
-import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
-
-export class HighlightedSearchText extends Widget {
-   declareData(...args) {
-      super.declareData(...args, {
-         text: undefined,
-         chunks: undefined,
-         query: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      let { text, chunks, query, classNames, style } = data;
-
-      if (!chunks && text && query) {
-         let highlighter = getSearchQueryHighlighter(query, { cache: true });
-         chunks = highlighter(text);
-      }
-
-      if (!chunks) return text;
-      return chunks.map((text, i) => {
-         if (i % 2 == 0) return text;
-         return (
-            <span key={`${key}-${i}`} className={classNames} style={style}>
-               {text}
-            </span>
-         );
-      });
-   }
-}
-
-HighlightedSearchText.prototype.styled = true;
-HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
+import { Widget } from "../ui/Widget";
+import { VDOM } from "../ui/VDOM";
+import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
+
+export class HighlightedSearchText extends Widget {
+   declareData(...args) {
+      super.declareData(...args, {
+         text: undefined,
+         chunks: undefined,
+         query: undefined,
+      });
+   }
+
+   render(context, instance, key) {
+      let { data } = instance;
+      let { text, chunks, query, classNames, style } = data;
+
+      if (!chunks && text && query) {
+         let highlighter = getSearchQueryHighlighter(query, { cache: true });
+         chunks = highlighter(text);
+      }
+
+      if (!chunks) return text;
+      return chunks.map((text, i) => {
+         if (i % 2 == 0) return text;
+         return (
+            <span key={`${key}-${i}`} className={classNames} style={style}>
+               {text}
+            </span>
+         );
+      });
+   }
+}
+
+HighlightedSearchText.prototype.styled = true;
+HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";

package/src/widgets/HighlightedSearchText.scss

@@ -1,18 +1,18 @@
-@mixin cxb-highlightedsearchtext(
-   $name: "highlightedsearchtext",
-   $styles: $cx-highlightedsearchtext-style-map,
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
-
-   .#{$block}#{$name} {
-      @include cx-add-rules($styles);
-   }
-}
-
-@if (cx-should-include("cx/widgets/HighlightedSearchText")) {
-   @include cxb-highlightedsearchtext();
-}
+@mixin cxb-highlightedsearchtext(
+   $name: "highlightedsearchtext",
+   $styles: $cx-highlightedsearchtext-style-map,
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+   $mod: map-get($besm, mod);
+
+   .#{$block}#{$name} {
+      @include cx-add-rules($styles);
+   }
+}
+
+@if (cx-should-include("cx/widgets/HighlightedSearchText")) {
+   @include cxb-highlightedsearchtext();
+}

package/src/widgets/List.scss

@@ -1,91 +1,91 @@
-@mixin cx-list($name: "list", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-   $mod: map-get($besm, mod);
-
-   .#{$block}#{$name} {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      overflow: auto;
-      border: 0 solid $cx-default-border-color;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-      @include cx-add-state-rules($cx-list, default);
-
-      &:hover {
-         @include cx-add-state-rules($cx-list, hover);
-      }
-
-      &.#{$state}focused {
-         @include cx-add-state-rules($cx-list, focus);
-      }
-
-      &.#{$mod}bordered {
-         border-width: 1px;
-
-         & > .#{$element}#{$name}-item:not(:first-child) {
-            border-top-width: 1px;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-item {
-      margin: 0;
-      border: 0 solid $cx-default-border-color;
-
-      @include cx-add-state-rules($cx-list-item, default);
-
-      &.#{$state}pad {
-         padding: $cx-default-list-item-padding;
-      }
-
-      .#{$state}selectable > & {
-         cursor: pointer;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($cx-list-item, hover);
-      }
-
-      &.#{$state}cursor {
-         @include cx-add-state-rules($cx-list-item, hover);
-
-         .#{$block}#{$name}.#{$state}focused > &,
-         .#{$block}#{$name}:focus > & {
-            @include cx-add-state-rules($cx-list-item, cursor);
-
-            &:active {
-               @include cx-add-state-rules($cx-list-item, active);
-            }
-         }
-      }
-
-      &.#{$state}selected {
-         @include cx-add-state-rules($cx-list-item, selected);
-
-         &.#{$state}cursor {
-            @include cx-add-state-rules($cx-list-item, selected-hover);
-
-            .#{$block}#{$name}.#{$state}focused > &,
-            .#{$block}#{$name}:focus > & {
-               @include cx-add-state-rules($cx-list-item, selected-cursor);
-            }
-         }
-      }
-
-      &.#{$state}disabled {
-         @include cx-add-state-rules($cx-list-item, disabled);
-      }
-   }
-
-   .#{$element}#{$name}-empty-text {
-      padding: $cx-default-list-item-padding;
-      color: $cx-default-empty-text-color;
-   }
-}
-
-@if (cx-should-include("cx/widgets/List")) {
-   @include cx-list();
-}
+@mixin cx-list($name: "list", $besm: $cx-besm) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+   $mod: map-get($besm, mod);
+
+   .#{$block}#{$name} {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      overflow: auto;
+      border: 0 solid $cx-default-border-color;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+      @include cx-add-state-rules($cx-list, default);
+
+      &:hover {
+         @include cx-add-state-rules($cx-list, hover);
+      }
+
+      &.#{$state}focused {
+         @include cx-add-state-rules($cx-list, focus);
+      }
+
+      &.#{$mod}bordered {
+         border-width: 1px;
+
+         & > .#{$element}#{$name}-item:not(:first-child) {
+            border-top-width: 1px;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-item {
+      margin: 0;
+      border: 0 solid $cx-default-border-color;
+
+      @include cx-add-state-rules($cx-list-item, default);
+
+      &.#{$state}pad {
+         padding: $cx-default-list-item-padding;
+      }
+
+      .#{$state}selectable > & {
+         cursor: pointer;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($cx-list-item, hover);
+      }
+
+      &.#{$state}cursor {
+         @include cx-add-state-rules($cx-list-item, hover);
+
+         .#{$block}#{$name}.#{$state}focused > &,
+         .#{$block}#{$name}:focus > & {
+            @include cx-add-state-rules($cx-list-item, cursor);
+
+            &:active {
+               @include cx-add-state-rules($cx-list-item, active);
+            }
+         }
+      }
+
+      &.#{$state}selected {
+         @include cx-add-state-rules($cx-list-item, selected);
+
+         &.#{$state}cursor {
+            @include cx-add-state-rules($cx-list-item, selected-hover);
+
+            .#{$block}#{$name}.#{$state}focused > &,
+            .#{$block}#{$name}:focus > & {
+               @include cx-add-state-rules($cx-list-item, selected-cursor);
+            }
+         }
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($cx-list-item, disabled);
+      }
+   }
+
+   .#{$element}#{$name}-empty-text {
+      padding: $cx-default-list-item-padding;
+      color: $cx-default-empty-text-color;
+   }
+}
+
+@if (cx-should-include("cx/widgets/List")) {
+   @include cx-list();
+}

package/src/widgets/Sandbox.js

@@ -16,15 +16,17 @@ export class Sandbox extends PureContainer {
 
    initInstance(context, instance) {
       instance.store = new ExposedValueView({
-         store: instance.store,
+         store: instance.parentStore,
          containerBinding: this.storageBinding,
          key: null,
          recordName: this.recordName,
          immutable: this.immutable,
       });
-      instance.setStore = (store) => {
-         instance.store.setStore(store);
-      };
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance) {
+      instance.store.setStore(instance.parentStore);
    }
 
    declareData() {
@@ -33,13 +35,15 @@ export class Sandbox extends PureContainer {
             storage: undefined,
             key: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
    prepareData(context, instance) {
       var { store, data } = instance;
       if (store.getKey() !== data.key) {
+         //when navigating to a page using the same widget tree as the previous page
+         //everything needs to be reinstantiated, e.g. user/1 => user/2
          instance.store = new ExposedValueView({
             store: store,
             containerBinding: this.storageBinding,
@@ -47,9 +51,6 @@ export class Sandbox extends PureContainer {
             recordName: this.recordName,
             immutable: this.immutable,
          });
-
-         //when navigating to a page using the same widget tree as the previous page
-         //everything needs to be reinstantiated, e.g. user/1 => user/2
          instance.clearChildrenCache();
       }
       super.prepareData(context, instance);