@egjs/infinitegrid
Version:
A module used to arrange elements including content infinitely according to grid type. With this module, you can implement various grids composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the
128 lines (127 loc) • 5.4 kB
TypeScript
import Grid, { GridFunction, GridItem, GridOptions, GridOutlines, Properties, PROPERTY_TYPE, RenderOptions } from "@egjs/grid";
import { GROUP_TYPE, STATUS_TYPE } from "./consts";
import { InfiniteGridItem, InfiniteGridItemStatus } from "./InfiniteGridItem";
import { InfiniteGridGroup, InfiniteGridItemInfo } from "./types";
export interface InfiniteGridGroupStatus {
type: GROUP_TYPE;
groupKey: string | number;
items: InfiniteGridItemStatus[];
outlines: GridOutlines;
}
export interface GroupManagerOptions extends GridOptions {
appliedItemChecker?: (item: InfiniteGridItem, grid: Grid) => boolean;
gridConstructor: GridFunction | null;
gridOptions: Record<string, any>;
}
export interface GroupManagerStatus {
cursors: [number, number];
orgCursors: [number, number];
itemCursors: [number, number];
startGroupKey: number | string;
endGroupKey: number | string;
groups: InfiniteGridGroupStatus[];
outlines: GridOutlines;
}
export declare class GroupManager extends Grid<GroupManagerOptions> {
static defaultOptions: Required<GroupManagerOptions>;
static propertyTypes: {
readonly gridConstructor: PROPERTY_TYPE.PROPERTY;
readonly gridOptions: PROPERTY_TYPE.PROPERTY;
readonly gap: PROPERTY_TYPE;
readonly defaultDirection: PROPERTY_TYPE;
readonly renderOnPropertyChange: PROPERTY_TYPE;
readonly preserveUIOnDestroy: PROPERTY_TYPE;
readonly useFit: PROPERTY_TYPE;
readonly outlineSize: PROPERTY_TYPE;
readonly outlineLength: PROPERTY_TYPE;
};
protected items: InfiniteGridItem[];
protected groupItems: InfiniteGridItem[];
protected groups: InfiniteGridGroup[];
protected itemKeys: Record<string | number, InfiniteGridItem>;
protected groupKeys: Record<string | number, InfiniteGridGroup>;
protected startCursor: number;
protected endCursor: number;
private _placeholder;
private _loadingGrid;
private _mainGrid;
constructor(container: HTMLElement, options: GroupManagerOptions);
set gridOptions(options: Record<string, any>);
getItemByKey(key: string | number): InfiniteGridItem | null;
getGroupItems(includePlaceholders?: boolean): InfiniteGridItem[];
getVisibleItems(includePlaceholders?: boolean): InfiniteGridItem[];
getRenderingItems(): InfiniteGridItem[];
getGroups(includePlaceholders?: boolean): InfiniteGridGroup[];
hasVisibleVirtualGroups(): boolean;
hasPlaceholder(): boolean;
hasLoadingItem(): boolean;
updateItems(items?: InfiniteGridItem[], options?: RenderOptions): this;
setPlaceholder(placeholder: Partial<InfiniteGridItemStatus> | null): void;
getLoadingType(): "" | "start" | "end";
startLoading(type: "start" | "end"): boolean;
waitEndLoading(): boolean;
endLoading(): boolean;
setLoading(loading: Partial<InfiniteGridItemStatus> | null): void;
getVisibleGroups(includePlaceholders?: boolean): InfiniteGridGroup[];
getComputedOutlineLength(items?: InfiniteGridItem[]): number;
getComputedOutlineSize(items?: InfiniteGridItem[]): number;
applyGrid(items: InfiniteGridItem[], direction: "end" | "start", outline: number[]): GridOutlines;
syncItems(nextItemInfos: InfiniteGridItemInfo[]): void;
renderItems(options?: RenderOptions): this;
setCursors(startCursor: number, endCursor: number): void;
getStartCursor(): number;
getEndCursor(): number;
getGroupStatus(type?: STATUS_TYPE, includePlaceholders?: boolean): GroupManagerStatus;
protected fitOutlines(useFit?: boolean): void;
setGroupStatus(status: GroupManagerStatus): void;
appendPlaceholders(items: number | InfiniteGridItemStatus[], groupKey?: string | number): {
group: {
type: GROUP_TYPE;
groupKey: string | number;
grid: Grid<GridOptions>;
items: InfiniteGridItem[];
renderItems: InfiniteGridItem[];
};
items: InfiniteGridItem[];
};
prependPlaceholders(items: number | InfiniteGridItemStatus[], groupKey?: string | number): {
group: {
type: GROUP_TYPE;
groupKey: string | number;
grid: Grid<GridOptions>;
items: InfiniteGridItem[];
renderItems: InfiniteGridItem[];
};
items: InfiniteGridItem[];
};
removePlaceholders(type: "start" | "end" | {
groupKey: string | number;
}): void;
insertPlaceholders(direction: "start" | "end", items: number | InfiniteGridItemStatus[], groupKey?: string | number): {
group: {
type: GROUP_TYPE;
groupKey: string | number;
grid: Grid<GridOptions>;
items: InfiniteGridItem[];
renderItems: InfiniteGridItem[];
};
items: InfiniteGridItem[];
};
shouldRerenderItems(): boolean;
protected _updateItems(items: GridItem[]): void;
private _getGroupItems;
private _getRenderingItems;
private _checkShouldRender;
private _applyVirtualGrid;
private _syncItemInfos;
private _registerGroups;
private _splitVirtualGroups;
private _mergeVirtualGroups;
private _updatePlaceholder;
private _makeGrid;
private _getLoadingGroup;
private _getLoadingItem;
}
export interface GroupManager extends Properties<typeof GroupManager> {
getItems(): InfiniteGridItem[];
}