ywana-core8 0.0.887 → 0.0.888

package/package.json

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

package/src/site/site.css

@@ -78,6 +78,14 @@
     align-items: center;
 }
 
+.site6>menu.min .site-menu-item {
+    justify-content: center;
+}
+
+.site6>menu.min .site-menu-item i {
+    width: 4.2rem !important;
+}
+
 .site6>menu.max>main>.site-menu-item:not(.selected):hover {
     color: var(--text-color);
     background-color: rgba(200,200,200,.2);

package/src/site/site.js

@@ -228,7 +228,7 @@ const SiteMenu = ({ iconSrc, title, children, min }) => {
                             const titleTxt = context.translate(title)
                             return (
                                 <div className={`site-menu-item ${styleItem}`} key={id} onClick={() => goto(id)}>
-                                    <Tooltip text={title} top=".5rem" left="2rem">
+                                    <Tooltip text={title} top=".5rem" left="4.5rem">
                                         <Icon key={id} icon={icon} clickable action={() => goto(id)} />
                                     </Tooltip>
                                     {sideNav === 'max' ? <label>{titleTxt}</label> : null}

package/src/widgets/explorer/Explorer.css

@@ -2,31 +2,30 @@
     width: 100%;
     height: 100%;
     display: grid;
-    grid-template-areas: 
-        "header header"
-        "main aside";
-    grid-template-columns: 1fr auto;
+    grid-template-areas:
+        "menu nav"
+        "menu main";
+    grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
     padding: 2px;
 }
 
-.file-explorer>header {
-    grid-area: header;
-}
-
 .file-explorer>nav {
     grid-area: nav;
+    display: flex;
 }
 
 .file-explorer>menu {
     grid-area: menu;
     padding: 0;
+    margin: 0;
+    width: 20rem;
+    background-color: var(--background-color);
 }
 
 .file-explorer>main {
     grid-area: main;
-    border-left: solid 1px var(--divider-color);
-    display: flex;
+    display: flex-wrap;
     flex-direction: column;
     overflow: hidden;
 }
@@ -39,7 +38,34 @@
     grid-area: footer;
 }
 
-.file-view {
+.file-searchbox {
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1rem;
+}
+
+.folder-header {
+    flex: 1;
+    display: flex;
+    height: 3rem;
+    align-items: center;
+    padding: 0 1rem;
+}
+
+.folder-title {
+    font-size: 1.1rem;
+    font-weight: 500;
+}
+
+.folder-actions {
+    display: flex;
+    gap: .5rem;
+    color: var(--text-color-lighter);
+}
+
+.files-grid {
     flex: 1;
     overflow: auto;
     display: flex;
@@ -47,66 +73,51 @@
     gap: .5rem;
 }
 
-.file-icon {
+.file-item {
     margin: .5rem;
-    border: solid 1px var(--divider-color);
     width: 8rem;
-    min-height: 10rem;
+    height: 10rem;
     position: relative;
     display: flex;
     flex-direction: column;
 }
 
-.file-icon--selected {
-    background-color: var(--divider-color) !important;
+.file-item--selected {
     box-shadow: var(--shadow1);
 }
 
-.file-icon:hover {
+.file-item:hover {
     cursor: pointer;
-    box-shadow: var(--shadow1);
-}
-
-.file-icon>header {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 2rem;
-    display: flex;
-    justify-content: space-between;
-    color: var(--text-color-lighter);
+    border: dotted 1px var(--divider-color);
 }
 
-.file-icon>picture {
+.file-item>picture {
+    height: 7rem;
     flex: 1;
     padding: 0 1rem;
 }
 
-.file-icon>picture>img {
+.file-item>picture>img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }
 
-.file-icon>main {
-    height: 2rem;
+.file-item>main {
+    height: 3rem;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-.file-icon>main>label {
-    font-size: .8rem;
+.file-item-title {
+    font-size: 1rem;
     color: var(--text-color);
+    font-weight: 500;
 }
 
-.file-icon>footer {
-    width: 100%;
-    flex: 1;
-    overflow: hidden;
-    border-top: solid 1px var(--divider-color);
-    display: flex;
-    align-items: center;
+.file-item-subtitle {
+    font-size: .8rem;
+    color: var(--text-color-lighter);
 }

package/src/widgets/explorer/Explorer.js

@@ -1,26 +1,112 @@
-import React, {useState} from 'react'
-import { Icon } from '../../html'
+import React, { useState } from 'react'
+import { TextField, Tree, TreeItem, Icon, DataTable } from '../../html'
 import './Explorer.css'
 
 /**
  * File Explorer
  */
-export const FileExplorer = (props) => {
-
-    const { title, files = [] } = props
+const FileExplorer = (props) => {
+    
+    const [selectedFolder, setSelectedFolder] = useState("10002")
+    const [selectedFile, setSelectedFile] = useState()
+    const [search, setSearch] = useState()
     
+    function selectFolder(id) {
+        setSelectedFolder(id)
+    }
+
+    function selectFile(id) {
+        setSelectedFile(id)
+    }
+
+    function searchChanged(value) {
+        setSearch(value)
+    }
+
+    const filteredFiles = search ? files.filter(file => file.title.toLowerCase().includes(search.toLowerCase())) : files
+    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>
+    )
+}
+
+/**
+ * File Explorer View
+ */
+export const FileExplorerView = (props) => {
+
+    const { folders = [], selectedFolder, onSelectFolder, files = [], selectedFile, onSelectFile, search, onSearch } = props
+
+    const [view, setView] = useState('list')
+
+    const folder = folders.find(folder => folder.id === selectedFolder)
+    const folderTitle = folder ? folder.title : ''
+
+    function switchView() {
+        setView(view === 'grid' ? 'list' : 'grid')
+    }
+
+
     return (
         <div className="file-explorer">
-            <header>
-                {title}
-                <nav>
-                    <Icon icon="info" />
-                </nav>
-            </header>
+            <nav>
+                <header className='folder-header'>
+                    <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"} />
+                </div>
+                <FilesSearchBox search={search} onSearch={onSearch} />
+            </nav>
+            <menu>
+                <FoldersTreeView folders={folders} selected={selectedFolder} onSelect={onSelectFolder} />
+            </menu>
             <main>
-                <FilesGrid files={files} />
+                {view === 'grid' ? <FilesGridView files={files} selected={selectedFile} onSelect={onSelectFile} /> : null}
+                {view === 'list' ? <FilesTableView files={files} selected={selectedFile} onSelect={onSelectFile} /> : null}
             </main>
-            <aside></aside>
+        </div>
+    )
+}
+
+export const FoldersTreeView = (props) => {
+
+    const { folders = [], selected, onSelect } = props
+
+    function isSelected(id) {
+        return selected === id
+    }
+
+    return (
+        <Tree>
+            {folders.map(folder => (
+                <TreeItem key={folder.id} icon={folder.icon} label={folder.title} onSelect={() => onSelect(folder.id)} selected={isSelected(folder.id)} />
+            ))}
+        </Tree>
+    )
+}
+
+
+export const FilesSearchBox = (props) => {
+
+    const { search, onSearch } = props
+
+    function searchChanged(id, value) {
+        onSearch(value)
+    }
+
+    return (
+        <div className="file-searchbox">
+            <TextField placeholder="Search..." onChange={searchChanged} outlined />
         </div>
     )
 }
@@ -28,49 +114,66 @@ export const FileExplorer = (props) => {
 /**
  * File Icons View
  */
-export const FilesGrid = (props) => {
-    const { files = [], onSelect } = props
-    const [selected, setSelected] = useState()
-
-    function select(id) {
-        setSelected(id)
-        if (onSelect) onSelect(id)
-    }
+export const FilesGridView = (props) => {
+    const { files = [], selected, onSelect } = props
 
     function isSelected(id) {
         return selected === id
     }
 
     return (
-        <div className="file-view file-view--icons">
-            {files.map(file => <FileIcon file={file} onSelect={select} selected={isSelected(file.id)} />)}
+        <div className="files-grid">
+            {files.map(file => <FileGridItem key={file.id} file={file} onSelect={onSelect} selected={isSelected(file.id)} />)}
         </div>
     )
 }
 
 /**
- * File Icon
+ * File Grid Item
  */
-const FileIcon = (props) => {
+const FileGridItem = (props) => {
 
     const { file = {}, selected = false, onSelect } = props
-    const { id, icon, label, actions = [], src = "https://findicons.com/files/icons/2813/flat_jewels/256/file.png", footer } = file
+    const { id, icon, title, subtitle, actions = [], 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-icon--selected'  :''
+    const style = selected ? 'file-item--selected' : ''
     return (
-        <div className={`file-icon ${style}`} onClick={select}>
+        <div className={`file-item ${style}`} onClick={select}>
             <picture>
                 <img src={src}></img>
             </picture>
             <main>
-                {icon? <Icon size="small" icon={icon} /> : null }
-                <label>{label}</label>
+                <div className='file-item-title'>{title}</div>
+                <div className='file-item-subtitle'>{subtitle}</div>
             </main>
-            { footer ? <footer>{footer}</footer> : null }
         </div>
     )
-}
+}
+
+const FilesTableView = (props) => {
+
+    const { files = [], selected, onSelect } = props
+
+    function isSelected(id) {
+        return selected === id
+    }
+
+    const table = {
+        columns: [
+            { id: "icon", type: "ICON"},
+            { id: "title", label: "Title" },
+            { id: "subtitle", label: "Subtitle" },
+        ],
+        rows: files
+    }
+
+    return (
+        <div className="files-table">
+            <DataTable {...table} />
+        </div>
+    )
+}

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

@@ -1,26 +1,93 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Button } from '../../html'
-import { FileExplorer, FileIconsView } from './explorer'
+import { FileExplorerView, FileIconsView } from './explorer'
+
 
 const thumb1 = "https://findicons.com/files/icons/2813/flat_jewels/256/file.png"
 
 const files = [
-    { id: "0001", icon: "star", label: "File 1", src:thumb1, actions: [ { icon:"info", label:"Action1", execute: () => alert("Action1")} ], footer: <span>ok</span> },
-    { id: "0002", icon: "star", label: "File 2", src:thumb1 },
-    { id: "0003", icon: "star", label: "File 3", src:thumb1 },
-    { id: "0004", icon: "star", label: "File 4", src:thumb1 },
-    { id: "0005", icon: "star", label: "File 5", src:thumb1 },
-    { id: "0006", icon: "star", label: "File 6", src:thumb1 },
-    { id: "0007", icon: "star", label: "File 7", src:thumb1 },
-    { id: "0008", icon: "star", label: "File 8", src:thumb1 },
-    { id: "0009", icon: "star", label: "File 9", src:thumb1 },
-    { id: "0010", icon: "star", label: "File 10", src:thumb1 },
+    { folder: "10001", id: "0001", icon: "description", title: "File 1", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0002", icon: "description", title: "File 2", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0003", icon: "description", title: "File 3", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0004", icon: "description", title: "File 4", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0005", icon: "description", title: "File 5", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0006", icon: "description", title: "File 6", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0007", icon: "description", title: "File 7", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0008", icon: "description", title: "File 8", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0009", icon: "description", title: "File 9", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0010", icon: "description", title: "File 10", subtitle: "16 kb", src:thumb1 },
+    { folder: "10001", id: "0011", icon: "description", title: "File 11", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0012", icon: "description", title: "File 12", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0013", icon: "description", title: "File 13", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0014", icon: "description", title: "File 14", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0015", icon: "description", title: "File 15", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0016", icon: "description", title: "File 16", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0017", icon: "description", title: "File 17", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0018", icon: "description", title: "File 18", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0019", icon: "description", title: "File 19", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0020", icon: "description", title: "File 20", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0021", icon: "description", title: "File 21", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0022", icon: "description", title: "File 22", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0023", icon: "description", title: "File 23", subtitle: "16 kb", src:thumb1 },
+    { folder: "10002", id: "0024", icon: "description", title: "File 24", subtitle: "16 kb", src:thumb1 },
+    { folder: "10003", id: "0025", icon: "description", title: "File 25", subtitle: "16 kb", src:thumb1 },
+    { folder: "10003", id: "0026", icon: "description", title: "File 26", subtitle: "16 kb", src:thumb1 },
+    { folder: "10003", id: "0027", icon: "description", title: "File 27", subtitle: "16 kb", src:thumb1 },
+    { folder: "10003", id: "0028", icon: "description", title: "File 28", subtitle: "16 kb", src:thumb1 },
+    { folder: "10003", id: "0029", icon: "description", title: "File 29", subtitle: "16 kb", src:thumb1 },
+    { folder: "10003", id: "0030", icon: "description", title: "File 30", subtitle: "16 kb", src:thumb1 },
+    { folder: "10003", id: "0031", icon: "description", title: "File 31", subtitle: "16 kb", src:thumb1 },
+    { folder: "10003", id: "0032", icon: "description", title: "File 32", subtitle: "16 kb", src:thumb1 },
+    { folder: "10004", id: "0033", icon: "description", title: "File 33", subtitle: "16 kb", src:thumb1 },
+    { folder: "10004", id: "0034", icon: "description", title: "File 34", subtitle: "16 kb", src:thumb1 },
+    { folder: "10004", id: "0035", icon: "description", title: "File 35", subtitle: "16 kb", src:thumb1 },
+    { folder: "10004", id: "0036", icon: "description", title: "File 36", subtitle: "16 kb", src:thumb1 },
+    { folder: "10004", id: "0037", icon: "description", title: "File 37", subtitle: "16 kb", src:thumb1 },
+    { folder: "10005", id: "0033", icon: "description", title: "File 33", subtitle: "16 kb", src:thumb1 },
+    { folder: "10005", id: "0034", icon: "description", title: "File 34", subtitle: "16 kb", src:thumb1 },
+    { folder: "10005", id: "0035", icon: "description", title: "File 35", subtitle: "16 kb", src:thumb1 },
+    { folder: "10005", id: "0036", icon: "description", title: "File 36", subtitle: "16 kb", src:thumb1 },
+    { folder: "10005", id: "0037", icon: "description", title: "File 37", subtitle: "16 kb", src:thumb1 },
+]
+
+const folders = [
+    { id: "10001", icon: "folder", title: "Folder 1", 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" },
+    { id: "10005", icon: "folder", title: "Folder 5", subtitle: "1 file" },
 ]
 
+
 const FileExplorerTest = (props) => {
+    
+    const [selectedFolder, setSelectedFolder] = useState("10002")
+    const [selectedFile, setSelectedFile] = useState()
+    const [search, setSearch] = useState()
+    
+    function selectFolder(id) {
+        setSelectedFolder(id)
+    }
+
+    function selectFile(id) {
+        setSelectedFile(id)
+    }
+
+    function searchChanged(value) {
+        setSearch(value)
+    }
+
+    const filteredFiles = search ? files.filter(file => file.title.toLowerCase().includes(search.toLowerCase())) : files
+    const selectedFiles = filteredFiles.filter(file => file.folder === selectedFolder)
+
     return (
         <div style={{ padding: "1rem", flex: "1", height: "100%" }}>
-            <FileExplorer title="File Explorer Test" files={files} />
+            <FileExplorerView
+                title="File Explorer Test" 
+                folders={folders} selectedFolder={selectedFolder} onSelectFolder={selectFolder} 
+                files={selectedFiles} selectedFile={selectedFile} onSelectFile={selectFile} 
+                search={search} onSearch={searchChanged}
+            />
         </div>
     )
 }