import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, RowClickedEvent, RowDoubleClickedEvent } from '@xh/hoist/kit/ag-grid'; import { ColumnRenderer, ColumnSpec, GridContextMenuSpec, GridGroupSortFn, GridModel, GridSorter, GridSorterLike, GroupRowRenderer, RowClassFn, RowClassRuleFn, TreeStyle } from '@xh/hoist/cmp/grid'; import { Awaitable, HoistModel, LoadSpec, PlainObject, Some, Thunkable, VSide } from '@xh/hoist/core'; import { RecordAction, Store, StoreConfig, StoreRecordOrId, StoreSelectionConfig, StoreSelectionModel, StoreTransaction } from '@xh/hoist/data'; import { ReactNode } from 'react'; import { ZoneMapperConfig, ZoneMapperModel } from './impl/ZoneMapperModel'; import { Zone, ZoneGridModelPersistOptions, ZoneLimit, ZoneMapping } from './Types'; /** * Configuration for a {@link ZoneGridModel} - a card-style grid that arranges column data * into four zones (top-left, top-right, bottom-left, bottom-right) within each row. * Provide `columns` and `mappings` to define which fields appear in each zone. * * @see ZoneGridModel * @see ZoneMapperConfig */ export interface ZoneGridConfig { /** * Available columns for this grid. Columns with an omit property evaluating to true will be * excluded. Note that the actual display of the zone columns is managed via `mappings` below. */ columns: Array; /** Mappings of columns to zones. */ mappings: Record>; /** Optional configurations for zone constraints. */ limits?: Partial>; /** * Optional renderers to produce a row specific label for each column. * If not specified, the label will default to the fixed Header of the column. */ labelRenderers?: Record; /** * Optional configs to apply to left column. Intended for use as an `escape hatch` - use with * care. Settings made here may interfere with the implementation of this component. */ leftColumnSpec?: Partial; /** * Optional configs to apply to right column. Intended for use as an `escape hatch` - use with * care. Settings made here may interfere with the implementation of this component. */ rightColumnSpec?: Partial; /** String rendered between consecutive SubFields. */ delimiter?: string | false; /** Config with which to create a ZoneMapperModel, or boolean `true` to enable default. */ zoneMapperModel?: ZoneMapperConfig | boolean; /** * A Store instance, or a config with which to create a Store. * If not supplied, store fields will be inferred from columns config. */ store?: Store | StoreConfig; /** True if grid is a tree grid (default false). */ treeMode?: boolean; /** Location for docked summary row(s). Requires `store.summaryRecords` to be populated. */ showSummary?: boolean | VSide; /** Specification of selection behavior. Defaults to 'single' (desktop) and 'disabled' (mobile) */ selModel?: StoreSelectionModel | StoreSelectionConfig | 'single' | 'multiple' | 'disabled'; /** * Function to be called when the user triggers ZoneGridModel.restoreDefaultsAsync(). * This function will be called after the built-in defaults have been restored, and can be * used to restore application specific defaults. */ restoreDefaultsFn?: () => Awaitable; /** * Confirmation warning to be presented to user before restoring default state. Set to * null to skip user confirmation. */ restoreDefaultsWarning?: ReactNode; /** Options governing persistence. */ persistWith?: ZoneGridModelPersistOptions; /** * Text/element to display if grid has no records. Defaults to null, in which case no empty * text will be shown. */ emptyText?: ReactNode; /** True (default) to hide empty text until after the Store has been loaded at least once. */ hideEmptyTextBeforeLoad?: boolean; /** * Initial sort to apply to grid data. * Note that unlike GridModel, multi-sort is not supported. */ sortBy?: GridSorterLike; /** Column ID(s) by which to do full-width grouping. */ groupBy?: Some; /** Group level to expand to on initial load. 0 = all collapsed, 1 = only top level expanded. */ expandLevel?: number; /** True (default) to show a count of group member rows within each full-width group row. */ showGroupRowCounts?: boolean; /** True to highlight the currently hovered row. */ showHover?: boolean; /** True to render row borders. */ rowBorders?: boolean; /** Specify treeMode-specific styling. */ treeStyle?: TreeStyle; /** True to use alternating backgrounds for rows. */ stripeRows?: boolean; /** True to render cell borders. */ cellBorders?: boolean; /** True to highlight the focused cell with a border. */ showCellFocus?: boolean; /** True to suppress display of the grid's header row. */ hideHeaders?: boolean; /** * Closure to generate CSS class names for a row. * NOTE that, once added, classes will *not* be removed if the data changes. * Use `rowClassRules` instead if StoreRecord data can change across refreshes. */ rowClassFn?: RowClassFn; /** * Object keying CSS class names to functions determining if they should be added or * removed from the row. See Ag-Grid docs on "row styles" for details. */ rowClassRules?: Record; /** Height (in px) of a group row. Note that this will override `sizingMode` for group rows. */ groupRowHeight?: number; /** Function used to render group rows. */ groupRowRenderer?: GroupRowRenderer; /** * Function to use to sort full-row groups. Called with two group values to compare * in the form of a standard JS comparator. Default is an ascending string sort. * Set to `null` to prevent sorting of groups. */ groupSortFn?: GridGroupSortFn; /** * Callback when a key down event is detected on the grid. Note that the ag-Grid API provides * limited ability to customize keyboard handling. This handler is designed to allow * applications to work around this. */ onKeyDown?: (e: KeyboardEvent) => void; /** * Callback when a row is clicked. (Note that the event received may be null - e.g. for * clicks on full-width group rows.) */ onRowClicked?: (e: RowClickedEvent) => void; /** * Callback when a row is double-clicked. (Note that the event received may be null - e.g. * for clicks on full-width group rows.) */ onRowDoubleClicked?: (e: RowDoubleClickedEvent) => void; /** * Callback when a cell is clicked. */ onCellClicked?: (e: CellClickedEvent) => void; /** * Callback when a cell is double-clicked. */ onCellDoubleClicked?: (e: CellDoubleClickedEvent) => void; /** * Callback when the context menu is opened. Note that the event received can also be * triggered via a long press (aka tap and hold) on mobile devices. */ onCellContextMenu?: (e: CellContextMenuEvent) => void; /** * Array of labels (or a function returning one) that describes the individual depth * levels in a tree or grouped grid. If provided, will be used to construct expand/collapse * options in the default context menu. */ levelLabels?: Thunkable; /** * Number of clicks required to expand / collapse a parent row in a tree grid. Defaults * to 2 for desktop, 1 for mobile. Any other value prevents clicks on row body from * expanding / collapsing (requires click on tree col affordance to expand/collapse). */ clicksToExpand?: number; /** * Array of RecordActions, dividers, or token strings with which to create a context menu. * May also be specified as a function returning same. */ contextMenu?: GridContextMenuSpec; /** * Governs if the grid should reuse a limited set of DOM elements for columns visible in the * scroll area (versus rendering all columns). Consider this performance optimization for * grids with a very large number of columns obscured by horizontal scrolling. Note that * setting this value to true may limit the ability of the grid to autosize offscreen columns * effectively. Default false. */ useVirtualColumns?: boolean; /** * Set to true to if application will be reloading data when the sortBy property changes on * this model (either programmatically, or via user-click.) Useful for applications with large * data sets that are performing external, or server-side sorting and filtering. Setting this * flag means that the grid should not immediately respond to user or programmatic changes to * the sortBy property, but will instead wait for the next load of data, which is assumed to be * pre-sorted. Default false. */ externalSort?: boolean; /** * Set to true to highlight a row on click. Intended to provide feedback to users in grids * without selection. Note this setting overrides the styling used by Column.highlightOnChange, * and is not recommended for use alongside that feature. Default true for mobiles, * otherwise false. */ highlightRowOnClick?: boolean; /** * Flags for experimental features. These features are designed for early client-access and * testing, but are not yet part of the Hoist API. */ experimental?: PlainObject; /** Extra app-specific data for the GridModel. */ appData?: PlainObject; /** @internal */ xhImpl?: boolean; } /** * Model for a ZoneGrid - a card-style grid that renders each row as a full-width block * divided into four zones: top-left, top-right, bottom-left, and bottom-right. Built on * {@link GridModel} internally. * * Use ZoneGrid when you want a structured multi-field card layout per row without writing * a fully custom renderer. Especially well-suited for mobile or other space-constrained * contexts where horizontal scrolling is undesirable but four or more user-configurable * fields need to be visible per row. The `mappings` config controls which columns appear * in each zone, and users can rearrange them via the optional ZoneMapper UI. * * For a standard column-based grid, use {@link GridModel}. For fully custom row rendering, * use {@link DataViewModel}. * * @see ZoneGrid * @see ZoneGridConfig */ export declare class ZoneGridModel extends HoistModel { gridModel: GridModel; mapperModel: ZoneMapperModel; mappings: Record; labelRenderers: Record; leftColumnSpec: Partial; rightColumnSpec: Partial; availableColumns: ColumnSpec[]; limits: Partial>; delimiter: string | false; restoreDefaultsFn: () => Awaitable; restoreDefaultsWarning: ReactNode; private _defaultState; constructor(config: ZoneGridConfig); /** * Restore the mapping, sorting, and grouping configs as specified by the application at * construction time. This is the state without any user changes applied. * This method will clear the persistent grid state saved for this grid, if any. * * @returns true if defaults were restored */ restoreDefaultsAsync(): Promise; showMapper(): void; setMappings(mappings: Record>): void; getDefaultContextMenu: () => (string | RecordAction)[]; get sortBy(): GridSorter; setSortBy(cfg: GridSorterLike): void; get store(): Store; get empty(): boolean; get selModel(): StoreSelectionModel; get hasSelection(): boolean; get selectedRecords(): import("@xh/hoist/data").StoreRecord[]; get selectedRecord(): import("@xh/hoist/data").StoreRecord; get selectedId(): import("@xh/hoist/data").StoreRecordId; get groupBy(): string[]; selectAsync(records: Some, opts: { ensureVisible?: boolean; clearSelection?: boolean; }): Promise; preSelectFirstAsync(): Promise; selectFirstAsync(opts?: { ensureVisible?: boolean; }): Promise; ensureSelectionVisibleAsync(): Promise; doLoadAsync(loadSpec: LoadSpec): Promise; loadData(rawData: any[], rawSummaryData?: Some): void; updateData(rawData: PlainObject[] | StoreTransaction): import("@xh/hoist/data").StoreChangeLog; clear(): void; setGroupBy(colIds: Some): void; private createGridModel; private getColumns; private buildZoneColumn; private findColumnSpec; private parseMappings; private parseZoneMapping; private parseMapperModel; }