hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

use aria-react for message hover & focus hooks (#1456)

Browse source
This commit is contained in:
Ajay Bura 2023-10-19 17:42:35 +11:00 committed by GitHub
parent b92b281050
commit b4e1ced3ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 1616 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1606
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -56,6 +56,7 @@
"prismjs": "1.29.0", "prismjs": "1.29.0",
"prop-types": "15.8.1", "prop-types": "15.8.1",
"react": "17.0.2", "react": "17.0.2",
"react-aria": "3.29.1",
"react-autosize-textarea": "7.1.0", "react-autosize-textarea": "7.1.0",
"react-blurhash": "0.2.0", "react-blurhash": "0.2.0",
"react-dnd": "15.1.2", "react-dnd": "15.1.2",

19
src/app/organisms/room/message/Message.tsx
View file

@ -32,6 +32,7 @@ import React, {
useState, useState,
} from 'react'; } from 'react';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { useHover, useFocusWithin } from 'react-aria';
import { MatrixEvent, Room } from 'matrix-js-sdk'; import { MatrixEvent, Room } from 'matrix-js-sdk';
import { Relations } from 'matrix-js-sdk/lib/models/relations'; import { Relations } from 'matrix-js-sdk/lib/models/relations';
import classNames from 'classnames'; import classNames from 'classnames';
@ -607,6 +608,8 @@ export const Message = as<'div', MessageProps>(
const mx = useMatrixClient(); const mx = useMatrixClient();
const senderId = mEvent.getSender() ?? ''; const senderId = mEvent.getSender() ?? '';
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover });
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
const [menu, setMenu] = useState(false); const [menu, setMenu] = useState(false);
const [emojiBoard, setEmojiBoard] = useState(false); const [emojiBoard, setEmojiBoard] = useState(false);
@ -692,9 +695,6 @@ export const Message = as<'div', MessageProps>(
</Box> </Box>
); );
const showOptions = () => setHover(true);
const hideOptions = () => setHover(false);
const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => { const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
if (evt.altKey || !window.getSelection()?.isCollapsed) return; if (evt.altKey || !window.getSelection()?.isCollapsed) return;
const tag = (evt.target as any).tagName; const tag = (evt.target as any).tagName;
@ -716,8 +716,8 @@ export const Message = as<'div', MessageProps>(
highlight={highlight} highlight={highlight}
selected={menu || emojiBoard} selected={menu || emojiBoard}
{...props} {...props}
onMouseEnter={showOptions} {...hoverProps}
onMouseLeave={hideOptions} {...focusWithinProps}
ref={ref} ref={ref}
> >
{!edit && (hover || menu || emojiBoard) && ( {!edit && (hover || menu || emojiBoard) && (
@ -958,12 +958,11 @@ export const Event = as<'div', EventProps>(
({ className, room, mEvent, highlight, canDelete, messageSpacing, children, ...props }, ref) => { ({ className, room, mEvent, highlight, canDelete, messageSpacing, children, ...props }, ref) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover });
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
const [menu, setMenu] = useState(false); const [menu, setMenu] = useState(false);
const stateEvent = typeof mEvent.getStateKey() === 'string'; const stateEvent = typeof mEvent.getStateKey() === 'string';
const showOptions = () => setHover(true);
const hideOptions = () => setHover(false);
const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => { const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
if (evt.altKey || !window.getSelection()?.isCollapsed) return; if (evt.altKey || !window.getSelection()?.isCollapsed) return;
const tag = (evt.target as any).tagName; const tag = (evt.target as any).tagName;
@ -985,8 +984,8 @@ export const Event = as<'div', EventProps>(
highlight={highlight} highlight={highlight}
selected={menu} selected={menu}
{...props} {...props}
onMouseEnter={showOptions} {...hoverProps}
onMouseLeave={hideOptions} {...focusWithinProps}
ref={ref} ref={ref}
> >
{(hover || menu) && ( {(hover || menu) && (