import React from "react"; import { DevtoolsPin } from "./components/devtools-pin"; import { ResizablePane } from "./components/resizable-pane"; import { DevToolsContext, DevtoolsEvent, send, } from "@refinedev/devtools-shared"; import { Placement } from "./interfaces/placement"; export const DevtoolsPanel = __DEV_CONDITION__ !== "development" ? () => null : () => { const [browser, setBrowser] = React.useState(false); const [visible, setVisible] = React.useState(false); const [placement] = React.useState("bottom"); const { devtoolsUrl, ws } = React.useContext(DevToolsContext); const [width, setWidth] = React.useState(0); const onSelectorHighlight = React.useCallback( (name: string) => { if (ws) { send( ws, DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR, { name, }, ); } setVisible(true); }, [ws], ); const onSelectorOpen = React.useCallback(() => { setVisible(false); }, []); React.useEffect(() => { if (typeof window !== "undefined") { setBrowser(true); } }, []); React.useEffect(() => { if (browser) { // set width by window size dynamically setWidth(window.innerWidth); const onResize = () => { setWidth(window.innerWidth); }; window.addEventListener("resize", onResize); return () => { window.removeEventListener("resize", onResize); }; } return () => undefined; }, [browser]); if (!browser) { return null; } return (

setVisible((v) => !v)} onSelectorHighlight={onSelectorHighlight} onSelectorOpen={onSelectorOpen} /> {({ resizing }) => (