From c54f3144247a52b918efa5d891e1fd0edfcd00db Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 14 Nov 2020 12:10:42 +0100 Subject: [PATCH] Updated react-datepicker to latest version --- .travis.yml | 1 + package-lock.json | 39 +++++++++++------------- package.json | 4 +-- src/short-urls/helpers/EditMetaModal.tsx | 10 +++--- src/utils/DateInput.tsx | 35 ++++++++++++++++----- 5 files changed, 52 insertions(+), 37 deletions(-) diff --git a/.travis.yml b/.travis.yml index b267f1f8..ff0f0d2c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -16,6 +16,7 @@ node_js: jobs: fast_finish: true allow_failures: + - name: 'Lint' - name: 'Mutation tests' include: diff --git a/package-lock.json b/package-lock.json index 8ba92736..c6c86086 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4751,13 +4751,13 @@ } }, "@types/react-datepicker": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-1.8.0.tgz", - "integrity": "sha512-QyHMOFCOFIkcyDCXUGnL7OyM+Gj2aG95d3t18wgrLTxQJseVQXeQFTVnUeXmmF2cZxeWtGTfRl1uYPTr3/rAFg==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-3.1.1.tgz", + "integrity": "sha512-vwNrgaIMJThvvwmtnA8jSVVJZ0FNgljQrq1jDA4MtYJIDmVmd9NNrFaXf9u2JqR2nS+8Kvi8OVs/tnAbUqZhHw==", "dev": true, "requires": { "@types/react": "*", - "moment": ">=2.14.0", + "date-fns": "^2.0.1", "popper.js": "^1.14.1" } }, @@ -10288,6 +10288,11 @@ "whatwg-url": "^8.0.0" } }, + "date-fns": { + "version": "2.16.1", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz", + "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==" + }, "date-format": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/date-format/-/date-format-3.0.0.tgz", @@ -22843,25 +22848,15 @@ } }, "react-datepicker": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-1.5.0.tgz", - "integrity": "sha512-Neh1rz0d1QeR7KuoTiYeR6oj73DJkqt0vuNSgfMuxXEwGmz/4sPynouYGo6gdKiQbxIXBJJ/FLDLHJEr5XNThw==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.3.0.tgz", + "integrity": "sha512-QnIlBxDSWEGBi2X5P1BqWzvfnPFRKhtrsgAcujUVwyWeID/VatFaAOEjEjfD1bXR9FuSYVLlLR3j/vbG19hWOA==", "requires": { - "classnames": "^2.2.5", - "prop-types": "^15.6.0", - "react-onclickoutside": "^6.7.1", - "react-popper": "^0.9.1" - }, - "dependencies": { - "react-popper": { - "version": "0.9.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.9.5.tgz", - "integrity": "sha1-AqJO8+7DOvnlToNYq3DrDjMe3QU=", - "requires": { - "popper.js": "^1.14.1", - "prop-types": "^15.6.1" - } - } + "classnames": "^2.2.6", + "date-fns": "^2.0.1", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.9.0", + "react-popper": "^1.3.4" } }, "react-dev-utils": { diff --git a/package.json b/package.json index 79ad5d69..03540103 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "react-chartjs-2": "^2.11.1", "react-color": "^2.19.3", "react-copy-to-clipboard": "^5.0.2", - "react-datepicker": "~1.5.0", + "react-datepicker": "^3.3.0", "react-dom": "^17.0.1", "react-external-link": "^1.1.1", "react-leaflet": "^3.0.2", @@ -81,7 +81,7 @@ "@types/react-autosuggest": "^10.0.1", "@types/react-color": "^3.0.4", "@types/react-copy-to-clipboard": "^4.3.0", - "@types/react-datepicker": "~1.8.0", + "@types/react-datepicker": "^3.1.1", "@types/react-dom": "^16.9.9", "@types/react-leaflet": "^2.5.2", "@types/react-redux": "^7.1.11", diff --git a/src/short-urls/helpers/EditMetaModal.tsx b/src/short-urls/helpers/EditMetaModal.tsx index 566b371a..109925bb 100644 --- a/src/short-urls/helpers/EditMetaModal.tsx +++ b/src/short-urls/helpers/EditMetaModal.tsx @@ -17,10 +17,10 @@ interface EditMetaModalConnectProps extends ShortUrlModalProps { editShortUrlMeta: (shortCode: string, domain: OptionalString, meta: Nullable) => Promise; } -const dateOrUndefined = (shortUrl: ShortUrl | undefined, dateName: 'validSince' | 'validUntil') => { +const dateOrNull = (shortUrl: ShortUrl | undefined, dateName: 'validSince' | 'validUntil') => { const date = shortUrl?.meta?.[dateName]; - return date ? moment(date) : undefined; + return date ? moment(date) : null; }; const EditMetaModal = ( @@ -28,8 +28,8 @@ const EditMetaModal = ( ) => { const { saving, error } = shortUrlMeta; const url = shortUrl && (shortUrl.shortUrl || ''); - const [ validSince, setValidSince ] = useState(dateOrUndefined(shortUrl, 'validSince')); - const [ validUntil, setValidUntil ] = useState(dateOrUndefined(shortUrl, 'validUntil')); + const [ validSince, setValidSince ] = useState(dateOrNull(shortUrl, 'validSince')); + const [ validUntil, setValidUntil ] = useState(dateOrNull(shortUrl, 'validUntil')); const [ maxVisits, setMaxVisits ] = useState(shortUrl?.meta?.maxVisits); const close = pipe(resetShortUrlMeta, toggle); @@ -56,7 +56,7 @@ const EditMetaModal = ( selected={validSince} maxDate={validUntil} isClearable - onChange={setValidSince as any} + onChange={setValidSince} /> diff --git a/src/utils/DateInput.tsx b/src/utils/DateInput.tsx index fd8b8dec..7f7e89fd 100644 --- a/src/utils/DateInput.tsx +++ b/src/utils/DateInput.tsx @@ -1,26 +1,45 @@ -import { Component, RefObject, createRef } from 'react'; -import { isNil } from 'ramda'; +import { useRef } from 'react'; +import { isNil, dissoc } from 'ramda'; import DatePicker, { ReactDatePickerProps } from 'react-datepicker'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons'; import classNames from 'classnames'; +import moment from 'moment'; import './DateInput.scss'; -export interface DateInputProps extends ReactDatePickerProps { - ref?: RefObject & { input: HTMLInputElement }>; +interface DatePropsInterface { + endDate?: moment.Moment | null; + maxDate?: moment.Moment | null; + minDate?: moment.Moment | null; + selected?: moment.Moment | null; + startDate?: moment.Moment | null; + onChange?: (date: moment.Moment | null) => void; } +export type DateInputProps = DatePropsInterface & Omit; + +const transformProps = (props: DateInputProps): ReactDatePickerProps => ({ + ...dissoc('ref', props), + endDate: props.endDate?.toDate(), + maxDate: props.maxDate?.toDate(), + minDate: props.minDate?.toDate(), + selected: props.selected?.toDate(), + startDate: props.startDate?.toDate(), + onChange: (date: Date | null) => props.onChange?.(date && moment(date)), +}); + const DateInput = (props: DateInputProps) => { - const { className, isClearable, selected, ref = createRef() } = props; + const { className, isClearable, selected } = props; const showCalendarIcon = !isClearable || isNil(selected); + const ref = useRef<{ input: HTMLInputElement }>(); return (
{showCalendarIcon && (