Web: Common/Components: removed binding to id, added passing and binding className
This commit is contained in:
parent
51595ac11a
commit
06c132777a
@ -28,7 +28,7 @@ class HideFilter extends React.Component {
|
||||
handleClickOutside = (e) => {
|
||||
if (
|
||||
this.ref.current.contains(e.target) &&
|
||||
!e.target.closest("#backdrop-active")
|
||||
!e.target.closest(".backdrop-active")
|
||||
)
|
||||
return;
|
||||
this.setState({ popoverOpen: !this.state.popoverOpen });
|
||||
|
@ -41,7 +41,7 @@ class ProfileActions extends React.PureComponent {
|
||||
onClose = (e) => {
|
||||
if (
|
||||
this.ref.current.contains(e.target) &&
|
||||
!e.target.closest("#backdrop-active")
|
||||
!e.target.closest(".backdrop-active")
|
||||
)
|
||||
return;
|
||||
|
||||
|
@ -28,23 +28,26 @@ class Backdrop extends React.Component {
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.visible !== this.props.visible) {
|
||||
const isExist = document.querySelectorAll("#backdrop-active").length > 1;
|
||||
const isExist = document.querySelectorAll(".backdrop-active").length > 1;
|
||||
this.setState({ backdropExist: isExist });
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { backdropExist } = this.state;
|
||||
const { className } = this.props;
|
||||
|
||||
return this.props.visible ? (
|
||||
const classNameStr = this.props.visible
|
||||
? this.props.className
|
||||
? `backdrop-active ${className}`
|
||||
: "backdrop-active"
|
||||
: this.props.className
|
||||
? `backdrop-active ${className}`
|
||||
: "backdrop-inactive";
|
||||
|
||||
return (
|
||||
<StyledBackdrop
|
||||
id="backdrop-active"
|
||||
{...this.props}
|
||||
backdropExist={backdropExist}
|
||||
/>
|
||||
) : (
|
||||
<StyledBackdrop
|
||||
id="backdrop-inactive"
|
||||
className={classNameStr}
|
||||
{...this.props}
|
||||
backdropExist={backdropExist}
|
||||
/>
|
||||
|
@ -50,7 +50,7 @@ class ComboBox extends React.Component {
|
||||
handleClickOutside = (e) => {
|
||||
if (
|
||||
this.ref.current.contains(e.target) &&
|
||||
!e.target.closest("#backdrop-active")
|
||||
!e.target.closest(".backdrop-active")
|
||||
)
|
||||
return;
|
||||
|
||||
|
@ -142,7 +142,7 @@ class ContextMenuButton extends React.Component {
|
||||
clickOutsideAction = (e) => {
|
||||
if (
|
||||
this.ref.current.contains(e.target) &&
|
||||
!e.target.closest("#backdrop-active")
|
||||
!e.target.closest(".backdrop-active")
|
||||
)
|
||||
return;
|
||||
|
||||
|
@ -139,7 +139,7 @@ class GroupButton extends React.Component {
|
||||
|
||||
clickOutsideAction = (e) => {
|
||||
(this.state.isOpen && !this.ref.current.contains(e.target)) ||
|
||||
e.target.closest("#backdrop-active");
|
||||
e.target.closest(".backdrop-active");
|
||||
this.setIsOpen(false);
|
||||
};
|
||||
|
||||
|
@ -121,7 +121,7 @@ class MainButton extends React.PureComponent {
|
||||
if (
|
||||
!this.state.isOpen &&
|
||||
this.ref.current.contains(e.target) &&
|
||||
!e.target.closest("#backdrop-active")
|
||||
!e.target.closest(".backdrop-active")
|
||||
)
|
||||
return;
|
||||
this.toggle(false);
|
||||
|
Loading…
Reference in New Issue
Block a user