IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Components: removed reactstrap from hide-filter

Browse Source
This commit is contained in:
Nikita Gopienko 2019-12-03 11:03:04 +03:00
parent c1a4fd65cf
commit 1eca151e8a
1 changed files with 69 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
web/ASC.Web.Components/src/components/filter-input/hide-filter.js
View File

@ -1,21 +1,17 @@
import React from "react"; import React from "react";
import styled from 'styled-components'; import styled from "styled-components";
import { Icons } from '../icons'; import { Icons } from "../icons";
import { Popover, PopoverBody } from 'reactstrap'; import DropDown from "../drop-down";
import { handleAnyClick } from "../../utils/event";
const Caret = styled.div` const Caret = styled.div`
width: 7px; width: 7px;
position: absolute; position: absolute;
right: 6px; right: 6px;
transform: ${props => props.isOpen ? 'rotate(180deg)' : 'rotate(0)'}; transform: ${props => (props.isOpen ? "rotate(180deg)" : "rotate(0)")};
top: ${props => props.isOpen ? '2px' : '0'}; top: ${props => (props.isOpen ? "2px" : "0")};
`;
const StyledPopover = styled(Popover)`
.popover{
border: none;
max-width: 320px;
}
`; `;
const StyledHideFilterButton = styled.div` const StyledHideFilterButton = styled.div`
display: flex; display: flex;
position: relative; position: relative;
@ -23,68 +19,104 @@ const StyledHideFilterButton = styled.div`
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
height: 100%; height: 100%;
border: 1px solid #ECEEF1; border: 1px solid #eceef1;
border-radius: 3px; border-radius: 3px;
background-color: #F8F9F9; background-color: #f8f9f9;
padding: 0 20px 0 9px; padding: 0 20px 0 9px;
margin-right: 2px; margin-right: 2px;
cursor: ${props => props.isDisabled ? 'default' : 'pointer'}; cursor: ${props => (props.isDisabled ? "default" : "pointer")};
font-family: Open Sans; font-family: Open Sans;
font-style: normal; font-style: normal;
:hover { :hover {
border-color: ${props => props.isDisabled ? '#ECEEF1' : '#A3A9AE'}; border-color: ${props => (props.isDisabled ? "#ECEEF1" : "#A3A9AE")};
} }
:active { :active {
background-color: ${props => props.isDisabled ? '#F8F9F9' : '#ECEEF1'}; background-color: ${props => (props.isDisabled ? "#F8F9F9" : "#ECEEF1")};
} }
`; `;
const StyledHideFilter = styled.div` const StyledHideFilter = styled.div`
display: inline-block; display: inline-block;
height: 100%; height: 100%;
`; `;
const StyledPopoverBody = styled(PopoverBody)` const DropDownStyle = styled.div`
border-radius: 6px; .drop-down {
box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.13); padding: 8px;
}
position: relative;
`; `;
class HideFilter extends React.Component { class HideFilter extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.toggle = this.toggle.bind(this); this.ref = React.createRef();
this.dropDownRef = React.createRef();
this.state = { this.state = {
popoverOpen: false popoverOpen: false
}; };
} }
toggle() { onClick = (state, e) => {
if (!state && e && this.dropDownRef.current.contains(e.target)) {
return;
}
if (!this.props.isDisabled) { if (!this.props.isDisabled) {
this.setState({ this.setState({
popoverOpen: !this.state.popoverOpen popoverOpen: state
}); });
} }
};
handleClick = e => {
this.state.popoverOpen &&
!this.ref.current.contains(e.target) &&
this.onClick(false);
};
componentWillUnmount() {
handleAnyClick(false, this.handleClick);
}
componentDidUpdate(prevState) {
if (this.state.popoverOpen !== prevState.popoverOpen) {
handleAnyClick(this.state.popoverOpen, this.handleClick);
}
} }
render() { render() {
//console.log("HideFilter render"); //console.log("HideFilter render");
return ( return (
<StyledHideFilter> <StyledHideFilter
<StyledHideFilterButton id="PopoverLegacy" isDisabled={this.props.isDisabled} >{this.props.count} <Caret isOpen={this.state.popoverOpen}><Icons.ExpanderDownIcon size='scale' isfill={true} color="#A3A9AE" /></Caret></StyledHideFilterButton> onClick={this.onClick.bind(this, !this.state.popoverOpen)}
ref={this.ref}
<StyledPopover >
isOpen={this.state.popoverOpen} <StyledHideFilterButton
trigger="legacy" id="PopoverLegacy"
placement="bottom-start" isDisabled={this.props.isDisabled}
target="PopoverLegacy" >
hideArrow={true} {this.props.count}
toggle={this.toggle}> <Caret isOpen={this.state.popoverOpen}>
<StyledPopoverBody>{this.props.children}</StyledPopoverBody> <Icons.ExpanderDownIcon
</StyledPopover> size="scale"
isfill={true}
color="#A3A9AE"
/>
</Caret>
</StyledHideFilterButton>
<DropDownStyle ref={this.dropDownRef}>
<DropDown
className="drop-down"
manualY="8px"
opened={this.state.popoverOpen}
>
{this.props.children}
</DropDown>
</DropDownStyle>
</StyledHideFilter> </StyledHideFilter>
); );
} }
} }
export default HideFilter export default HideFilter;