Improve event triggers

rouftom · Oct 2, 2021 · ed5d326 · ed5d326
1 parent c93fa35
commit ed5d326
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 48 deletions.
diff --git a/dist/index.esm.js b/dist/index.esm.js
@@ -64,8 +64,7 @@ function ToolbarSearchbar(props) {
 
   var handleOnChange = function handleOnChange(event, newValue) {
     setValue(newValue);
-
-    _onInputChange(newValue);
+    _onInputChange && _onInputChange(newValue);
   };
 
   return /*#__PURE__*/React.createElement(StyledAutoComplete, {
@@ -259,17 +258,21 @@ function SchedulerToolbar(props) {
     setSelectedDate(newDate);
   };
 
+  var handleCloseAlert = function handleCloseAlert(e) {
+    onAlertCloseButtonClicked && onAlertCloseButtonClicked(e);
+  };
+
   useEffect(function () {
-    if (mode) {
+    if (mode && onModeChange) {
       onModeChange(mode);
     } // eslint-disable-next-line
 
   }, [mode]);
   useEffect(function () {
-    onDateChange(daysInMonth, selectedDate); // eslint-disable-next-line
+    onDateChange && onDateChange(daysInMonth, selectedDate); // eslint-disable-next-line
   }, [daysInMonth, selectedDate]);
   useEffect(function () {
-    onSearchResult(searchResult); // eslint-disable-next-line
+    onSearchResult && onSearchResult(searchResult); // eslint-disable-next-line
   }, [searchResult]);
   return /*#__PURE__*/React.createElement(Toolbar, {
     variant: "dense",
@@ -405,7 +408,7 @@ function SchedulerToolbar(props) {
       "aria-label": "close",
       color: "inherit",
       size: "small",
-      onClick: onAlertCloseButtonClicked
+      onClick: handleCloseAlert
     }, /*#__PURE__*/React.createElement(CloseIcon, {
       fontSize: "inherit"
     })) : null
@@ -608,7 +611,7 @@ function MonthModeView(props) {
               itemTransfert: null,
               transfertTarget: null
             }));
-            onEventsChange(transfert.item);
+            onEventsChange && onEventsChange(transfert.item);
           }
         }
       }
@@ -630,7 +633,7 @@ function MonthModeView(props) {
     event.preventDefault();
     event.stopPropagation();
 
-    if ((day === null || day === void 0 ? void 0 : (_day$data = day.data) === null || _day$data === void 0 ? void 0 : _day$data.length) === 0) {
+    if ((day === null || day === void 0 ? void 0 : (_day$data = day.data) === null || _day$data === void 0 ? void 0 : _day$data.length) === 0 && onCellClick) {
       onCellClick(event, row, day);
     }
   };
@@ -686,7 +689,7 @@ function MonthModeView(props) {
   var handleTaskClick = function handleTaskClick(event, task) {
     event.preventDefault();
     event.stopPropagation();
-    onTaskClick(event, task);
+    onTaskClick && onTaskClick(event, task);
   };
 
   return /*#__PURE__*/React.createElement(TableContainer, {
@@ -969,7 +972,7 @@ function WeekModeView(props) {
       setState(_objectSpread$2(_objectSpread$2({}, state), {}, {
         rows: rowsData
       }));
-      onEventsChange(transfert === null || transfert === void 0 ? void 0 : transfert.item);
+      onEventsChange && onEventsChange(transfert === null || transfert === void 0 ? void 0 : transfert.item);
     }
   };
   /**
@@ -986,7 +989,7 @@ function WeekModeView(props) {
     event.preventDefault();
     event.stopPropagation(); //setState({...state, activeItem: day})
 
-    onCellClick(event, row, day);
+    onCellClick && onCellClick(event, row, day);
   };
   /**
    * @name renderTask
@@ -1041,7 +1044,7 @@ function WeekModeView(props) {
   var handleTaskClick = function handleTaskClick(event, task) {
     event.preventDefault();
     event.stopPropagation();
-    onTaskClick(event, task);
+    onTaskClick && onTaskClick(event, task);
   };
 
   return /*#__PURE__*/React.createElement(StyledTableContainer$1, {
@@ -1346,7 +1349,7 @@ function DayModeView(props) {
       setState(_objectSpread$1(_objectSpread$1({}, state), {}, {
         rows: rowsData
       }));
-      onEventsChange(transfert === null || transfert === void 0 ? void 0 : transfert.item);
+      onEventsChange && onEventsChange(transfert === null || transfert === void 0 ? void 0 : transfert.item);
     }
   };
   /**
@@ -1363,7 +1366,7 @@ function DayModeView(props) {
     event.preventDefault();
     event.stopPropagation(); //setState({...state, activeItem: day})
 
-    onCellClick(event, row, day);
+    onCellClick && onCellClick(event, row, day);
   };
   /**
    * @name renderTask
@@ -1418,7 +1421,7 @@ function DayModeView(props) {
   var handleTaskClick = function handleTaskClick(event, task) {
     event.preventDefault();
     event.stopPropagation();
-    onTaskClick(event, task);
+    onTaskClick && onTaskClick(event, task);
   };
 
   return /*#__PURE__*/React.createElement(StyledTableContainer, {
@@ -1559,7 +1562,7 @@ function TimeLineModeView(props) {
   var handleTaskClick = function handleTaskClick(event, task) {
     event.preventDefault();
     event.stopPropagation();
-    onTaskClick(event, task);
+    onTaskClick && onTaskClick(event, task);
   };
 
   var fileredEvents = rows === null || rows === void 0 ? void 0 : rows.sort(function (a, b) {
@@ -1588,6 +1591,9 @@ function TimeLineModeView(props) {
   }, fileredEvents && ((_fileredEvents2 = fileredEvents) === null || _fileredEvents2 === void 0 ? void 0 : _fileredEvents2.map(function (task, index) {
     return /*#__PURE__*/React.createElement(TimelineItem, {
       key: "timeline-".concat(index),
+      sx: {
+        cursor: 'pointer'
+      },
       onClick: function onClick(event) {
         return handleTaskClick(event, task);
       }

diff --git a/dist/index.umd.js b/dist/index.umd.js
@@ -67,8 +67,7 @@
 
     var handleOnChange = function handleOnChange(event, newValue) {
       setValue(newValue);
-
-      _onInputChange(newValue);
+      _onInputChange && _onInputChange(newValue);
     };
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAutoComplete, {
@@ -262,17 +261,21 @@
       setSelectedDate(newDate);
     };
 
+    var handleCloseAlert = function handleCloseAlert(e) {
+      onAlertCloseButtonClicked && onAlertCloseButtonClicked(e);
+    };
+
     React.useEffect(function () {
-      if (mode) {
+      if (mode && onModeChange) {
         onModeChange(mode);
       } // eslint-disable-next-line
 
     }, [mode]);
     React.useEffect(function () {
-      onDateChange(daysInMonth, selectedDate); // eslint-disable-next-line
+      onDateChange && onDateChange(daysInMonth, selectedDate); // eslint-disable-next-line
     }, [daysInMonth, selectedDate]);
     React.useEffect(function () {
-      onSearchResult(searchResult); // eslint-disable-next-line
+      onSearchResult && onSearchResult(searchResult); // eslint-disable-next-line
     }, [searchResult]);
     return /*#__PURE__*/React__default["default"].createElement(material.Toolbar, {
       variant: "dense",
@@ -408,7 +411,7 @@
         "aria-label": "close",
         color: "inherit",
         size: "small",
-        onClick: onAlertCloseButtonClicked
+        onClick: handleCloseAlert
       }, /*#__PURE__*/React__default["default"].createElement(CloseIcon__default["default"], {
         fontSize: "inherit"
       })) : null
@@ -611,7 +614,7 @@
                 itemTransfert: null,
                 transfertTarget: null
               }));
-              onEventsChange(transfert.item);
+              onEventsChange && onEventsChange(transfert.item);
             }
           }
         }
@@ -633,7 +636,7 @@
       event.preventDefault();
       event.stopPropagation();
 
-      if ((day === null || day === void 0 ? void 0 : (_day$data = day.data) === null || _day$data === void 0 ? void 0 : _day$data.length) === 0) {
+      if ((day === null || day === void 0 ? void 0 : (_day$data = day.data) === null || _day$data === void 0 ? void 0 : _day$data.length) === 0 && onCellClick) {
         onCellClick(event, row, day);
       }
     };
@@ -689,7 +692,7 @@
     var handleTaskClick = function handleTaskClick(event, task) {
       event.preventDefault();
       event.stopPropagation();
-      onTaskClick(event, task);
+      onTaskClick && onTaskClick(event, task);
     };
 
     return /*#__PURE__*/React__default["default"].createElement(material.TableContainer, {
@@ -972,7 +975,7 @@
         setState(_objectSpread$2(_objectSpread$2({}, state), {}, {
           rows: rowsData
         }));
-        onEventsChange(transfert === null || transfert === void 0 ? void 0 : transfert.item);
+        onEventsChange && onEventsChange(transfert === null || transfert === void 0 ? void 0 : transfert.item);
       }
     };
     /**
@@ -989,7 +992,7 @@
       event.preventDefault();
       event.stopPropagation(); //setState({...state, activeItem: day})
 
-      onCellClick(event, row, day);
+      onCellClick && onCellClick(event, row, day);
     };
     /**
      * @name renderTask
@@ -1044,7 +1047,7 @@
     var handleTaskClick = function handleTaskClick(event, task) {
       event.preventDefault();
       event.stopPropagation();
-      onTaskClick(event, task);
+      onTaskClick && onTaskClick(event, task);
     };
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTableContainer$1, {
@@ -1349,7 +1352,7 @@
         setState(_objectSpread$1(_objectSpread$1({}, state), {}, {
           rows: rowsData
         }));
-        onEventsChange(transfert === null || transfert === void 0 ? void 0 : transfert.item);
+        onEventsChange && onEventsChange(transfert === null || transfert === void 0 ? void 0 : transfert.item);
       }
     };
     /**
@@ -1366,7 +1369,7 @@
       event.preventDefault();
       event.stopPropagation(); //setState({...state, activeItem: day})
 
-      onCellClick(event, row, day);
+      onCellClick && onCellClick(event, row, day);
     };
     /**
      * @name renderTask
@@ -1421,7 +1424,7 @@
     var handleTaskClick = function handleTaskClick(event, task) {
       event.preventDefault();
       event.stopPropagation();
-      onTaskClick(event, task);
+      onTaskClick && onTaskClick(event, task);
     };
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTableContainer, {
@@ -1562,7 +1565,7 @@
     var handleTaskClick = function handleTaskClick(event, task) {
       event.preventDefault();
       event.stopPropagation();
-      onTaskClick(event, task);
+      onTaskClick && onTaskClick(event, task);
     };
 
     var fileredEvents = rows === null || rows === void 0 ? void 0 : rows.sort(function (a, b) {
@@ -1591,6 +1594,9 @@
     }, fileredEvents && ((_fileredEvents2 = fileredEvents) === null || _fileredEvents2 === void 0 ? void 0 : _fileredEvents2.map(function (task, index) {
       return /*#__PURE__*/React__default["default"].createElement(TimelineItem__default["default"], {
         key: "timeline-".concat(index),
+        sx: {
+          cursor: 'pointer'
+        },
         onClick: function onClick(event) {
           return handleTaskClick(event, task);
         }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mui-scheduler",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "📅 React mui scheduler is a react component based on @mui v5 that allows you to manage data in a calendar",
   "main": "dist/index.esm.js",
   "directories": {

diff --git a/src/DayModeView.jsx b/src/DayModeView.jsx
@@ -169,7 +169,7 @@ function DayModeView (props) {
       transfert.item.date = format(day?.date, 'yyyy-MM-dd')
       day.data.push(transfert.item)
       setState({...state, rows: rowsData})
-      onEventsChange(transfert?.item)
+      onEventsChange && onEventsChange(transfert?.item)
     }
   }
 
@@ -185,7 +185,7 @@ function DayModeView (props) {
     event.preventDefault()
     event.stopPropagation()
     //setState({...state, activeItem: day})
-    onCellClick(event, row, day)
+    onCellClick && onCellClick(event, row, day)
   }
 
   /**
@@ -237,7 +237,7 @@ function DayModeView (props) {
   const handleTaskClick = (event, task) => {
     event.preventDefault()
     event.stopPropagation()
-    onTaskClick(event, task)
+    onTaskClick && onTaskClick(event, task)
   }
 
   return (

diff --git a/src/MonthModeView.jsx b/src/MonthModeView.jsx
@@ -133,7 +133,7 @@ function MonthModeView (props) {
             transfert.item.date = format(day?.date, 'yyyy-MM-dd')
             day.data.push(transfert.item)
             setState({...state, rows: rowsCopy, itemTransfert: null, transfertTarget: null})
-            onEventsChange(transfert.item)
+            onEventsChange && onEventsChange(transfert.item)
           }
         }
       }
@@ -151,7 +151,7 @@ function MonthModeView (props) {
   const handleCellClick = (event, row, day) => {
     event.preventDefault()
     event.stopPropagation()
-    if (day?.data?.length === 0) {
+    if (day?.data?.length === 0 && onCellClick) {
       onCellClick(event, row, day)
     }
   }
@@ -205,7 +205,7 @@ function MonthModeView (props) {
   const handleTaskClick = (event, task) => {
     event.preventDefault()
     event.stopPropagation()
-    onTaskClick(event, task)
+    onTaskClick && onTaskClick(event, task)
   }
 
   return (

diff --git a/src/TimeLineModeView.jsx b/src/TimeLineModeView.jsx
@@ -44,7 +44,7 @@ function TimeLineModeView (props) {
   const handleTaskClick = (event, task) => {
     event.preventDefault()
     event.stopPropagation()
-    onTaskClick(event, task)
+    onTaskClick && onTaskClick(event, task)
   }
 
   let fileredEvents = rows?.sort((a, b) => -b?.groupLabel?.localeCompare(a?.groupLabel))
@@ -68,6 +68,7 @@ function TimeLineModeView (props) {
           return (
             <TimelineItem
               key={`timeline-${index}`}
+              sx={{cursor: 'pointer'}}
               onClick={event => handleTaskClick(event, task)}
             >
               <TimelineOppositeContent