|  |  |  | @ -4,7 +4,7 @@ | 
			
		
	
		
			
				
					|  |  |  |  |  * @Github:  | 
			
		
	
		
			
				
					|  |  |  |  |  * @Date: 2019-11-27 15:02:52 | 
			
		
	
		
			
				
					|  |  |  |  |  * @LastEditors  : tangjiang | 
			
		
	
		
			
				
					|  |  |  |  |  * @LastEditTime : 2019-12-27 09:22:08 | 
			
		
	
		
			
				
					|  |  |  |  |  * @LastEditTime : 2019-12-27 10:32:25 | 
			
		
	
		
			
				
					|  |  |  |  |  */ | 
			
		
	
		
			
				
					|  |  |  |  | import './index.scss'; | 
			
		
	
		
			
				
					|  |  |  |  | import React, { useState, useRef, useEffect } from 'react'; | 
			
		
	
	
		
			
				
					|  |  |  | @ -28,7 +28,8 @@ const maps = { | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | function MyMonacoEditor (props, ref) { | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   const {  | 
			
		
	
		
			
				
					|  |  |  |  |   const { | 
			
		
	
		
			
				
					|  |  |  |  |     code, | 
			
		
	
		
			
				
					|  |  |  |  |     notice, | 
			
		
	
		
			
				
					|  |  |  |  |     language,  | 
			
		
	
		
			
				
					|  |  |  |  |     identifier, | 
			
		
	
	
		
			
				
					|  |  |  | @ -41,7 +42,7 @@ function MyMonacoEditor (props, ref) { | 
			
		
	
		
			
				
					|  |  |  |  |   } = props; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
 | 
			
		
	
		
			
				
					|  |  |  |  |   const [editCode, setEditCode] = useState(''); | 
			
		
	
		
			
				
					|  |  |  |  |   // const [editCode, setEditCode] = useState('');
 | 
			
		
	
		
			
				
					|  |  |  |  |   // const [curLang, setCurLang] = useState('C');
 | 
			
		
	
		
			
				
					|  |  |  |  |   const [fontSize, setFontSize] = useState(() => { // 字体
 | 
			
		
	
		
			
				
					|  |  |  |  |     return +fromStore('oj_fontSize') || 14; | 
			
		
	
	
		
			
				
					|  |  |  | @ -52,9 +53,9 @@ function MyMonacoEditor (props, ref) { | 
			
		
	
		
			
				
					|  |  |  |  |   const [ height, setHeight ] = useState('calc(100% - 56px)'); | 
			
		
	
		
			
				
					|  |  |  |  |   const editorRef = useRef(null); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   useEffect(() => { | 
			
		
	
		
			
				
					|  |  |  |  |     setEditCode(props.code || ''); | 
			
		
	
		
			
				
					|  |  |  |  |   }, [props]); | 
			
		
	
		
			
				
					|  |  |  |  |   // useEffect(() => {
 | 
			
		
	
		
			
				
					|  |  |  |  |   //   setEditCode(props.code || '');
 | 
			
		
	
		
			
				
					|  |  |  |  |   // }, [props]);
 | 
			
		
	
		
			
				
					|  |  |  |  |    | 
			
		
	
		
			
				
					|  |  |  |  |   useEffect(() => { | 
			
		
	
		
			
				
					|  |  |  |  |     setHeight(showOrHideControl ? 'calc(100% - 378px)' : 'calc(100% - 56px)'); | 
			
		
	
	
		
			
				
					|  |  |  | @ -80,11 +81,11 @@ function MyMonacoEditor (props, ref) { | 
			
		
	
		
			
				
					|  |  |  |  |     // 文本框内容变化时,记录文本框内容
 | 
			
		
	
		
			
				
					|  |  |  |  |   const handleEditorChange = (origin, monaco) => { | 
			
		
	
		
			
				
					|  |  |  |  |     editorRef.current = monaco; // 获取当前monaco实例
 | 
			
		
	
		
			
				
					|  |  |  |  |     setEditCode(origin); // 保存编辑器初始值
 | 
			
		
	
		
			
				
					|  |  |  |  |     // setEditCode(origin); // 保存编辑器初始值
 | 
			
		
	
		
			
				
					|  |  |  |  |     editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化
 | 
			
		
	
		
			
				
					|  |  |  |  |       // TODO 需要优化 节流
 | 
			
		
	
		
			
				
					|  |  |  |  |       const val = editorRef.current.getValue(); | 
			
		
	
		
			
				
					|  |  |  |  |       setEditCode(val); | 
			
		
	
		
			
				
					|  |  |  |  |       // setEditCode(val);
 | 
			
		
	
		
			
				
					|  |  |  |  |       onCodeChange(val); | 
			
		
	
		
			
				
					|  |  |  |  |       // 值一变化保存当前代码值
 | 
			
		
	
		
			
				
					|  |  |  |  |       // saveUserInputCode(val);
 | 
			
		
	
	
		
			
				
					|  |  |  | @ -179,7 +180,7 @@ function MyMonacoEditor (props, ref) { | 
			
		
	
		
			
				
					|  |  |  |  |             height={height} | 
			
		
	
		
			
				
					|  |  |  |  |             width="100%" | 
			
		
	
		
			
				
					|  |  |  |  |             language={language && language.toLowerCase()} | 
			
		
	
		
			
				
					|  |  |  |  |             value={editCode} | 
			
		
	
		
			
				
					|  |  |  |  |             value={code || ''} | 
			
		
	
		
			
				
					|  |  |  |  |             options={editorOptions} | 
			
		
	
		
			
				
					|  |  |  |  |             theme={theme} // dark || light
 | 
			
		
	
		
			
				
					|  |  |  |  |             editorDidMount={handleEditorChange} | 
			
		
	
	
		
			
				
					|  |  |  | @ -210,12 +211,12 @@ const mapStateToProps = (state) => { | 
			
		
	
		
			
				
					|  |  |  |  |   } | 
			
		
	
		
			
				
					|  |  |  |  | }; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const mapDispatchToProps = (dispatch) => ({ | 
			
		
	
		
			
				
					|  |  |  |  |   // saveUserInputCode: (code) => dispatch(actions.saveUserInputCode(code)),
 | 
			
		
	
		
			
				
					|  |  |  |  | }); | 
			
		
	
		
			
				
					|  |  |  |  | // const mapDispatchToProps = (dispatch) => ({
 | 
			
		
	
		
			
				
					|  |  |  |  | //   // saveUserInputCode: (code) => dispatch(actions.saveUserInputCode(code)),
 | 
			
		
	
		
			
				
					|  |  |  |  | // });
 | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | // MyMonacoEditor = React.forwardRef(MyMonacoEditor);
 | 
			
		
	
		
			
				
					|  |  |  |  | export default connect( | 
			
		
	
		
			
				
					|  |  |  |  |   mapStateToProps, | 
			
		
	
		
			
				
					|  |  |  |  |   mapDispatchToProps | 
			
		
	
		
			
				
					|  |  |  |  |   // mapDispatchToProps
 | 
			
		
	
		
			
				
					|  |  |  |  | )(CNotificationHOC() (MyMonacoEditor)); | 
			
		
	
	
		
			
				
					|  |  |  | 
 |