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.
- package/dist/index.cjs +1247 -147
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +50 -1
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +1246 -148
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +1247 -147
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/domain/ContentEditor.js +16 -4
- package/src/domain/TablePage.js +8 -1
- package/src/domain/TablePage2.js +679 -0
- package/src/domain/index.js +1 -0
- package/src/html/accordion.css +36 -0
- package/src/html/accordion.js +58 -0
- package/src/html/accordion.test.js +37 -0
- package/src/html/index.js +1 -0
- package/src/html/section.css +1 -1
- package/src/html/section.js +1 -1
- package/src/html/table.test.js +2 -2
- package/src/html/textfield.js +0 -1
- package/src/html/tokenfield.js +0 -2
- package/src/site/site.css +13 -0
- package/src/site/site.js +1 -1
- package/src/site/site.test.js +16 -16
@@ -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
package/src/html/section.css
CHANGED
package/src/html/section.js
CHANGED
@@ -20,7 +20,7 @@ export const Section = (props) => {
|
|
20
20
|
}
|
21
21
|
|
22
22
|
return (
|
23
|
-
<section 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} /> : ''}
|
package/src/html/table.test.js
CHANGED
@@ -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
|
}
|
package/src/html/textfield.js
CHANGED
package/src/html/tokenfield.js
CHANGED
@@ -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}
|
package/src/site/site.test.js
CHANGED
@@ -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={"
|
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"
|
135
|
-
field1: { id: "
|
136
|
-
field2: { id: "
|
137
|
-
field3: { id: "
|
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
|
-
<
|
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
|
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
|
179
|
-
field2: { id: "field2", section: "B", type: TYPES.STRING , format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true
|
180
|
-
field4: { id: "field4", section: "B", type: TYPES.STRING , format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: true
|
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 = {
|