Skip to content

Commit

Permalink
New props added to Devtools component for better control
Browse files Browse the repository at this point in the history 
- withCloseButton prop: display the close button
- withDragPositionPanel prop: can drag position panel
- withPIPButton prop: display the Picture In Picture button
- withPositionButton prop: display the position button
  • Loading branch information
@toofff
toofff committed Aug 29, 2024
1 parent 7080975 commit a0b51d1
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 134 deletions.
274 changes: 141 additions & 133 deletions packages/query-devtools/src/Devtools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@ import {
For,
Show,
batch,
createContext,
createEffect,
createMemo,
createSignal,
mergeProps,
on,
onCleanup,
onMount,
useContext,
} from 'solid-js'
import { rankItem } from '@tanstack/match-sorter-utils'
import * as goober from 'goober'
Expand All @@ -18,7 +17,7 @@ import { TransitionGroup } from 'solid-transition-group'
import { Key } from '@solid-primitives/keyed'
import { createResizeObserver } from '@solid-primitives/resize-observer'
import { DropdownMenu, RadioGroup } from '@kobalte/core'
import { Portal, clearDelegatedEvents, delegateEvents } from 'solid-js/web'
import { Portal } from 'solid-js/web'
import { tokens } from './theme'
import {
convertRemToPixels,
Expand Down Expand Up @@ -77,6 +76,10 @@ import type { Accessor, Component, JSX, Setter } from 'solid-js'
interface DevtoolsPanelProps {
localStore: StorageObject<string>
setLocalStore: StorageSetter<string, unknown>
withCloseButton?: boolean
withDragPositionPanel?: boolean
withPIPButton?: boolean
withPositionButton?: boolean
}

interface QueryStatusProps {
Expand Down Expand Up @@ -108,7 +111,13 @@ const [selectedMutationId, setSelectedMutationId] = createSignal<number | null>(
const [panelWidth, setPanelWidth] = createSignal(0)
const [offline, setOffline] = createSignal(false)

export const Devtools: Component<DevtoolsPanelProps> = (props) => {
export const Devtools: Component<DevtoolsPanelProps> = (_props) => {
const props = mergeProps({
withCloseButton: true,
withDragPositionPanel: true,
withPIPButton: true,
withPositionButton: true
}, _props)
const theme = useTheme()
const css = useQueryDevtoolsContext().shadowDOMTarget
? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
Expand Down Expand Up @@ -181,10 +190,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
<Show when={pip().pipWindow && pip_open() == 'true'}>
<Portal mount={pip().pipWindow?.document.body}>
<PiPPanel>
<ContentView
localStore={props.localStore}
setLocalStore={props.setLocalStore}
/>
<ContentView {...props} />
</PiPPanel>
</Portal>
</Show>
Expand Down Expand Up @@ -232,10 +238,7 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
>
<TransitionGroup name="tsqd-panel-transition">
<Show when={isOpen() && !pip().pipWindow && pip_open() == 'false'}>
<DevtoolsPanel
localStore={props.localStore}
setLocalStore={props.setLocalStore}
/>
<DevtoolsPanel {...props} />
</Show>
</TransitionGroup>
<TransitionGroup name="tsqd-button-transition">
Expand Down Expand Up @@ -509,37 +512,38 @@ const DevtoolsPanel: Component<DevtoolsPanelProps> = (props) => {
ref={panelRef}
aria-label="Tanstack query devtools"
>
<div
class={cx(
styles().dragHandle,
styles()[`dragHandle-position-${position()}`],
'tsqd-drag-handle',
)}
onMouseDown={handleDragStart}
></div>
<button
aria-label="Close tanstack query devtools"
class={cx(
styles().closeBtn,
styles()[`closeBtn-position-${position()}`],
'tsqd-minimize-btn',
)}
onClick={() => props.setLocalStore('open', 'false')}
>
<ChevronDown />
</button>
<ContentView
localStore={props.localStore}
setLocalStore={props.setLocalStore}
/>
{props.withDragPositionPanel && (
<div
class={cx(
styles().dragHandle,
styles()[`dragHandle-position-${position()}`],
'tsqd-drag-handle',
)}
onMousedown={handleDragStart}
></div>
)}
{props.withCloseButton && (
<button
aria-label="Close tanstack query devtools"
class={cx(
styles().closeBtn,
styles()[`closeBtn-position-${position()}`],
'tsqd-minimize-btn',
)}
onClick={() => props.setLocalStore('open', 'false')}
>
<ChevronDown/>
</button>
)}
<ContentView {...props} />
</aside>
)
}

const ContentView: Component<DevtoolsPanelProps> = (props) => {
setupQueryCacheSubscription()
setupMutationCacheSubscription()

console.log('ContentView ', props);
let containerRef!: HTMLDivElement
const theme = useTheme()
const css = useQueryDevtoolsContext().shadowDOMTarget
Expand Down Expand Up @@ -906,25 +910,27 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
>
{offline() ? <Offline /> : <Wifi />}
</button>
<Show when={!pip().pipWindow}>
<button
onClick={() => {
pip().requestPipWindow(
Number(window.innerWidth),
Number(props.localStore.height ?? 500),
)
}}
class={cx(
styles().actionsBtn,
'tsqd-actions-btn',
'tsqd-action-open-pip',
)}
aria-label="Open in picture-in-picture mode"
title={`Open in picture-in-picture mode`}
>
<PiPIcon />
</button>
</Show>
{props.withPIPButton && (
<Show when={!pip().pipWindow}>
<button
onClick={() => {
pip().requestPipWindow(
Number(window.innerWidth),
Number(props.localStore.height ?? 500),
)
}}
class={cx(
styles().actionsBtn,
'tsqd-actions-btn',
'tsqd-action-open-pip',
)}
aria-label="Open in picture-in-picture mode"
title={`Open in picture-in-picture mode`}
>
<PiPIcon />
</button>
</Show>
)}

<DropdownMenu.Root gutter={4}>
<DropdownMenu.Trigger
Expand Down Expand Up @@ -955,90 +961,92 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
>
Settings
</div>
<DropdownMenu.Sub overlap gutter={8} shift={-4}>
<DropdownMenu.SubTrigger
class={cx(
styles().settingsSubTrigger,
'tsqd-settings-menu-sub-trigger',
'tsqd-settings-menu-sub-trigger-position',
)}
>
<span>Position</span>
<ChevronDown />
</DropdownMenu.SubTrigger>
<DropdownMenu.Portal
ref={(el) => setComputedVariables(el as HTMLDivElement)}
mount={
pip().pipWindow
? pip().pipWindow!.document.body
: document.body
}
>
<DropdownMenu.SubContent
{props.withPositionButton && (
<DropdownMenu.Sub overlap gutter={8} shift={-4}>
<DropdownMenu.SubTrigger
class={cx(
styles().settingsMenu,
'tsqd-settings-submenu',
styles().settingsSubTrigger,
'tsqd-settings-menu-sub-trigger',
'tsqd-settings-menu-sub-trigger-position',
)}
>
<DropdownMenu.Item
onSelect={() => {
setDevtoolsPosition('top')
}}
as="button"
class={cx(
styles().settingsSubButton,
'tsqd-settings-menu-position-btn',
'tsqd-settings-menu-position-btn-top',
)}
>
<span>Top</span>
<ArrowUp />
</DropdownMenu.Item>
<DropdownMenu.Item
onSelect={() => {
setDevtoolsPosition('bottom')
}}
as="button"
class={cx(
styles().settingsSubButton,
'tsqd-settings-menu-position-btn',
'tsqd-settings-menu-position-btn-bottom',
)}
>
<span>Bottom</span>
<ArrowDown />
</DropdownMenu.Item>
<DropdownMenu.Item
onSelect={() => {
setDevtoolsPosition('left')
}}
as="button"
class={cx(
styles().settingsSubButton,
'tsqd-settings-menu-position-btn',
'tsqd-settings-menu-position-btn-left',
)}
>
<span>Left</span>
<ArrowLeft />
</DropdownMenu.Item>
<DropdownMenu.Item
onSelect={() => {
setDevtoolsPosition('right')
}}
as="button"
<span>Position</span>
<ChevronDown />
</DropdownMenu.SubTrigger>
<DropdownMenu.Portal
ref={(el) => setComputedVariables(el as HTMLDivElement)}
mount={
pip().pipWindow
? pip().pipWindow!.document.body
: document.body
}
>
<DropdownMenu.SubContent
class={cx(
styles().settingsSubButton,
'tsqd-settings-menu-position-btn',
'tsqd-settings-menu-position-btn-right',
styles().settingsMenu,
'tsqd-settings-submenu',
)}
>
<span>Right</span>
<ArrowRight />
</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Portal>
</DropdownMenu.Sub>
<DropdownMenu.Item
onSelect={() => {
setDevtoolsPosition('top')
}}
as="button"
class={cx(
styles().settingsSubButton,
'tsqd-settings-menu-position-btn',
'tsqd-settings-menu-position-btn-top',
)}
>
<span>Top</span>
<ArrowUp />
</DropdownMenu.Item>
<DropdownMenu.Item
onSelect={() => {
setDevtoolsPosition('bottom')
}}
as="button"
class={cx(
styles().settingsSubButton,
'tsqd-settings-menu-position-btn',
'tsqd-settings-menu-position-btn-bottom',
)}
>
<span>Bottom</span>
<ArrowDown />
</DropdownMenu.Item>
<DropdownMenu.Item
onSelect={() => {
setDevtoolsPosition('left')
}}
as="button"
class={cx(
styles().settingsSubButton,
'tsqd-settings-menu-position-btn',
'tsqd-settings-menu-position-btn-left',
)}
>
<span>Left</span>
<ArrowLeft />
</DropdownMenu.Item>
<DropdownMenu.Item
onSelect={() => {
setDevtoolsPosition('right')
}}
as="button"
class={cx(
styles().settingsSubButton,
'tsqd-settings-menu-position-btn',
'tsqd-settings-menu-position-btn-right',
)}
>
<span>Right</span>
<ArrowRight />
</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Portal>
</DropdownMenu.Sub>
)}
<DropdownMenu.Sub overlap gutter={8} shift={-4}>
<DropdownMenu.SubTrigger
class={cx(
Expand Down
9 changes: 8 additions & 1 deletion packages/query-devtools/src/DevtoolsPanelComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,14 @@ const DevtoolsPanelComponent: DevtoolsPanelComponentType = (props) => {
<QueryDevtoolsContext.Provider value={props}>
<PiPProvider localStore={localStore} setLocalStore={setLocalStore}>
<ThemeContext.Provider value={theme}>
<Devtools localStore={localStore} setLocalStore={setLocalStore} />
<Devtools
localStore={localStore}
setLocalStore={setLocalStore}
withCloseButton={false}
withDragPositionPanel={false}
withPIPButton={false}
withPositionButton={false}
/>
</ThemeContext.Provider>
</PiPProvider>
</QueryDevtoolsContext.Provider>
Expand Down

0 comments on commit a0b51d1

Please sign in to comment.