ywana-core8 0.0.549 → 0.0.552

package/package.json

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

package/src/site/site.js

@@ -9,8 +9,6 @@ import { ReactNotifications, Store } from 'react-notifications-component'
 import 'react-notifications-component/dist/theme.css'
 import './site.css'
 
-
-
 /**
  * Site Provider
  */

package/src/widgets/calendar/Calendar.css

@@ -0,0 +1,83 @@
+
+.calendar { 
+    margin: 0rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: .5rem;
+}
+
+.calendar>nav {
+    display: flex;
+    padding: .5rem;
+    display: flex;
+    align-items: center;
+}
+
+.calendar>nav>label {
+    flex: 1;
+    font-size: 1.3rem;
+    font-weight: 500;
+}
+
+.calendar>nav>button {
+    margin-left: 1px;
+}
+
+.calendar>header {
+    border: solid 1px var(--divider-color);
+    border-width: 1px 1px 0 0px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    font-size: .8rem;
+}
+
+.calendar>main {
+    flex: 1;
+    border: solid 1px var(--divider-color);
+    border-width: 1px 1px 0 0;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 0px;
+    grid-auto-rows: minmax(5rem, auto);
+    overflow: hidden;
+    font-size: .8rem;
+}
+
+.week-day-cell {
+    border-left: solid 1px var(--divider-color);
+    padding: 2px;
+    text-align: center;
+    min-width: 5rem;
+}
+
+.day-cell {
+    border: solid 1px var(--divider-color);
+    border-width: 0 0 1px 1px;
+    padding: .5rem;
+    text-align: right;
+    min-height: 5rem;
+    min-width: 5rem;
+}
+
+.day-cell.today>header {
+    background-color: var(--primary-color-lighter);
+    padding: .3rem
+}
+
+.day-cell:hover {
+    background-color: rgba(200,200,200,.1);
+    cursor: pointer;
+}
+
+.day-cell.today:hover {
+    background-color: var(--primary-color-lighter);
+}
+
+.day-cell .event {
+    background-color: var(--primary-color);
+    color: var(--primary-color-text);
+    padding: .3rem;
+    border-radius: 3px;
+    margin: 3px 1px;
+}

package/src/widgets/calendar/Calendar.js

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react'
+import { Button } from '../../html'
+import Moment from 'moment'
+import { extendMoment } from 'moment-range';
+import 'moment/locale/es'
+import './Calendar.css'
+
+Moment.locale('es')
+const moment = extendMoment(Moment)
+
+export const Calendar = (props) => {
+
+    const { events = [], children, onChange } = props
+    const [position, setPosition] = useState()
+
+    useEffect(() => {
+        const today = moment()
+        setPosition(today)
+    }, [])
+
+    useEffect(() => {
+        if (onChange) {
+            const firstDayOfMonth = position.clone().startOf('month');
+            const firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
+            const lastDayOfMonth = position.clone().endOf('month');
+            const lastDayOfRange = lastDayOfMonth.clone().endOf('isoweek');
+            const range = moment.range(firstDayOfRange, lastDayOfRange)
+            onChange(position, range)
+        }
+    }, [position])
+
+    function next() {
+        const next = position.clone().add(1, 'month')
+        setPosition(next)
+    }
+
+    function prev() {
+        const prev = position.clone().subtract(1, 'month')
+        setPosition(prev)
+    }
+
+    function today() {
+        const today = moment()
+        setPosition(today)  
+    }
+
+    if (!position) return "..."
+
+    const monthName = position.format("MMMM")
+    const year = position.format("YYYY")
+    const firstDayOfMonth = position.clone().startOf('month');
+    const firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
+    const lastDayOfMonth = position.clone().endOf('month');
+    const lastDayOfRange = lastDayOfMonth.clone().endOf('isoweek');
+    const range = moment.range(firstDayOfRange, lastDayOfRange)
+    const days = Array.from(range.by('days'))
+
+    const cells = days.map(day => {
+        const dayEvents = events.filter(event => {
+            const eventDate = moment(event.date, "YYYY-MM-DD")
+            return eventDate.isSame(day, 'day')
+        })
+        return { day, events: dayEvents }
+    })
+
+    return (
+        <div className="calendar">
+            <nav>
+                <label> {monthName} {year}</label>
+                <Button icon="chevron_left" raised action={prev} />
+                <Button label="Hoy" outlined action={today}/>
+                <Button icon="chevron_right" raised action={next} />
+            </nav>
+            <header>
+                <div className='week-day-cell'>Lun</div>
+                <div className='week-day-cell'>Mar</div>
+                <div className='week-day-cell'>Mié</div>
+                <div className='week-day-cell'>Jue</div>
+                <div className='week-day-cell'>Vie</div>
+                <div className='week-day-cell'>Sab</div>
+                <div className='week-day-cell'>Dom</div>
+            </header>
+            <main>
+                {cells.map(cell => <DayCell cell={cell} >{children}</DayCell>)}
+            </main>
+        </div>
+    )
+}
+
+const DayCell = (props) => {
+    const { cell = [], children } = props
+    const {day, events} = cell
+    const todayStyle = day.isSame(moment(), 'day') ? 'today' : ''
+
+    return (
+        <div className={`day-cell ${todayStyle}`}>
+            <header>
+                {day.format("DD")}
+            </header>
+            <main>
+                {events.map(event => <Event key={event.id} event={event} >{children}</Event>)}
+            </main>
+        </div>
+    )
+}
+
+const Event = (props) => {
+    const { event, children } = props
+    if (children) {
+        const element = React.Children.toArray(children)[0]
+        return React.cloneElement(element, { event })
+    } else {
+        return (
+            <div className="event">
+                <div className="event-name">
+                    {event.title}
+                </div>
+            </div>
+        )
+    }
+}

package/src/widgets/calendar/Calendar.test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Calendar } from './Calendar'
+import moment from 'moment'
+
+const CalendarTest = (prop) => {
+
+    const events = [
+        { id: 1, date: "2022-05-26", title: 'Event 1' },
+        { id: 1, date: "2022-05-27", title: 'Event 1' },
+        { id: 1, date: "2022-05-28", title: 'Event 1' },
+        { id: 1, date: "2022-05-29", title: 'Event 1' },
+    ]
+
+    return (
+        <Calendar events={events} >
+            <CustomEvent />
+        </Calendar>
+    )
+}
+
+const CustomEvent = (props) => {    
+    const { event } = props
+    return (
+        <div className="custom-event" onClick={() => alert("!xxx")}>
+           C {event.title}
+        </div>
+    )
+}

package/src/widgets/index.js

@@ -4,6 +4,7 @@ export * from './viewer/Viewer'
 export * from './kanban/Kanban'
 export * from './avatar/avatar'
 export * from './waiter'
+export * from './calendar/Calendar'
 export * from './planner/Planner'
 export * from './upload'
 export * from './explorer/Explorer'