diff --git a/src/FillSpace.jsx b/src/FillSpace.jsx index 65e17a3..6665151 100644 --- a/src/FillSpace.jsx +++ b/src/FillSpace.jsx @@ -15,6 +15,7 @@ import { alpha } from '@mui/material/styles'; * @prop {Array} items - Wheel flips pages. * @prop {React.ComponentType|Function} renderItem - Row renderer (component or callback). * @prop {React.ReactNode} [header] - Rendered below pagination controls and above the list items. + * @prop {any} [headerItem] - Optional dummy/sample item passed to probe element for layout measurement. * @prop {number} [minPageSize=10] - Rows per page. * @prop {number} [maxPageSize] - Maximum rows per page. * @prop {number} [totalCount] - Total items in current dataset (or filtered dataset when paginating). @@ -45,18 +46,16 @@ function renderRowElement(renderItem, item, index) { } /** - * Data-free probe of the row height, rendered hidden. Class components + * Probe of the row height, rendered hidden. Class components * (e.g. `renderItem={ArtikelMarke}`) tolerate empty props * (`brand`/`item` undefined) and keep a fixed height (40px thumb / - * text field), so the probe measures the row without depending on the - * first data element. Plain callbacks are NOT probed — calling arbitrary - * user code with `undefined` could throw — they fall back to the first - * rendered data row. + * text field). When `headerItem` is supplied, it is passed to the row + * for precise measurement of data-driven layouts. */ -function renderProbeElement(renderItem) { +function renderProbeElement(renderItem, headerItem) { if (!isRowComponent(renderItem)) return null; const Row = renderItem; - return ; + return ; } const MIN_THUMB_HEIGHT = 48; @@ -104,7 +103,10 @@ class FillSpace extends Component { } componentDidUpdate(prevProps) { - if (prevProps.renderItem !== this.props.renderItem) { + if ( + prevProps.renderItem !== this.props.renderItem || + prevProps.headerItem !== this.props.headerItem + ) { this._probeMeasure(); } if ( @@ -487,8 +489,8 @@ class FillSpace extends Component { : (pageCount > 1 && maxThumbTravel > 0 ? ((safePage - 1) / (pageCount - 1)) * maxThumbTravel : 0); } - // Hidden data-free probe: measures `renderItem` itself (no data). - const probe = renderProbeElement(renderItem); + // Hidden probe: measures `renderItem` (passes headerItem when provided). + const probe = renderProbeElement(renderItem, this.props.headerItem); return ( <>