imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix space panel edge gradient not applying on load (#7644)

Browse source
This commit is contained in:
Michael Telatynski 2022-01-27 09:36:58 +00:00 • committed by GitHub
parent 3eca71bc84
commit 3ff4c6808f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/views/spaces/SpacePanel.tsx
View file

@ -18,6 +18,7 @@ import React, {
ComponentProps,
Dispatch,
ReactNode,
RefCallback,
SetStateAction,
useCallback,
useEffect,
@ -25,7 +26,7 @@ import React, {
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";
@ -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,
@ -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] : [];
@ -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
@ -300,7 +317,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(({ children, isPanelCo
)) }
{ children }
<CreateSpaceButton isPanelCollapsed={isPanelCollapsed} setPanelCollapsed={setPanelCollapsed} />
</div>;
</IndicatorScrollbar>;
});
const SpacePanel = () => {
@ -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>