ywana-core8 0.0.890 → 0.0.892

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.890",
+  "version": "0.0.892",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/widgets/explorer/Explorer.js

@@ -1,17 +1,32 @@
-import React, { useState } from 'react'
-import { TextField, Tree, TreeItem, Icon, DataTable } from '../../html'
+import React, { useEffect, useState } from 'react'
+import { TextField, Tree, TreeItem, Icon, DataTable, TreeNode } from '../../html'
 import './Explorer.css'
 
 /**
  * File Explorer
  */
 export const FileExplorer = (props) => {
-    
-    const { files = [], folders = [] } = props
+
+    const { files = [], onSelectFile, folders = [], onSelectFolder, defaultView = "grid" } = props
     const [selectedFolder, setSelectedFolder] = useState()
     const [selectedFile, setSelectedFile] = useState()
     const [search, setSearch] = useState()
-    
+
+    useEffect(() => {
+        if (files.length > 0) {
+            setSelectedFolder(files[0].folder)
+            setSelectedFile(files[0].id)
+        }
+    }, [files])
+
+    useEffect(() => {
+        if (onSelectFile) onSelectFile(selectedFile)
+    }, [selectedFile])
+
+    useEffect(() => {
+        if (onSelectFolder) onSelectFolder(selectedFolder)
+    }, [selectedFolder])
+
     function selectFolder(id) {
         setSelectedFolder(id)
     }
@@ -28,14 +43,12 @@ export const FileExplorer = (props) => {
     const selectedFiles = filteredFiles.filter(file => file.folder === selectedFolder)
 
     return (
-        <div style={{ padding: "1rem", flex: "1", height: "100%" }}>
-            <FileExplorerView
-                title="File Explorer Test" 
-                folders={folders} selectedFolder={selectedFolder} onSelectFolder={selectFolder} 
-                files={selectedFiles} selectedFile={selectedFile} onSelectFile={selectFile} 
-                search={search} onSearch={searchChanged}
-            />
-        </div>
+        <FileExplorerView
+            folders={folders} selectedFolder={selectedFolder} onSelectFolder={selectFolder}
+            files={selectedFiles} selectedFile={selectedFile} onSelectFile={selectFile}
+            search={search} onSearch={searchChanged}
+            selectedView={defaultView}
+        />
     )
 }
 
@@ -44,9 +57,9 @@ export const FileExplorer = (props) => {
  */
 export const FileExplorerView = (props) => {
 
-    const { folders = [], selectedFolder, onSelectFolder, files = [], selectedFile, onSelectFile, search, onSearch } = props
+    const { folders = [], selectedFolder, onSelectFolder, files = [], selectedFile, onSelectFile, search, onSearch, selectedView = "grid" } = props
 
-    const [view, setView] = useState('list')
+    const [view, setView] = useState(selectedView)
 
     const folder = folders.find(folder => folder.id === selectedFolder)
     const folderTitle = folder ? folder.title : ''
@@ -55,7 +68,6 @@ export const FileExplorerView = (props) => {
         setView(view === 'grid' ? 'list' : 'grid')
     }
 
-
     return (
         <div className="file-explorer">
             <nav>
@@ -63,8 +75,8 @@ export const FileExplorerView = (props) => {
                     <div className="folder-title">{folderTitle}</div>
                 </header>
                 <div className="folder-actions">
-                    <Icon icon='list' clickable action={switchView} checked={view==="list"} />
-                    <Icon icon='grid_view' clickable action={switchView} checked={view==="grid"} />
+                    <Icon icon='list' clickable action={switchView} checked={view === "list"} />
+                    <Icon icon='grid_view' clickable action={switchView} checked={view === "grid"} />
                 </div>
                 <FilesSearchBox search={search} onSearch={onSearch} />
             </nav>
@@ -89,9 +101,19 @@ export const FoldersTreeView = (props) => {
 
     return (
         <Tree>
-            {folders.map(folder => (
-                <TreeItem key={folder.id} icon={folder.icon} label={folder.title} onSelect={() => onSelect(folder.id)} selected={isSelected(folder.id)} />
-            ))}
+            {folders.map(folder => {
+                if (folder.children) {
+                    return (
+                        <TreeNode key={folder.id} label={folder.title}>
+                            <FoldersTreeView folders={folder.children} selected={selected} onSelect={onSelect} />
+                        </TreeNode>
+                    )
+                } else {
+                    return (
+                        <TreeItem key={folder.id} icon={folder.icon} label={folder.title} onSelect={() => onSelect(folder.id)} selected={isSelected(folder.id)} />
+                    )
+                }
+            })}
         </Tree>
     )
 }
@@ -165,7 +187,7 @@ export const FilesTableView = (props) => {
 
     const table = {
         columns: [
-            { id: "icon", type: "ICON"},
+            { id: "icon", type: "ICON" },
             { id: "title", label: "Title" },
             { id: "subtitle", label: "Subtitle" },
         ],

package/src/widgets/explorer/Explorer.test.js

@@ -51,7 +51,11 @@ const files = [
 ]
 
 const folders = [
-    { id: "10001", icon: "folder", title: "Folder 1", subtitle: "1 file" },
+    { id: "10000", icon: "folder", title: "Folder 1", subtitle: "1 file" , children: [
+        { id: "10001", icon: "folder", title: "Folder 2", subtitle: "1 file" },
+        { id: "20003", icon: "folder", title: "Folder 3", subtitle: "1 file" },
+        { id: "20004", icon: "folder", title: "Folder 4", subtitle: "1 file" },
+    ]},
     { id: "10002", icon: "folder", title: "Folder 2", subtitle: "1 file" },
     { id: "10003", icon: "folder", title: "Folder 3", subtitle: "1 file" },
     { id: "10004", icon: "folder", title: "Folder 4", subtitle: "1 file" },