ywana-core8 0.0.571 → 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/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>
     )
 }