From 20e3c870a44375ac81c979563e557330f65e0b46 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Tue, 9 May 2023 11:02:59 +0900 Subject: [PATCH 1/8] fix: fix inside zone --- .../ngx-infinitegrid/src/lib/ngx-infinitegrid.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/ngx-infinitegrid.component.ts b/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/ngx-infinitegrid.component.ts index 3eab7ff66..33fe25879 100644 --- a/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/ngx-infinitegrid.component.ts +++ b/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/ngx-infinitegrid.component.ts @@ -164,8 +164,10 @@ export class NgxInfiniteGridComponent fromEvent(this._renderer, 'requestUpdate') .pipe(takeUntil(this._destroy$)) .subscribe(() => { - this._isChange = true; - this._updateVisibleChildren(); + this._ngZone.run(() => { + this._isChange = true; + this._updateVisibleChildren(); + }); }); mountRenderingItems(this._getItemInfos(), { From 7acfdd144e72ddeee6fd312cea58812912e3c412 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Tue, 16 May 2023 14:27:58 +0900 Subject: [PATCH 2/8] feat: check invisible item size --- packages/infinitegrid/src/GroupManager.ts | 16 +++++++++++++--- packages/infinitegrid/src/Infinite.ts | 2 +- packages/infinitegrid/src/InfiniteGrid.ts | 5 ++++- packages/infinitegrid/src/consts.ts | 1 + .../src/grids/MasonryInfiniteGrid.ts | 5 +++++ packages/infinitegrid/src/types.ts | 6 ++++++ 6 files changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/infinitegrid/src/GroupManager.ts b/packages/infinitegrid/src/GroupManager.ts index d482a3d4e..032f9f0fd 100644 --- a/packages/infinitegrid/src/GroupManager.ts +++ b/packages/infinitegrid/src/GroupManager.ts @@ -25,6 +25,7 @@ export interface InfiniteGridGroupStatus { } export interface GroupManagerOptions extends GridOptions { + appliedItemChecker?: (item: InfiniteGridItem, grid: Grid) => boolean; gridConstructor: GridFunction | null; gridOptions: Record; } @@ -43,6 +44,7 @@ export interface GroupManagerStatus { export class GroupManager extends Grid { public static defaultOptions: Required = { ...Grid.defaultOptions, + appliedItemChecker: () => false, gridConstructor: null, gridOptions: {}, }; @@ -207,20 +209,28 @@ export class GroupManager extends Grid { groups.reverse(); } + const appliedItemChecker = this.options.appliedItemChecker; const groupItems = this.groupItems; const outlineLength = this.getComputedOutlineLength(groupItems); const outlineSize = this.getComputedOutlineSize(groupItems); + const itemRenderer = this.options.externalItemRenderer!; groups.forEach((group) => { const grid = group.grid; - const gridItems = grid.getItems(); + const gridItems = grid.getItems() as InfiniteGridItem[]; const isVirtual = group.type === GROUP_TYPE.VIRTUAL && !gridItems[0]; - const appliedItems = gridItems.filter((item) => item.mountState !== MOUNT_STATE.UNCHECKED && item.rect.width); - let gridOutlines: GridOutlines; grid.outlineLength = outlineLength; grid.outlineSize = outlineSize; + const appliedItems = gridItems.filter((item) => { + if (item.mountState === MOUNT_STATE.UNCHECKED || !item.rect.width) { + itemRenderer.updateItem(item, true); + } + return (item.orgRect.width && item.rect.width) || appliedItemChecker(item, grid); + }); + let gridOutlines: GridOutlines; + if (isVirtual) { gridOutlines = this._applyVirtualGrid(grid, direction, nextOutline); } else if (appliedItems.length) { diff --git a/packages/infinitegrid/src/Infinite.ts b/packages/infinitegrid/src/Infinite.ts index a7f8315d1..994ea521e 100644 --- a/packages/infinitegrid/src/Infinite.ts +++ b/packages/infinitegrid/src/Infinite.ts @@ -98,7 +98,7 @@ export class Infinite extends Component { endOutline, } = item; - if (!startOutline.length || !endOutline.length) { + if (!startOutline.length || !endOutline.length || isFlatOutline(startOutline, endOutline)) { return false; } const startPos = Math.min(...startOutline); diff --git a/packages/infinitegrid/src/InfiniteGrid.ts b/packages/infinitegrid/src/InfiniteGrid.ts index 3c8b8ada8..f9eb6fa22 100644 --- a/packages/infinitegrid/src/InfiniteGrid.ts +++ b/packages/infinitegrid/src/InfiniteGrid.ts @@ -1,5 +1,5 @@ import Component, { ComponentEvent } from "@egjs/component"; -import { +import Grid, { ContainerManager, DEFAULT_GRID_OPTIONS, Properties, @@ -91,6 +91,7 @@ class InfiniteGrid ex threshold: 100, useRecycle: true, scrollContainer: null, + appliedItemChecker: (() => false) as (item: InfiniteGridItem, grid: Grid) => boolean, } as Required; public static propertyTypes = INFINITEGRID_PROPERTY_TYPES; protected wrapperElement: HTMLElement; @@ -121,6 +122,7 @@ class InfiniteGrid ex threshold, useRecycle, scrollContainer, + appliedItemChecker, ...gridOptions } = this.options; // options.container === false, wrapper = container, scrollContainer = document.body @@ -176,6 +178,7 @@ class InfiniteGrid ex infinite.setSize(scrollManager.getContentSize()); const groupManager = new GroupManager(containerElement, { + appliedItemChecker: appliedItemChecker!, gridConstructor: gridConstructor!, externalItemRenderer: itemRenderer, externalContainerManager: containerManager, diff --git a/packages/infinitegrid/src/consts.ts b/packages/infinitegrid/src/consts.ts index 23123cd3f..1dd5b33c8 100644 --- a/packages/infinitegrid/src/consts.ts +++ b/packages/infinitegrid/src/consts.ts @@ -38,6 +38,7 @@ export const ITEM_INFO_PROPERTIES: Record = { html: true, data: true, inserted: true, + attributes: true, }; diff --git a/packages/infinitegrid/src/grids/MasonryInfiniteGrid.ts b/packages/infinitegrid/src/grids/MasonryInfiniteGrid.ts index 664ff7cb4..8a8bab9d8 100644 --- a/packages/infinitegrid/src/grids/MasonryInfiniteGrid.ts +++ b/packages/infinitegrid/src/grids/MasonryInfiniteGrid.ts @@ -27,5 +27,10 @@ export class MasonryInfiniteGrid extends InfiniteGrid { + const column = parseFloat(item.attributes.column) || 0; + + return column >= grid.outlineLength; + }, } as const; } diff --git a/packages/infinitegrid/src/types.ts b/packages/infinitegrid/src/types.ts index 07fe6f3ab..87c1012d7 100644 --- a/packages/infinitegrid/src/types.ts +++ b/packages/infinitegrid/src/types.ts @@ -47,6 +47,7 @@ export interface InfiniteGridItemInfo { element?: HTMLElement | null; html?: string; data?: Record; + attributes?: Record; } @@ -89,6 +90,11 @@ export interface InfiniteGridOptions extends GridOptions { * @ko Infinite 기능을 적용할 Grid 클래스. */ gridConstructor?: GridFunction; + /** + * Grid class to apply Infinite function. + * @ko Infinite 기능을 적용할 Grid 클래스. + */ + appliedItemChecker?: (item: InfiniteGridItem, grid: Grid) => boolean; /** * class that renders the DOM. * @ko DOM을 렌더하는 클래스. From baf41199ac4754bd3a37edf469fd35085c0dfe96 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Tue, 16 May 2023 14:45:21 +0900 Subject: [PATCH 3/8] fix: fix vue commonjs config --- packages/vue-infinitegrid/rollup.config.js | 34 ++++++++++----------- packages/vue-infinitegrid/src/index.umd.ts | 4 --- packages/vue3-infinitegrid/rollup.config.js | 2 -- packages/vue3-infinitegrid/src/index.umd.ts | 4 --- 4 files changed, 16 insertions(+), 28 deletions(-) delete mode 100644 packages/vue-infinitegrid/src/index.umd.ts delete mode 100644 packages/vue3-infinitegrid/src/index.umd.ts diff --git a/packages/vue-infinitegrid/rollup.config.js b/packages/vue-infinitegrid/rollup.config.js index b5bbcf1e4..09715eb9e 100644 --- a/packages/vue-infinitegrid/rollup.config.js +++ b/packages/vue-infinitegrid/rollup.config.js @@ -2,24 +2,22 @@ const buildHelper = require("@egjs/build-helper"); const vuePlugin = require("rollup-plugin-vue"); const defaultOptions = { - sourcemap: true, - input: "./src/index.ts", - exports: "named", - plugins: [ - vuePlugin(), - ] + sourcemap: true, + input: "./src/index.ts", + exports: "named", + plugins: [ + vuePlugin(), + ] }; export default buildHelper([ - { - ...defaultOptions, - format: "es", - output: "./dist/infinitegrid.esm.js", - }, - { - ...defaultOptions, - format: "cjs", - input: "./src/index.umd.ts", - exports: "default", - output: "./dist/infinitegrid.cjs.js", - }, + { + ...defaultOptions, + format: "es", + output: "./dist/infinitegrid.esm.js", + }, + { + ...defaultOptions, + format: "cjs", + output: "./dist/infinitegrid.cjs.js", + }, ]); diff --git a/packages/vue-infinitegrid/src/index.umd.ts b/packages/vue-infinitegrid/src/index.umd.ts deleted file mode 100644 index fa84cca48..000000000 --- a/packages/vue-infinitegrid/src/index.umd.ts +++ /dev/null @@ -1,4 +0,0 @@ -import * as modules from "./index"; - - -export default modules; diff --git a/packages/vue3-infinitegrid/rollup.config.js b/packages/vue3-infinitegrid/rollup.config.js index 7da04cab9..36c22dae4 100644 --- a/packages/vue3-infinitegrid/rollup.config.js +++ b/packages/vue3-infinitegrid/rollup.config.js @@ -18,8 +18,6 @@ export default buildHelper([ { ...defaultOptions, format: "cjs", - input: "./src/index.umd.ts", - exports: "default", output: "./dist/infinitegrid.cjs.js", }, ]); diff --git a/packages/vue3-infinitegrid/src/index.umd.ts b/packages/vue3-infinitegrid/src/index.umd.ts deleted file mode 100644 index fa84cca48..000000000 --- a/packages/vue3-infinitegrid/src/index.umd.ts +++ /dev/null @@ -1,4 +0,0 @@ -import * as modules from "./index"; - - -export default modules; From 99e8543f6cf6917ce6e1a4e2f0e8415e77afdc8e Mon Sep 17 00:00:00 2001 From: Daybrush Date: Tue, 16 May 2023 14:53:15 +0900 Subject: [PATCH 4/8] test: test invisible item size --- .../test/unit/InfiniteGrid.spec.ts | 14 ++++-- .../test/unit/MasonryInfiniteGrid.spec.ts | 48 +++++++++++++++++++ 2 files changed, 58 insertions(+), 4 deletions(-) diff --git a/packages/infinitegrid/test/unit/InfiniteGrid.spec.ts b/packages/infinitegrid/test/unit/InfiniteGrid.spec.ts index 94a43b856..81cb777d7 100644 --- a/packages/infinitegrid/test/unit/InfiniteGrid.spec.ts +++ b/packages/infinitegrid/test/unit/InfiniteGrid.spec.ts @@ -1090,6 +1090,7 @@ describe("test InfiniteGrid", () => { // Given const nums = new Array(29).fill(0).map((_, i) => i); + // 0 ~ 9 ig!.syncItems(nums.map((child) => { return { groupKey: Math.floor(child / 3), @@ -1098,6 +1099,7 @@ describe("test InfiniteGrid", () => { }; })); + // 0 ~ 8 ig!.setCursors(0, 8); // all cursors await waitEvent(ig!, "renderComplete"); @@ -1106,7 +1108,7 @@ describe("test InfiniteGrid", () => { ig!.setStatus(ig!.getStatus(STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS)); - // visible(0 ~ 2) invisible(3 ~ 9) + // visible(0 ~ 2) invisible(3 ~ 8) unchecked(9) await waitEvent(ig!, "renderComplete"); // When @@ -1114,7 +1116,7 @@ describe("test InfiniteGrid", () => { const requestAppendEvent = await waitEvent(ig!, "requestAppend"); - // 3 ~ 9 + // 3 ~ 8 ig!.append(flat(requestAppendEvent.nextGroupKeys.map((groupKey) => { return [0, 1, 2].map((index) => { const child = (groupKey as number) * 3 + index; @@ -1128,10 +1130,14 @@ describe("test InfiniteGrid", () => { await waitEvent(ig!, "renderComplete"); + const items = ig!.getItems(true); + const items0to26 = items.slice(0, 26); + const items27 = items.slice(27); // Then expect(ig!.getStartCursor()).to.be.equals(6); - expect(ig!.getEndCursor()).to.be.equals(9); - expect(ig!.getItems(true).every((item) => item.type !== ITEM_TYPE.VIRTUAL)).to.be.equals(true); + expect(ig!.getEndCursor()).to.be.equals(8); + expect(items0to26.every((item) => item.type !== ITEM_TYPE.VIRTUAL)).to.be.equals(true); + expect(items27.every((item) => item.type === ITEM_TYPE.VIRTUAL)).to.be.equals(true); }); it(`should check if requestAppend event for invisible items is triggered`, async () => { // Given diff --git a/packages/infinitegrid/test/unit/MasonryInfiniteGrid.spec.ts b/packages/infinitegrid/test/unit/MasonryInfiniteGrid.spec.ts index 57c9b678a..5b09baca2 100644 --- a/packages/infinitegrid/test/unit/MasonryInfiniteGrid.spec.ts +++ b/packages/infinitegrid/test/unit/MasonryInfiniteGrid.spec.ts @@ -103,5 +103,53 @@ describe("test InfiniteGrid", () => { expect(ig.getStartCursor()).to.be.equals(3); expect(ig.getVisibleGroups()[0].grid.getOutlines().start).to.be.lengthOf(2); }); + it("should check whether the outline of the invisible area and the last area are connected", async () => { + // Given + container!.innerHTML = `
`; + const wrapper = container!.querySelector(".wrapper")!; + ig = new MasonryInfiniteGrid(wrapper, { + container: true, + }); + + const bottomArea = document.createElement("div"); + + bottomArea.style.cssText = "position: relative;height: 500px"; + wrapper.appendChild(bottomArea); + + ig!.syncItems([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13].map((child) => { + // 0 ~ 3, 4 ~ 7, 8 ~ 11, 12 ~ 13 + const width = child >= 12 ? "100%" : "150px"; + const column = child >= 12 ? "2" : ""; + + return { + groupKey: Math.floor(child / 4), + key: `key${child}`, + attributes: { + column, + }, + html: `
${child}
`, + }; + })); + + ig!.renderItems(); + + // [0, 0] + await waitEvent(ig!, "renderComplete"); + + // [0, 1] + await waitEvent(ig!, "renderComplete"); + + + // 12 left 0, top 1000 + const rect12 = ig.getItems()[12].cssRect; + // 13 left 0, top 1000 + const rect13 = ig.getItems()[13].cssRect; + + // Then + expect(rect12.left).to.be.equals(0); + expect(rect12.top).to.be.equals(1000); + expect(rect13.left).to.be.equals(0); + expect(rect13.top).to.be.equals(1000); + }); }); }); From da6e82899a0c90d377514eb9d9ba21d31b4effe3 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Tue, 16 May 2023 14:53:38 +0900 Subject: [PATCH 5/8] feat: add infoBy prop for frameworks --- packages/infinitegrid/package.json | 4 ++-- .../src/lib/ngx-infinitegrid.component.ts | 14 +++++++++++++- .../projects/ngx-infinitegrid/src/lib/types.ts | 1 + packages/react-infinitegrid/src/InfiniteGrid.tsx | 13 ++++++++++++- packages/react-infinitegrid/src/types.ts | 1 + .../svelte-infinitegrid/src/InfiniteGrid.svelte | 11 ++++++++++- packages/svelte-infinitegrid/src/index.d.ts | 3 +++ packages/vue-infinitegrid/src/InfiniteGrid.ts | 13 ++++++++++--- packages/vue-infinitegrid/src/types.ts | 8 ++++++++ packages/vue3-infinitegrid/src/InfiniteGrid.ts | 10 +++++++++- packages/vue3-infinitegrid/src/types.ts | 7 +++++++ yarn.lock | 8 ++++---- 12 files changed, 80 insertions(+), 13 deletions(-) diff --git a/packages/infinitegrid/package.json b/packages/infinitegrid/package.json index 0b65da178..a3500d390 100644 --- a/packages/infinitegrid/package.json +++ b/packages/infinitegrid/package.json @@ -92,7 +92,7 @@ "karma-chrome-launcher": "^2.2.0", "karma-mocha": "^1.3.0", "karma-mocha-reporter": "^2.2.5", - "karma-typescript": "^5.5.3", + "karma-typescript": "^5.5.3", "karma-viewport": "^1.0.4", "mocha": "^6.0.2", "postcss-loader": "^4.1.0", @@ -122,7 +122,7 @@ "@cfcs/core": "^0.0.5", "@egjs/children-differ": "^1.0.1", "@egjs/component": "^3.0.0", - "@egjs/grid": "^1.13.0", + "@egjs/grid": "^1.14.0-beta.2", "@egjs/list-differ": "^1.0.0" } } diff --git a/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/ngx-infinitegrid.component.ts b/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/ngx-infinitegrid.component.ts index 33fe25879..00caa2ba5 100644 --- a/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/ngx-infinitegrid.component.ts +++ b/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/ngx-infinitegrid.component.ts @@ -38,6 +38,7 @@ import { } from '@egjs/infinitegrid'; import { NgxInfiniteGridInterface } from './ngx-infinitegrid.interface'; import { NgxInfiniteGridProps } from './types'; +import Grid, { GridOptions } from '@egjs/grid'; @Component({ selector: 'ngx-infinite-grid, [NgxInfiniteGrid]', @@ -80,6 +81,7 @@ export class NgxInfiniteGridComponent @Input() useResizeObserver!: NgxInfiniteGridProps['useResizeObserver']; @Input() observeChildren!: NgxInfiniteGridProps['observeChildren']; @Input() scrollContainer!: NgxInfiniteGridProps['scrollContainer']; + @Input() appliedItemChecker!: NgxInfiniteGridProps['appliedItemChecker']; @Input() usePlaceholder!: NgxInfiniteGridProps['useFirstRender']; @Input() useLoading!: NgxInfiniteGridProps['useLoading']; @@ -88,6 +90,7 @@ export class NgxInfiniteGridComponent @Input() items: NgxInfiniteGridProps['items'] = []; @Input() trackBy: NgxInfiniteGridProps['trackBy'] = ((_, item) => item.key); @Input() groupBy: NgxInfiniteGridProps['groupBy'] = ((_, item) => item.groupKey); + @Input() infoBy: NgxInfiniteGridProps['infoBy'] = () => ({}); @Output() renderComplete!: EventEmitter; @Output() contentError!: EventEmitter; @Output() changeScroll!: EventEmitter; @@ -213,12 +216,21 @@ export class NgxInfiniteGridComponent const items = this.items; const trackBy = this.trackBy; const groupBy = this.groupBy; + const infoBy = this.infoBy; return items.map((item, i) => { + const { + data, + ...rest + } = infoBy(i, item); return { groupKey: groupBy(i, item), key: trackBy(i, item), - data: item, + ...rest, + data: { + ...data, + ...item, + }, }; }); } diff --git a/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/types.ts b/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/types.ts index e9d1713e5..8cb63a025 100644 --- a/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/types.ts +++ b/packages/ngx-infinitegrid/projects/ngx-infinitegrid/src/lib/types.ts @@ -19,4 +19,5 @@ export interface NgxInfiniteGridProps extends NgxInfiniteGridEvents, Required any; groupBy: (index: number, item: any) => any; + infoBy: (index: number, item: any) => Record; } diff --git a/packages/react-infinitegrid/src/InfiniteGrid.tsx b/packages/react-infinitegrid/src/InfiniteGrid.tsx index 4fed00dc0..31506e5e8 100644 --- a/packages/react-infinitegrid/src/InfiniteGrid.tsx +++ b/packages/react-infinitegrid/src/InfiniteGrid.tsx @@ -7,7 +7,8 @@ import * as React from "react"; import VanillaInfiniteGrid, { InfiniteGridOptions, InfiniteGridFunction, Renderer, - InfiniteGridItemInfo, ITEM_TYPE, + InfiniteGridItemInfo, + ITEM_TYPE, InfiniteGridMethods, withInfiniteGridMethods, getRenderingItems, @@ -114,12 +115,22 @@ export abstract class InfiniteGrid const attributePrefix = props.attributePrefix || VanillaInfiniteGrid.defaultOptions.attributePrefix; const itemBy = props.itemBy || ((item: React.ReactElement) => item.key); const groupBy = props.groupBy || ((item: React.ReactElement) => item.props[`${attributePrefix}groupkey`]); + const infoBy = props.infoBy || (() => ({})); + return children.map((child, i) => { + const { + data, + ...rest + } = infoBy(child, i) || {}; + + return { groupKey: groupBy(child, i), key: itemBy(child, i), + ...rest, data: { + ...data, jsx: child, }, }; diff --git a/packages/react-infinitegrid/src/types.ts b/packages/react-infinitegrid/src/types.ts index e2aa09fcf..a76939368 100644 --- a/packages/react-infinitegrid/src/types.ts +++ b/packages/react-infinitegrid/src/types.ts @@ -17,4 +17,5 @@ export interface ReactInfiniteGridProps extends ReactInfiniteGridEvents { useFirstRender?: boolean; itemBy?: (item: React.ReactElement, index: number) => string | number; groupBy?: (item: React.ReactElement, index: number) => string | number; + infoBy?: (item: React.ReactElement, index: number) => Record; } diff --git a/packages/svelte-infinitegrid/src/InfiniteGrid.svelte b/packages/svelte-infinitegrid/src/InfiniteGrid.svelte index 7a25e3d73..8c01a2acb 100644 --- a/packages/svelte-infinitegrid/src/InfiniteGrid.svelte +++ b/packages/svelte-infinitegrid/src/InfiniteGrid.svelte @@ -47,12 +47,21 @@ const items = $$props.items || []; const itemBy = $$props.itemBy || ((item) => item.key); const groupBy = $$props.groupBy || ((item) => item.groupKey); + const infoBy = $$props.infoBy || (() => ({})); return items.map((item, i) => { + const { + data, + ...rest + } = infoBy(child, i) || {}; return { groupKey: groupBy(item, i), key: itemBy(item, i), - data: item, + ...rest, + data: { + ...data, + ...item, + }, }; }); } diff --git a/packages/svelte-infinitegrid/src/index.d.ts b/packages/svelte-infinitegrid/src/index.d.ts index 50c55a8cc..d217d535d 100644 --- a/packages/svelte-infinitegrid/src/index.d.ts +++ b/packages/svelte-infinitegrid/src/index.d.ts @@ -11,6 +11,9 @@ export interface SveltInfiniteGridOptions { usePlaceholder?: boolean; useLoading?: boolean; status?: InfiniteGridStatus; + itemBy?: (item: any, index: number) => string | number; + groupBy?: (item: any, index: number) => string | number; + infoBy?: (item: any, index: number) => Record; } export default abstract class InfiniteGrid extends SvelteComponentDev { diff --git a/packages/vue-infinitegrid/src/InfiniteGrid.ts b/packages/vue-infinitegrid/src/InfiniteGrid.ts index 48d46e7f3..239d30be4 100644 --- a/packages/vue-infinitegrid/src/InfiniteGrid.ts +++ b/packages/vue-infinitegrid/src/InfiniteGrid.ts @@ -52,10 +52,11 @@ export function makeInfiniteGrid(tagName: string const attributePrefix = props.attributePrefix || VanillaInfiniteGrid.defaultOptions.attributePrefix; const groupBy = props.groupBy || ((item: any) => { - const props = item.props || item.data?.attrs; + const itemProps = item.props || item.data?.attrs; - return props ? props[`${attributePrefix}groupkey`] : undefined; + return itemProps ? itemProps[`${attributePrefix}groupkey`] : undefined; }); + const infoBy = props.infoBy || (() => ({})); let children: any[] = []; @@ -63,12 +64,18 @@ export function makeInfiniteGrid(tagName: string children = slots; } // Check Vue3 Slot Type - return children.map((child, i) => { + const { + data, + ...rest + } = infoBy(child, i) || {}; + return { groupKey: groupBy(child, i), key: itemBy(child, i), + ...rest, data: { + ...data, vnode: child, }, }; diff --git a/packages/vue-infinitegrid/src/types.ts b/packages/vue-infinitegrid/src/types.ts index 3c4d09adc..76c38ed98 100644 --- a/packages/vue-infinitegrid/src/types.ts +++ b/packages/vue-infinitegrid/src/types.ts @@ -8,10 +8,18 @@ import InfiniteGrid, { InfiniteGridMethods, InfiniteGridItemInfo, Renderer, + InfiniteGridStatus, + InfiniteGridItem, } from "@egjs/infinitegrid"; +import { VNode } from "vue"; export type VueInfiniteGridProps = T["defaultOptions"] & { tag?: string; + status?: InfiniteGridStatus; + useFirstRender?: boolean; + itemBy?: (item: VNode, index: number) => string | number; + groupBy?: (item: VNode, index: number) => string | number; + infoBy?: (item: VNode, index: number) => Record; }; export interface VueInfiniteGridInterface diff --git a/packages/vue3-infinitegrid/src/InfiniteGrid.ts b/packages/vue3-infinitegrid/src/InfiniteGrid.ts index 54f979505..2bf36c733 100644 --- a/packages/vue3-infinitegrid/src/InfiniteGrid.ts +++ b/packages/vue3-infinitegrid/src/InfiniteGrid.ts @@ -55,6 +55,7 @@ export function makeInfiniteGrid(tagName: s return props ? props[`${attributePrefix}groupkey`] : undefined; }); + const infoBy = props.infoBy || (() => ({})); let children: any[] = []; @@ -68,7 +69,7 @@ export function makeInfiniteGrid(tagName: s // const KEYED_FRAGMENT = 1 << 7; // const UNKEYED_FRAGMENT = 1 << 8; children = children.reduce((prev, cur) => { - if ((cur.patchFlag > 0 && cur.patchFlag & ((1 << 6) + (1 << 7) + (1 << 8))) > 0) { + if ((cur.patchFlag && cur.patchFlag & ((1 << 6) + (1 << 7) + (1 << 8))) > 0) { return [...prev, ...cur.children]; } else if (cur) { return [...prev, cur]; @@ -78,10 +79,17 @@ export function makeInfiniteGrid(tagName: s } return children.map((child, i) => { + const { + data, + ...rest + } = infoBy(child, i) || {}; + return { groupKey: groupBy(child, i), key: itemBy(child, i), + ...rest, data: { + ...data, vnode: child, }, }; diff --git a/packages/vue3-infinitegrid/src/types.ts b/packages/vue3-infinitegrid/src/types.ts index 8c9a0eba5..8a656a993 100644 --- a/packages/vue3-infinitegrid/src/types.ts +++ b/packages/vue3-infinitegrid/src/types.ts @@ -9,10 +9,17 @@ import InfiniteGrid, { InfiniteGridItemInfo, Renderer, InfiniteGridEvents, + InfiniteGridStatus, } from "@egjs/infinitegrid"; +import { VNode } from "vue"; export type VueInfiniteGridProps = T["defaultOptions"] & { tag?: string; + status?: InfiniteGridStatus; + useFirstRender?: boolean; + itemBy?: (item: VNode, index: number) => string | number; + groupBy?: (item: VNode, index: number) => string | number; + infoBy?: (item: VNode, index: number) => Record; }; export interface VueInfiniteGridInterface diff --git a/yarn.lock b/yarn.lock index 83d958f4e..68ef94a76 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2495,10 +2495,10 @@ "@egjs/imready" "^1.3.1" "@egjs/list-differ" "^1.0.1" -"@egjs/grid@^1.13.0": - version "1.13.0" - resolved "https://registry.yarnpkg.com/@egjs/grid/-/grid-1.13.0.tgz#8298a9464afbcd44a6738b190e00c22313340b37" - integrity sha512-wUljkpteE6THydxBvIPcXKQWx4PUo+BCOoRnq1R0cF/pauYQKMEEuzZfMzI6NpjNBtfC3SzdXANeJYtq01cSkg== +"@egjs/grid@^1.14.0-beta.2": + version "1.14.0-beta.2" + resolved "https://registry.npmjs.org/@egjs/grid/-/grid-1.14.0-beta.2.tgz#6e59ec7ec8ccf39f70724d7951bde8be155ea26f" + integrity sha512-n0yWMNN6DzREQqflR1xeMGIHkiLxzPQxK3gpZam6aJiPCx0hNSYzevxTs568bUSZYTSOT6KxySQopgCw19FjrA== dependencies: "@egjs/children-differ" "^1.0.1" "@egjs/component" "^3.0.0" From 549036139fed2c11f2624b4425b155f3b46b20fa Mon Sep 17 00:00:00 2001 From: Daybrush Date: Tue, 16 May 2023 15:10:10 +0900 Subject: [PATCH 6/8] fix: fix itemRenderer --- packages/infinitegrid/src/GroupManager.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/infinitegrid/src/GroupManager.ts b/packages/infinitegrid/src/GroupManager.ts index 032f9f0fd..5d0f415f7 100644 --- a/packages/infinitegrid/src/GroupManager.ts +++ b/packages/infinitegrid/src/GroupManager.ts @@ -213,7 +213,7 @@ export class GroupManager extends Grid { const groupItems = this.groupItems; const outlineLength = this.getComputedOutlineLength(groupItems); const outlineSize = this.getComputedOutlineSize(groupItems); - const itemRenderer = this.options.externalItemRenderer!; + const itemRenderer = this.itemRenderer; groups.forEach((group) => { const grid = group.grid; From 2539c274f364c9e27c8b09a6d782e515e39e9132 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Tue, 16 May 2023 15:24:42 +0900 Subject: [PATCH 7/8] skip: apply review --- packages/infinitegrid/src/types.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/infinitegrid/src/types.ts b/packages/infinitegrid/src/types.ts index 87c1012d7..baea3cf5a 100644 --- a/packages/infinitegrid/src/types.ts +++ b/packages/infinitegrid/src/types.ts @@ -91,13 +91,15 @@ export interface InfiniteGridOptions extends GridOptions { */ gridConstructor?: GridFunction; /** - * Grid class to apply Infinite function. - * @ko Infinite 기능을 적용할 Grid 클래스. + * A function that checks whether non-rendering items are included in the Grid. + * @ko 렌더링 되지 않는 아이템를 Grid에 포함시킬지 체크하는 함수. + * @private */ appliedItemChecker?: (item: InfiniteGridItem, grid: Grid) => boolean; /** * class that renders the DOM. * @ko DOM을 렌더하는 클래스. + * @private */ renderer?: Renderer | null; } From 4c93fa80a20046cb38487c9059299a8bbc439787 Mon Sep 17 00:00:00 2001 From: Daybrush Date: Fri, 26 May 2023 10:51:27 +0900 Subject: [PATCH 8/8] chore: bump @egjs/grid --- packages/infinitegrid/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/infinitegrid/package.json b/packages/infinitegrid/package.json index a3500d390..09e3a6323 100644 --- a/packages/infinitegrid/package.json +++ b/packages/infinitegrid/package.json @@ -122,7 +122,7 @@ "@cfcs/core": "^0.0.5", "@egjs/children-differ": "^1.0.1", "@egjs/component": "^3.0.0", - "@egjs/grid": "^1.14.0-beta.2", + "@egjs/grid": "^1.14.1", "@egjs/list-differ": "^1.0.0" } } diff --git a/yarn.lock b/yarn.lock index 68ef94a76..5d8aade3d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2495,10 +2495,10 @@ "@egjs/imready" "^1.3.1" "@egjs/list-differ" "^1.0.1" -"@egjs/grid@^1.14.0-beta.2": - version "1.14.0-beta.2" - resolved "https://registry.npmjs.org/@egjs/grid/-/grid-1.14.0-beta.2.tgz#6e59ec7ec8ccf39f70724d7951bde8be155ea26f" - integrity sha512-n0yWMNN6DzREQqflR1xeMGIHkiLxzPQxK3gpZam6aJiPCx0hNSYzevxTs568bUSZYTSOT6KxySQopgCw19FjrA== +"@egjs/grid@^1.14.1": + version "1.14.1" + resolved "https://registry.npmjs.org/@egjs/grid/-/grid-1.14.1.tgz#83ca3f16b86b6f89ec33dd424d8341831e210792" + integrity sha512-xICx7COEqVdcfsEYnh22otobqOBqb/69NooDF6W4Tg35SS3Tans9yrgv0a4J6/dEykVcH6kdDEy53gPxl9wIUQ== dependencies: "@egjs/children-differ" "^1.0.1" "@egjs/component" "^3.0.0"