Add jump to date functionality to date headers in timeline v2 (#7339)
Fix https://github.com/vector-im/element-web/issues/7677 Utilizes MSC3030: https://github.com/matrix-org/matrix-doc/pull/3030 https://user-images.githubusercontent.com/558581/150060664-79627573-f4fd-497c-b726-dc3485854bd0.png
This commit is contained in:
Eric Eastwood
GitHub
parent
efa1667d7e
commit
7fa27f5834
17 changed files with 630 additions and 44 deletions
|
|
@ -16,12 +16,26 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Direction } from 'matrix-js-sdk/src/models/event-timeline';
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import { _t } from '../../../languageHandler';
|
||||
import { formatFullDateNoTime } from '../../../DateUtils';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import dis from '../../../dispatcher/dispatcher';
|
||||
import { Action } from '../../../dispatcher/actions';
|
||||
import SettingsStore from '../../../settings/SettingsStore';
|
||||
import { UIFeature } from '../../../settings/UIFeature';
|
||||
import Modal from '../../../Modal';
|
||||
import ErrorDialog from '../dialogs/ErrorDialog';
|
||||
import { contextMenuBelow } from '../rooms/RoomTile';
|
||||
import { ContextMenuTooltipButton } from "../../structures/ContextMenu";
|
||||
import IconizedContextMenu, {
|
||||
IconizedContextMenuOption,
|
||||
IconizedContextMenuOptionList,
|
||||
} from "../context_menus/IconizedContextMenu";
|
||||
import JumpToDatePicker from './JumpToDatePicker';
|
||||
|
||||
function getDaysArray(): string[] {
|
||||
return [
|
||||
|
|
@ -36,13 +50,59 @@ function getDaysArray(): string[] {
|
|||
}
|
||||
|
||||
interface IProps {
|
||||
roomId: string;
|
||||
ts: number;
|
||||
forExport?: boolean;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
contextMenuPosition?: DOMRect;
|
||||
jumpToDateEnabled: boolean;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.messages.DateSeparator")
|
||||
export default class DateSeparator extends React.Component<IProps> {
|
||||
private getLabel() {
|
||||
export default class DateSeparator extends React.Component<IProps, IState> {
|
||||
private settingWatcherRef = null;
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
jumpToDateEnabled: SettingsStore.getValue("feature_jump_to_date"),
|
||||
};
|
||||
|
||||
// We're using a watcher so the date headers in the timeline are updated
|
||||
// when the lab setting is toggled.
|
||||
this.settingWatcherRef = SettingsStore.watchSetting(
|
||||
"feature_jump_to_date",
|
||||
null,
|
||||
(settingName, roomId, level, newValAtLevel, newVal) => {
|
||||
this.setState({ jumpToDateEnabled: newVal });
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
SettingsStore.unwatchSetting(this.settingWatcherRef);
|
||||
}
|
||||
|
||||
private onContextMenuOpenClick = (e: React.MouseEvent): void => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const target = e.target as HTMLButtonElement;
|
||||
this.setState({ contextMenuPosition: target.getBoundingClientRect() });
|
||||
};
|
||||
|
||||
private onContextMenuCloseClick = (): void => {
|
||||
this.closeMenu();
|
||||
};
|
||||
|
||||
private closeMenu = (): void => {
|
||||
this.setState({
|
||||
contextMenuPosition: null,
|
||||
});
|
||||
};
|
||||
|
||||
private getLabel(): string {
|
||||
const date = new Date(this.props.ts);
|
||||
const disableRelativeTimestamps = !SettingsStore.getValue(UIFeature.TimelineEnableRelativeDates);
|
||||
|
||||
|
|
@ -65,13 +125,127 @@ export default class DateSeparator extends React.Component<IProps> {
|
|||
}
|
||||
}
|
||||
|
||||
private pickDate = async (inputTimestamp): Promise<void> => {
|
||||
const unixTimestamp = new Date(inputTimestamp).getTime();
|
||||
|
||||
const cli = MatrixClientPeg.get();
|
||||
try {
|
||||
const roomId = this.props.roomId;
|
||||
const { event_id: eventId, origin_server_ts: originServerTs } = await cli.timestampToEvent(
|
||||
roomId,
|
||||
unixTimestamp,
|
||||
Direction.Forward,
|
||||
);
|
||||
logger.log(
|
||||
`/timestamp_to_event: ` +
|
||||
`found ${eventId} (${originServerTs}) for timestamp=${unixTimestamp} (looking forward)`,
|
||||
);
|
||||
|
||||
dis.dispatch({
|
||||
action: Action.ViewRoom,
|
||||
event_id: eventId,
|
||||
highlighted: true,
|
||||
room_id: roomId,
|
||||
});
|
||||
} catch (e) {
|
||||
const code = e.errcode || e.statusCode;
|
||||
// only show the dialog if failing for something other than a network error
|
||||
// (e.g. no errcode or statusCode) as in that case the redactions end up in the
|
||||
// detached queue and we show the room status bar to allow retry
|
||||
if (typeof code !== "undefined") {
|
||||
// display error message stating you couldn't delete this.
|
||||
Modal.createTrackedDialog('Unable to find event at that date', '', ErrorDialog, {
|
||||
title: _t('Error'),
|
||||
description: _t('Unable to find event at that date. (%(code)s)', { code }),
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
private onLastWeekClicked = (): void => {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() - 7);
|
||||
this.pickDate(date);
|
||||
this.closeMenu();
|
||||
};
|
||||
|
||||
private onLastMonthClicked = (): void => {
|
||||
const date = new Date();
|
||||
// Month numbers are 0 - 11 and `setMonth` handles the negative rollover
|
||||
date.setMonth(date.getMonth() - 1, 1);
|
||||
this.pickDate(date);
|
||||
this.closeMenu();
|
||||
};
|
||||
|
||||
private onTheBeginningClicked = (): void => {
|
||||
const date = new Date(0);
|
||||
this.pickDate(date);
|
||||
this.closeMenu();
|
||||
};
|
||||
|
||||
private onDatePicked = (dateString): void => {
|
||||
this.pickDate(dateString);
|
||||
this.closeMenu();
|
||||
};
|
||||
|
||||
private renderJumpToDateMenu(): React.ReactElement {
|
||||
let contextMenu: JSX.Element;
|
||||
if (this.state.contextMenuPosition) {
|
||||
contextMenu = <IconizedContextMenu
|
||||
{...contextMenuBelow(this.state.contextMenuPosition)}
|
||||
compact
|
||||
onFinished={this.onContextMenuCloseClick}
|
||||
>
|
||||
<IconizedContextMenuOptionList first>
|
||||
<IconizedContextMenuOption
|
||||
label={_t("Last week")}
|
||||
onClick={this.onLastWeekClicked}
|
||||
/>
|
||||
<IconizedContextMenuOption
|
||||
label={_t("Last month")}
|
||||
onClick={this.onLastMonthClicked}
|
||||
/>
|
||||
<IconizedContextMenuOption
|
||||
label={_t("The beginning of the room")}
|
||||
onClick={this.onTheBeginningClicked}
|
||||
/>
|
||||
</IconizedContextMenuOptionList>
|
||||
|
||||
<IconizedContextMenuOptionList>
|
||||
<JumpToDatePicker ts={this.props.ts} onDatePicked={this.onDatePicked} />
|
||||
</IconizedContextMenuOptionList>
|
||||
</IconizedContextMenu>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ContextMenuTooltipButton
|
||||
className="mx_DateSeparator_jumpToDateMenu"
|
||||
onClick={this.onContextMenuOpenClick}
|
||||
isExpanded={!!this.state.contextMenuPosition}
|
||||
title={_t("Jump to date")}
|
||||
>
|
||||
<div aria-hidden="true">{ this.getLabel() }</div>
|
||||
<div className="mx_DateSeparator_chevron" />
|
||||
{ contextMenu }
|
||||
</ContextMenuTooltipButton>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const label = this.getLabel();
|
||||
|
||||
let dateHeaderContent;
|
||||
if (this.state.jumpToDateEnabled) {
|
||||
dateHeaderContent = this.renderJumpToDateMenu();
|
||||
} else {
|
||||
dateHeaderContent = <div aria-hidden="true">{ label }</div>;
|
||||
}
|
||||
|
||||
// ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one
|
||||
// tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
|
||||
return <h2 className="mx_DateSeparator" role="separator" tabIndex={-1} aria-label={label}>
|
||||
<hr role="none" />
|
||||
<div aria-hidden="true">{ label }</div>
|
||||
{ dateHeaderContent }
|
||||
<hr role="none" />
|
||||
</h2>;
|
||||
}
|
||||
|
|
|
|||
107
src/components/views/messages/JumpToDatePicker.tsx
Normal file
107
src/components/views/messages/JumpToDatePicker.tsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useState, FormEvent } from 'react';
|
||||
|
||||
import { _t } from '../../../languageHandler';
|
||||
import Field from "../elements/Field";
|
||||
import NativeOnChangeInput from "../elements/NativeOnChangeInput";
|
||||
import { RovingAccessibleButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
|
||||
|
||||
interface IProps {
|
||||
ts: number;
|
||||
onDatePicked?: (dateString: string) => void;
|
||||
}
|
||||
|
||||
const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
|
||||
const date = new Date(ts);
|
||||
const year = date.getFullYear();
|
||||
const month = `${date.getMonth() + 1}`.padStart(2, "0");
|
||||
const day = `${date.getDate()}`.padStart(2, "0");
|
||||
const dateDefaultValue = `${year}-${month}-${day}`;
|
||||
|
||||
const [dateValue, setDateValue] = useState(dateDefaultValue);
|
||||
// Whether or not to automatically navigate to the given date after someone
|
||||
// selects a day in the date picker. We want to disable this after someone
|
||||
// starts manually typing in the input instead of picking.
|
||||
const [navigateOnDatePickerSelection, setNavigateOnDatePickerSelection] = useState(true);
|
||||
|
||||
// Since we're using NativeOnChangeInput with native JavaScript behavior, this
|
||||
// tracks the date value changes as they come in.
|
||||
const onDateValueInput = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
setDateValue(e.target.value);
|
||||
};
|
||||
|
||||
// Since we're using NativeOnChangeInput with native JavaScript behavior, the change
|
||||
// event listener will trigger when a date is picked from the date picker
|
||||
// or when the text is fully filled out. In order to not trigger early
|
||||
// as someone is typing out a date, we need to disable when we see keydowns.
|
||||
const onDateValueChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
setDateValue(e.target.value);
|
||||
|
||||
// Don't auto navigate if they were manually typing out a date
|
||||
if (navigateOnDatePickerSelection) {
|
||||
onDatePicked(dateValue);
|
||||
}
|
||||
};
|
||||
|
||||
const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();
|
||||
|
||||
const onDateInputKeyDown = (e: React.KeyboardEvent): void => {
|
||||
// When we see someone manually typing out a date, disable the auto
|
||||
// submit on change.
|
||||
setNavigateOnDatePickerSelection(false);
|
||||
};
|
||||
|
||||
const onJumpToDateSubmit = (ev: FormEvent): void => {
|
||||
ev.preventDefault();
|
||||
|
||||
onDatePicked(dateValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<form
|
||||
className="mx_JumpToDatePicker_form"
|
||||
onSubmit={onJumpToDateSubmit}
|
||||
>
|
||||
<span className="mx_JumpToDatePicker_label">Jump to date</span>
|
||||
<Field
|
||||
componentClass={NativeOnChangeInput}
|
||||
type="date"
|
||||
onChange={onDateValueChange}
|
||||
onInput={onDateValueInput}
|
||||
onKeyDown={onDateInputKeyDown}
|
||||
value={dateValue}
|
||||
className="mx_JumpToDatePicker_datePicker"
|
||||
label={_t("Pick a date to jump to")}
|
||||
onFocus={onFocus}
|
||||
inputRef={ref}
|
||||
tabIndex={isActive ? 0 : -1}
|
||||
/>
|
||||
<RovingAccessibleButton
|
||||
element="button"
|
||||
type="submit"
|
||||
kind="primary"
|
||||
className="mx_JumpToDatePicker_submitButton"
|
||||
onClick={onJumpToDateSubmit}
|
||||
>
|
||||
{ _t("Go") }
|
||||
</RovingAccessibleButton>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default JumpToDatePicker;
|
||||
Loading…
Add table
Add a link
Reference in a new issue