web: components: expanded the click area

This commit is contained in:
NikolayRechkin 2019-12-13 11:47:31 +03:00
parent 07e3cefb5c
commit da340128ad

View File

@ -34,6 +34,8 @@ const StyledFilterItem = styled.div`
`;
const StyledCloseButtonBlock = styled.div`
display: flex;
cursor: ${props =>
props.isDisabled || !props.isClickable ? "default" : "pointer"};
align-items: center;
position: absolute;
height: 100%;
@ -66,6 +68,7 @@ class FilterItem extends React.Component {
};
this.onSelect = this.onSelect.bind(this);
this.onClick = this.onClick.bind(this);
}
onSelect(option) {
@ -76,6 +79,9 @@ class FilterItem extends React.Component {
inSubgroup: !!option.inSubgroup
});
}
onClick(e){
!this.props.isDisabled && this.props.onClose(e, this.props.id);
}
render() {
return (
@ -98,10 +104,10 @@ class FilterItem extends React.Component {
: <StyledFilterName>{this.props.label}</StyledFilterName>
}
<StyledCloseButtonBlock>
<StyledCloseButtonBlock onClick={this.onClick}>
<CloseButton
isDisabled={this.props.isDisabled}
onClick={!this.props.isDisabled ? ((e) => this.props.onClose(e, this.props.id)) : undefined}
onClick={this.onClick}
/>
</StyledCloseButtonBlock>
</StyledFilterItem>