ywana-core8 0.0.890 → 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 +23 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.modern.js +23 -17
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +23 -17
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/widgets/explorer/Explorer.js +27 -18
- package/src/widgets/explorer/Explorer.test.js +5 -1
package/package.json
CHANGED
|
@@ -1,17 +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
11
|
const [selectedFolder, setSelectedFolder] = useState()
|
|
12
12
|
const [selectedFile, setSelectedFile] = useState()
|
|
13
13
|
const [search, setSearch] = useState()
|
|
14
|
-
|
|
14
|
+
|
|
15
15
|
function selectFolder(id) {
|
|
16
16
|
setSelectedFolder(id)
|
|
17
17
|
}
|
|
@@ -28,14 +28,12 @@ export const FileExplorer = (props) => {
|
|
|
28
28
|
const selectedFiles = filteredFiles.filter(file => file.folder === selectedFolder)
|
|
29
29
|
|
|
30
30
|
return (
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
/>
|
|
38
|
-
</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
|
+
/>
|
|
39
37
|
)
|
|
40
38
|
}
|
|
41
39
|
|
|
@@ -63,8 +61,8 @@ export const FileExplorerView = (props) => {
|
|
|
63
61
|
<div className="folder-title">{folderTitle}</div>
|
|
64
62
|
</header>
|
|
65
63
|
<div className="folder-actions">
|
|
66
|
-
<Icon icon='list' clickable action={switchView} checked={view==="list"} />
|
|
67
|
-
<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"} />
|
|
68
66
|
</div>
|
|
69
67
|
<FilesSearchBox search={search} onSearch={onSearch} />
|
|
70
68
|
</nav>
|
|
@@ -87,11 +85,22 @@ export const FoldersTreeView = (props) => {
|
|
|
87
85
|
return selected === id
|
|
88
86
|
}
|
|
89
87
|
|
|
88
|
+
console.log("FoldersTreeView", folders)
|
|
90
89
|
return (
|
|
91
90
|
<Tree>
|
|
92
|
-
{folders.map(folder =>
|
|
93
|
-
|
|
94
|
-
|
|
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
|
+
})}
|
|
95
104
|
</Tree>
|
|
96
105
|
)
|
|
97
106
|
}
|
|
@@ -165,7 +174,7 @@ export const FilesTableView = (props) => {
|
|
|
165
174
|
|
|
166
175
|
const table = {
|
|
167
176
|
columns: [
|
|
168
|
-
{ id: "icon", type: "ICON"},
|
|
177
|
+
{ id: "icon", type: "ICON" },
|
|
169
178
|
{ id: "title", label: "Title" },
|
|
170
179
|
{ id: "subtitle", label: "Subtitle" },
|
|
171
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" },
|