ywana-core8 0.0.286 → 0.0.289

package/package.json

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

package/src/html/checkbox.js

@@ -10,6 +10,8 @@ export const CheckBox = (props) => {
     const { id, label, placeholder, value, onChange } = props
 
     function change(event) {
+        event.stopPropagation()
+        event.preventDefault()
         const value = event.target.checked
         if (onChange) onChange(id, value)
     }

package/src/html/table.js

@@ -54,7 +54,9 @@ export const DataTable = (props) => {
     }
 
     function select(row, event) {
-        if (onRowSelection) onRowSelection(row, event)
+        if (event.target.id !== "checked") {
+            if (onRowSelection) onRowSelection(row, event)
+        }
     }
 
     function sort(dragged, dropped) {
@@ -76,7 +78,7 @@ export const DataTable = (props) => {
                             const sort = sortDir[id] ? sortDir[id] : null
                             const [rowspan, colspan] = type === TYPES.ENTITY ? [1, Object.values(item).filter(v=>v.column===true).length] : [2, 1]
                             return (
-                                <th rowSpan={rowspan} colSpan={colspan}>
+                                <th key={id} rowSpan={rowspan} colSpan={colspan}>
                                     {id === "checked" ? <CheckBox onChange={checkAll} /> : <Text key={`th_${id}`}>{label}</Text>}
                                     {sortable ? <Icon icon="arrow_up" size="small" clickable /> : null}
                                 </th>

package/src/html/table.test.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { DataTable } from './table'
+
+const TableTest = (prop) => {
+
+    function select(row) {
+        console.log('select',row)
+    }
+
+    function check(id,checked, c) {
+        console.log('check', id, checked, c)
+    }
+
+    const table = {
+        columns : [
+            { id: "checked", onChange: check },
+            { id: "name", label: "Name" },
+
+        ],
+        rows: [
+            { checked: true, name: "John Smith"},
+            { checked: false, name: "Ann Martin"},
+        ]
+    }
+
+    return (
+        <>
+           <DataTable {...table} onRowSelection={select}/>
+        </>
+    )
+}

package/src/widgets/planner/Planner.js

@@ -14,12 +14,21 @@ const DATE_RANGE = [
 /**
  * Planner
  */
-export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell }) => {
+export const Planner = ({ title, events = [], lanes = [], navigation = true, onSelectCell, focusEvent }) => {
 
     const [dateRange, setDateRange] = useState("month");
     const [from, setFrom] = useState("2021-02-26");
     const [to, setTo] = useState("2021-04-01");
 
+    useEffect(() => {
+        const element = document.getElementById(focusEvent)
+        if (element) element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'center'
+        })
+    }, [focusEvent])
+
     useEffect(() => {
         const today = moment();
         const from_date = today.startOf(dateRange).format("YYYY-MM-DD");

package/src/widgets/planner/Planner.test.js

@@ -1,13 +1,13 @@
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import { Planner } from './Planner'
 
 const EventCard = (props) => {
-    const { event } = props
-    const { title, color } = event
+    const { event={} } = props
+    const { id, title, color } = event
 
     let style = { backgroundColor : "red", color: "white" }
     return (
-        <div className={`event-card`} style={style}>
+        <div id={id} className={`event-card`} style={style}>
             {title}
         </div>
     ) 
@@ -15,6 +15,12 @@ const EventCard = (props) => {
 
 const PlannerTest = (prop) => {
 
+    const [event, setEvent] = useState()
+
+    useEffect(() => {
+        setEvent("3")
+    }, [])
+
     const lanes = [
         { id: "lane1", label: "Lane 1" },
         { id: "lane2", label: "Lane 2" },
@@ -26,12 +32,15 @@ const PlannerTest = (prop) => {
     ]
     
     const events = [
-        { lane: "lane1", date: "2022-02-01", color: "red", title : "Event One", Renderer: EventCard }
+        { id: "1", lane: "lane1", date: "2022-03-01", color: "red", title : "Event One", Renderer: EventCard },
+        { id: "2", lane: "lane1", date: "2022-03-22", color: "red", title : "Event One", Renderer: EventCard },
+        { id: "3", lane: "lane1", date: "2022-04-03", color: "red", title : "Event One", Renderer: EventCard },
+        { id: "4", lane: "lane1", date: "2022-03-04", color: "red", title : "Event One", Renderer: EventCard },
     ]
 
+
     return (
-     
-            <Planner title="Planner 1" lanes={lanes} events={events} navigation={true} onSelectCell={console.log}>
+            <Planner title="Planner 1" lanes={lanes} events={events} navigation={true} onSelectCell={console.log} focusEvent={event}>
 
             </Planner>