Web: Common/Components: removed binding to id, added passing and binding className

This commit is contained in:
Artem Tarasov 2020-12-04 11:41:56 +03:00
parent 51595ac11a
commit 06c132777a
7 changed files with 18 additions and 15 deletions

View File

@ -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 });

View File

@ -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;

View File

@ -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}
/>

View File

@ -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;

View File

@ -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;

View File

@ -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);
};

View File

@ -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);