@panneau/list-calendar 2.0.34

package/assets/css/styles.css

@@ -0,0 +1 @@
+.panneau-list-calendar-container{color:#6c6c6c}.panneau-list-calendar-container button{margin:0 auto}.panneau-list-calendar-container .panneau-list-calendar-inner{margin:.25rem auto 1rem;max-width:25rem;width:100%}.panneau-list-calendar-container .panneau-list-calendar-calendarHeader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-weight:700;padding:.5rem .75rem 1.25rem;position:relative;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.panneau-list-calendar-container .panneau-list-calendar-activePeriod{-ms-flex-positive:1;flex-grow:1;line-height:2rem;text-transform:uppercase}.panneau-list-calendar-container .panneau-list-calendar-activePeriodWithDates{color:orange}.panneau-list-calendar-container .panneau-list-calendar-arrow{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center;padding:.25rem;width:2rem}.panneau-list-calendar-container .panneau-list-calendar-calendarGrid{display:grid;grid-template:"a a a a a a a" "a a a a a a a" "a a a a a a a" "a a a a a a a" "a a a a a a a"}.panneau-list-calendar-container .panneau-list-calendar-calendarBox{-ms-flex-pack:center;display:-ms-flexbox;display:flex;justify-content:center;padding:1px}.panneau-list-calendar-container .panneau-list-calendar-calendarBox.panneau-list-calendar-headerBox{font-size:.75em;padding-bottom:.5rem}.panneau-list-calendar-container .panneau-list-calendar-day{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;border-radius:50%;color:hsla(0,0%,80%,.75);display:-ms-flexbox;display:flex;font-weight:700;height:2.25rem;justify-content:center;line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.25rem}.panneau-list-calendar-container .panneau-list-calendar-day.panneau-list-calendar-isToday{color:blue}.panneau-list-calendar-container .panneau-list-calendar-day.panneau-list-calendar-isPast{color:orange}.panneau-list-calendar-container .panneau-list-calendar-dayButton{background-color:hsla(0,0%,100%,.05);color:red}.panneau-list-calendar-container .panneau-list-calendar-dayButton.panneau-list-calendar-isPast{color:#555}@media (hover:hover){.panneau-list-calendar-container .panneau-list-calendar-dayButton:hover{color:#fff}}.panneau-list-calendar-container .panneau-list-calendar-dayButton.panneau-list-calendar-active{background-color:#ff0;color:#777}.panneau-list-calendar-container .panneau-list-calendar-dayButton:active{background-color:#9acd32;color:#777}

package/es/index.js

@@ -0,0 +1,282 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import classNames from 'classnames';
+import { parseISO, toDate, startOfWeek, addWeeks, addMonths, endOfWeek, addDays, compareAsc, compareDesc, format } from 'date-fns';
+import PropTypes from 'prop-types';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { useIntl, FormattedDate } from 'react-intl';
+import { PropTypes as PropTypes$1 } from '@panneau/core';
+import Button from '@panneau/element-button';
+import Icon from '@panneau/element-icon';
+
+var styles = {"container":"panneau-list-calendar-container","inner":"panneau-list-calendar-inner","calendarHeader":"panneau-list-calendar-calendarHeader","activePeriod":"panneau-list-calendar-activePeriod","activePeriodWithDates":"panneau-list-calendar-activePeriodWithDates","arrow":"panneau-list-calendar-arrow","calendarGrid":"panneau-list-calendar-calendarGrid","calendarBox":"panneau-list-calendar-calendarBox","headerBox":"panneau-list-calendar-headerBox","day":"panneau-list-calendar-day","isToday":"panneau-list-calendar-isToday","isPast":"panneau-list-calendar-isPast","dayButton":"panneau-list-calendar-dayButton","active":"panneau-list-calendar-active"};
+
+var propTypes = {
+  mode: PropTypes.string,
+  resource: PropTypes$1.resource.isRequired,
+  component: PropTypes.func,
+  items: PropTypes$1.items,
+  itemDateField: PropTypes.string,
+  loading: PropTypes.bool,
+  // onQueryChange: PropTypes.func,
+  filter: PropTypes.shape({
+    dates: PropTypes.arrayOf(PropTypes.string)
+  }),
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes.any,
+  multiple: PropTypes.bool,
+  onDateChange: PropTypes.func,
+  onPeriodChange: PropTypes.func,
+  initialDate: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps = {
+  mode: 'monthly',
+  component: null,
+  items: [],
+  itemDateField: 'date',
+  filter: null,
+  value: null,
+  multiple: false,
+  onDateChange: null,
+  onPeriodChange: null,
+  initialDate: null,
+  loading: false,
+  className: null
+};
+var CalendarList = function CalendarList(_ref) {
+  var mode = _ref.mode;
+    _ref.resource;
+    _ref.component;
+    var items = _ref.items,
+    itemDateField = _ref.itemDateField;
+    _ref.loading;
+    var value = _ref.value,
+    multiple = _ref.multiple,
+    onDateChange = _ref.onDateChange,
+    onPeriodChange = _ref.onPeriodChange,
+    initialDate = _ref.initialDate,
+    className = _ref.className;
+  var intl = useIntl();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    monthIdx = _useState2[0],
+    setMonthIdx = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    weekIdx = _useState4[0],
+    setWeekIdx = _useState4[1];
+  var currentDate = new Date();
+  var currentYear = currentDate.getUTCFullYear();
+  var currentMonth = currentDate.getUTCMonth();
+  var currentDayOfTheMonth = currentDate.getDate();
+  var dates = (items || []).map(function (it) {
+    return it !== null && it[itemDateField] ? it[itemDateField] : null;
+  }).filter(function (d) {
+    return d !== null;
+  });
+  var parsedInitialDate = initialDate !== null ? parseISO(initialDate) : null;
+  var partialInitialDate = parsedInitialDate !== null ? toDate(parsedInitialDate) : new Date();
+  var finalInitialDate = mode === 'weekly' ? startOfWeek(partialInitialDate) : partialInitialDate;
+  var activeDate = mode === 'weekly' ? addWeeks(finalInitialDate, weekIdx) : addMonths(finalInitialDate, monthIdx);
+  var activeYear = activeDate.getFullYear();
+  var activeMonth = activeDate.getUTCMonth();
+  var activeWeekStart = startOfWeek(activeDate);
+  var activeWeekEnd = endOfWeek(activeDate);
+  var days = useMemo(function () {
+    return [intl.formatMessage({
+      "id": "fSfLk8",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "S"
+      }]
+    }), intl.formatMessage({
+      "id": "jbT/g6",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "M"
+      }]
+    }), intl.formatMessage({
+      "id": "Of2stw",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "T"
+      }]
+    }), intl.formatMessage({
+      "id": "BAKfhq",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "W"
+      }]
+    }), intl.formatMessage({
+      "id": "DBU3cu",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "T"
+      }]
+    }), intl.formatMessage({
+      "id": "J6Mhku",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "F"
+      }]
+    }), intl.formatMessage({
+      "id": "0F5X3C",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "S"
+      }]
+    })];
+  }, []);
+  var datesArray = [];
+  if (mode === 'weekly') {
+    // eslint-disable-next-line no-plusplus
+    for (var i = 0; i < 7; i++) {
+      var dte = addDays(activeWeekStart, i);
+      datesArray.push(dte);
+    }
+  } else {
+    var firstDayOfActualMonth = new Date(activeYear, activeMonth, 1).getDay();
+    var dayBeforeDiff = firstDayOfActualMonth === 0 ? 6 : firstDayOfActualMonth;
+    var gridMax = 35;
+    // eslint-disable-next-line no-plusplus
+    for (var _i = 1 - dayBeforeDiff; _i <= gridMax; _i++) {
+      datesArray.push(new Date(activeYear, activeMonth, _i));
+    }
+  }
+  var onClickPeriodChange = useCallback(function (e, previous) {
+    e.preventDefault();
+    if (mode === 'weekly') {
+      if (previous) {
+        setWeekIdx(weekIdx - 1);
+      } else {
+        setWeekIdx(weekIdx + 1);
+      }
+    } else if (previous) {
+      setMonthIdx(monthIdx - 1);
+    } else {
+      setMonthIdx(monthIdx + 1);
+    }
+  }, [mode, monthIdx, setMonthIdx, weekIdx, setWeekIdx]);
+  useEffect(function () {
+    if (onPeriodChange !== null) {
+      onPeriodChange(activeDate);
+    }
+  }, [activeDate, onPeriodChange]);
+  var onSelectDate = useCallback(function (e, newDate) {
+    e.preventDefault();
+    if (!multiple) {
+      onDateChange(newDate ? null : newDate);
+      return;
+    }
+    var valuesUpdate = _toConsumableArray(dates);
+    if (!valuesUpdate.includes(newDate)) {
+      onDateChange([newDate]);
+    } else {
+      var filteredOptions = valuesUpdate.filter(function (oldDate) {
+        return oldDate !== newDate;
+      });
+      onDateChange(filteredOptions);
+    }
+  }, [dates, onDateChange, multiple, value]);
+  var weekHasDates = dates.reduce(function (acc, dte) {
+    var parseDte = dte !== null ? parseISO(dte) : null;
+    if (parseDte !== null && compareAsc(parseDte, activeWeekStart) >= 0 && compareDesc(parseDte, activeWeekEnd) >= 0) {
+      return true;
+    }
+    return acc;
+  }, false);
+  var monthHasDates = dates.reduce(function (acc, dte) {
+    var splitDate = dte.split(/\s*-\s*/g);
+    var _ref2 = splitDate || [],
+      _ref3 = _slicedToArray(_ref2, 2),
+      _ref3$ = _ref3[0],
+      year = _ref3$ === void 0 ? null : _ref3$,
+      _ref3$2 = _ref3[1],
+      month = _ref3$2 === void 0 ? null : _ref3$2;
+    if (parseInt(year, 10) === parseInt(activeYear, 10) && parseInt(month, 10) === parseInt(activeMonth, 10) + 1 // yes this is incredibly stupid
+    ) {
+      return true;
+    }
+    return acc;
+  }, false);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inner
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.calendarHeader
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: styles.arrow,
+    onClick: function onClick(e) {
+      return onClickPeriodChange(e, true);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "arrow-left"
+  })), mode === 'weekly' ? /*#__PURE__*/React.createElement("div", {
+    className: styles.activePeriod
+  }, weekHasDates ? /*#__PURE__*/React.createElement("span", {
+    className: styles.activePeriodWithDates
+  }, /*#__PURE__*/React.createElement(FormattedDate, {
+    value: activeDate,
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  })) : /*#__PURE__*/React.createElement(FormattedDate, {
+    value: activeDate,
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: styles.activePeriod
+  }, monthHasDates ? /*#__PURE__*/React.createElement("span", {
+    className: styles.activePeriodWithDates
+  }, /*#__PURE__*/React.createElement(FormattedDate, {
+    value: activeDate,
+    month: "long",
+    year: "numeric"
+  })) : /*#__PURE__*/React.createElement(FormattedDate, {
+    value: activeDate,
+    month: "long",
+    year: "numeric"
+  })), /*#__PURE__*/React.createElement(Button, {
+    className: classNames([styles.arrow, styles.right]),
+    onClick: onClickPeriodChange
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "arrow-right"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles.calendarGrid
+  }, days.map(function (d, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "day-".concat(d.getTime, "-").concat(i + 1),
+      className: classNames([styles.calendarBox, styles.headerBox])
+    }, d);
+  }), datesArray.map(function (d, i) {
+    var _classNames;
+    var dTime = format(d, 'yyyy-MM-dd');
+    var isCurrentYear = d.getUTCFullYear() === currentYear;
+    var isCurrentMonth = d.getUTCMonth() === currentMonth;
+    var isToday = isCurrentYear && isCurrentMonth && d.getDate() === currentDayOfTheMonth;
+    var eventTime = d.getTime();
+    var todayTime = currentDate.getTime();
+    var isPast = eventTime < todayTime && !isToday;
+    var hasItem = dates.includes(dTime);
+    var inner = hasItem ? /*#__PURE__*/React.createElement(Button, {
+      onClick: function onClick(e) {
+        return onSelectDate(e, dTime);
+      },
+      className: classNames(styles.day, styles.dayButton, (_classNames = {}, _defineProperty(_classNames, styles.isToday, isToday), _defineProperty(_classNames, styles.isPast, isPast), _defineProperty(_classNames, styles.active, dates.includes(dTime)), _classNames))
+    }, format(d, 'd')) : /*#__PURE__*/React.createElement("div", {
+      className: classNames(styles.day, _defineProperty({}, styles.isToday, isToday))
+    }, format(d, 'd'));
+    return /*#__PURE__*/React.createElement("div", {
+      key: "date-".concat(d.getTime, "-").concat(i + 1),
+      className: styles.calendarBox
+    }, d.getUTCMonth() !== activeMonth && mode === 'monthly' ? '' : inner);
+  }))));
+};
+CalendarList.propTypes = propTypes;
+CalendarList.defaultProps = defaultProps;
+
+export { CalendarList as default };

package/lib/index.js

@@ -0,0 +1,297 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var classNames = require('classnames');
+var dateFns = require('date-fns');
+var PropTypes = require('prop-types');
+var React = require('react');
+var reactIntl = require('react-intl');
+var core = require('@panneau/core');
+var Button = require('@panneau/element-button');
+var Icon = require('@panneau/element-icon');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
+
+var styles = {"container":"panneau-list-calendar-container","inner":"panneau-list-calendar-inner","calendarHeader":"panneau-list-calendar-calendarHeader","activePeriod":"panneau-list-calendar-activePeriod","activePeriodWithDates":"panneau-list-calendar-activePeriodWithDates","arrow":"panneau-list-calendar-arrow","calendarGrid":"panneau-list-calendar-calendarGrid","calendarBox":"panneau-list-calendar-calendarBox","headerBox":"panneau-list-calendar-headerBox","day":"panneau-list-calendar-day","isToday":"panneau-list-calendar-isToday","isPast":"panneau-list-calendar-isPast","dayButton":"panneau-list-calendar-dayButton","active":"panneau-list-calendar-active"};
+
+var propTypes = {
+  mode: PropTypes__default["default"].string,
+  resource: core.PropTypes.resource.isRequired,
+  component: PropTypes__default["default"].func,
+  items: core.PropTypes.items,
+  itemDateField: PropTypes__default["default"].string,
+  loading: PropTypes__default["default"].bool,
+  // onQueryChange: PropTypes.func,
+  filter: PropTypes__default["default"].shape({
+    dates: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
+  }),
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes__default["default"].any,
+  multiple: PropTypes__default["default"].bool,
+  onDateChange: PropTypes__default["default"].func,
+  onPeriodChange: PropTypes__default["default"].func,
+  initialDate: PropTypes__default["default"].string,
+  className: PropTypes__default["default"].string
+};
+var defaultProps = {
+  mode: 'monthly',
+  component: null,
+  items: [],
+  itemDateField: 'date',
+  filter: null,
+  value: null,
+  multiple: false,
+  onDateChange: null,
+  onPeriodChange: null,
+  initialDate: null,
+  loading: false,
+  className: null
+};
+var CalendarList = function CalendarList(_ref) {
+  var mode = _ref.mode;
+    _ref.resource;
+    _ref.component;
+    var items = _ref.items,
+    itemDateField = _ref.itemDateField;
+    _ref.loading;
+    var value = _ref.value,
+    multiple = _ref.multiple,
+    onDateChange = _ref.onDateChange,
+    onPeriodChange = _ref.onPeriodChange,
+    initialDate = _ref.initialDate,
+    className = _ref.className;
+  var intl = reactIntl.useIntl();
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    monthIdx = _useState2[0],
+    setMonthIdx = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    weekIdx = _useState4[0],
+    setWeekIdx = _useState4[1];
+  var currentDate = new Date();
+  var currentYear = currentDate.getUTCFullYear();
+  var currentMonth = currentDate.getUTCMonth();
+  var currentDayOfTheMonth = currentDate.getDate();
+  var dates = (items || []).map(function (it) {
+    return it !== null && it[itemDateField] ? it[itemDateField] : null;
+  }).filter(function (d) {
+    return d !== null;
+  });
+  var parsedInitialDate = initialDate !== null ? dateFns.parseISO(initialDate) : null;
+  var partialInitialDate = parsedInitialDate !== null ? dateFns.toDate(parsedInitialDate) : new Date();
+  var finalInitialDate = mode === 'weekly' ? dateFns.startOfWeek(partialInitialDate) : partialInitialDate;
+  var activeDate = mode === 'weekly' ? dateFns.addWeeks(finalInitialDate, weekIdx) : dateFns.addMonths(finalInitialDate, monthIdx);
+  var activeYear = activeDate.getFullYear();
+  var activeMonth = activeDate.getUTCMonth();
+  var activeWeekStart = dateFns.startOfWeek(activeDate);
+  var activeWeekEnd = dateFns.endOfWeek(activeDate);
+  var days = React.useMemo(function () {
+    return [intl.formatMessage({
+      "id": "fSfLk8",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "S"
+      }]
+    }), intl.formatMessage({
+      "id": "jbT/g6",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "M"
+      }]
+    }), intl.formatMessage({
+      "id": "Of2stw",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "T"
+      }]
+    }), intl.formatMessage({
+      "id": "BAKfhq",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "W"
+      }]
+    }), intl.formatMessage({
+      "id": "DBU3cu",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "T"
+      }]
+    }), intl.formatMessage({
+      "id": "J6Mhku",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "F"
+      }]
+    }), intl.formatMessage({
+      "id": "0F5X3C",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "S"
+      }]
+    })];
+  }, []);
+  var datesArray = [];
+  if (mode === 'weekly') {
+    // eslint-disable-next-line no-plusplus
+    for (var i = 0; i < 7; i++) {
+      var dte = dateFns.addDays(activeWeekStart, i);
+      datesArray.push(dte);
+    }
+  } else {
+    var firstDayOfActualMonth = new Date(activeYear, activeMonth, 1).getDay();
+    var dayBeforeDiff = firstDayOfActualMonth === 0 ? 6 : firstDayOfActualMonth;
+    var gridMax = 35;
+    // eslint-disable-next-line no-plusplus
+    for (var _i = 1 - dayBeforeDiff; _i <= gridMax; _i++) {
+      datesArray.push(new Date(activeYear, activeMonth, _i));
+    }
+  }
+  var onClickPeriodChange = React.useCallback(function (e, previous) {
+    e.preventDefault();
+    if (mode === 'weekly') {
+      if (previous) {
+        setWeekIdx(weekIdx - 1);
+      } else {
+        setWeekIdx(weekIdx + 1);
+      }
+    } else if (previous) {
+      setMonthIdx(monthIdx - 1);
+    } else {
+      setMonthIdx(monthIdx + 1);
+    }
+  }, [mode, monthIdx, setMonthIdx, weekIdx, setWeekIdx]);
+  React.useEffect(function () {
+    if (onPeriodChange !== null) {
+      onPeriodChange(activeDate);
+    }
+  }, [activeDate, onPeriodChange]);
+  var onSelectDate = React.useCallback(function (e, newDate) {
+    e.preventDefault();
+    if (!multiple) {
+      onDateChange(newDate ? null : newDate);
+      return;
+    }
+    var valuesUpdate = _toConsumableArray__default["default"](dates);
+    if (!valuesUpdate.includes(newDate)) {
+      onDateChange([newDate]);
+    } else {
+      var filteredOptions = valuesUpdate.filter(function (oldDate) {
+        return oldDate !== newDate;
+      });
+      onDateChange(filteredOptions);
+    }
+  }, [dates, onDateChange, multiple, value]);
+  var weekHasDates = dates.reduce(function (acc, dte) {
+    var parseDte = dte !== null ? dateFns.parseISO(dte) : null;
+    if (parseDte !== null && dateFns.compareAsc(parseDte, activeWeekStart) >= 0 && dateFns.compareDesc(parseDte, activeWeekEnd) >= 0) {
+      return true;
+    }
+    return acc;
+  }, false);
+  var monthHasDates = dates.reduce(function (acc, dte) {
+    var splitDate = dte.split(/\s*-\s*/g);
+    var _ref2 = splitDate || [],
+      _ref3 = _slicedToArray__default["default"](_ref2, 2),
+      _ref3$ = _ref3[0],
+      year = _ref3$ === void 0 ? null : _ref3$,
+      _ref3$2 = _ref3[1],
+      month = _ref3$2 === void 0 ? null : _ref3$2;
+    if (parseInt(year, 10) === parseInt(activeYear, 10) && parseInt(month, 10) === parseInt(activeMonth, 10) + 1 // yes this is incredibly stupid
+    ) {
+      return true;
+    }
+    return acc;
+  }, false);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.inner
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.calendarHeader
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    className: styles.arrow,
+    onClick: function onClick(e) {
+      return onClickPeriodChange(e, true);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Icon__default["default"], {
+    name: "arrow-left"
+  })), mode === 'weekly' ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.activePeriod
+  }, weekHasDates ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles.activePeriodWithDates
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedDate, {
+    value: activeDate,
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  })) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedDate, {
+    value: activeDate,
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  })) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.activePeriod
+  }, monthHasDates ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles.activePeriodWithDates
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedDate, {
+    value: activeDate,
+    month: "long",
+    year: "numeric"
+  })) : /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedDate, {
+    value: activeDate,
+    month: "long",
+    year: "numeric"
+  })), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    className: classNames__default["default"]([styles.arrow, styles.right]),
+    onClick: onClickPeriodChange
+  }, /*#__PURE__*/React__default["default"].createElement(Icon__default["default"], {
+    name: "arrow-right"
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.calendarGrid
+  }, days.map(function (d, i) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: "day-".concat(d.getTime, "-").concat(i + 1),
+      className: classNames__default["default"]([styles.calendarBox, styles.headerBox])
+    }, d);
+  }), datesArray.map(function (d, i) {
+    var _classNames;
+    var dTime = dateFns.format(d, 'yyyy-MM-dd');
+    var isCurrentYear = d.getUTCFullYear() === currentYear;
+    var isCurrentMonth = d.getUTCMonth() === currentMonth;
+    var isToday = isCurrentYear && isCurrentMonth && d.getDate() === currentDayOfTheMonth;
+    var eventTime = d.getTime();
+    var todayTime = currentDate.getTime();
+    var isPast = eventTime < todayTime && !isToday;
+    var hasItem = dates.includes(dTime);
+    var inner = hasItem ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+      onClick: function onClick(e) {
+        return onSelectDate(e, dTime);
+      },
+      className: classNames__default["default"](styles.day, styles.dayButton, (_classNames = {}, _defineProperty__default["default"](_classNames, styles.isToday, isToday), _defineProperty__default["default"](_classNames, styles.isPast, isPast), _defineProperty__default["default"](_classNames, styles.active, dates.includes(dTime)), _classNames))
+    }, dateFns.format(d, 'd')) : /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classNames__default["default"](styles.day, _defineProperty__default["default"]({}, styles.isToday, isToday))
+    }, dateFns.format(d, 'd'));
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: "date-".concat(d.getTime, "-").concat(i + 1),
+      className: styles.calendarBox
+    }, d.getUTCMonth() !== activeMonth && mode === 'monthly' ? '' : inner);
+  }))));
+};
+CalendarList.propTypes = propTypes;
+CalendarList.defaultProps = defaultProps;
+
+exports["default"] = CalendarList;

package/package.json

@@ -0,0 +1,66 @@
+{
+    "name": "@panneau/list-calendar",
+    "version": "2.0.34",
+    "description": "Calendar list",
+    "keywords": [
+        "javascript"
+    ],
+    "homepage": "https://github.com/folkloreinc/panneau-js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/folkloreinc/panneau-js.git"
+    },
+    "author": {
+        "name": "Folklore",
+        "email": "info@folklore.email"
+    },
+    "contributors": [
+        {
+            "name": "David Mongeau-Petitpas",
+            "email": "dmp@folklore.email"
+        },
+        {
+            "name": "Nicolas Roy-Bourdages",
+            "email": "nrb@folklore.email"
+        }
+    ],
+    "license": "ISC",
+    "main": "lib/index.js",
+    "module": "es/index.js",
+    "files": [
+        "lib",
+        "es",
+        "assets"
+    ],
+    "scripts": {
+        "prepare": "../../scripts/prepare-package.sh"
+    },
+    "devDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    },
+    "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@panneau/core": "^2.0.34",
+        "@panneau/element-button": "^2.0.34",
+        "@panneau/element-card": "^2.0.34",
+        "@panneau/element-icon": "^2.0.34",
+        "@panneau/element-item-actions": "^2.0.34",
+        "@panneau/element-loading": "^2.0.34",
+        "@panneau/themes": "^2.0.34",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.29.3",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "query-string": "^8.1.0",
+        "react-intl": "^5.15.8||^6.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "dade083366e5c16d253387424ff5177d5c943e40"
+}