From ed5d326d0b7f61537bff3e1a0d0f039bcb247271 Mon Sep 17 00:00:00 2001 From: "rouftomb@gmail.com" Date: Sat, 2 Oct 2021 08:07:32 +0100 Subject: [PATCH] Improve event triggers --- dist/index.esm.js | 38 ++++++++++++++++++++++---------------- dist/index.umd.js | 38 ++++++++++++++++++++++---------------- package.json | 2 +- src/DayModeView.jsx | 6 +++--- src/MonthModeView.jsx | 6 +++--- src/TimeLineModeView.jsx | 3 ++- src/Toolbar.jsx | 12 ++++++++---- src/ToolbarSeachBar.jsx | 2 +- src/WeekModeView.jsx | 6 +++--- 9 files changed, 65 insertions(+), 48 deletions(-) diff --git a/dist/index.esm.js b/dist/index.esm.js index 66aa66d..34fd5d1 100644 --- 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 index ae6d94a..00a47b2 100644 --- 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 index 3d5a9c9..5dce866 100644 --- 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 index bf8c002..2c66f99 100644 --- 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 index 7ebbacc..8058982 100644 --- 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 index 2e05921..faeb694 100644 --- 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 ( handleTaskClick(event, task)} > { + onAlertCloseButtonClicked && onAlertCloseButtonClicked(e) + } + useEffect(() => { - if (mode) { onModeChange(mode) } + if (mode && onModeChange) { onModeChange(mode) } // eslint-disable-next-line }, [mode]) useEffect(() => { - onDateChange(daysInMonth, selectedDate) + onDateChange && onDateChange(daysInMonth, selectedDate) // eslint-disable-next-line }, [daysInMonth, selectedDate]) useEffect(() => { - onSearchResult(searchResult) + onSearchResult && onSearchResult(searchResult) // eslint-disable-next-line }, [searchResult]) @@ -270,7 +274,7 @@ function SchedulerToolbar (props) { aria-label="close" color="inherit" size="small" - onClick={onAlertCloseButtonClicked} + onClick={handleCloseAlert} > : null diff --git a/src/ToolbarSeachBar.jsx b/src/ToolbarSeachBar.jsx index e928dd3..409a4a8 100644 --- a/src/ToolbarSeachBar.jsx +++ b/src/ToolbarSeachBar.jsx @@ -23,7 +23,7 @@ function ToolbarSearchbar (props) { const handleOnChange = (event, newValue) => { setValue(newValue) - onInputChange(newValue) + onInputChange && onInputChange(newValue) } return ( diff --git a/src/WeekModeView.jsx b/src/WeekModeView.jsx index 4fe360f..43eb52d 100644 --- a/src/WeekModeView.jsx +++ b/src/WeekModeView.jsx @@ -174,7 +174,7 @@ function WeekModeView (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) } } @@ -190,7 +190,7 @@ function WeekModeView (props) { event.preventDefault() event.stopPropagation() //setState({...state, activeItem: day}) - onCellClick(event, row, day) + onCellClick && onCellClick(event, row, day) } /** @@ -242,7 +242,7 @@ function WeekModeView (props) { const handleTaskClick = (event, task) => { event.preventDefault() event.stopPropagation() - onTaskClick(event, task) + onTaskClick && onTaskClick(event, task) } return (