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
2022-01-27 16:32:12 -06:00
parent efa1667d7e
commit 7fa27f5834
17 changed files with 630 additions and 44 deletions
@@ -30,3 +30,87 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
  </DateSeparator>
 </Wrapper>
 `;
+
+exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = `
+<Wrapper
+  now="2021-12-17T08:09:00.000Z"
+  ts={1639728540000}
+>
+  <DateSeparator
+    now="2021-12-17T08:09:00.000Z"
+    ts={1639728540000}
+  >
+    <h2
+      aria-label="Fri, Dec 17 2021"
+      className="mx_DateSeparator"
+      role="separator"
+      tabIndex={-1}
+    >
+      <hr
+        role="none"
+      />
+      <ContextMenuTooltipButton
+        className="mx_DateSeparator_jumpToDateMenu"
+        isExpanded={false}
+        onClick={[Function]}
+        title="Jump to date"
+      >
+        <AccessibleTooltipButton
+          aria-expanded={false}
+          aria-haspopup={true}
+          className="mx_DateSeparator_jumpToDateMenu"
+          forceHide={false}
+          onClick={[Function]}
+          onContextMenu={[Function]}
+          title="Jump to date"
+        >
+          <AccessibleButton
+            aria-expanded={false}
+            aria-haspopup={true}
+            aria-label="Jump to date"
+            className="mx_DateSeparator_jumpToDateMenu"
+            element="div"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onContextMenu={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseOver={[Function]}
+            role="button"
+            tabIndex={0}
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup={true}
+              aria-label="Jump to date"
+              className="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onContextMenu={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseLeave={[Function]}
+              onMouseOver={[Function]}
+              role="button"
+              tabIndex={0}
+            >
+              <div
+                aria-hidden="true"
+              >
+                Fri, Dec 17 2021
+              </div>
+              <div
+                className="mx_DateSeparator_chevron"
+              />
+            </div>
+          </AccessibleButton>
+        </AccessibleTooltipButton>
+      </ContextMenuTooltipButton>
+      <hr
+        role="none"
+      />
+    </h2>
+  </DateSeparator>
+</Wrapper>
+`;