ywana-core8 0.0.254 → 0.0.257

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.254",
+  "version": "0.0.257",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/domain/CollectionPage.js

@@ -18,7 +18,7 @@ const http = HTTPClient(window.API || process.env.REACT_APP_API, Session);
 export const CollectionPage = (props) => {
 
     const site = useContext(SiteContext)
-    const { id = "collection", icon, title, name = "Collection 1", schema, url, groupBy, editor, field, autosave = false, delay = 1000, actions, levels } = props
+    const { id = "collection", icon, title, name = "Collection 1", schema, url, groupBy, editor, field, autosave = false, delay = 1000, actions, levels, onSelect } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const context = CollectionContext(url, field)
 
@@ -58,7 +58,7 @@ export const CollectionPage = (props) => {
             <menu className="collection-page">
                 <Header title={<Text>Lista de {name}</Text>} >
                 </Header>
-                {levels ? <CollectionTree levels={levels} /> : <CollectionList groupBy={groupBy} />}
+                {levels ? <CollectionTree levels={levels} onSelect={onSelect}/> : <CollectionList groupBy={groupBy} onSelect={onSelect}/>}
             </menu>
             <main key={id} className="collection-page">
                 <CollectionEditor icon={icon} schema={schema} layout={editor} autosave={autosave} delay={delay} />
@@ -72,7 +72,7 @@ export const CollectionPage = (props) => {
  */
 const CollectionList = (props) => {
 
-    const { groupBy } = props
+    const { groupBy, onSelect } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all = [] } = pageContext
 
@@ -85,6 +85,7 @@ const CollectionList = (props) => {
         clear()
         await pageContext.select(id)
         setPageContext(Object.assign({}, pageContext))
+        if (onSelect) onSelect(id)
     }
 
     const items = all ? all.map(content => ({
@@ -104,7 +105,7 @@ const CollectionList = (props) => {
  */
 const CollectionTree = (props) => {
 
-    const { levels } = props
+    const { levels, onSelect } = props
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all = [] } = pageContext
 
@@ -117,6 +118,7 @@ const CollectionTree = (props) => {
         clear()
         await pageContext.select(id)
         setPageContext(Object.assign({}, pageContext))
+        if (onSelect) onSelect(id)
     }
 
     function group(items, by) {

package/src/domain/ContentViewer.js

@@ -17,7 +17,6 @@ export const ContentViewer = (props) => {
 
     const sections = content.sections()
     const value = content.value()
-    console.log(value)
     return (
         <div className="content-viewer">
             {sections.map(section => {
@@ -47,9 +46,7 @@ const FieldViewer = (props) => {
 
     const { field, value } = props
     const { id, type, item, label } = field
-
-    console.log('FieldViewer', field, value)
-
+    
     switch(type) {
         case TYPES.STRING:
             return <Property label={label} value={value} />

package/src/html/tab.js

@@ -11,12 +11,12 @@ export const Tabs = (props) => {
 
   const tabs = React.Children.map(children, (child, index) => {
 
-    function select() {
-      if (onChange) onChange(index)
+    function select(id) {
+      if (onChange) onChange(id || index)
     }
 
     return React.cloneElement(child, {
-      selected: index === selected,
+      selected: index === selected || selected === child.props.id,
       onSelect: select
     })
   })
@@ -34,10 +34,10 @@ export const Tabs = (props) => {
  */
 export const Tab = (props) => {
 
-  const { label, selected, actions, onSelect } = props
+  const { id, label, selected, actions, onSelect } = props
 
   function select() {
-    if (onSelect) onSelect()
+    if (onSelect) onSelect(id)
   }
 
   const style = selected ? "selected" : ""

package/src/html/tab.test.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+import { Icon } from '.'
+import { Tabs, Tab } from './tab'
+
+const TabTest = (prop) => {
+
+    return (
+        <>
+            <Tabs>
+                <Tab label="tab1" action={<Icon icon="close" size="small" />} />
+                <Tab label="tab2" action={<Icon icon="close" size="small" />} />
+                <Tab label="tab3" action={<Icon icon="close" size="small" />} />
+            </Tabs>
+        </>
+    )
+}

package/src/html/table.js

@@ -201,7 +201,14 @@ const BooleanCellViewer = ({ id, value = false }) => {
  * String Cell Viewer
  */
 const StringCellViewer = ({ id, value, format, options }) => {
-    const option = options ? options.find(o => o.value === value) : null
+
+    function buildOptions() {
+        const opts = typeof options === 'function' ? options() : options
+        return opts
+      }
+      
+    const option = options ? buildOptions().find(o => o.value === value) : null
+
     let text = option ? option.label : value
     const  locale = window.navigator.userLanguage || window.navigator.language;
     switch (format) {

package/src/widgets/ide/editor.css

@@ -0,0 +1,31 @@
+.ide-editor-box {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    border: solid 1px red;
+}
+
+.ide-editor {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.ide-editor>nav {
+    height: 2.2rem;
+    overflow: hidden;
+    display: flex;
+}
+
+.ide-editor>main {
+    border: solid 1px var(--divider-color);
+    border-top: 0px;
+    flex: 1;
+    padding: .5rem;
+    border: solid 1px blue;
+}

package/src/widgets/ide/editor.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+import { Icon, Tab, Tabs } from '../../html'
+import './editor.css'
+
+export const EditorBox = (props) => {
+
+    const { files = [], onClose, Renderer } = props
+    const [selected, setSelected] = useState()
+    
+    function select(id) {
+        setSelected(id)
+    }
+    
+    function close(id) {
+        if (id === selected) setSelected(null)  
+        if (onClose) onClose(id)
+    }
+    
+    function closer(id) {
+        return [<Icon icon="close" size="small" clickable action={() => close(id)} />]
+    }
+
+    function split() {
+        console.log('TODO: Split Vertical')
+    }
+    
+    const style = " "
+    return (
+        <div className={`ide-editor-box ${style}`}>
+            <Editor files={files} onSplit={split} Renderer={Renderer}/>
+            <Editor files={files} onSplit={split} />
+        </div>
+    )
+}
+
+export const Editor = (props) => {
+
+    const { files = [], onClose, Renderer } = props
+    const [selected, setSelected] = useState()
+    
+    function select(id) {
+        setSelected(id)
+    }
+    
+    function close(id) {
+        if (id === selected) setSelected(null)  
+        if (onClose) onClose(id)
+    }
+    
+    function closer(id) {
+        return [<Icon icon="close" size="small" clickable action={() => close(id)} />]
+    }
+
+    function split() {
+        console.log('TODO: Split Vertical')
+    }
+    
+    const style = " "
+    return (
+        <div className={`ide-editor ${style}`}>
+            <nav>
+                <Tabs onChange={select} selected={selected}>
+                    {files.map(item => <Tab id={item.id} className='editor' label={item.label} actions={closer(item.id)}/>)}
+                </Tabs>
+                { selected ? <Icon icon="vertical_split" size="small" clickable action={split} /> : null }
+            </nav>
+            <main>
+                { selected ? <div className='editor'>
+                    { Renderer ? <Renderer id={selected} /> : selected }
+                </div> : null } 
+            </main>
+        </div>
+    )
+}

package/src/widgets/ide/editor.test.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { EditorBox } from './editor'
+
+const FileRenderer = (props) => {
+
+    const { id } = props
+
+    return (
+        <div className='file-renderer'>
+            File Renderer {id}
+        </div>
+    )
+
+}
+
+
+const EditorTest = (prop) => {
+
+    const [files, setFiles] = useState([
+        { id: "1", label: "One" },
+        { id: "2", label: "Two" }, 
+        { id: "3", label: "Three" },
+    ])
+
+    function close(id) {
+        const next = files.filter(file => file.id !== id)
+        setFiles(next)
+    }
+
+    return (
+        <EditorBox files={files} onClose={close} Renderer={FileRenderer}/>
+    )
+}