ywana-core8 0.0.910 → 0.0.912

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",
@@ -6814,7 +6998,7 @@
     /**
      * Collection API
      */
-    var CollectionAPI$1 = function CollectionAPI(url, host) {
+    var CollectionAPI$1 = function CollectionAPI(url, host, params) {
       var http = HTTPClient(host || window.API || process.env.REACT_APP_API, Session);
 
       /**
@@ -6839,8 +7023,8 @@
             }).join("&");
             return "" + query + values + "&";
           } else if (typeof value === "object") {
-            var params = objectToQueryParamString(value, likes);
-            params.split("&").forEach(function (param) {
+            var _params = objectToQueryParamString(value, likes);
+            _params.split("&").forEach(function (param) {
               query = query.concat(key + "." + param + "&");
             });
             return query;
@@ -6855,9 +7039,17 @@
           if (likes === void 0) {
             likes = [];
           }
+          // build query params
           var queryParams = page ? "?page=" + page + "&" : "?";
+
+          // concat optional params to queryparams
+          queryParams = "" + queryParams + params;
+
+          // concat filters to queryparams
           var filterQuery = objectToQueryParamString(filters, likes);
           queryParams = "" + queryParams + filterQuery;
+
+          // remove last &
           queryParams = queryParams.substring(0, queryParams.length - 1);
           return http.GET("" + url + queryParams);
         },
@@ -6937,6 +7129,7 @@
         page = props.page,
         _props$fetching = props.fetching,
         fetching = _props$fetching === void 0 ? false : _props$fetching,
+        params = props.params,
         _props$actions = props.actions,
         actions = _props$actions === void 0 ? [] : _props$actions,
         onSelect = props.onSelect,
@@ -6971,7 +7164,7 @@
         filters = props.filters,
         footer = props.footer,
         children = props.children;
-      var context = CollectionContext$1(url, field, host, page, fetching, versioning);
+      var context = CollectionContext$1(url, field, host, page, fetching, versioning, params);
       var _useContext = React.useContext(PageContext),
         pageContext = _useContext[0],
         setPageContext = _useContext[1];
@@ -7524,11 +7717,11 @@
     /**
      * Collection Context
      */
-    var CollectionContext$1 = function CollectionContext(url, field, host, page, fetching, versioning) {
+    var CollectionContext$1 = function CollectionContext(url, field, host, page, fetching, versioning, params) {
       if (versioning === void 0) {
         versioning = false;
       }
-      var API = CollectionAPI$1(url, host);
+      var API = CollectionAPI$1(url, host, params);
       return {
         all: [],
         filters: {},
@@ -11366,6 +11559,7 @@
     exports.MenuIcon = MenuIcon;
     exports.MenuItem = MenuItem;
     exports.MenuSeparator = MenuSeparator;
+    exports.MonthCalendar = MonthCalendar;
     exports.MultiSelector = MultiSelector;
     exports.Page = Page;
     exports.PageContext = PageContext;