ywana-core8 0.0.942 → 0.0.944

package/package.json

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

package/src/html/tab.js

@@ -10,7 +10,8 @@ export const Tabs = (props) => {
 
   const { children, selected, onChange, fillLeft=false, fillRight=true } = props
 
-  const tabs = React.Children.map(children, (child, index) => {
+  const notNullChildren = React.Children.toArray(children).filter(child => child !== null)
+  const tabs = notNullChildren.map((child, index) => {
 
     function select(id) {
       if (onChange) onChange(id || index)
@@ -61,9 +62,9 @@ export const Tab = (props) => {
 
   const { selected = 0 } = props
 
-  const child = React.Children
-    .toArray(props.children)
-    .filter((child, index) => index === selected )[0]
+  const notNullChildren = React.Children.toArray(props.children).filter(child => child !== null)
+
+  const child = notNullChildren.filter((child, index) => index === selected )[0]
   
   return (
     <Fragment>

package/src/html/tab.test.js

@@ -1,16 +1,25 @@
 import React, { useState } from 'react'
-import { Icon } from '.'
+import { Icon, Stack } from '.'
 import { Tabs, Tab } from './tab'
 
 const TabTest = (prop) => {
 
+    const [selected, setSelected] = useState(0)
+
     return (
         <>
-            <Tabs>
+            <Tabs selected={selected} onChange={(id) => setSelected(id) }>
+                {null}
                 <Tab label="tab1" action={<Icon icon="close" size="small" />} />
                 <Tab label="tab2" action={<Icon icon="close" size="small" />} />
                 <Tab label="tab3" action={<Icon icon="close" size="small" />} />
             </Tabs>
+            <Stack selected={selected}>
+                <div>Content 1</div>
+                {null}
+                <div>Content 2</div>
+                <div>Content 3</div>
+            </Stack>
         </>
     )
 }

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>
     )
 }

package/src/incubator/planner.js

@@ -41,6 +41,10 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
     if (onSelectCell) onSelectCell(cell)
   }
 
+  function drop() {
+    //TODO
+  }
+
   const uniqueMonths = Array.from(
     new Set(days.map(({ month }) => month))
   );
@@ -108,7 +112,12 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
               });
               const weekendClass = isWeekend ? 'weekend' : '';
               return (
-                <div className={`content-cell ${weekendClass}`} style={{ minWidth: dayWidth, maxWidth: dayWidth }} key={`content${index}_${year}-${month}-${day}`} onClick={() => selectCell({ lane: lane.id, date: dayDate })}>
+                <div
+                  key={`content${index}_${year}-${month}-${day}`}
+                  className={`content-cell ${weekendClass}`} style={{ minWidth: dayWidth, maxWidth: dayWidth }}
+                  onClick={() => selectCell({ lane: lane.id, date: dayDate })}
+                  onDrop={drop}
+                >
                   {dayEvents.map((event, index) => <EventRenderer key={`${event.id}-${index}`} event={event} />)}
                 </div>
               )