ywana-core8 0.0.947 → 0.0.949

package/package.json

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

package/src/html/table.js

@@ -123,7 +123,7 @@ export const DataTable = (props) => {
                 </thead>
                 <tbody>
 
-                    {filterable ? <DataTableFiltersRow columns={columns} /> : null}
+                    {filterable ? <DataTableFiltersRow columns={columns} onClear={onClearFilters} /> : null}
 
                     {rows.length > 0 ?
                         multiSort(rows, sortDir).map((row, index) => (
@@ -148,7 +148,7 @@ export const DataTable = (props) => {
 /**
  * DataTableFiltersRow
  */
-const DataTableFiltersRow = ({ columns }) => {
+const DataTableFiltersRow = ({ columns, onClear }) => {
 
     const [form, setForm] = useState({})
 
@@ -159,7 +159,7 @@ const DataTableFiltersRow = ({ columns }) => {
 
     function clear() {
         setForm({})
-        if (onFilter) onFilter({})
+        if (onClear) onClear()
     }
 
     const dirty = Object.keys(form).length > 0  // dirty if there are filters set

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,7 @@ 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 && laneEvents.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` }} >

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} />
+}