Fix week date change bug in toolbar

rouftom · May 3, 2022 · 661a910 · 661a910
1 parent 8899896
commit 661a910
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 97 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2.0.1] - 2022-05-03
+
+### Added
+
+
+### Changed
+
+
+### Fixed
+
+- Fix week date change bug in toolbar
+
+
 ## [2.0.0] - 2022-05-01
 
 ### Added

diff --git a/README.md b/README.md
@@ -29,7 +29,7 @@ import ReactDOM from 'react-dom'
 import Scheduler from "react-mui-scheduler"
 
 function App() {
-  const [state, setState] = useState({
+  const [state] = useState({
     options: {
       transitionMode: "zoom", // or fade
       startWeekOn: "Mon",     // or Sun
@@ -179,8 +179,8 @@ For more details about date formats, see [date-fns docs](https://date-fns.org/v2
 
 | Name 	|  Type 	|   Default	|  Description 	|  Values 	|
 |------	|---	|---	|---	|---	|
-|    transitionMode  	|  string 	|  `zoom` 	|  This option is used to define the type of scheduler transition 	|  `zoom`, `fade` 	|
-|   startWeekOn   	|   string	|  `Mon` 	|   This option is used to set the start of the calendar week to Monday or Sunday	|  `Mon`, `Sun` 	|
+|    transitionMode  	|  string 	|  `zoom` 	|  This option is used to define the type of scheduler transition 	|  `zoom`, `fade`, `slide` 	|
+|   startWeekOn   	|   string	|  `mon` 	|   This option is used to set the start of the calendar week to Monday or Sunday	|  `mon`, `sun` 	|
 |    defaultMode  	|  string 	|  `week` 	|  This option allows you to define the type of view to display 	|  `month`, `week`, `day`, `timeline` 	|
 |    minWidth  	|  number 	|  `540` 	|  This option allows you to define the minimum width of the container 	|  `number` 	|
 |    maxWidth  	|  number 	|  `540` 	|  This option allows you to define the maximum width of the container 	|  `number` 	|
@@ -239,7 +239,7 @@ For more details about date formats, see [date-fns docs](https://date-fns.org/v2
 
     Do you like this library ? Buy me a coffee or support me with a star on Github
 
-<a href="https://www.buymeacoffee.com/Lnp9rkM" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
+<a href="https://www.buymeacoffee.com/Lnp9rkM" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 40px !important;width: 180px !important;" ></a>
 
 * Btc address: `bc1qettgagenn9nc8ks7ghntjfme96yvvkfhntk774`
 

diff --git a/dist/index.esm.js b/dist/index.esm.js
@@ -147,7 +147,7 @@ var day$3 = "Día";
 var week$3 = "Semana";
 var month$3 = "Mes";
 var timeline$3 = "Cronología";
-var mon$3 = "Lub";
+var mon$3 = "Lun";
 var tue$3 = "Mar";
 var wed$3 = "Mié";
 var thu$3 = "Jue";
@@ -293,7 +293,8 @@ i18n // pass the i18n instance to react-i18next.
 
   },
   react: {
-    wait: true
+    wait: true,
+    useSuspense: false
   }
 });
 
@@ -381,6 +382,9 @@ function ToolbarSearchbar(props) {
     getOptionLabel: function getOptionLabel(option) {
       return option ? "".concat(option.groupLabel || '', " | (").concat(option.startHour || '', " - ").concat(option.endHour || '', ")") : '';
     },
+    isOptionEqualToValue: function isOptionEqualToValue(option, value) {
+      return option.id === value.id;
+    },
     onInputChange: function onInputChange(event, newInputValue) {
       setInputValue(newInputValue);
 
@@ -413,28 +417,28 @@ ToolbarSearchbar.defaultProps = {};
 function SchedulerToolbar(props) {
   props.locale;
       var events = props.events,
-      switchMode = props.switchMode,
       today = props.today,
+      switchMode = props.switchMode,
+      alertProps = props.alertProps,
       toolbarProps = props.toolbarProps,
       onModeChange = props.onModeChange,
+      onDateChange = props.onDateChange,
       onSearchResult = props.onSearchResult,
-      alertProps = props.alertProps,
-      onAlertCloseButtonClicked = props.onAlertCloseButtonClicked,
-      onDateChange = props.onDateChange;
+      onAlertCloseButtonClicked = props.onAlertCloseButtonClicked;
   var theme = useTheme();
 
   var _useTranslation = useTranslation(['common']),
       t = _useTranslation.t;
 
-  var _useState = useState(),
+  var _useState = useState(switchMode),
       _useState2 = _slicedToArray(_useState, 2),
-      searchResult = _useState2[0],
-      setSearchResult = _useState2[1];
+      mode = _useState2[0],
+      setMode = _useState2[1];
 
-  var _useState3 = useState(switchMode),
+  var _useState3 = useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      mode = _useState4[0],
-      setMode = _useState4[1];
+      searchResult = _useState4[0],
+      setSearchResult = _useState4[1];
 
   var _useState5 = useState(null),
       _useState6 = _slicedToArray(_useState5, 2),
@@ -459,9 +463,9 @@ function SchedulerToolbar(props) {
   var openMenu = Boolean(anchorMenuEl);
   var openDateSelector = Boolean(anchorDateEl);
   var dateFnsLocale = useContext(DateFnsLocaleContext);
-  var isDayMode = (mode === null || mode === void 0 ? void 0 : mode.toLowerCase()) === t('day').toLowerCase();
-  var isWeekMode = (mode === null || mode === void 0 ? void 0 : mode.toLowerCase()) === t('week').toLowerCase();
-  var isMonthMode = (mode === null || mode === void 0 ? void 0 : mode.toLowerCase()) === t('month').toLowerCase();
+  var isDayMode = mode.toLowerCase() === 'day';
+  var isWeekMode = mode.toLowerCase() === 'week';
+  var isMonthMode = mode.toLowerCase() === 'month';
   var commonIconButtonProps = {
     size: "medium",
     edge: "start",
@@ -662,7 +666,7 @@ function SchedulerToolbar(props) {
     onInputChange: function onInputChange(newValue) {
       var newDate = new Date();
 
-      if (newValue.date) {
+      if (newValue !== null && newValue !== void 0 && newValue.date) {
         newDate = parse(newValue.date, 'yyyy-MM-dd', today);
       }
 
@@ -1983,13 +1987,6 @@ function Scheduler(props) {
       daysInMonth = _useState12[0],
       setDaysInMonth = _useState12[1];
 
-  var _useReducer = useReducer(function (state) {
-    return weeks;
-  }, weeks),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      weekDays = _useReducer2[0],
-      updateWeekDays = _useReducer2[1];
-
   var _useState13 = useState((options === null || options === void 0 ? void 0 : options.startWeekOn) || 'mon'),
       _useState14 = _slicedToArray(_useState13, 2),
       startWeekOn = _useState14[0],
@@ -2000,6 +1997,17 @@ function Scheduler(props) {
       selectedDate = _useState16[0],
       setSelectedDate = _useState16[1];
 
+  var _useReducer = useReducer(function (state) {
+    if ((startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN') {
+      return [t('sun'), t('mon'), t('tue'), t('wed'), t('thu'), t('fri'), t('sat')];
+    }
+
+    return weeks;
+  }, weeks),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      weekDays = _useReducer2[0],
+      updateWeekDays = _useReducer2[1];
+
   var isDayMode = mode.toLowerCase() === 'day';
   var isWeekMode = mode.toLowerCase() === 'week';
   var isMonthMode = mode.toLowerCase() === 'month';
@@ -2046,11 +2054,10 @@ function Scheduler(props) {
 
 
   var getMonthHeader = function getMonthHeader() {
-    if ((startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN') {
-      weekDays[0] = t('sun');
-      weekDays[6] = t('mon');
-    }
-
+    //if (startWeekOn?.toUpperCase() === 'SUN') {
+    //weekDays[0] = t('sun')
+    //weekDays[1] = t('mon')
+    //}
     return weekDays.map(function (day, i) {
       return {
         id: "row-day-header-".concat(i + 1),
@@ -2079,7 +2086,7 @@ function Scheduler(props) {
         daysBefore = [];
     var iteration = getWeeksInMonth(selectedDay); //Math.ceil(daysInMonth / 7)
 
-    var startOnSunday = (startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === weekDays[6].toUpperCase;
+    var startOnSunday = (startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN' && t('sun').toUpperCase() === weekDays[0].toUpperCase();
     var monthStartDate = startOfMonth(selectedDay); // First day of month
 
     var monthStartDay = getDay(monthStartDate); // Index of the day in week
@@ -2114,10 +2121,10 @@ function Scheduler(props) {
       for (var i = 1; checkCondition(i); i++) {
         _loop(i);
       }
-    } else {
+    } else if (startOnSunday) {
       var _loop2 = function _loop2(_i) {
         var subDate = sub(monthStartDate, {
-          days: _i
+          days: _i + 1
         });
         var day = parseInt(format(subDate, 'dd'));
         var data = events.filter(function (event) {
@@ -2497,8 +2504,7 @@ function Scheduler(props) {
     if ((options === null || options === void 0 ? void 0 : options.startWeekOn) !== startWeekOn) {
       setStartWeekOn(options === null || options === void 0 ? void 0 : options.startWeekOn);
     }
-  }, [options === null || options === void 0 ? void 0 : options.startWeekOn]); //console.log(state.columns)
-
+  }, [options === null || options === void 0 ? void 0 : options.startWeekOn]);
   return /*#__PURE__*/React.createElement(Paper, {
     variant: "outlined",
     elevation: 0,

diff --git a/dist/index.umd.js b/dist/index.umd.js
@@ -149,7 +149,7 @@
   var week$3 = "Semana";
   var month$3 = "Mes";
   var timeline$3 = "Cronología";
-  var mon$3 = "Lub";
+  var mon$3 = "Lun";
   var tue$3 = "Mar";
   var wed$3 = "Mié";
   var thu$3 = "Jue";
@@ -295,7 +295,8 @@
 
     },
     react: {
-      wait: true
+      wait: true,
+      useSuspense: false
     }
   });
 
@@ -383,6 +384,9 @@
       getOptionLabel: function getOptionLabel(option) {
         return option ? "".concat(option.groupLabel || '', " | (").concat(option.startHour || '', " - ").concat(option.endHour || '', ")") : '';
       },
+      isOptionEqualToValue: function isOptionEqualToValue(option, value) {
+        return option.id === value.id;
+      },
       onInputChange: function onInputChange(event, newInputValue) {
         setInputValue(newInputValue);
 
@@ -415,28 +419,28 @@
   function SchedulerToolbar(props) {
     props.locale;
         var events = props.events,
-        switchMode = props.switchMode,
         today = props.today,
+        switchMode = props.switchMode,
+        alertProps = props.alertProps,
         toolbarProps = props.toolbarProps,
         onModeChange = props.onModeChange,
+        onDateChange = props.onDateChange,
         onSearchResult = props.onSearchResult,
-        alertProps = props.alertProps,
-        onAlertCloseButtonClicked = props.onAlertCloseButtonClicked,
-        onDateChange = props.onDateChange;
+        onAlertCloseButtonClicked = props.onAlertCloseButtonClicked;
     var theme = styles.useTheme();
 
     var _useTranslation = reactI18next.useTranslation(['common']),
         t = _useTranslation.t;
 
-    var _useState = React.useState(),
+    var _useState = React.useState(switchMode),
         _useState2 = _slicedToArray__default["default"](_useState, 2),
-        searchResult = _useState2[0],
-        setSearchResult = _useState2[1];
+        mode = _useState2[0],
+        setMode = _useState2[1];
 
-    var _useState3 = React.useState(switchMode),
+    var _useState3 = React.useState(),
         _useState4 = _slicedToArray__default["default"](_useState3, 2),
-        mode = _useState4[0],
-        setMode = _useState4[1];
+        searchResult = _useState4[0],
+        setSearchResult = _useState4[1];
 
     var _useState5 = React.useState(null),
         _useState6 = _slicedToArray__default["default"](_useState5, 2),
@@ -461,9 +465,9 @@
     var openMenu = Boolean(anchorMenuEl);
     var openDateSelector = Boolean(anchorDateEl);
     var dateFnsLocale = React.useContext(DateFnsLocaleContext);
-    var isDayMode = (mode === null || mode === void 0 ? void 0 : mode.toLowerCase()) === t('day').toLowerCase();
-    var isWeekMode = (mode === null || mode === void 0 ? void 0 : mode.toLowerCase()) === t('week').toLowerCase();
-    var isMonthMode = (mode === null || mode === void 0 ? void 0 : mode.toLowerCase()) === t('month').toLowerCase();
+    var isDayMode = mode.toLowerCase() === 'day';
+    var isWeekMode = mode.toLowerCase() === 'week';
+    var isMonthMode = mode.toLowerCase() === 'month';
     var commonIconButtonProps = {
       size: "medium",
       edge: "start",
@@ -664,7 +668,7 @@
       onInputChange: function onInputChange(newValue) {
         var newDate = new Date();
 
-        if (newValue.date) {
+        if (newValue !== null && newValue !== void 0 && newValue.date) {
           newDate = dateFns.parse(newValue.date, 'yyyy-MM-dd', today);
         }
 
@@ -1985,13 +1989,6 @@
         daysInMonth = _useState12[0],
         setDaysInMonth = _useState12[1];
 
-    var _useReducer = React.useReducer(function (state) {
-      return weeks;
-    }, weeks),
-        _useReducer2 = _slicedToArray__default["default"](_useReducer, 2),
-        weekDays = _useReducer2[0],
-        updateWeekDays = _useReducer2[1];
-
     var _useState13 = React.useState((options === null || options === void 0 ? void 0 : options.startWeekOn) || 'mon'),
         _useState14 = _slicedToArray__default["default"](_useState13, 2),
         startWeekOn = _useState14[0],
@@ -2002,6 +1999,17 @@
         selectedDate = _useState16[0],
         setSelectedDate = _useState16[1];
 
+    var _useReducer = React.useReducer(function (state) {
+      if ((startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN') {
+        return [t('sun'), t('mon'), t('tue'), t('wed'), t('thu'), t('fri'), t('sat')];
+      }
+
+      return weeks;
+    }, weeks),
+        _useReducer2 = _slicedToArray__default["default"](_useReducer, 2),
+        weekDays = _useReducer2[0],
+        updateWeekDays = _useReducer2[1];
+
     var isDayMode = mode.toLowerCase() === 'day';
     var isWeekMode = mode.toLowerCase() === 'week';
     var isMonthMode = mode.toLowerCase() === 'month';
@@ -2048,11 +2056,10 @@
 
 
     var getMonthHeader = function getMonthHeader() {
-      if ((startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN') {
-        weekDays[0] = t('sun');
-        weekDays[6] = t('mon');
-      }
-
+      //if (startWeekOn?.toUpperCase() === 'SUN') {
+      //weekDays[0] = t('sun')
+      //weekDays[1] = t('mon')
+      //}
       return weekDays.map(function (day, i) {
         return {
           id: "row-day-header-".concat(i + 1),
@@ -2081,7 +2088,7 @@
           daysBefore = [];
       var iteration = dateFns.getWeeksInMonth(selectedDay); //Math.ceil(daysInMonth / 7)
 
-      var startOnSunday = (startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === weekDays[6].toUpperCase;
+      var startOnSunday = (startWeekOn === null || startWeekOn === void 0 ? void 0 : startWeekOn.toUpperCase()) === 'SUN' && t('sun').toUpperCase() === weekDays[0].toUpperCase();
       var monthStartDate = dateFns.startOfMonth(selectedDay); // First day of month
 
       var monthStartDay = dateFns.getDay(monthStartDate); // Index of the day in week
@@ -2116,10 +2123,10 @@
         for (var i = 1; checkCondition(i); i++) {
           _loop(i);
         }
-      } else {
+      } else if (startOnSunday) {
         var _loop2 = function _loop2(_i) {
           var subDate = dateFns.sub(monthStartDate, {
-            days: _i
+            days: _i + 1
           });
           var day = parseInt(dateFns.format(subDate, 'dd'));
           var data = events.filter(function (event) {
@@ -2499,8 +2506,7 @@
       if ((options === null || options === void 0 ? void 0 : options.startWeekOn) !== startWeekOn) {
         setStartWeekOn(options === null || options === void 0 ? void 0 : options.startWeekOn);
       }
-    }, [options === null || options === void 0 ? void 0 : options.startWeekOn]); //console.log(state.columns)
-
+    }, [options === null || options === void 0 ? void 0 : options.startWeekOn]);
     return /*#__PURE__*/React__default["default"].createElement(material.Paper, {
       variant: "outlined",
       elevation: 0,

diff --git a/locales/es/common.json b/locales/es/common.json
@@ -3,7 +3,7 @@
   "week": "Semana",
   "month": "Mes",
   "timeline": "Cronología",
-  "mon": "Lub",
+  "mon": "Lun",
   "tue": "Mar",
   "wed": "Mié",
   "thu": "Jue",