cx 25.11.1 → 26.0.1

package/src/util/parseStyle.js

@@ -1,27 +0,0 @@
-export function parseStyle(str) {
-   if (typeof str != "string") return str;
-
-   var style = {},
-      parts = str.split(";");
-
-   for (var i = 0; i < parts.length; i++) {
-      let part = parts[i];
-
-      let colonIndex = part.indexOf(":");
-      if (colonIndex == -1) continue;
-
-      let name = part.substring(0, colonIndex).trim();
-      let value = part.substring(colonIndex + 1).trim();
-
-      //avoid css variables
-      if (!name.startsWith("--")) {
-         name = name
-            .split("-")
-            .map((p, i) => (i == 0 ? p : p[0].toUpperCase() + p.substring(1)))
-            .join("");
-      }
-      style[name] = value;
-   }
-
-   return style;
-}

package/src/util/quote.d.ts

@@ -1,3 +0,0 @@
-
-export function quoteStr(str: string): string;
-export function quoteStr(str: null): null;

package/src/util/quote.js

@@ -1,4 +0,0 @@
-export function quoteStr(str) {
-   if (str == null) return str;
-   return JSON.stringify(str);
-}

package/src/util/reverseSlice.d.ts

@@ -1 +0,0 @@
-export function reverseSlice(array: any[], start: number);

package/src/util/reverseSlice.js

@@ -1,10 +0,0 @@
-export function reverseSlice(array, start) {
-   let last = array.length - 1;
-   while (start < last) {
-      let x = array[start];
-      array[start] = array[last];
-      array[last] = x;
-      start++;
-      last--;
-   }
-}

package/src/util/routeAppend.d.ts

@@ -1 +0,0 @@
-export function routeAppend(base: string, path: string): string;

package/src/util/routeAppend.js

@@ -1,16 +0,0 @@
-export function routeAppend(base, path) {
-   let result = base;
-   if (path) {
-      if (path[0] == '/') {
-         if (result[result.length - 1] == '/')
-            result += path.substring(1);
-         else
-            result += path;
-      }
-      else if (result[result.length - 1] == '/')
-         result += path;
-      else
-         result += '/' + path;
-   }
-   return result;
-}

package/src/util/scrollElementIntoView.d.ts

@@ -1,7 +0,0 @@
-export function scrollElementIntoView(
-   el: Element,
-   vertical?: boolean,
-   horizontal?: boolean,
-   inflate?: number,
-   scrollContainer?: HTMLElement
-): void;

package/src/util/scrollElementIntoView.js

@@ -1,34 +0,0 @@
-import { findScrollableParent } from "./findScrollableParent";
-import { getScrollerBoundingClientRect } from "./getScrollerBoundingClientRect";
-
-export function scrollElementIntoView(el, vertical = true, horizontal = false, inflate = 0, scrollContainer = null) {
-   if (horizontal) {
-      let parentEl = scrollContainer || findScrollableParent(el, true);
-      if (parentEl) {
-         let pr = getScrollerBoundingClientRect(parentEl);
-         let er = el.getBoundingClientRect();
-         let scrollbarWidth = parentEl.offsetWidth - parentEl.clientWidth;
-
-         if (er.right + inflate > pr.right - scrollbarWidth)
-            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.right + inflate - pr.right + scrollbarWidth);
-
-         if (er.left - inflate < pr.left)
-            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.left - inflate - pr.left);
-      }
-   }
-
-   if (vertical) {
-      let parentEl = scrollContainer || findScrollableParent(el);
-      if (parentEl) {
-         let pr = getScrollerBoundingClientRect(parentEl);
-         let er = el.getBoundingClientRect();
-         let scrollbarHeight = parentEl.offsetHeight - parentEl.clientHeight;
-
-         if (er.bottom + inflate > pr.bottom - scrollbarHeight)
-            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.bottom + inflate - pr.bottom + scrollbarHeight);
-
-         if (er.top - inflate < pr.top)
-            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.top - inflate - pr.top);
-      }
-   }
-}

package/src/util/shallowEquals.d.ts

@@ -1 +0,0 @@
-export function shallowEquals(v1: any, v2: any) : boolean;

package/src/util/shallowEquals.js

@@ -1,43 +0,0 @@
-import {isArray} from './isArray';
-
-export function shallowEquals(v1, v2) {
-
-   if (v1 === v2)
-      return true;
-
-   let t1 = typeof v1,
-      t2 = typeof v2,
-      k, i;
-
-   if (t1 != t2)
-      return false;
-
-   if (v1 == null || v2 == null) //this captures undefined too
-      return false;
-
-   if (t1 == 'object') {
-
-      if (isArray(v1)) {
-         if (!isArray(v2) || v1.length != v2.length)
-            return false;
-
-         for (i = 0; i < v1.length; i++)
-            if (!shallowEquals(v1[i], v2[i]))
-               return false;
-
-         return true;
-      }
-      else {
-         for (k in v1)
-            if (v1.hasOwnProperty(k) && (!v2.hasOwnProperty(k) || v1[k] !== v2[k]))
-               return false;
-
-         for (k in v2)
-            if (v2.hasOwnProperty(k) && (!v1.hasOwnProperty(k) || v1[k] !== v2[k]))
-               return false;
-
-         return true;
-      }
-   }
-   return v1 === v2;
-}

package/src/util/throttle.d.ts

@@ -1,9 +0,0 @@
-/**
- * Returns a function, that, after it is invoked, will trigger the `callback` function, 
- * after the `delay` amount of milliseconds has passed. During that time, all subsequent calls are
- * ignored. All arguments are passed to the `callback` function.
- * @param callback
- * @param delay - Delay in milliseconds. 
- * @returns {Function}
- */
-export function throttle(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void;

package/src/util/throttle.js

@@ -1,14 +0,0 @@
-export function throttle(callback, delay) {
-   let timer, context, args;
-
-   return function () {
-      context = this;
-      args = arguments;
-
-      if (!timer)
-         timer = setTimeout(function () {
-            callback.apply(context, args);
-            timer = null;
-         }, delay);
-   };
-}

package/src/util/validatedDebounce.js

@@ -1,19 +0,0 @@
-export function validatedDebounce(callback, valueGetter, delay) {
-   let timer;
-   let result = function (...args) {
-      clearTimeout(timer);
-      let prev = valueGetter();
-      timer = setTimeout(function () {
-         let now = valueGetter();
-         if (prev !== now) return;
-         callback(...args);
-      }, delay);
-   };
-
-   result.reset = function reset(...args) {
-      clearTimeout(timer);
-      callback(...args);
-   };
-
-   return result;
-}

package/src/widgets/Button.d.ts

@@ -1,58 +0,0 @@
-import * as Cx from "../core";
-import * as React from "react";
-import { Instance } from "../ui/Instance";
-
-export interface ButtonProps extends Cx.HtmlElementProps {
-   /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
-   confirm?: Cx.Prop<string | Cx.Config>;
-
-   /** If true button appears in pressed state. Useful for implementing toggle buttons. */
-   pressed?: Cx.BooleanProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp;
-
-   /** HTML tag to be used. Default is `button`. */
-   tag?: string;
-
-   /** Base CSS class to be applied to the element. Default is 'button'. */
-   baseClass?: string;
-
-   /**
-    * Determines if button should receive focus on mousedown event.
-    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
-    */
-   focusOnMouseDown?: boolean;
-
-   /** Add type="submit" to the button. */
-   submit?: boolean;
-
-   /** Set to `true` to disable the button. */
-   disabled?: Cx.BooleanProp;
-
-   /** Set to `false` to disable the button. */
-   enabled?: Cx.BooleanProp;
-
-   /**
-    * Click handler.
-    *
-    * @param e - Event.
-    * @param instance - Cx widget instance that fired the event.
-    */
-   onClick?: string | ((e: MouseEvent, instance: Instance) => void);
-
-   onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
-
-   /** Button type. */
-   type?: "submit" | "button";
-
-   /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */
-   dismiss?: boolean;
-
-   /** The form attribute specifies the form the button belongs to.
-    * The value of this attribute must be equal to the `id` attribute of a `<form>` element in the same document.
-    */
-   form?: Cx.StringProp;
-}
-
-export class Button extends Cx.Widget<ButtonProps> {}

package/src/widgets/Button.js

@@ -1,118 +0,0 @@
-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.d.ts

@@ -1,12 +0,0 @@
-import * as Cx from '../core';
-
-interface CxCreditProps extends Cx.HtmlElementProps {
-   
-   /** Base CSS class to be applied to the element. Defaults to `cxcredit`. */
-   baseClass?: string,
-   /** HTML tag to be used. Default is `div`. */
-   tag?: string
-
-}
-
-export class CxCredit extends Cx.Widget<CxCreditProps> {}

package/src/widgets/CxCredit.js

@@ -1,32 +0,0 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {HtmlElement} from './HtmlElement';
-import {Icon} from './Icon';
-
-export class CxCredit extends HtmlElement {
-
-   init() {
-      this.tooltip = {
-         mouseTrap: true,
-         title: 'Credits',
-         items: <cx>
-            <div ws>
-               User interface of this project is implemented using the CxJS framework.
-               For more information about CxJS, please visit
-               <a href="https://cxjs.io/" target="_blank">the CxJS homepage</a>.
-            </div>
-         </cx>
-      };
-      super.init();
-   }
-
-   attachProps(context, instance, props) {
-      props.children = Icon.render("cx", {
-         className: this.CSS.element(this.baseClass, "icon")
-      });
-   }
-}
-
-CxCredit.prototype.baseClass = "cxcredit";
-CxCredit.prototype.tag = "div";
-
-Widget.alias('cx-credit', CxCredit);

package/src/widgets/DocumentTitle.d.ts

@@ -1,11 +0,0 @@
-import * as Cx from '../core';
-
-interface DocumentTitleProps extends Cx.WidgetProps {
-
-   value?: Cx.StringProp,
-   append?: boolean,
-   action?: 'append' | 'replace' | 'prepend',
-   separator?: Cx.StringProp
-}
-
-export class DocumentTitle extends Cx.Widget<DocumentTitleProps> {}

package/src/widgets/DocumentTitle.js

@@ -1,69 +0,0 @@
-import {Widget} from '../ui/Widget';
-
-export class DocumentTitle extends Widget {
-   init() {
-      if (this.value)
-         this.text = this.value;
-
-      if (this.append)
-         this.action = "append";
-
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         value: undefined,
-         text: undefined,
-         action: undefined,
-         separator: undefined
-      });
-   }
-
-   explore(context, instance) {
-      if (!context.documentTitle) {
-         context.documentTitle = {
-            activeInstance: instance,
-            title: ''
-         }
-      }
-
-      let {data} = instance;
-
-      if (data.text) {
-
-         switch (data.action) {
-            case "append":
-               if (context.documentTitle.title)
-                  context.documentTitle.title += data.separator;
-               context.documentTitle.title += data.text;
-               break;
-
-            case "prepend":
-               context.documentTitle.title = data.text + data.separator + context.documentTitle.title;
-               break;
-
-            default:
-            case "replace":
-               context.documentTitle.title = data.text;
-               break;
-         }
-      }
-
-      super.explore(context, instance);
-   }
-
-   prepare(context, instance) {
-      if (context.documentTitle.activeInstance == instance)
-         document.title = context.documentTitle.title;
-   }
-
-   render() {
-      return null;
-   }
-}
-
-DocumentTitle.prototype.action = "append";
-DocumentTitle.prototype.separator = '';
-
-Widget.alias('document-title', DocumentTitle);

package/src/widgets/FlexBox.d.ts

@@ -1,69 +0,0 @@
-import * as Cx from "../core";
-
-interface FlexBoxProps extends Cx.StyledContainerProps {
-   /** Base CSS class. Default is `flexbox`. */
-   baseClass?: string;
-
-   /** Flex direction. Default is `row`.  */
-   direction?: string;
-
-   /**
-    * Add spacing between items by applying a margin to children.
-    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    * Value `true` is equivalent to `medium`.
-    */
-   spacing?: string | boolean;
-
-   /**
-    * Add horizontal spacing between items by applying a margin to children.
-    * Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    * Value `true` is equivalent to `medium`. \
-    */
-   hspacing?: boolean | string;
-
-   /**
-    * Add vertical spacing between items by applying a margin to children.
-    * Allowed values are xsmall, small, medium, large and xlarge.
-    * Value true is equivalent to medium.
-    */
-   vspacing?: boolean | string;
-
-   styled?: boolean;
-
-   /**
-    * Add padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    *  Value `true` is equivalent to `medium`.
-    */
-   pad?: boolean | string;
-   padding?: boolean | string;
-
-   /**
-    * Add horizontal padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    *  Value `true` is equivalent to `medium`.
-    */
-   hpad?: boolean | string;
-   hpadding?: boolean | string;
-
-   /**
-    * Add vertical padding to the box. Allowed values are `xsmall`, `small`, `medium`, `large` and `xlarge`.
-    *  Value `true` is equivalent to `medium`.
-    */
-   vpad?: boolean | string;
-   vpadding?: boolean | string;
-
-   wrap?: boolean;
-   align?: "start" | "center" | "end" | "baseline" | "stretch";
-   justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
-   target?: string;
-
-   /**
-    * Set to true to add overflow styles required for deeply nested flexbox calculations.
-    */
-   nested?: boolean;
-}
-
-export class FlexBox extends Cx.Widget<FlexBoxProps> {}
-
-export class FlexRow extends FlexBox {}
-
-export class FlexCol extends FlexBox {}

package/src/widgets/FlexBox.js

@@ -1,93 +0,0 @@
-import {VDOM} from '../ui/Widget';
-import {Container} from '../ui/Container';
-import {isUndefined} from '../util/isUndefined';
-
-export class FlexBox extends Container {
-
-   init() {
-      if (this.padding)
-         this.pad = this.padding;
-      
-      if (this.hpadding)
-         this.hpad = this.hpadding;
-
-      if (this.vpadding)
-         this.vpad = this.vpadding;
-
-      this.hpad = isUndefined(this.hpad) ? this.pad : this.hpad;
-      this.vpad = isUndefined(this.vpad) ? this.pad : this.hpad;
-
-      if (this.hpad === true)
-         this.hpad = 'medium';
-
-      if (this.vpad === true)
-         this.vpad = 'medium';
-      
-      this.hspacing = isUndefined(this.hspacing) ? this.spacing : this.hspacing;
-      this.vspacing = isUndefined(this.vspacing) ? this.spacing : this.vspacing;
-
-      if (this.hspacing === true)
-         this.hspacing = 'medium';
-
-      if (this.vspacing === true)
-         this.vspacing = 'medium';
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.eventHandlers = instance.getJsxEventProps();
-      super.initInstance(context, instance);
-   }
-
-   prepareCSS(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         [this.hpad + '-hpad']: this.hpad,
-         [this.vpad + '-vpad']: this.vpad,
-         nested: this.nested
-      };
-      super.prepareCSS(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data, eventHandlers} = instance;
-      let {CSS, baseClass} = this;
-      let flexboxMods = {
-         [this.hspacing + '-hspacing']: this.hspacing,
-         [this.vspacing + '-vspacing']: this.vspacing,
-         ['align-' + this.align]: this.align,
-         ['justify-' + this.justify]: this.justify,
-         wrap: this.wrap,
-         ['target-' + this.target]: true,
-         [this.direction]: true
-      };
-
-      return <div key={key} className={data.classNames} style={data.style} {...eventHandlers}>
-         <div className={CSS.element(baseClass, 'flexbox', flexboxMods)}>
-            {this.renderChildren(context, instance)}
-         </div>
-      </div>
-   }
-}
-
-FlexBox.prototype.baseClass = "flexbox";
-FlexBox.prototype.styled = true;
-FlexBox.prototype.direction = 'row';
-FlexBox.prototype.spacing = false;
-FlexBox.prototype.hspacing = undefined;
-FlexBox.prototype.vspacing = undefined;
-FlexBox.prototype.pad = false;
-FlexBox.prototype.hpad = undefined;
-FlexBox.prototype.vpad = undefined;
-FlexBox.prototype.wrap = false;
-FlexBox.prototype.align = false;
-FlexBox.prototype.justify = false;
-FlexBox.prototype.target = 'any';
-FlexBox.prototype.nested = false;
-
-export class FlexRow extends FlexBox {}
-
-export class FlexCol extends FlexBox {}
-FlexCol.prototype.direction = 'column';