import autobind from "autobind-decorator" ; import * as React from "react" ; import { HotKeys } from "react-hotkeys" ; import ScrollArea from "react-scrollbar/dist/no-css" ; import SplitPane from "react-split-pane" ; import { DirectoryHeader , DirectoryList , PathPanel } from "components/panels" ; import { TerminalWrapper } from "components/wrappers" ; import { IHandlers } from "models" ; import { IDirectoryWrapperProps } from "props/wrappers" ; import { IDirectoryWrapperState } from "states/panels" ; import Utils from "Utils" ; import "styles/wrappers/DirectoryWrapper.scss" ; import { ColumnType } from "types" ; /** The wrapper component for displaying directory content and terminal. */ class DirectoryWrapper extends React . Component < IDirectoryWrapperProps , IDirectoryWrapperState > { /** A reference to the directory scroll area in this wrapper. */ private directoryScrollArea ? : HTMLDivElement | null ; /** The last scroll area height, recorded in 'px'. */ private prevScrollAreaHeight ? : string ; /** The directory list child of this wrapper. */ private directoryList ? : DirectoryList | null ; /** Handler functions for the given events this component handles. */ private handlers : IHandlers = { toggleIntegratedTerminal : this . toggleIntegratedTerminal } ; private get storedDirectoryScrollAreaHeight ( ) { return this . props . persister . get < string > ( `dimensions.directoryScrollArea.${ this . props . id }` ) ; } param props public constructor ( props ) { super ( props ) ; const { persister , settingsManager , initialPath } = this . props ; const { displayAtStartup } = settingsManager . settings . terminal ; const isTerminalOpen = displayAtStartup !== undefined ? displayAtStartup : persister . get < boolean > ( `terminal.${ this . props . id }.isOpen` ) ; this . state = { columnSizes : { createdOn : 0 , lastModified : 50 , name : 50 , size : 50 } , directoryListHeight : isTerminalOpen ? this . storedDirectoryScrollAreaHeight || "65vh" : "100%" , isTerminalOpen , path : initialPath } ; } returns public render ( ) { const scrollAreaVertBarStyle = { backgroundColor : "rgb(65, 67, 57)" } ; const directoryListHeight = this . state . isTerminalOpen ? this . prevScrollAreaHeight || this . state . directoryListHeight : "100%" ; const resizerStyle = { backgroundColor : this . props . theme . resizers . colour , display : this . state . isTerminalOpen ? "block" : "none" } ; return < HotKeys handlers = { this . handlers } className = "HotKeys" > < div className = "DirectoryWrapper" > < PathPanel path = { this . state . path } theme = { this . props . theme } / > < div className = "splitPaneWrapper" > < SplitPane split = "horizontal" size = { directoryListHeight } resizerStyle = { resizerStyle } onDragFinished = { this . storeDirectoryListHeight } > < div ref = { element => this . directoryScrollArea = element } className = "scrollAreaWrapper" > < DirectoryHeader columnSizes = { this . state . columnSizes } updateColumnSize = { this . updateColumnSize } theme = { this . props . theme } / > < div className = "clippedHeight" > < ScrollArea className = "directoryScrollArea" horizontal = { false } style = { { backgroundColor : this . props . theme . primaryBackgroundColour } } verticalScrollbarStyle = { scrollAreaVertBarStyle } > < DirectoryList ref = { directoryList => this . directoryList = directoryList } id = { this . props . id } path = { this . state . path } isSelectedPane = { this . props . isSelectedPane } sendSelectedPaneUp = { this . props . sendSelectedPaneUp } sendPathUp = { this . updatePath } directoryManager = { this . props . directoryManager } statusNotifier = { this . props . statusNotifier } settingsManager = { this . props . settingsManager } theme = { this . props . theme } columnSizes = { this . state . columnSizes } / > < /ScrollArea> < /div> < /div> { this . state . isTerminalOpen && < TerminalWrapper settingsManager = { this . props . settingsManager } theme = { this . props . theme } integratedTerminal = { this . props . integratedTerminal } / > } < /SplitPane> < /div> < /div> < /HotKeys>; } @ autobind private storeDirectoryListHeight ( ) { if ( this . directoryScrollArea ) { this . prevScrollAreaHeight = `${ this . directoryScrollArea . clientHeight }px` ; this . props . persister . set < string > ( `dimensions.directoryScrollArea.${ this . props . id }` , `${ this . directoryScrollArea . clientHeight }px` ) ; } } @ autobind private toggleIntegratedTerminal ( ) { this . setState ( previousState => { if ( previousState . isTerminalOpen && this . directoryList && this . directoryList . KeysTrapper ) { Utils . autoFocus ( this . directoryList . KeysTrapper ) ; } this . props . persister . set < boolean > ( `terminal.${ this . props . id }.isOpen` , ! previousState . isTerminalOpen ) ; const directoryListHeight = ! previousState . isTerminalOpen ? this . prevScrollAreaHeight || this . storedDirectoryScrollAreaHeight || "65vh" : "100%" ; return { directoryListHeight , isTerminalOpen : ! previousState . isTerminalOpen } as IDirectoryWrapperState ; } ) ; } @ autobind private updateColumnSize ( columnType , newColumnSize ) { if ( this . state . columnSizes [ columnType ] === newColumnSize ) { return ; } const nextSizes = { ... this . state . columnSizes } ; nextSizes [ columnType ] = newColumnSize ; this . setState ( { columnSizes : nextSizes } ) ; } @ autobind private updatePath ( path ) { this . setState ( { path } as IDirectoryWrapperState ) ; this . props . settingsManager . settings . terminal . syncNavigation && this . props . integratedTerminal . changeDirectory ( path ) ; } } export default DirectoryWrapper ;