UNPKG

@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

91 lines (90 loc) 2.97 kB
import Component from "@egjs/component"; export interface OnInfiniteRequestAppend { key?: string | number | undefined; nextKey?: string | number | undefined; nextKeys?: Array<string | number>; isVirtual: boolean; } export interface OnInfiniteRequestPrepend { key?: string | number; nextKey?: string | number; nextKeys?: Array<string | number>; isVirtual: boolean; } export interface OnInfiniteChange { prevStartCursor: number; prevEndCursor: number; nextStartCursor: number; nextEndCursor: number; } export interface InfiniteEvents { requestAppend: OnInfiniteRequestAppend; requestPrepend: OnInfiniteRequestPrepend; change: OnInfiniteChange; } export interface InfiniteOptions { useRecycle?: boolean; threshold?: number; defaultDirection?: "start" | "end"; isReachStart?: boolean; isReachEnd?: boolean; } export interface InfiniteItemPart { key: string | number; pos: number; size: number; } export interface InfiniteItem { key: string | number; startOutline: number[]; endOutline: number[]; parts?: InfiniteItemPart[]; isVirtual?: boolean; } export declare class Infinite extends Component<InfiniteEvents> { options: Required<InfiniteOptions>; protected startCursor: number; protected endCursor: number; protected size: number; protected items: InfiniteItem[]; protected itemKeys: Record<string | number, InfiniteItem>; constructor(options: InfiniteOptions); set isReachStart(value: boolean); set isReachEnd(value: boolean); scroll(scrollPos: number): void; /** * Call the requestAppend or requestPrepend event to fill the virtual items. * @ko virtual item을 채우기 위해 requestAppend 또는 requestPrepend 이벤트를 호출합니다. * @return - Whether the event is called. <ko>이벤트를 호출했는지 여부.</ko> */ _requestVirtualItems(): boolean; setCursors(startCursor: number, endCursor: number): void; setSize(size: number): void; getStartCursor(): number; getEndCursor(): number; isLoading(direction: "start" | "end"): boolean; setItems(nextItems: InfiniteItem[]): void; syncItems(nextItems: InfiniteItem[]): boolean; getItems(): InfiniteItem[]; getVisibleItems(): InfiniteItem[]; getSize(): number; getItemByKey(key: string | number): InfiniteItem; getItemPartByKey(partKey: string | number): InfiniteItemPart; getScrollSize(): number; /** * 보이는 영역의 가운데를 기준으로 스크롤을 한다. */ getVisibleAreaByParts(parts: InfiniteItemPart[]): { parts: InfiniteItemPart[]; centerPos: number; }; /** * 스크롤 가운데 위치에 가장 가까운 요소들 */ getVisibleArea(scrollPos: number): { parts: InfiniteItemPart[]; centerPos: number; }; getRenderedVisibleItems(): InfiniteItem[]; destroy(): void; }