Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a00e634

Browse files
fixed modal z-index after optimisations
1 parent a621bdf commit a00e634

File tree

2 files changed

+14
-10
lines changed

2 files changed

+14
-10
lines changed

‎client/packages/lowcoder-design/src/components/Modal/handler.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled, { css } from "styled-components";
2-
import { memo,useMemo } from "react";
2+
import { RefObject } from "react";
33

44
type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
55
type ReactRef<T extends HTMLElement> = {
@@ -84,10 +84,9 @@ const ResizeHandle = styled.div<{ $axis: string }>`
8484
${(props) => (["sw", "nw", "se", "ne"].indexOf(props.$axis) >= 0 ? CornerHandle : "")};
8585
`;
8686

87-
// Memoize Handle component
88-
const Handle = memo((axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => {
89-
return <ResizeHandle ref={ref} $axis={axis} className="react-resizable-handle" />;
90-
});
87+
const Handle = (resizeHandle: ResizeHandleAxis, ref: RefObject<HTMLDivElement>) => {
88+
return <ResizeHandle ref={ref} $axis={resizeHandle} className="react-resizable-handle" />;
89+
};
9190

9291
Handle.displayName = 'Handle';
9392

‎client/packages/lowcoder/src/comps/hooks/modalComp.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Layers } from "constants/Layers";
1414
import { HintPlaceHolder, Modal, Section, sectionNames } from "lowcoder-design";
1515
import { trans } from "i18n";
1616
import { changeChildAction } from "lowcoder-core";
17-
import { CSSProperties, useCallback, useMemo, useRef } from "react";
17+
import { CSSProperties, useCallback, useEffect,useMemo, useRef } from "react";
1818
import { ResizeHandle } from "react-resizable";
1919
import styled, { css } from "styled-components";
2020
import { useUserViewMode } from "util/hooks";
@@ -118,6 +118,12 @@ let TmpModalComp = (function () {
118118
const appID = useApplicationId();
119119
const containerRef = useRef<HTMLElement | null>(null);
120120

121+
useEffect(() => {
122+
return () => {
123+
containerRef.current = null;
124+
};
125+
}, []);
126+
121127
// Memoize body style
122128
const bodyStyle = useMemo<CSSProperties>(() => ({
123129
padding: 0,
@@ -171,11 +177,9 @@ let TmpModalComp = (function () {
171177

172178
// Memoize container getter
173179
const getContainer = useCallback(() => {
174-
if (!containerRef.current) {
175-
containerRef.current = document.querySelector(`#${CanvasContainerID}`) || document.body;
176-
}
180+
containerRef.current = document.querySelector(`#${CanvasContainerID}`) || document.body;
177181
return containerRef.current;
178-
}, []);
182+
}, [CanvasContainerID]);
179183

180184
// Memoize event handlers
181185
const handleCancel = useCallback((e: React.MouseEvent) => {
@@ -228,6 +232,7 @@ let TmpModalComp = (function () {
228232
mask={props.showMask}
229233
className={clsx(`app-${appID}`, props.className)}
230234
data-testid={props.dataTestId as string}
235+
destroyOnHidden
231236
>
232237
<InnerGrid
233238
{...props.container}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /