Web: Components: DropDown: Fixed position checking for non portal
This commit is contained in:
parent
f2a8867a4c
commit
73dfb927cf
@ -30,6 +30,7 @@ class DropDown extends React.PureComponent {
|
||||
this.state = {
|
||||
directionX: props.directionX,
|
||||
directionY: props.directionY,
|
||||
manualY: props.manualY,
|
||||
};
|
||||
|
||||
this.dropDownRef = React.createRef();
|
||||
@ -100,17 +101,24 @@ class DropDown extends React.PureComponent {
|
||||
|
||||
checkPosition = () => {
|
||||
if (!this.dropDownRef.current) return;
|
||||
const { smallSectionWidth } = this.props;
|
||||
const { smallSectionWidth, forwardedRef } = this.props;
|
||||
const { manualY } = this.state;
|
||||
|
||||
const rects = this.dropDownRef.current.getBoundingClientRect();
|
||||
const container = { width: window.innerWidth, height: window.innerHeight };
|
||||
const parentRects = forwardedRef?.current?.getBoundingClientRect();
|
||||
const container = DomHelpers.getViewport();
|
||||
|
||||
const left = rects.left < 0 && rects.width < container.width;
|
||||
const right =
|
||||
rects.width &&
|
||||
rects.left < (rects.width || 250) &&
|
||||
rects.left > rects.width &&
|
||||
rects.width < container.width;
|
||||
const top = rects.bottom > container.height && rects.top > rects.height;
|
||||
const top =
|
||||
rects.bottom > (parentRects ? parentRects.top : container.height) &&
|
||||
(parentRects ? parentRects.top : rects.top) > rects.height;
|
||||
const bottom = rects.top < 0;
|
||||
|
||||
const x = left
|
||||
? "left"
|
||||
: right || smallSectionWidth
|
||||
@ -118,9 +126,12 @@ class DropDown extends React.PureComponent {
|
||||
: this.state.directionX;
|
||||
const y = bottom ? "bottom" : top ? "top" : this.state.directionY;
|
||||
|
||||
const mY = top ? `${parentRects.height}px` : manualY;
|
||||
|
||||
this.setState({
|
||||
directionX: x,
|
||||
directionY: y,
|
||||
manualY: mY,
|
||||
width: this.dropDownRef ? this.dropDownRef.current.offsetWidth : 240,
|
||||
});
|
||||
};
|
||||
@ -199,7 +210,7 @@ class DropDown extends React.PureComponent {
|
||||
|
||||
renderDropDown() {
|
||||
const { maxHeight, children, showDisabledItems } = this.props;
|
||||
const { directionX, directionY, width } = this.state;
|
||||
const { directionX, directionY, width, manualY } = this.state;
|
||||
let cleanChildren;
|
||||
|
||||
const rowHeights = React.Children.map(children, (child) =>
|
||||
@ -221,6 +232,7 @@ class DropDown extends React.PureComponent {
|
||||
{...this.props}
|
||||
directionX={directionX}
|
||||
directionY={directionY}
|
||||
manualY={manualY}
|
||||
{...dropDownMaxHeightProp}
|
||||
>
|
||||
{maxHeight ? (
|
||||
|
Loading…
Reference in New Issue
Block a user