chore: docs

packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx

@@ -13,10 +13,26 @@ import { GridActions } from './gridActions';
 import { PanelActions } from './panelActions';
 import { GroupActions } from './groupActions';
 import { LeftControls, PrefixHeaderControls, RightControls } from './controls';
-import { usePanelApiMetadata } from './debugPanel';
+import { Table, usePanelApiMetadata } from './debugPanel';
+
+const DebugContext = React.createContext<boolean>(false);
+
+const Option = (props: {
+    title: string;
+    onClick: () => void;
+    value: string;
+}) => {
+    return (
+        <div>
+            <span>{`${props.title}: `}</span>
+            <button onClick={props.onClick}>{props.value}</button>
+        </div>
+    );
+};
 
 const components = {
     default: (props: IDockviewPanelProps) => {
+        const isDebug = React.useContext(DebugContext);
         const metadata = usePanelApiMetadata(props.api);
 
         return (
@@ -24,13 +40,11 @@ const components = {
                 style={{
                     height: '100%',
                     overflow: 'auto',
-                    color: 'white',
                     position: 'relative',
                     padding: 5,
-                    // border: '5px dashed purple',
+                    border: isDebug ? '2px dashed orange' : '',
                 }}
             >
-                {/* <Table data={metadata} /> */}
                 <span
                     style={{
                         position: 'absolute',
@@ -45,21 +59,23 @@ const components = {
                     {props.api.title}
                 </span>
 
-                <div>
-                    <span>{'Panel Rendering Mode: '}</span>
-                    <span>{metadata.renderer.value}</span>
-                    <button
-                        onClick={() => {
-                            props.api.setRenderer(
-                                props.api.renderer === 'always'
-                                    ? 'onlyWhenVisible'
-                                    : 'always'
-                            );
-                        }}
-                    >
-                        Toggle
-                    </button>
-                </div>
+                {isDebug && (
+                    <div style={{ fontSize: '0.8em' }}>
+                        <Option
+                            title="Panel Rendering Mode"
+                            value={metadata.renderer.value}
+                            onClick={() =>
+                                props.api.setRenderer(
+                                    props.api.renderer === 'always'
+                                        ? 'onlyWhenVisible'
+                                        : 'always'
+                                )
+                            }
+                        />
+
+                        <Table data={metadata} />
+                    </div>
+                )}
             </div>
         );
     },
@@ -238,6 +254,7 @@ const DockviewDemo = (props: { theme?: string }) => {
     }, [gapCheck]);
 
     const [showLogs, setShowLogs] = React.useState<boolean>(false);
+    const [debug, setDebug] = React.useState<boolean>(false);
 
     return (
         <div
@@ -292,6 +309,15 @@ const DockviewDemo = (props: { theme?: string }) => {
                     padding: '4px',
                 }}
             >
+                <button
+                    onClick={() => {
+                        setDebug(!debug);
+                    }}
+                >
+                    <span className="material-symbols-outlined">
+                        engineering
+                    </span>
+                </button>
                 <button
                     onClick={() => {
                         setShowLogs(!showLogs);
@@ -318,18 +344,20 @@ const DockviewDemo = (props: { theme?: string }) => {
                         display: 'flex',
                     }}
                 >
-                    <DockviewReact
-                        components={components}
-                        defaultTabComponent={headerComponents.default}
-                        rightHeaderActionsComponent={RightControls}
-                        leftHeaderActionsComponent={LeftControls}
-                        prefixHeaderActionsComponent={PrefixHeaderControls}
-                        watermarkComponent={
-                            watermark ? WatermarkComponent : undefined
-                        }
-                        onReady={onReady}
-                        className={props.theme || 'dockview-theme-abyss'}
-                    />
+                    <DebugContext.Provider value={debug}>
+                        <DockviewReact
+                            components={components}
+                            defaultTabComponent={headerComponents.default}
+                            rightHeaderActionsComponent={RightControls}
+                            leftHeaderActionsComponent={LeftControls}
+                            prefixHeaderActionsComponent={PrefixHeaderControls}
+                            watermarkComponent={
+                                watermark ? WatermarkComponent : undefined
+                            }
+                            onReady={onReady}
+                            className={props.theme || 'dockview-theme-abyss'}
+                        />
+                    </DebugContext.Provider>
                 </div>
 
                 {showLogs && (

packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx

@@ -91,7 +91,6 @@ function usePopover() {
 
 export const GridActions = (props: {
     api?: DockviewApi;
-    containerRef: HTMLElement;
     hasCustomWatermark: boolean;
     toggleCustomWatermark: () => void;
 }) => {