cx 24.4.1 → 24.4.2

package/src/widgets/Resizer.js

@@ -1,151 +1,151 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { captureMouseOrTouch, getCursorPos } from "./overlay/captureMouse";
-
-export class Resizer extends Widget {
-   declareData(...args) {
-      super.declareData(...args, {
-         size: undefined,
-         defaultSize: undefined,
-         minSize: undefined,
-         maxSize: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-
-      return <ResizerCmp key={key} instance={instance} data={data} />;
-   }
-}
-
-Resizer.prototype.baseClass = "resizer";
-Resizer.prototype.styled = true;
-Resizer.prototype.horizontal = false;
-Resizer.prototype.forNextElement = false;
-Resizer.prototype.defaultSize = null;
-Resizer.prototype.minSize = 0;
-Resizer.prototype.maxSize = 1e6;
-
-class ResizerCmp extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.state = {
-         dragged: false,
-         offset: 0,
-      };
-   }
-
-   shouldComponentUpdate(props, state) {
-      return state != this.state;
-   }
-
-   render() {
-      let { instance, data } = this.props;
-      let { widget } = instance;
-      let { baseClass, CSS } = widget;
-
-      return (
-         <div
-            ref={(el) => {
-               this.el = el;
-            }}
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  vertical: !widget.horizontal,
-                  horizontal: widget.horizontal,
-               })
-            )}
-            style={data.style}
-            onDoubleClick={(e) => {
-               instance.set("size", data.defaultSize);
-            }}
-            onMouseDown={(e) => {
-               let initialPosition = getCursorPos(e);
-               this.setState({ dragged: true, initialPosition });
-            }}
-            onMouseUp={(e) => {
-               this.setState({ dragged: false });
-            }}
-            onMouseMove={this.startCapture.bind(this)}
-            onMouseLeave={this.startCapture.bind(this)}
-         >
-            <div
-               className={CSS.element(baseClass, "handle", { dragged: this.state.dragged })}
-               style={{
-                  left: !widget.horizontal ? this.state.offset : 0,
-                  top: widget.horizontal ? this.state.offset : 0,
-               }}
-            />
-         </div>
-      );
-   }
-
-   startCapture(e) {
-      let { instance } = this.props;
-      let { widget } = instance;
-
-      if (this.state.dragged && !this.hasCapture) {
-         this.hasCapture = true;
-         captureMouseOrTouch(
-            e,
-            this.onHandleMove.bind(this),
-            this.onDragComplete.bind(this),
-            this.state.initialPosition,
-            widget.horizontal ? "row-resize" : "col-resize"
-         );
-      }
-   }
-
-   onHandleMove(e, initialPosition) {
-      let { instance } = this.props;
-      let { widget } = instance;
-      let currentPosition = getCursorPos(e);
-      const offset = !widget.horizontal
-         ? currentPosition.clientX - initialPosition.clientX
-         : currentPosition.clientY - initialPosition.clientY;
-
-      let size = this.getNewSize(0);
-      let newSize = this.getNewSize(offset);
-
-      let allowedOffset = widget.forNextElement ? size - newSize : newSize - size;
-
-      this.setState({ offset: allowedOffset });
-   }
-
-   getNewSize(offset) {
-      let { instance, data } = this.props;
-      let { horizontal, forNextElement } = instance.widget;
-
-      if (
-         !this.el ||
-         (!forNextElement && !this.el.previousElementSibling) ||
-         (forNextElement && !this.el.nextElementSibling)
-      )
-         return 0;
-
-      let newSize;
-
-      if (horizontal) {
-         if (forNextElement) newSize = this.el.nextElementSibling.offsetHeight - offset;
-         else newSize = this.el.previousElementSibling.offsetHeight + offset;
-      } else {
-         if (forNextElement) newSize = this.el.nextElementSibling.offsetWidth - offset;
-         else newSize = this.el.previousElementSibling.offsetWidth + offset;
-      }
-
-      return Math.max(data.minSize, Math.min(newSize, data.maxSize));
-   }
-
-   onDragComplete() {
-      this.hasCapture = false;
-      let { instance } = this.props;
-
-      instance.set("size", this.getNewSize(this.state.offset));
-
-      this.setState({
-         dragged: false,
-         offset: 0,
-      });
-   }
-}
+import { Widget, VDOM } from "../ui/Widget";
+import { captureMouseOrTouch, getCursorPos } from "./overlay/captureMouse";
+
+export class Resizer extends Widget {
+   declareData(...args) {
+      super.declareData(...args, {
+         size: undefined,
+         defaultSize: undefined,
+         minSize: undefined,
+         maxSize: undefined,
+      });
+   }
+
+   render(context, instance, key) {
+      let { data } = instance;
+
+      return <ResizerCmp key={key} instance={instance} data={data} />;
+   }
+}
+
+Resizer.prototype.baseClass = "resizer";
+Resizer.prototype.styled = true;
+Resizer.prototype.horizontal = false;
+Resizer.prototype.forNextElement = false;
+Resizer.prototype.defaultSize = null;
+Resizer.prototype.minSize = 0;
+Resizer.prototype.maxSize = 1e6;
+
+class ResizerCmp extends VDOM.Component {
+   constructor(props) {
+      super(props);
+      this.state = {
+         dragged: false,
+         offset: 0,
+      };
+   }
+
+   shouldComponentUpdate(props, state) {
+      return state != this.state;
+   }
+
+   render() {
+      let { instance, data } = this.props;
+      let { widget } = instance;
+      let { baseClass, CSS } = widget;
+
+      return (
+         <div
+            ref={(el) => {
+               this.el = el;
+            }}
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  vertical: !widget.horizontal,
+                  horizontal: widget.horizontal,
+               })
+            )}
+            style={data.style}
+            onDoubleClick={(e) => {
+               instance.set("size", data.defaultSize);
+            }}
+            onMouseDown={(e) => {
+               let initialPosition = getCursorPos(e);
+               this.setState({ dragged: true, initialPosition });
+            }}
+            onMouseUp={(e) => {
+               this.setState({ dragged: false });
+            }}
+            onMouseMove={this.startCapture.bind(this)}
+            onMouseLeave={this.startCapture.bind(this)}
+         >
+            <div
+               className={CSS.element(baseClass, "handle", { dragged: this.state.dragged })}
+               style={{
+                  left: !widget.horizontal ? this.state.offset : 0,
+                  top: widget.horizontal ? this.state.offset : 0,
+               }}
+            />
+         </div>
+      );
+   }
+
+   startCapture(e) {
+      let { instance } = this.props;
+      let { widget } = instance;
+
+      if (this.state.dragged && !this.hasCapture) {
+         this.hasCapture = true;
+         captureMouseOrTouch(
+            e,
+            this.onHandleMove.bind(this),
+            this.onDragComplete.bind(this),
+            this.state.initialPosition,
+            widget.horizontal ? "row-resize" : "col-resize"
+         );
+      }
+   }
+
+   onHandleMove(e, initialPosition) {
+      let { instance } = this.props;
+      let { widget } = instance;
+      let currentPosition = getCursorPos(e);
+      const offset = !widget.horizontal
+         ? currentPosition.clientX - initialPosition.clientX
+         : currentPosition.clientY - initialPosition.clientY;
+
+      let size = this.getNewSize(0);
+      let newSize = this.getNewSize(offset);
+
+      let allowedOffset = widget.forNextElement ? size - newSize : newSize - size;
+
+      this.setState({ offset: allowedOffset });
+   }
+
+   getNewSize(offset) {
+      let { instance, data } = this.props;
+      let { horizontal, forNextElement } = instance.widget;
+
+      if (
+         !this.el ||
+         (!forNextElement && !this.el.previousElementSibling) ||
+         (forNextElement && !this.el.nextElementSibling)
+      )
+         return 0;
+
+      let newSize;
+
+      if (horizontal) {
+         if (forNextElement) newSize = this.el.nextElementSibling.offsetHeight - offset;
+         else newSize = this.el.previousElementSibling.offsetHeight + offset;
+      } else {
+         if (forNextElement) newSize = this.el.nextElementSibling.offsetWidth - offset;
+         else newSize = this.el.previousElementSibling.offsetWidth + offset;
+      }
+
+      return Math.max(data.minSize, Math.min(newSize, data.maxSize));
+   }
+
+   onDragComplete() {
+      this.hasCapture = false;
+      let { instance } = this.props;
+
+      instance.set("size", this.getNewSize(this.state.offset));
+
+      this.setState({
+         dragged: false,
+         offset: 0,
+      });
+   }
+}

package/src/widgets/Resizer.scss

@@ -1,43 +1,43 @@
-
-@mixin cx-resizer(
-   $name: 'resizer',
-   $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} {
-      position: relative;
-      flex-shrink: 0;
-
-      &.#{$state}vertical {
-         width: 5px;
-         cursor: col-resize;
-      }
-
-
-      &.#{$state}horizontal {
-         height: 5px;
-         cursor: row-resize;
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-
-      &.#{$state}dragged {
-         background: rgba(gray, 0.5);
-      }
-   }
-}
-
-@if (cx-should-include('cx/widgets/Resizer')) {
-   @include cx-resizer();
+
+@mixin cx-resizer(
+   $name: 'resizer',
+   $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} {
+      position: relative;
+      flex-shrink: 0;
+
+      &.#{$state}vertical {
+         width: 5px;
+         cursor: col-resize;
+      }
+
+
+      &.#{$state}horizontal {
+         height: 5px;
+         cursor: row-resize;
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+
+      &.#{$state}dragged {
+         background: rgba(gray, 0.5);
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/Resizer')) {
+   @include cx-resizer();
 }

package/src/widgets/Sandbox.d.ts

@@ -1,16 +1,16 @@
-import * as Cx from "../core";
-
-interface SandboxProps extends Cx.PureContainerProps {
-   storage: Cx.Prop<Cx.Record>;
-
-   /* Cx.StringProp doesn't work for unknown reason */
-   key?: any;
-
-   accessKey?: Cx.StringProp;
-
-   recordName?: Cx.RecordAlias;
-   recordAlias?: Cx.RecordAlias;
-   immutable?: Cx.BooleanProp;
-}
-
-export class Sandbox extends Cx.Widget<SandboxProps> {}
+import * as Cx from "../core";
+
+interface SandboxProps extends Cx.PureContainerProps {
+   storage: Cx.Prop<Cx.Record>;
+
+   /* Cx.StringProp doesn't work for unknown reason */
+   key?: any;
+
+   accessKey?: Cx.StringProp;
+
+   recordName?: Cx.RecordAlias;
+   recordAlias?: Cx.RecordAlias;
+   immutable?: Cx.BooleanProp;
+}
+
+export class Sandbox extends Cx.Widget<SandboxProps> {}

package/src/widgets/Sandbox.js

@@ -1,62 +1,62 @@
-import { Widget } from "../ui/Widget";
-import { PureContainer } from "../ui/PureContainer";
-import { Binding } from "../data/Binding";
-import { ExposedValueView } from "../data/ExposedValueView";
-
-export class Sandbox extends PureContainer {
-   init() {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.accessKey) this.key = this.accessKey;
-
-      this.storageBinding = Binding.get(this.storage);
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.store = new ExposedValueView({
-         store: instance.store,
-         containerBinding: this.storageBinding,
-         key: null,
-         recordName: this.recordName,
-         immutable: this.immutable,
-      });
-      instance.setStore = (store) => {
-         instance.store.setStore(store);
-      };
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            storage: undefined,
-            key: undefined,
-         },
-         ...arguments
-      );
-   }
-
-   prepareData(context, instance) {
-      var { store, data } = instance;
-      if (store.getKey() !== data.key) {
-         instance.store = new ExposedValueView({
-            store: store,
-            containerBinding: this.storageBinding,
-            key: data.key,
-            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);
-   }
-}
-
-Sandbox.prototype.recordName = "$page";
-Sandbox.prototype.immutable = false;
-
-Widget.alias("sandbox", Sandbox);
+import { Widget } from "../ui/Widget";
+import { PureContainer } from "../ui/PureContainer";
+import { Binding } from "../data/Binding";
+import { ExposedValueView } from "../data/ExposedValueView";
+
+export class Sandbox extends PureContainer {
+   init() {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.accessKey) this.key = this.accessKey;
+
+      this.storageBinding = Binding.get(this.storage);
+
+      super.init();
+   }
+
+   initInstance(context, instance) {
+      instance.store = new ExposedValueView({
+         store: instance.store,
+         containerBinding: this.storageBinding,
+         key: null,
+         recordName: this.recordName,
+         immutable: this.immutable,
+      });
+      instance.setStore = (store) => {
+         instance.store.setStore(store);
+      };
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            storage: undefined,
+            key: undefined,
+         },
+         ...arguments
+      );
+   }
+
+   prepareData(context, instance) {
+      var { store, data } = instance;
+      if (store.getKey() !== data.key) {
+         instance.store = new ExposedValueView({
+            store: store,
+            containerBinding: this.storageBinding,
+            key: data.key,
+            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);
+   }
+}
+
+Sandbox.prototype.recordName = "$page";
+Sandbox.prototype.immutable = false;
+
+Widget.alias("sandbox", Sandbox);

package/src/widgets/Section.d.ts

@@ -1,52 +1,52 @@
-import {
-   Widget,
-   Prop,
-   StyledContainerProps,
-   BooleanProp,
-   StringProp,
-   StyleProp,
-   ClassProp,
-   Config
-} from '../core';
-
-interface SectionProps extends StyledContainerProps {
-
-   id?: Prop<string | number>,
-
-   /** Add default padding to the section body. Default is `true`. */
-   pad?: BooleanProp,
-
-   /** A custom style which will be applied to the header. */
-   headerStyle?: StyleProp,
-
-   /** Additional CSS class to be applied to the header. */
-   headerClass?: ClassProp,
-
-   /** A custom style which will be applied to the body. */
-   bodyStyle?: StyleProp,
-
-   /** Additional CSS class to be applied to the section body. */
-   bodyClass?: ClassProp,
-
-   /** A custom style which will be applied to the footer. */
-   footerStyle?: StyleProp,
-
-   /** Additional CSS class to be applied to the footer. */
-   footerClass?: ClassProp,
-
-   /** Section's title. */
-   title?: StringProp,
-
-   /** Contents that should go in the header. */
-   header?: Config,
-
-   /** Contents that should go in the footer. */
-   footer?: Config,
-
-   /** Title heading level (1-6) */
-   hLevel?: number
-
-}
-
-export class Section extends Widget<SectionProps> {
-}
+import {
+   Widget,
+   Prop,
+   StyledContainerProps,
+   BooleanProp,
+   StringProp,
+   StyleProp,
+   ClassProp,
+   Config
+} from '../core';
+
+interface SectionProps extends StyledContainerProps {
+
+   id?: Prop<string | number>,
+
+   /** Add default padding to the section body. Default is `true`. */
+   pad?: BooleanProp,
+
+   /** A custom style which will be applied to the header. */
+   headerStyle?: StyleProp,
+
+   /** Additional CSS class to be applied to the header. */
+   headerClass?: ClassProp,
+
+   /** A custom style which will be applied to the body. */
+   bodyStyle?: StyleProp,
+
+   /** Additional CSS class to be applied to the section body. */
+   bodyClass?: ClassProp,
+
+   /** A custom style which will be applied to the footer. */
+   footerStyle?: StyleProp,
+
+   /** Additional CSS class to be applied to the footer. */
+   footerClass?: ClassProp,
+
+   /** Section's title. */
+   title?: StringProp,
+
+   /** Contents that should go in the header. */
+   header?: Config,
+
+   /** Contents that should go in the footer. */
+   footer?: Config,
+
+   /** Title heading level (1-6) */
+   hLevel?: number
+
+}
+
+export class Section extends Widget<SectionProps> {
+}