feat(dockview): update DockView component to support external onApiReady callback

- Removed the internal use of `useDockviewStore` for managing Dockview API state.
- Introduced `onApiReady` prop to allow external handling of the `DockviewApi` when it’s ready.
- Updated `onReady` function to invoke `onApiReady` callback with the API instance.
- Ensured backward compatibility by keeping the previous internal handling of `DockviewApi`.
This commit is contained in:
cfngc4594 2025-04-13 11:53:06 +08:00
parent 0de139f29c
commit 54998d5c1b

View File

@ -9,7 +9,6 @@ import type {
} from "dockview"; } from "dockview";
import "@/styles/dockview.css"; import "@/styles/dockview.css";
import type { LucideIcon } from "lucide-react"; import type { LucideIcon } from "lucide-react";
import { useDockviewStore } from "@/stores/dockview";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { DockviewReact, themeAbyssSpaced } from "dockview"; import { DockviewReact, themeAbyssSpaced } from "dockview";
@ -21,11 +20,11 @@ interface PanelContent {
interface DockviewProps { interface DockviewProps {
storageKey: string; storageKey: string;
onApiReady?: (api: DockviewApi) => void;
options: AddPanelOptions<PanelContent>[]; options: AddPanelOptions<PanelContent>[];
} }
export default function DockView({ storageKey, options }: DockviewProps) { export default function DockView({ storageKey, onApiReady, options }: DockviewProps) {
const { setApi: _setApi } = useDockviewStore();
const [api, setApi] = useState<DockviewApi>(); const [api, setApi] = useState<DockviewApi>();
const { components, tabComponents } = useMemo(() => { const { components, tabComponents } = useMemo(() => {
@ -79,7 +78,7 @@ export default function DockView({ storageKey, options }: DockviewProps) {
const onReady = (event: DockviewReadyEvent) => { const onReady = (event: DockviewReadyEvent) => {
setApi(event.api); setApi(event.api);
_setApi(event.api); onApiReady?.(event.api);
let success = false; let success = false;
const serializedLayout = localStorage.getItem(storageKey); const serializedLayout = localStorage.getItem(storageKey);