@sproutsocial/seeds-react-datepicker 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintignore +6 -0
- package/.eslintrc.js +4 -0
- package/.turbo/turbo-build.log +21 -0
- package/CHANGELOG.md +7 -0
- package/dist/esm/index.js +411 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.mts +60 -0
- package/dist/index.d.ts +60 -0
- package/dist/index.js +451 -0
- package/dist/index.js.map +1 -0
- package/jest.config.js +9 -0
- package/package.json +53 -0
- package/src/DateRangePicker/DateRangePicker.stories.tsx +125 -0
- package/src/DateRangePicker/DateRangePicker.tsx +83 -0
- package/src/DateRangePicker/DateRangePickerTypes.ts +35 -0
- package/src/DateRangePicker/StatefulDateRangePicker.tsx +47 -0
- package/src/DateRangePicker/__tests__/DateRangePicker.test.tsx +257 -0
- package/src/DateRangePicker/__tests__/DateRangePicker.typetest.tsx +34 -0
- package/src/DateRangePicker/index.ts +6 -0
- package/src/SingleDatePicker/SingleDatePicker.stories.tsx +92 -0
- package/src/SingleDatePicker/SingleDatePicker.tsx +73 -0
- package/src/SingleDatePicker/SingleDatePickerTypes.ts +25 -0
- package/src/SingleDatePicker/StatefulSingleDatePicker.tsx +25 -0
- package/src/SingleDatePicker/__tests__/SingleDatePicker.test.tsx +155 -0
- package/src/SingleDatePicker/__tests__/SingleDatePicker.typetest.tsx +24 -0
- package/src/SingleDatePicker/index.ts +6 -0
- package/src/common.tsx +60 -0
- package/src/index.ts +2 -0
- package/src/styled.d.ts +7 -0
- package/src/styles.ts +224 -0
- package/src/types.ts +24 -0
- package/tsconfig.json +9 -0
- package/tsup.config.ts +12 -0
package/.eslintignore
ADDED
package/.eslintrc.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
yarn run v1.22.22
|
|
2
|
+
$ tsup --dts
|
|
3
|
+
CLI Building entry: src/index.ts
|
|
4
|
+
CLI Using tsconfig: tsconfig.json
|
|
5
|
+
CLI tsup v8.0.2
|
|
6
|
+
CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-datepicker/tsup.config.ts
|
|
7
|
+
CLI Target: es2022
|
|
8
|
+
CLI Cleaning output folder
|
|
9
|
+
CJS Build start
|
|
10
|
+
ESM Build start
|
|
11
|
+
ESM dist/esm/index.js 12.23 KB
|
|
12
|
+
ESM dist/esm/index.js.map 22.71 KB
|
|
13
|
+
ESM ⚡️ Build success in 166ms
|
|
14
|
+
CJS dist/index.js 15.13 KB
|
|
15
|
+
CJS dist/index.js.map 22.85 KB
|
|
16
|
+
CJS ⚡️ Build success in 166ms
|
|
17
|
+
DTS Build start
|
|
18
|
+
DTS ⚡️ Build success in 30861ms
|
|
19
|
+
DTS dist/index.d.ts 3.01 KB
|
|
20
|
+
DTS dist/index.d.mts 3.01 KB
|
|
21
|
+
Done in 36.38s.
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,411 @@
|
|
|
1
|
+
// src/SingleDatePicker/SingleDatePicker.tsx
|
|
2
|
+
import React2, { useCallback, useState } from "react";
|
|
3
|
+
import moment2 from "moment";
|
|
4
|
+
import DayPickerSingleDateController from "react-dates/lib/components/DayPickerSingleDateController";
|
|
5
|
+
|
|
6
|
+
// src/styles.ts
|
|
7
|
+
import styled, { createGlobalStyle, css } from "styled-components";
|
|
8
|
+
import moment from "moment";
|
|
9
|
+
import { disabled } from "@sproutsocial/seeds-react-mixins";
|
|
10
|
+
import Box from "@sproutsocial/seeds-react-box";
|
|
11
|
+
var isSelected = (modifiers) => modifiers.has("selected-span") || modifiers.has("selected") || modifiers.has("selected-start") || modifiers.has("selected-end") || modifiers.has("hovered-span") || modifiers.has("after-hovered-start");
|
|
12
|
+
var isOutOfRange = (modifiers) => modifiers.has("blocked-out-of-range");
|
|
13
|
+
var isHoveredAndInRange = (modifiers) => modifiers.has("hovered") && !modifiers.has("blocked-out-of-range");
|
|
14
|
+
var shouldHaveLeftPill = (modifiers, day) => {
|
|
15
|
+
if (!isSelected(modifiers)) {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
if (modifiers.has("selected") || modifiers.has("selected-start") || modifiers.has("first-day-of-week") || day.isSame(moment(day).startOf("month"), "day")) {
|
|
19
|
+
return true;
|
|
20
|
+
}
|
|
21
|
+
return false;
|
|
22
|
+
};
|
|
23
|
+
var shouldHaveRightPill = (modifiers, day) => {
|
|
24
|
+
if (!isSelected(modifiers)) {
|
|
25
|
+
return false;
|
|
26
|
+
}
|
|
27
|
+
if (modifiers.has("selected") || modifiers.has("selected-end") || modifiers.has("last-day-of-week") || day.isSame(moment(day).endOf("month"), "day")) {
|
|
28
|
+
return true;
|
|
29
|
+
}
|
|
30
|
+
return false;
|
|
31
|
+
};
|
|
32
|
+
var CalendarDay = styled(Box)`
|
|
33
|
+
${({ modifiers, day, theme }) => {
|
|
34
|
+
if (isSelected(modifiers)) {
|
|
35
|
+
return css`
|
|
36
|
+
background-color: ${theme.colors.container.background.selected};
|
|
37
|
+
color: ${theme.colors.text.inverse};
|
|
38
|
+
margin-left: ${shouldHaveLeftPill(modifiers, day) && theme.space[200]};
|
|
39
|
+
margin-right: ${shouldHaveRightPill(modifiers, day) && theme.space[200]};
|
|
40
|
+
border-top-left-radius: ${shouldHaveLeftPill(modifiers, day) && theme.radii.pill};
|
|
41
|
+
border-bottom-left-radius: ${shouldHaveLeftPill(modifiers, day) && theme.radii.pill};
|
|
42
|
+
border-top-right-radius: ${shouldHaveRightPill(modifiers, day) && theme.radii.pill};
|
|
43
|
+
border-bottom-right-radius: ${shouldHaveRightPill(modifiers, day) && theme.radii.pill};
|
|
44
|
+
`;
|
|
45
|
+
}
|
|
46
|
+
if (isHoveredAndInRange(modifiers)) {
|
|
47
|
+
return css`
|
|
48
|
+
margin: 0 ${theme.space[200]};
|
|
49
|
+
border-radius: ${theme.radii.pill};
|
|
50
|
+
border: 1px solid ${theme.colors.container.border.selected};
|
|
51
|
+
`;
|
|
52
|
+
} else if (isOutOfRange(modifiers)) {
|
|
53
|
+
return css`
|
|
54
|
+
color: ${theme.colors.text.subtext};
|
|
55
|
+
${disabled};
|
|
56
|
+
`;
|
|
57
|
+
}
|
|
58
|
+
}};
|
|
59
|
+
`;
|
|
60
|
+
var ReactDatesCssOverrides = createGlobalStyle`
|
|
61
|
+
.DayPicker {
|
|
62
|
+
box-sizing: content-box;
|
|
63
|
+
font-weight: ${({ theme }) => theme.fontWeights.normal};
|
|
64
|
+
font-family: ${(props) => props.theme.fontFamily};
|
|
65
|
+
|
|
66
|
+
/* override react-dates height to better reflect how tall the component actually is */
|
|
67
|
+
/* adding margin/padding will be more truer to our seeds system because the height */
|
|
68
|
+
/* of the calendar adds an extra row of padding if we do not override it */
|
|
69
|
+
&_transitionContainer {
|
|
70
|
+
/* need !important because react-dates sets height on the element itself */
|
|
71
|
+
height: 228px !important;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&_weekHeader {
|
|
75
|
+
color: ${({ theme }) => theme.colors.text.headline};
|
|
76
|
+
border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
|
|
77
|
+
|
|
78
|
+
/* Magic number to match position of .CalendarMonth_caption */
|
|
79
|
+
top: 26px;
|
|
80
|
+
|
|
81
|
+
/* Magic number to make the bottom border line stretch the full width */
|
|
82
|
+
width: 230px;
|
|
83
|
+
|
|
84
|
+
&_ul {
|
|
85
|
+
/* Magic number to line up day name headings over the correct numbers */
|
|
86
|
+
padding-left: 10px;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&_weekHeaders__horizontal {
|
|
91
|
+
margin-left: 0
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&_weekHeader_li {
|
|
95
|
+
${({ theme }) => theme.typography[200]}
|
|
96
|
+
color: ${({ theme }) => theme.colors.text.subtext};
|
|
97
|
+
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
98
|
+
margin: 0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&__horizontal {
|
|
102
|
+
box-shadow: none;
|
|
103
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.CalendarDay {
|
|
108
|
+
background-color: transparent;
|
|
109
|
+
|
|
110
|
+
&__selected, &__selected_span, &:hover {
|
|
111
|
+
background-color: transparent;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&__default {
|
|
115
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
116
|
+
}
|
|
117
|
+
&__default,
|
|
118
|
+
&__default:hover {
|
|
119
|
+
border: none;
|
|
120
|
+
color: ${({ theme }) => theme.colors.text.body};
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.CalendarMonth {
|
|
125
|
+
${({ theme }) => theme.typography[200]}
|
|
126
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
127
|
+
|
|
128
|
+
/* spacing between visible months and months off canvas */
|
|
129
|
+
padding: 0 15px;
|
|
130
|
+
|
|
131
|
+
&_caption {
|
|
132
|
+
${({ theme }) => theme.typography[200]}
|
|
133
|
+
color: ${({ theme }) => theme.colors.text.headline};
|
|
134
|
+
padding-top: 0;
|
|
135
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
136
|
+
|
|
137
|
+
strong {
|
|
138
|
+
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
}
|
|
142
|
+
&_table {
|
|
143
|
+
line-height: 21.333px;
|
|
144
|
+
tr {
|
|
145
|
+
vertical-align: middle;
|
|
146
|
+
}
|
|
147
|
+
td {
|
|
148
|
+
padding: 0;
|
|
149
|
+
border-bottom: none;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.CalendarMonthGrid {
|
|
155
|
+
background: ${({ theme }) => theme.colors.container.background.base};
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Left and Right Arrow Buttons to navigate months */
|
|
159
|
+
.DayPickerNavigation_button__horizontal {
|
|
160
|
+
color: ${({ theme }) => theme.colors.button.pill.text.base};
|
|
161
|
+
top: -4px;
|
|
162
|
+
padding: 7px 8px;
|
|
163
|
+
position: absolute;
|
|
164
|
+
line-height: 0.78;
|
|
165
|
+
border-radius: 9999px;
|
|
166
|
+
border: none;
|
|
167
|
+
background: ${({ theme }) => theme.colors.button.pill.background.base};
|
|
168
|
+
|
|
169
|
+
&:nth-child(1) {
|
|
170
|
+
left: 22px;
|
|
171
|
+
}
|
|
172
|
+
&:nth-child(2) {
|
|
173
|
+
right: 22px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
&:hover {
|
|
177
|
+
background: ${({ theme }) => theme.colors.button.pill.background.hover};
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
`;
|
|
181
|
+
|
|
182
|
+
// src/common.tsx
|
|
183
|
+
import "react-dates/initialize";
|
|
184
|
+
import "react-dates/lib/css/_datepicker.css";
|
|
185
|
+
import "react";
|
|
186
|
+
import Icon from "@sproutsocial/seeds-react-icon";
|
|
187
|
+
import { jsx } from "react/jsx-runtime";
|
|
188
|
+
var iconNames = {
|
|
189
|
+
left: "arrow-left-solid",
|
|
190
|
+
right: "arrow-right-solid"
|
|
191
|
+
};
|
|
192
|
+
var CalendarNavButton = ({
|
|
193
|
+
type
|
|
194
|
+
}) => /* @__PURE__ */ jsx(Icon, { size: "mini", name: iconNames[type], "aria-hidden": true });
|
|
195
|
+
var commonDatePickerProps = {
|
|
196
|
+
hideKeyboardShortcutsPanel: true,
|
|
197
|
+
daySize: 30,
|
|
198
|
+
navPrev: /* @__PURE__ */ jsx(CalendarNavButton, { type: "left" }),
|
|
199
|
+
navNext: /* @__PURE__ */ jsx(CalendarNavButton, { type: "right" }),
|
|
200
|
+
renderDayContents: (day, modifiers) => /* @__PURE__ */ jsx(CalendarDay, { day, modifiers, children: day.format("D") }),
|
|
201
|
+
initialVisibleMonth: null
|
|
202
|
+
};
|
|
203
|
+
var formatDateAsCalendarHeader = (date) => date.format("MMMM YYYY");
|
|
204
|
+
var getVisibleMonths = (initialMonth, numberOfMonths) => {
|
|
205
|
+
const months = [initialMonth];
|
|
206
|
+
for (let i = 1; i < numberOfMonths; i++) {
|
|
207
|
+
months.push(initialMonth.clone().add(i, "month"));
|
|
208
|
+
}
|
|
209
|
+
return months;
|
|
210
|
+
};
|
|
211
|
+
var DefaultSetStatusText = (dates) => dates.map(formatDateAsCalendarHeader).join(", ");
|
|
212
|
+
|
|
213
|
+
// src/SingleDatePicker/SingleDatePicker.tsx
|
|
214
|
+
import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
|
|
215
|
+
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
216
|
+
var noop = () => {
|
|
217
|
+
};
|
|
218
|
+
var SingleDatePicker = ({
|
|
219
|
+
onDateChange,
|
|
220
|
+
setStatusText = DefaultSetStatusText,
|
|
221
|
+
date = null,
|
|
222
|
+
focused = false,
|
|
223
|
+
onFocusChange = noop,
|
|
224
|
+
initialVisibleMonth,
|
|
225
|
+
numberOfMonths = 1,
|
|
226
|
+
onBlur,
|
|
227
|
+
...rest
|
|
228
|
+
}) => {
|
|
229
|
+
const [statusText, updateStatusText] = useState(
|
|
230
|
+
() => setStatusText(
|
|
231
|
+
getVisibleMonths(
|
|
232
|
+
moment2(initialVisibleMonth?.() || date || void 0),
|
|
233
|
+
numberOfMonths
|
|
234
|
+
)
|
|
235
|
+
)
|
|
236
|
+
);
|
|
237
|
+
const handleMonthClick = useCallback(
|
|
238
|
+
// @ts-ignore unknown types
|
|
239
|
+
(date2) => {
|
|
240
|
+
updateStatusText(setStatusText(getVisibleMonths(date2, numberOfMonths)));
|
|
241
|
+
},
|
|
242
|
+
[numberOfMonths, setStatusText]
|
|
243
|
+
);
|
|
244
|
+
const wrappedOnBlur = useCallback(
|
|
245
|
+
(event) => {
|
|
246
|
+
onFocusChange?.({ focused: false });
|
|
247
|
+
onBlur?.(event);
|
|
248
|
+
},
|
|
249
|
+
[onBlur, onFocusChange]
|
|
250
|
+
);
|
|
251
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
252
|
+
/* @__PURE__ */ jsx2(ReactDatesCssOverrides, {}),
|
|
253
|
+
/* @__PURE__ */ jsx2(VisuallyHidden, { children: /* @__PURE__ */ jsx2("div", { role: "status", children: statusText }) }),
|
|
254
|
+
/* @__PURE__ */ jsx2(
|
|
255
|
+
DayPickerSingleDateController,
|
|
256
|
+
{
|
|
257
|
+
...commonDatePickerProps,
|
|
258
|
+
date,
|
|
259
|
+
numberOfMonths,
|
|
260
|
+
onDateChange,
|
|
261
|
+
initialVisibleMonth: initialVisibleMonth || null,
|
|
262
|
+
focused,
|
|
263
|
+
onBlur: wrappedOnBlur,
|
|
264
|
+
onFocusChange,
|
|
265
|
+
onPrevMonthClick: handleMonthClick,
|
|
266
|
+
onNextMonthClick: handleMonthClick,
|
|
267
|
+
...rest
|
|
268
|
+
}
|
|
269
|
+
)
|
|
270
|
+
] });
|
|
271
|
+
};
|
|
272
|
+
var SingleDatePicker_default = React2.memo(SingleDatePicker);
|
|
273
|
+
|
|
274
|
+
// src/SingleDatePicker/StatefulSingleDatePicker.tsx
|
|
275
|
+
import { useState as useState2 } from "react";
|
|
276
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
277
|
+
var StatefulSingleDatePicker = ({
|
|
278
|
+
date,
|
|
279
|
+
onDateChange,
|
|
280
|
+
...rest
|
|
281
|
+
}) => {
|
|
282
|
+
const [stateDate, setDate] = useState2(date);
|
|
283
|
+
const handleDateChange = (date2) => {
|
|
284
|
+
onDateChange && onDateChange(date2);
|
|
285
|
+
setDate(date2);
|
|
286
|
+
};
|
|
287
|
+
return /* @__PURE__ */ jsx3(
|
|
288
|
+
SingleDatePicker_default,
|
|
289
|
+
{
|
|
290
|
+
date: stateDate,
|
|
291
|
+
onDateChange: handleDateChange,
|
|
292
|
+
...rest
|
|
293
|
+
}
|
|
294
|
+
);
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
// src/DateRangePicker/DateRangePicker.tsx
|
|
298
|
+
import { useCallback as useCallback2, useState as useState3 } from "react";
|
|
299
|
+
import moment3 from "moment";
|
|
300
|
+
import DayPickerRangeController from "react-dates/lib/components/DayPickerRangeController";
|
|
301
|
+
import { VisuallyHidden as VisuallyHidden2 } from "@sproutsocial/seeds-react-visually-hidden";
|
|
302
|
+
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
303
|
+
var DateRangePicker = ({
|
|
304
|
+
startDate = null,
|
|
305
|
+
endDate = null,
|
|
306
|
+
onDatesChange,
|
|
307
|
+
setStatusText = DefaultSetStatusText,
|
|
308
|
+
initialVisibleMonth,
|
|
309
|
+
numberOfMonths = 2,
|
|
310
|
+
onFocusChange,
|
|
311
|
+
onBlur,
|
|
312
|
+
focusedInput,
|
|
313
|
+
...rest
|
|
314
|
+
}) => {
|
|
315
|
+
const [statusText, updateStatusText] = useState3(
|
|
316
|
+
() => setStatusText(
|
|
317
|
+
getVisibleMonths(
|
|
318
|
+
moment3(initialVisibleMonth?.() ?? startDate ?? void 0),
|
|
319
|
+
numberOfMonths
|
|
320
|
+
)
|
|
321
|
+
)
|
|
322
|
+
);
|
|
323
|
+
const handleMonthClick = useCallback2(
|
|
324
|
+
(month) => {
|
|
325
|
+
updateStatusText(setStatusText(getVisibleMonths(month, numberOfMonths)));
|
|
326
|
+
},
|
|
327
|
+
[numberOfMonths, setStatusText]
|
|
328
|
+
);
|
|
329
|
+
const wrappedOnBlur = useCallback2(
|
|
330
|
+
(event) => {
|
|
331
|
+
if (!event) {
|
|
332
|
+
return;
|
|
333
|
+
}
|
|
334
|
+
onFocusChange?.(null);
|
|
335
|
+
onBlur?.(event);
|
|
336
|
+
},
|
|
337
|
+
[onBlur, onFocusChange]
|
|
338
|
+
);
|
|
339
|
+
return /* @__PURE__ */ jsxs2(Fragment2, { children: [
|
|
340
|
+
/* @__PURE__ */ jsx4(ReactDatesCssOverrides, {}),
|
|
341
|
+
/* @__PURE__ */ jsx4(VisuallyHidden2, { children: /* @__PURE__ */ jsx4("div", { role: "status", children: statusText }) }),
|
|
342
|
+
/* @__PURE__ */ jsx4(
|
|
343
|
+
DayPickerRangeController,
|
|
344
|
+
{
|
|
345
|
+
...commonDatePickerProps,
|
|
346
|
+
startDate,
|
|
347
|
+
endDate,
|
|
348
|
+
onDatesChange,
|
|
349
|
+
numberOfMonths,
|
|
350
|
+
initialVisibleMonth: initialVisibleMonth || null,
|
|
351
|
+
focusedInput,
|
|
352
|
+
isFocused: focusedInput !== null,
|
|
353
|
+
onBlur: wrappedOnBlur,
|
|
354
|
+
onFocusChange,
|
|
355
|
+
onPrevMonthClick: handleMonthClick,
|
|
356
|
+
onNextMonthClick: handleMonthClick,
|
|
357
|
+
...rest
|
|
358
|
+
}
|
|
359
|
+
)
|
|
360
|
+
] });
|
|
361
|
+
};
|
|
362
|
+
var DateRangePicker_default = DateRangePicker;
|
|
363
|
+
|
|
364
|
+
// src/DateRangePicker/StatefulDateRangePicker.tsx
|
|
365
|
+
import React5, { useState as useState4 } from "react";
|
|
366
|
+
import { START_DATE } from "react-dates/constants";
|
|
367
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
368
|
+
var StatefulDateRangePicker = ({
|
|
369
|
+
startDate,
|
|
370
|
+
endDate,
|
|
371
|
+
onDatesChange,
|
|
372
|
+
onFocusChange,
|
|
373
|
+
...rest
|
|
374
|
+
}) => {
|
|
375
|
+
const [dates, setDate] = useState4({
|
|
376
|
+
startDate,
|
|
377
|
+
endDate
|
|
378
|
+
});
|
|
379
|
+
const [focusedInput, setFocusedInput] = React5.useState(START_DATE);
|
|
380
|
+
const handleDatesChange = (nextDates) => {
|
|
381
|
+
onDatesChange && onDatesChange(nextDates);
|
|
382
|
+
setDate(nextDates);
|
|
383
|
+
};
|
|
384
|
+
const handleFocusChange = (nextFocusedInput) => {
|
|
385
|
+
onFocusChange && onFocusChange(nextFocusedInput);
|
|
386
|
+
setFocusedInput(
|
|
387
|
+
// null means that we've selected an end date. we want to go back to START_DATE
|
|
388
|
+
// so the user can modify their selection. if focusedInput === null then it won't
|
|
389
|
+
// respond to click or keyboard events
|
|
390
|
+
nextFocusedInput === null ? START_DATE : nextFocusedInput
|
|
391
|
+
);
|
|
392
|
+
};
|
|
393
|
+
return /* @__PURE__ */ jsx5(
|
|
394
|
+
DateRangePicker_default,
|
|
395
|
+
{
|
|
396
|
+
startDate: dates.startDate,
|
|
397
|
+
endDate: dates.endDate,
|
|
398
|
+
focusedInput,
|
|
399
|
+
onDatesChange: handleDatesChange,
|
|
400
|
+
onFocusChange: handleFocusChange,
|
|
401
|
+
...rest
|
|
402
|
+
}
|
|
403
|
+
);
|
|
404
|
+
};
|
|
405
|
+
export {
|
|
406
|
+
DateRangePicker_default as DateRangePicker,
|
|
407
|
+
SingleDatePicker_default as SingleDatePicker,
|
|
408
|
+
StatefulDateRangePicker,
|
|
409
|
+
StatefulSingleDatePicker
|
|
410
|
+
};
|
|
411
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/SingleDatePicker/SingleDatePicker.tsx","../../src/styles.ts","../../src/common.tsx","../../src/SingleDatePicker/StatefulSingleDatePicker.tsx","../../src/DateRangePicker/DateRangePicker.tsx","../../src/DateRangePicker/StatefulDateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport moment from \"moment\";\nimport DayPickerSingleDateController from \"react-dates/lib/components/DayPickerSingleDateController\";\nimport { ReactDatesCssOverrides } from \"../styles\";\nimport {\n commonDatePickerProps,\n DefaultSetStatusText,\n getVisibleMonths,\n} from \"../common\";\nimport type { TypeSingleDatePickerProps } from \"./SingleDatePickerTypes\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\n\nconst noop = () => {};\n\nconst SingleDatePicker = ({\n onDateChange,\n setStatusText = DefaultSetStatusText,\n date = null,\n focused = false,\n onFocusChange = noop,\n initialVisibleMonth,\n numberOfMonths = 1,\n onBlur,\n ...rest\n}: TypeSingleDatePickerProps) => {\n const [statusText, updateStatusText] = useState(() =>\n setStatusText(\n getVisibleMonths(\n moment(initialVisibleMonth?.() || date || undefined),\n numberOfMonths\n )\n )\n );\n\n const handleMonthClick = useCallback(\n // @ts-ignore unknown types\n (date) => {\n updateStatusText(setStatusText(getVisibleMonths(date, numberOfMonths)));\n },\n [numberOfMonths, setStatusText]\n );\n const wrappedOnBlur = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n onFocusChange?.({ focused: false });\n onBlur?.(event);\n },\n [onBlur, onFocusChange]\n );\n\n return (\n <>\n <ReactDatesCssOverrides />\n <VisuallyHidden>\n <div role=\"status\">{statusText}</div>\n </VisuallyHidden>\n <DayPickerSingleDateController\n {...commonDatePickerProps}\n date={date}\n numberOfMonths={numberOfMonths}\n onDateChange={onDateChange}\n initialVisibleMonth={initialVisibleMonth || null}\n focused={focused}\n onBlur={wrappedOnBlur}\n onFocusChange={onFocusChange}\n onPrevMonthClick={handleMonthClick}\n onNextMonthClick={handleMonthClick}\n {...rest}\n />\n </>\n );\n};\n\nexport default React.memo<TypeSingleDatePickerProps>(SingleDatePicker);\n","import styled, { createGlobalStyle, css } from \"styled-components\";\nimport moment from \"moment\";\nimport type { ModifiersShape } from \"react-dates\";\nimport { disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\n/*\n * Partial list of modifiers given to renderDayContents by airbnb/react-dates. There may be more.\n *\n * today, blocked, blocked-calendar, blocked-out-of-range, highlighted-calendar, valid,\n * selected, selected-start, selected-end, blocked-minimum-nights, selected-span, last-in-range,\n * hovered, hovered-span, hovered-offset, after-hovered-start, first-day-of-week, last-day-of-week,\n * hovered-start-first-possible-end, hovered-start-blocked-minimum-nights, before-hovered-end,\n * no-selected-start-before-selected-end, selected-start-in-hovered-span, selected-start-no-selected-end,\n * selected-end-no-selected-start\n *\n */\nconst isSelected = (modifiers: ModifiersShape) =>\n modifiers.has(\"selected-span\") ||\n modifiers.has(\"selected\") ||\n modifiers.has(\"selected-start\") ||\n modifiers.has(\"selected-end\") ||\n modifiers.has(\"hovered-span\") ||\n modifiers.has(\"after-hovered-start\");\n\nconst isOutOfRange = (modifiers: ModifiersShape) =>\n modifiers.has(\"blocked-out-of-range\");\n\nconst isHoveredAndInRange = (modifiers: ModifiersShape) =>\n modifiers.has(\"hovered\") && !modifiers.has(\"blocked-out-of-range\");\n\nconst shouldHaveLeftPill = (modifiers: ModifiersShape, day: moment.Moment) => {\n if (!isSelected(modifiers)) {\n return false;\n }\n\n if (\n modifiers.has(\"selected\") ||\n modifiers.has(\"selected-start\") ||\n modifiers.has(\"first-day-of-week\") ||\n day.isSame(moment(day).startOf(\"month\"), \"day\")\n ) {\n return true;\n }\n\n return false;\n};\n\nconst shouldHaveRightPill = (modifiers: ModifiersShape, day: moment.Moment) => {\n if (!isSelected(modifiers)) {\n return false;\n }\n\n if (\n modifiers.has(\"selected\") ||\n modifiers.has(\"selected-end\") ||\n modifiers.has(\"last-day-of-week\") ||\n day.isSame(moment(day).endOf(\"month\"), \"day\")\n ) {\n return true;\n }\n\n return false;\n};\n\nexport const CalendarDay = styled(Box)<{\n modifiers: ModifiersShape;\n day: moment.Moment;\n}>`\n ${({ modifiers, day, theme }) => {\n if (isSelected(modifiers)) {\n return css`\n background-color: ${theme.colors.container.background.selected};\n color: ${theme.colors.text.inverse};\n margin-left: ${shouldHaveLeftPill(modifiers, day) && theme.space[200]};\n margin-right: ${shouldHaveRightPill(modifiers, day) &&\n theme.space[200]};\n border-top-left-radius: ${shouldHaveLeftPill(modifiers, day) &&\n theme.radii.pill};\n border-bottom-left-radius: ${shouldHaveLeftPill(modifiers, day) &&\n theme.radii.pill};\n border-top-right-radius: ${shouldHaveRightPill(modifiers, day) &&\n theme.radii.pill};\n border-bottom-right-radius: ${shouldHaveRightPill(modifiers, day) &&\n theme.radii.pill};\n `;\n }\n\n if (isHoveredAndInRange(modifiers)) {\n return css`\n margin: 0 ${theme.space[200]};\n border-radius: ${theme.radii.pill};\n border: 1px solid ${theme.colors.container.border.selected};\n `;\n } else if (isOutOfRange(modifiers)) {\n return css`\n color: ${theme.colors.text.subtext};\n ${disabled};\n `;\n }\n }};\n`;\n\nexport const ReactDatesCssOverrides = createGlobalStyle`\n\t.DayPicker {\n\t\tbox-sizing: content-box;\n\t\tfont-weight: ${({ theme }) => theme.fontWeights.normal};\n\t\tfont-family: ${(props) => props.theme.fontFamily};\n\n\t\t/* override react-dates height to better reflect how tall the component actually is */\n\t\t/* adding margin/padding will be more truer to our seeds system because the height */\n\t\t/* of the calendar adds an extra row of padding if we do not override it */\n\t\t&_transitionContainer {\n\t\t\t/* need !important because react-dates sets height on the element itself */\n\t\t\theight: 228px !important;\n\t\t}\n\n\t\t&_weekHeader {\n\t\t\tcolor: ${({ theme }) => theme.colors.text.headline};\n\t\t\tborder-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};\n\n \t\t\t/* Magic number to match position of .CalendarMonth_caption */\n\t\t\ttop: 26px;\n\n\t\t\t/* Magic number to make the bottom border line stretch the full width */\n\t\t\twidth: 230px;\n\n\t\t\t&_ul {\n \t\t\t\t/* Magic number to line up day name headings over the correct numbers */\n\t\t\t\tpadding-left: 10px;\n\t\t\t}\n\t\t}\n\n\t\t&_weekHeaders__horizontal {\n\t\t\tmargin-left: 0\n\t\t}\n\n\t\t&_weekHeader_li {\n\t\t\t${({ theme }) => theme.typography[200]}\n\t\t\tcolor: ${({ theme }) => theme.colors.text.subtext};\n\t\t\tfont-weight: ${({ theme }) => theme.fontWeights.semibold};\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&__horizontal {\n\t\t\tbox-shadow: none;\n\t\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\t\t}\n\t}\n\n .CalendarDay {\n\t\tbackground-color: transparent;\n\n &__selected, &__selected_span, &:hover {\n background-color: transparent;\n\t\t}\n\n\t\t&__default {\n\t\t\tcolor: ${({ theme }) => theme.colors.text.body};\n\t\t}\n\t\t&__default,\n\t\t&__default:hover {\n\t\t\tborder: none;\n\t\t\tcolor: ${({ theme }) => theme.colors.text.body};\n\t\t}\n\t}\n\n .CalendarMonth {\n\t\t${({ theme }) => theme.typography[200]}\n\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\n \t\t/* spacing between visible months and months off canvas */\n\t\tpadding: 0 15px;\n\n\t\t&_caption {\n\t\t\t${({ theme }) => theme.typography[200]}\n\t\t\tcolor: ${({ theme }) => theme.colors.text.headline};\n\t\t\tpadding-top: 0;\n\t\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\n\t\t\tstrong {\n\t\t\t\tfont-weight: ${({ theme }) => theme.fontWeights.semibold};\n\t\t\t}\n\n\t\t}\n\t\t&_table {\n\t\t\tline-height: 21.333px;\n\t\t\ttr {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t\ttd {\n\t\t\t\tpadding: 0;\n\t\t\t\tborder-bottom: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.CalendarMonthGrid {\n\t\tbackground: ${({ theme }) => theme.colors.container.background.base};\n\t}\n\n\t/* Left and Right Arrow Buttons to navigate months */\n\t.DayPickerNavigation_button__horizontal {\n\t\tcolor: ${({ theme }) => theme.colors.button.pill.text.base};\n\t\ttop: -4px;\n\t\tpadding: 7px 8px;\n\t\tposition: absolute;\n\t\tline-height: 0.78;\n\t\tborder-radius: 9999px;\n\t\tborder: none;\n\t\tbackground: ${({ theme }) => theme.colors.button.pill.background.base};\n\n\t\t&:nth-child(1) {\n\t\t\tleft: 22px;\n\t\t}\n\t\t&:nth-child(2) {\n\t\t\tright: 22px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground: ${({ theme }) => theme.colors.button.pill.background.hover};\n\t\t}\n\t}\n`;\n","import \"react-dates/initialize\";\nimport \"react-dates/lib/css/_datepicker.css\";\nimport type { Moment } from \"moment\";\nimport React from \"react\";\nimport Icon, { type TypeIconName } from \"@sproutsocial/seeds-react-icon\";\nimport { CalendarDay } from \"./styles\";\nimport type { TypeCommonDatePickerProps } from \"./types\";\n\ntype TypeCalendarNavButtonType = \"left\" | \"right\";\n\nconst iconNames: { [key in TypeCalendarNavButtonType]: TypeIconName } = {\n left: \"arrow-left-solid\",\n right: \"arrow-right-solid\",\n};\n\nexport const CalendarNavButton = ({\n type,\n}: {\n type: TypeCalendarNavButtonType;\n}) => <Icon size=\"mini\" name={iconNames[type]} aria-hidden />;\n\nexport const commonDatePickerProps: TypeCommonDatePickerProps = {\n hideKeyboardShortcutsPanel: true,\n daySize: 30,\n navPrev: <CalendarNavButton type=\"left\" />,\n navNext: <CalendarNavButton type=\"right\" />,\n renderDayContents: (day, modifiers) => (\n <CalendarDay day={day} modifiers={modifiers}>\n {day.format(\"D\")}\n </CalendarDay>\n ),\n initialVisibleMonth: null,\n};\n// Testing utilities\n\nexport const formatDateAsCalendarHeader = (date: Moment): string =>\n date.format(\"MMMM YYYY\");\n\nexport const formatDateAsCalendarDay = (date: Moment): string =>\n date.format(\"dddd, MMMM D, YYYY\");\n\nexport const getVisibleMonthWithReactDatesInternalApi = (\n container: HTMLElement\n): string =>\n container.querySelector(\"[data-visible=true] strong\")?.textContent ?? \"\";\n\n// Receives a single Moment and returns an array of Moments, one for each currently visible month.\n// @ts-ignore unknown types\nexport const getVisibleMonths = (initialMonth, numberOfMonths) => {\n const months = [initialMonth];\n for (let i = 1; i < numberOfMonths; i++) {\n months.push(initialMonth.clone().add(i, \"month\"));\n }\n return months;\n};\n\n// Default setStatusText prop for both SingleDatePicker and DateRangePicker\n// @ts-ignore unknown types\nexport const DefaultSetStatusText = (dates) =>\n dates.map(formatDateAsCalendarHeader).join(\", \");\n","import React, { useState } from \"react\";\nimport type { TypeStatefulSingleDatePickerProps } from \"./SingleDatePickerTypes\";\nimport SingleDatePicker from \"./SingleDatePicker\";\n\nexport const StatefulSingleDatePicker = ({\n date,\n onDateChange,\n ...rest\n}: TypeStatefulSingleDatePickerProps) => {\n const [stateDate, setDate] = useState(date);\n\n // @ts-ignore unknown types\n const handleDateChange = (date) => {\n onDateChange && onDateChange(date);\n setDate(date);\n };\n\n return (\n <SingleDatePicker\n date={stateDate}\n onDateChange={handleDateChange}\n {...rest}\n />\n );\n};\n","import React, { useCallback, useState, type KeyboardEvent } from \"react\";\nimport moment from \"moment\";\nimport DayPickerRangeController from \"react-dates/lib/components/DayPickerRangeController\";\nimport { ReactDatesCssOverrides } from \"../styles\";\nimport {\n commonDatePickerProps,\n DefaultSetStatusText,\n getVisibleMonths,\n} from \"../common\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\nimport type { TypeDateRangePickerProps } from \"./DateRangePickerTypes\";\n\nconst DateRangePicker = ({\n startDate = null,\n endDate = null,\n onDatesChange,\n setStatusText = DefaultSetStatusText,\n initialVisibleMonth,\n numberOfMonths = 2,\n onFocusChange,\n onBlur,\n focusedInput,\n ...rest\n}: TypeDateRangePickerProps) => {\n const [statusText, updateStatusText] = useState(() =>\n setStatusText(\n getVisibleMonths(\n moment(initialVisibleMonth?.() ?? startDate ?? undefined),\n numberOfMonths\n )\n )\n );\n interface HandleMonthClick {\n (month: moment.Moment): void;\n }\n\n const handleMonthClick: HandleMonthClick = useCallback(\n (month) => {\n updateStatusText(setStatusText(getVisibleMonths(month, numberOfMonths)));\n },\n [numberOfMonths, setStatusText]\n );\n const wrappedOnBlur = useCallback<\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n (event: undefined | KeyboardEvent<HTMLDivElement>) => void\n >(\n (event) => {\n // for some reason onBlur is called with no event on day selection 🤷\n if (!event) {\n return;\n }\n onFocusChange?.(null);\n onBlur?.(event);\n },\n [onBlur, onFocusChange]\n );\n\n return (\n <>\n <ReactDatesCssOverrides />\n <VisuallyHidden>\n <div role=\"status\">{statusText}</div>\n </VisuallyHidden>\n <DayPickerRangeController\n {...commonDatePickerProps}\n startDate={startDate}\n endDate={endDate}\n onDatesChange={onDatesChange}\n numberOfMonths={numberOfMonths}\n initialVisibleMonth={initialVisibleMonth || null}\n focusedInput={focusedInput}\n isFocused={focusedInput !== null}\n onBlur={wrappedOnBlur}\n onFocusChange={onFocusChange}\n onPrevMonthClick={handleMonthClick}\n onNextMonthClick={handleMonthClick}\n {...rest}\n />\n </>\n );\n};\n\nexport default DateRangePicker;\n","import React, { useState } from \"react\";\n// @ts-ignore unknown types\nimport { START_DATE } from \"react-dates/constants\";\nimport type { TypeStatefulDateRangePickerProps } from \"./DateRangePickerTypes\";\nimport DateRangePicker from \"./DateRangePicker\";\n\nexport const StatefulDateRangePicker = ({\n startDate,\n endDate,\n onDatesChange,\n onFocusChange,\n ...rest\n}: TypeStatefulDateRangePickerProps) => {\n const [dates, setDate] = useState({\n startDate,\n endDate,\n });\n const [focusedInput, setFocusedInput] = React.useState(START_DATE);\n\n // @ts-ignore unknown types\n const handleDatesChange = (nextDates) => {\n onDatesChange && onDatesChange(nextDates);\n setDate(nextDates);\n };\n\n // @ts-ignore unknown types\n const handleFocusChange = (nextFocusedInput) => {\n onFocusChange && onFocusChange(nextFocusedInput);\n setFocusedInput(\n // null means that we've selected an end date. we want to go back to START_DATE\n // so the user can modify their selection. if focusedInput === null then it won't\n // respond to click or keyboard events\n nextFocusedInput === null ? START_DATE : nextFocusedInput\n );\n };\n\n return (\n <DateRangePicker\n startDate={dates.startDate}\n endDate={dates.endDate}\n focusedInput={focusedInput}\n onDatesChange={handleDatesChange}\n onFocusChange={handleFocusChange}\n {...rest}\n />\n );\n};\n"],"mappings":"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","names":["React","moment","jsx","moment","date","React","useState","jsx","useState","date","useCallback","useState","moment","VisuallyHidden","Fragment","jsx","jsxs","useState","moment","useCallback","React","useState","jsx","useState","React"]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { Moment } from 'moment';
|
|
4
|
+
import { ModifiersShape } from 'react-dates';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
interface TypeCommonDatePickerProps {
|
|
8
|
+
daySize?: number;
|
|
9
|
+
isOutsideRange?: (date: Moment) => boolean;
|
|
10
|
+
hideKeyboardShortcutsPanel?: boolean;
|
|
11
|
+
navPrev?: React$1.ReactNode;
|
|
12
|
+
navNext?: React$1.ReactNode;
|
|
13
|
+
numberOfMonths?: number;
|
|
14
|
+
renderDayContents?: (day: Moment, modifiers: ModifiersShape) => React$1.ReactNode;
|
|
15
|
+
keepOpenOnDateSelect?: boolean;
|
|
16
|
+
initialVisibleMonth?: (() => Moment) | null;
|
|
17
|
+
minimumNights?: number;
|
|
18
|
+
phrases?: Record<string, Node | ((arg0: {
|
|
19
|
+
date: Moment;
|
|
20
|
+
}) => React$1.ReactNode)>;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
interface TypeStatefulSingleDatePickerProps extends TypeCommonDatePickerProps {
|
|
24
|
+
date?: Moment | null;
|
|
25
|
+
onDateChange?: (date: Moment | null) => void;
|
|
26
|
+
focused?: boolean;
|
|
27
|
+
onFocusChange?: (arg0: {
|
|
28
|
+
focused: boolean;
|
|
29
|
+
}) => void;
|
|
30
|
+
setStatusText?: (dates: Moment[]) => string;
|
|
31
|
+
}
|
|
32
|
+
interface TypeSingleDatePickerProps extends Required<Pick<TypeStatefulSingleDatePickerProps, "onDateChange">>, Pick<TypeStatefulSingleDatePickerProps, "date" | "focused" | "onFocusChange" | "setStatusText" | "initialVisibleMonth" | "numberOfMonths"> {
|
|
33
|
+
onBlur?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare const _default: React__default.NamedExoticComponent<TypeSingleDatePickerProps>;
|
|
37
|
+
|
|
38
|
+
declare const StatefulSingleDatePicker: ({ date, onDateChange, ...rest }: TypeStatefulSingleDatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
39
|
+
|
|
40
|
+
type EnumFocusedInput = null | "startDate" | "endDate";
|
|
41
|
+
interface TypeStatefulDateRangePickerProps extends TypeCommonDatePickerProps {
|
|
42
|
+
startDate?: Moment | null;
|
|
43
|
+
endDate?: Moment | null;
|
|
44
|
+
focusedInput?: EnumFocusedInput;
|
|
45
|
+
onDatesChange?: (arg0: {
|
|
46
|
+
startDate: Moment | null;
|
|
47
|
+
endDate: Moment | null;
|
|
48
|
+
}) => void;
|
|
49
|
+
onFocusChange?: (arg0: EnumFocusedInput) => void;
|
|
50
|
+
setStatusText?: (dates: Moment[]) => string;
|
|
51
|
+
}
|
|
52
|
+
interface TypeDateRangePickerProps extends Required<Pick<TypeStatefulDateRangePickerProps, "focusedInput" | "onDatesChange" | "onFocusChange">>, Pick<TypeStatefulDateRangePickerProps, "startDate" | "endDate" | "setStatusText" | "initialVisibleMonth" | "numberOfMonths"> {
|
|
53
|
+
onBlur?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
declare const DateRangePicker: ({ startDate, endDate, onDatesChange, setStatusText, initialVisibleMonth, numberOfMonths, onFocusChange, onBlur, focusedInput, ...rest }: TypeDateRangePickerProps) => react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
declare const StatefulDateRangePicker: ({ startDate, endDate, onDatesChange, onFocusChange, ...rest }: TypeStatefulDateRangePickerProps) => react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
export { DateRangePicker, type EnumFocusedInput, _default as SingleDatePicker, StatefulDateRangePicker, StatefulSingleDatePicker, type TypeDateRangePickerProps, type TypeSingleDatePickerProps, type TypeStatefulDateRangePickerProps, type TypeStatefulSingleDatePickerProps };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { Moment } from 'moment';
|
|
4
|
+
import { ModifiersShape } from 'react-dates';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
interface TypeCommonDatePickerProps {
|
|
8
|
+
daySize?: number;
|
|
9
|
+
isOutsideRange?: (date: Moment) => boolean;
|
|
10
|
+
hideKeyboardShortcutsPanel?: boolean;
|
|
11
|
+
navPrev?: React$1.ReactNode;
|
|
12
|
+
navNext?: React$1.ReactNode;
|
|
13
|
+
numberOfMonths?: number;
|
|
14
|
+
renderDayContents?: (day: Moment, modifiers: ModifiersShape) => React$1.ReactNode;
|
|
15
|
+
keepOpenOnDateSelect?: boolean;
|
|
16
|
+
initialVisibleMonth?: (() => Moment) | null;
|
|
17
|
+
minimumNights?: number;
|
|
18
|
+
phrases?: Record<string, Node | ((arg0: {
|
|
19
|
+
date: Moment;
|
|
20
|
+
}) => React$1.ReactNode)>;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
interface TypeStatefulSingleDatePickerProps extends TypeCommonDatePickerProps {
|
|
24
|
+
date?: Moment | null;
|
|
25
|
+
onDateChange?: (date: Moment | null) => void;
|
|
26
|
+
focused?: boolean;
|
|
27
|
+
onFocusChange?: (arg0: {
|
|
28
|
+
focused: boolean;
|
|
29
|
+
}) => void;
|
|
30
|
+
setStatusText?: (dates: Moment[]) => string;
|
|
31
|
+
}
|
|
32
|
+
interface TypeSingleDatePickerProps extends Required<Pick<TypeStatefulSingleDatePickerProps, "onDateChange">>, Pick<TypeStatefulSingleDatePickerProps, "date" | "focused" | "onFocusChange" | "setStatusText" | "initialVisibleMonth" | "numberOfMonths"> {
|
|
33
|
+
onBlur?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare const _default: React__default.NamedExoticComponent<TypeSingleDatePickerProps>;
|
|
37
|
+
|
|
38
|
+
declare const StatefulSingleDatePicker: ({ date, onDateChange, ...rest }: TypeStatefulSingleDatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
39
|
+
|
|
40
|
+
type EnumFocusedInput = null | "startDate" | "endDate";
|
|
41
|
+
interface TypeStatefulDateRangePickerProps extends TypeCommonDatePickerProps {
|
|
42
|
+
startDate?: Moment | null;
|
|
43
|
+
endDate?: Moment | null;
|
|
44
|
+
focusedInput?: EnumFocusedInput;
|
|
45
|
+
onDatesChange?: (arg0: {
|
|
46
|
+
startDate: Moment | null;
|
|
47
|
+
endDate: Moment | null;
|
|
48
|
+
}) => void;
|
|
49
|
+
onFocusChange?: (arg0: EnumFocusedInput) => void;
|
|
50
|
+
setStatusText?: (dates: Moment[]) => string;
|
|
51
|
+
}
|
|
52
|
+
interface TypeDateRangePickerProps extends Required<Pick<TypeStatefulDateRangePickerProps, "focusedInput" | "onDatesChange" | "onFocusChange">>, Pick<TypeStatefulDateRangePickerProps, "startDate" | "endDate" | "setStatusText" | "initialVisibleMonth" | "numberOfMonths"> {
|
|
53
|
+
onBlur?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
declare const DateRangePicker: ({ startDate, endDate, onDatesChange, setStatusText, initialVisibleMonth, numberOfMonths, onFocusChange, onBlur, focusedInput, ...rest }: TypeDateRangePickerProps) => react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
declare const StatefulDateRangePicker: ({ startDate, endDate, onDatesChange, onFocusChange, ...rest }: TypeStatefulDateRangePickerProps) => react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
export { DateRangePicker, type EnumFocusedInput, _default as SingleDatePicker, StatefulDateRangePicker, StatefulSingleDatePicker, type TypeDateRangePickerProps, type TypeSingleDatePickerProps, type TypeStatefulDateRangePickerProps, type TypeStatefulSingleDatePickerProps };
|