redesign props of TanstackQueryDevtoolsPanel component

TanStack · Aug 29, 2024 · 7080975 · 7080975
1 parent 033e199
commit 7080975
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 36 deletions.
diff --git a/packages/query-devtools/src/DevtoolsComponent.tsx b/packages/query-devtools/src/DevtoolsComponent.tsx
@@ -10,7 +10,7 @@ import {
 import { Devtools, THEME_PREFERENCE } from './Devtools'
 import type { Component } from 'solid-js'
 
-export type DevtoolsComponentType = Component<QueryDevtoolsProps> & {
+export type DevtoolsComponentType = Component<Omit<QueryDevtoolsProps, 'buttonPosition'>> & {
   shadowDOMTarget?: ShadowRoot
 }
 

diff --git a/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx b/packages/query-devtools/src/TanstackQueryDevtoolsPanel.tsx
@@ -1,20 +1,19 @@
-import { render } from 'solid-js/web'
+import type { Signal } from 'solid-js'
 import { createSignal, lazy } from 'solid-js'
-import { setupStyleSheet } from './utils'
+import { render } from 'solid-js/web'
 import type {
   QueryClient,
   onlineManager as TOnlineManager,
 } from '@tanstack/query-core'
 import type { DevtoolsComponentType } from './DevtoolsComponent'
 import type {
   DevToolsErrorType,
-  DevtoolsButtonPosition,
   DevtoolsPosition,
   QueryDevtoolsProps,
 } from './contexts'
-import type { Signal } from 'solid-js'
+import { setupStyleSheet } from './utils'
 
-export interface TanstackQueryDevtoolsPanelConfig extends QueryDevtoolsProps {
+export interface TanstackQueryDevtoolsPanelConfig extends Omit<QueryDevtoolsProps, 'buttonPosition'> {
   styleNonce?: string
   shadowDOMTarget?: ShadowRoot
 }
@@ -27,7 +26,6 @@ class TanstackQueryDevtoolsPanel {
   #isMounted = false
   #styleNonce?: string
   #shadowDOMTarget?: ShadowRoot
-  #buttonPosition: Signal<DevtoolsButtonPosition | undefined>
   #position: Signal<DevtoolsPosition | undefined>
   #initialIsOpen: Signal<boolean | undefined>
   #errorTypes: Signal<Array<DevToolsErrorType> | undefined>
@@ -40,7 +38,6 @@ class TanstackQueryDevtoolsPanel {
       queryFlavor,
       version,
       onlineManager,
-      buttonPosition,
       position,
       initialIsOpen,
       errorTypes,
@@ -53,16 +50,11 @@ class TanstackQueryDevtoolsPanel {
     this.#onlineManager = onlineManager
     this.#styleNonce = styleNonce
     this.#shadowDOMTarget = shadowDOMTarget
-    this.#buttonPosition = createSignal(buttonPosition)
     this.#position = createSignal(position)
     this.#initialIsOpen = createSignal(initialIsOpen)
     this.#errorTypes = createSignal(errorTypes)
   }
 
-  setButtonPosition(position: DevtoolsButtonPosition) {
-    this.#buttonPosition[1](position)
-  }
-
   setPosition(position: DevtoolsPosition) {
     this.#position[1](position)
   }
@@ -84,7 +76,6 @@ class TanstackQueryDevtoolsPanel {
       throw new Error('DevtoolsPanel is already mounted')
     }
     const dispose = render(() => {
-      const [btnPosition] = this.#buttonPosition
       const [pos] = this.#position
       const [isOpen] = this.#initialIsOpen
       const [errors] = this.#errorTypes
@@ -109,9 +100,6 @@ class TanstackQueryDevtoolsPanel {
             get client() {
               return queryClient()
             },
-            get buttonPosition() {
-              return btnPosition()
-            },
             get position() {
               return pos()
             },

diff --git a/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx b/packages/react-query-devtools/src/ReactQueryDevtoolsPanel.tsx
@@ -2,24 +2,14 @@
 import * as React from 'react'
 import { onlineManager, useQueryClient } from '@tanstack/react-query'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
-import type {
-  DevToolsErrorType,
-  DevtoolsButtonPosition,
-  DevtoolsPosition,
-} from '@tanstack/query-devtools'
+import type { DevToolsErrorType, DevtoolsPosition } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/react-query'
 
 export interface DevtoolsPanelOptions {
   /**
    * Set this true if you want the dev tools to default to being open
    */
   initialIsOpen?: boolean
-  /**
-   * The position of the React Query logo to open and close the devtools panel.
-   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-   * Defaults to 'bottom-right'.
-   */
-  buttonPosition?: DevtoolsButtonPosition
   /**
    * The position of the React Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
@@ -50,7 +40,6 @@ export function ReactQueryDevtoolsPanel(
   const queryClient = useQueryClient(props.client)
   const ref = React.useRef<HTMLDivElement>(null)
   const {
-    buttonPosition,
     position,
     initialIsOpen,
     errorTypes,
@@ -63,7 +52,6 @@ export function ReactQueryDevtoolsPanel(
       queryFlavor: 'React Query',
       version: '5',
       onlineManager,
-      buttonPosition,
       position,
       initialIsOpen,
       errorTypes,
@@ -76,12 +64,6 @@ export function ReactQueryDevtoolsPanel(
     devtools.setClient(queryClient)
   }, [queryClient, devtools])
 
-  React.useEffect(() => {
-    if (buttonPosition) {
-      devtools.setButtonPosition(buttonPosition)
-    }
-  }, [buttonPosition, devtools])
-
   React.useEffect(() => {
     if (position) {
       devtools.setPosition(position)