Skip to content
This repository was archived by the owner on Dec 16, 2022. It is now read-only.

Commit 270f05c

Browse files
leebeydounleebeydoun
authored
[WINDOW]: updated logic to not render any of the pinned row and column divs when they are empty. (#174)
1 parent 61ea722 commit 270f05c

File tree

5 files changed

+125
-107
lines changed

5 files changed

+125
-107
lines changed

‎.changeset/early-wasps-act.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@resembli/react-virtualized-window": patch
3+
---
4+
5+
Add conditional checks so we don't render pinned column and row divs when they are empty.

‎packages/react-virtualized-window/src/components/Grid.tsx‎

Lines changed: 116 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -326,117 +326,133 @@ export function Grid<T>({
326326
{scrollableItems}
327327
</ScrollDiv>
328328
{/* Mid Left */}
329-
<div style={{ position: "sticky", left: 0, width: adjustedWidth }}>
330-
<ScrollDiv
331-
disableSticky={disableSticky}
332-
topOffset={topOffset}
333-
leftOffset={0}
334-
top={totalTopHeight}
335-
left={0}
336-
>
337-
{midLeftItems}
338-
</ScrollDiv>
339-
</div>
340-
329+
{!!pinnedLeftCount && (
330+
<div style={{ position: "sticky", left: 0, width: adjustedWidth }}>
331+
<ScrollDiv
332+
disableSticky={disableSticky}
333+
topOffset={topOffset}
334+
leftOffset={0}
335+
top={totalTopHeight}
336+
left={0}
337+
>
338+
{midLeftItems}
339+
</ScrollDiv>
340+
</div>
341+
)}
341342
{/* Mid Right */}
342-
<div style={{ position: "sticky", left: 0, width: adjustedWidth }}>
343-
<ScrollDiv
344-
disableSticky={disableSticky}
345-
topOffset={topOffset}
346-
leftOffset={0}
347-
top={totalTopHeight}
348-
left={adjustedWidth - totalRightWidth}
349-
>
350-
{midRightItems}
351-
</ScrollDiv>
352-
</div>
343+
{!!pinnedRightCount && (
344+
<div style={{ position: "sticky", left: 0, width: adjustedWidth }}>
345+
<ScrollDiv
346+
disableSticky={disableSticky}
347+
topOffset={topOffset}
348+
leftOffset={0}
349+
top={totalTopHeight}
350+
left={adjustedWidth - totalRightWidth}
351+
>
352+
{midRightItems}
353+
</ScrollDiv>
354+
</div>
355+
)}
353356

354357
{/* Top Mid */}
355-
<div
356-
style={{
357-
position: "sticky",
358-
top: 0,
359-
left: 0,
360-
}}
361-
>
362-
<ScrollDiv
363-
disableSticky={disableSticky}
364-
topOffset={0}
365-
leftOffset={leftOffset}
366-
top={0}
367-
left={totalLeftWidth}
358+
{!!pinnedTopCount && (
359+
<div
360+
style={{
361+
position: "sticky",
362+
top: 0,
363+
left: 0,
364+
}}
368365
>
369-
{topMidItems}
370-
</ScrollDiv>
371-
</div>
366+
<ScrollDiv
367+
disableSticky={disableSticky}
368+
topOffset={0}
369+
leftOffset={leftOffset}
370+
top={0}
371+
left={totalLeftWidth}
372+
>
373+
{topMidItems}
374+
</ScrollDiv>
375+
</div>
376+
)}
372377
{/* Top Left */}
373-
<div style={{ position: "sticky", top: 0, left: 0, width: adjustedWidth }}>
374-
<ScrollDiv disableSticky={false} top={0} left={0} topOffset={0} leftOffset={0}>
375-
{topLeftItems}
376-
</ScrollDiv>
377-
</div>
378+
{!!pinnedTopCount && !!pinnedLeftCount && (
379+
<div style={{ position: "sticky", top: 0, left: 0, width: adjustedWidth }}>
380+
<ScrollDiv disableSticky={false} top={0} left={0} topOffset={0} leftOffset={0}>
381+
{topLeftItems}
382+
</ScrollDiv>
383+
</div>
384+
)}
378385
{/* Top Right */}
379-
<div style={{ position: "sticky", top: 0, left: 0, width: adjustedWidth }}>
380-
<ScrollDiv
381-
disableSticky={false}
382-
top={0}
383-
left={adjustedWidth - totalRightWidth}
384-
topOffset={0}
385-
leftOffset={0}
386-
>
387-
{topRightItems}
388-
</ScrollDiv>
389-
</div>
386+
{!!pinnedTopCount && !!pinnedRightCount && (
387+
<div style={{ position: "sticky", top: 0, left: 0, width: adjustedWidth }}>
388+
<ScrollDiv
389+
disableSticky={false}
390+
top={0}
391+
left={adjustedWidth - totalRightWidth}
392+
topOffset={0}
393+
leftOffset={0}
394+
>
395+
{topRightItems}
396+
</ScrollDiv>
397+
</div>
398+
)}
390399

391400
{/* Bot Mid */}
392-
<div style={{ position: "sticky", top: adjustedHeight - totalBotHeight, left: 0 }}>
393-
<ScrollDiv
394-
disableSticky={disableSticky}
395-
leftOffset={leftOffset}
396-
topOffset={0}
397-
top={0}
398-
left={totalLeftWidth}
399-
>
400-
{botMidItems}
401-
</ScrollDiv>
402-
</div>
401+
{!!pinnedBottomCount && (
402+
<div style={{ position: "sticky", top: adjustedHeight - totalBotHeight, left: 0 }}>
403+
<ScrollDiv
404+
disableSticky={disableSticky}
405+
leftOffset={leftOffset}
406+
topOffset={0}
407+
top={0}
408+
left={totalLeftWidth}
409+
>
410+
{botMidItems}
411+
</ScrollDiv>
412+
</div>
413+
)}
403414
{/* Bot Left */}
404-
<div
405-
style={{
406-
position: "sticky",
407-
top: adjustedHeight - totalBotHeight,
408-
left: 0,
409-
width: adjustedWidth,
410-
}}
411-
>
412-
<ScrollDiv
413-
disableSticky={disableSticky}
414-
leftOffset={0}
415-
topOffset={0}
416-
top={0}
417-
left={0}
415+
{!!pinnedBottomCount && !!pinnedLeftCount && (
416+
<div
417+
style={{
418+
position: "sticky",
419+
top: adjustedHeight - totalBotHeight,
420+
left: 0,
421+
width: adjustedWidth,
422+
}}
418423
>
419-
{botLeftItems}
420-
</ScrollDiv>
421-
</div>
422-
<div
423-
style={{
424-
position: "sticky",
425-
top: adjustedHeight - totalBotHeight,
426-
left: 0,
427-
width: adjustedWidth,
428-
}}
429-
>
430-
<ScrollDiv
431-
disableSticky={disableSticky}
432-
leftOffset={0}
433-
topOffset={0}
434-
top={0}
435-
left={adjustedWidth - totalRightWidth}
424+
<ScrollDiv
425+
disableSticky={disableSticky}
426+
leftOffset={0}
427+
topOffset={0}
428+
top={0}
429+
left={0}
430+
>
431+
{botLeftItems}
432+
</ScrollDiv>
433+
</div>
434+
)}
435+
{/* Bot Right */}
436+
{!!pinnedBottomCount && !!pinnedRightCount && (
437+
<div
438+
style={{
439+
position: "sticky",
440+
top: adjustedHeight - totalBotHeight,
441+
left: 0,
442+
width: adjustedWidth,
443+
}}
436444
>
437-
{botRightItems}
438-
</ScrollDiv>
439-
</div>
445+
<ScrollDiv
446+
disableSticky={disableSticky}
447+
leftOffset={0}
448+
topOffset={0}
449+
top={0}
450+
left={adjustedWidth - totalRightWidth}
451+
>
452+
{botRightItems}
453+
</ScrollDiv>
454+
</div>
455+
)}
440456
</StickyDiv>
441457
</div>
442458
</div>

‎packages/react-virtualized-window/src/types.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,6 @@ export interface VirtualWindowBaseProps<T> {
1919

2020
pinnedTopCount?: number
2121
pinnedBottomCount?: number
22-
pinnedLeftCount?: number
23-
pinnedRightCount?: number
24-
2522
"data-testid"?: string
2623
}
2724

@@ -43,6 +40,9 @@ export interface GridProps<T> extends VirtualWindowBaseProps<T> {
4340
rowHeights?: NumberOrPercent[]
4441
defaultColumnWidth: NumberOrPercent
4542
columnWidths?: NumberOrPercent[]
43+
44+
pinnedLeftCount?: number
45+
pinnedRightCount?: number
4646
}
4747

4848
export type RenderItem<T> = GridProps<T>["children"]

‎packages/react-virtualized-window/src/useScrollItems.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export function useScrollItems<T>({
3636
}: ScrollItemArgs<T>) {
3737
const scrollableItems = React.useMemo(
3838
function Items() {
39+
if (!data.length) return <></>
3940
return (
4041
<>
4142
<div style={{ height: runningHeight }}></div>

‎playgrounds/src/App.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,6 @@ function App() {
5959
width="70%"
6060
height="70%"
6161
disableSticky={disableSticky}
62-
pinnedTopCount={1}
63-
pinnedBottomCount={1}
64-
pinnedLeftCount={1}
65-
pinnedRightCount={1}
6662
>
6763
{({ data, style, cellMeta }) => (
6864
<div

0 commit comments

Comments
 (0)