update App.js, src/components/Modal/index.js, src/components/ReactMonacoEditor/index.js and src/components/Tabbar/index.js
	
		
	
				
					
				
			
							parent
							
								
									b564c6e6d3
								
							
						
					
					
						commit
						fe04b3e2d9
					
				
				 4 changed files with 101 additions and 89 deletions
			
			
		| @ -1,97 +1,105 @@ | |||||||
| import React from "react"; | // import React from "react";
 | ||||||
| import { render } from "react-dom"; | // import { render } from "react-dom";
 | ||||||
| import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor"; | // import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
 | ||||||
| 
 | 
 | ||||||
| class CodeEditor extends React.Component { | // class CodeEditor extends React.Component {
 | ||||||
|   constructor() { | //   constructor() {
 | ||||||
|     super(); | //     super();
 | ||||||
|     this.state = { | //     this.state = {
 | ||||||
|       code: "// type your code... \n", | //       code: "// type your code... \n",
 | ||||||
|       theme: "vs-light", | //       theme: "vs-light",
 | ||||||
|     }; | //     };
 | ||||||
|   } | //   }
 | ||||||
| 
 | 
 | ||||||
|   onChange = (newValue) => { | //   onChange = (newValue) => {
 | ||||||
|     console.log("onChange", newValue); // eslint-disable-line no-console
 | //     console.log("onChange", newValue); // eslint-disable-line no-console
 | ||||||
|   }; | //   };
 | ||||||
| 
 | 
 | ||||||
|   editorDidMount = (editor) => { | //   editorDidMount = (editor) => {
 | ||||||
|     // eslint-disable-next-line no-console
 | //     // eslint-disable-next-line no-console
 | ||||||
|     console.log("editorDidMount", editor, editor.getValue(), editor.getModel()); | //     console.log("editorDidMount", editor, editor.getValue(), editor.getModel());
 | ||||||
|     this.editor = editor; | //     this.editor = editor;
 | ||||||
|   }; | //   };
 | ||||||
| 
 | 
 | ||||||
|   changeEditorValue = () => { | //   changeEditorValue = () => {
 | ||||||
|     if (this.editor) { | //     if (this.editor) {
 | ||||||
|       this.editor.setValue("// code changed! \n"); | //       this.editor.setValue("// code changed! \n");
 | ||||||
|     } | //     }
 | ||||||
|   }; | //   };
 | ||||||
| 
 | 
 | ||||||
|   changeBySetState = () => { | //   changeBySetState = () => {
 | ||||||
|     this.setState({ code: "// code changed by setState! \n" }); | //     this.setState({ code: "// code changed by setState! \n" });
 | ||||||
|   }; | //   };
 | ||||||
| 
 | 
 | ||||||
|   setDarkTheme = () => { | //   setDarkTheme = () => {
 | ||||||
|     this.setState({ theme: "vs-dark" }); | //     this.setState({ theme: "vs-dark" });
 | ||||||
|   }; | //   };
 | ||||||
| 
 | 
 | ||||||
|   setLightTheme = () => { | //   setLightTheme = () => {
 | ||||||
|     this.setState({ theme: "vs-light" }); | //     this.setState({ theme: "vs-light" });
 | ||||||
|   }; | //   };
 | ||||||
| 
 | 
 | ||||||
|   render() { | //   render() {
 | ||||||
|     const { code, theme } = this.state; | //     const { code, theme } = this.state;
 | ||||||
|     const options = { | //     const options = {
 | ||||||
|       selectOnLineNumbers: true, | //       selectOnLineNumbers: true,
 | ||||||
|       roundedSelection: false, | //       roundedSelection: false,
 | ||||||
|       readOnly: false, | //       readOnly: false,
 | ||||||
|       cursorStyle: "line", | //       cursorStyle: "line",
 | ||||||
|       automaticLayout: false, | //       automaticLayout: false,
 | ||||||
|     }; | //     };
 | ||||||
|     return ( | //     return (
 | ||||||
|       <div> | //       <div>
 | ||||||
|         <div> | //         <div>
 | ||||||
|           <button onClick={this.changeEditorValue} type="button"> | //           <button onClick={this.changeEditorValue} type="button">
 | ||||||
|             Change value | //             Change value
 | ||||||
|           </button> | //           </button>
 | ||||||
|           <button onClick={this.changeBySetState} type="button"> | //           <button onClick={this.changeBySetState} type="button">
 | ||||||
|             Change by setState | //             Change by setState
 | ||||||
|           </button> | //           </button>
 | ||||||
|           <button onClick={this.setDarkTheme} type="button"> | //           <button onClick={this.setDarkTheme} type="button">
 | ||||||
|             Set dark theme | //             Set dark theme
 | ||||||
|           </button> | //           </button>
 | ||||||
|           <button onClick={this.setLightTheme} type="button"> | //           <button onClick={this.setLightTheme} type="button">
 | ||||||
|             Set light theme | //             Set light theme
 | ||||||
|           </button> | //           </button>
 | ||||||
|         </div> | //         </div>
 | ||||||
|         <hr /> | //         <hr />
 | ||||||
|         <MonacoEditor | //         <MonacoEditor
 | ||||||
|           height="400" | //           height="400"
 | ||||||
|           language="javascript" | //           language="javascript"
 | ||||||
|           value={code} | //           value={code}
 | ||||||
|           options={options} | //           options={options}
 | ||||||
|           onChange={this.onChange} | //           onChange={this.onChange}
 | ||||||
|           editorDidMount={this.editorDidMount} | //           editorDidMount={this.editorDidMount}
 | ||||||
|           theme={theme} | //           theme={theme}
 | ||||||
|         /> | //         />
 | ||||||
|       </div> | //       </div>
 | ||||||
|     ); | //     );
 | ||||||
|   } | //   }
 | ||||||
| } | // }
 | ||||||
|  | 
 | ||||||
|  | // const ReactMonacoEditor = () => {
 | ||||||
|  | //   return (
 | ||||||
|  | //     <div>
 | ||||||
|  | //       <h2>Monaco Editor Sample (controlled mode)</h2>
 | ||||||
|  | //       <CodeEditor />
 | ||||||
|  | //       <hr />
 | ||||||
|  | //       <h2>Another editor (uncontrolled mode)</h2>
 | ||||||
|  | //       {/* <AnotherEditor /> */}
 | ||||||
|  | //       <hr />
 | ||||||
|  | //       <h2>Another editor (showing a diff)</h2>
 | ||||||
|  | //       {/* <DiffEditor /> */}
 | ||||||
|  | //     </div>
 | ||||||
|  | //   );
 | ||||||
|  | // };
 | ||||||
|  | 
 | ||||||
|  | // export default ReactMonacoEditor;
 | ||||||
|  | 
 | ||||||
|  | import React from "react"; | ||||||
| 
 | 
 | ||||||
| const ReactMonacoEditor = () => { | const ReactMonacoEditor = () => { | ||||||
|   return ( |   return <div>ReactMonacoEditor</div>; | ||||||
|     <div> |  | ||||||
|       <h2>Monaco Editor Sample (controlled mode)</h2> |  | ||||||
|       <CodeEditor /> |  | ||||||
|       <hr /> |  | ||||||
|       <h2>Another editor (uncontrolled mode)</h2> |  | ||||||
|       {/* <AnotherEditor /> */} |  | ||||||
|       <hr /> |  | ||||||
|       <h2>Another editor (showing a diff)</h2> |  | ||||||
|       {/* <DiffEditor /> */} |  | ||||||
|     </div> |  | ||||||
|   ); |  | ||||||
| }; | }; | ||||||
| 
 | 
 | ||||||
| export default ReactMonacoEditor; | export default ReactMonacoEditor; | ||||||
|  | |||||||
					Loading…
					
					
				
		Reference in new issue