@drivy/cobalt 0.36.0 → 0.37.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/cjs/tokens/theme.js +8 -2
- package/cjs/tokens/theme.js.map +1 -1
- package/components/Calendar/CalendarRangePicker/CalendarRangePicker.js +29 -11
- package/components/Calendar/CalendarRangePicker/CalendarRangePicker.js.map +1 -1
- package/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.js +21 -17
- package/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.js.map +1 -1
- package/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.js +155 -39
- package/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.js.map +1 -1
- package/components/Calendar/CalendarRangePicker/DayTooltip.js +23 -0
- package/components/Calendar/CalendarRangePicker/DayTooltip.js.map +1 -0
- package/components/Calendar/utils.js +6 -4
- package/components/Calendar/utils.js.map +1 -1
- package/package.json +2 -2
- package/styles/components/Calendar/CalendarRangePicker/index.scss +156 -186
- package/styles/core/_colors-map.scss +8 -2
- package/styles/core/default-theme.scss +6 -0
- package/styles/core/theme.scss +12 -0
- package/tokens/theme.js +8 -2
- package/tokens/theme.js.map +1 -1
- package/types/components/Calendar/CalendarRangePicker/CalendarRangePicker.d.ts +22 -5
- package/types/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.d.ts +8 -8
- package/types/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.d.ts +9 -4
- package/types/components/Calendar/CalendarRangePicker/DayTooltip.d.ts +21 -0
- package/types/components/Calendar/utils.d.ts +2 -2
- package/types/tokens/index.d.ts +6 -0
- package/utilities.css +30 -0
package/cjs/tokens/theme.js
CHANGED
|
@@ -76,7 +76,11 @@ const text = {
|
|
|
76
76
|
connectAlt: "turquoise/turquoise.900/turquoise.50",
|
|
77
77
|
driver: "graphite/navy.700/navy.700",
|
|
78
78
|
owner: "white/white/grey.100",
|
|
79
|
-
inversed: "white/white/white"
|
|
79
|
+
inversed: "white/white/white",
|
|
80
|
+
disabled: "navy.200/navy.200/navy.200",
|
|
81
|
+
onAccent: "white/white/white",
|
|
82
|
+
onError: "white/white/white",
|
|
83
|
+
onSuccess: "white/white/white"
|
|
80
84
|
};
|
|
81
85
|
const buttonBackground = {
|
|
82
86
|
selected: "indigo/purple.100/purpleDeep.900",
|
|
@@ -227,7 +231,9 @@ const stroke = {
|
|
|
227
231
|
error: "red/red.500/red.200",
|
|
228
232
|
errorAlt: "red/red.500/red.200",
|
|
229
233
|
success: "green/green.500/green.700",
|
|
230
|
-
successAlt: "green/green.500/green.700"
|
|
234
|
+
successAlt: "green/green.500/green.700",
|
|
235
|
+
onAccent: "white/white/white",
|
|
236
|
+
onError: "white/white/white"
|
|
231
237
|
};
|
|
232
238
|
const fill = {
|
|
233
239
|
base: "graphite/navy.500/grey.100",
|
package/cjs/tokens/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,32 +1,48 @@
|
|
|
1
|
-
import React, { useState, useEffect } from 'react';
|
|
1
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
2
2
|
import { CalendarRangePickerMonth } from './CalendarRangePickerMonth.js';
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import { Hint } from '../../Form/Hint.js';
|
|
5
5
|
import addMonths from 'date-fns/addMonths';
|
|
6
|
+
import startOfDay from 'date-fns/startOfDay';
|
|
6
7
|
|
|
7
|
-
function CalendarRangePicker({
|
|
8
|
+
function CalendarRangePicker({ rangeConstraints, firstMonthDate = new Date(), numberOfMonths = 1, hint, firstAvailableDate = new Date(), lastAvailableDate, isEditingStartDate, isEditingEndDate, startDate, endDate, onChangeDate, onLeaveDate, onSelectDate, isDayDisabledFn, hasDayNotificationFn, isDayInvalidForSelectionFn, isSundayFirstDayOfWeek, locale, }) {
|
|
9
|
+
const isFirstRender = useRef(true);
|
|
8
10
|
firstMonthDate.setHours(0, 0, 0, 0);
|
|
9
11
|
firstAvailableDate.setHours(0, 0, 0, 0);
|
|
10
12
|
const [rangeDates, setRangeDates] = useState({
|
|
11
|
-
startDate: startDate,
|
|
12
|
-
endDate: endDate,
|
|
13
|
+
startDate: startDate ? startOfDay(startDate) : undefined,
|
|
14
|
+
endDate: endDate ? startOfDay(endDate) : undefined,
|
|
13
15
|
});
|
|
14
16
|
useEffect(() => {
|
|
17
|
+
if (isFirstRender.current) {
|
|
18
|
+
isFirstRender.current = false;
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
15
21
|
setRangeDates({
|
|
16
|
-
startDate,
|
|
17
|
-
endDate,
|
|
22
|
+
startDate: startDate ? startOfDay(startDate) : undefined,
|
|
23
|
+
endDate: endDate ? startOfDay(endDate) : undefined,
|
|
18
24
|
});
|
|
19
25
|
}, [startDate, endDate]);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (rangeDates.startDate && !rangeDates.endDate) {
|
|
28
|
+
setRangeDates({ ...rangeDates, endDate: rangeDates.startDate });
|
|
29
|
+
}
|
|
30
|
+
}, [isEditingEndDate]);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (rangeDates.endDate && !rangeDates.startDate) {
|
|
33
|
+
setRangeDates({ ...rangeDates, startDate: rangeDates.endDate });
|
|
34
|
+
}
|
|
35
|
+
}, [isEditingStartDate]);
|
|
20
36
|
const handleSelectDate = (date, isDateOutOfRange) => {
|
|
21
37
|
if (isDateOutOfRange && isEditingEndDate)
|
|
22
38
|
return;
|
|
23
39
|
onSelectDate && onSelectDate(date, !!isDateOutOfRange);
|
|
24
40
|
};
|
|
25
|
-
const handleChangeDate = (date,
|
|
41
|
+
const handleChangeDate = (date, status) => {
|
|
26
42
|
const processChange = onChangeDate && (isEditingStartDate || isEditingEndDate)
|
|
27
|
-
? onChangeDate(date,
|
|
43
|
+
? onChangeDate(date, status) !== false
|
|
28
44
|
: true;
|
|
29
|
-
if (!processChange ||
|
|
45
|
+
if (!processChange || status.isDisabled)
|
|
30
46
|
return;
|
|
31
47
|
if (isEditingStartDate) {
|
|
32
48
|
setRangeDates((prev) => ({ ...prev, startDate: date }));
|
|
@@ -39,8 +55,10 @@ function CalendarRangePicker({ rangeLimit, firstMonthDate = new Date(), numberOf
|
|
|
39
55
|
for (let i = 0; i < numberOfMonths - 1; i++) {
|
|
40
56
|
months.push(addMonths(months[months.length - 1], 1));
|
|
41
57
|
}
|
|
42
|
-
return (React.createElement("div", { className: "cobalt-CalendarRangePicker"
|
|
43
|
-
|
|
58
|
+
return (React.createElement("div", { className: cx("cobalt-CalendarRangePicker", {
|
|
59
|
+
"cobalt-CalendarRangePicker--isEditing": isEditingStartDate || isEditingEndDate,
|
|
60
|
+
}) },
|
|
61
|
+
React.createElement("div", { className: "cobalt-CalendarRangePicker__months-container" }, months.map((monthDate) => (React.createElement(CalendarRangePickerMonth, { key: monthDate.getTime(), date: monthDate, startDate: rangeDates.startDate, endDate: rangeDates.endDate, onSelectDate: handleSelectDate, onChangeDate: handleChangeDate, onLeaveDate: onLeaveDate, isEditingStartDate: isEditingStartDate, isEditingEndDate: isEditingEndDate, rangeConstraints: rangeConstraints, firstAvailableDate: firstAvailableDate, lastAvailableDate: lastAvailableDate, isDayDisabledFn: isDayDisabledFn, hasDayNotificationFn: hasDayNotificationFn, isDayInvalidForSelectionFn: isDayInvalidForSelectionFn, isSundayFirstDayOfWeek: isSundayFirstDayOfWeek, locale: locale })))),
|
|
44
62
|
React.createElement("div", { className: cx("cobalt-CalendarRangePicker__message", {
|
|
45
63
|
"cobalt-CalendarRangePicker__message--show": !!hint,
|
|
46
64
|
}) }, hint && React.createElement(Hint, { status: hint.status }, hint.html))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarRangePicker.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePicker.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\"\nimport { CalendarRangePickerMonth } from \"./CalendarRangePickerMonth\"\nimport classNames from \"classnames\"\nimport { Hint } from \"../../Form/Hint\"\nimport addMonths from \"date-fns/addMonths\"\nimport { FormElementStatus } from \"../../Form/form\"\n\
|
|
1
|
+
{"version":3,"file":"CalendarRangePicker.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport { CalendarRangePickerMonth } from \"./CalendarRangePickerMonth\"\nimport classNames from \"classnames\"\nimport { Hint } from \"../../Form/Hint\"\nimport addMonths from \"date-fns/addMonths\"\nimport { FormElementStatus } from \"../../Form/form\"\nimport startOfDay from \"date-fns/startOfDay\"\nimport cx from \"classnames\"\n\nexport interface RangeConstraintInterface {\n value: number\n message: string\n}\n\nexport interface RangeConstraintsInterface {\n min?: RangeConstraintInterface\n max?: RangeConstraintInterface\n}\n\nexport interface DayStatusInterface {\n isRangeExceeded?: boolean\n isRangeTooShort?: boolean\n isCustomInvalid?: boolean\n isDisabled?: boolean\n}\n\nexport type CalendarRangePickerPropsType = {\n numberOfMonths?: number\n firstMonthDate?: Date\n rangeConstraints?: RangeConstraintsInterface\n firstAvailableDate?: Date\n lastAvailableDate?: Date\n isEditingStartDate: boolean\n isEditingEndDate: boolean\n startDate: Date | undefined\n endDate: Date | undefined\n isDayDisabledFn?: (day: Date) => boolean\n hasDayNotificationFn?: (day: Date) => boolean\n isDayInvalidForSelectionFn?: (day: Date) => boolean\n isSundayFirstDayOfWeek?: boolean\n hint?: {\n status?: FormElementStatus\n html: string\n }\n onChangeDate?: (date: Date, status: DayStatusInterface) => boolean\n onLeaveDate?: (date: Date) => void\n onSelectDate?: (date: Date, isOutOfRange: boolean) => void\n locale?: Record<string, unknown>\n}\n\nexport function CalendarRangePicker({\n rangeConstraints,\n firstMonthDate = new Date(),\n numberOfMonths = 1,\n hint,\n firstAvailableDate = new Date(),\n lastAvailableDate,\n isEditingStartDate,\n isEditingEndDate,\n startDate,\n endDate,\n onChangeDate,\n onLeaveDate,\n onSelectDate,\n isDayDisabledFn,\n hasDayNotificationFn,\n isDayInvalidForSelectionFn,\n isSundayFirstDayOfWeek,\n locale,\n}: CalendarRangePickerPropsType) {\n const isFirstRender = useRef(true)\n\n firstMonthDate.setHours(0, 0, 0, 0)\n firstAvailableDate.setHours(0, 0, 0, 0)\n\n const [rangeDates, setRangeDates] = useState({\n startDate: startDate ? startOfDay(startDate) : undefined,\n endDate: endDate ? startOfDay(endDate) : undefined,\n })\n\n useEffect(() => {\n if (isFirstRender.current) {\n isFirstRender.current = false\n return\n }\n setRangeDates({\n startDate: startDate ? startOfDay(startDate) : undefined,\n endDate: endDate ? startOfDay(endDate) : undefined,\n })\n }, [startDate, endDate])\n\n useEffect(() => {\n if (rangeDates.startDate && !rangeDates.endDate) {\n setRangeDates({ ...rangeDates, endDate: rangeDates.startDate })\n }\n }, [isEditingEndDate])\n\n useEffect(() => {\n if (rangeDates.endDate && !rangeDates.startDate) {\n setRangeDates({ ...rangeDates, startDate: rangeDates.endDate })\n }\n }, [isEditingStartDate])\n\n const handleSelectDate = (date: Date, isDateOutOfRange?: boolean) => {\n if (isDateOutOfRange && isEditingEndDate) return\n\n onSelectDate && onSelectDate(date, !!isDateOutOfRange)\n }\n\n const handleChangeDate = (date: Date, status: DayStatusInterface) => {\n const processChange =\n onChangeDate && (isEditingStartDate || isEditingEndDate)\n ? onChangeDate(date, status) !== false\n : true\n\n if (!processChange || status.isDisabled) return\n\n if (isEditingStartDate) {\n setRangeDates((prev) => ({ ...prev, startDate: date }))\n } else if (isEditingEndDate) {\n setRangeDates((prev) => ({ ...prev, endDate: date }))\n }\n }\n\n const months = [firstMonthDate]\n for (let i = 0; i < numberOfMonths - 1; i++) {\n months.push(addMonths(months[months.length - 1], 1))\n }\n\n return (\n <div\n className={cx(\"cobalt-CalendarRangePicker\", {\n \"cobalt-CalendarRangePicker--isEditing\":\n isEditingStartDate || isEditingEndDate,\n })}\n >\n <div className=\"cobalt-CalendarRangePicker__months-container\">\n {months.map((monthDate) => (\n <CalendarRangePickerMonth\n key={monthDate.getTime()}\n date={monthDate}\n startDate={rangeDates.startDate}\n endDate={rangeDates.endDate}\n onSelectDate={handleSelectDate}\n onChangeDate={handleChangeDate}\n onLeaveDate={onLeaveDate}\n isEditingStartDate={isEditingStartDate}\n isEditingEndDate={isEditingEndDate}\n rangeConstraints={rangeConstraints}\n firstAvailableDate={firstAvailableDate}\n lastAvailableDate={lastAvailableDate}\n isDayDisabledFn={isDayDisabledFn}\n hasDayNotificationFn={hasDayNotificationFn}\n isDayInvalidForSelectionFn={isDayInvalidForSelectionFn}\n isSundayFirstDayOfWeek={isSundayFirstDayOfWeek}\n locale={locale}\n />\n ))}\n </div>\n\n <div\n className={classNames(\"cobalt-CalendarRangePicker__message\", {\n \"cobalt-CalendarRangePicker__message--show\": !!hint,\n })}\n >\n {hint && <Hint status={hint.status}>{hint.html}</Hint>}\n </div>\n </div>\n )\n}\n"],"names":["classNames"],"mappings":"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"}
|
|
@@ -1,38 +1,42 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cx from 'classnames';
|
|
3
3
|
import { format } from 'date-fns';
|
|
4
|
+
import DayTooltip from './DayTooltip.js';
|
|
4
5
|
|
|
5
|
-
function CalendarRangePickerDay({ date, isToday,
|
|
6
|
+
function CalendarRangePickerDay({ date, isToday, isStartDay, isEndDay, isSelected, isDisabled, isInvalid, isRange, isActive, hasNotification, tooltipMessage, onSelect, onMouseEnter, onMouseLeave, }) {
|
|
6
7
|
const handleSelectDate = () => {
|
|
7
|
-
!
|
|
8
|
+
!isDisabled && !isInvalid && onSelect(new Date(date));
|
|
8
9
|
};
|
|
9
|
-
|
|
10
|
+
const jsx = (React.createElement("div", { className: cx("cobalt-CalendarRangePicker__day", {
|
|
10
11
|
"cobalt-CalendarRangePicker__day--today": isToday,
|
|
11
|
-
"cobalt-CalendarRangePicker__day--firstOfMonth": isFirstDayOfMonth,
|
|
12
|
-
"cobalt-CalendarRangePicker__day--lastOfMonth": isLastDayOfMonth,
|
|
13
12
|
"cobalt-CalendarRangePicker__day--startDay": isStartDay,
|
|
14
13
|
"cobalt-CalendarRangePicker__day--endDay": isEndDay,
|
|
15
14
|
"cobalt-CalendarRangePicker__day--range": isRange,
|
|
16
|
-
"cobalt-CalendarRangePicker__day--selected":
|
|
17
|
-
"cobalt-CalendarRangePicker__day--
|
|
18
|
-
"cobalt-CalendarRangePicker__day--invalid":
|
|
19
|
-
"cobalt-CalendarRangePicker__day--disabled":
|
|
15
|
+
"cobalt-CalendarRangePicker__day--selected": isSelected,
|
|
16
|
+
"cobalt-CalendarRangePicker__day--active": isActive,
|
|
17
|
+
"cobalt-CalendarRangePicker__day--invalid": isInvalid,
|
|
18
|
+
"cobalt-CalendarRangePicker__day--disabled": isDisabled,
|
|
20
19
|
}), onMouseEnter: () => {
|
|
21
|
-
onMouseEnter(date, !!
|
|
20
|
+
onMouseEnter(date, !!isDisabled);
|
|
22
21
|
}, onMouseLeave: () => {
|
|
23
22
|
onMouseLeave && onMouseLeave(date);
|
|
24
23
|
}, onClick: handleSelectDate, "data-day": format(date, "yyyy-MM-dd") },
|
|
25
|
-
|
|
24
|
+
date.getDate(),
|
|
25
|
+
hasNotification && (React.createElement("div", { className: "cobalt-CalendarRangePicker__day-notification-container" },
|
|
26
|
+
React.createElement("div", { className: "cobalt-CalendarRangePicker__day-notification" })))));
|
|
27
|
+
return tooltipMessage ? (React.createElement(DayTooltip, { visible: true, content: React.createElement("div", { className: "c-text-body-sm" }, tooltipMessage), placement: isStartDay ? "top" : "bottom" }, jsx)) : (jsx);
|
|
26
28
|
}
|
|
27
29
|
function areEqual(prevProps, nextProps) {
|
|
28
|
-
return (prevProps.
|
|
29
|
-
prevProps.
|
|
30
|
-
prevProps.selected === nextProps.selected &&
|
|
31
|
-
prevProps.subdued === nextProps.subdued &&
|
|
30
|
+
return (prevProps.isSelected === nextProps.isSelected &&
|
|
31
|
+
prevProps.isActive === nextProps.isActive &&
|
|
32
32
|
prevProps.isStartDay === nextProps.isStartDay &&
|
|
33
33
|
prevProps.isEndDay === nextProps.isEndDay &&
|
|
34
|
-
prevProps.
|
|
35
|
-
prevProps.isRange === nextProps.isRange
|
|
34
|
+
prevProps.isInvalid === nextProps.isInvalid &&
|
|
35
|
+
prevProps.isRange === nextProps.isRange &&
|
|
36
|
+
prevProps.hasNotification === nextProps.hasNotification &&
|
|
37
|
+
prevProps.isDisabled === nextProps.isDisabled &&
|
|
38
|
+
prevProps.isEditingStartDate === nextProps.isEditingStartDate &&
|
|
39
|
+
prevProps.isEditingEndDate === nextProps.isEditingEndDate);
|
|
36
40
|
}
|
|
37
41
|
const MemoizedComponent = React.memo(CalendarRangePickerDay, areEqual);
|
|
38
42
|
MemoizedComponent.displayName = "CalendarRangePickerDay";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarRangePickerDay.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { format } from \"date-fns\"\n\ntype
|
|
1
|
+
{"version":3,"file":"CalendarRangePickerDay.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerDay.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\nimport { format } from \"date-fns\"\nimport DayTooltip from \"./DayTooltip\"\n\ntype CalendarRangePickerDayPropsType = {\n date: Date\n isEditingStartDate: boolean\n isEditingEndDate: boolean\n isToday?: boolean\n isStartDay?: boolean\n isEndDay?: boolean\n isSelected?: boolean\n isInvalid?: boolean\n isDisabled?: boolean\n isRange?: boolean\n isActive?: boolean\n hasNotification?: boolean\n tooltipMessage?: string\n onSelect: (date: Date) => void\n onMouseEnter: (date: Date, disabled: boolean) => void\n onMouseLeave?: (date: Date) => void\n}\n\nfunction CalendarRangePickerDay({\n date,\n isToday,\n isStartDay,\n isEndDay,\n isSelected,\n isDisabled,\n isInvalid,\n isRange,\n isActive,\n hasNotification,\n tooltipMessage,\n onSelect,\n onMouseEnter,\n onMouseLeave,\n}: CalendarRangePickerDayPropsType) {\n const handleSelectDate = () => {\n !isDisabled && !isInvalid && onSelect(new Date(date))\n }\n\n const jsx = (\n <div\n className={classNames(\"cobalt-CalendarRangePicker__day\", {\n \"cobalt-CalendarRangePicker__day--today\": isToday,\n \"cobalt-CalendarRangePicker__day--startDay\": isStartDay,\n \"cobalt-CalendarRangePicker__day--endDay\": isEndDay,\n \"cobalt-CalendarRangePicker__day--range\": isRange,\n \"cobalt-CalendarRangePicker__day--selected\": isSelected,\n \"cobalt-CalendarRangePicker__day--active\": isActive,\n \"cobalt-CalendarRangePicker__day--invalid\": isInvalid,\n \"cobalt-CalendarRangePicker__day--disabled\": isDisabled,\n })}\n onMouseEnter={() => {\n onMouseEnter(date, !!isDisabled)\n }}\n onMouseLeave={() => {\n onMouseLeave && onMouseLeave(date)\n }}\n onClick={handleSelectDate}\n data-day={format(date, \"yyyy-MM-dd\")}\n >\n {date.getDate()}\n {hasNotification && (\n <div className=\"cobalt-CalendarRangePicker__day-notification-container\">\n <div className=\"cobalt-CalendarRangePicker__day-notification\"></div>\n </div>\n )}\n </div>\n )\n\n return tooltipMessage ? (\n <DayTooltip\n visible={true}\n content={<div className=\"c-text-body-sm\">{tooltipMessage}</div>}\n placement={isStartDay ? \"top\" : \"bottom\"}\n >\n {jsx}\n </DayTooltip>\n ) : (\n jsx\n )\n}\n\nfunction areEqual(\n prevProps: CalendarRangePickerDayPropsType,\n nextProps: CalendarRangePickerDayPropsType\n) {\n return (\n prevProps.isSelected === nextProps.isSelected &&\n prevProps.isActive === nextProps.isActive &&\n prevProps.isStartDay === nextProps.isStartDay &&\n prevProps.isEndDay === nextProps.isEndDay &&\n prevProps.isInvalid === nextProps.isInvalid &&\n prevProps.isRange === nextProps.isRange &&\n prevProps.hasNotification === nextProps.hasNotification &&\n prevProps.isDisabled === nextProps.isDisabled &&\n prevProps.isEditingStartDate === nextProps.isEditingStartDate &&\n prevProps.isEditingEndDate === nextProps.isEditingEndDate\n )\n}\n\nconst MemoizedComponent = React.memo(CalendarRangePickerDay, areEqual)\nMemoizedComponent.displayName = \"CalendarRangePickerDay\"\n\nexport { MemoizedComponent as CalendarRangePickerDay }\n"],"names":["classNames"],"mappings":";;;;;AAwBA,SAAS,sBAAsB,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,EACR,eAAe,EACf,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,YAAY,GACoB,EAAA;IAChC,MAAM,gBAAgB,GAAG,MAAK;AAC5B,QAAA,CAAC,UAAU,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;AACvD,KAAC,CAAA;IAED,MAAM,GAAG,IACP,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,iCAAiC,EAAE;AACvD,YAAA,wCAAwC,EAAE,OAAO;AACjD,YAAA,2CAA2C,EAAE,UAAU;AACvD,YAAA,yCAAyC,EAAE,QAAQ;AACnD,YAAA,wCAAwC,EAAE,OAAO;AACjD,YAAA,2CAA2C,EAAE,UAAU;AACvD,YAAA,yCAAyC,EAAE,QAAQ;AACnD,YAAA,0CAA0C,EAAE,SAAS;AACrD,YAAA,2CAA2C,EAAE,UAAU;AACxD,SAAA,CAAC,EACF,YAAY,EAAE,MAAK;AACjB,YAAA,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,UAAU,CAAC,CAAA;AAClC,SAAC,EACD,YAAY,EAAE,MAAK;AACjB,YAAA,YAAY,IAAI,YAAY,CAAC,IAAI,CAAC,CAAA;SACnC,EACD,OAAO,EAAE,gBAAgB,EAAA,UAAA,EACf,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,EAAA;QAEnC,IAAI,CAAC,OAAO,EAAE;AACd,QAAA,eAAe,KACd,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wDAAwD,EAAA;YACrE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8CAA8C,EAAA,CAAO,CAChE,CACP,CACG,CACP,CAAA;AAED,IAAA,OAAO,cAAc,IACnB,KAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,IAAE,cAAc,CAAO,EAC/D,SAAS,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,IAEvC,GAAG,CACO,KAEb,GAAG,CACJ,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CACf,SAA0C,EAC1C,SAA0C,EAAA;AAE1C,IAAA,QACE,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC,UAAU;AAC7C,QAAA,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ;AACzC,QAAA,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC,UAAU;AAC7C,QAAA,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ;AACzC,QAAA,SAAS,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS;AAC3C,QAAA,SAAS,CAAC,OAAO,KAAK,SAAS,CAAC,OAAO;AACvC,QAAA,SAAS,CAAC,eAAe,KAAK,SAAS,CAAC,eAAe;AACvD,QAAA,SAAS,CAAC,UAAU,KAAK,SAAS,CAAC,UAAU;AAC7C,QAAA,SAAS,CAAC,kBAAkB,KAAK,SAAS,CAAC,kBAAkB;AAC7D,QAAA,SAAS,CAAC,gBAAgB,KAAK,SAAS,CAAC,gBAAgB,EAC1D;AACH,CAAC;AAEK,MAAA,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,sBAAsB,EAAE,QAAQ,EAAC;AACtE,iBAAiB,CAAC,WAAW,GAAG,wBAAwB;;;;"}
|
|
@@ -1,77 +1,154 @@
|
|
|
1
1
|
import React, { useMemo, useState, useEffect } from 'react';
|
|
2
2
|
import { CalendarRangePickerDay as MemoizedComponent } from './CalendarRangePickerDay.js';
|
|
3
3
|
import cx from 'classnames';
|
|
4
|
-
import {
|
|
4
|
+
import { format, isSameDay, differenceInCalendarDays } from 'date-fns';
|
|
5
5
|
import { getMonthDaysByWeeks, getWeekDays } from '../utils.js';
|
|
6
6
|
|
|
7
7
|
function isDisabled(day, firstAvailableDate, lastAvailableDate) {
|
|
8
8
|
return (day.getTime() < firstAvailableDate.getTime() ||
|
|
9
9
|
(lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime()));
|
|
10
10
|
}
|
|
11
|
-
function
|
|
12
|
-
return (
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
function isInvalidOppositeBound({ isEditingStartDate, isEditingEndDate, isStartDay, isEndDay, startDate, endDate, }) {
|
|
12
|
+
return (startDate != null &&
|
|
13
|
+
endDate != null &&
|
|
14
|
+
startDate > endDate &&
|
|
15
|
+
((isEditingStartDate && isEndDay) || (isEditingEndDate && isStartDay)));
|
|
16
|
+
}
|
|
17
|
+
function isDayOutOfRange({ day, rangeConstraints, startDate, }) {
|
|
18
|
+
return (rangeConstraints != null &&
|
|
19
|
+
rangeConstraints.max != null &&
|
|
15
20
|
startDate != null &&
|
|
16
|
-
differenceInCalendarDays(day, startDate) >=
|
|
21
|
+
differenceInCalendarDays(day, startDate) >= rangeConstraints.max.value);
|
|
17
22
|
}
|
|
18
|
-
function
|
|
19
|
-
|
|
23
|
+
function isDayInvalid({ day, isDaySelected, rangeConstraints, rangeTooShort, rangeExceeded, isEditingStartDate, isEditingEndDate, isStartDay, isEndDay, isDayInvalidForSelectionFn, startDate, endDate, }) {
|
|
24
|
+
if (!isDaySelected)
|
|
25
|
+
return false;
|
|
26
|
+
let isInvalid = false;
|
|
27
|
+
if (!isEditingStartDate && !isEditingEndDate) {
|
|
28
|
+
isInvalid = rangeTooShort || rangeExceeded;
|
|
29
|
+
}
|
|
30
|
+
else if (rangeTooShort && (!isStartDay || isEndDay)) {
|
|
31
|
+
isInvalid = true;
|
|
32
|
+
}
|
|
33
|
+
else if (isInvalidOppositeBound({
|
|
34
|
+
isEditingStartDate,
|
|
35
|
+
isEditingEndDate,
|
|
36
|
+
isStartDay,
|
|
37
|
+
isEndDay,
|
|
38
|
+
startDate,
|
|
39
|
+
endDate,
|
|
40
|
+
})) {
|
|
41
|
+
isInvalid = true;
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
isInvalid = isDayOutOfRange({
|
|
45
|
+
day,
|
|
46
|
+
rangeConstraints,
|
|
47
|
+
startDate,
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
if (!isInvalid &&
|
|
51
|
+
isDayInvalidForSelectionFn &&
|
|
52
|
+
((isEditingStartDate && isStartDay) || (isEditingEndDate && isEndDay))) {
|
|
53
|
+
isInvalid = isDayInvalidForSelectionFn(day);
|
|
54
|
+
}
|
|
55
|
+
return isInvalid;
|
|
20
56
|
}
|
|
21
|
-
function isSelected(day, startDate, endDate, isStartDay, isEndDay, isOutOfRangeStartDate) {
|
|
22
|
-
return (isStartDay ||
|
|
57
|
+
function isSelected({ day, startDate, endDate, isStartDay, isEndDay, isOutOfRangeStartDate, rangeTooShort, isEditingStartDate, isEditingEndDate, }) {
|
|
58
|
+
return !!(isStartDay ||
|
|
23
59
|
isEndDay ||
|
|
24
|
-
(!
|
|
60
|
+
((!rangeTooShort || (!isEditingStartDate && !isEditingEndDate)) &&
|
|
61
|
+
!isOutOfRangeStartDate &&
|
|
25
62
|
endDate &&
|
|
26
63
|
day.getTime() <= endDate.getTime() &&
|
|
27
64
|
startDate &&
|
|
28
65
|
day.getTime() > startDate.getTime()));
|
|
29
66
|
}
|
|
30
|
-
function isRangeExceeded(
|
|
31
|
-
return
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
67
|
+
function isRangeExceeded(rangeInDays, rangeLimit) {
|
|
68
|
+
return rangeLimit != null && rangeInDays > rangeLimit;
|
|
69
|
+
}
|
|
70
|
+
function isRangeTooShort(rangeInDays, rangeLimit) {
|
|
71
|
+
return rangeInDays <= 0
|
|
72
|
+
? false
|
|
73
|
+
: rangeLimit != null && rangeInDays < rangeLimit;
|
|
74
|
+
}
|
|
75
|
+
function buildTooltipMessage({ rangeInDays, isEditingStartDate, isStartDay, isEditingEndDate, isEndDay, rangeConstraints, }) {
|
|
76
|
+
var _a, _b, _c, _d;
|
|
77
|
+
let tooltipMessage;
|
|
78
|
+
if (rangeConstraints &&
|
|
79
|
+
rangeInDays >= 0 &&
|
|
80
|
+
((isEditingStartDate && isStartDay) || (isEditingEndDate && isEndDay))) {
|
|
81
|
+
if (isRangeTooShort(rangeInDays, (_a = rangeConstraints.min) === null || _a === void 0 ? void 0 : _a.value)) {
|
|
82
|
+
tooltipMessage = (_b = rangeConstraints === null || rangeConstraints === void 0 ? void 0 : rangeConstraints.min) === null || _b === void 0 ? void 0 : _b.message;
|
|
83
|
+
}
|
|
84
|
+
else if (isRangeExceeded(rangeInDays, (_c = rangeConstraints.max) === null || _c === void 0 ? void 0 : _c.value)) {
|
|
85
|
+
tooltipMessage = (_d = rangeConstraints === null || rangeConstraints === void 0 ? void 0 : rangeConstraints.max) === null || _d === void 0 ? void 0 : _d.message;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
return tooltipMessage;
|
|
89
|
+
}
|
|
90
|
+
function getRangeInDays(range) {
|
|
91
|
+
return range.startDate && range.endDate
|
|
92
|
+
? differenceInCalendarDays(range.endDate, range.startDate) + 1
|
|
93
|
+
: 0;
|
|
35
94
|
}
|
|
36
|
-
function CalendarRangePickerMonth({ date, onSelectDate, onChangeDate, onLeaveDate, startDate, endDate, isEditingStartDate = false, isEditingEndDate = false,
|
|
37
|
-
|
|
38
|
-
const
|
|
39
|
-
const byWeeks = useMemo(() => getMonthDaysByWeeks(date), []);
|
|
95
|
+
function CalendarRangePickerMonth({ date, onSelectDate, onChangeDate, onLeaveDate, startDate, endDate, isEditingStartDate = false, isEditingEndDate = false, firstAvailableDate, lastAvailableDate, isDayDisabledFn, isDayInvalidForSelectionFn, hasDayNotificationFn, rangeConstraints, isSundayFirstDayOfWeek, locale, }) {
|
|
96
|
+
var _a, _b;
|
|
97
|
+
const byWeeks = useMemo(() => getMonthDaysByWeeks(date, isSundayFirstDayOfWeek), []);
|
|
40
98
|
// we use a state for the selected Date to allow the onSelect event to be memoized then still triggering some logic with updated data thanks to the setter+useEffect dependency mechanism
|
|
41
99
|
const [selectedDate, setSelectedDate] = useState(null);
|
|
42
100
|
const today = new Date().setHours(0, 0, 0, 0);
|
|
43
|
-
const weekdays = useMemo(() => getWeekDays(), []);
|
|
44
|
-
const
|
|
45
|
-
const
|
|
101
|
+
const weekdays = useMemo(() => getWeekDays(isSundayFirstDayOfWeek), []);
|
|
102
|
+
const rangeInDays = getRangeInDays({ startDate, endDate });
|
|
103
|
+
const rangeExceeded = isRangeExceeded(rangeInDays, (_a = rangeConstraints === null || rangeConstraints === void 0 ? void 0 : rangeConstraints.max) === null || _a === void 0 ? void 0 : _a.value);
|
|
104
|
+
const rangeTooShort = isRangeTooShort(rangeInDays, (_b = rangeConstraints === null || rangeConstraints === void 0 ? void 0 : rangeConstraints.min) === null || _b === void 0 ? void 0 : _b.value);
|
|
105
|
+
const isOutOfRangeStartDate = isEditingStartDate && rangeExceeded;
|
|
46
106
|
const onMouseEnter = (day, disabled) => {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
107
|
+
var _a, _b;
|
|
108
|
+
const status = {};
|
|
109
|
+
if (disabled) {
|
|
110
|
+
status.isDisabled = true;
|
|
111
|
+
}
|
|
112
|
+
if (!disabled) {
|
|
113
|
+
const currentRange = isEditingStartDate
|
|
114
|
+
? { startDate: day, endDate: endDate }
|
|
115
|
+
: { startDate: startDate, endDate: day };
|
|
116
|
+
const currentRangeInDays = getRangeInDays({
|
|
117
|
+
startDate: currentRange.startDate,
|
|
118
|
+
endDate: currentRange.endDate,
|
|
119
|
+
});
|
|
120
|
+
const currentRangeExceeded = isRangeExceeded(currentRangeInDays, (_a = rangeConstraints === null || rangeConstraints === void 0 ? void 0 : rangeConstraints.max) === null || _a === void 0 ? void 0 : _a.value);
|
|
121
|
+
if (currentRangeExceeded) {
|
|
122
|
+
status.isRangeExceeded = true;
|
|
53
123
|
}
|
|
54
|
-
else
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
124
|
+
else {
|
|
125
|
+
const currentRangeTooShort = isRangeTooShort(currentRangeInDays, (_b = rangeConstraints === null || rangeConstraints === void 0 ? void 0 : rangeConstraints.min) === null || _b === void 0 ? void 0 : _b.value);
|
|
126
|
+
if (currentRangeTooShort) {
|
|
127
|
+
status.isRangeTooShort = true;
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
status.isCustomInvalid =
|
|
131
|
+
isDayInvalidForSelectionFn != null &&
|
|
132
|
+
isDayInvalidForSelectionFn(day);
|
|
133
|
+
}
|
|
58
134
|
}
|
|
59
135
|
}
|
|
60
|
-
onChangeDate(day,
|
|
136
|
+
onChangeDate(day, status);
|
|
61
137
|
};
|
|
62
138
|
useEffect(() => {
|
|
139
|
+
var _a, _b;
|
|
63
140
|
// on Date selection...
|
|
64
141
|
if (selectedDate) {
|
|
65
142
|
if (isEditingStartDate) {
|
|
66
|
-
onSelectDate(selectedDate, isRangeExceeded(selectedDate, endDate,
|
|
143
|
+
onSelectDate(selectedDate, isRangeExceeded(getRangeInDays({ startDate: selectedDate, endDate }), (_a = rangeConstraints === null || rangeConstraints === void 0 ? void 0 : rangeConstraints.max) === null || _a === void 0 ? void 0 : _a.value));
|
|
67
144
|
}
|
|
68
145
|
else {
|
|
69
|
-
onSelectDate(selectedDate, isRangeExceeded(startDate, selectedDate,
|
|
146
|
+
onSelectDate(selectedDate, isRangeExceeded(getRangeInDays({ startDate, endDate: selectedDate }), (_b = rangeConstraints === null || rangeConstraints === void 0 ? void 0 : rangeConstraints.max) === null || _b === void 0 ? void 0 : _b.value));
|
|
70
147
|
}
|
|
71
148
|
}
|
|
72
149
|
}, [selectedDate]);
|
|
73
150
|
return (React.createElement("div", { className: cx("cobalt-CalendarRangePicker__month", {
|
|
74
|
-
"cobalt-CalendarRangePicker__month--invalid":
|
|
151
|
+
"cobalt-CalendarRangePicker__month--invalid": rangeExceeded && !isEditingStartDate,
|
|
75
152
|
}), "data-month": format(date, "yyyy-MM") },
|
|
76
153
|
React.createElement("div", { className: "cobalt-CalendarRangePicker__month-header" }, format(date, "MMMM yyyy", { locale })),
|
|
77
154
|
React.createElement("div", { className: "cobalt-CalendarRangePicker__month__weeks-container" },
|
|
@@ -79,8 +156,47 @@ function CalendarRangePickerMonth({ date, onSelectDate, onChangeDate, onLeaveDat
|
|
|
79
156
|
byWeeks.map((week, index) => (React.createElement("div", { key: index, className: "cobalt-CalendarRangePicker__month__week" }, week.map((day) => {
|
|
80
157
|
const isStartDay = startDate != null && isSameDay(day, startDate);
|
|
81
158
|
const isEndDay = endDate != null && isSameDay(day, endDate);
|
|
82
|
-
|
|
83
|
-
|
|
159
|
+
const disabled = isDisabled(day, firstAvailableDate, lastAvailableDate) ||
|
|
160
|
+
(isDayDisabledFn && isDayDisabledFn(day));
|
|
161
|
+
const hasNotification = !disabled &&
|
|
162
|
+
hasDayNotificationFn != null &&
|
|
163
|
+
hasDayNotificationFn(day);
|
|
164
|
+
const isRange = rangeInDays !== 0 &&
|
|
165
|
+
(isStartDay || isEndDay) &&
|
|
166
|
+
(!rangeTooShort || (!isEditingStartDate && !isEditingEndDate));
|
|
167
|
+
const isDaySelected = isSelected({
|
|
168
|
+
day,
|
|
169
|
+
startDate,
|
|
170
|
+
endDate,
|
|
171
|
+
isStartDay,
|
|
172
|
+
isEndDay,
|
|
173
|
+
isOutOfRangeStartDate,
|
|
174
|
+
rangeTooShort,
|
|
175
|
+
isEditingStartDate,
|
|
176
|
+
isEditingEndDate,
|
|
177
|
+
});
|
|
178
|
+
return (React.createElement(MemoizedComponent, { key: day.getTime(), date: day, onMouseEnter: onMouseEnter, onMouseLeave: onLeaveDate, onSelect: setSelectedDate, isToday: isSameDay(day, today), isActive: (isEditingStartDate && isStartDay) ||
|
|
179
|
+
(isEditingEndDate && isEndDay), isStartDay: isStartDay, isEndDay: isEndDay, isRange: isRange, isEditingStartDate: isEditingStartDate, isEditingEndDate: isEditingEndDate, isInvalid: isDayInvalid({
|
|
180
|
+
day,
|
|
181
|
+
isDayInvalidForSelectionFn,
|
|
182
|
+
isDaySelected,
|
|
183
|
+
startDate,
|
|
184
|
+
rangeConstraints,
|
|
185
|
+
rangeTooShort,
|
|
186
|
+
rangeExceeded,
|
|
187
|
+
isEditingStartDate,
|
|
188
|
+
isEditingEndDate,
|
|
189
|
+
isStartDay,
|
|
190
|
+
isEndDay,
|
|
191
|
+
endDate,
|
|
192
|
+
}), hasNotification: hasNotification, isDisabled: disabled, tooltipMessage: buildTooltipMessage({
|
|
193
|
+
rangeInDays,
|
|
194
|
+
isEditingStartDate: !!isEditingStartDate,
|
|
195
|
+
isEditingEndDate: !!isEditingEndDate,
|
|
196
|
+
isStartDay,
|
|
197
|
+
isEndDay,
|
|
198
|
+
rangeConstraints,
|
|
199
|
+
}), isSelected: isDaySelected }));
|
|
84
200
|
})))))));
|
|
85
201
|
}
|
|
86
202
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarRangePickerMonth.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\"\nimport { CalendarRangePickerDay } from \"./CalendarRangePickerDay\"\nimport classNames from \"classnames\"\nimport {\n startOfMonth,\n endOfMonth,\n format,\n isSameDay,\n differenceInCalendarDays,\n} from \"date-fns\"\nimport { getMonthDaysByWeeks, getWeekDays } from \"../utils\"\n\ntype Props = {\n date: Date\n startDate?: Date\n endDate?: Date\n onSelectDate: (date: Date, isOutOfRange?: boolean) => void\n onChangeDate: (date: Date, isOutOfRange: boolean, disabled: boolean) => void\n onLeaveDate?: (date: Date) => void\n isEditingStartDate?: boolean\n isEditingEndDate?: boolean\n rangeLimit?: number\n firstAvailableDate: Date\n lastAvailableDate?: Date\n locale: any\n}\n\nfunction isDisabled(\n day: Date,\n firstAvailableDate: Date,\n lastAvailableDate: Date | undefined\n) {\n return (\n day.getTime() < firstAvailableDate.getTime() ||\n (lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime())\n )\n}\n\nfunction isInvalid(\n day: Date,\n startDate: Date | undefined,\n rangeLimit: number | undefined,\n isOutOfRange: boolean,\n isEditingEndDate: boolean | undefined\n) {\n return (\n rangeLimit != null &&\n isOutOfRange &&\n isEditingEndDate &&\n startDate != null &&\n differenceInCalendarDays(day, startDate) >= rangeLimit\n )\n}\n\nfunction isRange(\n startDate: Date | undefined,\n endDate: Date | undefined,\n isOutOfRangeStartDate: boolean\n) {\n return !!(startDate && endDate) && !isOutOfRangeStartDate\n}\n\nfunction isSelected(\n day: Date,\n startDate: Date | undefined,\n endDate: Date | undefined,\n isStartDay: boolean,\n isEndDay: boolean,\n isOutOfRangeStartDate: boolean\n) {\n return (\n isStartDay ||\n isEndDay ||\n (!isOutOfRangeStartDate &&\n endDate &&\n day.getTime() <= endDate.getTime() &&\n startDate &&\n day.getTime() > startDate.getTime())\n )\n}\n\nfunction isRangeExceeded(\n startDate: Date | undefined,\n endDate: Date | undefined,\n rangeLimit: number | undefined\n) {\n return (\n rangeLimit != null &&\n startDate != null &&\n endDate != null &&\n differenceInCalendarDays(endDate, startDate) >= rangeLimit\n )\n}\n\nexport function CalendarRangePickerMonth({\n date,\n onSelectDate,\n onChangeDate,\n onLeaveDate,\n startDate,\n endDate,\n isEditingStartDate = false,\n isEditingEndDate = false,\n rangeLimit,\n firstAvailableDate,\n lastAvailableDate,\n locale,\n}: Props) {\n const firstDayOfMonth = useMemo(() => startOfMonth(date), [])\n const lastDayOfMonth = useMemo(() => endOfMonth(date), [])\n const byWeeks = useMemo(() => getMonthDaysByWeeks(date), [])\n\n // we use a state for the selected Date to allow the onSelect event to be memoized then still triggering some logic with updated data thanks to the setter+useEffect dependency mechanism\n const [selectedDate, setSelectedDate] = useState<Date | null>(null)\n\n const today = new Date().setHours(0, 0, 0, 0)\n\n const weekdays: Date[] = useMemo(() => getWeekDays(), [])\n\n const isOutOfRange = isRangeExceeded(startDate, endDate, rangeLimit)\n\n const isOutOfRangeStartDate = !!isEditingStartDate && isOutOfRange\n\n const onMouseEnter = (day: Date, disabled: boolean) => {\n let isDayOutOfRange = false\n if (rangeLimit != null) {\n if (isEditingStartDate) {\n isDayOutOfRange =\n endDate != null &&\n differenceInCalendarDays(endDate, day) >= rangeLimit\n } else if (isEditingEndDate) {\n isDayOutOfRange =\n startDate != null &&\n differenceInCalendarDays(day, startDate) >= rangeLimit\n }\n }\n\n onChangeDate(day, isDayOutOfRange, disabled)\n }\n\n useEffect(() => {\n // on Date selection...\n if (selectedDate) {\n if (isEditingStartDate) {\n onSelectDate(\n selectedDate,\n isRangeExceeded(selectedDate, endDate, rangeLimit)\n )\n } else {\n onSelectDate(\n selectedDate,\n isRangeExceeded(startDate, selectedDate, rangeLimit)\n )\n }\n }\n }, [selectedDate])\n\n return (\n <div\n className={classNames(\"cobalt-CalendarRangePicker__month\", {\n \"cobalt-CalendarRangePicker__month--invalid\":\n isOutOfRange && !isEditingStartDate,\n })}\n data-month={format(date, \"yyyy-MM\")}\n >\n <div className=\"cobalt-CalendarRangePicker__month-header\">\n {format(date, \"MMMM yyyy\", { locale })}\n </div>\n <div className=\"cobalt-CalendarRangePicker__month__weeks-container\">\n <div className=\"cobalt-CalendarRangePicker__month__week-header\">\n {weekdays.map((weekday) => (\n <div\n key={weekday.getTime()}\n className=\"cobalt-CalendarRangePicker__month__day-header\"\n >\n {format(weekday, \"iiiiii\", { locale })}\n </div>\n ))}\n </div>\n {byWeeks.map((week, index) => (\n <div key={index} className=\"cobalt-CalendarRangePicker__month__week\">\n {week.map((day) => {\n const isStartDay = startDate != null && isSameDay(day, startDate)\n const isEndDay = endDate != null && isSameDay(day, endDate)\n return (\n <CalendarRangePickerDay\n key={day.getTime()}\n isEditingStartDate={!!isEditingStartDate}\n isEditingEndDate={!!isEditingEndDate}\n date={day}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onLeaveDate}\n onSelect={setSelectedDate}\n isToday={isSameDay(day, today)}\n isStartDay={isStartDay}\n isEndDay={isEndDay}\n isFirstDayOfMonth={isSameDay(day, firstDayOfMonth)}\n isLastDayOfMonth={isSameDay(day, lastDayOfMonth)}\n isRange={isRange(startDate, endDate, isOutOfRangeStartDate)}\n invalid={isInvalid(\n day,\n startDate,\n rangeLimit,\n isOutOfRange,\n isEditingEndDate\n )}\n subdued={\n (isStartDay && isEditingEndDate) ||\n (isEndDay && isEditingStartDate)\n }\n disabled={isDisabled(\n day,\n firstAvailableDate,\n lastAvailableDate\n )}\n selected={isSelected(\n day,\n startDate,\n endDate,\n isStartDay,\n isEndDay,\n isOutOfRangeStartDate\n )}\n />\n )\n })}\n </div>\n ))}\n </div>\n </div>\n )\n}\n"],"names":["classNames","CalendarRangePickerDay"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CalendarRangePickerMonth.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/CalendarRangePickerMonth.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\"\nimport { CalendarRangePickerDay } from \"./CalendarRangePickerDay\"\nimport classNames from \"classnames\"\nimport { format, isSameDay, differenceInCalendarDays } from \"date-fns\"\nimport { getMonthDaysByWeeks, getWeekDays } from \"../utils\"\nimport {\n CalendarRangePickerPropsType,\n DayStatusInterface,\n RangeConstraintsInterface,\n} from \"./CalendarRangePicker\"\n\ntype CalendarRangePickerMonthPropsType = {\n date: Date\n startDate?: Date\n endDate?: Date\n onSelectDate: (date: Date, isOutOfRange?: boolean) => void\n onChangeDate: (date: Date, status: DayStatusInterface) => void\n onLeaveDate?: (date: Date) => void\n isEditingStartDate?: boolean\n isEditingEndDate?: boolean\n firstAvailableDate: Date\n lastAvailableDate?: Date\n isDayDisabledFn?: CalendarRangePickerPropsType[\"isDayDisabledFn\"]\n hasDayNotificationFn?: CalendarRangePickerPropsType[\"hasDayNotificationFn\"]\n isDayInvalidForSelectionFn?: CalendarRangePickerPropsType[\"isDayInvalidForSelectionFn\"]\n rangeConstraints?: RangeConstraintsInterface\n isSundayFirstDayOfWeek?: boolean\n locale: any\n}\n\nfunction isDisabled(\n day: Date,\n firstAvailableDate: Date,\n lastAvailableDate: Date | undefined\n) {\n return (\n day.getTime() < firstAvailableDate.getTime() ||\n (lastAvailableDate != null && day.getTime() > lastAvailableDate.getTime())\n )\n}\n\nfunction isInvalidOppositeBound({\n isEditingStartDate,\n isEditingEndDate,\n isStartDay,\n isEndDay,\n startDate,\n endDate,\n}: {\n startDate: Date | undefined\n endDate: Date | undefined\n isEditingStartDate: boolean | undefined\n isEditingEndDate: boolean | undefined\n isStartDay: boolean\n isEndDay: boolean\n}) {\n return (\n startDate != null &&\n endDate != null &&\n startDate > endDate &&\n ((isEditingStartDate && isEndDay) || (isEditingEndDate && isStartDay))\n )\n}\n\nfunction isDayOutOfRange({\n day,\n rangeConstraints,\n startDate,\n}: {\n day: Date\n startDate: Date | undefined\n rangeConstraints: RangeConstraintsInterface | undefined\n}) {\n return (\n rangeConstraints != null &&\n rangeConstraints.max != null &&\n startDate != null &&\n differenceInCalendarDays(day, startDate) >= rangeConstraints.max.value\n )\n}\n\nfunction isDayInvalid({\n day,\n isDaySelected,\n rangeConstraints,\n rangeTooShort,\n rangeExceeded,\n isEditingStartDate,\n isEditingEndDate,\n isStartDay,\n isEndDay,\n isDayInvalidForSelectionFn,\n startDate,\n endDate,\n}: {\n day: Date\n isDaySelected: boolean\n startDate: Date | undefined\n endDate: Date | undefined\n rangeConstraints: RangeConstraintsInterface | undefined\n rangeTooShort: boolean\n rangeExceeded: boolean\n isEditingStartDate: boolean | undefined\n isEditingEndDate: boolean | undefined\n isStartDay: boolean\n isEndDay: boolean\n isDayInvalidForSelectionFn?: CalendarRangePickerPropsType[\"isDayInvalidForSelectionFn\"]\n}) {\n if (!isDaySelected) return false\n\n let isInvalid = false\n if (!isEditingStartDate && !isEditingEndDate) {\n isInvalid = rangeTooShort || rangeExceeded\n } else if (rangeTooShort && (!isStartDay || isEndDay)) {\n isInvalid = true\n } else if (\n isInvalidOppositeBound({\n isEditingStartDate,\n isEditingEndDate,\n isStartDay,\n isEndDay,\n startDate,\n endDate,\n })\n ) {\n isInvalid = true\n } else {\n isInvalid = isDayOutOfRange({\n day,\n rangeConstraints,\n startDate,\n })\n }\n\n if (\n !isInvalid &&\n isDayInvalidForSelectionFn &&\n ((isEditingStartDate && isStartDay) || (isEditingEndDate && isEndDay))\n ) {\n isInvalid = isDayInvalidForSelectionFn(day)\n }\n\n return isInvalid\n}\n\nfunction isSelected({\n day,\n startDate,\n endDate,\n isStartDay,\n isEndDay,\n isOutOfRangeStartDate,\n rangeTooShort,\n isEditingStartDate,\n isEditingEndDate,\n}: {\n day: Date\n startDate: Date | undefined\n endDate: Date | undefined\n isStartDay: boolean\n isEndDay: boolean\n isOutOfRangeStartDate: boolean\n rangeTooShort: boolean\n isEditingStartDate: boolean\n isEditingEndDate: boolean\n}) {\n return !!(\n isStartDay ||\n isEndDay ||\n ((!rangeTooShort || (!isEditingStartDate && !isEditingEndDate)) &&\n !isOutOfRangeStartDate &&\n endDate &&\n day.getTime() <= endDate.getTime() &&\n startDate &&\n day.getTime() > startDate.getTime())\n )\n}\n\nfunction isRangeExceeded(rangeInDays: number, rangeLimit: number | undefined) {\n return rangeLimit != null && rangeInDays > rangeLimit\n}\n\nfunction isRangeTooShort(rangeInDays: number, rangeLimit: number | undefined) {\n return rangeInDays <= 0\n ? false\n : rangeLimit != null && rangeInDays < rangeLimit\n}\n\nfunction buildTooltipMessage({\n rangeInDays,\n isEditingStartDate,\n isStartDay,\n isEditingEndDate,\n isEndDay,\n rangeConstraints,\n}: {\n rangeInDays: number\n isEditingStartDate: boolean\n isStartDay: boolean\n isEditingEndDate: boolean\n isEndDay: boolean\n rangeConstraints?: RangeConstraintsInterface\n}) {\n let tooltipMessage\n if (\n rangeConstraints &&\n rangeInDays >= 0 &&\n ((isEditingStartDate && isStartDay) || (isEditingEndDate && isEndDay))\n ) {\n if (isRangeTooShort(rangeInDays, rangeConstraints.min?.value)) {\n tooltipMessage = rangeConstraints?.min?.message\n } else if (isRangeExceeded(rangeInDays, rangeConstraints.max?.value)) {\n tooltipMessage = rangeConstraints?.max?.message\n }\n }\n\n return tooltipMessage\n}\n\nfunction getRangeInDays(range: {\n startDate: Date | undefined\n endDate: Date | undefined\n}) {\n return range.startDate && range.endDate\n ? differenceInCalendarDays(range.endDate, range.startDate) + 1\n : 0\n}\n\nexport function CalendarRangePickerMonth({\n date,\n onSelectDate,\n onChangeDate,\n onLeaveDate,\n startDate,\n endDate,\n isEditingStartDate = false,\n isEditingEndDate = false,\n firstAvailableDate,\n lastAvailableDate,\n isDayDisabledFn,\n isDayInvalidForSelectionFn,\n hasDayNotificationFn,\n rangeConstraints,\n isSundayFirstDayOfWeek,\n locale,\n}: CalendarRangePickerMonthPropsType) {\n const byWeeks = useMemo(\n () => getMonthDaysByWeeks(date, isSundayFirstDayOfWeek),\n []\n )\n\n // we use a state for the selected Date to allow the onSelect event to be memoized then still triggering some logic with updated data thanks to the setter+useEffect dependency mechanism\n const [selectedDate, setSelectedDate] = useState<Date | null>(null)\n\n const today = new Date().setHours(0, 0, 0, 0)\n\n const weekdays: Date[] = useMemo(\n () => getWeekDays(isSundayFirstDayOfWeek),\n []\n )\n\n const rangeInDays = getRangeInDays({ startDate, endDate })\n\n const rangeExceeded = isRangeExceeded(\n rangeInDays,\n rangeConstraints?.max?.value\n )\n\n const rangeTooShort = isRangeTooShort(\n rangeInDays,\n rangeConstraints?.min?.value\n )\n\n const isOutOfRangeStartDate = isEditingStartDate && rangeExceeded\n\n const onMouseEnter = (day: Date, disabled: boolean) => {\n const status: DayStatusInterface = {}\n\n if (disabled) {\n status.isDisabled = true\n }\n\n if (!disabled) {\n const currentRange = isEditingStartDate\n ? { startDate: day, endDate: endDate! }\n : { startDate: startDate!, endDate: day }\n\n const currentRangeInDays = getRangeInDays({\n startDate: currentRange.startDate,\n endDate: currentRange.endDate,\n })\n\n const currentRangeExceeded = isRangeExceeded(\n currentRangeInDays,\n rangeConstraints?.max?.value\n )\n\n if (currentRangeExceeded) {\n status.isRangeExceeded = true\n } else {\n const currentRangeTooShort = isRangeTooShort(\n currentRangeInDays,\n rangeConstraints?.min?.value\n )\n\n if (currentRangeTooShort) {\n status.isRangeTooShort = true\n } else {\n status.isCustomInvalid =\n isDayInvalidForSelectionFn != null &&\n isDayInvalidForSelectionFn(day)\n }\n }\n }\n\n onChangeDate(day, status)\n }\n\n useEffect(() => {\n // on Date selection...\n if (selectedDate) {\n if (isEditingStartDate) {\n onSelectDate(\n selectedDate,\n isRangeExceeded(\n getRangeInDays({ startDate: selectedDate, endDate }),\n rangeConstraints?.max?.value\n )\n )\n } else {\n onSelectDate(\n selectedDate,\n isRangeExceeded(\n getRangeInDays({ startDate, endDate: selectedDate }),\n rangeConstraints?.max?.value\n )\n )\n }\n }\n }, [selectedDate])\n\n return (\n <div\n className={classNames(\"cobalt-CalendarRangePicker__month\", {\n \"cobalt-CalendarRangePicker__month--invalid\":\n rangeExceeded && !isEditingStartDate,\n })}\n data-month={format(date, \"yyyy-MM\")}\n >\n <div className=\"cobalt-CalendarRangePicker__month-header\">\n {format(date, \"MMMM yyyy\", { locale })}\n </div>\n <div className=\"cobalt-CalendarRangePicker__month__weeks-container\">\n <div className=\"cobalt-CalendarRangePicker__month__week-header\">\n {weekdays.map((weekday) => (\n <div\n key={weekday.getTime()}\n className=\"cobalt-CalendarRangePicker__month__day-header\"\n >\n {format(weekday, \"iiiiii\", { locale })}\n </div>\n ))}\n </div>\n {byWeeks.map((week, index) => (\n <div key={index} className=\"cobalt-CalendarRangePicker__month__week\">\n {week.map((day) => {\n const isStartDay = startDate != null && isSameDay(day, startDate)\n const isEndDay = endDate != null && isSameDay(day, endDate)\n\n const disabled =\n isDisabled(day, firstAvailableDate, lastAvailableDate) ||\n (isDayDisabledFn && isDayDisabledFn(day))\n\n const hasNotification =\n !disabled &&\n hasDayNotificationFn != null &&\n hasDayNotificationFn(day)\n\n const isRange =\n rangeInDays !== 0 &&\n (isStartDay || isEndDay) &&\n (!rangeTooShort || (!isEditingStartDate && !isEditingEndDate))\n\n const isDaySelected = isSelected({\n day,\n startDate,\n endDate,\n isStartDay,\n isEndDay,\n isOutOfRangeStartDate,\n rangeTooShort,\n isEditingStartDate,\n isEditingEndDate,\n })\n\n return (\n <CalendarRangePickerDay\n key={day.getTime()}\n date={day}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onLeaveDate}\n onSelect={setSelectedDate}\n isToday={isSameDay(day, today)}\n isActive={\n (isEditingStartDate && isStartDay) ||\n (isEditingEndDate && isEndDay)\n }\n isStartDay={isStartDay}\n isEndDay={isEndDay}\n isRange={isRange}\n isEditingStartDate={isEditingStartDate}\n isEditingEndDate={isEditingEndDate}\n isInvalid={isDayInvalid({\n day,\n isDayInvalidForSelectionFn,\n isDaySelected,\n startDate,\n rangeConstraints,\n rangeTooShort,\n rangeExceeded,\n isEditingStartDate,\n isEditingEndDate,\n isStartDay,\n isEndDay,\n endDate,\n })}\n hasNotification={hasNotification}\n isDisabled={disabled}\n tooltipMessage={buildTooltipMessage({\n rangeInDays,\n isEditingStartDate: !!isEditingStartDate,\n isEditingEndDate: !!isEditingEndDate,\n isStartDay,\n isEndDay,\n rangeConstraints,\n })}\n isSelected={isDaySelected}\n />\n )\n })}\n </div>\n ))}\n </div>\n </div>\n )\n}\n"],"names":["classNames","CalendarRangePickerDay"],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Tippy from '@tippyjs/react';
|
|
3
|
+
import { sticky } from 'tippy.js';
|
|
4
|
+
|
|
5
|
+
const DayTooltip = (props) => React.createElement(Tippy, { ...props });
|
|
6
|
+
DayTooltip.defaultProps = {
|
|
7
|
+
animation: "fade",
|
|
8
|
+
arrow: true,
|
|
9
|
+
interactive: true,
|
|
10
|
+
interactiveBorder: 10,
|
|
11
|
+
placement: "top",
|
|
12
|
+
theme: "light range-picker",
|
|
13
|
+
delay: [0, 0],
|
|
14
|
+
duration: [0, 0],
|
|
15
|
+
maxWidth: 500,
|
|
16
|
+
offset: [0, 8],
|
|
17
|
+
sticky: true,
|
|
18
|
+
plugins: [sticky],
|
|
19
|
+
appendTo: document.body,
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { DayTooltip as default };
|
|
23
|
+
//# sourceMappingURL=DayTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DayTooltip.js","sources":["../../../../src/components/Calendar/CalendarRangePicker/DayTooltip.tsx"],"sourcesContent":["import React from \"react\"\nimport Tippy, { TippyProps } from \"@tippyjs/react\"\nimport { sticky } from \"tippy.js\"\n\nconst DayTooltip = (props: TippyProps) => <Tippy {...props} />\nDayTooltip.defaultProps = {\n animation: \"fade\",\n arrow: true,\n interactive: true,\n interactiveBorder: 10,\n placement: \"top\",\n theme: \"light range-picker\",\n delay: [0, 0],\n duration: [0, 0],\n maxWidth: 500,\n offset: [0, 8],\n sticky: true,\n plugins: [sticky],\n appendTo: document.body,\n}\n\nexport default DayTooltip\n"],"names":[],"mappings":";;;;AAIA,MAAM,UAAU,GAAG,CAAC,KAAiB,KAAK,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAA,GAAK,KAAK,EAAA,EAAI;AAC9D,UAAU,CAAC,YAAY,GAAG;AACxB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,KAAK,EAAE,IAAI;AACX,IAAA,WAAW,EAAE,IAAI;AACjB,IAAA,iBAAiB,EAAE,EAAE;AACrB,IAAA,SAAS,EAAE,KAAK;AAChB,IAAA,KAAK,EAAE,oBAAoB;AAC3B,IAAA,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACb,IAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAChB,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACd,IAAA,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,CAAC,MAAM,CAAC;IACjB,QAAQ,EAAE,QAAQ,CAAC,IAAI;CACxB;;;;"}
|
|
@@ -4,13 +4,15 @@ import getDay from 'date-fns/getDay';
|
|
|
4
4
|
import endOfMonth from 'date-fns/endOfMonth';
|
|
5
5
|
import eachDayOfInterval from 'date-fns/eachDayOfInterval';
|
|
6
6
|
|
|
7
|
-
const getWeekDays = () => {
|
|
7
|
+
const getWeekDays = (isSundayFirstDayOfWeek = false) => {
|
|
8
|
+
const extraIndex = isSundayFirstDayOfWeek ? 0 : 1;
|
|
8
9
|
const now = new Date().setHours(0, 0, 0, 0);
|
|
9
|
-
return [...Array(7).keys()].map((index) => setISODay(now, index +
|
|
10
|
+
return [...Array(7).keys()].map((index) => setISODay(now, index + extraIndex));
|
|
10
11
|
};
|
|
11
|
-
const getMonthDaysByWeeks = (monthDate) => {
|
|
12
|
+
const getMonthDaysByWeeks = (monthDate, isSundayFirstDayOfWeek = false) => {
|
|
13
|
+
const extraOffset = isSundayFirstDayOfWeek ? 0 : 1;
|
|
12
14
|
const firstDayOfMonth = startOfMonth(monthDate);
|
|
13
|
-
const firstDayOfMonthOffset = getDay(firstDayOfMonth) -
|
|
15
|
+
const firstDayOfMonthOffset = getDay(firstDayOfMonth) - extraOffset;
|
|
14
16
|
const lastDayOfMonth = endOfMonth(monthDate);
|
|
15
17
|
const days = eachDayOfInterval({
|
|
16
18
|
start: firstDayOfMonth,
|