ywana-core8 0.0.569 → 0.0.572

package/src/html/accordion.css

@@ -0,0 +1,36 @@
+.accordion {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.accordion-section {
+}
+
+.accordion-section>header {
+    display: flex;
+    align-items: center;
+}
+
+.accordion-section>main {
+}
+
+.accordion-section--title {
+    flex: 1;
+}
+
+.accordion-section--subtitle {
+}
+
+.accordion-section--toolbar {
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+}
+
+.accordion-section--info {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}

package/src/html/accordion.js

@@ -0,0 +1,58 @@
+import React, {useState} from 'react'
+import { Icon } from './icon'
+import './accordion.css'
+
+export const Accordion = (props) => {
+
+    const { className, sections = [], onCheck } = props
+
+    const [openSections, setOpenSections] = useState(sections.map(section => section.open))
+    const [checkedSections, setCheckedSections] = useState(sections.map(section => section.checked))
+
+    function toggle(index) {
+        const next = openSections.map((open, i) => i === index ? !open : open)
+        setOpenSections(next)
+    }
+
+    function check(index) { 
+        const next = checkedSections.map((checked, i) => i === index ? !checked : checked)
+        setCheckedSections(next)
+        if (onCheck) onCheck(index, next[index], sections[index].id)
+    }
+
+    return (
+        <div className={`accordion ${className}`}>
+            {sections.map((section, index) => {
+                const isOpen = openSections[index]
+                const isChecked = checkedSections[index]
+                return (
+                    <AccordionSection key={index} {...section} open={isOpen} checked={isChecked} onToggle={() => toggle(index)} onCheck={() => check(index)}>
+                        {section.children}
+                    </AccordionSection>
+                )
+            })}
+        </div>
+    )
+}
+
+const AccordionSection = (props) => {
+
+    const { checked, icon, title, subtitle, open = false, onToggle, onCheck, toolbar, info, children } = props
+    const togglerIcon = open ? "expand_less" : "expand_more"
+    const checkedIcon = checked === undefined || checked === null ?  null :  checked === false ? "check_box_outline_blank" : "check_box"
+
+    return (
+        <section className={`accordion-section`}>
+            <header>
+                { checkedIcon ? <Icon className="accordion-section-checker" icon={checkedIcon} clickable action={onCheck}/> : '' }
+                { icon ? <Icon className="accordion-section-icon" icon={icon} /> : '' }
+                { title ? <div className="accordion-section--title">{title}</div> : '' }
+                { subtitle ? <div className="accordion-section--subtitle">{subtitle}</div> : '' }
+                { info ? <div className="accordion-section--info">{info}</div> : '' }
+                { toolbar ? <div className="accordion-section--toolbar">{toolbar}</div> : '' } 
+                <Icon className="accordion-section-toggler" icon={togglerIcon} clickable action={onToggle} />
+            </header> 
+            {open ? <main>{children}</main> : ''}
+        </section>
+    )
+}

package/src/html/accordion.test.js

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import { Accordion } from './accordion'
+import { Icon } from './icon'
+
+const AccordionTest = (prop) => {
+
+    const info = <div>50 Unidades</div>
+
+    const toolbar = [<Icon icon="edit" size="small" clickable />, <Icon icon="delete" size="small" clickable />]
+
+    const sections = [
+        { id: 1 , checked: false, icon: 'star', title: 'Section 1' , subtitle: 'Subtitle 1' , info, toolbar, open: true ,  children: <div>Section 1 content</div>  },
+        { id: 2 , checked: false, icon: 'star', title: 'Section 2' , subtitle: 'Subtitle 2' , info, toolbar, open: true ,  children: <div>Section 2 content</div>  },
+        { id: 3 , checked: false, icon: 'star', title: 'Section 3' , subtitle: 'Subtitle 3' , info, toolbar, open: false,  children: <div>Section 3 content</div>  },
+        { id: 4 , checked: false, icon: 'star', title: 'Section 4' , subtitle: 'Subtitle 4' , info, toolbar, open: false,  children: <div>Section 4 content</div>  },
+        { id: 5 , checked: false, icon: 'star', title: 'Section 5' , subtitle: 'Subtitle 5' , info, toolbar, open: false,  children: <div>Section 5 content</div>  },
+        { id: 6 , checked: false, icon: 'star', title: 'Section 6' , subtitle: 'Subtitle 6' , info, toolbar, open: false,  children: <div>Section 6 content</div>  },
+        { id: 7 , checked: false, icon: 'star', title: 'Section 7' , subtitle: 'Subtitle 7' , info, toolbar, open: false,  children: <div>Section 7 content</div>  },
+        { id: 8 , checked: false, icon: 'star', title: 'Section 8' , subtitle: 'Subtitle 8' , info, toolbar, open: false,  children: <div>Section 8 content</div>  },
+        { id: 9 , checked: false, icon: 'star', title: 'Section 9' , subtitle: 'Subtitle 9' , info, toolbar, open: false,  children: <div>Section 9 content</div>  },
+        { id: 10, checked: false, icon: 'star', title: 'Section 10', subtitle: 'Subtitle 10', info, toolbar, open: false,  children: <div>Section 10 content</div> },
+        { id: 11, checked: false, icon: 'star', title: 'Section 11', subtitle: 'Subtitle 11', info, toolbar, open: false,  children: <div>Section 11 content</div> },
+        { id: 12, checked: false, icon: 'star', title: 'Section 12', subtitle: 'Subtitle 12', info, toolbar, open: false,  children: <div>Section 12 content</div> },
+        { id: 13, checked: false, icon: 'star', title: 'Section 13', subtitle: 'Subtitle 13', info, toolbar, open: false,  children: <div>Section 13 content</div> },
+        { id: 14, checked: false, icon: 'star', title: 'Section 14', subtitle: 'Subtitle 14', info, toolbar, open: false,  children: <div>Section 14 content</div> },
+        { id: 15, checked: false, icon: 'star', title: 'Section 15', subtitle: 'Subtitle 15', info, toolbar, open: false,  children: <div>Section 15 content</div> },
+        { id: 16, checked: false, icon: 'star', title: 'Section 16', subtitle: 'Subtitle 16', info, toolbar, open: false,  children: <div>Section 16 content</div> },
+        { id: 17, checked: false, icon: 'star', title: 'Section 17', subtitle: 'Subtitle 17', info, toolbar, open: false,  children: <div>Section 17 content</div> },
+    ]
+
+
+    return (
+        <>
+           <Accordion sections={sections} onCheck={console.log} />
+        </>
+    )
+}

package/src/html/index.js

@@ -1,3 +1,4 @@
+export { Accordion } from './accordion'
 export { Button } from './button'
 export { CheckBox } from './checkbox'
 export { Chips, Chip } from './chip'

package/src/html/section.css

@@ -1,4 +1,4 @@
-.section2>header {
+.section>header {
     background-color: rgba(200,200,200,.1);
     padding: 0 1rem;
     min-height: 3rem;

package/src/html/section.js

@@ -20,7 +20,7 @@ export const Section = (props) => {
     }
 
     return (
-        <section className={`section2 ${className}`}>
+        <section className={`section ${className}`}>
             <Header icon={icon}  title={title}>
                 {actions}
                 {canCollapse ? <Icon icon="expand_more" onIcon="expand_less" clickable action={toggle} /> : ''}

package/src/html/table.test.js

@@ -42,7 +42,6 @@ export const TableTest = (prop) => {
             { id: "index", type: "INDEX", label: "#"},
             { id: "checked", onChange: check },
             { id: "name", label: "Name", type: "String", onChange: editCell },
-            { id: "name", label: "Name", type: "String", sortable: true },
             { id: "thumb", label: "Thumb", type: "String", format: FORMATS.IMG },
             { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
             { id: "date", label: "Date", type: "String", format: FORMATS.DATE },
@@ -55,7 +54,6 @@ export const TableTest = (prop) => {
         editable: true,
         columns : [
             { id: "checked", onChange: check },
-            { id: "name", label: "Name", type: "String", onChange: editCell },
             { id: "name", label: "Name", type: "String", sortable: true },
             { id: "thumb", label: "Thumb", type: "String", format: FORMATS.IMG },
             { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
@@ -67,6 +65,8 @@ export const TableTest = (prop) => {
     return (
         <div style={{ maxHeight: "20rem", overflow: "hidden", border: "solid 1px red", margin: "2rem" }}>
            <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll}/>
+           x
+           <DataTable {...table2} onRowSelection={select} onCheckAll={checkAll}/>
         </div>
     )
 }

package/src/html/textfield.js

@@ -150,8 +150,8 @@ export const DropDown = (props) => {
         if (!readOnly) setOpen(!open)
     }
 
-    function select(event) {
-        const next = event.target.getAttribute("value")
+    function select(value) {
+        const next = value
         const option = options.find(option => option.value === next)
         setOpen(false)
         const label = verbose ? option.label : ""
@@ -168,8 +168,8 @@ export const DropDown = (props) => {
         if (canShow) {
             const filterActive = predictive === true && label && label.length > 0
             const items = filterActive ? options.filter(option => option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0) : options
-            const lis = items.map(option => <li key={option.value} value={option.value}><Text>{option.label}</Text></li>)
-            return <menu><ul onMouseDown={select}>{lis}</ul></menu>
+            const lis = items.map(option => <li key={option.value} value={option.value} onClick={() => select(option.value)}><Text>{option.label}</Text></li>)
+            return <menu><ul>{lis}</ul></menu>
         } else {
             return null
         }

package/src/html/textfield.test.js

@@ -30,6 +30,7 @@ const TextFieldTest = (prop) => {
         <>
             <DropDown id="b1" label="Boolean1" onChange={change} options={options2} value={form.b1} />
             <TokenField id="token1" label="Tokens" onChange={change} />
+            <TokenField id="token2" label="Tokens DropDown" onChange={change} options={options} tokens={form.token2}/>
             <TextField id="name" label="Name" value={form.name} onChange={change} />
             <DropDown id="gender1" label="Dropdown 1" value={form.gender1} onChange={change} options={options} predictive={false}/>
             <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={true}/>

package/src/html/tokenfield.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useState } from 'react'
 import { Icon } from './icon';
 import { Text } from './text';
 import { DropDown } from './textfield';
@@ -47,7 +47,6 @@ export const TokenField = ({ id, label, tokens = [], readOnly, options, onChange
   }
 
   const tks = Array.isArray(tokens) ? tokens : []
-
   return (
     <div className='tokenField'>
       <label>{label}</label>

package/src/site/site.css

@@ -52,6 +52,10 @@
     width: 20rem;
 }
 
+.site6>menu.min {
+    overflow: visible;
+}
+
 .site6>menu>main {
     padding: .4rem;
 }
@@ -95,6 +99,15 @@
     align-items: center;
 }
 
+.site6>menu.min>main {
+    flex: 1;
+    overflow-x: visible;
+    overflow-y: visible;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .site6>main {
     grid-area: main;
     overflow: hidden;

package/src/site/site.js

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

package/src/site/site.test.js

@@ -10,6 +10,7 @@ import { UploadDialog } from '../widgets/upload/UploadDialog'
 import { Uploader } from '../widgets/upload/Uploader'
 import { TabbedTablePage } from '../domain/TabbedTablePage'
 import { TablePage } from '../domain/TablePage'
+import { TablePage2 } from '../domain/TablePage2'
 import { CollectionPage } from '../domain/CollectionPage'
 import { FORMATS, TYPES } from '../domain/ContentType'
 import { TableTest } from '../html/table.test'
@@ -19,7 +20,7 @@ const SiteTest = (prop) => {
     const footer = <div>FOOTER</div>
 
     return (
-        <Site icon="star" title="Site Test" init={"PAGE5"} footer={footer}>
+        <Site icon="star" title="Site Test" init={"PAGE3"} footer={footer}>
             <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
                 <Page1 />
             </Page>
@@ -131,10 +132,10 @@ const Page2 = (props) => {
 const Page3 = (props) => {
 
     const ENTITYTYPE = {
-        name  : { id: "name"  , section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
-        field1: { id: "field1", section: "E-INFO1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field1" },
-        field2: { id: "field2", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field2" },
-        field3: { id: "field3", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
+        name  : { id: "name"   , section: ""       , type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
+        field1: { id: "field01", section: "E-INFO1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field1" },
+        field2: { id: "field02", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field2" },
+        field3: { id: "field03", section: "E-INFO2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "E field3" },
 
     }
 
@@ -153,7 +154,7 @@ const Page3 = (props) => {
 
     return (
         <Fragment>
-            <TablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed"/>
+            <TablePage2 title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed" groupBy="state"/>
         </Fragment>
     )
 }