Allow styling the item wrappers that `Virtualizer` renders

未关闭
  • 哪里不对？
#10,719 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
48/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
活跃
技术栈
react, typescript
领域
frontend

调研方向

Start by reading Virtualizer's renderWrapper, VirtualizerItem, and VirtualizerProps, then review the earlier change in #6998 and the TableLayout sizing behavior described here. Decide how wrapper styling should be exposed without disrupting measurement or layout styles. Done when a layout can center short cells in variable-height rows without relying on a global selector, with tests covering the behavior.

由索引模型根据 Issue 内容生成。

描述

Provide a general summary of the feature here

Virtualizer wraps every item in a VirtualizerItem div, but there is no way to give that div a className or style. Layout-level CSS that has to target the wrapper, such as vertical alignment in a variable-height TableLayout row, can only be written as a global selector on markup the library owns.

🤔 Expected Behavior?

Some way to style the wrappers, for example a className/style (or a render-prop form taking the LayoutInfo) on Virtualizer, or a layout option that sets them per item.

😯 Current Behavior

renderWrapper in Virtualizer creates VirtualizerItem with only key, layoutInfo, virtualizer, parent and shouldObserveItemSize. VirtualizerItem has accepted className and style since #6998, but Virtualizer passes neither, and VirtualizerProps has no option for them. Its inline style sets position, top/left, width, height, overflow and contain: size layout style. The LayoutInfo fields a layout can set (zIndex, opacity, transform, allowOverflow, isSticky) cannot express alignment.

💁 Possible Solution

Either forward an optional className/style from Virtualizer to each VirtualizerItem, or, as suggested in #6998, let a layout attach style information to a node's LayoutInfo, the way sticky items are handled, for example a vertical alignment option on TableLayout for cells shorter than their row.

🔦 Context

We use TableLayout with estimatedRowHeight and shouldObserveItemSize. Each cell has to stay as tall as its content: the ResizeObserver watches the wrapper's direct children, and getSize clears the wrapper's height and reads its scrollHeight. That means a short cell sits at the top of its row-tall wrapper, while we want it centred.

The cell cannot centre itself. Under contain: size, the wrapper measures as 0px tall while its height is cleared, so any offset on the cell (top: 50% with a translate, or absolute positioning with auto margins) shifts it up during measurement and the row comes out at half its height. The only working option is a global rule that makes the wrapper display: grid; align-items: center, selected as the row's children.

💻 Examples
/* What we have to write today, against markup we don't own */
.variableRowHeights .tableRow > * {
  display: grid;
  align-items: center;
}
🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

主要语言
TypeScript
星标
16k
派生
1.6k
平均合并
4 天 3 小时
30 天内合并 PR
39

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

adobe/react-spectrum 的其他 Issue

查看 adobe/react-spectrum 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。