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:
parent
9026996d9e
commit
5d9f5ccf0b
9 changed files with 95 additions and 36 deletions
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue