ywana-core8 0.0.254 → 0.0.255

package/package.json

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

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}/>
+    )
+}