ywana-core8 0.0.910 → 0.0.911

package/dist/index.modern.js

@@ -3206,14 +3206,70 @@ var WaitScreen = function WaitScreen() {
 
 moment$1.locale('es');
 var moment = extendMoment(moment$1);
+
+/**
+ * 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 = useState(),
-    position = _useState[0],
-    setPosition = _useState[1];
+  var _useState = useState(props.range || "year"),
+    range = _useState[0],
+    setRange = _useState[1];
+  function onChangeRange(range) {
+    setRange(range);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "calendar"
+  }, /*#__PURE__*/React.createElement(CalendarRangeControl, {
+    range: range,
+    onChange: onChangeRange
+  }), range === "year" && /*#__PURE__*/React.createElement(YearCalendar, {
+    events: events,
+    onChange: onChange
+  }, children), range === "month" && /*#__PURE__*/React.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.createElement("div", {
+    className: "calendar-range-control"
+  }, /*#__PURE__*/React.createElement(Button, {
+    label: "Year",
+    outlined: range == "year",
+    action: function action() {
+      return onChange("year");
+    }
+  }), /*#__PURE__*/React.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 = useState(),
+    position = _useState2[0],
+    setPosition = _useState2[1];
   useEffect(function () {
     var today = moment();
     setPosition(today);
@@ -3251,17 +3307,18 @@ 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.createElement("div", {
-    className: "calendar"
+    className: "month-calendar"
   }, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("label", null, " ", /*#__PURE__*/React.createElement(Text, null, monthName), " ", year), /*#__PURE__*/React.createElement(Button, {
     icon: "chevron_left",
     action: prev
@@ -3298,9 +3355,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.createElement("div", {
     className: "day-cell " + todayStyle + " " + sameMonthStyle
   }, /*#__PURE__*/React.createElement("header", null, day.format("DD")), /*#__PURE__*/React.createElement("main", null, events.map(function (event) {
@@ -3310,6 +3367,10 @@ var DayCell = function DayCell(props) {
     }, children);
   })));
 };
+
+/**
+ * Event
+ */
 var Event = function Event(props) {
   var event = props.event,
     children = props.children;
@@ -3327,6 +3388,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 = useState(),
+    position = _useState3[0],
+    setPosition = _useState3[1];
+  useEffect(function () {
+    var today = moment();
+    setPosition(today);
+  }, []);
+  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.createElement("div", {
+    className: "year-calendar"
+  }, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("label", null, " ", /*#__PURE__*/React.createElement(Text, null, year)), /*#__PURE__*/React.createElement(Button, {
+    icon: "chevron_left",
+    action: prev
+  }), /*#__PURE__*/React.createElement(Button, {
+    label: "Today",
+    outlined: true,
+    action: today
+  }), /*#__PURE__*/React.createElement(Button, {
+    icon: "chevron_right",
+    action: next
+  })), /*#__PURE__*/React.createElement("main", null, cells.map(function (cell) {
+    return /*#__PURE__*/React.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.createElement("div", {
+    className: "month-cell"
+  }, /*#__PURE__*/React.createElement("nav", null, monthName), /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement("div", {
+    className: "week-day-cell"
+  }, /*#__PURE__*/React.createElement(Text, null, "Mon")), /*#__PURE__*/React.createElement("div", {
+    className: "week-day-cell"
+  }, /*#__PURE__*/React.createElement(Text, null, "Tue")), /*#__PURE__*/React.createElement("div", {
+    className: "week-day-cell"
+  }, /*#__PURE__*/React.createElement(Text, null, "Wed")), /*#__PURE__*/React.createElement("div", {
+    className: "week-day-cell"
+  }, /*#__PURE__*/React.createElement(Text, null, "Thu")), /*#__PURE__*/React.createElement("div", {
+    className: "week-day-cell"
+  }, /*#__PURE__*/React.createElement(Text, null, "Fri")), /*#__PURE__*/React.createElement("div", {
+    className: "week-day-cell"
+  }, /*#__PURE__*/React.createElement(Text, null, "Sat")), /*#__PURE__*/React.createElement("div", {
+    className: "week-day-cell"
+  }, /*#__PURE__*/React.createElement(Text, null, "Sun"))), /*#__PURE__*/React.createElement("main", null, cells.map(function (cell) {
+    return /*#__PURE__*/React.createElement(DayCell, {
+      key: cell.day,
+      cell: cell
+    }, children);
+  })));
+};
+
 var ranges = extendMoment(moment$1);
 var DATE_RANGE = [{
   label: "Week",
@@ -11306,5 +11490,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Accordion, ActionButton, Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, FoldersTreeView, Form, HTTPClient, Header, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MultiSelector, Page, PageContext, PageProvider, PasswordEditor, PasswordField, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction };
+export { Accordion, ActionButton, Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, FoldersTreeView, Form, HTTPClient, Header, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MonthCalendar, MultiSelector, Page, PageContext, PageProvider, PasswordEditor, PasswordField, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction };
 //# sourceMappingURL=index.modern.js.map