ywana-core8 0.0.99 → 0.0.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.99",
+  "version": "0.0.103",
   "description": "ywana-core8",
   "author": "Ernesto Roldan Garcia",
   "license": "MIT",

package/src/domain/TablePage.js

@@ -224,8 +224,10 @@ const TableEditor = (props) => {
         setPageContext(Object.assign({}, pageContext))
     }
 
-    async function check(ids = []) {
-        console.log("check: ", ids)
+    async function check(id, value) {
+        const ids = Array.isArray(id) ? id : [id]
+        pageContext.check(ids, value)
+        setPageContext(Object.assign({}, pageContext))
     }
 
     function run(action, item) {
@@ -261,12 +263,13 @@ const TableEditor = (props) => {
                             id: field.id,
                             label: field.label,
                             type: field.type,
-                            onChange: field.editable ? change : null,
+                            onChange: field.id === "checked" ? check : field.editable ? change : null,     /* checked has it´s own handler */
                             options
                         }
                     }),
                 rows: groups[groupName]
                     .map(item => {
+                        item.checked = pageContext.checked.some(id => id === item.id)
                         item.actions = actions ? actions.map(action => {
                             return action.filter ?
                                 action.filter(item) ? <Icon icon={action.icon} clickable size="small" action={() => run(action, item)} /> : null
@@ -285,7 +288,7 @@ const TableEditor = (props) => {
                     <Header title={groupName} >
                         <span className="size">{groupSize}</span>
                     </Header>
-                    <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check}/>
+                    <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check} />
                 </Fragment>
             )
         })
@@ -297,6 +300,7 @@ const TableEditor = (props) => {
             .map(field => ({ label: field.label, value: field.id }))
     }
 
+    console.log('table page checked', pageContext.checked)
     return (
         <Fragment>
             <Header icon={icon} title={<Text>{title}</Text>}>
@@ -319,6 +323,7 @@ const TableContext = (url, field) => {
     return {
 
         all: [],
+        checked: new Set(),
         selected: null,
         filters: {},
 
@@ -339,6 +344,14 @@ const TableContext = (url, field) => {
             return
         },
 
+        check(ids, isChecked = true) {
+            if (isChecked) {
+                ids.forEach(id => this.checked.add(id))
+            } else {
+                ids.forEach(id => this.checked.delete(id))
+            }
+        },
+
         select(id) {
             const result = this.all.find(item => item.id === id);
             this.selected = result;

package/src/html/table.js

@@ -1,10 +1,12 @@
 import React, { Fragment, useState } from 'react'
+import { DropDown, TextField } from './textfield'
 import { CheckBox } from './checkbox'
 import { Icon } from './icon'
 import { Text } from './text'
-import { DropDown, TextField } from './textfield'
 import './table.css'
 
+const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
+
 /**
  * DataTable
  */
@@ -60,9 +62,9 @@ export const DataTable = (props) => {
         if (onSort) onSort(dragged, dropped)
     }
 
-    function checkAll() {
+    function checkAll(id, value) {
         const ids = rows.map(row => row.id)
-        if (onCheckAll) onCheckAll(ids)
+        if (onCheckAll) onCheckAll(ids, value)
     }
 
     const style = outlined ? "outlined" : ""
@@ -75,7 +77,7 @@ export const DataTable = (props) => {
                             const sort = sortDir[id] ? sortDir[id] : null
                             return (
                                 <th>
-                                    {id === "checked" ? <CheckBox action={checkAll}/> : <Text>{label}</Text>}
+                                    {id === "checked" ? <CheckBox onChange={checkAll}/> : <Text>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
                             )
@@ -98,12 +100,12 @@ export const DataTable = (props) => {
  * DataTable Row
  */
 const DataTableRow = (props) => {
+
     const { row, columns = [], onSelect, editable } = props
+
     const [isInfoOpen, toggleInfo] = useState(false)
     const infoIcon = isInfoOpen ? 'expand_more' : 'expand_less'
 
-    const isFunction = value => value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
-
     return (
         <Fragment>
             <tr onClick={ev => onSelect(row, ev)}>