-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.tsx
78 lines (67 loc) · 2.56 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import * as React from 'react';
import ContextMenu from 'context-menu';
import { render } from 'react-dom';
import * as BrowserFS from 'browserfs'
import {
FileType,
IBasicFileSystemHost,
IFileEntryItem,
} from 'react-aspen'
import { FileTreeX, TreeModelX } from '../src'
import { initFS } from './fs'
import 'context-menu/lib/styles.css'
const Path = BrowserFS.BFSRequire('path');
(async () => {
const MOUNT_POINT = '/app'
// In a real app this could be `fs-extra` as it has `Promise` based API
const fs = await initFS(MOUNT_POINT)
// Setup host
const host: IBasicFileSystemHost = {
pathStyle: 'unix',
getItems: async (path) => {
return await Promise.all(
(await fs.readdir(path))
.map(async (filename) => {
const stat = await fs.stat(Path.join(path, filename))
return {
name: filename,
type: stat.isDirectory() ? FileType.Directory : FileType.File
}
}))
},
}
const treeModelX = new TreeModelX(host, MOUNT_POINT) // second argument can be anything depending on your use case (eg: '/usr' | 'C:\Users\defunkt\Dropbox')
// used by `FileTreeX` for drag and drop, and rename prompts
const mv = async (oldPath: string, newPath: string): Promise<boolean> => {
try {
await fs.mv(oldPath, newPath)
return true
} catch (error) {
return false // or throw error as you see fit
}
}
// used by `FileTreeX` for when user hits `Enter` key in a new file prompt
const create = async (pathToNewObject: string, fileType: FileType): Promise<IFileEntryItem> => {
try {
if(fileType === FileType.File) {
await fs.writeFile(pathToNewObject)
} else {
await fs.mkdir(pathToNewObject)
}
return {
name: pathToNewObject,
type: fileType,
}
} catch (error) {
return null // or throw error as you see fit
}
}
// [optional] ensure root level is loaded (`host.getItems('/appv'`)) (again this is not required, it just prevents FOUC due contents not being ready)
await treeModelX.root.ensureLoaded()
// lift off
render(
<div>
<ContextMenu theme='light' />
<FileTreeX height={700} width={350} model={treeModelX} mv={mv} create={create} />
</div>, document.getElementById('root'));
})()