Added popup code editor functionality [1]

2021-10-12 16:56:46 +05:30
parent 09d02c7f18
commit 2cce2bffd8
4 changed files with 19640 additions and 100 deletions
@@ -0,0 +1,89 @@
+import React, {useState, useEffect, useLayoutEffect} from 'react';
+import {Dialog, Modal, DialogTitle, DialogContent} from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
+
+import CodeMirror from '@uiw/react-codemirror';
+import 'codemirror/keymap/sublime';
+import 'codemirror/theme/gruvbox-dark.css';
+
+const Textfield = (props) => {
+
+    const {expansionModalOpen, setExpansionModalOpen} = props
+    const {codedata, setcodedata} = props
+	const [localcodedata, setlocalcodedata] = React.useState("print('Hello')");
+    // const {codelang, setcodelang} = props
+    const theme = useTheme();
+
+	return (
+		<Dialog modal 
+			open={expansionModalOpen} 
+			onClose={() => {
+				setExpansionModalOpen(false)
+			}}
+			PaperProps={{
+				style: {
+					backgroundColor: theme.palette.surfaceColor,
+					color: "white",
+					minWidth: 600,
+					padding: 50, 
+				},
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+					justifyContent: 'right',
+				}}
+			>
+				<button
+					style={{
+						color: "white",
+						background: "#27292d",
+						border: "2px solid white",
+						borderRadius: '50%',
+						fontSize: 15,
+						width: 40,
+						height: 40,
+						cursor: "pointer"
+					}}
+					onClick={() => {
+						setExpansionModalOpen(false)
+					}}
+				>
+					╳
+				</button>
+			</div>
+			<DialogTitle><span style={{color: "white"}}>Code Editor</span></DialogTitle>
+			<CodeMirror
+				value = {codedata}
+				height="200px"
+				onChange={(value) => {
+					// setcodedata(value.getValue())
+                    setlocalcodedata(value.getValue())
+				}}
+				options={{
+					theme: 'gruvbox-dark',
+					keyMap: 'sublime',
+					mode: 'python',
+					// mode: {codelang},
+				}}
+			/>
+			<button
+				style={{
+					color: "white",
+					background: "#f85a3e",
+					border: "none",
+					height: 35,
+					cursor: "pointer"
+				}}
+				onClick={() => {
+                    setcodedata(localcodedata)
+					setExpansionModalOpen(false)
+				}}
+			>
+				DONE
+			</button>
+		</Dialog>)
+}
+
+export default Textfield;