import React from "react"; import PropTypes from "prop-types"; import styled, { css } from "styled-components"; import { isMobileOnly } from "react-device-detect"; import { mobile } from "@appserver/components/utils/device"; import { Base } from "@appserver/components/themes"; import Selector from "./sub-components/Selector"; import Backdrop from "@appserver/components/backdrop"; const mobileView = css` top: 64px; width: 100vw !important; height: calc(100vh - 64px) !important; `; const StyledBlock = styled.div` position: fixed; top: 0; right: 0; width: 480px; max-width: 100vw; height: 100vh; z-index: 400; display: flex; flex-direction: column; background: ${(props) => props.theme.filterInput.filter.background}; @media ${mobile} { ${mobileView} } ${isMobileOnly && mobileView} .people-selector { height: 100%; width: 100%; .selector-wrapper, .column-options { width: 100%; } } `; StyledBlock.defaultProps = { theme: Base }; class AdvancedSelector extends React.Component { constructor(props) { super(props); this.ref = React.createRef(); } onClose = (e) => { //console.log("onClose"); //this.setState({ isOpen: false }); this.props.onCancel && this.props.onCancel(e); }; render() { const { isOpen, id, className, style, withoutAside } = this.props; return ( <> {isOpen && (