educoder/public/react/src/modules/page/VNCContainer.js

import React, { Component } from 'react';
import axios from 'axios'
import { Spin } from 'antd'
import ClipboardJS from 'clipboard'

import VNCDisplay from './VNCDisplay'
import FloatButton from './component/FloatButton'
import SecondDrawer from './component/SecondDrawer'
import RepoTree from './component/repo/RepoTree'
import TPIMonaco from './component/monaco/TPIMonaco'
import notEditablePathImg from '../../images/tpi/notEditablePath.png'

import './VNC.css'
const $ = window.$;
const firstDrawerWidth = 260;
class VNCContainer extends Component {
	constructor(props) {
		super(props)
		
		this.state = {
			fileTreeSelectedKeys: [],
			repositoryCode: ''
		}
	}
	componentDidMount() {
		if (!this.clipboard) {
			const clipboard = new ClipboardJS('.copybtn');
			clipboard.on('success', (e) => {
				this.props.showSnackbar('复制成功')
			});
			this.clipboard = clipboard
		}

	}
	getSecondDrawerWidth = () => {
		return $('#game_right_contents').width() - firstDrawerWidth
	}
	renderSecondDrawerChildren = () => {
		const { readingCodeLoading, repositoryCode } = this.state;
		const height = $(window).height() - 130

		const isEditablePath = false;
		return (
		<Spin tip="加载中..." spinning={readingCodeLoading}>
			<div style={{ height: `${height}px` }}>
				<div className="codemirrorBackground" 
                        style={{ backgroundImage: `url('${notEditablePathImg}')`, display: (isEditablePath ? 'none' : 'block') }}></div>
				<TPIMonaco
					{...this.state}
					codeLoading={readingCodeLoading}
					repositoryCode={repositoryCode}
					isEditablePath={false}
				></TPIMonaco>
			
			</div>
		</Spin>);
	}
	fetchReadRepositoryCode = (path) => {
		const status = 1
		const fetchRepoCodeUrl = `/tasks/${this.props.game.identifier}/rep_content.json?path=${path}&status=${status}`
		this.setState({ readingCodeLoading: true });
    	axios.get(fetchRepoCodeUrl, {
    	}).then((fetchReadRepositoryCodeResponse) => {
			
			
			if (fetchReadRepositoryCodeResponse.data.content || fetchReadRepositoryCodeResponse.data.content == "") {
				this.setState({ 
					repositoryCode: fetchReadRepositoryCodeResponse.data.content,
					readingCodeLoading: false
				})
			} else {
				this.setState({ readingCodeLoading: false });
			}
			// this.setState({ isEditablePath, currentPath: path });

    	}).catch(error =>{
    		console.log(error)
			this.setState({ readingCodeLoading: false });
			this.props.showSnackbar(`服务端异常，请联系管理员！`);
    	})
	}
	onTreeSelect = (selectedKeys, info) => {
		const isLeaf = info.node.props.isLeaf;
		if (isLeaf) {		// 叶子节点
			selectedKeys.length && this.setState({
				fileTreeSelectedKeys: selectedKeys
			})
			this.refs["secondDrawer"].showSecondDrawer()

			console.log('leaf clicked')
			const nodePath = info.node.props.eventKey;
			if (nodePath) {
				const filetype = nodePath.split('.').pop().toLowerCase();
				if (filetype == 'jpg' || filetype == 'png' || filetype == 'gif' || filetype == 'jpeg'
						|| filetype == 'jar' || filetype == 'exe'
						|| filetype == 'doc' || filetype == 'pdf' || filetype == 'xsl' || filetype == 'ppt') {
					this.props.showSnackbar(`不支持加载${filetype}类型的文件。`)
					return;
				}
				this.fetchReadRepositoryCode(nodePath);	
			} else {
				console.error('no eventKey:', info.node)
			}
		}
	}
	/*
	selectedKeys={fileTreeSelectedKeys}
	onSelect={onTreeSelect}
	*/
  	render() {
  		const { challenge, vnc_url, git_url } = this.props

		const secondDrawerChildren = this.renderSecondDrawerChildren();
	    return (
	      	<React.Fragment>
                <SecondDrawer
					ref="secondDrawer"
                    floatText={'版本库'}
					maskClosable={false}
					secondDrawerChildren={secondDrawerChildren}	
					firstDrawerWidth={firstDrawerWidth}
					getSecondDrawerWidth={this.getSecondDrawerWidth}

					firstDrawerClassName="repoFilesDrawer vncDrawer"
					secondDrawerClassName="codeInDrawer"
                >
					<style>{`
						.vncDrawer .ant-drawer-body {
							padding: 0px;
						}
						.vncDrawer .rc-tree {
							padding: 16px;
							max-width: 220px;
							color: #CBCBCB;
						}

						.vncDrawer .ant-drawer-wrapper-body {
							background: #242324;
						}
						.codeInDrawer .ant-drawer-wrapper-body {
							background: #1D1C1D;
						}
						
						.vncDrawer .ant-drawer-header, .codeInDrawer .ant-drawer-header {
							border-bottom: 0;
						}

						.vncDrawer > div:nth-child(1) {
							opacity: 1 !important;
						}
						.vncDrawer > div:nth-child(2) {
							top: 0px !important;
							height: 100% !important;
							min-width: unset;
						}

						.codeInDrawer .ant-spin-nested-loading > div > .ant-spin .ant-spin-text {
							text-shadow: none;
						}
					`}</style>
					<div style={{ 'padding': '16px', 'border-bottom': '1px solid #3A383A' }}>
						<div style={{ color: '#888888' }}>网址克隆</div>
						<div>
							<input value={git_url} readonly={true} style={{ color: '#BABABA', width: '203px', background: 'transparent', border: 'none' }}></input>
							<i class="iconfont icon-fuzhi font-14 ml10 copybtn" 
								style={{color: '#4CACFF', cursor: 'pointer', verticalAlign: 'baseline'}} data-clipboard-text={git_url} ></i>
						</div>
					</div>
					<RepoTree
						{...this.props}
						fileTreeSelectedKeys={this.state.fileTreeSelectedKeys}
						onTreeSelect={this.onTreeSelect}

					></RepoTree>
				</SecondDrawer>
                <FloatButton></FloatButton>
                <VNCDisplay
                    {...this.props}
                ></VNCDisplay>

                
		    </React.Fragment>
	    );
  	}
}

export default VNCContainer;