mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-28 04:21:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/structures/IndicatorScrollbar.tsx
View file

@ -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
@ -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")
@ -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',
};
}
@ -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 => {
@ -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 => {

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>