u
This commit is contained in:
@@ -59,6 +59,7 @@ class FillSpace extends Component {
|
||||
if (
|
||||
prevProps.aboveRef !== this.props.aboveRef ||
|
||||
prevProps.belowRef !== this.props.belowRef ||
|
||||
prevProps.containerRef !== this.props.containerRef ||
|
||||
prevProps.minHeight !== this.props.minHeight ||
|
||||
prevProps.maxHeight !== this.props.maxHeight ||
|
||||
prevProps.measureElement !== this.props.measureElement ||
|
||||
@@ -98,12 +99,14 @@ class FillSpace extends Component {
|
||||
|
||||
// Only observe the referenced elements + the rendered content — never the
|
||||
// spacer's own parent, since resizing the spacer would resize the parent
|
||||
const { aboveRef, belowRef } = this.props;
|
||||
const { aboveRef, belowRef, containerRef } = this.props;
|
||||
const aboveList = Array.isArray(aboveRef) ? aboveRef : [aboveRef];
|
||||
const belowList = Array.isArray(belowRef) ? belowRef : [belowRef];
|
||||
const containerTarget = containerRef && 'current' in containerRef ? containerRef.current : containerRef;
|
||||
const targets = [
|
||||
...aboveList.map((r) => (r && 'current' in r ? r.current : r)),
|
||||
...belowList.map((r) => (r && 'current' in r ? r.current : r)),
|
||||
containerTarget,
|
||||
this.contentRef,
|
||||
];
|
||||
for (const el of targets) {
|
||||
@@ -122,6 +125,7 @@ class FillSpace extends Component {
|
||||
|
||||
const {
|
||||
belowRef,
|
||||
containerRef,
|
||||
measureElement,
|
||||
measureGap = 0,
|
||||
minHeight = 0,
|
||||
@@ -145,7 +149,16 @@ class FillSpace extends Component {
|
||||
belowPx += Number.isFinite(marginTop) ? marginTop : 0;
|
||||
}
|
||||
|
||||
const available = Math.max(0, window.innerHeight - abovePx - belowPx);
|
||||
const containerEl = containerRef && 'current' in containerRef ? containerRef.current : containerRef;
|
||||
let available;
|
||||
if (containerEl && typeof containerEl.getBoundingClientRect === 'function') {
|
||||
const cRect = containerEl.getBoundingClientRect();
|
||||
const paddingBottom = parseFloat(window.getComputedStyle(containerEl).paddingBottom) || 0;
|
||||
available = Math.max(0, cRect.bottom - rect.top - belowPx - paddingBottom);
|
||||
} else {
|
||||
available = Math.max(0, window.innerHeight - abovePx - belowPx);
|
||||
}
|
||||
|
||||
const clamped = Math.min(
|
||||
Math.max(available, minHeight),
|
||||
maxHeight ?? Infinity,
|
||||
|
||||
Reference in New Issue
Block a user