forked from github/cinny
loosely provide nav handling for testing refactoring
This commit is contained in:
@@ -52,6 +52,7 @@ import {
|
|||||||
} from '../../hooks/useRoomsNotificationPreferences';
|
} from '../../hooks/useRoomsNotificationPreferences';
|
||||||
import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
|
import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
|
||||||
import { useCallState } from '../../pages/client/CallProvider';
|
import { useCallState } from '../../pages/client/CallProvider';
|
||||||
|
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
||||||
|
|
||||||
type RoomNavItemMenuProps = {
|
type RoomNavItemMenuProps = {
|
||||||
room: Room;
|
room: Room;
|
||||||
@@ -221,10 +222,11 @@ export function RoomNavItem({
|
|||||||
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
|
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
|
||||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||||||
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
|
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
|
||||||
const { activeCallRoomId, isChatOpen, toggleChat, hangUp } = useCallState();
|
const { activeCallRoomId, setActiveCallRoomId, isChatOpen, toggleChat, hangUp } = useCallState();
|
||||||
const typingMember = useRoomTypingMember(room.roomId).filter(
|
const typingMember = useRoomTypingMember(room.roomId).filter(
|
||||||
(receipt) => receipt.userId !== mx.getUserId()
|
(receipt) => receipt.userId !== mx.getUserId()
|
||||||
);
|
);
|
||||||
|
const { navigateRoom } = useRoomNavigate();
|
||||||
|
|
||||||
const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
|
const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
@@ -251,6 +253,9 @@ export function RoomNavItem({
|
|||||||
|
|
||||||
if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
|
if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
|
||||||
hangUp();
|
hangUp();
|
||||||
|
setActiveCallRoomId(room.roomId);
|
||||||
|
} else {
|
||||||
|
navigateRoom(room.roomId);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -272,57 +277,54 @@ export function RoomNavItem({
|
|||||||
{...hoverProps}
|
{...hoverProps}
|
||||||
{...focusWithinProps}
|
{...focusWithinProps}
|
||||||
>
|
>
|
||||||
<NavLink to={linkPath} onClick={handleNavItemClick}>
|
<NavItemContent onClick={handleNavItemClick}>
|
||||||
{' '}
|
<Box as="span" grow="Yes" alignItems="Center" gap="200">
|
||||||
<NavItemContent>
|
<Avatar size="200" radii="400">
|
||||||
<Box as="span" grow="Yes" alignItems="Center" gap="200">
|
{showAvatar ? (
|
||||||
<Avatar size="200" radii="400">
|
<RoomAvatar
|
||||||
{showAvatar ? (
|
roomId={room.roomId}
|
||||||
<RoomAvatar
|
src={
|
||||||
roomId={room.roomId}
|
direct
|
||||||
src={
|
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
|
||||||
direct
|
: getRoomAvatarUrl(mx, room, 96, useAuthentication)
|
||||||
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
|
}
|
||||||
: getRoomAvatarUrl(mx, room, 96, useAuthentication)
|
alt={room.name}
|
||||||
}
|
renderFallback={() => (
|
||||||
alt={room.name}
|
<Text as="span" size="H6">
|
||||||
renderFallback={() => (
|
{nameInitials(room.name)}
|
||||||
<Text as="span" size="H6">
|
</Text>
|
||||||
{nameInitials(room.name)}
|
)}
|
||||||
</Text>
|
/>
|
||||||
)}
|
) : (
|
||||||
/>
|
<RoomIcon
|
||||||
) : (
|
style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
|
||||||
<RoomIcon
|
filled={selected}
|
||||||
style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
|
size="100"
|
||||||
filled={selected}
|
joinRule={room.getJoinRule()}
|
||||||
size="100"
|
call={room.isCallRoom()}
|
||||||
joinRule={room.getJoinRule()}
|
/>
|
||||||
call={room.isCallRoom()}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Avatar>
|
|
||||||
<Box as="span" grow="Yes">
|
|
||||||
<Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
|
|
||||||
{room.name}
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
{!optionsVisible && !unread && !selected && typingMember.length > 0 && (
|
|
||||||
<Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
|
|
||||||
<TypingIndicator size="300" disableAnimation />
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
{!optionsVisible && unread && (
|
|
||||||
<UnreadBadgeCenter>
|
|
||||||
<UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
|
|
||||||
</UnreadBadgeCenter>
|
|
||||||
)}
|
|
||||||
{!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
|
|
||||||
<Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
|
|
||||||
)}
|
)}
|
||||||
|
</Avatar>
|
||||||
|
<Box as="span" grow="Yes">
|
||||||
|
<Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
|
||||||
|
{room.name}
|
||||||
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
</NavItemContent>
|
{!optionsVisible && !unread && !selected && typingMember.length > 0 && (
|
||||||
</NavLink>
|
<Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
|
||||||
|
<TypingIndicator size="300" disableAnimation />
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{!optionsVisible && unread && (
|
||||||
|
<UnreadBadgeCenter>
|
||||||
|
<UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
|
||||||
|
</UnreadBadgeCenter>
|
||||||
|
)}
|
||||||
|
{!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
|
||||||
|
<Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</NavItemContent>
|
||||||
{optionsVisible && (
|
{optionsVisible && (
|
||||||
<NavItemOptions>
|
<NavItemOptions>
|
||||||
<PopOut
|
<PopOut
|
||||||
|
|||||||
Reference in New Issue
Block a user