ywana-core8 0.0.479 → 0.0.482

package/package.json

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

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/domain/TablePage.js

@@ -26,6 +26,7 @@ export const TablePage = (props) => {
         canQuery = false, urlQuery, user,
         groupBy, validator, scenario,
         formFilter, tableFilter, editorFilter = false,
+        tableClassName,
         children
     } = props
 
@@ -152,7 +153,7 @@ export const TablePage = (props) => {
                 </menu>
             ) : null}
             <main key={id} className="table-page">
-                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} />
+                <TableEditor icon={icon} title={name} schema={schema} delay={delay} editable={editable} groupBy={groupBy} filter={tableFilter} actions={tableActions} canDelete={canDelete} className={tableClassName}/>
                 {children ? <article>{children}</article> : null}
             </main>
             {renderAside()}
@@ -346,7 +347,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 } = props
+    const { icon, title, schema, editable, canDelete, filter, actions, className } = props
     const [groupBy, setGroupBy] = useState(props.groupBy)
 
     function changeGroup(id, value) {
@@ -457,7 +458,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

@@ -2,6 +2,7 @@
     overflow: hidden;
     border: solid 0px var(--divider-color);
     background-color: var(--paper-color);
+    overflow: auto;
 }
 
 .datatable8.outlined {
@@ -15,9 +16,10 @@
 .datatable8 thead  {
     position: sticky;
     top: 0px;
-    background-color: rgba(200,200,200,.4);
+    background-color: rgba(240,240,240);
     overflow: hidden;
     color: var(--text-color-lighter);
+    z-index: 2000;
 }
 
 .datatable8 thead tr {

package/src/html/table.js

@@ -14,7 +14,7 @@ const isFunction = value => value && (Object.prototype.toString.call(value) ===
  */
 export const DataTable = (props) => {
 
-    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false } = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className} = props
     const [sortDir, setSortDir] = useState({})
     const [allChecked, setAllChecked] = useState(false)
 
@@ -73,7 +73,7 @@ export const DataTable = (props) => {
 
     const style = outlined ? "outlined" : ""
     return (
-        <div className={`datatable8 ${style}`}>
+        <div className={`datatable8 ${className} ${style}`}>
             <table>
                 <thead>
                     <tr>

package/src/html/table.test.js

@@ -7,7 +7,14 @@ const TableTest = (prop) => {
     const [rows, setRows] = useState(
         [
             { id: 1, checked: false, name: "John Smith", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png"},
-            { id: 2, checked: false, name: "Ann Martin", color: "#CCFFFF" }
+            { id: 2, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 3, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 4, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 5, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 6, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 7, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 8, checked: false, name: "Ann Martin", color: "#CCFFFF" },
+            { id: 9, checked: false, name: "Ann Martin", color: "#CCFFFF" },
         ]
     )
 
@@ -29,6 +36,7 @@ const TableTest = (prop) => {
     }
 
     const table = {
+        className: "xxx",
         editable: true,
         columns : [
             { id: "checked", onChange: check },

package/src/site/site.test.js

@@ -9,6 +9,7 @@ import { Button, DropDown, TextField, TextArea } from '../html'
 import { UploadDialog } from '../widgets/upload/UploadDialog'
 import { Uploader } from '../widgets/upload/Uploader'
 import { TabbedTablePage } from '../domain/TabbedTablePage'
+import { TablePage } from '../domain/TablePage'
 import { FORMATS, TYPES } from '../domain/ContentType'
 
 const SiteTest = (prop) => {
@@ -115,19 +116,19 @@ const Page2 = (props) => {
 const Page3 = (props) => {
 
     const schema = {
-        name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, column: true , filter: true , like: true, label: "Name"   },
-        state : { id: "state" , type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: true , column: true , filter: false            , label: "State" , options: [
+        name  : { id: "name"  , type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true , like: true, label: "Name"   },
+        state : { id: "state" , type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: true , grouper: true , column: true , filter: false            , label: "State" , options: [
             { label: "Pendiente", value: "NOT_CLASSIFIED" },
             { label: "Clasificada", value: "CLASSIFIED"}, 
         ]},
-        field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, column: true , filter: true             , label: "field1" },
-        field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, column: true , filter: true             , label: "field2" },
-        field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR, required: true, tab: false, column: true , filter: true             , label: "Color"  },
+        field1: { id: "field1", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field1" },
+        field2: { id: "field2", type: TYPES.STRING, format: FORMATS.NONE , required: true, tab: false, grouper: true , column: true , filter: true             , label: "field2" },
+        field4: { id: "field4", type: TYPES.STRING, format: FORMATS.COLOR, required: true, tab: false, grouper: true , column: true , filter: true             , label: "Color"  },
     }
 
     return (
         <Fragment>
-            <TabbedTablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} />
+            <TabbedTablePage title="Referencias" schema={schema} host="http://localhost:3000" url="/references" canFilter={true} tableClassName="condensed"/>
         </Fragment>
     )
 }