From 3ff4c6808fc6ddd0c28aeac63eccde1268230e09 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 27 Jan 2022 09:36:58 +0000 Subject: [PATCH] Fix space panel edge gradient not applying on load (#7644) --- .../structures/IndicatorScrollbar.tsx | 15 ++--- src/components/views/spaces/SpacePanel.tsx | 57 +++++++++++-------- 2 files changed, 42 insertions(+), 30 deletions(-) diff --git a/src/components/structures/IndicatorScrollbar.tsx b/src/components/structures/IndicatorScrollbar.tsx index 26c6879b04..307541cb0b 100644 --- a/src/components/structures/IndicatorScrollbar.tsx +++ b/src/components/structures/IndicatorScrollbar.tsx @@ -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, "onWheel"> { // If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator @@ -35,8 +36,8 @@ interface IProps extends Omit, "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 super(props); this.state = { - leftIndicatorOffset: 0, - rightIndicatorOffset: 0, + leftIndicatorOffset: '0', + rightIndicatorOffset: '0', }; } @@ -79,6 +80,7 @@ export default class IndicatorScrollbar extends React.Component 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 }; 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 => { diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index 3c21c244da..6c2bee4a3c 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -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>; -} - export const HomeButtonContextMenu = ({ onFinished, hideHeader, @@ -260,8 +255,23 @@ const metaSpaceComponentMap: Record = { [MetaSpace.Orphans]: OrphansButton, }; +interface IInnerSpacePanelProps extends DroppableProvidedProps { + children?: ReactNode; + isPanelCollapsed: boolean; + setPanelCollapsed: Dispatch>; + isDraggingOver: boolean; + innerRef: RefCallback; +} + // Optimisation based on https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#recommended-droppable--performance-optimisation -const InnerSpacePanel = React.memo(({ children, isPanelCollapsed, setPanelCollapsed }) => { +const InnerSpacePanel = React.memo(({ + children, + isPanelCollapsed, + setPanelCollapsed, + isDraggingOver, + innerRef, + ...props +}) => { const [invites, metaSpaces, actualSpaces, activeSpace] = useSpaces(); const activeSpaces = activeSpace ? [activeSpace] : []; @@ -270,7 +280,14 @@ const InnerSpacePanel = React.memo(({ children, isPanelCo return ; }); - return
+ return { metaSpacesSection } { invites.map(s => ( (({ children, isPanelCo )) } { children } -
; + ; }); const SpacePanel = () => { @@ -352,21 +369,15 @@ const SpacePanel = () => { { (provided, snapshot) => ( - - - { provided.placeholder } - - + { provided.placeholder } + ) }