Create useRoomName hook (#11346)

* Create useRoomName hook

Mark RoomName component as deprecated

* Pass out-of-band data to relevant RoomHeader component

* Mark LegacyRoomHeader as deprecated

* Fix incorrect search&replace in _RoomHeader.pcss

* lintfix

* Fix i18n

* Discard use of useCallback

* Change export of useRoomName

* fix ts issue

* lints
This commit is contained in:
Germain 2023-08-01 14:47:09 +01:00 committed by GitHub
parent 9026996d9e
commit 5d9f5ccf0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 95 additions and 36 deletions

View file

@ -17,37 +17,18 @@ limitations under the License.
import React from "react";
import type { Room } from "matrix-js-sdk/src/models/room";
import { _t } from "../../../languageHandler";
import RoomName from "../elements/RoomName";
import { IOOBData } from "../../../stores/ThreepidInviteStore";
import { useRoomName } from "../../../hooks/useRoomName";
export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element {
let oobName = _t("Join Room");
if (oobData && oobData.name) {
oobName = oobData.name;
}
const roomName = useRoomName(room, oobData);
return (
<header className="mx_LegacyRoomHeader light-panel">
<div className="mx_LegacyRoomHeader_wrapper">
{room && (
<RoomName room={room}>
{(name) => {
const roomName = name || oobName;
return (
<div
className="mx_LegacyRoomHeader_name"
dir="auto"
title={roomName}
role="heading"
aria-level={1}
>
{roomName}
</div>
);
}}
</RoomName>
)}
<header className="mx_RoomHeader light-panel">
<div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_name" dir="auto" title={roomName} role="heading" aria-level={1}>
{roomName}
</div>
</div>
</header>
);