ywana-core8 0.0.942 → 0.0.943

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.0.942",
+  "version": "0.0.943",
   "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/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>
               )