Add jump to date functionality to date headers in timeline v2 (#7339)

Fix element-hq/element-web#7677

Utilizes MSC3030: matrix-org/matrix-spec-proposals#3030

https://user-images.githubusercontent.com/558581/150060664-79627573-f4fd-497c-b726-dc3485854bd0.png

Author: MadLittleMods

res/css/_components.scss

@@ -183,6 +183,7 @@
 @import "./views/messages/_CallEvent.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
+@import "./views/messages/_JumpToDatePicker.scss";
 @import "./views/messages/_EventTileBubble.scss";
 @import "./views/messages/_HiddenBody.scss";
 @import "./views/messages/_MEmoteBody.scss";

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -50,21 +50,21 @@ limitations under the License.
         }
 
         // round the top corners of the top button for the hover effect to be bounded
-        &:first-child .mx_AccessibleButton:first-child {
+        &:first-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child {
             border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
         }
 
         // round the bottom corners of the bottom button for the hover effect to be bounded
-        &:last-child .mx_AccessibleButton:last-child {
+        &:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):last-child {
             border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
         }
 
         // round all corners of the only button for the hover effect to be bounded
-        &:first-child:last-child .mx_AccessibleButton:first-child:last-child {
+        &:first-child:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child:last-child {
             border-radius: 8px; // radius matches .mx_ContextualMenu
         }
 
-        .mx_AccessibleButton {
+        .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
             // pad the inside of the button so that the hover background is padded too
             padding-top: 12px;
             padding-bottom: 12px;
@@ -130,7 +130,7 @@ limitations under the License.
     }
 
     .mx_IconizedContextMenu_optionList_red {
-        .mx_AccessibleButton {
+        .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
             color: $alert !important;
         }
 
@@ -148,7 +148,7 @@ limitations under the License.
     }
 
     .mx_IconizedContextMenu_active {
-        &.mx_AccessibleButton, .mx_AccessibleButton {
+        &.mx_AccessibleButton:not(.mx_AccessibleButton_hasKind), .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) {
             color: $accent !important;
         }
 

res/css/views/messages/_DateSeparator.scss

@@ -33,3 +33,18 @@ limitations under the License.
     margin: 0 25px;
     flex: 0 0 auto;
 }
+
+.mx_DateSeparator_jumpToDateMenu {
+    display: flex;
+}
+
+.mx_DateSeparator_chevron {
+    align-self: center;
+    width: 16px;
+    height: 16px;
+    mask-position: center;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+    background-color: $tertiary-content;
+}

res/css/views/messages/_JumpToDatePicker.scss

@@ -0,0 +1,37 @@
+/*
+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.
+*/
+
+.mx_JumpToDatePicker_form {
+    display: flex;
+}
+
+.mx_JumpToDatePicker_label {
+    align-self: center;
+    font-size: $font-15px;
+}
+
+.mx_JumpToDatePicker_datePicker {
+    margin: 0;
+    margin-left: 8px;
+
+    &, & > input {
+        border-radius: 8px;
+    }
+}
+
+.mx_JumpToDatePicker_submitButton {
+    margin-left: 8px;
+}

src/components/structures/MessagePanel.tsx

@@ -721,8 +721,12 @@ export default class MessagePanel extends React.Component<IProps, IState> {
 
         // do we need a date separator since the last event?
         const wantsDateSeparator = this.wantsDateSeparator(prevEvent, eventDate);
-        if (wantsDateSeparator && !isGrouped) {
-            const dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1} /></li>;
+        if (wantsDateSeparator && !isGrouped && this.props.room) {
+            const dateSeparator = (
+                <li key={ts1}>
+                    <DateSeparator key={ts1} roomId={this.props.room.roomId} ts={ts1} />
+                </li>
+            );
             ret.push(dateSeparator);
         }
 
@@ -1118,7 +1122,7 @@ class CreationGrouper extends BaseGrouper {
         if (panel.wantsDateSeparator(this.prevEvent, createEvent.getDate())) {
             const ts = createEvent.getTs();
             ret.push(
-                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} roomId={createEvent.getRoomId()} ts={ts} /></li>,
             );
         }
 
@@ -1231,7 +1235,7 @@ class RedactionGrouper extends BaseGrouper {
         if (panel.wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
             const ts = this.events[0].getTs();
             ret.push(
-                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} roomId={this.events[0].getRoomId()} ts={ts} /></li>,
             );
         }
 
@@ -1327,7 +1331,7 @@ class MemberGrouper extends BaseGrouper {
         if (panel.wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
             const ts = this.events[0].getTs();
             ret.push(
-                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} roomId={this.events[0].getRoomId()} ts={ts} /></li>,
             );
         }
 
@@ -1429,7 +1433,7 @@ class HiddenEventGrouper extends BaseGrouper {
         if (panel.wantsDateSeparator(this.prevEvent, this.events[0].getDate())) {
             const ts = this.events[0].getTs();
             ret.push(
-                <li key={ts+'~'}><DateSeparator key={ts+'~'} ts={ts} /></li>,
+                <li key={ts+'~'}><DateSeparator key={ts+'~'} roomId={this.events[0].getRoomId()} ts={ts} /></li>,
             );
         }
 

src/components/views/dialogs/MessageEditHistoryDialog.tsx

@@ -130,7 +130,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent<IProps
         const baseEventId = this.props.mxEvent.getId();
         allEvents.forEach((e, i) => {
             if (!lastEvent || wantsDateSeparator(lastEvent.getDate(), e.getDate())) {
-                nodes.push(<li key={e.getTs() + "~"}><DateSeparator ts={e.getTs()} /></li>);
+                nodes.push(<li key={e.getTs() + "~"}><DateSeparator roomId={e.getRoomId()} ts={e.getTs()} /></li>);
             }
             const isBaseEvent = e.getId() === baseEventId;
             nodes.push((

src/components/views/elements/Field.tsx

@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import React, { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, RefObject } from 'react';
 import classNames from 'classnames';
 import { debounce } from "lodash";
 
 import * as sdk from '../../../index';
 import { IFieldState, IValidationResult } from "./Validation";
+import { ComponentClass } from "../../../@types/common";
 
 // Invoke validation from user input (when typing, etc.) at most once every N ms.
 const VALIDATION_THROTTLE_MS = 200;
@@ -78,26 +79,45 @@ interface IProps {
 }
 
 export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
+    // The ref pass through to the input
+    inputRef?: RefObject<HTMLInputElement>;
     // The element to create. Defaults to "input".
     element?: "input";
+    componentClass?: undefined;
     // The input's value. This is a controlled component, so the value is required.
     value: string;
 }
 
 interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
+    // The ref pass through to the select
+    inputRef?: RefObject<HTMLSelectElement>;
     // To define options for a select, use <Field><option ... /></Field>
     element: "select";
+    componentClass?: undefined;
     // The select's value. This is a controlled component, so the value is required.
     value: string;
 }
 
 interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
+    // The ref pass through to the textarea
+    inputRef?: RefObject<HTMLTextAreaElement>;
     element: "textarea";
+    componentClass?: undefined;
     // The textarea's value. This is a controlled component, so the value is required.
     value: string;
 }
 
-type PropShapes = IInputProps | ISelectProps | ITextareaProps;
+export interface INativeOnChangeInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
+    // The ref pass through to the input
+    inputRef?: RefObject<HTMLInputElement>;
+    element: "input";
+    // The custom component to render
+    componentClass: ComponentClass;
+    // The input's value. This is a controlled component, so the value is required.
+    value: string;
+}
+
+type PropShapes = IInputProps | ISelectProps | ITextareaProps | INativeOnChangeInputProps;
 
 interface IState {
     valid: boolean;
@@ -108,7 +128,7 @@ interface IState {
 
 export default class Field extends React.PureComponent<PropShapes, IState> {
     private id: string;
-    private input: HTMLInputElement;
+    private inputRef: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
 
     public static readonly defaultProps = {
         element: "input",
@@ -146,7 +166,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
     }
 
     public focus() {
-        this.input.focus();
+        this.inputRef.current?.focus();
         // programmatic does not fire onFocus handler
         this.setState({
             focused: true,
@@ -197,7 +217,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         if (!this.props.onValidate) {
             return;
         }
-        const value = this.input ? this.input.value : null;
+        const value = this.inputRef.current?.value ?? null;
         const { valid, feedback } = await this.props.onValidate({
             value,
             focused,
@@ -228,13 +248,13 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
 
     public render() {
         /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { element, prefixComponent, postfixComponent, className, onValidate, children,
+        const { element, componentClass, inputRef, prefixComponent, postfixComponent, className, onValidate, children,
             tooltipContent, forceValidity, tooltipClassName, list, validateOnBlur, validateOnChange, validateOnFocus,
             usePlaceholderAsHint, forceTooltipVisible,
             ...inputProps } = this.props;
 
-        // Set some defaults for the <input> element
-        const ref = input => this.input = input;
+        this.inputRef = inputRef || React.createRef();
+
         inputProps.placeholder = inputProps.placeholder || inputProps.label;
         inputProps.id = this.id; // this overwrites the id from props
 
@@ -243,9 +263,9 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         inputProps.onBlur = this.onBlur;
 
         // Appease typescript's inference
-        const inputProps_ = { ...inputProps, ref, list };
+        const inputProps_ = { ...inputProps, ref: this.inputRef, list };
 
-        const fieldInput = React.createElement(this.props.element, inputProps_, children);
+        const fieldInput = React.createElement(this.props.componentClass || this.props.element, inputProps_, children);
 
         let prefixContainer = null;
         if (prefixComponent) {
@@ -257,17 +277,22 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         }
 
         const hasValidationFlag = forceValidity !== null && forceValidity !== undefined;
-        const fieldClasses = classNames("mx_Field", `mx_Field_${this.props.element}`, className, {
-            // If we have a prefix element, leave the label always at the top left and
-            // don't animate it, as it looks a bit clunky and would add complexity to do
-            // properly.
-            mx_Field_labelAlwaysTopLeft: prefixComponent || usePlaceholderAsHint,
-            mx_Field_placeholderIsHint: usePlaceholderAsHint,
-            mx_Field_valid: hasValidationFlag ? forceValidity : onValidate && this.state.valid === true,
-            mx_Field_invalid: hasValidationFlag
-                ? !forceValidity
-                : onValidate && this.state.valid === false,
-        });
+        const fieldClasses = classNames(
+            "mx_Field",
+            `mx_Field_${this.props.element}`,
+            className,
+            {
+                // If we have a prefix element, leave the label always at the top left and
+                // don't animate it, as it looks a bit clunky and would add complexity to do
+                // properly.
+                mx_Field_labelAlwaysTopLeft: prefixComponent || usePlaceholderAsHint,
+                mx_Field_placeholderIsHint: usePlaceholderAsHint,
+                mx_Field_valid: hasValidationFlag ? forceValidity : onValidate && this.state.valid === true,
+                mx_Field_invalid: hasValidationFlag
+                    ? !forceValidity
+                    : onValidate && this.state.valid === false,
+            },
+        );
 
         // Handle displaying feedback on validity
         // FIXME: Using an import will result in test failures

src/components/views/elements/NativeOnChangeInput.tsx

@@ -0,0 +1,69 @@
+/*
+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 from 'react';
+
+import { useCombinedRefs } from "../../../hooks/useCombinedRefs";
+
+interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInput'> {
+    onChange?: (event: Event) => void;
+    onInput?: (event: Event) => void;
+}
+
+/**
+* This component restores the native 'onChange' and 'onInput' behavior of
+* JavaScript which have important differences for certain <input> types. This is
+* necessary because in React, the `onChange` handler behaves like the native
+* `oninput` handler and there is no way to tell the difference between an
+* `input` vs `change` event.
+*
+* via https://stackoverflow.com/a/62383569/796832 and
+* https://github.com/facebook/react/issues/9657#issuecomment-643970199
+*
+* See:
+* - https://reactjs.org/docs/dom-elements.html#onchange
+* - https://github.com/facebook/react/issues/3964
+* - https://github.com/facebook/react/issues/9657
+* - https://github.com/facebook/react/issues/14857
+*
+* Examples:
+*
+* We use this for the <input type="date"> date picker so we can distinguish from
+* a final date picker selection (onChange) vs navigating the months in the date
+* picker (onInput).
+*
+* This is also potentially useful for <input type="range" /> because the native
+* events behave in such a way that moving the slider around triggers an onInput
+* event and releasing it triggers onChange.
+*/
+const NativeOnChangeInput: React.FC<IProps> = React.forwardRef((props: IProps, ref) => {
+    const registerCallbacks = (input: HTMLInputElement | null) => {
+        if (input) {
+            input.onchange = props.onChange;
+            input.oninput = props.onInput;
+        }
+    };
+
+    return <input
+        ref={useCombinedRefs(registerCallbacks, ref)}
+        {...props}
+        // These are just here so we don't get a read-only input warning from React
+        onChange={() => {}}
+        onInput={() => {}}
+    />;
+});
+
+export default NativeOnChangeInput;