chore(deps): update dependency react-datepicker to v8 (#2572)
* fix(deps): update dependency react-datepicker to v8 * chore(deps): update code to work with react-datepicker v8 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Braden MacDonald <braden@opencraft.com>
This commit is contained in:
80
package-lock.json
generated
80
package-lock.json
generated
@@ -57,7 +57,7 @@
|
||||
"moment-shortformat": "^2.1.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.3.1",
|
||||
"react-datepicker": "^4.13.0",
|
||||
"react-datepicker": "^8.0.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-error-boundary": "^4.0.13",
|
||||
"react-helmet": "^6.1.0",
|
||||
@@ -3030,6 +3030,40 @@
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/react": {
|
||||
"version": "0.27.16",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.16.tgz",
|
||||
"integrity": "sha512-9O8N4SeG2z++TSM8QA/KTeKFBVCNEz/AGS7gWPJf6KFRzmRWixFRnCnkPHRDwSVZW6QPDO6uT0P2SpWNKCc9/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/react-dom": "^2.1.6",
|
||||
"@floating-ui/utils": "^0.2.10",
|
||||
"tabbable": "^6.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=17.0.0",
|
||||
"react-dom": ">=17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/react-dom": {
|
||||
"version": "2.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
|
||||
"integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.7.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/react/node_modules/tabbable": {
|
||||
"version": "6.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.3.0.tgz",
|
||||
"integrity": "sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
|
||||
@@ -11369,6 +11403,15 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/co": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||
@@ -12695,19 +12738,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "2.30.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
|
||||
"integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.21.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.11"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/date-fns"
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
}
|
||||
},
|
||||
"node_modules/debounce": {
|
||||
@@ -24058,21 +24095,18 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-datepicker": {
|
||||
"version": "4.25.0",
|
||||
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz",
|
||||
"integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==",
|
||||
"version": "8.9.0",
|
||||
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.9.0.tgz",
|
||||
"integrity": "sha512-yoRsGxjqVRjk8iUBssrW9jcinTeyP9mAfTpuzdKvlESOUjdrY0sfDTzIZWJAn38jvNcxW1dnDmW1CinjiFdxYQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"classnames": "^2.2.6",
|
||||
"date-fns": "^2.30.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-onclickoutside": "^6.13.0",
|
||||
"react-popper": "^2.3.0"
|
||||
"@floating-ui/react": "^0.27.15",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^4.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17 || ^18",
|
||||
"react-dom": "^16.9.0 || ^17 || ^18"
|
||||
"react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
|
||||
"react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dev-utils": {
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
"moment-shortformat": "^2.1.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"react": "^18.3.1",
|
||||
"react-datepicker": "^4.13.0",
|
||||
"react-datepicker": "^8.0.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-error-boundary": "^4.0.13",
|
||||
"react-helmet": "^6.1.0",
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
Icon,
|
||||
} from '@openedx/paragon';
|
||||
import classNames from 'classnames';
|
||||
import DatePicker from 'react-datepicker/dist';
|
||||
import DatePicker from 'react-datepicker';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { Calendar as CalendarIcon, Error as ErrorIcon } from '@openedx/paragon/icons';
|
||||
import { Formik } from 'formik';
|
||||
@@ -73,7 +73,7 @@ const UpdateForm = ({
|
||||
<DatePicker
|
||||
name="date"
|
||||
data-testid="course-updates-datepicker"
|
||||
selected={isValidDate(values.date) ? convertToDateFromString(values.date) : ''}
|
||||
selected={isValidDate(values.date) ? convertToDateFromString(values.date) : undefined}
|
||||
dateFormat={DATE_FORMAT}
|
||||
className={classNames('datepicker-custom-control', {
|
||||
'datepicker-custom-control_isInvalid': !isValid,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import DatePicker from 'react-datepicker/dist';
|
||||
import DatePicker from 'react-datepicker';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { Form, Icon } from '@openedx/paragon';
|
||||
|
||||
@@ -124,10 +124,10 @@ describe('FilesAndUploads utils', () => {
|
||||
expect(date.toISOString()).toBe('2023-10-01T12:00:00.000Z');
|
||||
});
|
||||
|
||||
it('returns an empty string for invalid date strings', () => {
|
||||
it('returns undefined for invalid date strings', () => {
|
||||
const dateStr = '';
|
||||
const date = convertToDateFromString(dateStr);
|
||||
expect(date).toBe('');
|
||||
expect(date).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -265,15 +265,16 @@ export function setupYupExtensions() {
|
||||
});
|
||||
}
|
||||
|
||||
export const convertToDateFromString = (dateStr: string) => {
|
||||
export const convertToDateFromString = (dateStr: string): Date | undefined => {
|
||||
/**
|
||||
* Convert UTC to local time for react-datepicker
|
||||
* Note: react-datepicker has a bug where it only interacts with local time
|
||||
* Note: react-datepicker v4 had a bug where it only interacts with local time
|
||||
* but this bug may no longer be affecting v8+ ?
|
||||
* @param {string} dateStr - YYYY-MM-DDTHH:MM:SSZ
|
||||
* @return {Date} date in local time
|
||||
* @return date in local time
|
||||
*/
|
||||
if (!dateStr) {
|
||||
return '';
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const stripTimeZone = (stringValue: string) => stringValue.substring(0, 19);
|
||||
@@ -281,12 +282,13 @@ export const convertToDateFromString = (dateStr: string) => {
|
||||
return moment(stripTimeZone(String(dateStr))).toDate();
|
||||
};
|
||||
|
||||
export const convertToStringFromDate = (date: moment.MomentInput) => {
|
||||
export const convertToStringFromDate = (date: moment.MomentInput): string => {
|
||||
/**
|
||||
* Convert local time to UTC from react-datepicker
|
||||
* Note: react-datepicker has a bug where it only interacts with local time
|
||||
* Note: react-datepicker v4 had a bug where it only interacts with local time
|
||||
* but this bug may no longer be affecting v8+ ?
|
||||
* @param {Date} date - date in local time
|
||||
* @return {string} YYYY-MM-DDTHH:MM:SSZ
|
||||
* @return YYYY-MM-DDTHH:MM:SSZ
|
||||
*/
|
||||
if (!date) {
|
||||
return '';
|
||||
|
||||
Reference in New Issue
Block a user