Web: Components: DropDown - fixed width calculation in dark theme

This commit is contained in:
DmitrySychugov 2023-08-24 19:35:55 +05:00
parent d044fd1512
commit 27d80856a4

View File

@ -47,6 +47,7 @@ class DropDown extends React.PureComponent {
directionY: props.directionY,
manualY: props.manualY,
isDropdownReady: false, // need to avoid scrollbar appearing during dropdown position calculation
borderOffset: props.theme.isBase ? 0 : 2, // need to remove the difference in width with the parent in a dark theme
};
this.dropDownRef = React.createRef();
@ -124,7 +125,7 @@ class DropDown extends React.PureComponent {
return;
}
const { smallSectionWidth, forwardedRef } = this.props;
const { manualY } = this.state;
const { manualY, borderOffset } = this.state;
const isRtl = this.props.theme.interfaceDirection === "rtl";
const rects = this.dropDownRef.current.getBoundingClientRect();
@ -181,7 +182,9 @@ class DropDown extends React.PureComponent {
directionX: x,
directionY: y,
manualY: mY,
width: this.dropDownRef ? this.dropDownRef.current.offsetWidth : 240,
width: this.dropDownRef
? this.dropDownRef.current.offsetWidth - borderOffset
: 240,
isDropdownReady: true,
});
};
@ -193,6 +196,7 @@ class DropDown extends React.PureComponent {
return;
}
const dropDown = this.dropDownRef.current;
const { borderOffset } = this.state;
const parentRects = parent.current.getBoundingClientRect();
@ -256,7 +260,9 @@ class DropDown extends React.PureComponent {
this.setState({
directionX: this.props.directionX,
directionY: this.props.directionY,
width: this.dropDownRef ? this.dropDownRef.current.offsetWidth : 240,
width: this.dropDownRef
? this.dropDownRef.current.offsetWidth - borderOffset
: 240,
isDropdownReady: true,
});
};