started splitting of into components
This commit is contained in:
Chris Kruining
parent
c31074de4b
commit
17e49c23d8
8 changed files with 686 additions and 158 deletions
|
|
@ -224,10 +224,6 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
|
|||
return existingFiles.concat(newFiles);
|
||||
});
|
||||
|
||||
// createEffect(() => {
|
||||
// console.log(mutatedData());
|
||||
// });
|
||||
|
||||
createEffect(() => {
|
||||
const directory = props.root;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
section.index {
|
||||
display: grid;
|
||||
grid: 100% / auto minmax(0, 1fr);
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
& > aside {
|
||||
overflow: clip auto;
|
||||
resize: horizontal;
|
||||
|
||||
min-inline-size: 300px;
|
||||
max-inline-size: 75vw;
|
||||
block-size: 100%;
|
||||
padding: 1em;
|
||||
padding-block-start: 1.5em;
|
||||
padding-inline-end: 1em;
|
||||
}
|
||||
|
||||
& > section {
|
||||
display: grid;
|
||||
grid: 100% / 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
padding-inline: 1em;
|
||||
}
|
||||
}
|
||||
26
src/routes/(editor)/experimental.module.css
Normal file
26
src/routes/(editor)/experimental.module.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
.root {
|
||||
display: grid;
|
||||
grid: 100% / auto minmax(0, 1fr);
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
& .sidebar {
|
||||
z-index: 1;
|
||||
padding: var(--padding-xl);
|
||||
background-color: var(--surface-300);
|
||||
|
||||
& > ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .content {
|
||||
background-color: var(--surface-500);
|
||||
border-top-left-radius: var(--radii-xl);
|
||||
|
||||
& > header {
|
||||
padding-inline-start: var(--padding-l);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,132 +1,35 @@
|
|||
import { Component, createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
|
||||
import { useFiles } from "~/features/file";
|
||||
import { Menu } from "~/features/menu";
|
||||
import { createCommand, Modifier } from "~/features/command";
|
||||
import { emptyFolder, FolderEntry, Tree, walk } from "~/components/filetree";
|
||||
import { createStore, produce } from "solid-js/store";
|
||||
import { Tab, Tabs } from "~/components/tabs";
|
||||
import "./experimental.css";
|
||||
import { selectable, SelectionProvider } from "~/features/selectable";
|
||||
|
||||
interface ExperimentalState {
|
||||
files: File[];
|
||||
numberOfFiles: number;
|
||||
}
|
||||
import { Table } from "~/components/table";
|
||||
import css from "./experimental.module.css";
|
||||
import { Sidebar } from "~/components/sidebar";
|
||||
|
||||
export default function Experimental() {
|
||||
const files = useFiles();
|
||||
const [tree, setTree] = createSignal<FolderEntry>(emptyFolder);
|
||||
const [state, setState] = createStore<ExperimentalState>({
|
||||
files: [],
|
||||
numberOfFiles: 0,
|
||||
});
|
||||
const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
|
||||
const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
|
||||
const [root, { mutate, refetch }] = createResource(() => files?.get('root'));
|
||||
const rows = [
|
||||
{ key: 'key1.a.a', value: 10 },
|
||||
{ key: 'key1.a.b', value: 20 },
|
||||
{ key: 'key1.a.c', value: 30 },
|
||||
{ key: 'key1.b.a', value: 40 },
|
||||
{ key: 'key1.b.b', value: 50 },
|
||||
{ key: 'key1.b.c', value: 60 },
|
||||
{ key: 'key1.c.a', value: 70 },
|
||||
{ key: 'key1.c.b', value: 80 },
|
||||
{ key: 'key1.c.c', value: 90 },
|
||||
|
||||
createEffect(() => {
|
||||
setState('numberOfFiles', state.files.length);
|
||||
});
|
||||
{ key: 'key2.a.a', value: 10 },
|
||||
{ key: 'key2.a.b', value: 20 },
|
||||
{ key: 'key2.a.c', value: 30 },
|
||||
{ key: 'key2.b.a', value: 40 },
|
||||
{ key: 'key2.b.b', value: 50 },
|
||||
{ key: 'key2.b.c', value: 60 },
|
||||
{ key: 'key2.c.a', value: 70 },
|
||||
{ key: 'key2.c.b', value: 80 },
|
||||
{ key: 'key2.c.c', value: 90 },
|
||||
];
|
||||
|
||||
// Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
|
||||
onMount(() => {
|
||||
refetch();
|
||||
});
|
||||
return <div class={css.root}>
|
||||
<Sidebar as="aside" label={'Filters'} class={css.sidebar} />
|
||||
|
||||
createEffect(async () => {
|
||||
const directory = root();
|
||||
|
||||
if (root.state === 'ready' && directory?.kind === 'directory') {
|
||||
const entries = await Array.fromAsync(walk(directory, filters()));
|
||||
|
||||
setTree({ name: '', kind: 'folder', entries });
|
||||
}
|
||||
});
|
||||
|
||||
const open = async (file: File) => {
|
||||
setState('files', produce(files => {
|
||||
files.push(file);
|
||||
}));
|
||||
};
|
||||
|
||||
const commands = {
|
||||
open: createCommand('open', async () => {
|
||||
const [fileHandle] = await window.showOpenFilePicker({
|
||||
types: [
|
||||
{
|
||||
description: "JSON File(s)",
|
||||
accept: {
|
||||
"application/json": [".json", ".jsonp", ".jsonc"],
|
||||
},
|
||||
}
|
||||
],
|
||||
excludeAcceptAllOption: true,
|
||||
multiple: true,
|
||||
});
|
||||
const file = await fileHandle.getFile();
|
||||
const text = await file.text();
|
||||
|
||||
console.log(fileHandle, file, text);
|
||||
}, { key: 'o', modifier: Modifier.Control }),
|
||||
openFolder: createCommand('openFolder', async () => {
|
||||
const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
|
||||
const entries = await Array.fromAsync(walk(directory, filters()));
|
||||
|
||||
files.set('root', directory);
|
||||
mutate(directory);
|
||||
|
||||
setTree({ name: '', kind: 'folder', entries });
|
||||
}),
|
||||
save: createCommand('save', () => {
|
||||
console.log('save');
|
||||
}, { key: 's', modifier: Modifier.Control }),
|
||||
saveAll: createCommand('save all', () => {
|
||||
console.log('save all');
|
||||
}, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
|
||||
} as const;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu.Root>
|
||||
<Menu.Item label="file">
|
||||
<Menu.Item label="open" command={commands.open} />
|
||||
|
||||
<Menu.Item label="open folder" command={commands.openFolder} />
|
||||
|
||||
<Menu.Item label="save" command={commands.save} />
|
||||
|
||||
<Menu.Item label="save all" command={commands.saveAll} />
|
||||
</Menu.Item>
|
||||
</Menu.Root>
|
||||
|
||||
<section class="index">
|
||||
<aside>
|
||||
<label><input type="checkbox" on:input={() => setShowHiddenFiles(v => !v)} />Show hidden files</label>
|
||||
<Tree entries={tree().entries} open={open}>{
|
||||
file => file().name
|
||||
}</Tree>
|
||||
</aside>
|
||||
|
||||
<section>
|
||||
<Tabs>
|
||||
<For each={state.files}>{
|
||||
file => <Tab label={file.name}>
|
||||
<Content file={file} />
|
||||
</Tab>
|
||||
}</For>
|
||||
</Tabs>
|
||||
</section>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const Content: Component<{ file: File }> = (props) => {
|
||||
const [content] = createResource(async () => {
|
||||
return await props.file.text();
|
||||
});
|
||||
|
||||
return <Suspense fallback={'loading'}>
|
||||
<pre>{content()}</pre>
|
||||
</Suspense>
|
||||
};
|
||||
<div class={css.content}>
|
||||
<Table rows={rows} />
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue