From b822c7b832210b02d0631c11ec774368a932ca3e Mon Sep 17 00:00:00 2001 From: Dawid Poliszak Date: Thu, 18 Jul 2024 14:02:28 +0200 Subject: [PATCH 1/2] fix: position when a window is full height --- src/components/window/WindowFrame.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/window/WindowFrame.tsx b/src/components/window/WindowFrame.tsx index c05c755d..24f87f79 100644 --- a/src/components/window/WindowFrame.tsx +++ b/src/components/window/WindowFrame.tsx @@ -143,17 +143,9 @@ export function WindowFrame(props: PropsWithChildren): JSX.Ele const contentAvailable = useContentVisibility(ref, onContentChanged); - // set initial position - useEffect(() => { - if (dragging.current) return; - if (contentAvailable && !position) { - forceCenterWindow(); - } - }, [contentAvailable, maximized, position, forceCenterWindow]); - const wasMaximized = usePreviousDifferent(maximized); - // setup position correction for screen egdes + // setup position correction for screen edges const calcEdgePosition = useCallback( (viewport, box: Box = ref.current.getBoundingClientRect()) => { const width = size?.width || box?.width || 0; From 6683e24558307003cf839eb48c58662773848b4e Mon Sep 17 00:00:00 2001 From: Dawid Poliszak Date: Fri, 19 Jul 2024 09:36:40 +0200 Subject: [PATCH 2/2] fix: Add nodeRef and fix Warning: findDOMNode is deprecated and will be removed for react-transition-group --- package-lock.json | 10 ++++++++++ package.json | 1 + src/components/ModalMask.tsx | 10 ++++++---- src/components/WindowsContainer.tsx | 13 ++++++++----- src/components/window/Window.tsx | 9 ++++++--- src/components/window/WindowFrame.tsx | 14 ++++++++------ 6 files changed, 39 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 73c3a868..a64a1932 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,6 +63,7 @@ "@types/lodash": "4.17.1", "@types/node": "20.12.12", "@types/react": "18.3.2", + "@types/react-transition-group": "4.4.10", "@typescript-eslint/eslint-plugin": "7.9.0", "@typescript-eslint/parser": "7.9.0", "babel-loader": "9.1.3", @@ -10472,6 +10473,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.20.2", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", diff --git a/package.json b/package.json index 36656b86..95a0896c 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ "@types/lodash": "4.17.1", "@types/node": "20.12.12", "@types/react": "18.3.2", + "@types/react-transition-group": "4.4.10", "@typescript-eslint/eslint-plugin": "7.9.0", "@typescript-eslint/parser": "7.9.0", "babel-loader": "9.1.3", diff --git a/src/components/ModalMask.tsx b/src/components/ModalMask.tsx index d9e9f8d4..214a6915 100644 --- a/src/components/ModalMask.tsx +++ b/src/components/ModalMask.tsx @@ -1,9 +1,9 @@ import { css, cx } from "@emotion/css"; -import React from "react"; +import React, { forwardRef, RefObject } from "react"; import { rgba } from "../rgba"; import { useModalMaskTheme } from "../themeHooks"; -export function ModalMask({ zIndex }: { zIndex?: number }): JSX.Element { +export const ModalMask = forwardRef(({ zIndex }: { zIndex?: number }, ref: RefObject): JSX.Element => { const modalMaskTheme = useModalMaskTheme(); const modalMaskClass = css({ top: 0, @@ -13,5 +13,7 @@ export function ModalMask({ zIndex }: { zIndex?: number }): JSX.Element { position: "fixed", background: rgba("black", 0.6), }); - return
; -} + return
; +}); + +ModalMask.displayName = "ModalMask"; diff --git a/src/components/WindowsContainer.tsx b/src/components/WindowsContainer.tsx index 231b6984..3bb105c2 100644 --- a/src/components/WindowsContainer.tsx +++ b/src/components/WindowsContainer.tsx @@ -1,5 +1,5 @@ import { flatMap } from "lodash"; -import React from "react"; +import React, { useRef } from "react"; import { createPortal } from "react-dom"; import { CSSTransition, TransitionGroup } from "react-transition-group"; import { useWindowManager } from "../hooks"; @@ -18,16 +18,19 @@ interface WindowsContainerProps { export function WindowsContainer({ container = document.body, contentGetter }: WindowsContainerProps): JSX.Element { const { windows } = useWindowManager(); + const modalMaskRef = useRef(); + const windowRef = useRef(); + return createPortal( {flatMap(windows, (d, index) => [ d.isModal && ( - - + + ), - - + + , ]).filter(Boolean)} , diff --git a/src/components/window/Window.tsx b/src/components/window/Window.tsx index 217d8062..58969979 100644 --- a/src/components/window/Window.tsx +++ b/src/components/window/Window.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from "react"; +import React, { forwardRef, RefObject, useCallback } from "react"; import { useWindowManager, useWindowZoom } from "../../hooks"; import { WindowWithOrder } from "../../types"; import { ContentGetter, WindowContent } from "./WindowContent"; @@ -9,7 +9,7 @@ export interface WindowProps { contentGetter: ContentGetter; } -export function Window({ data, contentGetter }: WindowProps): JSX.Element { +export const Window = forwardRef(({ data, contentGetter }: WindowProps, ref: RefObject): JSX.Element => { const { isResizable, isStatic, focusParent, id, order, shouldCloseOnEsc } = data; const { focus: onFocus, close: onClose } = useWindowManager(id); @@ -31,8 +31,11 @@ export function Window({ data, contentGetter }: WindowProps): JSX.Element { height={data.height} minWidth={data.minWidth} minHeight={data.minHeight} + ref={ref} > ); -} +}); + +Window.displayName = "Window"; diff --git a/src/components/window/WindowFrame.tsx b/src/components/window/WindowFrame.tsx index 24f87f79..88096e4b 100644 --- a/src/components/window/WindowFrame.tsx +++ b/src/components/window/WindowFrame.tsx @@ -1,7 +1,7 @@ import { css, cx } from "@emotion/css"; import { isEqual } from "lodash"; import { mapValues } from "lodash/fp"; -import React, { PropsWithChildren, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; +import React, { forwardRef, PropsWithChildren, RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import FocusLock from "react-focus-lock"; import { Position, Rnd } from "react-rnd"; import { CSSTransition } from "react-transition-group"; @@ -96,7 +96,7 @@ const windowClass = css({ willChange: "transform, top, left, minWidth, minHeight, width, height", }); -export function WindowFrame(props: PropsWithChildren): JSX.Element { +export const WindowFrame = forwardRef((props: PropsWithChildren, windowRef: RefObject): JSX.Element => { const { focusGroup, zIndex, @@ -278,7 +278,7 @@ export function WindowFrame(props: PropsWithChildren): JSX.Ele useScrollFix(ref.current); return ( - <> +
{/*fallback animation for lazy loaded content*/} @@ -305,7 +305,7 @@ export function WindowFrame(props: PropsWithChildren): JSX.Ele data-testid="window-frame" > {/* trap keyboard focus within group (windows opened since last modal) */} - +
): JSX.Ele - +
); -} +}); + +WindowFrame.displayName = "WindowFrame";