feat: auto adjust height like VSCode terminal (#48)

* feat: auto adjust height like VSCode terminal * fix: revert the icon change because of formatting
tannerlinsley · Jul 26, 2020 · 8f80584 · 8f80584
1 parent a45cc0a
commit 8f80584
Showing 1 changed file with 51 additions and 2 deletions.
diff --git a/src/index.js b/src/index.js
@@ -105,11 +105,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}
@@ -156,6 +157,8 @@ export function ReactQueryDevtools({
             border: 0,
             padding: 0,
             position: 'fixed',
+            bottom: '0',
+            right: '0',
             zIndex: '99999',
             display: 'inline-flex',
             fontSize: '1.5rem',
@@ -206,6 +209,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(
@@ -220,6 +225,8 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
       false
     )
 
+    const [isDragging, setIsDragging] = React.useState(false)
+
     const sortFn = React.useMemo(() => sortFns[sort], [sort])
 
     React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
@@ -228,6 +235,36 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
       }
     }, [setSort, sortFn])
 
+    React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+      if (isDragging) {
+        const run = e => {
+          const containerHeight = window.innerHeight - e.pageY
+          console.log(containerHeight)
+          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)
     )
@@ -288,7 +325,7 @@ 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',
@@ -300,6 +337,18 @@ export const ReactQueryDevtoolsPanel = React.forwardRef(
               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',