mirror of
https://github.com/plausible/analytics.git
synced 2024-11-30 11:13:22 +03:00
Fixes case-sensitivity and residual keys in date-keybinds (#709)
* Fixes case-sensitivity and residual keys * Adds 30d and 6mo shortcuts * Changelog, rename function appropriately
This commit is contained in:
parent
600378ba22
commit
e55c2213a9
@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
|
||||
|
||||
### Added
|
||||
- Stats API [currently in beta] plausible/analytics#679
|
||||
- 30 day and 6 month keybindings (`3` and `6`, respectively) plausible/analytics#709
|
||||
|
||||
### Fixed
|
||||
- Capitalized date/time selection keybinds not working plausible/analytics#709
|
||||
|
||||
## [1.2] - 2021-01-26
|
||||
|
||||
|
@ -23,7 +23,7 @@ import { navigateToQuery, QueryLink, QueryButton } from "./query";
|
||||
class DatePicker extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleKeyup = this.handleKeyup.bind(this);
|
||||
this.handleKeydown = this.handleKeydown.bind(this);
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.openCalendar = this.openCalendar.bind(this);
|
||||
this.open = this.open.bind(this);
|
||||
@ -31,19 +31,19 @@ class DatePicker extends React.Component {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener("keyup", this.handleKeyup);
|
||||
document.addEventListener("keydown", this.handleKeydown);
|
||||
document.addEventListener("mousedown", this.handleClick, false);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("keyup", this.handleKeyup);
|
||||
document.removeEventListener("keydown", this.handleKeydown);
|
||||
document.removeEventListener("mousedown", this.handleClick, false);
|
||||
}
|
||||
|
||||
handleKeyup(e) {
|
||||
handleKeydown(e) {
|
||||
const { query, history } = this.props;
|
||||
|
||||
if (e.ctrlKey || e.metaKey || e.altKey) return
|
||||
if (e.ctrlKey || e.metaKey || e.altKey || e.isComposing || e.keyCode === 229) return
|
||||
|
||||
const newSearch = {
|
||||
period: false,
|
||||
@ -100,11 +100,11 @@ class DatePicker extends React.Component {
|
||||
|
||||
this.setState({open: false});
|
||||
|
||||
const keys = ['d', 'r', 'w', 'm', 'y'];
|
||||
const redirects = [{date: false, period: 'day'}, {period: 'realtime'}, {date: false, period: '7d'}, {date: false, period: 'month'}, {date: false, period: '12mo'}];
|
||||
const keys = ['d', 'r', 'w', 'm', 'y', '3', '6'];
|
||||
const redirects = [{date: false, period: 'day'}, {period: 'realtime'}, {date: false, period: '7d'}, {date: false, period: 'month'}, {date: false, period: '12mo'}, {date: false, period: '30d'}, {date: false, period: '6mo'}];
|
||||
|
||||
if (keys.includes(e.key.toLowerCase())) {
|
||||
navigateToQuery(history, query, {...newSearch, ...(redirects[keys.indexOf(e.key) % 5])});
|
||||
navigateToQuery(history, query, {...newSearch, ...(redirects[keys.indexOf(e.key.toLowerCase())])});
|
||||
} else if (e.key.toLowerCase() === 'c') {
|
||||
this.setState({mode: 'calendar', open: true}, this.openCalendar);
|
||||
} else if (newSearch.date) {
|
||||
@ -302,6 +302,8 @@ class DatePicker extends React.Component {
|
||||
'Last 7 days': 'W',
|
||||
'Month to Date': 'M',
|
||||
'Last 12 months': 'Y',
|
||||
'Last 6 months': '6',
|
||||
'Last 30 days': '3',
|
||||
};
|
||||
|
||||
return (
|
||||
|
Loading…
Reference in New Issue
Block a user