ywana-core8 0.0.409 → 0.0.410

package/package.json

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

package/src/html/table.js

@@ -15,6 +15,7 @@ export const DataTable = (props) => {
 
     const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false } = props
     const [sortDir, setSortDir] = useState({})
+    const [allChecked, setAllChecked] = useState(false)
 
     function multiSort(array, sortObject = {}) {
 
@@ -65,6 +66,7 @@ export const DataTable = (props) => {
 
     function checkAll(id, value) {
         const ids = rows.map(row => row.id)
+        setAllChecked(value)
         if (onCheckAll) onCheckAll(ids, value)
     }
 
@@ -79,7 +81,7 @@ export const DataTable = (props) => {
                             const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v=>v.column===true).length] : [2, 1]
                             return (
                                 <th key={id} rowSpan={rowspan} colSpan={colspan}>
-                                    {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text key={`th_${id}`}>{label}</Text>}
+                                    {id === "checked" ? <CheckBox onChange={checkAll} value={allChecked} /> : <Text key={`th_${id}`}>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
                             )

package/src/html/table.test.js

@@ -3,6 +3,14 @@ import { DataTable } from './table'
 
 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" }
+        ]
+    )
+
     function select(row) {
         console.log('select',row)
     }
@@ -11,6 +19,11 @@ const TableTest = (prop) => {
         console.log('check', id, checked, c)
     }
 
+    function checkAll(ids, checked) {
+        const next = rows.map( row => Object.assign({}, row, { checked }))
+        setRows(next)
+    }
+
     const table = {
         columns : [
             { id: "checked", onChange: check },
@@ -18,15 +31,12 @@ const TableTest = (prop) => {
             { id: "thumb", label: "Thumb", type: "String", format: "IMG" },
 
         ],
-        rows: [
-            { checked: true, name: "John Smith", thumb: "https://w7.pngwing.com/pngs/881/826/png-transparent-pikachu-ash-ketchum-pokemon-vrste-pikachu-leaf-flower-meme-thumbnail.png"},
-            { checked: false, name: "Ann Martin" },
-        ]
+        rows
     }
 
     return (
         <>
-           <DataTable {...table} onRowSelection={select}/>
+           <DataTable {...table} onRowSelection={select} onCheckAll={checkAll}/>
         </>
     )
 }

package/src/html/tokenfield.css

@@ -1,5 +1,4 @@
 .tokenField {
-    max-height: 3.8rem;
     min-height: 3.8;
     position: relative;
     border-bottom: solid 1px var(--divider-color);