Adding separate dialog so that we can handle state with useState

packages/editor-sample/src/App/TemplatePanel/ImportJson/ImportJsonDialog.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
+
+import { resetDocument } from '../../../documents/editor/EditorContext';
+
+type ImportJsonDialogProps = {
+ onClose: () => void;
+};
+export default function ImportJsonDialog({ onClose }: ImportJsonDialogProps) {
+ const [value, setValue] = useState('');
+ const [error, setError] = useState<string | null>(null);
+
+ const handleChange: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> = (ev) => {
+ const v = ev.currentTarget.value;
+ setValue(v);
+ try {
+ JSON.parse(v);
+ setError(null);
+ } catch {
+ setError('There was a parsing error');
+ }
+ };
+
+ return (
+ <Dialog open onClose={onClose}>
+ <DialogTitle>Import JSON</DialogTitle>
+ <form
+ onSubmit={(ev) => {
+ ev.preventDefault();
+ try {
+ const doc = JSON.parse(value);
+ resetDocument(doc);
+ onClose();
+ } catch {}
+ }}
+ >
+ <DialogContent>
+ <Input
+ error={error !== null}
+ value={value}
+ onChange={handleChange}
+ type="text"
+ fullWidth
+ rows={10}
+ multiline
+ />
+ </DialogContent>
+ <DialogActions>
+ <Button type="button" onClick={onClose}>
+ Cancel
+ </Button>
+ <Button type="submit" disabled={error !== null}>
+ Save
+ </Button>
+ </DialogActions>
+ </form>
+ </Dialog>
+ );
+}

packages/editor-sample/src/App/TemplatePanel/ImportJson/index.tsx

@@ -1,41 +1,21 @@
 import React, { useState } from 'react';
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Input } from '@mui/material';
+import { Button } from '@mui/material';
 
-import { resetDocument } from '../../../documents/editor/EditorContext';
+import ImportJsonDialog from './ImportJsonDialog';
 
 export default function ImportJson() {
  const [open, setOpen] = useState(false);
 
+ let dialog = null;
+ if (open) {
+ dialog = <ImportJsonDialog onClose={() => setOpen(false)} />;
+ }
+
  return (
  <>
  <Button onClick={() => setOpen(true)}>Import JSON</Button>
- <Dialog open={open} onClose={() => setOpen(false)}>
- <DialogTitle>Import JSON</DialogTitle>
- <form
- onSubmit={(ev) => {
- ev.preventDefault();
- const data = new FormData(ev.currentTarget);
- const json = data.get('json');
- if (typeof json !== 'string') {
- return;
- }
- try {
- const doc = JSON.parse(json);
- resetDocument(doc);
- setOpen(false);
- } catch {}
- }}
- >
- <DialogContent>
- <Input name="json" type="text" fullWidth rows={10} multiline />
- </DialogContent>
- <DialogActions>
- <Button type="button">Cancel</Button>
- <Button type="submit">Save</Button>
- </DialogActions>
- </form>
- </Dialog>
+ {dialog}
  </>
  );
 }