ywana-core8 0.0.909 → 0.0.911

package/dist/index.cjs

@@ -3215,14 +3215,70 @@ var WaitScreen = function WaitScreen() {
 
 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);
@@ -3260,44 +3316,43 @@ var Calendar = function Calendar(props) {
   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"
-  }, /*#__PURE__*/React__default["default"].createElement("nav", null, /*#__PURE__*/React__default["default"].createElement("label", null, " ", monthName, " ", year), /*#__PURE__*/React__default["default"].createElement(Button, {
+    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",
-    raised: true,
     action: prev
   }), /*#__PURE__*/React__default["default"].createElement(Button, {
-    label: "Hoy",
+    label: "Today",
     outlined: true,
     action: today
   }), /*#__PURE__*/React__default["default"].createElement(Button, {
     icon: "chevron_right",
-    raised: true,
     action: next
   })), /*#__PURE__*/React__default["default"].createElement("header", null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "week-day-cell"
-  }, "Lun"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Mon")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "week-day-cell"
-  }, "Mar"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Tue")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "week-day-cell"
-  }, "Mi\xE9"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Wed")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "week-day-cell"
-  }, "Jue"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Thu")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "week-day-cell"
-  }, "Vie"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Fri")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "week-day-cell"
-  }, "Sab"), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Text, null, "Sat")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "week-day-cell"
-  }, "Dom")), /*#__PURE__*/React__default["default"].createElement("main", null, cells.map(function (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
@@ -3309,9 +3364,9 @@ var DayCell = function DayCell(props) {
     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) {
@@ -3321,6 +3376,10 @@ var DayCell = function DayCell(props) {
     }, children);
   })));
 };
+
+/**
+ * Event
+ */
 var Event = function Event(props) {
   var event = props.event,
     children = props.children;
@@ -3338,6 +3397,129 @@ var Event = function Event(props) {
   }
 };
 
+/**
+ * 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",
@@ -11375,6 +11557,7 @@ exports.Menu = Menu;
 exports.MenuIcon = MenuIcon;
 exports.MenuItem = MenuItem;
 exports.MenuSeparator = MenuSeparator;
+exports.MonthCalendar = MonthCalendar;
 exports.MultiSelector = MultiSelector;
 exports.Page = Page;
 exports.PageContext = PageContext;