cx 25.11.1 → 26.0.1

package/src/widgets/grid/GridCell.ts

@@ -0,0 +1,143 @@
+import { StyledContainerBase, StyledContainerConfig } from "../../ui";
+import { Format } from "../../ui/Format";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { isUndefined } from "../../util/isUndefined";
+
+export interface GridCellConfig extends StyledContainerConfig {
+   /** Selector used to obtain the value that should be displayed inside the cell. Not required if `field` is used. */
+   value?: StringProp | NumberProp;
+
+   /** Selector used to obtain the weight of the cell in aggregate operations, such as weighted averages. */
+   weight?: Prop<any>;
+
+   /** Add default padding to grid cell. */
+   pad?: BooleanProp;
+
+   /** Format specifier used to convert the value into a string. */
+   format?: StringProp;
+
+   /** Name of the field that holds the value to be displayed. */
+   field?: string;
+
+   /** 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?: Prop<"same-value" | "always">;
+
+   /** Aggregate value for the cell. */
+   aggregateValue?: Prop<any>;
+
+   /** Column span. */
+   colSpan?: NumberProp;
+
+   /** Row span. */
+   rowSpan?: NumberProp;
+
+   /** Whether the column is fixed. */
+   fixed?: BooleanProp;
+
+   /** Cell alignment. */
+   align?: "left" | "right" | "center";
+
+   /** Editor widget for cell editing. */
+   editor?: any;
+
+   /** Unique column identifier. */
+   uniqueColumnId?: string;
+}
+
+export class GridCell extends StyledContainerBase<GridCellConfig> {
+   declare value?: StringProp | NumberProp;
+   declare field?: string;
+   declare recordName?: string;
+   declare editable?: boolean;
+   declare align?: "left" | "right" | "center";
+   declare editor?: any;
+   declare uniqueColumnId?: string;
+   declare pad?: boolean;
+   declare fixed?: boolean;
+   declare merged?: boolean;
+
+   constructor(config?: GridCellConfig) {
+      super(config);
+   }
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         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: RenderingContext, instance: 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: RenderingContext, instance: Instance, key: string) {
+      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.fixed = false;
+GridCell.prototype.merged = false;

package/src/widgets/grid/GridCellEditor.tsx

@@ -0,0 +1,52 @@
+/** @jsxImportSource react */
+import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { VDOM } from "../../ui/VDOM";
+import { findFirstChild, isFocusable, isFocusedDeep } from "../../util/DOM";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface GridCellEditorConfig extends StyledContainerConfig {}
+
+export class GridCellEditor extends ContainerBase<GridCellEditorConfig> {
+   constructor(config?: GridCellEditorConfig) {
+      super(config);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      return (
+         <GridCellEditorCmp key={key} className={data.className} style={data.style}>
+            {this.renderChildren(context, instance)}
+         </GridCellEditorCmp>
+      );
+   }
+}
+
+GridCellEditor.prototype.styled = true;
+
+interface GridCellEditorCmpProps {
+   className?: string;
+   style?: React.CSSProperties;
+   children?: React.ReactNode;
+}
+
+class GridCellEditorCmp extends VDOM.Component<GridCellEditorCmpProps> {
+   el: HTMLDivElement | null = null;
+
+   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.ts

@@ -0,0 +1,302 @@
+import { preventFocusOnTouch, unfocusElement } from "../../ui/FocusManager";
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM } from "../../ui/Widget";
+import { closest } from "../../util/DOM";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { KeyCode } from "../../util/KeyCode";
+import { ValidationGroup, ValidationGroupConfig, ValidationGroupInstance } from "../../widgets/form/ValidationGroup";
+import { ddDetect, ddMouseDown, ddMouseUp, isDragHandleEvent } from "../drag-drop/ops";
+import { GridRowLine, GridRowLineConfig } from "./GridRowLine";
+import type { GridInstance } from "./Grid";
+import { BooleanProp, StringProp, Prop, StructuredProp } from "../../ui/Prop";
+import { WidgetStyleConfig } from "../../ui/Widget";
+
+export interface GridRowInstance extends ValidationGroupInstance {
+   dragHandles: any[];
+}
+
+export interface GridRowConfig extends ValidationGroupConfig, WidgetStyleConfig {
+   hoverId?: any;
+   line0?: GridRowLineConfig;
+   line1?: GridRowLineConfig;
+   line2?: GridRowLineConfig;
+   line3?: GridRowLineConfig;
+   line4?: GridRowLineConfig;
+   line5?: GridRowLineConfig;
+   line6?: GridRowLineConfig;
+   line7?: GridRowLineConfig;
+   line8?: GridRowLineConfig;
+   line9?: GridRowLineConfig;
+   recordName?: string;
+   invalid?: BooleanProp;
+   valid?: BooleanProp;
+   mod?: StringProp | Prop<string[]> | StructuredProp;
+}
+
+export class GridRow extends ValidationGroup<GridRowConfig> {
+   declare recordName?: string;
+   declare line0?: GridRowLineConfig;
+   declare line1?: GridRowLineConfig;
+   declare line2?: GridRowLineConfig;
+   declare line3?: GridRowLineConfig;
+   declare line4?: GridRowLineConfig;
+   declare line5?: GridRowLineConfig;
+   declare line6?: GridRowLineConfig;
+   declare line7?: GridRowLineConfig;
+   declare line8?: GridRowLineConfig;
+   declare line9?: GridRowLineConfig;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         hoverId: undefined,
+      });
+   }
+
+   init(): void {
+      this.items = [];
+      for (let i = 0; i < 10; i++) {
+         const lineKey = ("line" + i) as keyof GridRow;
+         if (this[lineKey])
+            this.items.push(
+               GridRowLine.create(this[lineKey] as GridRowLineConfig, {
+                  recordName: this.recordName,
+               }),
+            );
+      }
+      super.init();
+   }
+
+   explore(context: RenderingContext, instance: GridRowInstance): void {
+      context.push("dragHandles", (instance.dragHandles = []));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: GridRowInstance): void {
+      super.exploreCleanup(context, instance);
+      context.pop("dragHandles");
+   }
+}
+
+GridRow.prototype.styled = true; //styles used on the wrapper component
+
+export interface GridRowComponentProps {
+   key?: string;
+   className?: string;
+   store?: any;
+   dragSource?: any;
+   instance: GridRowInstance;
+   grid: GridInstance;
+   record: any;
+   parent: any;
+   cursorIndex?: number;
+   selected?: boolean;
+   isBeingDragged?: any;
+   isDraggedOver?: boolean;
+   cursor?: boolean;
+   cursorCellIndex?: number | false;
+   cellEdit?: any;
+   onMouseLeave?: any;
+   useTrTag?: boolean;
+   shouldUpdate?: boolean;
+   dimensionsVersion?: number;
+   fixed?: boolean;
+   children?: React.ReactNode;
+}
+
+interface GridRowComponentState {
+   hover?: boolean;
+}
+
+export class GridRowComponent extends VDOM.Component<GridRowComponentProps, GridRowComponentState> {
+   onDoubleClick?: (e: React.MouseEvent) => void;
+   onRowContextMenu?: (e: React.MouseEvent) => void;
+   unsubscribeHoverSync?: () => void;
+
+   constructor(props: GridRowComponentProps) {
+      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(): React.ReactNode {
+      let { className, dragSource, instance, record, useTrTag, children } = this.props;
+      let { data, widget } = instance;
+      let { CSS } = widget;
+      let move: ((e: React.MouseEvent | React.TouchEvent) => void) | undefined,
+         up: ((e: React.MouseEvent | React.TouchEvent) => void) | undefined,
+         keyDown: ((e: React.KeyboardEvent) => void) | undefined,
+         leave: ((e: React.MouseEvent) => void) | undefined;
+
+      if (dragSource || data.hoverId != null) {
+         move = this.onMouseMove;
+         up = ddMouseUp;
+      }
+
+      if (data.hoverId != null) {
+         leave = this.onMouseLeave;
+      }
+
+      if (this.props.grid.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: React.MouseEvent | React.TouchEvent): void {
+      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 as Element, 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: React.MouseEvent | React.TouchEvent): void {
+      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: React.MouseEvent): void {
+      let { grid, instance } = this.props;
+      if (grid.hoverSync && instance.data.hoverId != null)
+         grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, false);
+   }
+
+   getCellIndex(e: React.MouseEvent | React.TouchEvent | React.KeyboardEvent): number {
+      let td = closest(e.target as Element, (node) => (node as Element).tagName == "TD") as HTMLTableCellElement | null;
+      if (td)
+         return (
+            (this.props.fixed ? 0 : this.props.grid.fixedColumnCount) +
+            Array.from(td.parentElement!.children).indexOf(td)
+         );
+      return -1;
+   }
+
+   onKeyDown(e: React.KeyboardEvent): void {
+      let { grid, instance } = this.props;
+
+      if (e.keyCode == KeyCode.enter && grid.invoke("onRowClick", e, instance) === false) {
+         e.stopPropagation();
+      }
+   }
+
+   onClick(e: React.MouseEvent): void {
+      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: GridRowComponentProps, state: GridRowComponentState): boolean {
+      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
+      );
+   }
+
+   componentWillUnmount(): void {
+      this.unsubscribeHoverSync && this.unsubscribeHoverSync();
+   }
+
+   componentDidMount(): void {
+      let { grid } = this.props;
+      if (grid.hoverSync) {
+         this.unsubscribeHoverSync = grid.hoverSync.subscribe(grid.widget.hoverChannel, (hoverId: any) => {
+            let hover = hoverId === this.props.instance.data.hoverId;
+            if (!this.state || hover !== this.state.hover) this.setState({ hover });
+         });
+      }
+   }
+}

package/src/widgets/grid/GridRowLine.ts

@@ -0,0 +1,49 @@
+import { Container, ContainerConfig } from "../../ui/Container";
+import { Widget } from "../../ui/Widget";
+import { GridCell } from "./GridCell";
+import type { GridColumnConfig } from "./Grid";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp } from "../../ui/Prop";
+
+export interface GridRowLineConfig extends ContainerConfig {
+   /** Array of column configurations for this row line. */
+   columns?: GridColumnConfig[];
+
+   /** Record alias used for data binding. */
+   recordName?: string;
+
+   /** Whether this row line is visible. */
+   visible?: BooleanProp;
+
+   /** Whether to show the header row for this line. */
+   showHeader?: BooleanProp;
+}
+
+export class GridRowLine extends Container {
+   declare columns?: GridColumnConfig[];
+   declare recordName?: string;
+
+   constructor(config?: GridRowLineConfig) {
+      super(config);
+   }
+
+   init() {
+      this.items = Widget.create(GridCell, this.columns || [], {
+         recordName: this.recordName
+      }) as unknown as Widget[];
+      super.init();
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      return {
+         key,
+         data,
+         content: this.renderChildren(context, instance),
+         atomic: true
+      };
+   }
+}
+
+GridRowLine.prototype.styled = true;

package/src/widgets/grid/Pagination.scss

@@ -1,12 +1,14 @@
+@use "sass:map";
+
 @mixin cx-pagination(
    $name: "pagination",
    $state-style-map: $cx-grid-pagination-state-style-map,
    $icon-size: $cx-default-icon-size,
    $besm: $cx-besm
 ) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
 
    .#{$block}#{$name} {
       display: inline-block;

package/src/widgets/grid/Pagination.tsx

@@ -0,0 +1,126 @@
+/** @jsxImportSource react */
+import { Widget, VDOM, WidgetStyleConfig } from "../../ui/Widget";
+import { KeyCode } from "../../util/KeyCode";
+import { preventFocusOnTouch } from "../../ui/FocusManager";
+import ForwardIcon from "../icons/forward";
+import { NumberProp } from "../../ui/Prop";
+import { StyledContainerConfig } from "../../ui/Container";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface PaginationConfig extends StyledContainerConfig {
+   /** Current page number. */
+   page?: NumberProp;
+
+   /** Total number of pages. */
+   pageCount?: NumberProp;
+
+   /** Number of page buttons to display. */
+   length?: NumberProp;
+}
+
+export class Pagination extends Widget<PaginationConfig> {
+   declare baseClass: string;
+   declare length: number;
+
+   constructor(config?: PaginationConfig) {
+      super(config);
+   }
+
+   declareData() {
+      super.declareData(
+         {
+            page: undefined,
+            length: undefined,
+            pageCount: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      let { data } = instance;
+      let { page, pageCount, length } = data;
+      let { CSS, baseClass } = this;
+
+      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: React.KeyboardEvent, instance: 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: React.SyntheticEvent, instance: Instance, page: number) {
+      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);