Allow styling the item wrappers that `Virtualizer` renders

Đang mở
  • Có gì không ổn?
#10,719 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
16k
Fork
1.6k
Merge trung bình
4 ngày 3 giờ
Pull request đã merge (30 ngày)
39

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của adobe/react-spectrum

Tất cả issue của adobe/react-spectrum

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.