ywana-core8 0.0.97 → 0.0.101

package/package.json

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

package/src/domain/TablePage.js

@@ -224,6 +224,12 @@ const TableEditor = (props) => {
         setPageContext(Object.assign({}, pageContext))
     }
 
+    async function check(id, value) {
+        const ids = Array.isArray(id) ? id : [ id ]
+        pageContext.check(ids, value)
+        setPageContext(Object.assign({}, pageContext))
+    }
+
     function run(action, item) {
         action.action(item.id, pageContext, async () => {
             await pageContext.load()
@@ -257,7 +263,7 @@ const TableEditor = (props) => {
                             id: field.id,
                             label: field.label,
                             type: field.type,
-                            onChange: field.editable ? change : null,
+                            onChange: field.editable ? change : field.id === "checked" ? check : null,     /* checked has it´s own handler */
                             options
                         }
                     }),
@@ -281,7 +287,7 @@ const TableEditor = (props) => {
                     <Header title={groupName} >
                         <span className="size">{groupSize}</span>
                     </Header>
-                    <DataTable {...table} onRowSelection={select} editable={editable} />
+                    <DataTable {...table} onRowSelection={select} editable={editable} onCheckAll={check}/>
                 </Fragment>
             )
         })
@@ -293,6 +299,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>}>
@@ -315,6 +322,7 @@ const TableContext = (url, field) => {
     return {
 
         all: [],
+        checked: new Set(),
         selected: null,
         filters: {},
 
@@ -335,6 +343,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,16 +1,18 @@
 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
  */
 export const DataTable = (props) => {
 
-    const { columns = [], rows = [], onRowSelection, onSort, editable, outlined } = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined } = props
     const [sortDir, setSortDir] = useState({})
 
     function multiSort(array, sortObject = {}) {
@@ -60,6 +62,11 @@ export const DataTable = (props) => {
         if (onSort) onSort(dragged, dropped)
     }
 
+    function checkAll(id, value) {
+        const ids = rows.map(row => row.id)
+        if (onCheckAll) onCheckAll(ids, value)
+    }
+
     const style = outlined ? "outlined" : ""
     return (
         <div className={`datatable8 ${style}`}>
@@ -70,7 +77,7 @@ export const DataTable = (props) => {
                             const sort = sortDir[id] ? sortDir[id] : null
                             return (
                                 <th>
-                                    <Text>{label}</Text>
+                                    {id === "checked" ? <CheckBox onChange={checkAll}/> : <Text>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
                             )
@@ -93,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)}>