ywana-core8 0.0.95 → 0.0.99

package/package.json

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

package/src/domain/TablePage.js

@@ -224,6 +224,10 @@ const TableEditor = (props) => {
         setPageContext(Object.assign({}, pageContext))
     }
 
+    async function check(ids = []) {
+        console.log("check: ", ids)
+    }
+
     function run(action, item) {
         action.action(item.id, pageContext, async () => {
             await pageContext.load()
@@ -281,7 +285,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>
             )
         })

package/src/html/table.js

@@ -10,7 +10,7 @@ import './table.css'
  */
 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 +60,11 @@ export const DataTable = (props) => {
         if (onSort) onSort(dragged, dropped)
     }
 
+    function checkAll() {
+        const ids = rows.map(row => row.id)
+        if (onCheckAll) onCheckAll(ids)
+    }
+
     const style = outlined ? "outlined" : ""
     return (
         <div className={`datatable8 ${style}`}>
@@ -70,7 +75,7 @@ export const DataTable = (props) => {
                             const sort = sortDir[id] ? sortDir[id] : null
                             return (
                                 <th>
-                                    <Text>{label}</Text>
+                                    {id === "checked" ? <CheckBox action={checkAll}/> : <Text>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>
                             )
@@ -80,7 +85,7 @@ export const DataTable = (props) => {
                 <tbody>
                     {
                         multiSort(rows, sortDir).map(row => (
-                            <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={sort} editable={editable}/>
+                            <DataTableRow key={row.id} row={row} columns={columns} onSelect={select} onDrop={sort} editable={editable} />
                         ))
                     }
                 </tbody>
@@ -102,7 +107,7 @@ const DataTableRow = (props) => {
     return (
         <Fragment>
             <tr onClick={ev => onSelect(row, ev)}>
-                {columns.map(column => <DataTableCell row={row} column={column} cell={row[column.id]} editable={editable}/>)}
+                {columns.map(column => <DataTableCell row={row} column={column} cell={row[column.id]} editable={editable} />)}
                 {row.info ? <Icon icon={infoIcon} clickable action={() => toggleInfo(!isInfoOpen)} /> : null}
             </tr>
             {row.info && isInfoOpen ? (
@@ -121,8 +126,8 @@ const DataTableCell = ({ row, column, cell, editable }) => {
 
     const render = (type) => {
         const { id, disabled = false, min, max, onChange, options } = column
-        if (id="checked") {
-            <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
+        if (id === "checked") {
+            return <CheckBox id={id} value={cell} onChange={(id, value) => onChange(row.id, id, value)} />
         } else if (editable && onChange) {
             switch (type) {
                 case "ICON": return <Icon icon={cell} />
@@ -155,7 +160,7 @@ const DataTableCell = ({ row, column, cell, editable }) => {
  * Boolean Cell Viewer
  */
 const BooleanCellViewer = ({ id, value = false }) => {
-    const icon = value === true ?  "check_box" : "check_box_outline_blank"
+    const icon = value === true ? "check_box" : "check_box_outline_blank"
     return <Icon icon={icon} />
 }
 
@@ -163,7 +168,7 @@ const BooleanCellViewer = ({ id, value = false }) => {
  * String Cell Viewer
  */
 const StringCellViewer = ({ id, value, options }) => {
-    const option = options ? options.find( o => o.value === value) : null
+    const option = options ? options.find(o => o.value === value) : null
     const text = option ? option.label : value
     return (<div className="field-editor string-editor">{text}</div>)
 }