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>
+                {isDebug && (
-                    <span>{'Panel Rendering Mode: '}</span>
+                    <div style={{ fontSize: '0.8em' }}>
-                    <span>{metadata.renderer.value}</span>
+                        <Option
-                    <button
+                            title="Panel Rendering Mode"
-                        onClick={() => {
+                            value={metadata.renderer.value}
+                            onClick={() =>
                                 props.api.setRenderer(
                                     props.api.renderer === 'always'
                                         ? 'onlyWhenVisible'
                                         : 'always'
-                            );
+                                )
-                        }}
+                            }
-                    >
+                        />
-                        Toggle
+
-                    </button>
+                        <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,6 +344,7 @@ const DockviewDemo = (props: { theme?: string }) => {
                         display: 'flex',
                     }}
                 >
+                    <DebugContext.Provider value={debug}>
                         <DockviewReact
                             components={components}
                             defaultTabComponent={headerComponents.default}
@@ -330,6 +357,7 @@ const DockviewDemo = (props: { theme?: string }) => {
                             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;
 }) => {