cx 25.11.1 → 26.0.1

package/src/widgets/grid/GridCell.d.ts

@@ -1,38 +0,0 @@
-import * as Cx from "../../core";
-
-interface GridCellProps extends Cx.PureContainerProps {
-   /** Selector used to obtain the value that should be displayed inside the cell. Not required if `field` is used. */
-   value?: Cx.StringProp | Cx.NumberProp;
-
-   /** Selector used to obtain the weight of the cell in aggregate operations, such as weighted averages. */
-   weight?: Cx.Prop<any>;
-
-   /** Add default padding to grid cell. */
-   pad?: Cx.BooleanProp;
-
-   /** Format specifier used to convert the value into a string. */
-   format?: Cx.StringProp;
-
-   /** Name of the field that holds the value to be displayed. */
-   field?: boolean;
-
-   /** Record alias. Default is `$record`. */
-   recordName?: string;
-
-   /** Record alias. Default is `$record`. */
-   recordAlias?: string;
-
-   /** Indicate if a cell is editable or not. Default value is true. */
-   editable?: boolean;
-
-   /**
-    * Used to indicate that the adjacent cells in the column should be merged together.
-    * If set to `same-value`, only cells with the same value will be merged.
-    * If set to `always`, all cells within the group will be merged.
-    * This is an experimental feature that might not work well with other
-    * grid related features such as multi-line rows, buffered rendering, etc.
-    */
-   mergeCells?: Cx.Prop<"same-value" | "always">;
-}
-
-export class GridCell extends Cx.Widget<GridCellProps> {}

package/src/widgets/grid/GridCell.js

@@ -1,71 +0,0 @@
-import { PureContainer } from "../../ui/PureContainer";
-import { Format } from "../../ui/Format";
-import { VDOM } from "../../ui/Widget";
-import { isUndefined } from "../../util/isUndefined";
-
-export class GridCell extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         value: undefined,
-         aggregateValue: undefined,
-         weight: undefined,
-         pad: undefined,
-         format: undefined,
-         colSpan: undefined,
-         rowSpan: undefined,
-         editable: undefined,
-         fixed: undefined,
-         mergeCells: undefined,
-      });
-   }
-
-   init() {
-      if (!this.value && this.field) this.value = { bind: this.recordName + "." + this.field };
-
-      if (isUndefined(this.editable)) this.editable = !!this.editor;
-
-      super.init();
-   }
-
-   prepareCSS(context, instance) {
-      let { data } = instance;
-
-      data.classNames = this.CSS.expand(
-         data.className,
-         data.class,
-         this.CSS.state({
-            pad: data.pad,
-            editable: data.editable,
-            ["aligned-" + this.align]: this.align,
-            mergable: data.merged,
-         }),
-      );
-
-      data.style = this.CSS.parseStyle(data.style);
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      let content;
-
-      if (this.items.length > 0) content = this.renderChildren(context, instance);
-      else {
-         content = data.value;
-         if (data.format) content = Format.value(content, data.format);
-      }
-
-      return {
-         atomic: true,
-         content,
-         instance,
-         data,
-         key,
-         uniqueColumnId: this.uniqueColumnId,
-      };
-   }
-}
-
-GridCell.prototype.pad = true;
-GridCell.prototype.styled = true;
-GridCell.prototype.fixed = false;
-GridCell.prototype.merged = false;

package/src/widgets/grid/GridCellEditor.js

@@ -1,41 +0,0 @@
-import {Container} from "../../ui/Container";
-import { VDOM} from "../../ui/VDOM";
-import {findFirstChild, isFocusable, isFocusedDeep} from "../../util/DOM";
-import {getActiveElement} from "../../util/getActiveElement";
-
-export class GridCellEditor extends Container {
-   render(context, instance, key) {
-      let {data} = instance;
-      return <GridCellEditorCmp
-         key={key}
-         className={data.className}
-         style={data.style}
-      >
-         {this.renderChildren(context, instance)}
-      </GridCellEditorCmp>
-   }
-}
-
-GridCellEditor.prototype.styled = true;
-
-class GridCellEditorCmp extends VDOM.Component {
-   render() {
-      let {className, style, children} = this.props;
-
-      return <div
-         ref={el => this.el = el}
-         className={className}
-         style={style}
-      >
-         {children}
-      </div>
-   }
-
-   componentDidMount() {
-      if (!isFocusedDeep(this.el)) {
-         let focusableChild = findFirstChild(this.el, isFocusable);
-         if (focusableChild)
-            focusableChild.focus();
-      }
-   }
-}

package/src/widgets/grid/GridRow.js

@@ -1,228 +0,0 @@
-import { preventFocusOnTouch, unfocusElement } from "../../ui/FocusManager";
-import { VDOM } from "../../ui/Widget";
-import { closest } from "../../util/DOM";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { KeyCode } from "../../util/KeyCode";
-import { ValidationGroup } from "../../widgets/form/ValidationGroup";
-import { ddDetect, ddMouseDown, ddMouseUp, isDragHandleEvent } from "../drag-drop/ops";
-import { GridRowLine } from "./GridRowLine";
-
-export class GridRow extends ValidationGroup {
-   declareData(...args) {
-      super.declareData(...args, {
-         hoverId: undefined,
-      });
-   }
-
-   init() {
-      this.items = [];
-      for (let i = 0; i < 10; i++) {
-         if (this["line" + i])
-            this.items.push(
-               GridRowLine.create(this["line" + i], {
-                  recordName: this.recordName,
-               }),
-            );
-      }
-      super.init();
-   }
-
-   explore(context, instance) {
-      context.push("dragHandles", (instance.dragHandles = []));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      super.exploreCleanup(context, instance);
-      context.pop("dragHandles");
-   }
-}
-
-GridRow.prototype.styled = true; //styles used on the wrapper component
-
-export class GridRowComponent extends VDOM.Component {
-   constructor(props) {
-      super(props);
-      this.onMouseMove = this.onMouseMove.bind(this);
-      this.onMouseDown = this.onMouseDown.bind(this);
-      this.onMouseLeave = this.onMouseLeave.bind(this);
-      this.onClick = this.onClick.bind(this);
-      this.onKeyDown = this.onKeyDown.bind(this);
-
-      let { grid, instance } = props;
-
-      if (grid.widget.onRowDoubleClick)
-         this.onDoubleClick = (e) => {
-            grid.invoke("onRowDoubleClick", e, instance);
-         };
-
-      if (grid.widget.cellEditable)
-         this.onDoubleClick = (e) => {
-            this.props.parent.moveCursor(this.props.cursorIndex, {
-               cellEdit: true,
-            });
-            e.preventDefault(); //prevent text selection
-         };
-
-      if (grid.widget.onRowContextMenu)
-         this.onRowContextMenu = (e) => {
-            grid.invoke("onRowContextMenu", e, instance);
-         };
-   }
-
-   render() {
-      let { className, dragSource, instance, record, useTrTag, children } = this.props;
-      let { data, widget } = instance;
-      let { CSS } = widget;
-      let move, up, keyDown, leave;
-
-      if (dragSource || data.hoverId != null) {
-         move = this.onMouseMove;
-         up = ddMouseUp;
-      }
-
-      if (data.hoverId != null) {
-         leave = this.onMouseLeave;
-      }
-
-      if (widget.onRowClick) keyDown = this.onKeyDown;
-
-      return VDOM.createElement(
-         useTrTag ? "tr" : "tbody",
-         {
-            className: CSS.expand(data.classNames, className, this.state && this.state.hover && CSS.state("hover")),
-            style: data.style,
-            onClick: this.onClick,
-            onDoubleClick: this.onDoubleClick,
-            onTouchStart: this.onMouseDown,
-            onMouseDown: this.onMouseDown,
-            onTouchMove: move,
-            onMouseMove: move,
-            onMouseLeave: leave,
-            onTouchEnd: up,
-            onMouseUp: up,
-            onKeyDown: keyDown,
-            onContextMenu: this.onRowContextMenu,
-            "data-record-key": record.key,
-         },
-         children,
-      );
-   }
-
-   onMouseDown(e) {
-      let { grid, record, instance, parent, cursorIndex } = this.props;
-
-      if (this.props.dragSource) {
-         ddMouseDown(e);
-         if (isDragHandleEvent(e) || instance.dragHandles.length == 0) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            //close context menu
-            unfocusElement(e.target, false);
-         }
-      }
-
-      let { store, widget } = grid;
-
-      if (widget.selectable) preventFocusOnTouch(e);
-
-      parent.moveCursor(cursorIndex, {
-         select:
-            !isTouchEvent() &&
-            (e.shiftKey || e.ctrlKey || !widget.selection.isSelected(store, record.data, record.index)),
-         selectRange: e.shiftKey,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         cellIndex: this.getCellIndex(e),
-      });
-
-      if (e.shiftKey && !isTouchEvent()) e.preventDefault();
-   }
-
-   onMouseMove(e) {
-      let { grid, instance, parent, record } = this.props;
-      if (ddDetect(e) && (isDragHandleEvent(e) || instance.dragHandles.length == 0)) parent.beginDragDrop(e, record);
-      if (grid.hoverSync && instance.data.hoverId != null)
-         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, true);
-   }
-
-   onMouseLeave(e) {
-      let { grid, instance } = this.props;
-      if (grid.hoverSync && instance.data.hoverId != null)
-         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, false);
-   }
-
-   getCellIndex(e) {
-      let td = closest(e.target, (node) => node.tagName == "TD");
-      if (td)
-         return (
-            (this.props.fixed ? 0 : this.props.grid.fixedColumnCount) +
-            Array.from(td.parentElement.children).indexOf(td)
-         );
-      return -1;
-   }
-
-   onKeyDown(e) {
-      let { grid, instance } = this.props;
-
-      if (e.keyCode == KeyCode.enter && grid.invoke("onRowClick", e, instance) === false) {
-         e.stopPropagation();
-      }
-   }
-
-   onClick(e) {
-      let { grid, record, instance, parent, cursorIndex } = this.props;
-      let { store, widget } = grid;
-
-      if (grid.widget.onRowClick) {
-         if (grid.invoke("onRowClick", e, instance) === false) return;
-      }
-
-      e.stopPropagation();
-
-      parent.moveCursor(cursorIndex, {
-         select:
-            isTouchEvent() ||
-            (!e.shiftKey && !e.ctrlKey && widget.selection.isSelected(store, record.data, record.index)),
-         selectRange: e.shiftKey,
-         selectOptions: {
-            toggle: e.ctrlKey && !e.shiftKey,
-            add: e.ctrlKey && e.shiftKey,
-         },
-         cellIndex: this.getCellIndex(e),
-      });
-   }
-
-   shouldComponentUpdate(props, state) {
-      return (
-         props.shouldUpdate !== false ||
-         props.record != this.props.record ||
-         props.cursor != this.props.cursor ||
-         props.selected != this.props.selected ||
-         props.isBeingDragged != this.props.isBeingDragged ||
-         props.cursorIndex !== this.props.cursorIndex ||
-         props.cursorCellIndex !== this.props.cursorCellIndex ||
-         props.cellEdit !== this.props.cellEdit ||
-         props.dimensionsVersion !== this.props.dimensionsVersion ||
-         props.isDraggedOver !== this.props.isDraggedOver ||
-         state !== this.state
-      );
-   }
-
-   compontentWillUnmount() {
-      this.unsubscribeHoverSync && this.unsubscribeHoverSync();
-   }
-
-   componentDidMount() {
-      let { grid } = this.props;
-      if (grid.hoverSync) {
-         this.unsubscribeHoverSync = grid.hoverSync.subscribe(grid.widget.hoverChannel, (hoverId) => {
-            let hover = hoverId === this.props.instance.data.hoverId;
-            if (!this.state || hover !== this.state.hover) this.setState({ hover });
-         });
-      }
-   }
-}

package/src/widgets/grid/GridRowLine.js

@@ -1,24 +0,0 @@
-import { Container } from "../../ui/Container";
-import { VDOM, Widget } from "../../ui/Widget";
-import { GridCell } from "./GridCell";
-
-export class GridRowLine extends Container {
-   init() {
-      this.items = Widget.create(GridCell, this.columns || [], {
-         recordName: this.recordName
-      });
-      super.init();
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      return {
-         key,
-         data,
-         content: this.renderChildren(context, instance),
-         atomic: true
-      };
-   }
-}
-
-GridRowLine.prototype.styled = true;

package/src/widgets/grid/Pagination.d.ts

@@ -1,14 +0,0 @@
-import * as Cx from '../../core';
-
-interface PaginationProps extends Cx.WidgetProps, Cx.StyledContainerProps {
-
-   page?: Cx.NumberProp,
-   length?: Cx.NumberProp,
-   pageCount?: Cx.NumberProp,
-
-   /** Base CSS class to be applied to the element. Defaults to 'pagination'. */
-   baseClass?: string
-   
-}
-
-export class Pagination extends Cx.Widget<PaginationProps> {}

package/src/widgets/grid/Pagination.js

@@ -1,95 +0,0 @@
-import {Widget, VDOM} from '../../ui/Widget';
-import {KeyCode} from '../../util/KeyCode';
-import {preventFocusOnTouch} from '../../ui/FocusManager';
-import ForwardIcon from '../icons/forward';
-
-export class Pagination extends Widget {
-
-   declareData() {
-      super.declareData({
-         page: undefined,
-         length: undefined,
-         pageCount: undefined
-      }, ...arguments);
-   }
-
-   render(context, instance, key) {
-      let {data, widget} = instance;
-      let {page, pageCount, length} = data;
-      let {CSS, baseClass} = widget;
-
-      if (!pageCount)
-         pageCount = 1;
-
-      let minPage = Math.max(1, page - Math.floor(length / 2));
-      let maxPage = minPage + length - 1;
-
-      if (maxPage > pageCount) {
-         maxPage = Math.max(pageCount, length);
-         minPage = maxPage - length + 1;
-      }
-
-      let nextPageIcon = <ForwardIcon className={CSS.element(baseClass, "icon-next-page")}/>;
-      let prevPageIcon = <ForwardIcon className={CSS.element(baseClass, "icon-prev-page")}/>;
-
-      let pageBtns = [];
-
-      for (let p = minPage - 1; p <= maxPage + 1; p++) {
-         pageBtns.push(<li
-            key={p < minPage ? '-1' : p > maxPage ? '-2' : p}
-            className={CSS.element(baseClass, "page", {
-               active: page == p,
-               disabled: (p <= maxPage && p > pageCount) || (p < minPage && page == 1) || (p > maxPage && page + 1 > pageCount)
-            })}
-            onMouseDown={e => {
-               e.stopPropagation();
-               preventFocusOnTouch(e);
-            }}
-            onClick={e => {
-               this.setPage(e, instance, p < minPage ? page - 1 : p > maxPage ? page + 1 : p)
-            }}>
-            {p < minPage ? prevPageIcon : p > maxPage ? nextPageIcon : p}
-         </li>)
-      }
-
-      return <ul
-         key={key}
-         className={data.classNames}
-         style={data.style}
-         tabIndex={0}
-         onKeyDown={ e => {
-            this.onKeyDown(e, instance)
-         }}
-      >
-         {pageBtns}
-      </ul>;
-   }
-
-   onKeyDown(e, instance) {
-      let {data} = instance;
-      switch (e.keyCode) {
-         case KeyCode.left:
-            this.setPage(e, instance, data.page - 1);
-            break;
-
-         case KeyCode.right:
-            this.setPage(e, instance, data.page + 1);
-            break;
-      }
-   }
-
-   setPage(e, instance, page) {
-      e.preventDefault();
-      e.stopPropagation();
-      let {data} = instance;
-      let {pageCount} = data;
-      if (page <= pageCount && page > 0)
-         instance.set('page', page);
-   }
-}
-
-Pagination.prototype.baseClass = "pagination";
-Pagination.prototype.length = 5;
-Pagination.prototype.styled = true;
-
-Widget.alias('pagination', Pagination);

package/src/widgets/grid/TreeNode.d.ts

@@ -1,23 +0,0 @@
-import * as Cx from "../../core";
-
-interface TreeNodeProps extends Cx.WidgetProps {
-   level?: Cx.NumberProp;
-   expanded?: Cx.BooleanProp;
-   leaf?: Cx.BooleanProp;
-   text?: Cx.StringProp;
-   loading?: Cx.BooleanProp;
-   icon?: Cx.StringProp;
-
-   itemIcon?: Cx.StringProp;
-   leafIcon?: Cx.StringProp;
-   loadingIcon?: string;
-   folderIcon?: Cx.StringProp;
-   openFolderIcon?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Defaults to 'treenode'. */
-   baseClass?: string;
-   hideIcon?: boolean;
-   hideArrow?: Cx.BooleanProp;
-}
-
-export class TreeNode extends Cx.Widget<TreeNodeProps> {}

package/src/widgets/grid/TreeNode.js

@@ -1,102 +0,0 @@
-import {Widget, VDOM} from '../../ui/Widget';
-import {Icon} from '../Icon';
-import {stopPropagation} from "../../util/eventCallbacks";
-import {Container} from "../../ui/Container";
-
-export class TreeNode extends Container {
-
-   init() {
-      if (this.itemIcon)
-         this.leafIcon = this.itemIcon;
-      super.init();
-   }
-
-   declareData() {
-      super.declareData({
-         level: undefined,
-         expanded: undefined,
-         leaf: undefined,
-         text: undefined,
-         loading: undefined,
-         icon: undefined,
-         leafIcon: undefined,
-         openFolderIcon: undefined,
-         folderIcon: undefined,
-         hideArrow: undefined
-      }, ...arguments);
-   }
-
-   prepareData(context, instance) {
-      let {data} = instance;
-      data.stateMods = {
-         expanded: data.expanded,
-         loading: data.loading,
-         leaf: data.leaf,
-         folder: !data.leaf,
-         icon: !this.hideIcon
-      };
-      data.stateMods[`level-${data.level}`] = true;
-      super.prepareData(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data, widget} = instance;
-      let {CSS, baseClass} = widget;
-
-      let icon = data.icon;
-
-      if (!data.icon) {
-         if (data.leaf)
-            icon = data.leafIcon;
-         else {
-            if (data.loading)
-               icon = this.loadingIcon;
-            else if (data.expanded)
-               icon = data.openFolderIcon || data.folderIcon;
-            else
-               icon = data.folderIcon;
-         }
-      }
-
-      let arrowIcon = this.arrowIcon;
-      if (this.hideIcon && data.loading)
-         arrowIcon = this.loadingIcon;
-
-      return <div key={key} className={data.classNames} style={data.style}>
-         <div
-            className={CSS.element(baseClass, 'handle')}
-            onClick={e => this.toggle(e, instance)}
-            onMouseDown={!this.hideIcon ? stopPropagation : undefined}
-         >
-            { !data.leaf && !data.hideArrow && Icon.render(arrowIcon, { className: CSS.element(baseClass, 'arrow')}) }
-            {
-               !this.hideIcon && Icon.render(icon, {
-                  className: CSS.element(baseClass, 'icon')
-               })
-            }
-         </div>
-         <div>
-            {data.text || this.renderChildren(context, instance)}
-         </div>
-      </div>;
-   }
-
-   toggle(e, instance) {
-      let {data} = instance;
-      if (!data.leaf)
-         instance.set('expanded', !data.expanded);
-      e.preventDefault();
-      e.stopPropagation();
-   }
-}
-
-TreeNode.prototype.baseClass = 'treenode';
-TreeNode.prototype.itemIcon = 'file';
-TreeNode.prototype.loadingIcon = 'loading';
-TreeNode.prototype.folderIcon = 'folder';
-TreeNode.prototype.openFolderIcon = 'folder-open';
-TreeNode.prototype.arrowIcon = 'drop-down';
-TreeNode.prototype.styled = true;
-TreeNode.prototype.hideIcon = false;
-
-Widget.alias('treenode', TreeNode);

package/src/widgets/grid/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Grid';
-export * from './TreeNode';
-export * from './Pagination';
-export * from '../../ui/adapter/index';

package/src/widgets/grid/index.js

@@ -1,15 +0,0 @@
-export * from './Grid';
-export * from './TreeNode';
-export * from './Pagination';
-
-import { DataAdapter } from '../../ui/adapter/DataAdapter';
-import { ArrayAdapter }  from '../../ui/adapter/ArrayAdapter';
-import { GroupAdapter }  from '../../ui/adapter/GroupAdapter';
-import { TreeAdapter }  from '../../ui/adapter/TreeAdapter';
-
-export {
-   DataAdapter,
-   ArrayAdapter,
-   GroupAdapter,
-   TreeAdapter
-}

package/src/widgets/icons/calendar.js

@@ -1,16 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('calendar', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 32 32">
-
-      <path d="M4 3h6m10 0h6" fill="none" stroke="currentColor" strokeWidth="2"/>
-      <path d="M19 21h4v4h-4z" fill="currentColor"/>
-      <path d="M3 25h24M3 21h24M3 17h24M7 28V13m-4 0h24M11 28V13.2M15 28V13.27M19 28V13.03M23 28V13.5" fill="none" stroke="currentColor"/>
-      <path fill="currentColor" d="M10 8h10v2H10z"/>
-      <path fill="none" stroke="currentColor" strokeWidth="2" d="M3 5h24v24H3z"/>
-   </svg>
-}, true);
-

package/src/widgets/icons/check.js

@@ -1,12 +0,0 @@
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('check', props => {
-   return <svg
-      {...props}
-      viewBox="0 0 64 64">
-      <path d="M7.136 42.94l20.16 14.784 29.568-40.32-9.72-7.128-22.598 30.816-10.44-7.656z"
-            fill="currentColor"/>
-   </svg>
-}, true);
-