Skip to content

Commit

Permalink
Support dynamic startMargin
Browse files Browse the repository at this point in the history
  • Loading branch information
inokawa committed Jun 23, 2024
1 parent a9d55e2 commit fabc0a8
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 8 deletions.
4 changes: 2 additions & 2 deletions src/core/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,12 +140,12 @@ export const createVirtualStore = (
itemSize: number = 40,
ssrCount: number = 0,
cacheSnapshot?: CacheSnapshot | undefined,
shouldAutoEstimateItemSize: boolean = false,
startSpacerSize: number = 0
shouldAutoEstimateItemSize: boolean = false
): VirtualStore => {
let isSSR = !!ssrCount;
let stateVersion: StateVersion = [];
let viewportSize = 0;
let startSpacerSize = 0;
let scrollOffset = 0;
let jumpCount = 0;
let jump = 0;
Expand Down
9 changes: 6 additions & 3 deletions src/react/Virtualizer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
SCROLL_IDLE,
UPDATE_SCROLL_END_EVENT,
getScrollSize,
ACTION_START_OFFSET_CHANGE,
} from "../core/store";
import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
import { createScroller } from "../core/scroller";
Expand Down Expand Up @@ -178,7 +179,7 @@ export const Virtualizer = forwardRef<VirtualizerHandle, VirtualizerProps>(
shift,
horizontal: horizontalProp,
cache,
startMargin,
startMargin = 0,
ssrCount,
as: Element = "div",
item: ItemElement = "div",
Expand Down Expand Up @@ -207,8 +208,7 @@ export const Virtualizer = forwardRef<VirtualizerHandle, VirtualizerProps>(
itemSize,
ssrCount,
cache,
!itemSize,
startMargin
!itemSize
);
return [
_store,
Expand All @@ -222,6 +222,9 @@ export const Virtualizer = forwardRef<VirtualizerHandle, VirtualizerProps>(
if (count !== store._getItemsLength()) {
store._update(ACTION_ITEMS_LENGTH_CHANGE, [count, shift]);
}
if (startMargin !== store._getStartSpacerSize()) {
store._update(ACTION_START_OFFSET_CHANGE, startMargin);
}

const rerender = useRerender(store);

Expand Down
12 changes: 9 additions & 3 deletions src/vue/Virtualizer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
createVirtualStore,
ACTION_ITEMS_LENGTH_CHANGE,
getScrollSize,
ACTION_START_OFFSET_CHANGE,
} from "../core/store";
import { createResizer } from "../core/resizer";
import { createScroller } from "../core/scroller";
Expand Down Expand Up @@ -93,7 +94,7 @@ const props = {
/**
* If you put an element before virtualizer, you have to define its height with this prop.
*/
startMargin: Number,
startMargin: { type: Number, default: 0 },
/**
* A prop for SSR. If set, the specified amount of items will be mounted in the initial rendering regardless of the container size until hydrated.
*/
Expand All @@ -117,8 +118,7 @@ export const Virtualizer = /*#__PURE__*/ defineComponent({
props.itemSize ?? 40,
props.ssrCount,
undefined,
!props.itemSize,
props.startMargin
!props.itemSize
);
const resizer = createResizer(store, isHorizontal);
const scroller = createScroller(store, isHorizontal);
Expand Down Expand Up @@ -168,6 +168,12 @@ export const Virtualizer = /*#__PURE__*/ defineComponent({
store._update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
}
);
watch(
() => props.startMargin,
(value) => {
store._update(ACTION_START_OFFSET_CHANGE, value);
}
);

watch(
[rerender, store._getJumpCount],
Expand Down

0 comments on commit fabc0a8

Please sign in to comment.