Fix up file manager
This commit is contained in:
parent
7e8a5f1271
commit
43fbefbdb6
11 changed files with 108 additions and 104 deletions
|
@ -1,9 +1,8 @@
|
|||
import React, { useCallback, useEffect, useState, lazy } from 'react';
|
||||
import useRouter from 'use-react-router';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import ace, { Editor } from 'brace';
|
||||
import getFileContents from '@/api/server/files/getFileContents';
|
||||
import styled from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
import Select from '@/components/elements/Select';
|
||||
|
||||
// @ts-ignore
|
||||
require('brace/ext/modelist');
|
||||
|
@ -11,7 +10,7 @@ require('ayu-ace/mirage');
|
|||
|
||||
const EditorContainer = styled.div`
|
||||
min-height: 16rem;
|
||||
height: calc(100vh - 16rem);
|
||||
height: calc(100vh - 20rem);
|
||||
${tw`relative`};
|
||||
|
||||
#editor {
|
||||
|
@ -20,9 +19,7 @@ const EditorContainer = styled.div`
|
|||
`;
|
||||
|
||||
const modes: { [k: string]: string } = {
|
||||
// eslint-disable-next-line @typescript-eslint/camelcase
|
||||
assembly_x86: 'Assembly (x86)',
|
||||
// eslint-disable-next-line @typescript-eslint/camelcase
|
||||
c_cpp: 'C++',
|
||||
coffee: 'Coffeescript',
|
||||
css: 'CSS',
|
||||
|
@ -40,7 +37,6 @@ const modes: { [k: string]: string } = {
|
|||
properties: 'Properties',
|
||||
python: 'Python',
|
||||
ruby: 'Ruby',
|
||||
// eslint-disable-next-line @typescript-eslint/camelcase
|
||||
plain_text: 'Plaintext',
|
||||
toml: 'TOML',
|
||||
typescript: 'Typescript',
|
||||
|
@ -70,7 +66,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
|
|||
|
||||
useEffect(() => {
|
||||
editor && editor.session.setMode(mode);
|
||||
}, [editor, mode]);
|
||||
}, [ editor, mode ]);
|
||||
|
||||
useEffect(() => {
|
||||
editor && editor.session.setValue(initialContent || '');
|
||||
|
@ -113,10 +109,9 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
|
|||
return (
|
||||
<EditorContainer style={style}>
|
||||
<div id={'editor'} ref={ref}/>
|
||||
<div className={'absolute right-0 bottom-0 z-50'}>
|
||||
<div className={'m-3 rounded bg-neutral-900 border border-black'}>
|
||||
<select
|
||||
className={'input-dark'}
|
||||
<div css={tw`absolute right-0 bottom-0 z-50`}>
|
||||
<div css={tw`m-3 rounded bg-neutral-900 border border-black`}>
|
||||
<Select
|
||||
value={mode.split('/').pop()}
|
||||
onChange={e => setMode(`ace/mode/${e.currentTarget.value}`)}
|
||||
>
|
||||
|
@ -125,7 +120,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
|
|||
<option key={key} value={key}>{modes[key]}</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</EditorContainer>
|
||||
|
|
|
@ -69,8 +69,7 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
|
|||
e.stopPropagation();
|
||||
setVisible(false);
|
||||
}}
|
||||
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500`}
|
||||
style={{ minWidth: '12rem' }}
|
||||
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
|
Reference in a new issue