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

Space panel should watch spaces for space name changes (#7432)

Browse Source
This commit is contained in:
Michael Telatynski 2021-12-21 15:35:54 +00:00 committed by GitHub
parent 70dc03552c
commit 38634f86d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/views/rooms/RoomListHeader.tsx
View File

@ -174,6 +174,8 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => {
} }
}); });
const spaceName = useEventEmitterState(activeSpace, "Room.name", () => activeSpace?.name);
useEffect(() => { useEffect(() => {
if (onVisibilityChange) { if (onVisibilityChange) {
onVisibilityChange(); onVisibilityChange();
@ -320,7 +322,7 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => {
let title: string; let title: string;
if (activeSpace) { if (activeSpace) {
title = activeSpace.name; title = spaceName;
} else if (communityId) { } else if (communityId) {
title = CommunityPrototypeStore.instance.getSelectedCommunityName(); title = CommunityPrototypeStore.instance.getSelectedCommunityName();
} else { } else {
@ -344,7 +346,7 @@ const RoomListHeader = ({ spacePanelDisabled, onVisibilityChange }: IProps) => {
isExpanded={mainMenuDisplayed} isExpanded={mainMenuDisplayed}
className="mx_RoomListHeader_contextMenuButton" className="mx_RoomListHeader_contextMenuButton"
title={activeSpace title={activeSpace
? _t("%(spaceName)s menu", { spaceName: activeSpace.name }) ? _t("%(spaceName)s menu", { spaceName })
: _t("Home options")} : _t("Home options")}
> >
{ title } { title }

14
src/components/views/spaces/SpaceTreeLevel.tsx
View File

@ -146,7 +146,7 @@ export const SpaceButton: React.FC<IButtonProps> = ({
}; };
interface IItemProps extends InputHTMLAttributes<HTMLLIElement> { interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
space?: Room; space: Room;
activeSpaces: SpaceKey[]; activeSpaces: SpaceKey[];
isNested?: boolean; isNested?: boolean;
isPanelCollapsed?: boolean; isPanelCollapsed?: boolean;
@ -157,6 +157,7 @@ interface IItemProps extends InputHTMLAttributes<HTMLLIElement> {
} }
interface IItemState { interface IItemState {
name: string;
collapsed: boolean; collapsed: boolean;
childSpaces: Room[]; childSpaces: Room[];
} }
@ -176,15 +177,18 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
); );
this.state = { this.state = {
name: this.props.space.name,
collapsed, collapsed,
childSpaces: this.childSpaces, childSpaces: this.childSpaces,
}; };
SpaceStore.instance.on(this.props.space.roomId, this.onSpaceUpdate); SpaceStore.instance.on(this.props.space.roomId, this.onSpaceUpdate);
this.props.space.on("Room.name", this.onRoomNameChange);
} }
componentWillUnmount() { componentWillUnmount() {
SpaceStore.instance.off(this.props.space.roomId, this.onSpaceUpdate); SpaceStore.instance.off(this.props.space.roomId, this.onSpaceUpdate);
this.props.space.off("Room.name", this.onRoomNameChange);
} }
private onSpaceUpdate = () => { private onSpaceUpdate = () => {
@ -193,6 +197,12 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
}); });
}; };
private onRoomNameChange = () => {
this.setState({
name: this.props.space.name,
});
};
private get childSpaces() { private get childSpaces() {
return SpaceStore.instance.getChildSpaces(this.props.space.roomId) return SpaceStore.instance.getChildSpaces(this.props.space.roomId)
.filter(s => !this.props.parents?.has(s.roomId)); .filter(s => !this.props.parents?.has(s.roomId));
@ -318,7 +328,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
space={space} space={space}
className={isInvite ? "mx_SpaceButton_invite" : undefined} className={isInvite ? "mx_SpaceButton_invite" : undefined}
selected={activeSpaces.includes(space.roomId)} selected={activeSpaces.includes(space.roomId)}
label={space.name} label={this.state.name}
contextMenuTooltip={_t("Space options")} contextMenuTooltip={_t("Space options")}
notificationState={notificationState} notificationState={notificationState}
isNarrow={isPanelCollapsed} isNarrow={isPanelCollapsed}

2
src/hooks/useEventEmitter.ts
View File

@ -65,6 +65,8 @@ export const useEventEmitterState = <T>(
const handler = useCallback((...args: any[]) => { const handler = useCallback((...args: any[]) => {
setValue(fn(...args)); setValue(fn(...args));
}, [fn]); }, [fn]);
// re-run when the emitter changes
useEffect(handler, [emitter]); // eslint-disable-line react-hooks/exhaustive-deps
useEventEmitter(emitter, eventName, handler); useEventEmitter(emitter, eventName, handler);
return value; return value;
}; };