ywana-core8 0.0.909 → 0.0.911

package/package.json

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

package/src/widgets/calendar/Calendar.css

@@ -1,40 +1,161 @@
+.calendar {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+}
 
-.calendar { 
+.calendar-range-control {
+    margin: .3rem;
+    border: solid 1px var(--divider-color);
+    background-color: var(--background-color);
+    border-radius: 3px;
+    padding: .2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &>.btn {
+        flex: 1;
+        margin-left: 1rem;
+        border-radius: 2px;
+        background-color: var(--background-color);
+        &.outlined {
+            border: solid 1px var(--divider-color);
+            background-color: var(--paper-color);
+        }
+    }
+}
+
+.year-calendar {
     margin: 1rem;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     padding: 0rem;
-
 }
 
-.calendar>nav {
+.year-calendar>nav {
     display: flex;
     padding: .5rem;
     display: flex;
     align-items: center;
 }
 
-.calendar>nav>label {
+.year-calendar>nav>label {
     flex: 1;
     font-size: 1.3rem;
     font-weight: 500;
 }
 
-.calendar>nav>button {
+.year-calendar>nav>button {
     margin-left: 1px;
+    border-radius: 3px;
 }
 
-.calendar>header {
+.year-calendar>main {
+    flex: 1;
     border: solid 1px var(--divider-color);
-    border-top: 0px;
-    border-width: 1px 1px 0 0px;
+    border-width: 1px 1px 0 0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1rem;
+    grid-auto-rows: minmax(12rem, auto);
+    overflow: hidden;
+    font-size: .8rem;
+}
+
+.year-calendar .month-cell {
+    border-width: 0 0 1px 1px;
+    overflow: hidden;
+    padding: .5rem;
+    text-align: right;
+    font-weight: 400;
+    
+    &>nav {
+        display: flex;
+        padding: .5rem;
+        display: flex;
+        align-items: center;
+    }
+    
+    &>header {
+        display:flex;
+
+        &>.week-day-cell {
+            flex: 1;
+            border: solid 0px var(--divider-color);
+            padding: 2px;
+            text-align: right;
+            min-width: 2rem !important;
+        }
+    }
+    
+    &>main {
+        flex: 1;
+        border: solid 0px var(--divider-color);
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        grid-gap: 0px;
+        grid-auto-rows: minmax(2rem, auto);
+        overflow: hidden;
+        font-size: .8rem;
+
+        &>.day-cell {
+            border: solid 0px;
+            padding: .5rem;
+            text-align: right;
+            min-height: 1rem;
+            width: 1rem;
+            min-width: 1rem !important;
+            font-weight: 400;
+            color: var(--text-color);
+        }
+
+
+        &>.day-cell.other-month {
+            color: var(--text-color-lighter);
+        }
+
+    }
+}
+
+
+
+.month-calendar { 
+    margin: 1rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 0rem;
+
+}
+
+.month-calendar>nav {
+    display: flex;
+    padding: .5rem;
+    display: flex;
+    align-items: center;
+}
+
+.month-calendar>nav>label {
+    flex: 1;
+    font-size: 1.3rem;
+    font-weight: 500;
+}
+
+.month-calendar>nav>button {
+    margin-left: 1px;
+    border-radius: 3px;
+}
+
+.month-calendar>header {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     font-size: .8rem;
 }
 
-.calendar>main {
+.month-calendar>main {
     flex: 1;
     border: solid 1px var(--divider-color);
     border-width: 1px 1px 0 0;
@@ -58,7 +179,7 @@
     border-width: 0 0 1px 1px;
     padding: .5rem;
     text-align: right;
-    min-height: 5rem;
+    min-height: 6rem;
     min-width: 5rem;
     font-weight: 400;
 }

package/src/widgets/calendar/Calendar.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Button } from '../../html'
+import { Button, Text } from '../../html'
 import Moment from 'moment'
 import { extendMoment } from 'moment-range';
 import 'moment/locale/es'
@@ -8,8 +8,45 @@ import './Calendar.css'
 Moment.locale('es')
 const moment = extendMoment(Moment)
 
+/**
+ * Calendar
+ */
 export const Calendar = (props) => {
 
+    const { events = [], children, onChange } = props
+    const [range, setRange] = useState(props.range || "year")
+
+    function onChangeRange(range) {
+        setRange(range)
+    }
+
+    return (
+        <div className="calendar">
+            <CalendarRangeControl range={range} onChange={onChangeRange} />
+            {range === "year" && <YearCalendar events={events} onChange={onChange}>{children}</YearCalendar>}
+            {range === "month" && <MonthCalendar events={events} onChange={onChange} onRange={onChangeRange}>{children}</MonthCalendar>}
+        </div>
+    )
+}
+
+/**
+ * CalendarRangeControl
+ */
+const CalendarRangeControl = (props) => {
+    const { range, onChange } = props
+    return (
+        <div className="calendar-range-control">
+            <Button label="Year" outlined={range == "year"} action={() => onChange("year")} />
+            <Button label="Month" outlined={range == "month"} action={() => onChange("month")} />
+        </div>
+    )
+}
+
+/**
+ * MonthCalendar
+ */
+export const MonthCalendar = (props) => {
+
     const { events = [], children, onChange } = props
     const [position, setPosition] = useState()
 
@@ -58,33 +95,35 @@ export const Calendar = (props) => {
     const cells = days.map(day => {
 
         const eventsOfDay = events.filter(event => {
-            console.log(event.date, day.format("YYYY-MM-DD"))
             const eventDay = moment(event.date)
             return eventDay.isSame(day, 'day')
         })
 
+        const sameMonthStyle = day.isSame(moment(position), 'month') ? '' : 'other-month'
+
         return {
             day,
-            events: eventsOfDay
+            events: eventsOfDay,
+            sameMonthStyle
         }
     })
 
     return (
-        <div className="calendar">
+        <div className="month-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} />
+                <label> <Text>{monthName}</Text> {year}</label>
+                <Button icon="chevron_left" action={prev} />
+                <Button label="Today" outlined action={today} />
+                <Button icon="chevron_right" 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>
+                <div className='week-day-cell'><Text>Mon</Text></div>
+                <div className='week-day-cell'><Text>Tue</Text></div>
+                <div className='week-day-cell'><Text>Wed</Text></div>
+                <div className='week-day-cell'><Text>Thu</Text></div>
+                <div className='week-day-cell'><Text>Fri</Text></div>
+                <div className='week-day-cell'><Text>Sat</Text></div>
+                <div className='week-day-cell'><Text>Sun</Text></div>
             </header>
             <main>
                 {cells.map(cell => <DayCell key={cell.day} cell={cell} >{children}</DayCell>)}
@@ -95,10 +134,9 @@ export const Calendar = (props) => {
 
 const DayCell = (props) => {
     const { cell = [], children } = props
-    const { day, events } = cell
+    const { day, events, sameMonthStyle } = cell
     const todayStyle = day.isSame(moment(), 'day') ? 'today' : ''
-    const sameMonthStyle = day.isSame(moment(), 'month') ? '' : 'other-month'
-
+    
     return (
         <div className={`day-cell ${todayStyle} ${sameMonthStyle}`}>
             <header>
@@ -111,6 +149,9 @@ const DayCell = (props) => {
     )
 }
 
+/**
+ * Event
+ */
 const Event = (props) => {
     const { event, children } = props
     if (children) {
@@ -125,4 +166,132 @@ const Event = (props) => {
             </div>
         )
     }
-}
+}
+
+/**
+ * YearCalendar
+ */
+const YearCalendar = (props) => {
+
+    const { events = [], children, onChange } = props
+    const [position, setPosition] = useState()
+
+    useEffect(() => {
+        const today = moment()
+        setPosition(today)
+    }, [])
+
+    useEffect(() => {
+        if (position && onChange) {
+            const firstDayOfYear = position.clone().startOf('year');
+            const firstDayOfRange = firstDayOfYear.clone().startOf('isoweek');
+            const lastDayOfYear = position.clone().endOf('year');
+            const lastDayOfRange = lastDayOfYear.clone().endOf('isoweek');
+            const range = moment.range(firstDayOfRange, lastDayOfRange)
+            onChange(position, range)
+        }
+    }, [position])
+
+    function next() {
+        const next = position.clone().add(1, 'year')
+        setPosition(next)
+    }
+
+    function prev() {
+        const prev = position.clone().subtract(1, 'year')
+        setPosition(prev)
+    }
+
+    function today() {
+        const today = moment()
+        setPosition(today)
+    }
+
+    if (!position) return "..."
+
+    const year = position.format("YYYY");
+    const firstDayOfYear = moment(position).startOf('year');
+    const lastDayOfYear = moment(position).endOf('year');
+    const months = [];
+
+    for (let currentMonth = moment(firstDayOfYear); currentMonth.isBefore(lastDayOfYear); currentMonth.add(1, 'month')) {
+        months.push(moment(currentMonth));
+    }
+
+    const cells = months.map(month => {
+
+        const firstDayOfMonth = month.clone().startOf('month');
+        const firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
+        const lastDayOfMonth = month.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 eventsOfDay = events.filter(event => {
+                const eventDay = moment(event.date)
+                return eventDay.isSame(day, 'day')
+            })
+
+            const sameMonthStyle = day.isSame(moment(month), 'month') ? '' : 'other-month'
+
+            return {
+                day,
+                events: eventsOfDay,
+                sameMonthStyle
+            }
+        })
+
+        return {
+            month,
+            cells
+        }
+    })
+
+
+    return (
+        <div className="year-calendar">
+            <nav>
+                <label> <Text>{year}</Text></label>
+                <Button icon="chevron_left" action={prev} />
+                <Button label="Today" outlined action={today} />
+                <Button icon="chevron_right" action={next} />
+            </nav>
+            <main>
+                {cells.map(cell => <MonthCell key={cell.month} cell={cell} >{children}</MonthCell>)}
+            </main>
+        </div>
+    )
+}
+
+/**
+ * MonthCell
+ */
+const MonthCell = (props) => {
+    const { cell = [], children } = props
+    const { month, cells } = cell
+    const monthName = month.format("MMMM")
+
+    return (
+        <div className={`month-cell`}>
+            <nav>
+                {monthName}
+            </nav>
+            <header>
+                <div className='week-day-cell'><Text>Mon</Text></div>
+                <div className='week-day-cell'><Text>Tue</Text></div>
+                <div className='week-day-cell'><Text>Wed</Text></div>
+                <div className='week-day-cell'><Text>Thu</Text></div>
+                <div className='week-day-cell'><Text>Fri</Text></div>
+                <div className='week-day-cell'><Text>Sat</Text></div>
+                <div className='week-day-cell'><Text>Sun</Text></div>
+            </header>
+            <main>
+                {cells.map(cell => <DayCell key={cell.day} cell={cell} >{children}</DayCell>)}
+            </main>
+        </div>
+    )
+}
+
+