feat: make plaintext modal fullscreen (daeuniverse#109)

whuhxb · Jun 24, 2023 · 0bf6eb1 · 0bf6eb1
1 parent 28acd26
commit 0bf6eb1
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 41 deletions.
diff --git a/src/components/PlainTextFormModal.tsx b/src/components/PlainTextFormModal.tsx
@@ -1,4 +1,4 @@
-import { Box, Input, Modal, Stack, TextInput } from '@mantine/core'
+import { Box, Flex, Input, Modal, Stack, TextInput } from '@mantine/core'
 import { UseFormReturnType, useForm, zodResolver } from '@mantine/form'
 import { Editor } from '@monaco-editor/react'
 import { useStore } from '@nanostores/react'
@@ -63,50 +63,60 @@ export const PlainTextFormModal = forwardRef(
     }))
 
     return (
-      <Modal title={title} opened={opened} onClose={onClose}>
-        <form
-          onSubmit={form.onSubmit((values) =>
-            handleSubmit(values).then(() => {
-              onClose()
-              form.reset()
-            })
-          )}
-        >
-          <Stack>
-            <TextInput label={t('name')} withAsterisk {...form.getInputProps('name')} disabled={!!editingID} />
+      <Modal.Root opened={opened} onClose={onClose} fullScreen>
+        <Modal.Overlay />
 
-            <Stack spacing={4}>
-              <Box
-                sx={{
-                  overflow: 'hidden',
-                  borderRadius: 4,
-                }}
+        <Modal.Content>
+          <Flex h="100%" direction="column">
+            <Modal.Header>
+              <Modal.Title>{title}</Modal.Title>
+              <Modal.CloseButton />
+            </Modal.Header>
+
+            <Modal.Body sx={{ flex: 1 }}>
+              <form
+                onSubmit={form.onSubmit((values) =>
+                  handleSubmit(values).then(() => {
+                    onClose()
+                    form.reset()
+                  })
+                )}
               >
-                <Editor
-                  height={320}
-                  theme={colorScheme === 'dark' ? EDITOR_THEME_DARK : EDITOR_THEME_LIGHT}
-                  options={EDITOR_OPTIONS}
-                  language="routingA"
-                  value={form.values.text}
-                  onChange={(value) => form.setFieldValue('text', value || '')}
-                />
-              </Box>
+                <Stack h="100%" pb={100} sx={{ display: 'flex', flexDirection: 'column', position: 'relative' }}>
+                  <TextInput label={t('name')} withAsterisk {...form.getInputProps('name')} disabled={!!editingID} />
+
+                  <Stack sx={{ flex: 1 }} spacing={4}>
+                    <Box h="100%" sx={{ overflow: 'hidden', borderRadius: 4 }}>
+                      <Editor
+                        height="100%"
+                        theme={colorScheme === 'dark' ? EDITOR_THEME_DARK : EDITOR_THEME_LIGHT}
+                        options={EDITOR_OPTIONS}
+                        language="routingA"
+                        value={form.values.text}
+                        onChange={(value) => form.setFieldValue('text', value || '')}
+                      />
+                    </Box>
 
-              {form.errors['text'] && <Input.Error>{form.errors['text']}</Input.Error>}
-            </Stack>
+                    {form.errors['text'] && <Input.Error>{form.errors['text']}</Input.Error>}
+                  </Stack>
 
-            <FormActions
-              reset={() => {
-                if (editingID && origins) {
-                  form.setValues(origins)
-                } else {
-                  form.reset()
-                }
-              }}
-            />
-          </Stack>
-        </form>
-      </Modal>
+                  <Box sx={{ position: 'absolute', insetInline: 0, bottom: 50 }}>
+                    <FormActions
+                      reset={() => {
+                        if (editingID && origins) {
+                          form.setValues(origins)
+                        } else {
+                          form.reset()
+                        }
+                      }}
+                    />
+                  </Box>
+                </Stack>
+              </form>
+            </Modal.Body>
+          </Flex>
+        </Modal.Content>
+      </Modal.Root>
     )
   }
 )
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -200,6 +200,7 @@ export const EDITOR_OPTIONS: EditorProps['options'] = {
   minimap: {
     enabled: false,
   },
+  scrollBeyondLastLine: false,
   renderWhitespace: 'selection',
   cursorBlinking: 'solid',
   formatOnPaste: true,