ywana-core8 0.0.903 → 0.0.904

package/package.json

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

package/src/widgets/explorer/Explorer.css

@@ -78,8 +78,11 @@
     width: 8rem;
     height: 10rem;
     position: relative;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-areas:
+    "picture picture"
+    "main aside";
+    grid-template-columns: 1fr auto;
 }
 
 .file-item--selected {
@@ -92,6 +95,7 @@
 }
 
 .file-item>picture {
+    grid-area: picture;
     height: 7rem;
     flex: 1;
     padding: 0 1rem;
@@ -104,11 +108,11 @@
 }
 
 .file-item>main {
+    grid-area: main;
     height: 3rem;
-    overflow: hidden;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    padding-left: 1rem;
 }
 
 .file-item-title {
@@ -120,4 +124,12 @@
 .file-item-subtitle {
     font-size: .8rem;
     color: var(--text-color-lighter);
+}
+
+.file-item>aside {
+    grid-area: aside;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 3rem;
 }

package/src/widgets/explorer/Explorer.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { TextField, Tree, TreeItem, Icon, DataTable, TreeNode } from '../../html'
+import { TextField, Tree, TreeItem, Icon, DataTable, TreeNode, Text, MenuIcon, MenuItem } from '../../html'
 import './Explorer.css'
 
 /**
@@ -7,7 +7,7 @@ import './Explorer.css'
  */
 export const FileExplorer = (props) => {
 
-    const { columns, files = [], onSelectFile, folders = [], onSelectFolder, defaultView = "grid", defaultFolder, filterableColumns = false, searchBy=[] } = props
+    const { columns, files = [], onSelectFile, onDeleteFile, folders = [], onSelectFolder, defaultView = "grid", defaultFolder, filterableColumns = false, searchBy=[] } = props
     const [selectedFolder, setSelectedFolder] = useState()
     const [selectedFile, setSelectedFile] = useState()
     const [search, setSearch] = useState()
@@ -47,7 +47,7 @@ export const FileExplorer = (props) => {
     return (
         <FileExplorerView
             folders={folders} selectedFolder={selectedFolder} onSelectFolder={selectFolder}
-            files={selectedFiles} selectedFile={selectedFile} onSelectFile={selectFile}
+            files={selectedFiles} selectedFile={selectedFile} onSelectFile={selectFile} onDeleteFile={onDeleteFile}
             search={search} onSearch={searchChanged}
             selectedView={defaultView}
             columns={columns} filterableColumns={filterableColumns}
@@ -60,12 +60,12 @@ export const FileExplorer = (props) => {
  */
 export const FileExplorerView = (props) => {
 
-    const { folders = [], selectedFolder, onSelectFolder, columns, files = [], selectedFile, onSelectFile, search, onSearch, selectedView = "grid", filterableColumns = false } = props
+    const { folders = [], selectedFolder, onSelectFolder, columns, files = [], selectedFile, onSelectFile, onDeleteFile, search, onSearch, selectedView = "grid", filterableColumns = false } = props
 
     const [view, setView] = useState(selectedView)
 
     const folder = folders.find(folder => folder.id === selectedFolder)
-    const folderTitle = folder ? folder.title : ''
+    const folderTitle = folder ? <Text>folder.title</Text> : ''
 
     function switchView() {
         setView(view === 'grid' ? 'list' : 'grid')
@@ -87,7 +87,7 @@ export const FileExplorerView = (props) => {
                 <FoldersTreeView folders={folders} selected={selectedFolder} onSelect={onSelectFolder} />
             </menu>
             <main>
-                {view === 'grid' ? <FilesGridView files={files} selected={selectedFile} onSelect={onSelectFile} /> : null}
+                {view === 'grid' ? <FilesGridView files={files} selected={selectedFile} onSelect={onSelectFile} onDelete={onDeleteFile}/> : null}
                 {view === 'list' ? <FilesTableView columns={columns} files={files} selected={selectedFile} onSelect={onSelectFile} filterableColumns={filterableColumns} /> : null}
             </main>
         </div>
@@ -141,15 +141,19 @@ export const FilesSearchBox = (props) => {
  * File Icons View
  */
 export const FilesGridView = (props) => {
-    const { files = [], selected, onSelect } = props
+    const { files = [], selected, onSelect, onDelete } = props
 
     function isSelected(id) {
         return selected === id
     }
 
+    const actions = []
+    if (onDelete) actions.push({ icon: "delete", label: "Delete", action: onDelete })
+
+    console.log(actions)
     return (
         <div className="files-grid">
-            {files.map(file => <FileGridItem key={file.id} file={file} onSelect={onSelect} selected={isSelected(file.id)} />)}
+            {files.map(file => <FileGridItem key={file.id} file={file} onSelect={onSelect} selected={isSelected(file.id)} actions={actions}/>)}
         </div>
     )
 }
@@ -159,13 +163,14 @@ export const FilesGridView = (props) => {
  */
 export const FileGridItem = (props) => {
 
-    const { file = {}, selected = false, onSelect } = props
-    const { id, icon, title, subtitle, actions = [], src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkAPtY9GS4QgwAjRUSvLaa6TP4fSlQkVDqEg&usqp=CAU", footer } = file
+    const { file = {}, selected = false, onSelect, actions } = props
+    const { id, icon, title, subtitle, src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkAPtY9GS4QgwAjRUSvLaa6TP4fSlQkVDqEg&usqp=CAU", footer } = file
 
     function select() {
         if (onSelect && !selected) onSelect(id)
     }
 
+
     const style = selected ? 'file-item--selected' : ''
     return (
         <div className={`file-item ${style}`} onClick={select}>
@@ -176,6 +181,16 @@ export const FileGridItem = (props) => {
                 <div className='file-item-title'>{title}</div>
                 <div className='file-item-subtitle'>{subtitle}</div>
             </main>
+            <aside>
+                {actions ? (
+                    <MenuIcon icon="more_vert" size="small"> 
+                        {actions.map(act => {
+                            const { icon, label, action } = act
+                            return <MenuItem key={label} icon={icon} label={label} onSelect={() => action(id)} />
+                        })}
+                    </MenuIcon>
+                ): null }
+            </aside>
         </div>
     )
 }

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

@@ -99,12 +99,17 @@ const FileExplorerViewTest = (props) => {
 
 const FileExplorerTest = (props) => {
 
+    function onDeleteFile(id) {   
+        console.log("delete", id)
+    }
+
     return (
         <FileExplorer 
             title="File Explorer Test" 
             folders={folders} defaultFolder="10004"
             files={files} 
             onSelectFile={props.onSelectFile}
+            onDeleteFile={onDeleteFile}
             onSelectFolder={props.onSelectFolder}
             columns ={[
                 { id: 'icon', label: 'Icon', minWidth: 100 },