fix monaco editor layout with resizeObserve

public/react/src/components/monaco-editor/index.jsx

@@ -64,7 +64,7 @@ function getLanguageByMirrorName(mirror_name) {
 
 export default ({
   width = '100%',
-  height = '100%',
+  height = '445px',
   value,
   language = 'javascript',
   options = {},
@@ -78,20 +78,9 @@ export default ({
   const [init, setInit] = useState(false)
 
   function onLayout() {
-    if (window.ResizeObserver) {
-      const ro = new window.ResizeObserver(entries => {
-        for (let entry of entries) {
-          if (entry.target.offsetHeight > 0) {
-            editor.current.instance.layout()
-          }
-        }
-      })
-      ro.observe(editorEl.current.parentElement)
-    } else {
     setTimeout(() => {
       editor.current.instance.layout()
-      }, 100);
-    }
+    }, 100)
   }
 
   useEffect(() => {

public/react/src/modules/page/MainContent.js

@@ -155,7 +155,7 @@ class MainContent extends Component {
 																<div style={{ display: (codeLoading ? 'block' : 'none'), textAlign: 'center' }}>
 																	<span style={{ color: '#ddd', display: 'block' }}>正在加载中，请稍后...</span>
 																</div>
-																<div style={{ display: (codeLoading ? 'none' : 'block') }}>
+																<div style={{ display: (codeLoading ? 'none' : 'block'), height: '100%' }}>
 																	<CodeRepositoryViewContainer {...this.props} ></CodeRepositoryViewContainer>
 																</div>
 															</React.Fragment>

public/react/src/modules/page/main/CodeRepositoryViewContainer.js

@@ -37,7 +37,7 @@ function getNewTreeData(treeData, curKey, child, level) {
 }
 
 function fileData2TreeData(repoFilesData) {
-	if(repoFilesData!=null){
+	if (repoFilesData != null) {
 		const fileTreeData = [];
 		repoFilesData.forEach((item) => {
 			if (item.kind === 'file') {
@@ -79,17 +79,17 @@ class CodeRepositoryViewContainer extends Component {
 		}
 	}
 	showSettingDrawer = (open) => {
-		this.setState({settingDrawerOpen: open})
+		this.setState({ settingDrawerOpen: open })
 	}
 	tabIndexChange = (index) => {
-		this.setState({tabIndex: index});
+		this.setState({ tabIndex: index });
 	}
 	onRepositoryViewExpand() {
 		window.repository_extend_and_zoom();
 		this.setState({
 			evaluateViewExpanded: !this.state.evaluateViewExpanded
 		}, () => {
-			setTimeout(()=>{
+			setTimeout(() => {
 				window.__tpiOnResize()
 			}, 300)
 		})
@@ -122,20 +122,20 @@ class CodeRepositoryViewContainer extends Component {
 
 	componentDidUpdate(prevProps, prevState, snapshot) {
 		const { game, challenge } = this.props
-		if (this.props.game && (!prevProps.game || prevProps.game.identifier !== this.props.game.identifier) ) {
+		if (this.props.game && (!prevProps.game || prevProps.game.identifier !== this.props.game.identifier)) {
 			this.setState({
-				fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[0] : challenge.path ]
+				fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[0] : challenge.path]
 			})
 			// 初始化
 		} else if (this.state.fileTreeSelectedKeys.length === 0 && challenge && challenge.path) {
 			this.setState({
-				fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[0] : challenge.path ]
+				fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[0] : challenge.path]
 			})
 		} else if (challenge && prevProps && prevProps.challenge
 			&& challenge.pathIndex != prevProps.challenge.pathIndex
 			&& challenge.pathIndex !== -1) {
 			this.setState({
-				fileTreeSelectedKeys: [ challenge.multiPath ? challenge.path[challenge.pathIndex] : challenge.path ]
+				fileTreeSelectedKeys: [challenge.multiPath ? challenge.path[challenge.pathIndex] : challenge.path]
 			})
 		}
 	}
@@ -179,7 +179,7 @@ class CodeRepositoryViewContainer extends Component {
 		// var ar = this.props.challenge.path.split('/');
 		// ar.length = ar.length - 2;
 		// var _path = ar.join('/');
-		var _path = treeNode ? treeNode.props.eventKey : '' ;
+		var _path = treeNode ? treeNode.props.eventKey : '';
 		if (_path.charAt(0) === '/') {
 			_path = _path.substring(1)
 		}
@@ -292,43 +292,17 @@ class CodeRepositoryViewContainer extends Component {
 			}
 		}
 	}
-//  /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88
+	//  /shixuns/mnf6b7z3/shixun_discuss?challenge_id=88
 	render() {
 
 		return (
-				// <React.Fragment>
-				// 	{this.props.isOnlyContainer == true ? 
-				// 		React.Children.map(this.props.children, child => {
-				// 			if(!child) {
-				// 				return ''
-				// 			}
-				// 			return React.cloneElement(child, Object.assign({...this.state}, { 
-				// 				loadRepoFiles: this.loadRepoFiles,
-				// 				onTreeSelect: this.onTreeSelect,
-				// 				onLoadData: this.onLoadData,
-				// 			}))
-				// 		})
-
-				// 	: 
-				
-				// 	<CodeRepositoryView {...this.props} 
-				// 		{...this.state} 
-				// 		showFilesDrawer={this.showFilesDrawer}
-				// 		loadRepoFiles={this.loadRepoFiles}
-				// 		onLoadData={this.onLoadData}
-				// 		onTreeSelect={ this.onTreeSelect }
-				// 		onRepositoryViewExpand={this.onRepositoryViewExpand}
-				// 		tabIndexChange={this.tabIndexChange}
-				// 		showSettingDrawer={this.showSettingDrawer}
-				// 	></CodeRepositoryView> }
-				// </React.Fragment>
 			<React.Fragment>
 				{this.props.isOnlyContainer == true ?
 					React.Children.map(this.props.children, child => {
-							if(!child) {
+						if (!child) {
 							return ''
 						}
-							return React.cloneElement(child, Object.assign({...this.state}, { 
+						return React.cloneElement(child, Object.assign({ ...this.state }, {
 							loadRepoFiles: this.loadRepoFiles,
 							onTreeSelect: this.onTreeSelect,
 							onLoadData: this.onLoadData,
@@ -342,11 +316,11 @@ class CodeRepositoryViewContainer extends Component {
 						showFilesDrawer={this.showFilesDrawer}
 						loadRepoFiles={this.loadRepoFiles}
 						onLoadData={this.onLoadData}
-						onTreeSelect={ this.onTreeSelect }
+						onTreeSelect={this.onTreeSelect}
 						onRepositoryViewExpand={this.onRepositoryViewExpand}
 						tabIndexChange={this.tabIndexChange}
 						showSettingDrawer={this.showSettingDrawer}
-					></CodeRepositoryView> }
+					></CodeRepositoryView>}
 			</React.Fragment>
 		);
 	}