import React, { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import './RoomViewHeader.scss'; import { twemojify } from '../../../util/twemojify'; import { blurOnBubbling } from '../../atoms/button/script'; import initMatrix from '../../../client/initMatrix'; import cons from '../../../client/state/cons'; import navigation from '../../../client/state/navigation'; import { toggleRoomSettings, openRoomOptions } from '../../../client/action/navigation'; import { togglePeopleDrawer } from '../../../client/action/settings'; import colorMXID from '../../../util/colorMXID'; import { getEventCords } from '../../../util/common'; import Text from '../../atoms/text/Text'; import RawIcon from '../../atoms/system-icons/RawIcon'; import IconButton from '../../atoms/button/IconButton'; import Header, { TitleWrapper } from '../../atoms/header/Header'; import Avatar from '../../atoms/avatar/Avatar'; import UserIC from '../../../../public/res/ic/outlined/user.svg'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg'; function RoomViewHeader({ roomId }) { const mx = initMatrix.matrixClient; const isDM = initMatrix.roomList.directs.has(roomId); let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop'); avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc; const roomName = mx.getRoom(roomId).name; const roomHeaderBtnRef = useRef(null); useEffect(() => { const settingsToggle = (isVisibile) => { const rawIcon = roomHeaderBtnRef.current.lastElementChild; rawIcon.style.transform = isVisibile ? 'rotateX(180deg)' : 'rotateX(0deg)'; }; navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle); return () => { navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle); }; }, []); return (
openRoomOptions(getEventCords(e), roomId)} tooltip="Options" src={VerticalMenuIC} />
); } RoomViewHeader.propTypes = { roomId: PropTypes.string.isRequired, }; export default RoomViewHeader;