ywana-core8 0.0.943 → 0.0.945

package/package.json

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

package/src/html/tab.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Fragment } from 'react'
-import { Icon, TEXTFORMATS, Text } from '../html'
+import { Icon } from './icon'
+import { Text, TEXTFORMATS } from './text'
 import './tab.css'
 
 /**

package/src/html/table.js

@@ -13,7 +13,7 @@ const isFunction = value => value && (Object.prototype.toString.call(value) ===
  */
 export const DataTable = (props) => {
 
-    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className, emptyMessage = "No Results Found", multisort = false, filterable = false } = props
+    const { columns = [], rows = [], onRowSelection, onSort, onCheckAll, editable, outlined, expanded = false, className, emptyMessage = "No Results Found", multisort = false, filterable = false, onClearFilters } = props
     const [sortDir, setSortDir] = useState({})
     const [allChecked, setAllChecked] = useState(false)
 
@@ -145,19 +145,41 @@ export const DataTable = (props) => {
     )
 }
 
+/**
+ * DataTableFiltersRow
+ */
 const DataTableFiltersRow = ({ columns }) => {
+
+    const [form, setForm] = useState({})
+
+    function changeFilter(id, value, onFilter) {
+        setForm({ ...form, [id]: value })
+        if (onFilter) onFilter(value)
+    }
+
+    function clear() {
+        setForm({})
+    }
+
+    const dirty = Object.keys(form).length > 0  // dirty if there are filters set
+
     return (
         <tr className="filters-row">
             {columns.map(({ id, filterable, onFilter, options }) => {
 
-                const field = options ? <DropDown id={id} options={options} onChange={onFilter} outlined /> : <TextField id={id} onChange={onFilter} outlined /> 
-
+                const field = options ? 
+                    <DropDown id={id} value={form[id]} options={options} onChange={(id,value) => changeFilter(id,value, onFilter)} outlined /> 
+                    : 
+                    <TextField id={id} value={form[id]} onChange={(id,value) => changeFilter(id,value, onFilter)} outlined /> 
                 return (
                     <td className='filter-cell'>
                         {filterable ? field : null}
                     </td>
                 )
             })}
+            <td>
+                <Icon icon="close" size="small" clickable action={clear} disabled={!dirty} />
+            </td>
         </tr>
     )
 }