2021-02-26 13:23:09 +03:00
|
|
|
/*
|
|
|
|
Copyright 2021 The Matrix.org Foundation C.I.C.
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
2021-06-22 13:50:00 +03:00
|
|
|
import React, { createRef } from "react";
|
2021-02-26 13:23:09 +03:00
|
|
|
import classNames from "classnames";
|
2021-06-22 13:50:00 +03:00
|
|
|
import { Room } from "matrix-js-sdk/src/models/room";
|
2021-02-26 13:23:09 +03:00
|
|
|
|
|
|
|
import RoomAvatar from "../avatars/RoomAvatar";
|
|
|
|
import SpaceStore from "../../../stores/SpaceStore";
|
2021-05-11 09:08:02 +03:00
|
|
|
import SpaceTreeLevelLayoutStore from "../../../stores/SpaceTreeLevelLayoutStore";
|
2021-02-26 13:23:09 +03:00
|
|
|
import NotificationBadge from "../rooms/NotificationBadge";
|
2021-06-22 13:50:00 +03:00
|
|
|
import { RovingAccessibleTooltipButton } from "../../../accessibility/roving/RovingAccessibleTooltipButton";
|
2021-03-02 17:34:47 +03:00
|
|
|
import IconizedContextMenu, {
|
|
|
|
IconizedContextMenuOption,
|
|
|
|
IconizedContextMenuOptionList,
|
|
|
|
} from "../context_menus/IconizedContextMenu";
|
2021-06-22 13:50:00 +03:00
|
|
|
import { _t } from "../../../languageHandler";
|
|
|
|
import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
|
|
|
|
import { toRightOf } from "../../structures/ContextMenu";
|
2021-03-24 18:30:36 +03:00
|
|
|
import {
|
|
|
|
shouldShowSpaceSettings,
|
|
|
|
showAddExistingRooms,
|
2021-03-26 17:45:10 +03:00
|
|
|
showCreateNewRoom,
|
|
|
|
showSpaceInvite,
|
2021-03-24 18:30:36 +03:00
|
|
|
showSpaceSettings,
|
|
|
|
} from "../../../utils/space";
|
2021-02-26 13:23:09 +03:00
|
|
|
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
2021-06-22 13:50:00 +03:00
|
|
|
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
|
2021-03-02 17:34:47 +03:00
|
|
|
import defaultDispatcher from "../../../dispatcher/dispatcher";
|
2021-06-22 13:50:00 +03:00
|
|
|
import { Action } from "../../../dispatcher/actions";
|
2021-03-02 17:34:47 +03:00
|
|
|
import RoomViewStore from "../../../stores/RoomViewStore";
|
2021-06-22 13:50:00 +03:00
|
|
|
import { SetRightPanelPhasePayload } from "../../../dispatcher/payloads/SetRightPanelPhasePayload";
|
|
|
|
import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
|
|
|
|
import { EventType } from "matrix-js-sdk/src/@types/event";
|
|
|
|
import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
|
|
|
|
import { NotificationColor } from "../../../stores/notifications/NotificationColor";
|
|
|
|
import { getKeyBindingsManager, RoomListAction } from "../../../KeyBindingsManager";
|
2021-02-26 13:23:09 +03:00
|
|
|
|
|
|
|
interface IItemProps {
|
|
|
|
space?: Room;
|
|
|
|
activeSpaces: Room[];
|
|
|
|
isNested?: boolean;
|
|
|
|
isPanelCollapsed?: boolean;
|
|
|
|
onExpand?: Function;
|
2021-03-15 15:16:48 +03:00
|
|
|
parents?: Set<string>;
|
2021-02-26 13:23:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
interface IItemState {
|
|
|
|
collapsed: boolean;
|
|
|
|
contextMenuPosition: Pick<DOMRect, "right" | "top" | "height">;
|
2021-06-22 13:50:00 +03:00
|
|
|
childSpaces: Room[];
|
2021-02-26 13:23:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
|
|
|
|
static contextType = MatrixClientContext;
|
|
|
|
|
2021-06-22 13:50:00 +03:00
|
|
|
private buttonRef = createRef<HTMLDivElement>();
|
|
|
|
|
2021-02-26 13:23:09 +03:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
|
2021-05-11 12:16:14 +03:00
|
|
|
const collapsed = SpaceTreeLevelLayoutStore.instance.getSpaceCollapsedState(
|
2021-05-11 12:13:13 +03:00
|
|
|
props.space.roomId,
|
|
|
|
this.props.parents,
|
2021-05-12 08:12:00 +03:00
|
|
|
!props.isNested, // default to collapsed for root items
|
2021-05-11 12:13:13 +03:00
|
|
|
);
|
|
|
|
|
2021-02-26 13:23:09 +03:00
|
|
|
this.state = {
|
2021-05-11 12:13:13 +03:00
|
|
|
collapsed: collapsed,
|
2021-02-26 13:23:09 +03:00
|
|
|
contextMenuPosition: null,
|
2021-06-22 13:50:00 +03:00
|
|
|
childSpaces: this.childSpaces,
|
2021-02-26 13:23:09 +03:00
|
|
|
};
|
2021-06-22 13:50:00 +03:00
|
|
|
|
|
|
|
SpaceStore.instance.on(this.props.space.roomId, this.onSpaceUpdate);
|
2021-02-26 13:23:09 +03:00
|
|
|
}
|
|
|
|
|
2021-06-22 13:50:00 +03:00
|
|
|
componentWillUnmount() {
|
|
|
|
SpaceStore.instance.off(this.props.space.roomId, this.onSpaceUpdate);
|
|
|
|
}
|
|
|
|
|
|
|
|
private onSpaceUpdate = () => {
|
|
|
|
this.setState({
|
|
|
|
childSpaces: this.childSpaces,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
private get childSpaces() {
|
|
|
|
return SpaceStore.instance.getChildSpaces(this.props.space.roomId)
|
|
|
|
.filter(s => !this.props.parents?.has(s.roomId));
|
|
|
|
}
|
|
|
|
|
|
|
|
private get isCollapsed() {
|
|
|
|
return this.state.collapsed || this.props.isPanelCollapsed;
|
|
|
|
}
|
|
|
|
|
|
|
|
private toggleCollapse = evt => {
|
|
|
|
if (this.props.onExpand && this.isCollapsed) {
|
2021-02-26 13:23:09 +03:00
|
|
|
this.props.onExpand();
|
|
|
|
}
|
2021-06-22 13:50:00 +03:00
|
|
|
const newCollapsedState = !this.isCollapsed;
|
2021-05-11 09:08:02 +03:00
|
|
|
|
2021-05-11 12:16:14 +03:00
|
|
|
SpaceTreeLevelLayoutStore.instance.setSpaceCollapsedState(
|
2021-05-11 12:13:13 +03:00
|
|
|
this.props.space.roomId,
|
|
|
|
this.props.parents,
|
|
|
|
newCollapsedState,
|
|
|
|
);
|
2021-05-05 09:31:07 +03:00
|
|
|
this.setState({collapsed: newCollapsedState});
|
2021-02-26 13:23:09 +03:00
|
|
|
// don't bubble up so encapsulating button for space
|
|
|
|
// doesn't get triggered
|
|
|
|
evt.stopPropagation();
|
2021-06-22 13:50:00 +03:00
|
|
|
};
|
2021-02-26 13:23:09 +03:00
|
|
|
|
|
|
|
private onContextMenu = (ev: React.MouseEvent) => {
|
2021-04-22 13:24:52 +03:00
|
|
|
if (this.props.space.getMyMembership() !== "join") return;
|
2021-02-26 13:23:09 +03:00
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
this.setState({
|
|
|
|
contextMenuPosition: {
|
|
|
|
right: ev.clientX,
|
|
|
|
top: ev.clientY,
|
|
|
|
height: 0,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-06-22 13:50:00 +03:00
|
|
|
private onKeyDown = (ev: React.KeyboardEvent) => {
|
|
|
|
let handled = true;
|
|
|
|
const action = getKeyBindingsManager().getRoomListAction(ev);
|
|
|
|
const hasChildren = this.state.childSpaces?.length;
|
|
|
|
switch (action) {
|
|
|
|
case RoomListAction.CollapseSection:
|
|
|
|
if (hasChildren && !this.isCollapsed) {
|
|
|
|
this.toggleCollapse(ev);
|
|
|
|
} else {
|
|
|
|
const parentItem = this.buttonRef?.current?.parentElement?.parentElement;
|
|
|
|
const parentButton = parentItem?.previousElementSibling as HTMLElement;
|
|
|
|
parentButton?.focus();
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case RoomListAction.ExpandSection:
|
|
|
|
if (hasChildren) {
|
|
|
|
if (this.isCollapsed) {
|
|
|
|
this.toggleCollapse(ev);
|
|
|
|
} else {
|
|
|
|
const childLevel = this.buttonRef?.current?.nextElementSibling;
|
|
|
|
const firstSpaceItemChild = childLevel?.querySelector<HTMLLIElement>(".mx_SpaceItem");
|
|
|
|
firstSpaceItemChild?.querySelector<HTMLDivElement>(".mx_SpaceButton")?.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
default:
|
|
|
|
handled = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (handled) {
|
|
|
|
ev.stopPropagation();
|
|
|
|
ev.preventDefault();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-02-26 13:23:09 +03:00
|
|
|
private onClick = (ev: React.MouseEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
SpaceStore.instance.setActiveSpace(this.props.space);
|
|
|
|
};
|
|
|
|
|
2021-03-02 17:34:47 +03:00
|
|
|
private onMenuOpenClick = (ev: React.MouseEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
const target = ev.target as HTMLButtonElement;
|
|
|
|
this.setState({contextMenuPosition: target.getBoundingClientRect()});
|
|
|
|
};
|
|
|
|
|
|
|
|
private onMenuClose = () => {
|
|
|
|
this.setState({contextMenuPosition: null});
|
|
|
|
};
|
|
|
|
|
|
|
|
private onInviteClick = (ev: ButtonEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
2021-03-26 14:43:01 +03:00
|
|
|
showSpaceInvite(this.props.space);
|
2021-03-02 17:34:47 +03:00
|
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
|
|
};
|
|
|
|
|
|
|
|
private onSettingsClick = (ev: ButtonEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
showSpaceSettings(this.context, this.props.space);
|
|
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
|
|
};
|
|
|
|
|
|
|
|
private onLeaveClick = (ev: ButtonEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
defaultDispatcher.dispatch({
|
|
|
|
action: "leave_room",
|
|
|
|
room_id: this.props.space.roomId,
|
|
|
|
});
|
|
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
|
|
};
|
|
|
|
|
|
|
|
private onNewRoomClick = (ev: ButtonEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
showCreateNewRoom(this.context, this.props.space);
|
|
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
|
|
};
|
|
|
|
|
2021-03-24 18:30:36 +03:00
|
|
|
private onAddExistingRoomClick = (ev: ButtonEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
showAddExistingRooms(this.context, this.props.space);
|
|
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
|
|
};
|
|
|
|
|
2021-03-02 17:34:47 +03:00
|
|
|
private onMembersClick = (ev: ButtonEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
if (!RoomViewStore.getRoomId()) {
|
|
|
|
defaultDispatcher.dispatch({
|
|
|
|
action: "view_room",
|
|
|
|
room_id: this.props.space.roomId,
|
|
|
|
}, true);
|
|
|
|
}
|
|
|
|
|
|
|
|
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
|
|
|
|
action: Action.SetRightPanelPhase,
|
|
|
|
phase: RightPanelPhases.SpaceMemberList,
|
|
|
|
refireParams: { space: this.props.space },
|
|
|
|
});
|
|
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
|
|
};
|
|
|
|
|
|
|
|
private onExploreRoomsClick = (ev: ButtonEvent) => {
|
|
|
|
ev.preventDefault();
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
2021-03-26 12:44:52 +03:00
|
|
|
defaultDispatcher.dispatch({
|
|
|
|
action: "view_room",
|
|
|
|
room_id: this.props.space.roomId,
|
|
|
|
});
|
2021-03-02 17:34:47 +03:00
|
|
|
this.setState({contextMenuPosition: null}); // also close the menu
|
|
|
|
};
|
|
|
|
|
|
|
|
private renderContextMenu(): React.ReactElement {
|
2021-04-22 13:24:52 +03:00
|
|
|
if (this.props.space.getMyMembership() !== "join") return null;
|
|
|
|
|
2021-03-02 17:34:47 +03:00
|
|
|
let contextMenu = null;
|
|
|
|
if (this.state.contextMenuPosition) {
|
|
|
|
const userId = this.context.getUserId();
|
|
|
|
|
|
|
|
let inviteOption;
|
2021-05-14 12:46:09 +03:00
|
|
|
if (this.props.space.getJoinRule() === "public" || this.props.space.canInvite(userId)) {
|
2021-03-02 17:34:47 +03:00
|
|
|
inviteOption = (
|
|
|
|
<IconizedContextMenuOption
|
|
|
|
className="mx_SpacePanel_contextMenu_inviteButton"
|
|
|
|
iconClassName="mx_SpacePanel_iconInvite"
|
|
|
|
label={_t("Invite people")}
|
|
|
|
onClick={this.onInviteClick}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
let settingsOption;
|
|
|
|
let leaveSection;
|
|
|
|
if (shouldShowSpaceSettings(this.context, this.props.space)) {
|
|
|
|
settingsOption = (
|
|
|
|
<IconizedContextMenuOption
|
|
|
|
iconClassName="mx_SpacePanel_iconSettings"
|
|
|
|
label={_t("Settings")}
|
|
|
|
onClick={this.onSettingsClick}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
leaveSection = <IconizedContextMenuOptionList red first>
|
|
|
|
<IconizedContextMenuOption
|
|
|
|
iconClassName="mx_SpacePanel_iconLeave"
|
|
|
|
label={_t("Leave space")}
|
|
|
|
onClick={this.onLeaveClick}
|
|
|
|
/>
|
|
|
|
</IconizedContextMenuOptionList>;
|
|
|
|
}
|
|
|
|
|
2021-03-26 12:44:52 +03:00
|
|
|
const canAddRooms = this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
|
|
|
|
|
2021-03-24 18:30:36 +03:00
|
|
|
let newRoomSection;
|
2021-03-02 17:34:47 +03:00
|
|
|
if (this.props.space.currentState.maySendStateEvent(EventType.SpaceChild, userId)) {
|
2021-03-24 18:30:36 +03:00
|
|
|
newRoomSection = <IconizedContextMenuOptionList first>
|
2021-03-02 17:34:47 +03:00
|
|
|
<IconizedContextMenuOption
|
|
|
|
iconClassName="mx_SpacePanel_iconPlus"
|
2021-03-24 18:30:36 +03:00
|
|
|
label={_t("Create new room")}
|
2021-03-02 17:34:47 +03:00
|
|
|
onClick={this.onNewRoomClick}
|
|
|
|
/>
|
2021-03-24 18:30:36 +03:00
|
|
|
<IconizedContextMenuOption
|
2021-03-24 22:43:33 +03:00
|
|
|
iconClassName="mx_SpacePanel_iconHash"
|
2021-03-24 18:30:36 +03:00
|
|
|
label={_t("Add existing room")}
|
|
|
|
onClick={this.onAddExistingRoomClick}
|
|
|
|
/>
|
|
|
|
</IconizedContextMenuOptionList>;
|
2021-03-02 17:34:47 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
contextMenu = <IconizedContextMenu
|
|
|
|
{...toRightOf(this.state.contextMenuPosition, 0)}
|
|
|
|
onFinished={this.onMenuClose}
|
|
|
|
className="mx_SpacePanel_contextMenu"
|
|
|
|
compact
|
|
|
|
>
|
|
|
|
<div className="mx_SpacePanel_contextMenu_header">
|
|
|
|
{ this.props.space.name }
|
|
|
|
</div>
|
|
|
|
<IconizedContextMenuOptionList first>
|
|
|
|
{ inviteOption }
|
|
|
|
<IconizedContextMenuOption
|
|
|
|
iconClassName="mx_SpacePanel_iconMembers"
|
|
|
|
label={_t("Members")}
|
|
|
|
onClick={this.onMembersClick}
|
|
|
|
/>
|
|
|
|
{ settingsOption }
|
|
|
|
<IconizedContextMenuOption
|
|
|
|
iconClassName="mx_SpacePanel_iconExplore"
|
2021-03-26 12:44:52 +03:00
|
|
|
label={canAddRooms ? _t("Manage & explore rooms") : _t("Explore rooms")}
|
2021-03-02 17:34:47 +03:00
|
|
|
onClick={this.onExploreRoomsClick}
|
|
|
|
/>
|
|
|
|
</IconizedContextMenuOptionList>
|
2021-03-24 18:30:36 +03:00
|
|
|
{ newRoomSection }
|
2021-03-02 17:34:47 +03:00
|
|
|
{ leaveSection }
|
|
|
|
</IconizedContextMenu>;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
<ContextMenuTooltipButton
|
|
|
|
className="mx_SpaceButton_menuButton"
|
|
|
|
onClick={this.onMenuOpenClick}
|
|
|
|
title={_t("Space options")}
|
|
|
|
isExpanded={!!this.state.contextMenuPosition}
|
|
|
|
/>
|
|
|
|
{ contextMenu }
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-02-26 13:23:09 +03:00
|
|
|
render() {
|
|
|
|
const {space, activeSpaces, isNested} = this.props;
|
|
|
|
|
|
|
|
const isNarrow = this.props.isPanelCollapsed;
|
2021-06-22 13:50:00 +03:00
|
|
|
const collapsed = this.isCollapsed;
|
2021-02-26 13:23:09 +03:00
|
|
|
|
|
|
|
const isActive = activeSpaces.includes(space);
|
|
|
|
const itemClasses = classNames({
|
|
|
|
"mx_SpaceItem": true,
|
2021-05-04 16:14:06 +03:00
|
|
|
"mx_SpaceItem_narrow": isNarrow,
|
2021-02-26 13:23:09 +03:00
|
|
|
"collapsed": collapsed,
|
2021-06-22 13:50:00 +03:00
|
|
|
"hasSubSpaces": this.state.childSpaces?.length,
|
2021-02-26 13:23:09 +03:00
|
|
|
});
|
2021-05-04 16:01:26 +03:00
|
|
|
|
|
|
|
const isInvite = space.getMyMembership() === "invite";
|
2021-02-26 13:23:09 +03:00
|
|
|
const classes = classNames("mx_SpaceButton", {
|
|
|
|
mx_SpaceButton_active: isActive,
|
|
|
|
mx_SpaceButton_hasMenuOpen: !!this.state.contextMenuPosition,
|
2021-03-01 20:02:02 +03:00
|
|
|
mx_SpaceButton_narrow: isNarrow,
|
2021-05-04 16:01:26 +03:00
|
|
|
mx_SpaceButton_invite: isInvite,
|
2021-02-26 13:23:09 +03:00
|
|
|
});
|
2021-05-04 16:01:26 +03:00
|
|
|
const notificationState = isInvite
|
2021-04-22 13:01:49 +03:00
|
|
|
? StaticNotificationState.forSymbol("!", NotificationColor.Red)
|
|
|
|
: SpaceStore.instance.getNotificationState(space.roomId);
|
2021-03-15 15:16:48 +03:00
|
|
|
|
|
|
|
let childItems;
|
2021-06-22 13:50:00 +03:00
|
|
|
if (this.state.childSpaces?.length && !collapsed) {
|
2021-03-15 15:16:48 +03:00
|
|
|
childItems = <SpaceTreeLevel
|
2021-06-22 13:50:00 +03:00
|
|
|
spaces={this.state.childSpaces}
|
2021-03-15 15:16:48 +03:00
|
|
|
activeSpaces={activeSpaces}
|
|
|
|
isNested={true}
|
|
|
|
parents={new Set(this.props.parents).add(this.props.space.roomId)}
|
|
|
|
/>;
|
|
|
|
}
|
|
|
|
|
2021-02-26 13:23:09 +03:00
|
|
|
let notifBadge;
|
|
|
|
if (notificationState) {
|
|
|
|
notifBadge = <div className="mx_SpacePanel_badgeContainer">
|
|
|
|
<NotificationBadge forceCount={false} notification={notificationState} />
|
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
|
|
|
const avatarSize = isNested ? 24 : 32;
|
|
|
|
|
2021-06-22 13:50:00 +03:00
|
|
|
const toggleCollapseButton = this.state.childSpaces?.length ?
|
2021-03-24 20:05:21 +03:00
|
|
|
<AccessibleButton
|
2021-02-26 13:23:09 +03:00
|
|
|
className="mx_SpaceButton_toggleCollapse"
|
2021-06-22 13:50:00 +03:00
|
|
|
onClick={this.toggleCollapse}
|
2021-02-26 13:23:09 +03:00
|
|
|
/> : null;
|
|
|
|
|
2021-06-22 13:50:00 +03:00
|
|
|
return (
|
|
|
|
<li className={itemClasses}>
|
2021-02-26 13:23:09 +03:00
|
|
|
<RovingAccessibleTooltipButton
|
|
|
|
className={classes}
|
|
|
|
title={space.name}
|
|
|
|
onClick={this.onClick}
|
|
|
|
onContextMenu={this.onContextMenu}
|
2021-06-22 13:50:00 +03:00
|
|
|
forceHide={!isNarrow || !!this.state.contextMenuPosition}
|
2021-02-26 13:23:09 +03:00
|
|
|
role="treeitem"
|
2021-06-22 13:50:00 +03:00
|
|
|
inputRef={this.buttonRef}
|
|
|
|
onKeyDown={this.onKeyDown}
|
2021-02-26 13:23:09 +03:00
|
|
|
>
|
|
|
|
{ toggleCollapseButton }
|
2021-03-01 20:02:02 +03:00
|
|
|
<div className="mx_SpaceButton_selectionWrapper">
|
|
|
|
<RoomAvatar width={avatarSize} height={avatarSize} room={space} />
|
2021-06-22 13:50:00 +03:00
|
|
|
{ !isNarrow && <span className="mx_SpaceButton_name">{ space.name }</span> }
|
2021-03-01 20:02:02 +03:00
|
|
|
{ notifBadge }
|
2021-03-02 17:34:47 +03:00
|
|
|
{ this.renderContextMenu() }
|
2021-03-01 20:02:02 +03:00
|
|
|
</div>
|
2021-02-26 13:23:09 +03:00
|
|
|
</RovingAccessibleTooltipButton>
|
|
|
|
|
|
|
|
{ childItems }
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ITreeLevelProps {
|
|
|
|
spaces: Room[];
|
|
|
|
activeSpaces: Room[];
|
|
|
|
isNested?: boolean;
|
2021-03-15 15:16:48 +03:00
|
|
|
parents: Set<string>;
|
2021-02-26 13:23:09 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
const SpaceTreeLevel: React.FC<ITreeLevelProps> = ({
|
|
|
|
spaces,
|
|
|
|
activeSpaces,
|
|
|
|
isNested,
|
2021-03-15 15:16:48 +03:00
|
|
|
parents,
|
2021-02-26 13:23:09 +03:00
|
|
|
}) => {
|
|
|
|
return <ul className="mx_SpaceTreeLevel">
|
|
|
|
{spaces.map(s => {
|
|
|
|
return (<SpaceItem
|
|
|
|
key={s.roomId}
|
|
|
|
activeSpaces={activeSpaces}
|
|
|
|
space={s}
|
|
|
|
isNested={isNested}
|
2021-03-15 15:16:48 +03:00
|
|
|
parents={parents}
|
2021-02-26 13:23:09 +03:00
|
|
|
/>);
|
|
|
|
})}
|
|
|
|
</ul>;
|
|
|
|
}
|
|
|
|
|
|
|
|
export default SpaceTreeLevel;
|