From 661a910881b9c2581e972ade6e57a0f0e6710d87 Mon Sep 17 00:00:00 2001 From: rouftomb Date: Tue, 3 May 2022 06:16:54 +0100 Subject: [PATCH] Fix week date change bug in toolbar --- CHANGELOG.md | 13 ++++++++ README.md | 8 ++--- dist/index.esm.js | 72 ++++++++++++++++++++++------------------- dist/index.umd.js | 72 ++++++++++++++++++++++------------------- locales/es/common.json | 2 +- locales/locale.js | 5 ++- package.json | 2 +- src/Scheduler.jsx | 33 ++++++++++++------- src/Toolbar.jsx | 27 ++++++++-------- src/ToolbarSeachBar.jsx | 1 + 10 files changed, 138 insertions(+), 97 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c21a70..f0c1469 100644 --- 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 index 1d3eae3..3675074 100644 --- 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 -Buy Me A Coffee +Buy Me A Coffee * Btc address: `bc1qettgagenn9nc8ks7ghntjfme96yvvkfhntk774` diff --git a/dist/index.esm.js b/dist/index.esm.js index e9a1965..25b2149 100644 --- 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 index 8a082b3..2e0ab0a 100644 --- 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 index 0d9e487..b014db3 100644 --- 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", diff --git a/locales/locale.js b/locales/locale.js index a356555..f6f0944 100644 --- a/locales/locale.js +++ b/locales/locale.js @@ -37,7 +37,10 @@ i18n interpolation: { escapeValue: false, // not needed for react as it escapes by default }, - react: { wait: true }, + react: { + wait: true, + useSuspense: false + }, }) export default i18n diff --git a/package.json b/package.json index 1f673e3..ff63860 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-mui-scheduler", - "version": "2.0.0", + "version": "2.0.1", "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", "scripts": { diff --git a/src/Scheduler.jsx b/src/Scheduler.jsx index d240cc8..f4a891e 100644 --- a/src/Scheduler.jsx +++ b/src/Scheduler.jsx @@ -60,9 +60,18 @@ function Scheduler(props) { const [alertState, setAlertState] = useState(alertProps) const [mode, setMode] = useState(options?.defaultMode || 'month') const [daysInMonth, setDaysInMonth] = useState(getDaysInMonth(today)) - const [weekDays, updateWeekDays]= useReducer((state) => weeks, weeks) const [startWeekOn, setStartWeekOn] = useState(options?.startWeekOn || 'mon') const [selectedDate, setSelectedDate] = useState(format(today, 'MMMM-yyyy')) + const [weekDays, updateWeekDays]= useReducer((state) => { + if (startWeekOn?.toUpperCase() === 'SUN') { + return [ + t('sun'), t('mon'), t('tue'), + t('wed'), t('thu'), t('fri'), + t('sat') + ] + } + return weeks + }, weeks) const isDayMode = mode.toLowerCase() === 'day' const isWeekMode = mode.toLowerCase() === 'week' @@ -83,16 +92,18 @@ function Scheduler(props) { if (locale === 'ru') { dateFnsLocale = ru } if (locale === 'zh') { dateFnsLocale = zhCN } + + /** * @name getMonthHeader * @description * @return {{headerClassName: string, headerAlign: string, headerName: string, field: string, flex: number, editable: boolean, id: string, sortable: boolean, align: string}[]} */ const getMonthHeader = () => { - if (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((day, i) => ({ id: `row-day-header-${i+1}`, flex: 1, @@ -114,7 +125,10 @@ function Scheduler(props) { const getMonthRows = () => { let rows = [], daysBefore = [] let iteration = getWeeksInMonth(selectedDay) //Math.ceil(daysInMonth / 7) - let startOnSunday = startWeekOn?.toUpperCase() === weekDays[6].toUpperCase + let startOnSunday = ( + startWeekOn?.toUpperCase() === 'SUN' && + t('sun').toUpperCase() === weekDays[0].toUpperCase() + ) let monthStartDate = startOfMonth(selectedDay) // First day of month let monthStartDay = getDay(monthStartDate) // Index of the day in week let dateDay = parseInt(format(monthStartDate, 'dd')) // Month start day @@ -122,7 +136,6 @@ function Scheduler(props) { const checkCondition = (v) => ( startOnSunday ? v <= monthStartDay : v < monthStartDay ) - if (monthStartDay >= 1) { // Add days of precedent month // If Sunday is the first day of week, apply b <= monthStartDay @@ -146,9 +159,9 @@ function Scheduler(props) { data: data }) } - } else { + } else if (startOnSunday) { for (let i = 6; i > 0; i--) { - let subDate = sub(monthStartDate, {days: i}) + let subDate = sub(monthStartDate, {days: i+1}) let day = parseInt(format(subDate, 'dd')) let data = events.filter((event) => ( isSameDay(subDate, parse(event?.date, 'yyyy-MM-dd', new Date())) @@ -468,8 +481,6 @@ function Scheduler(props) { } }, [options?.startWeekOn]) - //console.log(state.columns) - return ( diff --git a/src/Toolbar.jsx b/src/Toolbar.jsx index d26db2d..eefb199 100644 --- a/src/Toolbar.jsx +++ b/src/Toolbar.jsx @@ -29,20 +29,21 @@ import DateFnsLocaleContext from "../locales/dateFnsContext" function SchedulerToolbar (props) { const { locale, - // events data - events, switchMode, today, toolbarProps, - // Mode - onModeChange, onSearchResult, - // Alert props - alertProps, onAlertCloseButtonClicked, - // Date - onDateChange + events, + today, + switchMode, + alertProps, + toolbarProps, + onModeChange, + onDateChange, + onSearchResult, + onAlertCloseButtonClicked } = props const theme = useTheme() const { t } = useTranslation(['common']) - const [searchResult, setSearchResult] = useState() const [mode, setMode] = useState(switchMode) + const [searchResult, setSearchResult] = useState() const [anchorMenuEl, setAnchorMenuEl] = useState(null) const [anchorDateEl, setAnchorDateEl] = useState(null) const [selectedDate, setSelectedDate] = useState(today || new Date()) @@ -51,9 +52,9 @@ function SchedulerToolbar (props) { const openMenu = Boolean(anchorMenuEl) const openDateSelector = Boolean(anchorDateEl) const dateFnsLocale = useContext(DateFnsLocaleContext) - const isDayMode = mode?.toLowerCase() === t('day').toLowerCase() - const isWeekMode = mode?.toLowerCase() === t('week').toLowerCase() - const isMonthMode = mode?.toLowerCase() === t('month').toLowerCase() + const isDayMode = mode.toLowerCase() === 'day' + const isWeekMode = mode.toLowerCase() === 'week' + const isMonthMode = mode.toLowerCase() === 'month' const commonIconButtonProps = { size: "medium", @@ -237,7 +238,7 @@ function SchedulerToolbar (props) { events={events} onInputChange={(newValue) => { let newDate = new Date() - if (newValue.date) { + if (newValue?.date) { newDate = parse(newValue.date, 'yyyy-MM-dd', today) } setDaysInMonth(getDaysInMonth(newDate)) diff --git a/src/ToolbarSeachBar.jsx b/src/ToolbarSeachBar.jsx index 4ab7e92..b9f0607 100644 --- a/src/ToolbarSeachBar.jsx +++ b/src/ToolbarSeachBar.jsx @@ -65,6 +65,7 @@ function ToolbarSearchbar (props) { option ? `${option.groupLabel || ''} | (${option.startHour || ''} - ${option.endHour || ''})` : '' )} + isOptionEqualToValue={(option, value) => option.id === value.id} onInputChange={(event, newInputValue) => { setInputValue(newInputValue) onInputChange(newInputValue)