import * as React from "react" ; import { Header } from "./Header" ; import { DirectoryTree } from "./DirectoryTree" ; import { Project , File , Directory , ModelRef } from "../models" ; import { SplitOrientation , SplitInfo , Split } from "./Split" ; import appStore from "../stores/AppStore" ; export interface WorkspaceProps { /**
     * Active file.
     */ file : ModelRef < File > ; project : ModelRef < Project > ; onEditFile ? : ( file : File ) => void ; onDeleteFile ? : ( file : File ) => void ; onMoveFile ? : ( file : File , directory : Directory ) => void ; onRenameFile ? : ( file : File ) => void ; onNewFile ? : ( directory : Directory ) => void ; onNewDirectory ? : ( directory : Directory ) => void ; onClickFile : ( file : File ) => void ; onDoubleClickFile ? : ( file : File ) => void ; onUploadFile ? : ( directory : Directory ) => void ; onCreateGist : ( fileOrDirectory : File ) => void ; } export interface WorkSpaceState { splits : SplitInfo [ ] ; } export class Workspace extends React . Component < WorkspaceProps , WorkSpaceState > { directoryTree : DirectoryTree ; constructor ( props ) { super ( props ) ; this . state = { splits : [ ] } ; } componentDidMount ( ) { appStore . onDidChangeDirty . register ( this . refreshTree ) ; appStore . onDidChangeChildren . register ( this . refreshTree ) ; } componentWillUnmount ( ) { appStore . onDidChangeDirty . unregister ( this . refreshTree ) ; appStore . onDidChangeChildren . unregister ( this . refreshTree ) ; } refreshTree = ( ) => { this . directoryTree . tree . refresh ( ) ; } ; render ( ) { const project = this . props . project ; return < div className = "workspaceContainer" > < Header /> < div style = { { height : "calc(100% - 41px)" } } > < Split name = "Workspace" orientation = { SplitOrientation . Horizontal } splits = { this . state . splits } onChange = { ( splits ) => { this . setState ( { splits : splits } ) ; } } > < div /> < DirectoryTree ref = { ( ref ) => this . directoryTree = ref } directory = { project } value = { this . props . file } onNewFile = { this . props . onNewFile } onNewDirectory = { this . props . onNewDirectory } onEditFile = { this . props . onEditFile } onDeleteFile = { this . props . onDeleteFile } onUploadFile = { this . props . onUploadFile } onMoveFile = { this . props . onMoveFile } onClickFile = { this . props . onClickFile } onDoubleClickFile = { this . props . onDoubleClickFile } onCreateGist = { this . props . onCreateGist } / > < /Split> < /div> < /div>; } }