Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 21:24:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Hoist activeSpace tracking from RoomList to LeftPanel

Browse Source
This commit is contained in:
Michael Telatynski 2021-03-24 19:43:09 +00:00
parent ee5d0d6842
commit 8369d42dd0
2 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/structures/LeftPanel.tsx
View File

@ -16,9 +16,11 @@ limitations under the License.
import * as React from "react"; import * as React from "react";
import { createRef } from "react"; import { createRef } from "react";
import classNames from "classnames";
import { Room } from "matrix-js-sdk/src/models/room";
import GroupFilterPanel from "./GroupFilterPanel"; import GroupFilterPanel from "./GroupFilterPanel";
import CustomRoomTagPanel from "./CustomRoomTagPanel"; import CustomRoomTagPanel from "./CustomRoomTagPanel";
import classNames from "classnames";
import dis from "../../dispatcher/dispatcher"; import dis from "../../dispatcher/dispatcher";
import { _t } from "../../languageHandler"; import { _t } from "../../languageHandler";
import RoomList from "../views/rooms/RoomList"; import RoomList from "../views/rooms/RoomList";
@ -40,6 +42,7 @@ import RoomListNumResults from "../views/rooms/RoomListNumResults";
import LeftPanelWidget from "./LeftPanelWidget"; import LeftPanelWidget from "./LeftPanelWidget";
import {replaceableComponent} from "../../utils/replaceableComponent"; import {replaceableComponent} from "../../utils/replaceableComponent";
import {mediaFromMxc} from "../../customisations/Media"; import {mediaFromMxc} from "../../customisations/Media";
import SpaceStore, {UPDATE_SELECTED_SPACE} from "../../stores/SpaceStore";
interface IProps { interface IProps {
isMinimized: boolean; isMinimized: boolean;
@ -49,6 +52,7 @@ interface IProps {
interface IState { interface IState {
showBreadcrumbs: boolean; showBreadcrumbs: boolean;
showGroupFilterPanel: boolean; showGroupFilterPanel: boolean;
activeSpace?: Room;
} }
// List of CSS classes which should be included in keyboard navigation within the room list // List of CSS classes which should be included in keyboard navigation within the room list
@ -74,11 +78,13 @@ export default class LeftPanel extends React.Component<IProps, IState> {
this.state = { this.state = {
showBreadcrumbs: BreadcrumbsStore.instance.visible, showBreadcrumbs: BreadcrumbsStore.instance.visible,
showGroupFilterPanel: SettingsStore.getValue('TagPanel.enableTagPanel'), showGroupFilterPanel: SettingsStore.getValue('TagPanel.enableTagPanel'),
activeSpace: SpaceStore.instance.activeSpace,
}; };
BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate); BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate); RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate); OwnProfileStore.instance.on(UPDATE_EVENT, this.onBackgroundImageUpdate);
SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
this.bgImageWatcherRef = SettingsStore.watchSetting( this.bgImageWatcherRef = SettingsStore.watchSetting(
"RoomList.backgroundImage", null, this.onBackgroundImageUpdate); "RoomList.backgroundImage", null, this.onBackgroundImageUpdate);
this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => { this.groupFilterPanelWatcherRef = SettingsStore.watchSetting("TagPanel.enableTagPanel", null, () => {
@ -96,9 +102,14 @@ export default class LeftPanel extends React.Component<IProps, IState> {
BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate); BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate); RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate); OwnProfileStore.instance.off(UPDATE_EVENT, this.onBackgroundImageUpdate);
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize); this.props.resizeNotifier.off("middlePanelResizedNoisy", this.onResize);
} }
private updateActiveSpace = (activeSpace: Room) => {
this.setState({ activeSpace });
};
private onExplore = () => { private onExplore = () => {
dis.fire(Action.ViewRoomDirectory); dis.fire(Action.ViewRoomDirectory);
}; };
@ -407,6 +418,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
onBlur={this.onBlur} onBlur={this.onBlur}
isMinimized={this.props.isMinimized} isMinimized={this.props.isMinimized}
onResize={this.onResize} onResize={this.onResize}
activeSpace={this.state.activeSpace}
/>; />;
const containerClasses = classNames({ const containerClasses = classNames({

25
src/components/views/rooms/RoomList.tsx
View File

@ -66,13 +66,13 @@ interface IProps {
onResize: () => void; onResize: () => void;
resizeNotifier: ResizeNotifier; resizeNotifier: ResizeNotifier;
isMinimized: boolean; isMinimized: boolean;
activeSpace: Room;
} }
interface IState { interface IState {
sublists: ITagMap; sublists: ITagMap;
isNameFiltering: boolean; isNameFiltering: boolean;
currentRoomId?: string; currentRoomId?: string;
activeSpace: Room;
suggestedRooms: ISpaceSummaryRoom[]; suggestedRooms: ISpaceSummaryRoom[];
} }
@ -200,7 +200,7 @@ const TAG_AESTHETICS: ITagAestheticsMap = {
/> />
<IconizedContextMenuOption <IconizedContextMenuOption
label={_t("Explore rooms")} label={_t("Explore rooms")}
iconClassName="mx_RoomList_iconExplore" iconClassName="mx_RoomList_iconBrowse"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -287,7 +287,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
this.state = { this.state = {
sublists: {}, sublists: {},
isNameFiltering: !!RoomListStore.instance.getFirstNameFilterCondition(), isNameFiltering: !!RoomListStore.instance.getFirstNameFilterCondition(),
activeSpace: SpaceStore.instance.activeSpace,
suggestedRooms: SpaceStore.instance.suggestedRooms, suggestedRooms: SpaceStore.instance.suggestedRooms,
}; };
@ -300,7 +299,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
} }
public componentDidMount(): void { public componentDidMount(): void {
SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
SpaceStore.instance.on(SUGGESTED_ROOMS, this.updateSuggestedRooms); SpaceStore.instance.on(SUGGESTED_ROOMS, this.updateSuggestedRooms);
RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists); RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
this.customTagStoreRef = CustomRoomTagStore.addListener(this.updateLists); this.customTagStoreRef = CustomRoomTagStore.addListener(this.updateLists);
@ -308,7 +306,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
} }
public componentWillUnmount() { public componentWillUnmount() {
SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
SpaceStore.instance.off(SUGGESTED_ROOMS, this.updateSuggestedRooms); SpaceStore.instance.off(SUGGESTED_ROOMS, this.updateSuggestedRooms);
RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists); RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
defaultDispatcher.unregister(this.dispatcherRef); defaultDispatcher.unregister(this.dispatcherRef);
@ -374,10 +371,6 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
return room; return room;
}; };
private updateActiveSpace = (activeSpace: Room) => {
this.setState({ activeSpace });
};
private updateSuggestedRooms = (suggestedRooms: ISpaceSummaryRoom[]) => { private updateSuggestedRooms = (suggestedRooms: ISpaceSummaryRoom[]) => {
this.setState({ suggestedRooms }); this.setState({ suggestedRooms });
}; };
@ -438,12 +431,12 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
private onSpaceInviteClick = () => { private onSpaceInviteClick = () => {
const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search; const initialText = RoomListStore.instance.getFirstNameFilterCondition()?.search;
if (this.state.activeSpace.getJoinRule() === "public") { if (this.props.activeSpace.getJoinRule() === "public") {
const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, { const modal = Modal.createTrackedDialog("Space Invite", "User Menu", InfoDialog, {
title: _t("Invite to %(spaceName)s", { spaceName: this.state.activeSpace.name }), title: _t("Invite to %(spaceName)s", { spaceName: this.props.activeSpace.name }),
description: <React.Fragment> description: <React.Fragment>
<span>{ _t("Share your public space") }</span> <span>{ _t("Share your public space") }</span>
<SpacePublicShare space={this.state.activeSpace} onFinished={() => modal.close()} /> <SpacePublicShare space={this.props.activeSpace} onFinished={() => modal.close()} />
</React.Fragment>, </React.Fragment>,
fixedWidth: false, fixedWidth: false,
button: false, button: false,
@ -451,7 +444,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
hasCloseButton: true, hasCloseButton: true,
}); });
} else { } else {
showRoomInviteDialog(this.state.activeSpace.roomId, initialText); showRoomInviteDialog(this.props.activeSpace.roomId, initialText);
} }
}; };
@ -600,13 +593,13 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
kind="link" kind="link"
onClick={this.onExplore} onClick={this.onExplore}
> >
{ this.state.activeSpace ? _t("Explore rooms") : _t("Explore all public rooms") } { this.props.activeSpace ? _t("Explore rooms") : _t("Explore all public rooms") }
</AccessibleButton> </AccessibleButton>
</div>; </div>;
} else if (this.state.activeSpace) { } else if (this.props.activeSpace) {
explorePrompt = <div className="mx_RoomList_explorePrompt"> explorePrompt = <div className="mx_RoomList_explorePrompt">
<div>{ _t("Quick actions") }</div> <div>{ _t("Quick actions") }</div>
{ this.state.activeSpace.canInvite(MatrixClientPeg.get().getUserId()) && <AccessibleButton { this.props.activeSpace.canInvite(MatrixClientPeg.get().getUserId()) && <AccessibleButton
className="mx_RoomList_explorePrompt_spaceInvite" className="mx_RoomList_explorePrompt_spaceInvite"
onClick={this.onSpaceInviteClick} onClick={this.onSpaceInviteClick}
> >