web: components: expanded the click area
This commit is contained in:
parent
07e3cefb5c
commit
da340128ad
@ -34,6 +34,8 @@ const StyledFilterItem = styled.div`
|
|||||||
`;
|
`;
|
||||||
const StyledCloseButtonBlock = styled.div`
|
const StyledCloseButtonBlock = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
cursor: ${props =>
|
||||||
|
props.isDisabled || !props.isClickable ? "default" : "pointer"};
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -66,6 +68,7 @@ class FilterItem extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
this.onSelect = this.onSelect.bind(this);
|
this.onSelect = this.onSelect.bind(this);
|
||||||
|
this.onClick = this.onClick.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
onSelect(option) {
|
onSelect(option) {
|
||||||
@ -76,6 +79,9 @@ class FilterItem extends React.Component {
|
|||||||
inSubgroup: !!option.inSubgroup
|
inSubgroup: !!option.inSubgroup
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
onClick(e){
|
||||||
|
!this.props.isDisabled && this.props.onClose(e, this.props.id);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
@ -98,10 +104,10 @@ class FilterItem extends React.Component {
|
|||||||
: <StyledFilterName>{this.props.label}</StyledFilterName>
|
: <StyledFilterName>{this.props.label}</StyledFilterName>
|
||||||
}
|
}
|
||||||
|
|
||||||
<StyledCloseButtonBlock>
|
<StyledCloseButtonBlock onClick={this.onClick}>
|
||||||
<CloseButton
|
<CloseButton
|
||||||
isDisabled={this.props.isDisabled}
|
isDisabled={this.props.isDisabled}
|
||||||
onClick={!this.props.isDisabled ? ((e) => this.props.onClose(e, this.props.id)) : undefined}
|
onClick={this.onClick}
|
||||||
/>
|
/>
|
||||||
</StyledCloseButtonBlock>
|
</StyledCloseButtonBlock>
|
||||||
</StyledFilterItem>
|
</StyledFilterItem>
|
||||||
|
Loading…
Reference in New Issue
Block a user