mirror of
https://github.com/vector-im/element-call.git
synced 2026-08-08 20:09:19 +00:00
Modernize AppBarContext
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user