Reposition sticky headers when layout has changed

This commit is contained in:
Germain Souquet 2021-05-28 10:31:42 +01:00
parent 29c4d9ffd0
commit 650b683761
3 changed files with 13 additions and 0 deletions

View file

@ -110,6 +110,12 @@ export default class LeftPanel extends React.Component<IProps, IState> {
UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);
}
public componentDidUpdate(prevProps: IProps, prevState: IState): void {
if (prevState.activeSpace !== this.state.activeSpace) {
this.refreshStickyHeaders();
}
}
private updateActiveSpace = (activeSpace: Room) => {
this.setState({ activeSpace });
};
@ -429,6 +435,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
onBlur={this.onBlur}
isMinimized={this.props.isMinimized}
activeSpace={this.state.activeSpace}
onListCollapse={this.refreshStickyHeaders}
/>;
const containerClasses = classNames({

View file

@ -55,6 +55,7 @@ interface IProps {
onKeyDown: (ev: React.KeyboardEvent) => void;
onFocus: (ev: React.FocusEvent) => void;
onBlur: (ev: React.FocusEvent) => void;
onListCollapse?: (isExpanded: boolean) => void;
resizeNotifier: ResizeNotifier;
isMinimized: boolean;
activeSpace: Room;
@ -538,6 +539,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
extraTiles={extraTiles}
resizeNotifier={this.props.resizeNotifier}
alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
onListCollapse={this.props.onListCollapse}
/>
});
}

View file

@ -78,6 +78,7 @@ interface IProps {
alwaysVisible?: boolean;
resizeNotifier: ResizeNotifier;
extraTiles?: ReactComponentElement<typeof ExtraTile>[];
onListCollapse?: (isExpanded: boolean) => void;
// TODO: Account for https://github.com/vector-im/element-web/issues/14179
}
@ -472,6 +473,9 @@ export default class RoomSublist extends React.Component<IProps, IState> {
private toggleCollapsed = () => {
this.layout.isCollapsed = this.state.isExpanded;
this.setState({isExpanded: !this.layout.isCollapsed});
if (this.props.onListCollapse) {
this.props.onListCollapse(!this.layout.isCollapsed)
}
};
private onHeaderKeyDown = (ev: React.KeyboardEvent) => {