gohil-jay
89 lines
2.0 KiB
React
89 lines
2.0 KiB
React
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; |