ywana-core8 0.0.481 → 0.0.484

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.481",
+  "version": "0.0.484",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/domain/ContentEditor.test.js

@@ -12,15 +12,17 @@ function buildTokenOptions() {
 }
 
 const schema = {
-    name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "Name" },
-    field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field1", multivalue: true },
-    field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE, required: true, label: "field2" },
-    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, label: "field3", options: buildTokenOptions },
-    field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR, required: true, label: "Color" },
+    name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE  , required: true, editable: false, label: "Name"  , defValue: "John"                                               },
+    field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE  , required: true, editable: true , label: "field1"                  , multivalue: true                             },
+    field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE  , required: true, editable: true , label: "field2"                                                                 },
+    field3: { id: "field3", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, editable: true , label: "field3"                                    , options: buildTokenOptions },
+    field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR , required: true, editable: true , label: "Color"                                                                  },
+    field5: { id: "field5", type: TYPES.STRING, format: FORMATS.TOKENS, required: true, editable: true , label: "field5"                  , multivalue: true                 },
+
 }
 
 const value = {
-    name: "John Smith",
+    
 }
 
 const ContentEditorTest = (prop) => {
@@ -28,6 +30,7 @@ const ContentEditorTest = (prop) => {
     const [form, setForm] = useState(value)
 
     function change(form) {
+        console.log(form)
         setForm(form)
     }
 

package/src/domain/ContentType.js

@@ -16,6 +16,7 @@ export const TYPES = {
 export const FORMATS = {
     NONE: '',
     DATE: 'date',
+    DATERANGE: 'DATARANGE',
     TIME: 'time',
     EMAIL: 'email',
     HTML: 'HTML',

package/src/domain/TabbedTablePage.js

@@ -26,6 +26,7 @@ export const TabbedTablePage = (props) => {
         canQuery = false, urlQuery, user,
         groupBy, validator, scenario,
         formFilter, tableFilter, editorFilter = false,
+        tableClassName,
         children
     } = props
 
@@ -178,7 +179,7 @@ export const TabbedTablePage = (props) => {
                 </menu>
             ) : null}
             <main key={id} className="table-page">
-                <TableEditor icon={icon} title={name} tabs={renderTabs()} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} />
+                <TableEditor icon={icon} title={name} tabs={renderTabs()} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} className={tableClassName}/>
                 {children ? <article>{children}</article> : null}
             </main>
             {renderAside()}
@@ -380,7 +381,7 @@ export const TableEditor = (props) => {
     const site = useContext(SiteContext)
     const [pageContext, setPageContext] = useContext(PageContext)
     const { all = [], filters } = pageContext
-    const { icon, title, schema, editable, canDelete, filter, actions, tabs } = props
+    const { icon, title, schema, editable, canDelete, filter, actions, tabs, className } = props
     const [groupBy, setGroupBy] = useState(props.groupBy)
 
     function changeGroup(id, value) {
@@ -491,7 +492,7 @@ export const TableEditor = (props) => {
                     <Header title={title} >
                         <span className="size">{groupSize}</span>
                     </Header>
-                    <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check} />
+                    <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check} className={className}/>
                 </Fragment>
             )
         })

package/src/html/table.css

@@ -19,7 +19,7 @@
     background-color: rgba(240,240,240);
     overflow: hidden;
     color: var(--text-color-lighter);
-    z-index: 2000;
+    z-index: 10;
 }
 
 .datatable8 thead tr {

package/src/html/textfield.js

@@ -183,3 +183,26 @@ export const DropDown = (props) => {
         </div>
     )
 }
+
+
+export const DateRange = (props) => {
+
+    const { id, onChange } = props
+    const [form, setForm] = useState({})
+
+    useEffect(() => {
+        if (onChange) onChange(id, form)
+    }, [form])
+
+    function change(id, value) {
+        const next = Object.assign({}, form, { [id]: value })
+        setForm(next)
+    }
+
+    return (
+        <div className="date-range">
+            <TextField id="from" type="date" label="From" value={form.from} onChange={change} />
+            <TextField id="to" type="date" label="To" value={form.to} onChange={change} />
+        </div>
+    )
+}

package/src/html/textfield.test.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { DropDown, TextField, TextArea, TokenField } from '.'
 import { Wrapper } from '../../__reactpreview__/Wrapper'
+import { DateRange } from './textfield'
 
 const TextFieldTest = (prop) => {
 
@@ -35,6 +36,7 @@ const TextFieldTest = (prop) => {
             <DropDown id="gender2" label="Dropdown 2" value={form.gender2} onChange={change} options={options} predictive={true}/>
             <TextArea id="text1" label="Text 1" value={form.text1} onChange={change} />
             <TextField id="date1" type="DATE" label="Date" value={form.date1} onChange={change} />
+            <DateRange id="range1" value={form.range1} onChange={change}/>
         </>
     )
 }

package/src/html/tokenfield.js

@@ -33,7 +33,7 @@ export const TokenField = ({ id, label, tokens = [], readOnly, options, onChange
       event.preventDefault()
       event.stopPropagation()
       const token = event.target.value
-      const next = tokens.concat(token.trim())
+      const next = Array.isArray(tokens) ? tokens.concat(token) : [token]
       if (onChange) onChange(id, next)
       setValue('')
     }

package/src/site/site.test.js

@@ -128,7 +128,7 @@ const Page3 = (props) => {
 
     return (
         <Fragment>
-            <TablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed"/>
+            <TabbedTablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed"/>
         </Fragment>
     )
 }