Merge branch 'master' of https://github.com/tannerlinsley/react-query-devtools

Author: tannerlinsley

README.md

@@ -87,7 +87,7 @@ function App() {
 - `toggleButtonProps: PropsObject`
   - Use this to add props to the toggle button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.
 - `position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
-  - Defaults to `bottom-right`
+  - Defaults to `bottom-left`
   - The position of the React Query logo to open and close the devtools panel
 
 ## Embedded Mode

index.d.ts

@@ -24,6 +24,11 @@ export function ReactQueryDevtools(props: {
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
   >
+  /**
+   * The position of the React Query logo to open and close the devtools panel.
+   * Defaults to 'bottom-left'.
+   */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
 }): React.ReactElement
 
 export function ReactQueryDevtoolsPanel(props: {

src/Logo.js

@@ -118,11 +118,12 @@ export function ReactQueryDevtools({
               zIndex: '99999',
               width: '100%',
               height: '500px',
-              maxHeight: '50%',
+              maxHeight: '90%',
               boxShadow: '0 0 20px rgba(0,0,0,.3)',
               borderTop: `1px solid ${theme.gray}`,
               ...panelStyle,
             }}
+            setIsOpen={setIsOpen}
           />
           <Button
             {...otherCloseButtonProps}
@@ -159,6 +160,7 @@ export function ReactQueryDevtools({
       ) : (
         <button
           {...otherToggleButtonProps}
+          aria-label="Open React Query Devtools"
           onClick={() => {
             setIsOpen(true)
             onToggleClick && onToggleClick()
@@ -197,11 +199,7 @@ export function ReactQueryDevtools({
             ...toggleButtonStyle,
           }}
         >
-          <Logo
-            width="1.5em"
-            height="1.5em"
-            aria-label="Open React Query Devtools"
-          />
+          <Logo aria-hidden />
         </button>
       )}
     </div>
@@ -224,6 +222,8 @@ const sortFns = {
 
 export const ReactQueryDevtoolsPanel = React.forwardRef(
   function ReactQueryDevtoolsPanel(props, ref) {
+    const { setIsOpen, ...panelProps } = props
+
     const queryCache = useQueryCache ? useQueryCache() : cache
 
     const [sort, setSort] = useLocalStorage(
@@ -238,6 +238,8 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
       false
     )
 
+    const [isDragging, setIsDragging] = React.useState(false)
+
     const sortFn = React.useMemo(() => sortFns[sort], [sort])
 
     React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
@@ -246,6 +248,36 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
       }
     }, [setSort, sortFn])
 
+    React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+      if (isDragging) {
+        const run = e => {
+          const containerHeight = window.innerHeight - e.pageY
+
+          if (containerHeight < 70) {
+            setIsOpen(false)
+          } else {
+            ref.current.style.height = `${containerHeight}px`
+          }
+        }
+        document.addEventListener('mousemove', run)
+        document.addEventListener('mouseup', handleDragEnd)
+
+        return () => {
+          document.removeEventListener('mousemove', run)
+          document.removeEventListener('mouseup', handleDragEnd)
+        }
+      }
+    }, [isDragging])
+
+    const handleDragStart = e => {
+      if (e.button !== 0) return // Only allow left click for drag
+      setIsDragging(true)
+    }
+
+    const handleDragEnd = e => {
+      setIsDragging(false)
+    }
+
     const [unsortedQueries, setUnsortedQueries] = React.useState(
       Object.values(queryCache.queries)
     )
@@ -302,17 +334,30 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
 
     return (
       <ThemeProvider theme={theme}>
-        <Panel ref={ref} className="ReactQueryDevtoolsPanel" {...props}>
+        <Panel ref={ref} className="ReactQueryDevtoolsPanel" {...panelProps}>
           <div
             style={{
               flex: '1 1 500px',
               minHeight: '40%',
+              maxHeight: '100%',
               overflow: 'auto',
               borderRight: `1px solid ${theme.grayAlt}`,
               display: 'flex',
               flexDirection: 'column',
             }}
           >
+            <div
+              style={{
+                left: 0,
+                width: '100%',
+                height: '4px',
+                marginBottom: '-4px',
+                cursor: 'row-resize',
+                zIndex: 100000,
+              }}
+              onMouseDown={handleDragStart}
+              onMouseUp={handleDragEnd}
+            ></div>
             <div
               style={{
                 padding: '.5rem',
@@ -419,7 +464,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
             </div>
             <div
               style={{
-                overflow: 'auto',
+                overflow: 'auto scroll',
               }}
             >
               {queries.map((query, i) => (

src/index.js

@@ -5286,9 +5286,9 @@ lodash.sortby@^4.7.0:
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
 lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
 
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"