Modernize AppBarContext

This commit is contained in:
Timo
2025-06-25 09:46:57 +02:00
parent eb294b111d
commit e5affa8942

View File

@@ -10,8 +10,8 @@ import {
type FC, type FC,
type MouseEvent, type MouseEvent,
type ReactNode, type ReactNode,
use,
useCallback, useCallback,
useContext,
useEffect, useEffect,
useMemo, useMemo,
useState, useState,
@@ -22,7 +22,6 @@ import {
CollapseIcon, CollapseIcon,
} from "@vector-im/compound-design-tokens/assets/web/icons"; } from "@vector-im/compound-design-tokens/assets/web/icons";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import classNames from "classnames";
import { Header, LeftNav, RightNav } from "./Header"; import { Header, LeftNav, RightNav } from "./Header";
import { platform } from "./Platform"; import { platform } from "./Platform";
@@ -86,9 +85,7 @@ export const AppBar: FC<Props> = ({ children }) => {
<RightNav>{secondaryButton}</RightNav> <RightNav>{secondaryButton}</RightNav>
</Header> </Header>
</div> </div>
<AppBarContext.Provider value={context}> <AppBarContext value={context}>{children}</AppBarContext>
{children}
</AppBarContext.Provider>
</> </>
); );
}; };
@@ -98,7 +95,7 @@ export const AppBar: FC<Props> = ({ children }) => {
* an error to call this hook from multiple sites in the same component tree. * an error to call this hook from multiple sites in the same component tree.
*/ */
export function useAppBarTitle(title: string): void { export function useAppBarTitle(title: string): void {
const setTitle = useContext(AppBarContext)?.setTitle; const setTitle = use(AppBarContext)?.setTitle;
useEffect(() => { useEffect(() => {
if (setTitle !== undefined) { if (setTitle !== undefined) {
setTitle(title); setTitle(title);
@@ -112,7 +109,7 @@ export function useAppBarTitle(title: string): void {
* an error to call this hook from multiple sites in the same component tree. * an error to call this hook from multiple sites in the same component tree.
*/ */
export function useAppBarHidden(hidden: boolean): void { export function useAppBarHidden(hidden: boolean): void {
const setHidden = useContext(AppBarContext)?.setHidden; const setHidden = use(AppBarContext)?.setHidden;
useEffect(() => { useEffect(() => {
if (setHidden !== undefined) { if (setHidden !== undefined) {
setHidden(hidden); setHidden(hidden);
@@ -127,7 +124,7 @@ export function useAppBarHidden(hidden: boolean): void {
* component tree. * component tree.
*/ */
export function useAppBarSecondaryButton(button: ReactNode): void { export function useAppBarSecondaryButton(button: ReactNode): void {
const setSecondaryButton = useContext(AppBarContext)?.setSecondaryButton; const setSecondaryButton = use(AppBarContext)?.setSecondaryButton;
useEffect(() => { useEffect(() => {
if (setSecondaryButton !== undefined) { if (setSecondaryButton !== undefined) {
setSecondaryButton(button); setSecondaryButton(button);