How to use @egjs/infinitegrid - 10 common examples

_fitItems(base, margin = 0) {
		base > 0 && this._watcher.scrollBy(-base);
		this._items.fit(base, this.props.horizontal);
		DOMRenderer.renderItems(this._getVisibleItems());
		this._setContainerSize(false);
		base < 0 && this._watcher.scrollBy(-base);
	}
	// called by visible

private $_bindEvents(): void {
		const nativeIG = this.$_nativeInfiniteGrid;

		INFINITEGRID_EVENTS.forEach(eventName => {
			nativeIG.on(eventName, e => {
				e.currentTarget = this;
				// Make events from camelCase to kebab-case
				this.$emit(eventName.replace(/([A-Z])/g, "-$1").toLowerCase(), e);
			});
		});

		nativeIG.on("render", ({ next }) => {
			this.$forceUpdate();
			this.$nextTick(() => {
				next();
			});
		});
	}

state.groups = groups;
		state.startKey = startKey;
		state.endKey = endKey;
		state.startIndex = startIndex;
		state.endIndex = endIndex;
		state.datas = datas;
		// synchronize
		this._updateGroups(groups);

		if (!this._isProcessing() || !groups.length || !state.isUpdate) {
			this._updateCursor(state);
		}
		if (!this._isProcessing() && !state.layout && !state.isUpdate) {
			const { removed } = diff(
				prevVisibleChildren,
				ItemManager.pluck(this._getVisibleGroups(state), "children"),
				({ key }) => key,
			);
			state.isUpdate = !!removed.length;
		}
	}
	_updateLayout() {

if (nativeIG) {
			const result = nativeIG.beforeSync(items.filter(val => !val.isLoading));
			this.$_layout = result === "relayout"
				? result
				: (this.$_layout || result);

			visibleChildren = nativeIG.getRenderingItems().map(item => item.vnode);
			if (this.$slots.loading && nativeIG.isLoading()) {
				visibleChildren.push(...this.$slots.loading);
			}
		} else {
			const groups = categorize(items);
			if (this.status) {
				const { startCursor, endCursor } = this.status._infinite;

				visibleChildren = ItemManager.pluck(
					groups.slice(startCursor, endCursor + 1),
					"items",
				).map((item: IItem) => item.vnode);
			} else if (this.useFirstRender && groups[0]) {
				visibleChildren = groups[0].items.map((item: IItem) => item.vnode);
			}
		}

		// To bypass
		// [Vue warn]: Avoid using observed data object as vnode data: {}
		const wrapperData = {};
		for (const key in this.wrapperData) {
			wrapperData[key] = this.wrapperData[key];
		}

		return h(this.tag, wrapperData, this.$_getContainer(visibleChildren, h));

const nativeIG = this.$_nativeInfiniteGrid;
		const items = this.$_toItems();

		let visibleChildren: VNode[] = [];
		if (nativeIG) {
			const result = nativeIG.beforeSync(items.filter(val => !val.isLoading));
			this.$_layout = result === "relayout"
				? result
				: (this.$_layout || result);

			visibleChildren = nativeIG.getRenderingItems().map(item => item.vnode);
			if (this.$slots.loading && nativeIG.isLoading()) {
				visibleChildren.push(...this.$slots.loading);
			}
		} else {
			const groups = categorize(items);
			if (this.status) {
				const { startCursor, endCursor } = this.status._infinite;

				visibleChildren = ItemManager.pluck(
					groups.slice(startCursor, endCursor + 1),
					"items",
				).map((item: IItem) => item.vnode);
			} else if (this.useFirstRender && groups[0]) {
				visibleChildren = groups[0].items.map((item: IItem) => item.vnode);
			}
		}

		// To bypass
		// [Vue warn]: Avoid using observed data object as vnode data: {}
		const wrapperData = {};
		for (const key in this.wrapperData) {

items = ItemManager.pluck(groups, "items"),
		isAppend,
		isTrusted,
		fromCache,
		isLayout = false,
	}) {
		!isLayout && this._updateCursor();
		const viewSize = this._renderer.getViewSize();
		const size = this._getEdgeValue("end");
		const { useRecycle } = this.props;
		const watcher = this._watcher;
		const scrollPos = watcher.getScrollPos();

		if (!isAppend) {
			if (!this._fit()) {
				DOMRenderer.renderItems(items);
			}
		} else {
			!isLayout && DOMRenderer.renderItems(items);
			this._setContainerSize();
		}
		this.state.isFirstRender = false;
		if (useRecycle) {
			this._infinite.recycle(scrollPos, isAppend);
		}
		this.props.onLayoutComplete({
			currentTarget: this,
			target: items,
			fromCache,
			isAppend,
			isTrusted,
			isLayout,

fromCache,
		isLayout = false,
	}) {
		!isLayout && this._updateCursor();
		const viewSize = this._renderer.getViewSize();
		const size = this._getEdgeValue("end");
		const { useRecycle } = this.props;
		const watcher = this._watcher;
		const scrollPos = watcher.getScrollPos();

		if (!isAppend) {
			if (!this._fit()) {
				DOMRenderer.renderItems(items);
			}
		} else {
			!isLayout && DOMRenderer.renderItems(items);
			this._setContainerSize();
		}
		this.state.isFirstRender = false;
		if (useRecycle) {
			this._infinite.recycle(scrollPos, isAppend);
		}
		this.props.onLayoutComplete({
			currentTarget: this,
			target: items,
			fromCache,
			isAppend,
			isTrusted,
			isLayout,
			isScroll: viewSize < watcher.getContainerOffset() + size,
			scrollPos,
			orgScrollPos: watcher.getOrgScrollPos(),

_insert(isUpdate) {
		const isConstantSize = this.props.isConstantSize;
		const state = this.state;
		const { processing, requestIndex, startIndex, endIndex, groups, isFirstRender } = state;
		const isAppend = !(processing & PREPEND);
		const isProcessing = this._isProcessing();
		const start = (isAppend ? requestIndex : startIndex) || 0;
		const end = (isAppend ? endIndex : requestIndex) || 0;
		let updateGroups = state.groups.slice(start, end + 1);

		updateGroups = isUpdate ? updateGroups :
			updateGroups.filter(group => !group.items.every(item => item.mount));
		const items = ItemManager.pluck(updateGroups, "items");
		const newItems = items.filter(item => !item.mount &&
			(!item.orgSize || (!isConstantSize && item.rect.top < DUMMY_POSITION / 10)));
		let isRelayout = false;

		items.forEach(item => {
			!item.orgSize && (isRelayout = true);
			item.mount = true;
		});

		if (updateGroups.length) {
			if (isProcessing || newItems.length) {
				state.processing |= (isAppend ? APPEND : PREPEND) | PROCESS;
				!isFirstRender && DOMRenderer.renderItems(items);
				this._updateSize({ groups: updateGroups, items: newItems, isUpdate: isUpdate || isRelayout });
			} else {
				this.layout(false);

_getVisibleItems() {
		return ItemManager.pluck(this._getVisibleGroups(), "items");
	}
	_refreshChildren(propsChildren = Children.toArray(this.props.children), state = this.state) {

renderer.setStatus(_renderer);
		this._infinite.setStatus(_infinite);
		this._refreshGroups(Children.toArray(this.props.children));
		const isReLayout = renderer.isNeededResize();


		const visibleItems = this._getVisibleItems();

		visibleItems.filter(item => !item.el).forEach(item => {
			item.isWaitMount = true;
		});
		!isReLayout && DOMRenderer.renderItems(this._getVisibleItems());
		watcher.setStatus(_watcher, applyScrollPos);
		watcher.attachEvent();

		const items = ItemManager.pluck(state.groups, "items");

		items.forEach(item => {
			if (!item.orgSize || item.rect.top < DUMMY_POSITION / 10) {
				item.mount = false;
			}
		});
		if (isReLayout) {
			renderer.resize();
			this._setSize(renderer.getViewportSize());
			if (this.props.isConstantSize) {
				this.layout(true);
			} else {
				this._items.clearOutlines();
				items.forEach(item => { item.mount = false; });
				state.processing |= APPEND;
				state.requestIndex = Math.max(0, state.startIndex);