ywana-core8 0.0.918 → 0.0.919

package/package.json

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

package/src/html/button.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useCallback } from 'react'
 import { Icon } from './icon'
 import { Text } from './text'
 import './button.css'
@@ -8,19 +8,19 @@ import './button.css'
  */
 export const Button = ({ label, icon, action, disabled = false, outlined, raised, className, progress = 0 }) => {
 
-    function click(event) {
+    const click = useCallback((event) => {
         if (!disabled) {
             event.stopPropagation();
             event.preventDefault();
             if (action) action()
         }
-    }
+    }, [disabled, action]);
 
     let style = raised ? 'raised' : outlined ? 'outlined' : 'normal'
     if (disabled) style = `${style} disabled`
     return (
         <button className={`btn ${style} ${className}`} onClick={click}>
-            {icon ? <Icon icon={icon} size="small" clickable action={click} /> : null}
+            {icon && <Icon icon={icon} size="small" clickable action={click} /> }
             <Text>{label}</Text>
         </button>
     )

package/src/incubator/index.js

@@ -1,4 +1,5 @@
 export { Wizard, WizardContext } from './wizard'
 export { TaskContextProvider, TaskContext, TaskMonitor, TaskProgress, TASK_STATES } from './task'
 export { UploadForm } from './upload'
+export { Planner2 } from './planner'
 export * from './password'

package/src/incubator/planner.css

@@ -0,0 +1,106 @@
+.planner2-row {
+    overflow-x: auto;
+}
+
+.months-row {
+    position: sticky;
+    top: 0px;
+    background-color: var(--paper-color);
+    z-index: 2;
+}
+
+.month-cell {
+    border: solid 1px rgb(220, 220, 220);
+    border-width: 0 1px 1px 0;
+    min-width: 3rem;
+    height: 1.4rem;
+}
+
+.month-name{
+    width: 10rem;
+    position: sticky;
+    left: 12rem;
+}
+
+.days-row {
+    position: sticky;
+    top: 1.4rem;
+    background-color: var(--paper-color);
+    z-index: 2;
+}
+
+.day-cell {
+    padding: .5rem 0;
+    border: solid 1px rgb(220, 220, 220);
+    border-width: 0 1px 1px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.weekday {
+    font-size: .6rem;
+    font-weight: 400;
+    color:rgb(143, 143, 143)
+}
+
+.daynum {
+    font-size: .8rem;
+    font-weight: 600;
+    padding: .2rem 0;
+}
+
+.content-rows {
+}
+
+.content-row {
+    display: flex;
+}
+
+.content-cell {
+    border: solid 1px rgb(220, 220, 220);
+    border-width: 0 1px 1px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background-color);
+    padding: .5rem;
+}
+
+.row-header {
+    position: sticky;
+    left: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: solid 1px rgb(220, 220, 220);
+    border-width: 0 1px 1px 0;
+    background-color: var(--paper-color);
+    z-index: 1;
+}
+
+.event-card {
+    width: 100%;
+    height: 5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    margin: .2rem;
+    border: solid 1px black;
+}
+
+.event-card.compact {
+    width: 100%;
+    height: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    margin: .5rem 0;
+    border: solid 1px var(--divider-color);
+    border-radius: 4px;
+}

package/src/incubator/planner.js

@@ -0,0 +1,148 @@
+import React, { useEffect, useState } from 'react'
+import "./planner.css"
+
+export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, rowHeaderWidth = 10, EventRenderer }) => {
+
+  const [days, setDays] = useState([]);
+  const lastDay = new Date(to);
+
+  useEffect(() => {
+    const day = new Date(from);
+    const nextDays = [];
+    while (day <= lastDay) {
+      nextDays.push({
+        day: day.getDate(),
+        weekday: day.toLocaleString('en-US', { weekday: 'short' }),
+        month: day.toLocaleString('en-US', { month: 'short' }),
+        monthNum: day.getMonth() + 1,
+        year: day.getFullYear(),
+      });
+      day.setDate(day.getDate() + 1);
+    }
+    setDays(nextDays);
+  }, [from, to])
+
+  const uniqueMonths = Array.from(
+    new Set(days.map(({ month }) => month))
+  );
+
+  const monthWidths = uniqueMonths.map((month) => {
+    const monthDays = days.filter((day) => day.month === month);
+    return `${monthDays.length * cellWidth}rem`;
+  });
+
+  const dayWidth = `${cellWidth}rem`;
+  const totalDaysWidth = (days.length * (cellWidth)) + rowHeaderWidth;
+
+  return (
+    <div className='planner2-row'>
+
+      <div className="months-row" style={{ display: 'flex', width: `${totalDaysWidth}rem` }}>
+        <div className="row-header" style={{ width: `${rowHeaderWidth}rem` }} >
+        </div>
+        {uniqueMonths.map((month, index) => (
+          <div
+            className="month-cell"
+            key={month}
+            style={{
+              fontWeight: 'bold',
+              minWidth: monthWidths[index],
+            }}
+          >
+            <div className="month-name">
+              {month} {new Date(from).getFullYear()}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="days-row" style={{ display: 'flex', width: `${totalDaysWidth}rem` }}>
+        <div className="row-header" style={{ width: `${rowHeaderWidth}rem` }}>
+        </div>
+        {days.map(({ day, weekday, month }) => (
+          <div className='day-cell' style={{ minWidth: dayWidth, maxWidth: dayWidth }} key={`day_${month}-${day}`}>
+            <div className="weekday">{weekday.substring(0, 2)}</div>
+            <div className="daynum">{day}</div>
+          </div>
+        ))}
+      </div>
+
+      {lanes.map((lane, index) => {
+        const laneEvents = events.filter((event) => event.lane === lane.id);
+        return (
+          <div className="content-row" style={{ width: `${totalDaysWidth}rem` }}>
+            <div className="row-header" style={{ width: `${rowHeaderWidth}rem` }}>
+              {lane.title}
+            </div>
+            {days.map(({ day, weekday, month, monthNum, year }) => {
+              const dayDate = new Date(year, monthNum - 1, day);
+              const dayEvents = laneEvents.filter((event) => {
+                const eventDate = new Date(event.date);
+                return eventDate.getDate() === dayDate.getDate() &&
+                  eventDate.getMonth() === dayDate.getMonth() &&
+                  eventDate.getFullYear() === dayDate.getFullYear();
+              });
+              return (
+                <div className="content-cell" style={{ minWidth: dayWidth, maxWidth: dayWidth }} key={`content${index}_${month}-${day}`}>
+                    {dayEvents.map((event) => <EventRenderer key={event.id} event={event} />)}
+                </div>
+              )
+            })}
+          </div>
+        )
+      })}
+    </div>
+  );
+};
+
+const EventCard = (props) => {
+  const { event = {} } = props
+  const { id, title, color } = event
+
+  function drag(ev) {
+    ev.dataTransfer.setData("text", id);
+  }
+
+  let style = { backgroundColor: event.color, color: "white" }
+  return (
+    <div draggable onDragStart={drag} id={id} className={`event-card compact`} style={style}>
+      {title}
+    </div>
+  )
+}
+
+const CalendarTest = (props) => {
+
+  const lanes = [
+    { id: "1", title: "Lane 1" },
+    { id: "2", title: "Lane 2" },
+    { id: "3", title: "Lane 3" },
+    { id: "4", title: "Lane 4" },
+    { id: "5", title: "Lane 5" },
+    { id: "6", title: "Lane 6" },
+    { id: "7", title: "Lane 7" },
+    { id: "8", title: "Lane 8" },
+  ]
+
+  const events = [
+    { id: "1", lane: "1", date: "2023-01-04", color: "yellow", title: "Event One" },
+    { id: "1", lane: "1", date: "2023-01-04", color: "yellow", title: "Event One" },
+    { id: "1", lane: "1", date: "2023-01-05", color: "yellow", title: "Event One" },
+    { id: "2", lane: "1", date: "2023-01-05", color: "red", title: "Event One" },
+    { id: "3", lane: "1", date: "2023-01-05", color: "blue", title: "Event One" },
+    { id: "4", lane: "1", date: "2023-01-05", color: "red", title: "Event One" },
+    { id: "5", lane: "2", date: "2023-01-04", color: "yellow", title: "Event One" },
+    { id: "6", lane: "2", date: "2023-01-05", color: "red", title: "Event One" },
+    { id: "7", lane: "2", date: "2023-01-06", color: "blue", title: "Event One" },
+    { id: "8", lane: "2", date: "2023-01-07", color: "red", title: "Event One" },
+    { id: "9", lane: "3", date: "2023-01-04", color: "yellow", title: "Event One" },
+    { id: "10", lane: "3", date: "2023-01-05", color: "red", title: "Event One" },
+    { id: "11", lane: "3", date: "2023-01-06", color: "blue", title: "Event One" },
+  ]
+
+  return (
+    <>
+      <Planner2 from="2023-01-03" to="2023-01-13" lanes={lanes} events={events} EventRenderer={EventCard} />
+    </>
+  )
+}

package/src/incubator/calendar.css

@@ -1,41 +0,0 @@
-.calendar-row {
-    border: solid 1px rgb(0, 0, 0);
-    overflow-x: auto;
-}
-
-.months-row {
-    display: flex;
-    overflow: visible;
-}
-
-.month-cell {
-    border: solid 1px rgb(220, 220, 220);
-    min-width: 3rem;
-    height: 1.4rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.day-cell {
-    padding: .5rem 0;
-    border: solid 1px rgb(220, 220, 220);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-}
-
-.weekday {
-    font-size: .6rem;
-    font-weight: 400;
-    color:rgb(143, 143, 143)
-}
-
-.daynum {
-    font-size: .8rem;
-    font-weight: 600;
-    padding: .2rem 0;
-}

package/src/incubator/calendar.js

@@ -1,66 +0,0 @@
-import React from 'react'
-import "./calendar.css"
-
-
-  export const Calendar = ({ from, to }) => {
-    const days = [];
-    const day = new Date(from);
-    const lastDay = new Date(to);
-    while (day <= lastDay) {
-      days.push({
-        day: day.getDate(),
-        weekday: day.toLocaleString('en-US', { weekday: 'short' }),
-        month: day.toLocaleString('en-US', { month: 'short' }),
-      });
-      day.setDate(day.getDate() + 1);
-    }
-  
-    const uniqueMonths = Array.from(
-      new Set(days.map(({ month }) => month))
-    );
-  
-    const monthWidths = uniqueMonths.map((month) => {
-      const monthDays = days.filter((day) => day.month === month);
-      return `${monthDays.length * 2}rem`;
-    });
-  
-    const dayWidth = '2rem';
-  
-    return (
-      <div className='calendar-row'>
-        <div className="months-row" style={{ display: 'flex' }}>
-          {uniqueMonths.map((month, index) => (
-            <div
-            className="month-cell"
-              key={month}
-              style={{
-                flex: '0 0 auto',
-                textAlign: 'center',
-                fontWeight: 'bold',
-                width: monthWidths[index],
-              }}
-            >
-              {month} {new Date(from).getFullYear()}
-            </div>
-          ))}
-        </div>
-        <div style={{ display: 'flex' }}>
-          {days.map(({ day, weekday, month }) => (
-            <div className='day-cell' key={day} style={{ flex: 1, textAlign: 'center', minWidth: dayWidth }}>
-              <div className="weekday">{weekday.substring(0,2)}</div>
-              <div className="daynum">{day}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  };
-
-
-const CalendarTest = (props) => {
-    return (
-        <>
-        <Calendar from="2023-01-01" to="2023-03-03" />
-        </>
-    )
-}