cx 25.11.1 → 26.0.2

package/src/widgets/nav/Scroller.js

@@ -1,214 +0,0 @@
-import { Icon } from "../Icon";
-import { VDOM } from "../../ui/Widget";
-import { Container } from "../../ui/Container";
-import { ResizeManager } from "../../ui/ResizeManager";
-import { isString, scrollElementIntoView } from "../../util";
-
-export class Scroller extends Container {
-   init() {
-      if (!this.vertical) this.horizontal = true; //default
-
-      super.init();
-   }
-
-   declareData(...args) {
-      super.declareData(...args, {
-         scrollIntoViewSelector: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-
-      return (
-         <HScrollerComponent key={key} widget={this} data={instance.data}>
-            {this.renderChildren(context, instance)}
-         </HScrollerComponent>
-      );
-   }
-}
-
-Scroller.prototype.styled = true;
-Scroller.prototype.baseClass = "scroller";
-
-export class HScrollerComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.stopScrolling = () => {
-         delete this.doScroll;
-      };
-      this.scrollLeft = (e) => this.scroll(e, "left");
-      this.scrollRight = (e) => this.scroll(e, "right");
-      this.scrollUp = (e) => this.scroll(e, "up");
-      this.scrollDown = (e) => this.scroll(e, "down");
-      this.state = { scrollable: false };
-   }
-
-   render() {
-      let { data, children, widget } = this.props;
-      let { CSS, baseClass } = widget;
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  scrollable: this.state.scrollable,
-                  horizontal: widget.horizontal,
-                  vertical: widget.vertical,
-               })
-            )}
-            style={data.style}
-            ref={(el) => {
-               this.el = el;
-            }}
-         >
-            {widget.horizontal && (
-               <div
-                  className={CSS.element(baseClass, "left-arrow")}
-                  onMouseDown={this.scrollLeft}
-                  onTouchStart={this.scrollLeft}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            {widget.horizontal && (
-               <div
-                  className={CSS.element(baseClass, "right-arrow")}
-                  onMouseDown={this.scrollRight}
-                  onTouchStart={this.scrollRight}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            {widget.vertical && (
-               <div
-                  className={CSS.element(baseClass, "top-arrow")}
-                  onMouseDown={this.scrollUp}
-                  onTouchStart={this.scrollUp}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            {widget.vertical && (
-               <div
-                  className={CSS.element(baseClass, "bottom-arrow")}
-                  onMouseDown={this.scrollDown}
-                  onTouchStart={this.scrollDown}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            <div
-               className={CSS.element(baseClass, "clip")}
-               ref={(el) => {
-                  this.clip = el;
-               }}
-            >
-               <div
-                  className={CSS.element(baseClass, "scroller")}
-                  ref={(el) => {
-                     this.scroller = el;
-                  }}
-               >
-                  <div
-                     className={CSS.element(baseClass, "content")}
-                     ref={(el) => {
-                        this.content = el;
-                     }}
-                  >
-                     {children}
-                  </div>
-               </div>
-            </div>
-         </div>
-      );
-   }
-
-   componentDidMount() {
-      this.unsubscribeResize = ResizeManager.trackElement(this.clip, this.componentDidUpdate.bind(this));
-      this.componentDidUpdate();
-   }
-
-   componentDidUpdate() {
-      let { widget } = this.props;
-      let scrollable = false;
-      if (widget.horizontal) {
-         let scrollSize = this.scroller.offsetHeight - this.scroller.clientHeight;
-         this.scroller.style.marginBottom = `${-scrollSize}px`;
-         if (this.content.scrollWidth > this.clip.clientWidth) scrollable = true;
-      }
-      if (widget.vertical) {
-         let scrollSize = this.scroller.offsetWidth - this.scroller.clientWidth;
-         this.scroller.style.marginRight = `${-scrollSize}px`;
-         if (this.content.scrollHeight > this.clip.clientHeight) scrollable = true;
-      }
-      if (scrollable != this.state.scrollable) this.setState({ scrollable });
-
-      this.scrollIntoView();
-   }
-
-   componentWillUnmount() {
-      this.unsubscribeResize();
-   }
-
-   scroll(e, direction) {
-      e.stopPropagation();
-      e.preventDefault();
-
-      this.doScroll = () => {
-         if (!this.scroller) return;
-
-         switch (direction) {
-            case "left":
-               this.scroller.scrollLeft -= 10;
-               break;
-
-            case "right":
-               this.scroller.scrollLeft += 10;
-               break;
-
-            case "up":
-               this.scroller.scrollTop -= 10;
-               break;
-
-            case "down":
-               this.scroller.scrollTop += 10;
-               break;
-         }
-
-         if (this.doScroll) requestAnimationFrame(this.doScroll);
-      };
-      this.doScroll();
-   }
-
-   scrollIntoView() {
-      let { data, widget } = this.props;
-      let { scrollIntoViewSelector } = data;
-
-      if (isString(scrollIntoViewSelector)) {
-         let child = this.el.querySelector(scrollIntoViewSelector);
-         if (child) scrollElementIntoView(child, widget.vertical, widget.horizontal);
-      }
-   }
-}
-
-export class HScroller extends Scroller {}
-
-HScroller.prototype.horizontal = true;
-
-export class VScroller extends Scroller {}
-
-VScroller.prototype.vertical = true;

package/src/widgets/nav/Submenu.d.ts

@@ -1,6 +0,0 @@
-import * as Cx from '../../core';
-import { MenuItemProps } from './MenuItem';
-
-interface SubmenuProps extends MenuItemProps {}
-
-export class Submenu extends Cx.Widget<SubmenuProps> {}

package/src/widgets/nav/Submenu.js

@@ -1,6 +0,0 @@
-import {MenuItem} from './MenuItem';
-
-export class Submenu extends MenuItem {}
-
-
-

package/src/widgets/nav/Tab.d.ts

@@ -1,33 +0,0 @@
-import * as Cx from '../../core';
-
-interface TabProps extends Cx.HtmlElementProps {
-
-   /** A value to be written to the `value` property if the tab is clicked. */
-   tab?: Cx.Prop<string | number>,
-
-   /** 
-    * Value of the currently selected tab. 
-    * If `value` is equal to `tab`, the tab appears active. 
-    */
-   value?: Cx.StringProp,
-
-   /** Set to `true` to disable selection. */
-   disabled?: Cx.BooleanProp,
- 
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string,
-
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string,
-   
-   /** Determines if tab should receive focus on `mousedown` event. 
-    *  Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
-    */
-   focusOnMouseDown?: boolean,
-
-   /** Set to true to set the default tab. */
-   default?: boolean
-   
-}
-
-export class Tab extends Cx.Widget<TabProps> {}

package/src/widgets/nav/Tab.js

@@ -1,82 +0,0 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { preventFocusOnTouch } from "../../ui/FocusManager";
-import { isUndefined } from "../../util/isUndefined";
-
-export class Tab extends HtmlElement {
-   declareData() {
-      super.declareData(
-         {
-            tab: undefined,
-            value: undefined,
-            disabled: undefined,
-            text: undefined,
-         },
-         ...arguments
-      );
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         active: data.tab == data.value,
-         disabled: data.disabled,
-         shape: this.shape,
-      };
-      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "value":
-         case "tab":
-         case "text":
-         case "disabled":
-         case "default":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-      if (!data.disabled) {
-         props.href = "#";
-         delete props.value;
-
-         props.onMouseDown = (e) => {
-            if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
-            preventFocusOnTouch(e);
-         };
-
-         props.onClick = (e) => this.handleClick(e, instance);
-      }
-   }
-
-   handleClick(e, instance) {
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
-         return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      let { data } = instance;
-
-      if (data.disabled) return;
-
-      instance.set("value", data.tab);
-   }
-}
-
-Tab.prototype.baseClass = "tab";
-Tab.prototype.tag = "a";
-Tab.prototype.focusOnMouseDown = false;
-Tab.prototype.default = false;
-
-Widget.alias("tab", Tab);

package/src/widgets/nav/index.js

@@ -1,10 +0,0 @@
-export * from './Route';
-export * from './RedirectRoute';
-export * from './Tab';
-export * from './Link';
-export * from './LinkButton';
-export * from './Menu';
-export * from './MenuItem';
-export * from './MenuSpacer';
-export * from './Submenu';
-export * from './Scroller';

package/src/widgets/overlay/ContextMenu.d.ts

@@ -1,10 +0,0 @@
-import * as Cx from "../../core";
-import { View } from "../../data/View";
-import { Instance } from "../../ui";
-import { DropdownProps } from "./Dropdown";
-
-export interface ContextMenuProps extends DropdownProps {}
-
-export class ContextMenu extends Cx.Widget<ContextMenuProps> {}
-
-export function openContextMenu(e: MouseEvent, contents: any, storeOrInstance?: View | Instance, options?: any);

package/src/widgets/overlay/ContextMenu.js

@@ -1,29 +0,0 @@
-import { Dropdown } from "./Dropdown";
-import { getCursorPos } from "./captureMouse";
-
-export class ContextMenu extends Dropdown {}
-ContextMenu.prototype.trackMouse = true;
-ContextMenu.prototype.dismissOnFocusOut = true;
-ContextMenu.prototype.firstChildDefinesWidth = true;
-ContextMenu.prototype.matchWidth = false;
-ContextMenu.prototype.placementOrder = "down-right right up-right down-left left up-left";
-ContextMenu.prototype.offset = 0;
-ContextMenu.prototype.autoFocus = true;
-ContextMenu.prototype.autoFocusFirstChild = false;
-ContextMenu.prototype.focusable = true;
-
-export const openContextMenu = (e, content, storeOrInstance, options) => {
-   e.preventDefault();
-   e.stopPropagation();
-   let position = getCursorPos(e);
-   let menu = ContextMenu.create({
-      relatedElement: e.currentTarget,
-      mousePosition: {
-         x: position.clientX,
-         y: position.clientY,
-      },
-      trackMouse: true,
-      items: content,
-   });
-   menu.open(storeOrInstance, options);
-};

package/src/widgets/overlay/Dropdown.d.ts

@@ -1,32 +0,0 @@
-import * as Cx from "../../core";
-import { OverlayProps } from "./Overlay";
-
-export interface DropdownProps extends OverlayProps {
-   // TODO: check if string literals should be used instead
-   placement?: Cx.StringProp | Cx.Prop<null>;
-
-   offset?: number;
-   matchWidth?: boolean;
-   matchMaxWidth?: boolean;
-   placementOrder?: string;
-   constrain?: boolean;
-   positioning?: string;
-   touchFriendly?: boolean;
-   arrow?: boolean;
-   pad?: boolean;
-   elementExplode?: number;
-   screenPadding?: number;
-   firstChildDefinesHeight?: boolean;
-   firstChildDefinesWidth?: boolean;
-
-   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
-   closeOnScrollDistance?: number;
-
-   relatedElement?: Element;
-
-   onResolveRelatedElement?: string | ((beaconEl: Element, instance: any) => Element);
-
-   onMeasureNaturalContentSize?: string | ((el: Element, instance: any) => { width?: number; height?: number });
-}
-
-export class Dropdown extends Cx.Widget<DropdownProps> {}