How to use the @egjs/infinitegrid.ItemManager.pluck function in @egjs/infinitegrid

To help you get started, we’ve selected a few @egjs/infinitegrid examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github naver / egjs-infinitegrid / packages / react-infinitegrid / src / InfiniteGrid.js View on Github external
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() {
github naver / egjs-infinitegrid / packages / vue-infinitegrid / src / InfiniteGrid.ts View on Github external
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));
github naver / egjs-infinitegrid / packages / react-infinitegrid / src / InfiniteGrid.js View on Github external
_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);
github naver / egjs-infinitegrid / packages / react-infinitegrid / src / InfiniteGrid.js View on Github external
_getVisibleItems() {
		return ItemManager.pluck(this._getVisibleGroups(), "items");
	}
	_refreshChildren(propsChildren = Children.toArray(this.props.children), state = this.state) {
github naver / egjs-infinitegrid / packages / react-infinitegrid / src / InfiniteGrid.js View on Github external
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);
github naver / egjs-infinitegrid / packages / react-infinitegrid / src / InfiniteGrid.js View on Github external
_refreshGroups(propsChildren = Children.toArray(this.props.children), state = this.state) {
		if (!propsChildren) {
			return;
		}
		const prevVisibleChildren = ItemManager.pluck(this._getVisibleGroups(this.state), "children");
		const prevGroupKeys = state.groupKeys;
		const prevGroups = state.groups;
		const prevDatas = state.datas;
		const datas = {};
		const groupKeys = {};
		const groups = [];
		let { startKey, endKey, startIndex, endIndex } = state;

		propsChildren.forEach(item => {
			const props = item.props;
			const groupKey = props.groupKey || props["data-groupkey"] || 0;

			if (!groupKeys[groupKey]) {
				const prevGroup = prevGroupKeys[groupKey] ||
					{
						groupKey,

@egjs/infinitegrid

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

MIT
Latest version published 4 months ago

Package Health Score

76 / 100
Full package analysis