Skip to content

Commit 693f6ab

Browse files
treskotresko
committed
WIP(input): enable date input
affects: @datepicker-react/hooks, @datepicker-react/styled
1 parent 9fad187 commit 693f6ab

15 files changed

Lines changed: 166 additions & 86 deletions

File tree

‎config/setupTest.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import '@testing-library/react/cleanup-after-each'
22
import 'jest-styled-components'
3-
import 'jest-dom/extend-expect'
3+
import '@testing-library/jest-dom/extend-expect'

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
"@storybook/addon-viewport": "^5.1.9",
5656
"@storybook/addons": "^5.1.9",
5757
"@storybook/react": "^5.1.9",
58+
"@testing-library/jest-dom": "^4.0.0",
5859
"@testing-library/react": "^8.0.4",
5960
"@testing-library/react-hooks": "^1.1.0",
6061
"@types/jest": "^24.0.15",
@@ -84,7 +85,6 @@
8485
"jest": "^24.8.0",
8586
"jest-config": "^24.8.0",
8687
"jest-date-mock": "^1.0.7",
87-
"jest-dom": "^3.5.0",
8888
"jest-environment-jsdom": "^24.8.0",
8989
"jest-environment-node": "^24.8.0",
9090
"jest-runner-eslint": "^0.7.4",

‎packages/hooks/lib/index.cjs.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -803,9 +803,9 @@ function useDatepicker(e) {
803803
}),
804804
h = y[0],
805805
T = y[1],
806-
M = react.useState(null),
807-
p = M[0],
808-
k = M[1],
806+
p = react.useState(null),
807+
M = p[0],
808+
k = p[1],
809809
v = react.useState(t),
810810
S = v[0],
811811
I = v[1],
@@ -851,15 +851,15 @@ function useDatepicker(e) {
851851
function(e) {
852852
return isDateHovered({
853853
date: e,
854-
hoveredDate: p,
854+
hoveredDate: M,
855855
startDate: t,
856856
endDate: a,
857857
minBookingDays: c,
858858
exactMinBookingDays: u,
859859
isDateBlocked: m,
860860
})
861861
},
862-
[p, t, a, c, u, m],
862+
[M, t, a, c, u, m],
863863
)
864864
function E(e) {
865865
if (
@@ -892,7 +892,7 @@ function useDatepicker(e) {
892892
numberOfMonths: D,
893893
isDateFocused: b,
894894
focusedDate: S,
895-
hoveredDate: p,
895+
hoveredDate: M,
896896
onResetDates: function() {
897897
s({startDate: null, endDate: null, focusedInput: START_DATE})
898898
},
@@ -909,7 +909,7 @@ function useDatepicker(e) {
909909
l = t && !a && !u && s && i,
910910
g = !(c > 1 && t) || is_within_range(e, t, add_days(t, c - 2)),
911911
m = t && is_same_day(e, t) && g
912-
r && (_ || l || m) ? k(e) : null !== p && k(null)
912+
r && (_ || l || m) ? k(e) : null !== M && k(null)
913913
}
914914
} else k(null)
915915
},
@@ -1021,6 +1021,7 @@ function useDay(e) {
10211021
(exports.isDateSelected = isDateSelected),
10221022
(exports.isFirstOrLastSelectedDate = isFirstOrLastSelectedDate),
10231023
(exports.monthLabelFormat = monthLabelFormatFn),
1024+
(exports.parseDate = parse_1),
10241025
(exports.useDatepicker = useDatepicker),
10251026
(exports.useDay = useDay),
10261027
(exports.useMonth = useMonth),

‎packages/hooks/lib/index.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import parseDate from 'date-fns/parse'
12
import {
23
useMonth,
34
UseMonthProps,
@@ -59,4 +60,5 @@ export {
5960
dayLabelFormat,
6061
weekdayLabelFormat,
6162
monthLabelFormat,
63+
parseDate,
6264
}

‎packages/hooks/lib/index.esm.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -974,6 +974,7 @@ export {
974974
ye as isDateSelected,
975975
Me as isFirstOrLastSelectedDate,
976976
ue as monthLabelFormat,
977+
x as parseDate,
977978
Be as useDatepicker,
978979
He as useDay,
979980
ie as useMonth,

‎packages/hooks/src/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import parseDate from 'date-fns/parse'
12
import {
23
useMonth,
34
UseMonthProps,
@@ -29,7 +30,6 @@ import {
2930
FirstDayOfWeek,
3031
OnDatesChangeProps,
3132
} from './useDatepicker'
32-
3333
import useDay from './useDay'
3434

3535
export {
@@ -61,4 +61,5 @@ export {
6161
dayLabelFormat,
6262
weekdayLabelFormat,
6363
monthLabelFormat,
64+
parseDate,
6465
}

‎packages/styled/src/components/DateRangeInput/DateRangeInput.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ function DateRangeInput({
153153
phrases = dateRangeInputPhrases,
154154
placement = 'bottom',
155155
}: DateRangeInputProps) {
156+
const ref = useRef(null)
156157
const datepickerWrapperRef = useRef<HTMLDivElement>(null)
157158
const themeContext = useContext(ThemeContext)
158159
const theme: DateRangeInputTheme = useThemeProps({
@@ -197,6 +198,14 @@ function DateRangeInput({
197198
onFocusChange(null)
198199
}
199200

201+
function handleInputChange(date: Date) {
202+
// @ts-ignore
203+
if (ref && ref.current && ref.current.onDateSelect) {
204+
// @ts-ignore
205+
ref.current.onDateSelect(date)
206+
}
207+
}
208+
200209
return (
201210
<Wrapper rtl={rtl} position="relative" ref={datepickerWrapperRef}>
202211
<InputGrid
@@ -216,6 +225,9 @@ function DateRangeInput({
216225
isActive={focusedInput === START_DATE}
217226
padding={theme.dateRangeStartDateInputPadding}
218227
rtl={rtl}
228+
onChange={handleInputChange}
229+
// @ts-ignore
230+
dateFormat={displayFormat}
219231
/>
220232
<Flex alignItems="center" justifyContent="center">
221233
<InputArrowIcon
@@ -240,6 +252,9 @@ function DateRangeInput({
240252
padding={theme.dateRangeEndDateInputPadding}
241253
rtl={rtl}
242254
disableAccessibility={focusedInput === START_DATE}
255+
onChange={handleInputChange}
256+
// @ts-ignore
257+
dateFormat={displayFormat}
243258
/>
244259
</InputGrid>
245260
<Box
@@ -274,6 +289,7 @@ function DateRangeInput({
274289
monthLabelFormat={monthLabelFormat}
275290
onDayRender={onDayRender}
276291
phrases={phrases}
292+
ref={ref}
277293
/>
278294
)}
279295
</Box>

‎packages/styled/src/components/DateRangeInput/__snapshots__/DateRangeInput.test.tsx.snap‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,6 @@ exports[`should click on select end date 1`] = `
140140
font-weight="600"
141141
id="startDate"
142142
placeholder="Start date"
143-
readonly=""
144143
tabindex="0"
145144
value=""
146145
width="100%"
@@ -199,7 +198,6 @@ exports[`should click on select end date 1`] = `
199198
font-weight="600"
200199
id="endDate"
201200
placeholder="End date"
202-
readonly=""
203201
tabindex="0"
204202
value=""
205203
width="100%"
@@ -788,7 +786,6 @@ exports[`should have empty end date and focused end date 1`] = `
788786
font-weight="600"
789787
id="startDate"
790788
placeholder="Start date"
791-
readonly=""
792789
tabindex="0"
793790
value="03/16/2019"
794791
width="100%"
@@ -847,7 +844,6 @@ exports[`should have empty end date and focused end date 1`] = `
847844
font-weight="600"
848845
id="endDate"
849846
placeholder="End date"
850-
readonly=""
851847
tabindex="0"
852848
value=""
853849
width="100%"
@@ -2983,7 +2979,6 @@ exports[`should have empty start and end date and focused start date - placement
29832979
font-weight="600"
29842980
id="startDate"
29852981
placeholder="Start date"
2986-
readonly=""
29872982
tabindex="0"
29882983
value=""
29892984
width="100%"
@@ -3042,7 +3037,6 @@ exports[`should have empty start and end date and focused start date - placement
30423037
font-weight="600"
30433038
id="endDate"
30443039
placeholder="End date"
3045-
readonly=""
30463040
tabindex="-1"
30473041
value=""
30483042
width="100%"
@@ -5176,7 +5170,6 @@ exports[`should have empty start and end date and focused start date 1`] = `
51765170
font-weight="600"
51775171
id="startDate"
51785172
placeholder="Start date"
5179-
readonly=""
51805173
tabindex="0"
51815174
value=""
51825175
width="100%"
@@ -5235,7 +5228,6 @@ exports[`should have empty start and end date and focused start date 1`] = `
52355228
font-weight="600"
52365229
id="endDate"
52375230
placeholder="End date"
5238-
readonly=""
52395231
tabindex="-1"
52405232
value=""
52415233
width="100%"
@@ -7355,7 +7347,6 @@ exports[`should not render calendar icons 1`] = `
73557347
font-weight="600"
73567348
id="startDate"
73577349
placeholder="test"
7358-
readonly=""
73597350
tabindex="0"
73607351
value="16.03.2019"
73617352
width="100%"
@@ -7394,7 +7385,6 @@ exports[`should not render calendar icons 1`] = `
73947385
font-weight="600"
73957386
id="endDate"
73967387
placeholder="test"
7397-
readonly=""
73987388
tabindex="0"
73997389
value=""
74007390
width="100%"
@@ -9513,7 +9503,6 @@ exports[`should render custom day 1`] = `
95139503
font-weight="600"
95149504
id="startDate"
95159505
placeholder="Start date"
9516-
readonly=""
95179506
tabindex="0"
95189507
value=""
95199508
width="100%"
@@ -9572,7 +9561,6 @@ exports[`should render custom day 1`] = `
95729561
font-weight="600"
95739562
id="endDate"
95749563
placeholder="End date"
9575-
readonly=""
95769564
tabindex="-1"
95779565
value=""
95789566
width="100%"
@@ -11493,7 +11481,6 @@ exports[`should render rtl variant 1`] = `
1149311481
font-weight="600"
1149411482
id="startDate"
1149511483
placeholder="Start date"
11496-
readonly=""
1149711484
tabindex="0"
1149811485
value="03/16/2019"
1149911486
width="100%"
@@ -11552,7 +11539,6 @@ exports[`should render rtl variant 1`] = `
1155211539
font-weight="600"
1155311540
id="endDate"
1155411541
placeholder="End date"
11555-
readonly=""
1155611542
tabindex="0"
1155711543
value=""
1155811544
width="100%"
@@ -13725,7 +13711,6 @@ exports[`should render vertical variant 1`] = `
1372513711
font-weight="600"
1372613712
id="startDate"
1372713713
placeholder="Start date"
13728-
readonly=""
1372913714
tabindex="0"
1373013715
value="03/16/2019"
1373113716
width="100%"
@@ -13784,7 +13769,6 @@ exports[`should render vertical variant 1`] = `
1378413769
font-weight="600"
1378513770
id="endDate"
1378613771
placeholder="End date"
13787-
readonly=""
1378813772
tabindex="0"
1378913773
value=""
1379013774
width="100%"
@@ -15968,7 +15952,6 @@ exports[`should render vertical, rtl variant 1`] = `
1596815952
font-weight="600"
1596915953
id="startDate"
1597015954
placeholder="Start date"
15971-
readonly=""
1597215955
tabindex="0"
1597315956
value="03/16/2019"
1597415957
width="100%"
@@ -16027,7 +16010,6 @@ exports[`should render vertical, rtl variant 1`] = `
1602716010
font-weight="600"
1602816011
id="endDate"
1602916012
placeholder="End date"
16030-
readonly=""
1603116013
tabindex="0"
1603216014
value=""
1603316015
width="100%"
@@ -18008,7 +17990,6 @@ exports[`should render without reset dates, close and selected dates component 1
1800817990
font-weight="600"
1800917991
id="startDate"
1801017992
placeholder="Start date"
18011-
readonly=""
1801217993
tabindex="0"
1801317994
value="03/16/2019"
1801417995
width="100%"
@@ -18067,7 +18048,6 @@ exports[`should render without reset dates, close and selected dates component 1
1806718048
font-weight="600"
1806818049
id="endDate"
1806918050
placeholder="End date"
18070-
readonly=""
1807118051
tabindex="0"
1807218052
value=""
1807318053
width="100%"

‎packages/styled/src/components/DateSingleInput/DateSingleInput.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ function DateSingleInput({
113113
phrases = dateSingleInputPhrases,
114114
placement = 'bottom',
115115
}: DateRangeInputProps) {
116+
const ref = useRef(null)
116117
const datepickerWrapperRef = useRef<HTMLDivElement>(null)
117118
const theme: DateSingleInputTheme = useThemeProps({
118119
dateSingleInputPadding: vertical ? (rtl ? '0 32px 0 8px' : '0 8px 0 32px') : '0 44px',
@@ -154,6 +155,14 @@ function DateSingleInput({
154155
})
155156
}
156157

158+
function handleInputChange(date: Date) {
159+
// @ts-ignore
160+
if (ref && ref.current && ref.current.onDateSelect) {
161+
// @ts-ignore
162+
ref.current.onDateSelect(date)
163+
}
164+
}
165+
157166
return (
158167
<Wrapper rtl={rtl} position="relative" ref={datepickerWrapperRef}>
159168
<Input
@@ -167,6 +176,9 @@ function DateSingleInput({
167176
isActive={false}
168177
padding={theme.dateSingleInputPadding}
169178
rtl={rtl}
179+
onChange={handleInputChange}
180+
// @ts-ignore
181+
dateFormat={displayFormat}
170182
/>
171183
<Box
172184
position={theme.dateSingleDatepickerWrapperPosition}
@@ -200,6 +212,7 @@ function DateSingleInput({
200212
monthLabelFormat={monthLabelFormat}
201213
onDayRender={onDayRender}
202214
phrases={phrases}
215+
ref={ref}
203216
/>
204217
)}
205218
</Box>

0 commit comments

Comments
 (0)
⚡