ywana-core8 0.0.894 → 0.0.896

package/package.json

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

package/src/widgets/explorer/Explorer.js

@@ -7,7 +7,7 @@ import './Explorer.css'
  */
 export const FileExplorer = (props) => {
 
-    const { files = [], onSelectFile, folders = [], onSelectFolder, defaultView = "grid" } = props
+    const { columns, files = [], onSelectFile, folders = [], onSelectFolder, defaultView = "grid", defaultFolder } = props
     const [selectedFolder, setSelectedFolder] = useState()
     const [selectedFile, setSelectedFile] = useState()
     const [search, setSearch] = useState()
@@ -20,6 +20,10 @@ export const FileExplorer = (props) => {
         if (onSelectFolder) onSelectFolder(selectedFolder)
     }, [selectedFolder])
 
+    useEffect(() => {
+        if (defaultFolder) setSelectedFolder(defaultFolder)
+    }, [defaultFolder])
+
     function selectFolder(id) {
         setSelectedFolder(id)
     }
@@ -41,6 +45,7 @@ export const FileExplorer = (props) => {
             files={selectedFiles} selectedFile={selectedFile} onSelectFile={selectFile}
             search={search} onSearch={searchChanged}
             selectedView={defaultView}
+            columns={columns}
         />
     )
 }
@@ -50,7 +55,7 @@ export const FileExplorer = (props) => {
  */
 export const FileExplorerView = (props) => {
 
-    const { folders = [], selectedFolder, onSelectFolder, files = [], selectedFile, onSelectFile, search, onSearch, selectedView = "grid" } = props
+    const { folders = [], selectedFolder, onSelectFolder, columns, files = [], selectedFile, onSelectFile, search, onSearch, selectedView = "grid" } = props
 
     const [view, setView] = useState(selectedView)
 
@@ -78,7 +83,7 @@ export const FileExplorerView = (props) => {
             </menu>
             <main>
                 {view === 'grid' ? <FilesGridView files={files} selected={selectedFile} onSelect={onSelectFile} /> : null}
-                {view === 'list' ? <FilesTableView files={files} selected={selectedFile} onSelect={onSelectFile} /> : null}
+                {view === 'list' ? <FilesTableView columns={columns} files={files} selected={selectedFile} onSelect={onSelectFile} /> : null}
             </main>
         </div>
     )
@@ -172,14 +177,14 @@ export const FileGridItem = (props) => {
 
 export const FilesTableView = (props) => {
 
-    const { files = [], selected, onSelect } = props
+    const { columns, files = [], selected, onSelect } = props
 
     function isSelected(id) {
         return selected === id
     }
 
     const table = {
-        columns: [
+        columns: columns ? columns : [
             { id: "icon", type: "ICON" },
             { id: "title", label: "Title" },
             { id: "subtitle", label: "Subtitle" },

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Button } from '../../html'
-import { FileExplorerView, FileIconsView } from './explorer'
+import { FileExplorer, FileExplorerView, FileIconsView } from './explorer'
 
 
 const thumb1 = "https://findicons.com/files/icons/2813/flat_jewels/256/file.png"
@@ -63,9 +63,9 @@ const folders = [
 ]
 
 
-const FileExplorerTest = (props) => {
+const FileExplorerViewTest = (props) => {
     
-    const [selectedFolder, setSelectedFolder] = useState("10002")
+    const [selectedFolder, setSelectedFolder] = useState()
     const [selectedFile, setSelectedFile] = useState()
     const [search, setSearch] = useState()
     
@@ -95,3 +95,21 @@ const FileExplorerTest = (props) => {
         </div>
     )
 }
+
+
+const FileExplorerTest = (props) => {
+
+    return (
+        <FileExplorer 
+            title="File Explorer Test" 
+            folders={folders} defaultFolder="10004"
+            files={files} 
+            onSelectFile={props.onSelectFile}
+            onSelectFolder={props.onSelectFolder}
+            columns ={[
+                { id: 'icon', label: 'Icon', minWidth: 100 },
+                { id: 'title', label: 'Titlcccce', minWidth: 100 },
+            ]}
+        />
+    )
+}