Allow styling the item wrappers that `Virtualizer` renders

オープン
  • 何か問題がありますか？
#10,719 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
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時間
マージ済み PR（30日）
39

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

adobe/react-spectrum のほかの issue

adobe/react-spectrum の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。