ywana-core8 0.0.889 → 0.0.891
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +38 -28
- package/dist/index.cjs.map +1 -1
- package/dist/index.modern.js +38 -28
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +38 -28
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/widgets/explorer/Explorer.js +28 -18
- package/src/widgets/explorer/Explorer.test.js +5 -1
package/package.json
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import React, { useState } from 'react'
|
|
2
|
-
import { TextField, Tree, TreeItem, Icon, DataTable } from '../../html'
|
|
2
|
+
import { TextField, Tree, TreeItem, Icon, DataTable, TreeNode } from '../../html'
|
|
3
3
|
import './Explorer.css'
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* File Explorer
|
|
7
7
|
*/
|
|
8
8
|
export const FileExplorer = (props) => {
|
|
9
|
-
|
|
10
|
-
const [
|
|
9
|
+
|
|
10
|
+
const { files = [], folders = [] } = props
|
|
11
|
+
const [selectedFolder, setSelectedFolder] = useState()
|
|
11
12
|
const [selectedFile, setSelectedFile] = useState()
|
|
12
13
|
const [search, setSearch] = useState()
|
|
13
|
-
|
|
14
|
+
|
|
14
15
|
function selectFolder(id) {
|
|
15
16
|
setSelectedFolder(id)
|
|
16
17
|
}
|
|
@@ -27,14 +28,12 @@ export const FileExplorer = (props) => {
|
|
|
27
28
|
const selectedFiles = filteredFiles.filter(file => file.folder === selectedFolder)
|
|
28
29
|
|
|
29
30
|
return (
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
/>
|
|
37
|
-
</div>
|
|
31
|
+
<FileExplorerView
|
|
32
|
+
title="File Explorer Test"
|
|
33
|
+
folders={folders} selectedFolder={selectedFolder} onSelectFolder={selectFolder}
|
|
34
|
+
files={selectedFiles} selectedFile={selectedFile} onSelectFile={selectFile}
|
|
35
|
+
search={search} onSearch={searchChanged}
|
|
36
|
+
/>
|
|
38
37
|
)
|
|
39
38
|
}
|
|
40
39
|
|
|
@@ -62,8 +61,8 @@ export const FileExplorerView = (props) => {
|
|
|
62
61
|
<div className="folder-title">{folderTitle}</div>
|
|
63
62
|
</header>
|
|
64
63
|
<div className="folder-actions">
|
|
65
|
-
<Icon icon='list' clickable action={switchView} checked={view==="list"} />
|
|
66
|
-
<Icon icon='grid_view' clickable action={switchView} checked={view==="grid"} />
|
|
64
|
+
<Icon icon='list' clickable action={switchView} checked={view === "list"} />
|
|
65
|
+
<Icon icon='grid_view' clickable action={switchView} checked={view === "grid"} />
|
|
67
66
|
</div>
|
|
68
67
|
<FilesSearchBox search={search} onSearch={onSearch} />
|
|
69
68
|
</nav>
|
|
@@ -86,11 +85,22 @@ export const FoldersTreeView = (props) => {
|
|
|
86
85
|
return selected === id
|
|
87
86
|
}
|
|
88
87
|
|
|
88
|
+
console.log("FoldersTreeView", folders)
|
|
89
89
|
return (
|
|
90
90
|
<Tree>
|
|
91
|
-
{folders.map(folder =>
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
{folders.map(folder => {
|
|
92
|
+
if (folder.children) {
|
|
93
|
+
return (
|
|
94
|
+
<TreeNode key={folder.id} label={folder.title}>
|
|
95
|
+
<FoldersTreeView folders={folder.children} selected={selected} onSelect={onSelect} />
|
|
96
|
+
</TreeNode>
|
|
97
|
+
)
|
|
98
|
+
} else {
|
|
99
|
+
return (
|
|
100
|
+
<TreeItem key={folder.id} icon={folder.icon} label={folder.title} onSelect={() => onSelect(folder.id)} selected={isSelected(folder.id)} />
|
|
101
|
+
)
|
|
102
|
+
}
|
|
103
|
+
})}
|
|
94
104
|
</Tree>
|
|
95
105
|
)
|
|
96
106
|
}
|
|
@@ -164,7 +174,7 @@ export const FilesTableView = (props) => {
|
|
|
164
174
|
|
|
165
175
|
const table = {
|
|
166
176
|
columns: [
|
|
167
|
-
{ id: "icon", type: "ICON"},
|
|
177
|
+
{ id: "icon", type: "ICON" },
|
|
168
178
|
{ id: "title", label: "Title" },
|
|
169
179
|
{ id: "subtitle", label: "Subtitle" },
|
|
170
180
|
],
|
|
@@ -51,7 +51,11 @@ const files = [
|
|
|
51
51
|
]
|
|
52
52
|
|
|
53
53
|
const folders = [
|
|
54
|
-
{ id: "
|
|
54
|
+
{ id: "10000", icon: "folder", title: "Folder 1", subtitle: "1 file" , children: [
|
|
55
|
+
{ id: "10001", icon: "folder", title: "Folder 2", subtitle: "1 file" },
|
|
56
|
+
{ id: "20003", icon: "folder", title: "Folder 3", subtitle: "1 file" },
|
|
57
|
+
{ id: "20004", icon: "folder", title: "Folder 4", subtitle: "1 file" },
|
|
58
|
+
]},
|
|
55
59
|
{ id: "10002", icon: "folder", title: "Folder 2", subtitle: "1 file" },
|
|
56
60
|
{ id: "10003", icon: "folder", title: "Folder 3", subtitle: "1 file" },
|
|
57
61
|
{ id: "10004", icon: "folder", title: "Folder 4", subtitle: "1 file" },
|