Allow for Esc to clear all filters (#625)

* Allow for `Esc` to clear all filters

* Changelog

* Change duplicated ctrlKey (in DatePicker too)
This commit is contained in:
Vignesh Joglekar 2021-01-21 07:11:48 -06:00 committed by GitHub
parent 92827ec1c6
commit da7ccc45e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 1 deletions

View File

@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file.
- "Load More" capability to pages modal plausible/analytics#480
- Unique Visitors (last 30 min) as a top stat in realtime view plausible/analytics#500
- Pinned filter and date selector rows while scrolling plausible/analytics#472
- Escape keyboard shortcut to clear all filters plausible/analytics#625
### Changed
- Use alpine as base image to decrease Docker image size plausible/analytics#353

View File

@ -41,7 +41,7 @@ class DatePicker extends React.Component {
handleKeyup(e) {
const { query, history } = this.props;
if (e.ctrlKey || e.ctrlKey || e.altKey) return;
if (e.ctrlKey || e.metaKey || e.altKey) return
const newSearch = {
period: false,

View File

@ -24,11 +24,13 @@ class Filters extends React.Component {
this.handleResize = this.handleResize.bind(this);
this.rewrapFilters = this.rewrapFilters.bind(this);
this.renderFilterList = this.renderFilterList.bind(this);
this.handleKeyup = this.handleKeyup.bind(this)
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClick, false);
window.addEventListener('resize', this.handleResize, false);
document.addEventListener('keyup', this.handleKeyup);
this.rewrapFilters();
this.handleResize();
@ -52,10 +54,21 @@ class Filters extends React.Component {
}
componentWillUnmount() {
document.removeEventListener("keyup", this.handleKeyup);
document.removeEventListener('mousedown', this.handleClick, false);
window.removeEventListener('resize', this.handleResize, false);
}
handleKeyup(e) {
const {query, history} = this.props
if (e.ctrlKey || e.metaKey || e.altKey) return
if (e.key === 'Escape') {
this.clearAllFilters(history, query)
}
}
handleResize() {
this.setState({ viewport: window.innerWidth || 639});
}