ywana-core8 0.0.570 → 0.0.573

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,36 @@
1
+ .accordion {
2
+ display: flex;
3
+ flex-direction: column;
4
+ overflow: auto;
5
+ }
6
+
7
+ .accordion-section {
8
+ }
9
+
10
+ .accordion-section>header {
11
+ display: flex;
12
+ align-items: center;
13
+ }
14
+
15
+ .accordion-section>main {
16
+ }
17
+
18
+ .accordion-section--title {
19
+ flex: 1;
20
+ }
21
+
22
+ .accordion-section--subtitle {
23
+ }
24
+
25
+ .accordion-section--toolbar {
26
+ display: flex;
27
+ align-items: center;
28
+ padding: 0 1rem;
29
+ }
30
+
31
+ .accordion-section--info {
32
+ flex: 1;
33
+ display: flex;
34
+ justify-content: flex-end;
35
+ align-items: center;
36
+ }
@@ -0,0 +1,58 @@
1
+ import React, {useState} from 'react'
2
+ import { Icon } from './icon'
3
+ import './accordion.css'
4
+
5
+ export const Accordion = (props) => {
6
+
7
+ const { className, sections = [], onCheck } = props
8
+
9
+ const [openSections, setOpenSections] = useState(sections.map(section => section.open))
10
+ const [checkedSections, setCheckedSections] = useState(sections.map(section => section.checked))
11
+
12
+ function toggle(index) {
13
+ const next = openSections.map((open, i) => i === index ? !open : open)
14
+ setOpenSections(next)
15
+ }
16
+
17
+ function check(index) {
18
+ const next = checkedSections.map((checked, i) => i === index ? !checked : checked)
19
+ setCheckedSections(next)
20
+ if (onCheck) onCheck(index, next[index], sections[index].id)
21
+ }
22
+
23
+ return (
24
+ <div className={`accordion ${className}`}>
25
+ {sections.map((section, index) => {
26
+ const isOpen = openSections[index]
27
+ const isChecked = checkedSections[index]
28
+ return (
29
+ <AccordionSection key={index} {...section} open={isOpen} checked={isChecked} onToggle={() => toggle(index)} onCheck={() => check(index)}>
30
+ {section.children}
31
+ </AccordionSection>
32
+ )
33
+ })}
34
+ </div>
35
+ )
36
+ }
37
+
38
+ const AccordionSection = (props) => {
39
+
40
+ const { checked, icon, title, subtitle, open = false, onToggle, onCheck, toolbar, info, children } = props
41
+ const togglerIcon = open ? "expand_less" : "expand_more"
42
+ const checkedIcon = checked === undefined || checked === null ? null : checked === false ? "check_box_outline_blank" : "check_box"
43
+
44
+ return (
45
+ <section className={`accordion-section`}>
46
+ <header>
47
+ { checkedIcon ? <Icon className="accordion-section-checker" icon={checkedIcon} clickable action={onCheck}/> : '' }
48
+ { icon ? <Icon className="accordion-section-icon" icon={icon} /> : '' }
49
+ { title ? <div className="accordion-section--title">{title}</div> : '' }
50
+ { subtitle ? <div className="accordion-section--subtitle">{subtitle}</div> : '' }
51
+ { info ? <div className="accordion-section--info">{info}</div> : '' }
52
+ { toolbar ? <div className="accordion-section--toolbar">{toolbar}</div> : '' }
53
+ <Icon className="accordion-section-toggler" icon={togglerIcon} clickable action={onToggle} />
54
+ </header>
55
+ {open ? <main>{children}</main> : ''}
56
+ </section>
57
+ )
58
+ }
@@ -0,0 +1,37 @@
1
+ import React, { useState } from 'react'
2
+ import { Accordion } from './accordion'
3
+ import { Icon } from './icon'
4
+
5
+ const AccordionTest = (prop) => {
6
+
7
+ const info = <div>50 Unidades</div>
8
+
9
+ const toolbar = [<Icon icon="edit" size="small" clickable />, <Icon icon="delete" size="small" clickable />]
10
+
11
+ const sections = [
12
+ { id: 1 , checked: false, icon: 'star', title: 'Section 1' , subtitle: 'Subtitle 1' , info, toolbar, open: true , children: <div>Section 1 content</div> },
13
+ { id: 2 , checked: false, icon: 'star', title: 'Section 2' , subtitle: 'Subtitle 2' , info, toolbar, open: true , children: <div>Section 2 content</div> },
14
+ { id: 3 , checked: false, icon: 'star', title: 'Section 3' , subtitle: 'Subtitle 3' , info, toolbar, open: false, children: <div>Section 3 content</div> },
15
+ { id: 4 , checked: false, icon: 'star', title: 'Section 4' , subtitle: 'Subtitle 4' , info, toolbar, open: false, children: <div>Section 4 content</div> },
16
+ { id: 5 , checked: false, icon: 'star', title: 'Section 5' , subtitle: 'Subtitle 5' , info, toolbar, open: false, children: <div>Section 5 content</div> },
17
+ { id: 6 , checked: false, icon: 'star', title: 'Section 6' , subtitle: 'Subtitle 6' , info, toolbar, open: false, children: <div>Section 6 content</div> },
18
+ { id: 7 , checked: false, icon: 'star', title: 'Section 7' , subtitle: 'Subtitle 7' , info, toolbar, open: false, children: <div>Section 7 content</div> },
19
+ { id: 8 , checked: false, icon: 'star', title: 'Section 8' , subtitle: 'Subtitle 8' , info, toolbar, open: false, children: <div>Section 8 content</div> },
20
+ { id: 9 , checked: false, icon: 'star', title: 'Section 9' , subtitle: 'Subtitle 9' , info, toolbar, open: false, children: <div>Section 9 content</div> },
21
+ { id: 10, checked: false, icon: 'star', title: 'Section 10', subtitle: 'Subtitle 10', info, toolbar, open: false, children: <div>Section 10 content</div> },
22
+ { id: 11, checked: false, icon: 'star', title: 'Section 11', subtitle: 'Subtitle 11', info, toolbar, open: false, children: <div>Section 11 content</div> },
23
+ { id: 12, checked: false, icon: 'star', title: 'Section 12', subtitle: 'Subtitle 12', info, toolbar, open: false, children: <div>Section 12 content</div> },
24
+ { id: 13, checked: false, icon: 'star', title: 'Section 13', subtitle: 'Subtitle 13', info, toolbar, open: false, children: <div>Section 13 content</div> },
25
+ { id: 14, checked: false, icon: 'star', title: 'Section 14', subtitle: 'Subtitle 14', info, toolbar, open: false, children: <div>Section 14 content</div> },
26
+ { id: 15, checked: false, icon: 'star', title: 'Section 15', subtitle: 'Subtitle 15', info, toolbar, open: false, children: <div>Section 15 content</div> },
27
+ { id: 16, checked: false, icon: 'star', title: 'Section 16', subtitle: 'Subtitle 16', info, toolbar, open: false, children: <div>Section 16 content</div> },
28
+ { id: 17, checked: false, icon: 'star', title: 'Section 17', subtitle: 'Subtitle 17', info, toolbar, open: false, children: <div>Section 17 content</div> },
29
+ ]
30
+
31
+
32
+ return (
33
+ <>
34
+ <Accordion sections={sections} onCheck={console.log} />
35
+ </>
36
+ )
37
+ }
package/src/html/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { Accordion } from './accordion'
1
2
  export { Button } from './button'
2
3
  export { CheckBox } from './checkbox'
3
4
  export { Chips, Chip } from './chip'
@@ -1,4 +1,4 @@
1
- .section2>header {
1
+ .section>header {
2
2
  background-color: rgba(200,200,200,.1);
3
3
  padding: 0 1rem;
4
4
  min-height: 3rem;
@@ -20,7 +20,7 @@ export const Section = (props) => {
20
20
  }
21
21
 
22
22
  return (
23
- <section className={`section2 ${className}`}>
23
+ <section className={`section ${className}`}>
24
24
  <Header icon={icon} title={title}>
25
25
  {actions}
26
26
  {canCollapse ? <Icon icon="expand_more" onIcon="expand_less" clickable action={toggle} /> : ''}
@@ -42,7 +42,6 @@ export const TableTest = (prop) => {
42
42
  { id: "index", type: "INDEX", label: "#"},
43
43
  { id: "checked", onChange: check },
44
44
  { id: "name", label: "Name", type: "String", onChange: editCell },
45
- { id: "name", label: "Name", type: "String", sortable: true },
46
45
  { id: "thumb", label: "Thumb", type: "String", format: FORMATS.IMG },
47
46
  { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
48
47
  { id: "date", label: "Date", type: "String", format: FORMATS.DATE },
@@ -55,7 +54,6 @@ export const TableTest = (prop) => {
55
54
  editable: true,
56
55
  columns : [
57
56
  { id: "checked", onChange: check },
58
- { id: "name", label: "Name", type: "String", onChange: editCell },
59
57
  { id: "name", label: "Name", type: "String", sortable: true },
60
58
  { id: "thumb", label: "Thumb", type: "String", format: FORMATS.IMG },
61
59
  { id: "color", label: "Color", type: "String", format: FORMATS.COLOR },
@@ -67,6 +65,8 @@ export const TableTest = (prop) => {
67
65
  return (
68
66
  <div style={{ maxHeight: "20rem", overflow: "hidden", border: "solid 1px red", margin: "2rem" }}>
69
67
  <DataTable {...table1} onRowSelection={select} onCheckAll={checkAll}/>
68
+ x
69
+ <DataTable {...table2} onRowSelection={select} onCheckAll={checkAll}/>
70
70
  </div>
71
71
  )
72
72
  }
@@ -156,7 +156,6 @@ export const DropDown = (props) => {
156
156
  setOpen(false)
157
157
  const label = verbose ? option.label : ""
158
158
  setLabel(label)
159
- console.log("dd.select", value)
160
159
  if (onChange) onChange(id, next)
161
160
  }
162
161
 
@@ -24,7 +24,6 @@ export const TokenField = ({ id, label, tokens = [], readOnly, options, onChange
24
24
 
25
25
  function changeDropDown(fid, value) {
26
26
  const next = Array.isArray(tokens) ? tokens.concat(value) : [value]
27
- console.log("next", next)
28
27
  if (onChange) onChange(id, next)
29
28
  setValue('')
30
29
  }
@@ -48,7 +47,6 @@ export const TokenField = ({ id, label, tokens = [], readOnly, options, onChange
48
47
  }
49
48
 
50
49
  const tks = Array.isArray(tokens) ? tokens : []
51
- console.log("render", tks)
52
50
  return (
53
51
  <div className='tokenField'>
54
52
  <label>{label}</label>
package/src/site/site.css CHANGED
@@ -52,6 +52,10 @@
52
52
  width: 20rem;
53
53
  }
54
54
 
55
+ .site6>menu.min {
56
+ overflow: visible;
57
+ }
58
+
55
59
  .site6>menu>main {
56
60
  padding: .4rem;
57
61
  }
@@ -95,6 +99,15 @@
95
99
  align-items: center;
96
100
  }
97
101
 
102
+ .site6>menu.min>main {
103
+ flex: 1;
104
+ overflow-x: visible;
105
+ overflow-y: visible;
106
+ display: flex;
107
+ flex-direction: column;
108
+ align-items: center;
109
+ }
110
+
98
111
  .site6>main {
99
112
  grid-area: main;
100
113
  overflow: hidden;
package/src/site/site.js CHANGED
@@ -234,7 +234,7 @@ const SiteMenu = ({ logo, title, children, min }) => {
234
234
  const styleItem = id === page ? 'selected' : ''
235
235
  return (
236
236
  <div className={`site-menu-item ${styleItem}`} key={id} onClick={() => goto(id)}>
237
- <Tooltip text={title}>
237
+ <Tooltip text={title} top=".5rem" left="2rem">
238
238
  <Icon key={id} icon={icon} clickable action={() => goto(id)} />
239
239
  </Tooltip>
240
240
  {sideNav === 'max' ? <label>{title}</label> : null}
@@ -10,6 +10,7 @@ import { UploadDialog } from '../widgets/upload/UploadDialog'
10
10
  import { Uploader } from '../widgets/upload/Uploader'
11
11
  import { TabbedTablePage } from '../domain/TabbedTablePage'
12
12
  import { TablePage } from '../domain/TablePage'
13
+ import { TablePage2 } from '../domain/TablePage2'
13
14
  import { CollectionPage } from '../domain/CollectionPage'
14
15
  import { FORMATS, TYPES } from '../domain/ContentType'
15
16
  import { TableTest } from '../html/table.test'
@@ -19,7 +20,7 @@ const SiteTest = (prop) => {
19
20
  const footer = <div>FOOTER</div>
20
21
 
21
22
  return (
22
- <Site icon="star" title="Site Test" init={"PAGE5"} footer={footer}>
23
+ <Site icon="star" title="Site Test" init={"PAGE3"} footer={footer}>
23
24
  <Page id="PAGE1" section="SECTION1" icon="description" title="Page 1" layout="workspace">
24
25
  <Page1 />
25
26
  </Page>
@@ -131,10 +132,10 @@ const Page2 = (props) => {
131
132
  const Page3 = (props) => {
132
133
 
133
134
  const ENTITYTYPE = {
134
- name : { id: "name" , section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name" },
135
- 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" },
136
- 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" },
137
- 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" },
135
+ name : { id: "name" , section: "" , type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name" },
136
+ 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" },
137
+ 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" },
138
+ 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" },
138
139
 
139
140
  }
140
141
 
@@ -153,7 +154,7 @@ const Page3 = (props) => {
153
154
 
154
155
  return (
155
156
  <Fragment>
156
- <TablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed"/>
157
+ <TablePage2 title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed" groupBy="state"/>
157
158
  </Fragment>
158
159
  )
159
160
  }
@@ -166,18 +167,17 @@ const Page4 = (props) => {
166
167
  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" },
167
168
  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" },
168
169
  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" },
169
-
170
170
  }
171
171
 
172
172
  const schema = {
173
- name : { id: "name" , section: "A", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name" },
174
- state : { id: "state" , section: "A", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: false , label: "State" , options: [
173
+ name : { id: "name" , section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true , label: "Name" },
174
+ state : { id: "state" , section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: false , label: "State" , options: [
175
175
  { label: "Pendiente", value: "NOT_CLASSIFIED" },
176
176
  { label: "Clasificada", value: "CLASSIFIED"},
177
177
  ]},
178
- field1: { id: "field1", section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field1" },
179
- field2: { id: "field2", section: "B", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field2" },
180
- field4: { id: "field4", section: "B", type: TYPES.STRING , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: true , label: "Color" },
178
+ field1: { id: "field1", section: "A", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field1" },
179
+ field2: { id: "field2", section: "B", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "field2" },
180
+ field4: { id: "field4", section: "B", type: TYPES.STRING , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: true , label: "Color" },
181
181
  field5: { id: "field5", section: "B", type: TYPES.ENTITY, item: ENTITYTYPE, format: FORMATS.NONE , editable: true, tab: false, grouper: false, column: true , filter: true , like: false, label: "Entity5"},
182
182
 
183
183
  }
@@ -192,10 +192,10 @@ const Page4 = (props) => {
192
192
  const Page5 = (props) => {
193
193
 
194
194
  const ENTITYTYPE = {
195
- name : { id: "name" , section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name" },
196
- field1: { id: "field1", section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true , label: "E field1" },
197
- field2: { id: "field2", section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true , label: "E field2" },
198
- field3: { id: "field3", section: "", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "E field3" },
195
+ name : { id: "name" , section: "", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name" },
196
+ field1: { id: "field1", section: "", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true , label: "E field1" },
197
+ field2: { id: "field2", section: "", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: false, filter: true , label: "E field2" },
198
+ field3: { id: "field3", section: "", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , label: "E field3" },
199
199
  }
200
200
 
201
201
  const schema = {