@driveflux/beam 3.0.18 → 3.0.19
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/dist/accordion/Accordion.js +7 -203
- package/dist/accordion/Accordion.stories.js +11 -31
- package/dist/alert/Alert.js +19 -193
- package/dist/alert/Alert.stories.js +15 -50
- package/dist/animations/LoadingAnimation.js +21 -34
- package/dist/badge/Badge.js +7 -105
- package/dist/badge/Badge.stories.js +7 -28
- package/dist/box/Box.js +3 -151
- package/dist/box/Box.stories.js +7 -8
- package/dist/breadcrumbs/Breadcrumbs.js +26 -351
- package/dist/breadcrumbs/Breadcrumbs.stories.js +27 -51
- package/dist/button/Button.js +12 -190
- package/dist/button/Button.stories.js +7 -35
- package/dist/button/TextButton.js +9 -168
- package/dist/card/Card.js +7 -188
- package/dist/card/Card.stories.js +7 -10
- package/dist/carousel/Carousel.js +58 -308
- package/dist/carousel/Carousel.stories.js +7 -39
- package/dist/carousel/CarouselButton.js +7 -132
- package/dist/center/Center.js +3 -127
- package/dist/center/Center.stories.js +7 -19
- package/dist/checkbox/Checkbox.js +4 -188
- package/dist/checkbox/Checkbox.stories.js +8 -10
- package/dist/chip/Chip.js +3 -168
- package/dist/chip/Chip.stories.js +7 -19
- package/dist/circular-progress/CircularProgress.js +11 -159
- package/dist/circular-progress/CircularProgress.stories.js +14 -54
- package/dist/command/command.js +13 -249
- package/dist/datepicker/DatePicker.js +90 -245
- package/dist/datepicker/DatePicker.stories.js +58 -162
- package/dist/datepicker/DatePickerDrawer.js +17 -115
- package/dist/datepicker/DatePickerPopover.js +35 -208
- package/dist/datepicker/constants.js +4 -3
- package/dist/datepicker/utils.js +11 -4
- package/dist/dialog/index.js +12 -253
- package/dist/divider/Divider.js +3 -127
- package/dist/divider/Divider.stories.js +7 -13
- package/dist/drawer/index.js +12 -230
- package/dist/dropdown/Dropdown.js +26 -297
- package/dist/dropdown/Dropdown.stories.js +22 -109
- package/dist/field-wrapper/FieldWrapper.js +3 -203
- package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
- package/dist/flex/Flex.js +3 -127
- package/dist/flex/Flex.stories.js +7 -19
- package/dist/grid/Grid.js +3 -127
- package/dist/grid/Grid.stories.js +7 -28
- package/dist/hooks/use-breakpoint-value.js +14 -77
- package/dist/hooks/use-media-query.js +12 -61
- package/dist/hstack/HStack.js +3 -127
- package/dist/hstack/HStack.stories.js +7 -19
- package/dist/icons/FluxLogo.js +9 -222
- package/dist/icons/FluxLogoTable.js +5 -118
- package/dist/icons/Icon.js +7 -117
- package/dist/icons/Icon.stories.js +7 -12
- package/dist/icons/Icon24Hours.js +5 -92
- package/dist/icons/IconAcceleration.js +4 -81
- package/dist/icons/IconAccount.js +4 -81
- package/dist/icons/IconApplicant.js +5 -87
- package/dist/icons/IconArrow.js +6 -87
- package/dist/icons/IconArrowBack.js +4 -81
- package/dist/icons/IconArrowForward.js +4 -81
- package/dist/icons/IconArrowTopLeft.js +4 -79
- package/dist/icons/IconBluesharkProductGuide.js +5 -89
- package/dist/icons/IconBolt.js +4 -81
- package/dist/icons/IconBriefcase.js +4 -81
- package/dist/icons/IconBulb.js +4 -81
- package/dist/icons/IconCalendar.js +4 -81
- package/dist/icons/IconCalendarArrowBack.js +4 -81
- package/dist/icons/IconCalendarArrowForward.js +4 -81
- package/dist/icons/IconCalendarDoubleArrowBack.js +4 -81
- package/dist/icons/IconCalendarDoubleArrowForward.js +4 -81
- package/dist/icons/IconCancel.js +5 -86
- package/dist/icons/IconCancelMark.js +4 -81
- package/dist/icons/IconCarSUV.js +4 -81
- package/dist/icons/IconCarSedan.js +7 -156
- package/dist/icons/IconChain.js +5 -88
- package/dist/icons/IconCheckmark.js +4 -81
- package/dist/icons/IconChevronRight.js +4 -81
- package/dist/icons/IconCircle.js +11 -123
- package/dist/icons/IconCircleCheckmark.js +5 -86
- package/dist/icons/IconCircleError.js +4 -81
- package/dist/icons/IconCircleExclamation.js +6 -113
- package/dist/icons/IconCircleMark.js +5 -87
- package/dist/icons/IconCircleOutline.js +5 -148
- package/dist/icons/IconClock.js +5 -89
- package/dist/icons/IconClose.js +4 -81
- package/dist/icons/IconCollapseAll.js +5 -103
- package/dist/icons/IconConcierge.js +5 -88
- package/dist/icons/IconConciergeService.js +5 -96
- package/dist/icons/IconCreditCard.js +5 -87
- package/dist/icons/IconDash.js +4 -81
- package/dist/icons/IconDeliver.js +4 -81
- package/dist/icons/IconDelivery.js +5 -96
- package/dist/icons/IconDetails.js +4 -81
- package/dist/icons/IconDot.js +6 -96
- package/dist/icons/IconDownload.js +5 -88
- package/dist/icons/IconEVCharging.js +5 -88
- package/dist/icons/IconElectricCarFuel.js +5 -89
- package/dist/icons/IconEllipsis.js +5 -87
- package/dist/icons/IconEnvelope.js +4 -81
- package/dist/icons/IconExpandAll.js +5 -103
- package/dist/icons/IconEye.js +5 -88
- package/dist/icons/IconFacebook.js +6 -103
- package/dist/icons/IconFilter.js +5 -92
- package/dist/icons/IconFlagMalaysia.js +5 -150
- package/dist/icons/IconGiveKey.js +5 -88
- package/dist/icons/IconGlobe.js +4 -79
- package/dist/icons/IconGoogle.js +5 -96
- package/dist/icons/IconHome.js +5 -87
- package/dist/icons/IconHostAdvertise.js +4 -81
- package/dist/icons/IconHostCar.js +4 -84
- package/dist/icons/IconHostCash.js +5 -100
- package/dist/icons/IconHostHandle.js +4 -79
- package/dist/icons/IconHostLocation.js +4 -79
- package/dist/icons/IconHostPayment.js +5 -100
- package/dist/icons/IconHostService.js +5 -88
- package/dist/icons/IconHotDeals.js +4 -81
- package/dist/icons/IconInfo.js +5 -86
- package/dist/icons/IconInstagram.js +4 -81
- package/dist/icons/IconInsurance.js +5 -108
- package/dist/icons/IconInternet.js +4 -82
- package/dist/icons/IconInventory.js +5 -87
- package/dist/icons/IconLaurel.js +5 -110
- package/dist/icons/IconLinkedIn.js +4 -81
- package/dist/icons/IconLoading.js +4 -87
- package/dist/icons/IconLocation.js +5 -89
- package/dist/icons/IconLock.js +4 -82
- package/dist/icons/IconLogistics.js +4 -81
- package/dist/icons/IconMail.js +5 -103
- package/dist/icons/IconMember.js +5 -87
- package/dist/icons/IconMobilePen.js +5 -92
- package/dist/icons/IconMotorcycleMoped.js +5 -87
- package/dist/icons/IconNoCost.js +5 -101
- package/dist/icons/IconPDF.js +5 -89
- package/dist/icons/IconPencil.js +4 -79
- package/dist/icons/IconPhone.js +4 -79
- package/dist/icons/IconPlus.js +4 -81
- package/dist/icons/IconPricing.js +4 -81
- package/dist/icons/IconProtected.js +4 -80
- package/dist/icons/IconPsychology.js +4 -81
- package/dist/icons/IconQuestionTooltip.js +4 -137
- package/dist/icons/IconQuote.js +4 -81
- package/dist/icons/IconRate.js +4 -80
- package/dist/icons/IconRegister.js +5 -108
- package/dist/icons/IconReport.js +6 -98
- package/dist/icons/IconReturn.js +4 -81
- package/dist/icons/IconSearch.js +4 -79
- package/dist/icons/IconSecure.js +4 -80
- package/dist/icons/IconSecurity.js +4 -82
- package/dist/icons/IconSedanOutline.js +5 -168
- package/dist/icons/IconSelectArrow.js +6 -87
- package/dist/icons/IconSort.js +5 -88
- package/dist/icons/IconSortListed.js +5 -104
- package/dist/icons/IconSortPriceAscending.js +5 -92
- package/dist/icons/IconSortPriceDescending.js +5 -92
- package/dist/icons/IconSortYear.js +5 -88
- package/dist/icons/IconSpan.js +4 -80
- package/dist/icons/IconSpeaker.js +4 -88
- package/dist/icons/IconSpecialCar.js +5 -104
- package/dist/icons/IconStar.js +7 -101
- package/dist/icons/IconStockPhoto.js +5 -104
- package/dist/icons/IconSubscription.js +6 -122
- package/dist/icons/IconSubscriptions.js +6 -122
- package/dist/icons/IconSwap.js +5 -88
- package/dist/icons/IconTax.js +4 -81
- package/dist/icons/IconThinArrow.js +6 -87
- package/dist/icons/IconThumbsdown.js +5 -87
- package/dist/icons/IconThumbsup.js +5 -87
- package/dist/icons/IconTool.js +4 -81
- package/dist/icons/IconTooltip.js +4 -137
- package/dist/icons/IconTrash.js +4 -81
- package/dist/icons/IconTriangleExclamation.js +4 -81
- package/dist/icons/IconTyersBrakes.js +5 -92
- package/dist/icons/IconTyre.js +5 -92
- package/dist/icons/IconVacancy.js +5 -87
- package/dist/icons/IconVolunteer.js +4 -81
- package/dist/icons/IconWhatsapp.js +4 -82
- package/dist/icons/IconXPlatform.js +4 -81
- package/dist/icons/IconZeroEffort.js +5 -86
- package/dist/icons/Logo.js +3 -108
- package/dist/input/Input.js +11 -134
- package/dist/input/Input.stories.js +18 -17
- package/dist/input-mask/InputMask.js +11 -158
- package/dist/input-mask/InputMask.stories.js +6 -5
- package/dist/input-mask/mask-trackers.js +5 -4
- package/dist/input-select/InputSelect.js +68 -390
- package/dist/input-select/InputSelect.stories.js +25 -98
- package/dist/popover/popover.js +4 -136
- package/dist/progress/Progress.js +2 -160
- package/dist/progress/Progress.stories.js +14 -13
- package/dist/radio/Radio.js +4 -227
- package/dist/scroll-area/scroll-area.js +5 -180
- package/dist/search-input-select/SearchInputSelect.js +69 -379
- package/dist/select/Select.js +29 -354
- package/dist/select/Select.stories.js +19 -55
- package/dist/skeleton/Skeleton.js +3 -71
- package/dist/skeleton/Skeleton.stories.js +7 -8
- package/dist/slider/Slider.js +5 -170
- package/dist/slider/Slider.stories.js +11 -12
- package/dist/stack/Stack.js +3 -127
- package/dist/stack/Stack.stories.js +7 -19
- package/dist/table/Table.js +10 -216
- package/dist/table/Table.stories.js +8 -84
- package/dist/tabs/Tabs.js +9 -198
- package/dist/tabs/Tabs.stories.js +13 -46
- package/dist/text/Text.js +6 -152
- package/dist/text/Text.stories.js +7 -44
- package/dist/toast/Toast.stories.js +14 -66
- package/dist/toast/ToastBox.js +29 -77
- package/dist/toast/index.js +1 -0
- package/dist/toast/sonner.js +6 -66
- package/dist/toggle/Toggle.js +7 -180
- package/dist/toggle/Toggle.stories.js +8 -10
- package/dist/tooltip/Tooltip.js +12 -169
- package/dist/tooltip/Tooltip.stories.js +13 -71
- package/dist/utils.js +2 -4
- package/dist/vstack/VStack.js +3 -127
- package/dist/vstack/VStack.stories.js +7 -19
- package/package.json +16 -16
|
@@ -1,332 +1,177 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
function _array_like_to_array(arr, len) {
|
|
3
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
4
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
5
|
-
return arr2;
|
|
6
|
-
}
|
|
7
|
-
function _array_with_holes(arr) {
|
|
8
|
-
if (Array.isArray(arr)) return arr;
|
|
9
|
-
}
|
|
10
|
-
function _define_property(obj, key, value) {
|
|
11
|
-
if (key in obj) {
|
|
12
|
-
Object.defineProperty(obj, key, {
|
|
13
|
-
value: value,
|
|
14
|
-
enumerable: true,
|
|
15
|
-
configurable: true,
|
|
16
|
-
writable: true
|
|
17
|
-
});
|
|
18
|
-
} else {
|
|
19
|
-
obj[key] = value;
|
|
20
|
-
}
|
|
21
|
-
return obj;
|
|
22
|
-
}
|
|
23
|
-
function _iterable_to_array_limit(arr, i) {
|
|
24
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
25
|
-
if (_i == null) return;
|
|
26
|
-
var _arr = [];
|
|
27
|
-
var _n = true;
|
|
28
|
-
var _d = false;
|
|
29
|
-
var _s, _e;
|
|
30
|
-
try {
|
|
31
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
32
|
-
_arr.push(_s.value);
|
|
33
|
-
if (i && _arr.length === i) break;
|
|
34
|
-
}
|
|
35
|
-
} catch (err) {
|
|
36
|
-
_d = true;
|
|
37
|
-
_e = err;
|
|
38
|
-
} finally{
|
|
39
|
-
try {
|
|
40
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
41
|
-
} finally{
|
|
42
|
-
if (_d) throw _e;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
return _arr;
|
|
46
|
-
}
|
|
47
|
-
function _non_iterable_rest() {
|
|
48
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
49
|
-
}
|
|
50
|
-
function _object_spread(target) {
|
|
51
|
-
for(var i = 1; i < arguments.length; i++){
|
|
52
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
53
|
-
var ownKeys = Object.keys(source);
|
|
54
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
55
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
56
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
57
|
-
}));
|
|
58
|
-
}
|
|
59
|
-
ownKeys.forEach(function(key) {
|
|
60
|
-
_define_property(target, key, source[key]);
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
return target;
|
|
64
|
-
}
|
|
65
|
-
function _object_without_properties(source, excluded) {
|
|
66
|
-
if (source == null) return {};
|
|
67
|
-
var target = {}, sourceKeys, key, i;
|
|
68
|
-
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
|
|
69
|
-
sourceKeys = Reflect.ownKeys(Object(source));
|
|
70
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
71
|
-
key = sourceKeys[i];
|
|
72
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
73
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
74
|
-
target[key] = source[key];
|
|
75
|
-
}
|
|
76
|
-
return target;
|
|
77
|
-
}
|
|
78
|
-
target = _object_without_properties_loose(source, excluded);
|
|
79
|
-
if (Object.getOwnPropertySymbols) {
|
|
80
|
-
sourceKeys = Object.getOwnPropertySymbols(source);
|
|
81
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
82
|
-
key = sourceKeys[i];
|
|
83
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
84
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
85
|
-
target[key] = source[key];
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
return target;
|
|
89
|
-
}
|
|
90
|
-
function _object_without_properties_loose(source, excluded) {
|
|
91
|
-
if (source == null) return {};
|
|
92
|
-
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
93
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
94
|
-
key = sourceKeys[i];
|
|
95
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
96
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
97
|
-
target[key] = source[key];
|
|
98
|
-
}
|
|
99
|
-
return target;
|
|
100
|
-
}
|
|
101
|
-
function _sliced_to_array(arr, i) {
|
|
102
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
103
|
-
}
|
|
104
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
105
|
-
if (!o) return;
|
|
106
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
107
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
108
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
109
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
110
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
111
|
-
}
|
|
112
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
113
3
|
import { useCallback, useState } from 'react';
|
|
114
4
|
import { useIsMobile } from '../hooks/use-media-query';
|
|
115
5
|
import DatePickerDrawer from './DatePickerDrawer';
|
|
116
6
|
import DatePickerPopover from './DatePickerPopover';
|
|
117
7
|
import { formatInputBy } from './utils';
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
]);
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
var isSameDate = function isSameDate(date1, date2) {
|
|
129
|
-
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
|
|
8
|
+
const DatePicker = ({ tileDisabled, onCancel, ...props }) => {
|
|
9
|
+
const { value, isRange, onChange, disableWeekends, error, onSelect } = props;
|
|
10
|
+
const isMobile = useIsMobile();
|
|
11
|
+
const [innerValue, setInnerValue] = useState(value);
|
|
12
|
+
const [inputValue, setInputValue] = useState(formatInputBy(value, isRange));
|
|
13
|
+
const [focused, setFocused] = useState(false);
|
|
14
|
+
const isSameDate = (date1, date2) => {
|
|
15
|
+
return (date1.getFullYear() === date2.getFullYear() &&
|
|
16
|
+
date1.getMonth() === date2.getMonth() &&
|
|
17
|
+
date1.getDate() === date2.getDate());
|
|
130
18
|
};
|
|
131
|
-
|
|
19
|
+
const handleSelect = (value) => {
|
|
132
20
|
if (isRange) {
|
|
133
21
|
// Handle range mode
|
|
134
|
-
|
|
135
|
-
if (Array.isArray(value) &&
|
|
22
|
+
const currentRange = Array.isArray(innerValue) ? innerValue : undefined;
|
|
23
|
+
if (Array.isArray(value) && value?.[0] && value[1]) {
|
|
136
24
|
// Both dates selected
|
|
137
|
-
|
|
138
|
-
|
|
25
|
+
const clickedStart = new Date(value[0]);
|
|
26
|
+
const clickedEnd = new Date(value[1]);
|
|
139
27
|
// Check if clicking the same start date (start date matches, end might be different)
|
|
140
|
-
if (
|
|
28
|
+
if (currentRange?.[0] &&
|
|
29
|
+
isSameDate(clickedStart, currentRange[0]) &&
|
|
30
|
+
currentRange[1] &&
|
|
31
|
+
!isSameDate(clickedEnd, currentRange[1])) {
|
|
141
32
|
// User clicked start date again - clear start, keep end
|
|
142
|
-
|
|
33
|
+
const newValue = [
|
|
143
34
|
undefined,
|
|
144
|
-
currentRange[1]
|
|
35
|
+
currentRange[1],
|
|
145
36
|
];
|
|
146
|
-
onSelect
|
|
37
|
+
onSelect?.(newValue);
|
|
147
38
|
setInnerValue(newValue);
|
|
148
39
|
setInputValue(formatInputBy(newValue, isRange));
|
|
149
40
|
return;
|
|
150
41
|
}
|
|
151
42
|
// Check if clicking the same end date (end date matches, start might be different)
|
|
152
|
-
if (
|
|
43
|
+
if (currentRange?.[1] &&
|
|
44
|
+
isSameDate(clickedEnd, currentRange[1]) &&
|
|
45
|
+
currentRange[0] &&
|
|
46
|
+
!isSameDate(clickedStart, currentRange[0])) {
|
|
153
47
|
// User clicked end date again - clear end, keep start
|
|
154
|
-
|
|
48
|
+
const newValue = [
|
|
155
49
|
currentRange[0],
|
|
156
|
-
undefined
|
|
50
|
+
undefined,
|
|
157
51
|
];
|
|
158
|
-
onSelect
|
|
159
|
-
setInnerValue(
|
|
160
|
-
setInputValue(formatInputBy(
|
|
52
|
+
onSelect?.(newValue);
|
|
53
|
+
setInnerValue(newValue);
|
|
54
|
+
setInputValue(formatInputBy(newValue, isRange));
|
|
161
55
|
return;
|
|
162
56
|
}
|
|
163
57
|
// Normal case: set both dates
|
|
164
|
-
onSelect
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
]);
|
|
168
|
-
setInnerValue([
|
|
169
|
-
new Date(value[0]),
|
|
170
|
-
new Date(value[1])
|
|
171
|
-
]);
|
|
172
|
-
setInputValue(formatInputBy([
|
|
173
|
-
value[0],
|
|
174
|
-
value[1]
|
|
175
|
-
], isRange));
|
|
58
|
+
onSelect?.([new Date(value[0]), new Date(value[1])]);
|
|
59
|
+
setInnerValue([new Date(value[0]), new Date(value[1])]);
|
|
60
|
+
setInputValue(formatInputBy([value[0], value[1]], isRange));
|
|
176
61
|
return;
|
|
177
62
|
}
|
|
178
63
|
// Single date selected in range mode
|
|
179
64
|
if (!Array.isArray(value) && value) {
|
|
180
|
-
|
|
65
|
+
const clickedDate = new Date(value);
|
|
181
66
|
// Check if start and end are the same date and clicking that date
|
|
182
|
-
if (
|
|
67
|
+
if (currentRange?.[0] &&
|
|
68
|
+
currentRange[1] &&
|
|
69
|
+
isSameDate(currentRange[0], currentRange[1]) &&
|
|
70
|
+
isSameDate(clickedDate, currentRange[0])) {
|
|
183
71
|
// Clear both dates
|
|
184
|
-
|
|
72
|
+
const newValue = [
|
|
73
|
+
undefined,
|
|
185
74
|
undefined,
|
|
186
|
-
undefined
|
|
187
75
|
];
|
|
188
|
-
onSelect
|
|
189
|
-
setInnerValue(
|
|
190
|
-
setInputValue(formatInputBy(
|
|
76
|
+
onSelect?.(newValue);
|
|
77
|
+
setInnerValue(newValue);
|
|
78
|
+
setInputValue(formatInputBy(newValue, isRange));
|
|
191
79
|
return;
|
|
192
80
|
}
|
|
193
81
|
// Check if clicking the same start date
|
|
194
|
-
if (
|
|
82
|
+
if (currentRange?.[0] && isSameDate(clickedDate, currentRange[0])) {
|
|
195
83
|
// Clear start date, keep end if it exists
|
|
196
|
-
|
|
197
|
-
undefined,
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
];
|
|
203
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValue3);
|
|
204
|
-
setInnerValue(newValue3);
|
|
205
|
-
setInputValue(formatInputBy(newValue3, isRange));
|
|
84
|
+
const newValue = currentRange[1]
|
|
85
|
+
? [undefined, currentRange[1]]
|
|
86
|
+
: [undefined, undefined];
|
|
87
|
+
onSelect?.(newValue);
|
|
88
|
+
setInnerValue(newValue);
|
|
89
|
+
setInputValue(formatInputBy(newValue, isRange));
|
|
206
90
|
return;
|
|
207
91
|
}
|
|
208
92
|
// Check if clicking the same end date
|
|
209
|
-
if (
|
|
93
|
+
if (currentRange?.[1] && isSameDate(clickedDate, currentRange[1])) {
|
|
210
94
|
// Clear end date, keep start if it exists
|
|
211
|
-
|
|
212
|
-
currentRange[0],
|
|
213
|
-
undefined
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
];
|
|
218
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect(newValue4);
|
|
219
|
-
setInnerValue(newValue4);
|
|
220
|
-
setInputValue(formatInputBy(newValue4, isRange));
|
|
95
|
+
const newValue = currentRange[0]
|
|
96
|
+
? [currentRange[0], undefined]
|
|
97
|
+
: [undefined, undefined];
|
|
98
|
+
onSelect?.(newValue);
|
|
99
|
+
setInnerValue(newValue);
|
|
100
|
+
setInputValue(formatInputBy(newValue, isRange));
|
|
221
101
|
return;
|
|
222
102
|
}
|
|
223
103
|
// Normal case: set start date (or both if no range exists)
|
|
224
|
-
if (
|
|
104
|
+
if (currentRange?.[0] && !currentRange[1]) {
|
|
225
105
|
// Start exists but no end - this click sets the end
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
end
|
|
231
|
-
] : [
|
|
232
|
-
end,
|
|
233
|
-
start
|
|
234
|
-
];
|
|
235
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect(finalRange);
|
|
106
|
+
const start = currentRange[0];
|
|
107
|
+
const end = clickedDate;
|
|
108
|
+
const finalRange = start <= end ? [start, end] : [end, start];
|
|
109
|
+
onSelect?.(finalRange);
|
|
236
110
|
setInnerValue(finalRange);
|
|
237
111
|
setInputValue(formatInputBy(finalRange, isRange));
|
|
238
112
|
return;
|
|
239
113
|
}
|
|
240
114
|
// No range or both dates exist - set as new start
|
|
241
|
-
onSelect
|
|
242
|
-
|
|
243
|
-
clickedDate
|
|
244
|
-
]);
|
|
245
|
-
setInnerValue([
|
|
246
|
-
clickedDate,
|
|
247
|
-
clickedDate
|
|
248
|
-
]);
|
|
115
|
+
onSelect?.([clickedDate, clickedDate]);
|
|
116
|
+
setInnerValue([clickedDate, clickedDate]);
|
|
249
117
|
setInputValue(formatInputBy(clickedDate, isRange));
|
|
250
118
|
return;
|
|
251
119
|
}
|
|
252
120
|
}
|
|
253
121
|
if (!isRange && !Array.isArray(value) && value) {
|
|
254
122
|
// Handle single date mode - toggle if same date clicked
|
|
255
|
-
|
|
256
|
-
if (innerValue &&
|
|
123
|
+
const clickedDate = new Date(value);
|
|
124
|
+
if (innerValue &&
|
|
125
|
+
!Array.isArray(innerValue) &&
|
|
126
|
+
isSameDate(clickedDate, innerValue)) {
|
|
257
127
|
setInnerValue(undefined);
|
|
258
128
|
setInputValue(formatInputBy(undefined, isRange));
|
|
259
|
-
onSelect
|
|
129
|
+
onSelect?.(undefined);
|
|
260
130
|
return;
|
|
261
131
|
}
|
|
262
132
|
// Normal case: set the date
|
|
263
|
-
onSelect
|
|
133
|
+
onSelect?.(new Date(value));
|
|
264
134
|
setInnerValue(new Date(value));
|
|
265
135
|
setInputValue(formatInputBy(value, isRange));
|
|
266
136
|
return;
|
|
267
137
|
}
|
|
268
138
|
};
|
|
269
|
-
|
|
139
|
+
const handleCancel = () => {
|
|
270
140
|
setFocused(false);
|
|
271
141
|
setInnerValue(value);
|
|
272
142
|
setInputValue(formatInputBy(value, isRange));
|
|
273
|
-
onCancel
|
|
143
|
+
onCancel?.();
|
|
274
144
|
};
|
|
275
|
-
|
|
276
|
-
if (isRange &&
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
]);
|
|
145
|
+
const handleApply = () => {
|
|
146
|
+
if (isRange &&
|
|
147
|
+
Array.isArray(innerValue) &&
|
|
148
|
+
innerValue?.[0] &&
|
|
149
|
+
innerValue[1]) {
|
|
150
|
+
onChange?.([innerValue[0], innerValue[1]]);
|
|
281
151
|
setFocused(false);
|
|
282
152
|
return;
|
|
283
153
|
}
|
|
284
154
|
if (!isRange && !Array.isArray(innerValue) && innerValue) {
|
|
285
|
-
onChange
|
|
155
|
+
onChange?.(innerValue);
|
|
286
156
|
setFocused(false);
|
|
287
157
|
return;
|
|
288
158
|
}
|
|
289
159
|
};
|
|
290
|
-
|
|
160
|
+
const weekendTiles = useCallback((args) => {
|
|
291
161
|
if (args.view === 'month') {
|
|
292
|
-
|
|
162
|
+
const day = args.date.getDay();
|
|
293
163
|
return day === 0 || day === 6;
|
|
294
164
|
}
|
|
295
165
|
return false;
|
|
296
166
|
}, []);
|
|
297
|
-
|
|
298
|
-
if (disableWeekends && weekendTiles(args))
|
|
299
|
-
|
|
167
|
+
const combinedTileDisabled = useCallback((args) => {
|
|
168
|
+
if (disableWeekends && weekendTiles(args))
|
|
169
|
+
return true;
|
|
170
|
+
if (typeof tileDisabled === 'function')
|
|
171
|
+
return tileDisabled(args);
|
|
300
172
|
return false;
|
|
301
|
-
}, [
|
|
302
|
-
|
|
303
|
-
tileDisabled,
|
|
304
|
-
weekendTiles
|
|
305
|
-
]);
|
|
306
|
-
return isMobile ? /*#__PURE__*/ _jsx(DatePickerDrawer, _object_spread({
|
|
307
|
-
innerValue: innerValue,
|
|
308
|
-
setInnerValue: setInnerValue,
|
|
309
|
-
inputValue: inputValue,
|
|
310
|
-
setInputValue: setInputValue,
|
|
311
|
-
focused: focused,
|
|
312
|
-
setFocused: setFocused,
|
|
313
|
-
handleSelect: handleSelect,
|
|
314
|
-
handleCancel: handleCancel,
|
|
315
|
-
handleApply: handleApply,
|
|
316
|
-
tileDisabled: combinedTileDisabled,
|
|
317
|
-
error: error
|
|
318
|
-
}, props)) : /*#__PURE__*/ _jsx(DatePickerPopover, _object_spread({
|
|
319
|
-
innerValue: innerValue,
|
|
320
|
-
setInnerValue: setInnerValue,
|
|
321
|
-
inputValue: inputValue,
|
|
322
|
-
setInputValue: setInputValue,
|
|
323
|
-
focused: focused,
|
|
324
|
-
setFocused: setFocused,
|
|
325
|
-
handleSelect: handleSelect,
|
|
326
|
-
handleCancel: handleCancel,
|
|
327
|
-
handleApply: handleApply,
|
|
328
|
-
tileDisabled: combinedTileDisabled,
|
|
329
|
-
error: error
|
|
330
|
-
}, props));
|
|
173
|
+
}, [disableWeekends, tileDisabled, weekendTiles]);
|
|
174
|
+
return isMobile ? (_jsx(DatePickerDrawer, { innerValue: innerValue, setInnerValue: setInnerValue, inputValue: inputValue, setInputValue: setInputValue, focused: focused, setFocused: setFocused, handleSelect: handleSelect, handleCancel: handleCancel, handleApply: handleApply, tileDisabled: combinedTileDisabled, error: error, ...props })) : (_jsx(DatePickerPopover, { innerValue: innerValue, setInnerValue: setInnerValue, inputValue: inputValue, setInputValue: setInputValue, focused: focused, setFocused: setFocused, handleSelect: handleSelect, handleCancel: handleCancel, handleApply: handleApply, tileDisabled: combinedTileDisabled, error: error, ...props }));
|
|
331
175
|
};
|
|
332
176
|
export default DatePicker;
|
|
177
|
+
//# sourceMappingURL=DatePicker.js.map
|
|
@@ -1,183 +1,79 @@
|
|
|
1
|
-
function _array_like_to_array(arr, len) {
|
|
2
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
-
return arr2;
|
|
5
|
-
}
|
|
6
|
-
function _array_with_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return arr;
|
|
8
|
-
}
|
|
9
|
-
function _iterable_to_array_limit(arr, i) {
|
|
10
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
11
|
-
if (_i == null) return;
|
|
12
|
-
var _arr = [];
|
|
13
|
-
var _n = true;
|
|
14
|
-
var _d = false;
|
|
15
|
-
var _s, _e;
|
|
16
|
-
try {
|
|
17
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
18
|
-
_arr.push(_s.value);
|
|
19
|
-
if (i && _arr.length === i) break;
|
|
20
|
-
}
|
|
21
|
-
} catch (err) {
|
|
22
|
-
_d = true;
|
|
23
|
-
_e = err;
|
|
24
|
-
} finally{
|
|
25
|
-
try {
|
|
26
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
27
|
-
} finally{
|
|
28
|
-
if (_d) throw _e;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
return _arr;
|
|
32
|
-
}
|
|
33
|
-
function _non_iterable_rest() {
|
|
34
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
35
|
-
}
|
|
36
|
-
function _sliced_to_array(arr, i) {
|
|
37
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
38
|
-
}
|
|
39
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
40
|
-
if (!o) return;
|
|
41
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
42
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
43
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
44
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
45
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
46
|
-
}
|
|
47
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
48
2
|
import { useState } from 'react';
|
|
49
3
|
import DatePicker from './DatePicker.js';
|
|
50
|
-
|
|
4
|
+
const meta = {
|
|
51
5
|
component: DatePicker,
|
|
52
6
|
argTypes: {
|
|
53
7
|
locale: {
|
|
54
|
-
options: [
|
|
55
|
-
|
|
56
|
-
'ms',
|
|
57
|
-
'zh'
|
|
58
|
-
],
|
|
59
|
-
control: {
|
|
60
|
-
type: 'select'
|
|
61
|
-
}
|
|
8
|
+
options: ['en', 'ms', 'zh'],
|
|
9
|
+
control: { type: 'select' },
|
|
62
10
|
},
|
|
63
11
|
calendarType: {
|
|
64
|
-
options: [
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
'hebrew'
|
|
69
|
-
],
|
|
70
|
-
control: {
|
|
71
|
-
type: 'select'
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
12
|
+
options: ['iso8601', 'gregory', 'islamic', 'hebrew'],
|
|
13
|
+
control: { type: 'select' },
|
|
14
|
+
},
|
|
15
|
+
},
|
|
75
16
|
};
|
|
76
17
|
export default meta;
|
|
77
|
-
export
|
|
78
|
-
render:
|
|
79
|
-
|
|
80
|
-
return
|
|
81
|
-
|
|
82
|
-
value: date,
|
|
83
|
-
onChange: setDate
|
|
84
|
-
});
|
|
85
|
-
}
|
|
18
|
+
export const Standard = {
|
|
19
|
+
render: () => {
|
|
20
|
+
const [date, setDate] = useState(new Date());
|
|
21
|
+
return (_jsx(DatePicker, { htmlFor: "standard-calendar", value: date, onChange: setDate }));
|
|
22
|
+
},
|
|
86
23
|
};
|
|
87
|
-
export
|
|
88
|
-
render:
|
|
89
|
-
|
|
90
|
-
return
|
|
91
|
-
|
|
92
|
-
locale: "ms",
|
|
93
|
-
value: date,
|
|
94
|
-
onChange: setDate
|
|
95
|
-
});
|
|
96
|
-
}
|
|
24
|
+
export const Locale = {
|
|
25
|
+
render: () => {
|
|
26
|
+
const [date, setDate] = useState();
|
|
27
|
+
return (_jsx(DatePicker, { htmlFor: "standard-calendar", locale: "ms", value: date, onChange: setDate }));
|
|
28
|
+
},
|
|
97
29
|
};
|
|
98
|
-
export
|
|
99
|
-
render:
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
return
|
|
103
|
-
htmlFor: "ranged-calendar",
|
|
104
|
-
isRange: true,
|
|
105
|
-
value: dates,
|
|
106
|
-
onChange: function onChange(dates) {
|
|
30
|
+
export const Ranged = {
|
|
31
|
+
render: (_args) => {
|
|
32
|
+
const [dates, setDates] = useState();
|
|
33
|
+
const [error, setError] = useState('');
|
|
34
|
+
return (_jsx(DatePicker, { htmlFor: "ranged-calendar", isRange: true, value: dates, onChange: (dates) => {
|
|
107
35
|
setDates(dates);
|
|
108
36
|
setError('');
|
|
109
|
-
},
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
error: error
|
|
115
|
-
}
|
|
116
|
-
});
|
|
117
|
-
}
|
|
37
|
+
}, onError: (type) => type === 'start-gte-end' &&
|
|
38
|
+
setError('Start Date must be earlier than End Date'), inputProps: {
|
|
39
|
+
error: error,
|
|
40
|
+
} }));
|
|
41
|
+
},
|
|
118
42
|
};
|
|
119
|
-
export
|
|
120
|
-
render:
|
|
121
|
-
|
|
122
|
-
return
|
|
123
|
-
|
|
124
|
-
minDate: new Date(),
|
|
125
|
-
value: date,
|
|
126
|
-
onChange: setDate
|
|
127
|
-
});
|
|
128
|
-
}
|
|
43
|
+
export const MinDate = {
|
|
44
|
+
render: () => {
|
|
45
|
+
const [date, setDate] = useState();
|
|
46
|
+
return (_jsx(DatePicker, { htmlFor: "mindate-calendar", minDate: new Date(), value: date, onChange: setDate }));
|
|
47
|
+
},
|
|
129
48
|
};
|
|
130
|
-
export
|
|
131
|
-
render:
|
|
132
|
-
|
|
133
|
-
return
|
|
134
|
-
|
|
135
|
-
maxDate: new Date(),
|
|
136
|
-
value: date,
|
|
137
|
-
onChange: setDate
|
|
138
|
-
});
|
|
139
|
-
}
|
|
49
|
+
export const MaxDate = {
|
|
50
|
+
render: () => {
|
|
51
|
+
const [date, setDate] = useState();
|
|
52
|
+
return (_jsx(DatePicker, { htmlFor: "maxdate-calendar", maxDate: new Date(), value: date, onChange: setDate }));
|
|
53
|
+
},
|
|
140
54
|
};
|
|
141
|
-
export
|
|
142
|
-
render:
|
|
143
|
-
|
|
144
|
-
return
|
|
145
|
-
|
|
146
|
-
calendarType: "islamic",
|
|
147
|
-
value: date,
|
|
148
|
-
onChange: setDate
|
|
149
|
-
});
|
|
150
|
-
}
|
|
55
|
+
export const CalendarType = {
|
|
56
|
+
render: () => {
|
|
57
|
+
const [date, setDate] = useState();
|
|
58
|
+
return (_jsx(DatePicker, { htmlFor: "islamic-calendar", calendarType: "islamic", value: date, onChange: setDate }));
|
|
59
|
+
},
|
|
151
60
|
};
|
|
152
|
-
export
|
|
153
|
-
render:
|
|
154
|
-
|
|
155
|
-
return
|
|
156
|
-
|
|
157
|
-
isDisabled: true,
|
|
158
|
-
value: date,
|
|
159
|
-
onChange: setDate
|
|
160
|
-
});
|
|
161
|
-
}
|
|
61
|
+
export const Disabled = {
|
|
62
|
+
render: () => {
|
|
63
|
+
const [date, setDate] = useState();
|
|
64
|
+
return (_jsx(DatePicker, { htmlFor: "disabled-calendar", isDisabled: true, value: date, onChange: setDate }));
|
|
65
|
+
},
|
|
162
66
|
};
|
|
163
|
-
export
|
|
164
|
-
render:
|
|
165
|
-
|
|
166
|
-
return
|
|
167
|
-
|
|
168
|
-
value: date,
|
|
169
|
-
onChange: setDate,
|
|
170
|
-
disableWeekends: true
|
|
171
|
-
});
|
|
172
|
-
}
|
|
67
|
+
export const DisableWeekends = {
|
|
68
|
+
render: () => {
|
|
69
|
+
const [date, setDate] = useState();
|
|
70
|
+
return (_jsx(DatePicker, { htmlFor: "no-date-calendar", value: date, onChange: setDate, disableWeekends: true }));
|
|
71
|
+
},
|
|
173
72
|
};
|
|
174
|
-
export
|
|
175
|
-
render:
|
|
176
|
-
|
|
177
|
-
return
|
|
178
|
-
|
|
179
|
-
value: date,
|
|
180
|
-
onChange: setDate
|
|
181
|
-
});
|
|
182
|
-
}
|
|
73
|
+
export const NoDate = {
|
|
74
|
+
render: () => {
|
|
75
|
+
const [date, setDate] = useState();
|
|
76
|
+
return (_jsx(DatePicker, { htmlFor: "no-date-calendar", value: date, onChange: setDate }));
|
|
77
|
+
},
|
|
183
78
|
};
|
|
79
|
+
//# sourceMappingURL=DatePicker.stories.js.map
|