Skip to content

Commit a9eec56

Browse files
tunglt1810tunglt1810
committed
upgrade to react 18
Signed-off-by: TungLT <tungluong2809@gmail.com>
1 parent 21116de commit a9eec56

16 files changed

+3626
-2870
lines changed

‎package.json

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@
4242
"@babel/preset-react": "^7.8.3",
4343
"@rollup/plugin-commonjs": "^11.0.1",
4444
"@rollup/plugin-node-resolve": "^7.0.0",
45-
"@testing-library/dom": "^6.11.0",
46-
"@testing-library/jest-dom": "^4.2.4",
47-
"@testing-library/react": "^9.4.0",
48-
"@testing-library/react-hooks": "^3.2.1",
45+
"@testing-library/dom": "^10.4.0",
46+
"@testing-library/jest-dom": "^6.6.3",
47+
"@testing-library/react": "^16.0.1",
48+
"@testing-library/react-hooks": "^8.0.1",
4949
"@types/date-fns": "^2.6.0",
5050
"autoprefixer": "^9.7.3",
5151
"date-fns": "^2.9.0",
@@ -64,8 +64,8 @@
6464
"postcss-cli": "^7.1.0",
6565
"prism-react-renderer": "^1.0.2",
6666
"prop-types": "^15",
67-
"react": "^16",
68-
"react-dom": "^16",
67+
"react": "^18",
68+
"react-dom": "^18",
6969
"react-test-renderer": "^16.12.0",
7070
"rollup": "^1.29.0",
7171
"rollup-plugin-babel": "^4.3.3",
@@ -74,6 +74,7 @@
7474
"sass": "^1.25.0"
7575
},
7676
"dependencies": {
77+
"caniuse-lite": "^1.0.30001684",
7778
"classnames": "^2.2.6"
7879
}
7980
}

‎src/Calendar.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from 'react'
2-
import { bool, func, instanceOf, object, objectOf, string } from 'prop-types'
31
import { startOfMonth } from 'date-fns'
4-
import { isSelectable, mergeModifiers } from './utils'
5-
import useControllableState from './useControllableState'
2+
import { bool, func, instanceOf, object, objectOf, string } from 'prop-types'
3+
import React from 'react'
4+
import CalendarGrid from './CalendarGrid'
65
import CalendarNavigation from './CalendarNavigation'
76
import CalendarWeekHeader from './CalendarWeekHeader'
8-
import CalendarGrid from './CalendarGrid'
7+
import useControllableState from './useControllableState'
8+
import { isSelectable, mergeModifiers } from './utils'
99

1010
export default function Calendar({
1111
locale,

‎src/CalendarDay.js

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react'
2-
import { bool, instanceOf, func, number, object, objectOf, string } from 'prop-types'
3-
import { getDate, format, isToday } from 'date-fns'
41
import classNames from 'classnames'
2+
import { format, getDate, isToday } from 'date-fns'
3+
import { bool, func, instanceOf, number, object, objectOf, string } from 'prop-types'
4+
import React from 'react'
55

66
const defaultModifiersClassNames = {
77
today: '-today',
@@ -18,10 +18,10 @@ export default function CalendarDay({
1818
date,
1919
height,
2020
locale,
21-
modifiers: receivedModifiers,
21+
modifiers: receivedModifiers = {},
2222
modifiersClassNames: receivedModifiersClassNames,
23-
onClick,
24-
onHover
23+
onClick = () => {},
24+
onHover = () => {}
2525
}) {
2626
const dayOfMonth = getDate(date)
2727
const dayClassNames = {}
@@ -71,9 +71,3 @@ CalendarDay.propTypes = {
7171
onHover: func,
7272
onClick: func
7373
}
74-
75-
CalendarDay.defaultProps = {
76-
modifiers: {},
77-
onHover: () => {},
78-
onClick: () => {}
79-
}

‎src/CalendarGrid.js

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React from 'react'
2-
import { bool, instanceOf, func, number, object, objectOf, string } from 'prop-types'
3-
import { eachDayOfInterval, isSameMonth, lightFormat, startOfMonth } from 'date-fns'
41
import classNames from 'classnames'
5-
import useGrid from './useGrid'
6-
import { ORIGIN_BOTTOM, ORIGIN_TOP } from './constants'
2+
import { eachDayOfInterval, isSameMonth, lightFormat, startOfMonth } from 'date-fns'
3+
import { bool, func, instanceOf, number, object, objectOf, string } from 'prop-types'
4+
import React from 'react'
75
import CalendarDay from './CalendarDay'
6+
import { ORIGIN_BOTTOM, ORIGIN_TOP } from './constants'
7+
import useGrid from './useGrid'
88

99
const computeModifiers = (modifiers, date) => {
1010
const computedModifiers = {}
@@ -19,13 +19,13 @@ const computeModifiers = (modifiers, date) => {
1919
export default function CalendarGrid({
2020
locale,
2121
month,
22-
modifiers,
22+
modifiers = {},
2323
modifiersClassNames,
2424
onMonthChange,
2525
onDayHover,
2626
onDayClick,
27-
transitionDuration,
28-
touchDragEnabled
27+
transitionDuration = 500,
28+
touchDragEnabled = true
2929
}) {
3030
const grid = useGrid({ locale, month: startOfMonth(month), onMonthChange, transitionDuration, touchDragEnabled })
3131
const { startDate, endDate, cellHeight, containerElementRef, isWide, offset, origin, transition } = grid
@@ -81,12 +81,6 @@ CalendarGrid.propTypes = {
8181
onMonthChange: func.isRequired,
8282
onDayHover: func,
8383
onDayClick: func,
84-
transitionDuration: number.isRequired,
84+
transitionDuration: number,
8585
touchDragEnabled: bool
8686
}
87-
88-
CalendarGrid.defaultProps = {
89-
modifiers: {},
90-
transitionDuration: 500,
91-
touchDragEnabled: true
92-
}

‎src/CalendarWeekHeader.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react'
1+
import { eachDayOfInterval, endOfWeek, format, startOfWeek } from 'date-fns'
22
import { object, string } from 'prop-types'
3-
import { eachDayOfInterval, endOfWeek, startOfWeek, format } from 'date-fns'
3+
import React from 'react'
44

5-
export default function CalendarWeekHeader({ locale, weekdayFormat }) {
5+
export default function CalendarWeekHeader({ locale, weekdayFormat = 'eee' }) {
66
const today = new Date()
77

88
const weekDays = eachDayOfInterval({
@@ -25,7 +25,3 @@ CalendarWeekHeader.propTypes = {
2525
locale: object.isRequired,
2626
weekdayFormat: string
2727
}
28-
29-
CalendarWeekHeader.defaultProps = {
30-
weekdayFormat: 'eee'
31-
}

‎src/DatePicker.js

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import React, { useState } from 'react'
21
import { bool, func, instanceOf, object, objectOf, string } from 'prop-types'
2+
import React, { useState } from 'react'
3+
import DatePickerCalendar from './DatePickerCalendar'
4+
import Popover from './Popover'
35
import useDateInput from './useDateInput'
46
import useDetectTouch from './useDetectTouch'
57
import useOutsideClickHandler from './useOutsideClickHandler'
6-
import DatePickerCalendar from './DatePickerCalendar'
7-
import Popover from './Popover'
88

99
export default function DatePicker({
1010
children,
1111
locale,
1212
date,
13-
onDateChange,
13+
onDateChange = () => {},
1414
format,
1515
minimumDate,
1616
maximumDate,
@@ -97,7 +97,3 @@ DatePicker.propTypes = {
9797
weekdayFormat: string,
9898
touchDragEnabled: bool
9999
}
100-
101-
DatePicker.defaultProps = {
102-
onDateChange: () => {}
103-
}

‎src/DateRangePicker.js

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import React, { useState } from 'react'
21
import { bool, func, instanceOf, number, object, objectOf, string } from 'prop-types'
3-
import { isRangeLengthValid } from './utils'
4-
import { START_DATE, END_DATE } from './constants'
5-
import useDateInput from './useDateInput'
6-
import useOutsideClickHandler from './useOutsideClickHandler'
7-
import useDetectTouch from './useDetectTouch'
2+
import React, { useState } from 'react'
3+
import { END_DATE, START_DATE } from './constants'
84
import DateRangePickerCalendar from './DateRangePickerCalendar'
95
import Popover from './Popover'
6+
import useDateInput from './useDateInput'
7+
import useDetectTouch from './useDetectTouch'
8+
import useOutsideClickHandler from './useOutsideClickHandler'
9+
import { isRangeLengthValid } from './utils'
1010

1111
export default function DateRangePicker({
1212
children,
1313
locale,
1414
startDate,
1515
endDate,
16-
onStartDateChange,
17-
onEndDateChange,
16+
onStartDateChange = () => {},
17+
onEndDateChange = () => {},
1818
format,
1919
minimumDate,
2020
maximumDate,
21-
minimumLength,
22-
maximumLength,
21+
minimumLength = 0,
22+
maximumLength = null,
2323
modifiers,
2424
modifiersClassNames,
2525
weekdayFormat,
@@ -133,10 +133,3 @@ DateRangePicker.propTypes = {
133133
weekdayFormat: string,
134134
touchDragEnabled: bool
135135
}
136-
137-
DateRangePicker.defaultProps = {
138-
onStartDateChange: () => {},
139-
onEndDateChange: () => {},
140-
minimumLength: 0,
141-
maximumLength: null
142-
}

‎src/DateRangePickerCalendar.js

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import React, { useState } from 'react'
1+
import { differenceInDays, isAfter, isBefore, isSameDay, startOfDay, startOfMonth } from 'date-fns'
22
import { bool, func, instanceOf, number, object, objectOf, oneOf, string } from 'prop-types'
3-
import { differenceInDays, isSameDay, isAfter, isBefore, startOfMonth, startOfDay } from 'date-fns'
4-
import { isRangeLengthValid, isSelectable, mergeModifiers, setTime } from './utils'
5-
import { START_DATE, END_DATE } from './constants'
6-
import useControllableState from './useControllableState'
3+
import React, { useState } from 'react'
74
import Calendar from './Calendar'
5+
import { END_DATE, START_DATE } from './constants'
6+
import useControllableState from './useControllableState'
7+
import { isRangeLengthValid, isSelectable, mergeModifiers, setTime } from './utils'
88

99
export default function DateRangePickerCalendar({
1010
locale,
1111
startDate,
1212
endDate,
1313
focus,
1414
month: receivedMonth,
15-
onStartDateChange,
16-
onEndDateChange,
17-
onFocusChange,
15+
onStartDateChange = () => {},
16+
onEndDateChange = () => {},
17+
onFocusChange = () => {},
1818
onMonthChange,
1919
minimumDate,
2020
maximumDate,
21-
minimumLength,
22-
maximumLength,
21+
minimumLength = 0,
22+
maximumLength = null,
2323
modifiers: receivedModifiers,
2424
modifiersClassNames,
2525
weekdayFormat,
@@ -118,9 +118,9 @@ DateRangePickerCalendar.propTypes = {
118118
endDate: instanceOf(Date),
119119
focus: oneOf([START_DATE, END_DATE]),
120120
month: instanceOf(Date),
121-
onStartDateChange: func.isRequired,
122-
onEndDateChange: func.isRequired,
123-
onFocusChange: func.isRequired,
121+
onStartDateChange: func,
122+
onEndDateChange: func,
123+
onFocusChange: func,
124124
onMonthChange: func,
125125
minimumDate: instanceOf(Date),
126126
maximumDate: instanceOf(Date),
@@ -131,11 +131,3 @@ DateRangePickerCalendar.propTypes = {
131131
weekdayFormat: string,
132132
touchDragEnabled: bool
133133
}
134-
135-
DateRangePickerCalendar.defaultProps = {
136-
onStartDateChange: () => {},
137-
onEndDateChange: () => {},
138-
onFocusChange: () => {},
139-
minimumLength: 0,
140-
maximumLength: null
141-
}

‎test/Calendar.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react'
1+
import '@testing-library/jest-dom'
22
import { render } from '@testing-library/react'
3-
import '@testing-library/jest-dom/extend-expect'
43
import { format } from 'date-fns'
54
import { enGB as locale } from 'date-fns/locale'
5+
import React from 'react'
66
import Calendar from '../src/Calendar'
77

88
describe('Calendar', () => {

‎test/DatePicker.test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react'
2-
import { render, fireEvent } from '@testing-library/react'
3-
import '@testing-library/jest-dom/extend-expect'
1+
import '@testing-library/jest-dom'
2+
import { fireEvent, render } from '@testing-library/react'
3+
import classNames from 'classnames'
44
import { format, subMonths } from 'date-fns'
55
import { enGB as locale } from 'date-fns/locale'
6-
import classNames from 'classnames'
6+
import React from 'react'
77
import DatePicker from '../src/DatePicker'
88

99
describe('DatePicker', () => {

‎test/DatePickerCalendar.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React from 'react'
2-
import { render, fireEvent } from '@testing-library/react'
3-
import '@testing-library/jest-dom/extend-expect'
1+
import '@testing-library/jest-dom'
2+
import { fireEvent, render } from '@testing-library/react'
43
import { format, startOfMonth, subMonths } from 'date-fns'
54
import { enGB as locale } from 'date-fns/locale'
5+
import React from 'react'
66
import DatePickerCalendar from '../src/DatePickerCalendar'
77

88
describe('DatePickerCalendar', () => {

‎test/DateRangePicker.test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React from 'react'
2-
import { render, fireEvent } from '@testing-library/react'
3-
import '@testing-library/jest-dom/extend-expect'
1+
import '@testing-library/jest-dom'
2+
import { fireEvent, render } from '@testing-library/react'
3+
import classNames from 'classnames'
44
import { format, subMonths } from 'date-fns'
55
import { enGB as locale } from 'date-fns/locale'
6-
import classNames from 'classnames'
7-
import { START_DATE, END_DATE } from '../src/constants'
6+
import React from 'react'
7+
import { END_DATE, START_DATE } from '../src/constants'
88
import DateRangePicker from '../src/DateRangePicker'
99

1010
describe('DateRangePicker', () => {

‎test/DateRangePickerCalendar.test.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react'
2-
import { render, fireEvent } from '@testing-library/react'
3-
import '@testing-library/jest-dom/extend-expect'
4-
import { addDays, format, startOfMonth, set, startOfDay, subMonths } from 'date-fns'
1+
import '@testing-library/jest-dom'
2+
import { fireEvent, render } from '@testing-library/react'
3+
import { addDays, format, set, startOfDay, startOfMonth, subMonths } from 'date-fns'
54
import { enGB as locale } from 'date-fns/locale'
6-
import { START_DATE, END_DATE } from '../src/constants'
5+
import React from 'react'
6+
import { END_DATE, START_DATE } from '../src/constants'
77
import DateRangePickerCalendar from '../src/DateRangePickerCalendar'
88

99
describe('DateRangePickerCalendar', () => {

‎test/useDateInput.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { renderHook } from '@testing-library/react-hooks'
1+
import { renderHook } from '@testing-library/react'
22
import { enGB } from 'date-fns/locale'
33
import useDateInput from '../src/useDateInput'
44

‎website/CodeBlock.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react'
2-
import { string } from 'prop-types'
31
import Highlight, { defaultProps } from 'prism-react-renderer'
42
import theme from 'prism-react-renderer/themes/github'
3+
import { string } from 'prop-types'
4+
import React from 'react'
55

6-
export default function CodeBlock({ code, language }) {
6+
export default function CodeBlock({ code, language = 'jsx' }) {
77
return (
88
<Highlight {...defaultProps} code={code.trim()} language={language} theme={theme}>
99
{({ className, style, tokens, getLineProps, getTokenProps }) => (
@@ -25,7 +25,3 @@ CodeBlock.propTypes = {
2525
code: string,
2626
language: string
2727
}
28-
29-
CodeBlock.defaultProps = {
30-
language: 'jsx'
31-
}

0 commit comments

Comments
 (0)