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
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
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