59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import HomeIcon from "@mui/icons-material/Home";
|
|
import { Button } from "@mui/material";
|
|
import React from "react";
|
|
import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
|
|
import type { Room } from "../../api/matrix/MatrixApiRoom";
|
|
import type { SpaceHierarchy } from "../../api/matrix/MatrixApiSpace";
|
|
import { RoomIcon } from "./RoomIcon";
|
|
|
|
export function SpaceSelector(p: {
|
|
rooms: Room[];
|
|
hierarchy: SpaceHierarchy;
|
|
users: UsersMap;
|
|
selectedSpace?: string;
|
|
onChange: (space?: string) => void;
|
|
}): React.ReactElement {
|
|
const spaces = React.useMemo(
|
|
() => p.rooms.filter((r) => r.is_space && p.hierarchy.has(r.id)),
|
|
[p.rooms]
|
|
);
|
|
|
|
// Do not display space bar if your is not member of any space
|
|
if (spaces.length === 0) return <></>;
|
|
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
<SpaceButton
|
|
icon={<HomeIcon />}
|
|
onClick={() => p.onChange()}
|
|
selected={p.selectedSpace === undefined}
|
|
/>
|
|
|
|
{spaces.map((s) => (
|
|
<SpaceButton
|
|
key={s.id}
|
|
icon={<RoomIcon room={s} {...p} />}
|
|
onClick={() => p.onChange(s.id)}
|
|
selected={p.selectedSpace === s.id}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SpaceButton(p: {
|
|
selected?: boolean;
|
|
icon: React.ReactElement;
|
|
onClick: () => void;
|
|
}): React.ReactElement {
|
|
return (
|
|
<Button
|
|
variant={p.selected ? "contained" : "text"}
|
|
style={{ margin: "2px 5px", padding: "25px 10px", fontSize: "200%" }}
|
|
onClick={p.onClick}
|
|
>
|
|
{p.icon}
|
|
</Button>
|
|
);
|
|
}
|