Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-21 02:33:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add ready param to determine when to render content (#19)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-06-05 11:56:04 -07:00 committed by GitHub
parent cf85ad0980
commit 28cef5f22f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/app/tab/tab.tsx
View File

@ -19,9 +19,9 @@ const TabContent = ({ tabId }: { tabId: string }) => {
const layoutStateAtom = useMemo(() => getLayoutStateAtomForTab(tabId, tabAtom), [tabAtom, tabId]);
const tabData = useAtomValue(tabAtom);
const renderBlock = useCallback((tabData: TabLayoutData, onClose: () => void) => {
const renderBlock = useCallback((tabData: TabLayoutData, ready: boolean, onClose: () => void) => {
// console.log("renderBlock", tabData);
if (!tabData.blockId) {
if (!tabData.blockId || !ready) {
return null;
}
return <Block blockId={tabData.blockId} onClose={onClose} />;

22
frontend/faraday/lib/TileLayout.tsx
View File

@ -2,7 +2,7 @@
// SPDX-License-Identifier: Apache-2.0
import clsx from "clsx";
import { CSSProperties, RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { CSSProperties, RefObject, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { useDrag, useDragLayer, useDrop } from "react-dnd";
import { useLayoutTreeStateReducerAtom } from "./layoutAtom.js";
@ -183,6 +183,7 @@ export const TileLayout = <T,>({ layoutTreeStateAtom, className, renderContent,
renderContent={renderContent}
transform={layoutLeafTransforms[leaf.id]}
onLeafClose={onLeafClose}
ready={animate}
/>
);
})}
@ -209,12 +210,13 @@ interface TileNodeProps<T> {
layoutNode: LayoutNode<T>;
renderContent: ContentRenderer<T>;
onLeafClose: (node: LayoutNode<T>) => void;
ready: boolean;
transform: CSSProperties;
}
const dragItemType = "TILE_ITEM";
const TileNode = <T,>({ layoutNode, renderContent, transform, onLeafClose }: TileNodeProps<T>) => {
const TileNode = <T,>({ layoutNode, renderContent, transform, onLeafClose, ready }: TileNodeProps<T>) => {
const tileNodeRef = useRef<HTMLDivElement>(null);
const [{ isDragging, dragItem }, drag, dragPreview] = useDrag(
@ -245,6 +247,16 @@ const TileNode = <T,>({ layoutNode, renderContent, transform, onLeafClose }: Til
onLeafClose(layoutNode);
}, [layoutNode, onLeafClose]);
const leafContent = useMemo(() => {
return (
layoutNode.data && (
<div key="leaf" className="tile-leaf">
{renderContent(layoutNode.data, ready, onClose)}
</div>
)
);
}, [, layoutNode.data, ready, onClose]);
return (
<div
className="tile-node"
@ -256,11 +268,7 @@ const TileNode = <T,>({ layoutNode, renderContent, transform, onLeafClose }: Til
...transform,
}}
>
{layoutNode.data && (
<div key="leaf" className="tile-leaf">
{renderContent(layoutNode.data, onClose)}
</div>
)}
{leafContent}
</div>
);
};

2
frontend/faraday/lib/model.ts
View File

@ -130,4 +130,4 @@ export type WritableLayoutNodeAtom<T> = WritableAtom<LayoutNode<T>, [value: Layo
*/
export type WritableLayoutTreeStateAtom<T> = WritableAtom<LayoutTreeState<T>, [value: LayoutTreeState<T>], void>;
export type ContentRenderer<T> = (data: T, onClose?: () => void) => React.ReactNode;
export type ContentRenderer<T> = (data: T, ready: boolean, onClose?: () => void) => React.ReactNode;