ywana-core8 0.0.910 → 0.0.911

package/dist/index.umd.js

@@ -3208,14 +3208,70 @@
 
     moment__default["default"].locale('es');
     var moment = momentRange.extendMoment(moment__default["default"]);
+
+    /**
+     * Calendar
+     */
     var Calendar = function Calendar(props) {
       var _props$events = props.events,
         events = _props$events === void 0 ? [] : _props$events,
         children = props.children,
         onChange = props.onChange;
-      var _useState = React.useState(),
-        position = _useState[0],
-        setPosition = _useState[1];
+      var _useState = React.useState(props.range || "year"),
+        range = _useState[0],
+        setRange = _useState[1];
+      function onChangeRange(range) {
+        setRange(range);
+      }
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "calendar"
+      }, /*#__PURE__*/React__default["default"].createElement(CalendarRangeControl, {
+        range: range,
+        onChange: onChangeRange
+      }), range === "year" && /*#__PURE__*/React__default["default"].createElement(YearCalendar, {
+        events: events,
+        onChange: onChange
+      }, children), range === "month" && /*#__PURE__*/React__default["default"].createElement(MonthCalendar, {
+        events: events,
+        onChange: onChange,
+        onRange: onChangeRange
+      }, children));
+    };
+
+    /**
+     * CalendarRangeControl
+     */
+    var CalendarRangeControl = function CalendarRangeControl(props) {
+      var range = props.range,
+        onChange = props.onChange;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "calendar-range-control"
+      }, /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: "Year",
+        outlined: range == "year",
+        action: function action() {
+          return onChange("year");
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: "Month",
+        outlined: range == "month",
+        action: function action() {
+          return onChange("month");
+        }
+      }));
+    };
+
+    /**
+     * MonthCalendar
+     */
+    var MonthCalendar = function MonthCalendar(props) {
+      var _props$events2 = props.events,
+        events = _props$events2 === void 0 ? [] : _props$events2,
+        children = props.children,
+        onChange = props.onChange;
+      var _useState2 = React.useState(),
+        position = _useState2[0],
+        setPosition = _useState2[1];
       React.useEffect(function () {
         var today = moment();
         setPosition(today);
@@ -3253,17 +3309,18 @@
       var days = Array.from(range.by('days'));
       var cells = days.map(function (day) {
         var eventsOfDay = events.filter(function (event) {
-          console.log(event.date, day.format("YYYY-MM-DD"));
           var eventDay = moment(event.date);
           return eventDay.isSame(day, 'day');
         });
+        var sameMonthStyle = day.isSame(moment(position), 'month') ? '' : 'other-month';
         return {
           day: day,
-          events: eventsOfDay
+          events: eventsOfDay,
+          sameMonthStyle: sameMonthStyle
         };
       });
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "calendar"
+        className: "month-calendar"
       }, /*#__PURE__*/React__default["default"].createElement("nav", null, /*#__PURE__*/React__default["default"].createElement("label", null, " ", /*#__PURE__*/React__default["default"].createElement(Text, null, monthName), " ", year), /*#__PURE__*/React__default["default"].createElement(Button, {
         icon: "chevron_left",
         action: prev
@@ -3300,9 +3357,9 @@
         cell = _props$cell === void 0 ? [] : _props$cell,
         children = props.children;
       var day = cell.day,
-        events = cell.events;
+        events = cell.events,
+        sameMonthStyle = cell.sameMonthStyle;
       var todayStyle = day.isSame(moment(), 'day') ? 'today' : '';
-      var sameMonthStyle = day.isSame(moment(), 'month') ? '' : 'other-month';
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "day-cell " + todayStyle + " " + sameMonthStyle
       }, /*#__PURE__*/React__default["default"].createElement("header", null, day.format("DD")), /*#__PURE__*/React__default["default"].createElement("main", null, events.map(function (event) {
@@ -3312,6 +3369,10 @@
         }, children);
       })));
     };
+
+    /**
+     * Event
+     */
     var Event = function Event(props) {
       var event = props.event,
         children = props.children;
@@ -3329,6 +3390,129 @@
       }
     };
 
+    /**
+     * YearCalendar
+     */
+    var YearCalendar = function YearCalendar(props) {
+      var _props$events3 = props.events,
+        events = _props$events3 === void 0 ? [] : _props$events3,
+        children = props.children,
+        onChange = props.onChange;
+      var _useState3 = React.useState(),
+        position = _useState3[0],
+        setPosition = _useState3[1];
+      React.useEffect(function () {
+        var today = moment();
+        setPosition(today);
+      }, []);
+      React.useEffect(function () {
+        if (position && onChange) {
+          var _firstDayOfYear = position.clone().startOf('year');
+          var firstDayOfRange = _firstDayOfYear.clone().startOf('isoweek');
+          var _lastDayOfYear = position.clone().endOf('year');
+          var lastDayOfRange = _lastDayOfYear.clone().endOf('isoweek');
+          var range = moment.range(firstDayOfRange, lastDayOfRange);
+          onChange(position, range);
+        }
+      }, [position]);
+      function next() {
+        var next = position.clone().add(1, 'year');
+        setPosition(next);
+      }
+      function prev() {
+        var prev = position.clone().subtract(1, 'year');
+        setPosition(prev);
+      }
+      function today() {
+        var today = moment();
+        setPosition(today);
+      }
+      if (!position) return "...";
+      var year = position.format("YYYY");
+      var firstDayOfYear = moment(position).startOf('year');
+      var lastDayOfYear = moment(position).endOf('year');
+      var months = [];
+      for (var currentMonth = moment(firstDayOfYear); currentMonth.isBefore(lastDayOfYear); currentMonth.add(1, 'month')) {
+        months.push(moment(currentMonth));
+      }
+      var cells = months.map(function (month) {
+        var firstDayOfMonth = month.clone().startOf('month');
+        var firstDayOfRange = firstDayOfMonth.clone().startOf('isoweek');
+        var lastDayOfMonth = month.clone().endOf('month');
+        var lastDayOfRange = lastDayOfMonth.clone().endOf('isoweek');
+        var range = moment.range(firstDayOfRange, lastDayOfRange);
+        var days = Array.from(range.by('days'));
+        var cells = days.map(function (day) {
+          var eventsOfDay = events.filter(function (event) {
+            var eventDay = moment(event.date);
+            return eventDay.isSame(day, 'day');
+          });
+          var sameMonthStyle = day.isSame(moment(month), 'month') ? '' : 'other-month';
+          return {
+            day: day,
+            events: eventsOfDay,
+            sameMonthStyle: sameMonthStyle
+          };
+        });
+        return {
+          month: month,
+          cells: cells
+        };
+      });
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "year-calendar"
+      }, /*#__PURE__*/React__default["default"].createElement("nav", null, /*#__PURE__*/React__default["default"].createElement("label", null, " ", /*#__PURE__*/React__default["default"].createElement(Text, null, year)), /*#__PURE__*/React__default["default"].createElement(Button, {
+        icon: "chevron_left",
+        action: prev
+      }), /*#__PURE__*/React__default["default"].createElement(Button, {
+        label: "Today",
+        outlined: true,
+        action: today
+      }), /*#__PURE__*/React__default["default"].createElement(Button, {
+        icon: "chevron_right",
+        action: next
+      })), /*#__PURE__*/React__default["default"].createElement("main", null, cells.map(function (cell) {
+        return /*#__PURE__*/React__default["default"].createElement(MonthCell, {
+          key: cell.month,
+          cell: cell
+        }, children);
+      })));
+    };
+
+    /**
+     * MonthCell
+     */
+    var MonthCell = function MonthCell(props) {
+      var _props$cell2 = props.cell,
+        cell = _props$cell2 === void 0 ? [] : _props$cell2,
+        children = props.children;
+      var month = cell.month,
+        cells = cell.cells;
+      var monthName = month.format("MMMM");
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "month-cell"
+      }, /*#__PURE__*/React__default["default"].createElement("nav", null, monthName), /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Mon")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Tue")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Wed")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Thu")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Fri")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Sat")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "week-day-cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Sun"))), /*#__PURE__*/React__default["default"].createElement("main", null, cells.map(function (cell) {
+        return /*#__PURE__*/React__default["default"].createElement(DayCell, {
+          key: cell.day,
+          cell: cell
+        }, children);
+      })));
+    };
+
     var ranges = momentRange.extendMoment(moment__default["default"]);
     var DATE_RANGE = [{
       label: "Week",
@@ -11366,6 +11550,7 @@
     exports.MenuIcon = MenuIcon;
     exports.MenuItem = MenuItem;
     exports.MenuSeparator = MenuSeparator;
+    exports.MonthCalendar = MonthCalendar;
     exports.MultiSelector = MultiSelector;
     exports.Page = Page;
     exports.PageContext = PageContext;