Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix space panel edge gradient not applying on load #7644

Merged
merged 2 commits into from
Jan 27, 2022
Merged

Fix space panel edge gradient not applying on load #7644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
14679f9
Fix indicator scrollbar not updating on window resize
t3chguy Jan 26, 2022
745219c
Pass all dynamic children to IndicatorScrollbar so that it knows when…
t3chguy Jan 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions src/components/structures/IndicatorScrollbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import React, { ComponentProps, createRef } from "react";

import AutoHideScrollbar from "./AutoHideScrollbar";
import { replaceableComponent } from "../../utils/replaceableComponent";
import UIStore, { UI_EVENTS } from "../../stores/UIStore";

interface IProps extends Omit<ComponentProps<typeof AutoHideScrollbar>, "onWheel"> {
// If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator
Expand All @@ -35,8 +36,8 @@ interface IProps extends Omit<ComponentProps<typeof AutoHideScrollbar>, "onWheel
}

interface IState {
leftIndicatorOffset: number | string;
rightIndicatorOffset: number | string;
leftIndicatorOffset: string;
rightIndicatorOffset: string;
}

@replaceableComponent("structures.IndicatorScrollbar")
Expand All @@ -50,8 +51,8 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
super(props);

this.state = {
leftIndicatorOffset: 0,
rightIndicatorOffset: 0,
leftIndicatorOffset: '0',
rightIndicatorOffset: '0',
};
}

Expand Down Expand Up @@ -79,6 +80,7 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>

public componentDidMount(): void {
this.checkOverflow();
UIStore.instance.on(UI_EVENTS.Resize, this.checkOverflow);
}

private checkOverflow = (): void => {
Expand Down Expand Up @@ -122,9 +124,8 @@ export default class IndicatorScrollbar extends React.Component<IProps, IState>
};

public componentWillUnmount(): void {
if (this.scrollElement) {
this.scrollElement.removeEventListener("scroll", this.checkOverflow);
}
this.scrollElement?.removeEventListener("scroll", this.checkOverflow);
UIStore.instance.off(UI_EVENTS.Resize, this.checkOverflow);
}

private onMouseWheel = (e: React.WheelEvent): void => {
Expand Down
57 changes: 34 additions & 23 deletions src/components/views/spaces/SpacePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,15 @@ import React, {
ComponentProps,
Dispatch,
ReactNode,
RefCallback,
SetStateAction,
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
} from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { DragDropContext, Draggable, Droppable, DroppableProvidedProps } from "react-beautiful-dnd";
import classNames from "classnames";
import { Room } from "matrix-js-sdk/src/models/room";

Expand Down Expand Up @@ -87,12 +88,6 @@ const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
return [invites, metaSpaces, actualSpaces, activeSpace];
};

interface IInnerSpacePanelProps {
children?: ReactNode;
isPanelCollapsed: boolean;
setPanelCollapsed: Dispatch<SetStateAction<boolean>>;
}

export const HomeButtonContextMenu = ({
onFinished,
hideHeader,
Expand Down Expand Up @@ -260,8 +255,23 @@ const metaSpaceComponentMap: Record<MetaSpace, typeof HomeButton> = {
[MetaSpace.Orphans]: OrphansButton,
};

interface IInnerSpacePanelProps extends DroppableProvidedProps {
children?: ReactNode;
isPanelCollapsed: boolean;
setPanelCollapsed: Dispatch<SetStateAction<boolean>>;
isDraggingOver: boolean;
innerRef: RefCallback<HTMLElement>;
}

// Optimisation based on https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#recommended-droppable--performance-optimisation
const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCollapsed, setPanelCollapsed }) => {
const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({
children,
isPanelCollapsed,
setPanelCollapsed,
isDraggingOver,
innerRef,
...props
}) => {
const [invites, metaSpaces, actualSpaces, activeSpace] = useSpaces();
const activeSpaces = activeSpace ? [activeSpace] : [];

Expand All @@ -270,7 +280,14 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
return <Component key={key} selected={activeSpace === key} isPanelCollapsed={isPanelCollapsed} />;
});

return <div className="mx_SpaceTreeLevel">
return <IndicatorScrollbar
{...props}
wrappedRef={innerRef}
className="mx_SpaceTreeLevel"
style={isDraggingOver ? {
pointerEvents: "none",
} : undefined}
>
{ metaSpacesSection }
{ invites.map(s => (
<SpaceItem
Expand Down Expand Up @@ -300,7 +317,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
)) }
{ children }
<CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} />
</div>;
</IndicatorScrollbar>;
});

const SpacePanel = () => {
Expand Down Expand Up @@ -352,21 +369,15 @@ const SpacePanel = () => {
</UserMenu>
<Droppable droppableId="top-level-spaces">
{ (provided, snapshot) => (
<IndicatorScrollbar
<InnerSpacePanel
{...provided.droppableProps}
wrappedRef={provided.innerRef}
className="mx_SpacePanel_spaceTreeWrapper"
style={snapshot.isDraggingOver ? {
pointerEvents: "none",
} : undefined}
isPanelCollapsed={isPanelCollapsed}
setPanelCollapsed={setPanelCollapsed}
isDraggingOver={snapshot.isDraggingOver}
innerRef={provided.innerRef}
>
<InnerSpacePanel
isPanelCollapsed={isPanelCollapsed}
setPanelCollapsed={setPanelCollapsed}
>
{ provided.placeholder }
</InnerSpacePanel>
</IndicatorScrollbar>
{ provided.placeholder }
</InnerSpacePanel>
) }
</Droppable>

Expand Down