Skip to content

Commit ed80582

Browse files
committed
chore: calc optimization
1 parent 58a90b9 commit ed80582

File tree

1 file changed

+6
-5
lines changed

1 file changed

+6
-5
lines changed

examples/react/lanes/src/main.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -149,12 +149,12 @@ function GapVirtualizer() {
149149
style={{
150150
position: 'absolute',
151151
top: 0,
152-
left: `calc((${virtualRow.index % numLanes} * 100% / ${numLanes}) + (${columnGap}px * (${virtualRow.index % numLanes}) / ${numLanes}))`,
153-
width: `calc((100% / ${numLanes}) - (${columnGap}px * (${numLanes} - 1) / ${numLanes}))`,
152+
"--start-ratio": `calc(mod(${virtualRow.index}, ${numLanes}) / ${numLanes})`,
153+
left: `calc((var(--start-ratio) * 100%) + (${columnGap}px * var(--start-ratio)))`,
154154
height: `${virtualRow.size}px`,
155155
transform: `translateY(${virtualRow.start}px)`,
156156
outline: '1px solid red',
157-
}}
157+
} as React.CSSProperties}
158158
>
159159
Cell {virtualRow.index}
160160
</div>
@@ -245,12 +245,13 @@ function ResizeVirtualizer() {
245245
style={{
246246
position: 'absolute',
247247
top: 0,
248-
left: `calc((${virtualRow.index % numLanes} * 100% / ${numLanes}) + (${columnGap}px * (${virtualRow.index % numLanes}) / ${numLanes}))`,
248+
"--start-ratio": `calc(mod(${virtualRow.index}, ${numLanes}) / ${numLanes})`,
249+
left: `calc((var(--start-ratio) * 100%) + (${columnGap}px * var(--start-ratio)))`,
249250
width: `calc((100% / ${numLanes}) - (${columnGap}px * (${numLanes} - 1) / ${numLanes}))`,
250251
height: `${virtualRow.size}px`,
251252
transform: `translateY(${virtualRow.start}px)`,
252253
outline: '1px solid red',
253-
}}
254+
} as React.CSSProperties}
254255
>
255256
Cell {virtualRow.index}
256257
</div>

0 commit comments

Comments
 (0)