ywana-core8 0.0.948 → 0.0.950

package/package.json

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

package/src/incubator/planner.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import "./planner.css"
 
-export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, rowHeaderWidth = 10, EventRenderer, onSelectCell }) => {
+export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, rowHeaderWidth = 10, EventRenderer, onSelectCell, hideEmptyRows=false}) => {
 
   const [days, setDays] = useState([]);
   const lastDay = new Date(to);
@@ -97,6 +97,22 @@ export const Planner2 = ({ from, to, lanes = [], events = [], cellWidth = 10, ro
 
       {lanes.map((lane, index) => {
         const laneEvents = events.filter((event) => event.lane === lane.id);
+        
+        if (hideEmptyRows) {
+         
+          // find days with event for this lane
+          const daysWithEvents = laneEvents.map(event => {
+            const eventDate = new Date(event.date);
+            return `${eventDate.getFullYear()}-${eventDate.getMonth() + 1}-${eventDate.getDate()}`;
+          });
+
+          if (daysWithEvents.length === 0) {
+            return null;
+          }
+
+        }
+
+
         return (
           <div className={`content-row ${lane.className}`} style={{ width: `${totalDaysWidth}rem` }}>
             <div className="row-header" style={{ minWidth: `${rowHeaderWidth}rem`, maxWidth: `${rowHeaderWidth}rem` }} >
@@ -176,7 +192,7 @@ const CalendarTest = (props) => {
 
   return (
     <>
-      <Planner2 from="2024-01-01" to="2024-12-01" lanes={lanes} events={events} EventRenderer={EventCard} />
+      <Planner2 from="2024-01-01" to="2024-12-01" lanes={lanes} events={events} EventRenderer={EventCard} hideEmptyRows />
     </>
   )
 }

package/src/widgets/chat/chat.css

@@ -0,0 +1,30 @@
+.chat {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: #f5f5f5;
+}
+
+.chat>.messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+}
+
+.chat>.messages>.message {
+    margin-bottom: 10px;
+}
+
+.chat>.messages>.message>.message-user {
+    font-weight: bold;
+}
+
+.chat>.messages>.message>.message-date {
+    font-size: 0.8em;
+    color: #666;
+}
+
+.chat>.messages>.message>.message-text {
+    margin-top: 5px;
+}

package/src/widgets/chat/chat.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import './chat.css'
+import { Button } from '../../html'
+
+/**
+ * Chat
+ */
+export const Chat = (props) => {
+
+    const { messages, user, onSend } = props
+    const [text, setText] = useState('')
+
+    function send() {
+        if (text) {
+            onSend({ user, text, date: new Date().toISOString() })
+            setText('')
+        }
+    }
+
+    return (
+        <div className="chat">
+            <div className="messages">
+                {messages.map((message, index) => (
+                    <div key={index} className="message">
+                        <div className="message-user">{message.user}</div>
+                        <div className="message-date">{message.date}</div>
+                        <div className="message-text">{message.text}</div>
+                    </div>
+                ))}
+            </div>
+            <div className="input">
+                <input type="text" value={text} onChange={e => setText(e.target.value)} />
+                <Button icon="send" label="Send" raised />
+            </div>
+        </div>
+    )
+}
+
+const ChatTest = () => {
+
+    const [messages, setMessages] = useState([
+        {
+            user: 'user1', text: 'Hello', date: new Date().toISOString()
+        }
+    ])
+
+    function onSend(message) {
+        setMessages([...messages, message])
+    }
+
+    return <Chat messages={messages} user="user2" onSend={onSend} />
+}