get saved terminal position

pull/5370/head
Josel95 3 years ago
parent cc5a763083
commit ce5552b767
  1. 16
      libs/remix-ui/terminal/src/lib/custom-hooks/useDragTerminal.tsx
  2. 7
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@ -1,11 +1,11 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
export const useDragTerminal = (offsetHeight: number) => { export const useDragTerminal = (minHeight: number, defaultPosition: number) => {
const [isOpen, setIsOpen] = useState(true) const [isOpen, setIsOpen] = useState(defaultPosition > minHeight)
const [lastYPosition, setLastYPosition] = useState(0) const [lastYPosition, setLastYPosition] = useState(0)
const [terminalPosition, setTerminalPosition] = useState(offsetHeight) const [terminalPosition, setTerminalPosition] = useState(defaultPosition)
// Used to save position of the terminal when it is closed // Used to save position of the terminal when it is closed
const [lastTerminalPosition, setLastTerminalPosition] = useState(offsetHeight) const [lastTerminalPosition, setLastTerminalPosition] = useState(defaultPosition)
const [isDragging, setIsDragging] = useState(false) const [isDragging, setIsDragging] = useState(false)
const handleDraggingStart = (event: React.MouseEvent) => { const handleDraggingStart = (event: React.MouseEvent) => {
@ -31,7 +31,7 @@ export const useDragTerminal = (offsetHeight: number) => {
setIsDragging(false) setIsDragging(false)
// Check terminal position to determine if it should be open or closed // Check terminal position to determine if it should be open or closed
setIsOpen(terminalPosition > offsetHeight) setIsOpen(terminalPosition > minHeight)
} }
const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => { const handleToggleTerminal = (event: React.MouseEvent<HTMLElement>) => {
@ -41,9 +41,9 @@ export const useDragTerminal = (offsetHeight: number) => {
if(isOpen) { if(isOpen) {
setLastTerminalPosition(terminalPosition) setLastTerminalPosition(terminalPosition)
setLastYPosition(0) setLastYPosition(0)
setTerminalPosition(offsetHeight) setTerminalPosition(minHeight)
} else { } else {
setTerminalPosition(lastTerminalPosition) setTerminalPosition(lastTerminalPosition <= minHeight ? 323 : lastTerminalPosition)
} }
setIsOpen(!isOpen) setIsOpen(!isOpen)
@ -63,7 +63,7 @@ export const useDragTerminal = (offsetHeight: number) => {
// Reset terminal position // Reset terminal position
useEffect(() => { useEffect(() => {
if(!terminalPosition){ if(!terminalPosition){
setTerminalPosition(offsetHeight) setTerminalPosition(defaultPosition)
} }
}, [terminalPosition, setTerminalPosition]) }, [terminalPosition, setTerminalPosition])

@ -76,13 +76,16 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
const panelRef = useRef(null) const panelRef = useRef(null)
const terminalMenu = useRef(null) const terminalMenu = useRef(null)
const terminalMenuOffsetHeight = (terminalMenu.current && terminalMenu.current.offsetHeight) || 35
const terminalDefaultPosition = config.get('terminal-top-offset')
const { const {
isOpen, isOpen,
isDragging, isDragging,
terminalPosition, terminalPosition,
handleDraggingStart, handleDraggingStart,
handleToggleTerminal handleToggleTerminal
} = useDragTerminal((terminalMenu.current && terminalMenu.current.offsetHeight) || 0) } = useDragTerminal(terminalMenuOffsetHeight, terminalDefaultPosition)
// Check open state // Check open state
useEffect(() => { useEffect(() => {
@ -96,7 +99,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
}, [isDragging]) }, [isDragging])
useEffect(() => { useEffect(() => {
event.trigger('resize', [terminalPosition + 32]) event.trigger('resize', [terminalPosition])
} , [terminalPosition]) } , [terminalPosition])
const scrollToBottom = () => { const scrollToBottom = () => {

Loading…
Cancel
Save