@driveflux/beam 3.0.19 → 3.0.20
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 +203 -7
- package/dist/accordion/Accordion.stories.js +31 -11
- package/dist/alert/Alert.js +193 -19
- package/dist/alert/Alert.stories.js +50 -15
- package/dist/animations/LoadingAnimation.js +34 -21
- package/dist/badge/Badge.js +105 -7
- package/dist/badge/Badge.stories.js +28 -7
- package/dist/box/Box.js +151 -3
- package/dist/box/Box.stories.js +8 -7
- package/dist/breadcrumbs/Breadcrumbs.js +351 -26
- package/dist/breadcrumbs/Breadcrumbs.stories.js +51 -27
- package/dist/button/Button.js +190 -12
- package/dist/button/Button.stories.js +35 -7
- package/dist/button/TextButton.js +168 -9
- package/dist/card/Card.js +188 -7
- package/dist/card/Card.stories.js +10 -7
- package/dist/carousel/Carousel.js +308 -58
- package/dist/carousel/Carousel.stories.js +39 -7
- package/dist/carousel/CarouselButton.js +132 -7
- package/dist/center/Center.js +127 -3
- package/dist/center/Center.stories.js +19 -7
- package/dist/checkbox/Checkbox.js +188 -4
- package/dist/checkbox/Checkbox.stories.js +10 -8
- package/dist/chip/Chip.js +168 -3
- package/dist/chip/Chip.stories.js +19 -7
- package/dist/circular-progress/CircularProgress.js +159 -11
- package/dist/circular-progress/CircularProgress.stories.js +54 -14
- package/dist/command/command.js +249 -13
- package/dist/datepicker/DatePicker.js +245 -90
- package/dist/datepicker/DatePicker.stories.js +162 -58
- package/dist/datepicker/DatePickerDrawer.js +115 -17
- package/dist/datepicker/DatePickerPopover.js +208 -35
- package/dist/datepicker/constants.js +3 -4
- package/dist/datepicker/utils.js +4 -11
- package/dist/dialog/index.js +253 -12
- package/dist/divider/Divider.js +127 -3
- package/dist/divider/Divider.stories.js +13 -7
- package/dist/drawer/index.js +230 -12
- package/dist/dropdown/Dropdown.js +297 -26
- package/dist/dropdown/Dropdown.stories.js +109 -22
- package/dist/field-wrapper/FieldWrapper.js +203 -3
- package/dist/field-wrapper/FieldWrapper.stories.js +124 -28
- package/dist/flex/Flex.js +127 -3
- package/dist/flex/Flex.stories.js +19 -7
- package/dist/grid/Grid.js +127 -3
- package/dist/grid/Grid.stories.js +28 -7
- package/dist/hooks/use-breakpoint-value.js +77 -14
- package/dist/hooks/use-media-query.js +61 -12
- package/dist/hstack/HStack.js +127 -3
- package/dist/hstack/HStack.stories.js +19 -7
- package/dist/icons/FluxLogo.js +222 -9
- package/dist/icons/FluxLogoTable.js +118 -5
- package/dist/icons/Icon.js +117 -7
- package/dist/icons/Icon.stories.js +12 -7
- package/dist/icons/Icon24Hours.js +92 -5
- package/dist/icons/IconAcceleration.js +81 -4
- package/dist/icons/IconAccount.js +81 -4
- package/dist/icons/IconApplicant.js +87 -5
- package/dist/icons/IconArrow.js +87 -6
- package/dist/icons/IconArrowBack.js +81 -4
- package/dist/icons/IconArrowForward.js +81 -4
- package/dist/icons/IconArrowTopLeft.js +79 -4
- package/dist/icons/IconBluesharkProductGuide.js +89 -5
- package/dist/icons/IconBolt.js +81 -4
- package/dist/icons/IconBriefcase.js +81 -4
- package/dist/icons/IconBulb.js +81 -4
- package/dist/icons/IconCalendar.js +81 -4
- package/dist/icons/IconCalendarArrowBack.js +81 -4
- package/dist/icons/IconCalendarArrowForward.js +81 -4
- package/dist/icons/IconCalendarDoubleArrowBack.js +81 -4
- package/dist/icons/IconCalendarDoubleArrowForward.js +81 -4
- package/dist/icons/IconCancel.js +86 -5
- package/dist/icons/IconCancelMark.js +81 -4
- package/dist/icons/IconCarSUV.js +81 -4
- package/dist/icons/IconCarSedan.js +156 -7
- package/dist/icons/IconChain.js +88 -5
- package/dist/icons/IconCheckmark.js +81 -4
- package/dist/icons/IconChevronRight.js +81 -4
- package/dist/icons/IconCircle.js +123 -11
- package/dist/icons/IconCircleCheckmark.js +86 -5
- package/dist/icons/IconCircleError.js +81 -4
- package/dist/icons/IconCircleExclamation.js +113 -6
- package/dist/icons/IconCircleMark.js +87 -5
- package/dist/icons/IconCircleOutline.js +148 -5
- package/dist/icons/IconClock.js +89 -5
- package/dist/icons/IconClose.js +81 -4
- package/dist/icons/IconCollapseAll.js +103 -5
- package/dist/icons/IconConcierge.js +88 -5
- package/dist/icons/IconConciergeService.js +96 -5
- package/dist/icons/IconCreditCard.js +87 -5
- package/dist/icons/IconDash.js +81 -4
- package/dist/icons/IconDeliver.js +81 -4
- package/dist/icons/IconDelivery.js +96 -5
- package/dist/icons/IconDetails.js +81 -4
- package/dist/icons/IconDot.js +96 -6
- package/dist/icons/IconDownload.js +88 -5
- package/dist/icons/IconEVCharging.js +88 -5
- package/dist/icons/IconElectricCarFuel.js +89 -5
- package/dist/icons/IconEllipsis.js +87 -5
- package/dist/icons/IconEnvelope.js +81 -4
- package/dist/icons/IconExpandAll.js +103 -5
- package/dist/icons/IconEye.js +88 -5
- package/dist/icons/IconFacebook.js +103 -6
- package/dist/icons/IconFilter.js +92 -5
- package/dist/icons/IconFlagMalaysia.js +150 -5
- package/dist/icons/IconGiveKey.js +88 -5
- package/dist/icons/IconGlobe.js +79 -4
- package/dist/icons/IconGoogle.js +96 -5
- package/dist/icons/IconHome.js +87 -5
- package/dist/icons/IconHostAdvertise.js +81 -4
- package/dist/icons/IconHostCar.js +84 -4
- package/dist/icons/IconHostCash.js +100 -5
- package/dist/icons/IconHostHandle.js +79 -4
- package/dist/icons/IconHostLocation.js +79 -4
- package/dist/icons/IconHostPayment.js +100 -5
- package/dist/icons/IconHostService.js +88 -5
- package/dist/icons/IconHotDeals.js +81 -4
- package/dist/icons/IconInfo.js +86 -5
- package/dist/icons/IconInstagram.js +81 -4
- package/dist/icons/IconInsurance.js +108 -5
- package/dist/icons/IconInternet.js +82 -4
- package/dist/icons/IconInventory.js +87 -5
- package/dist/icons/IconLaurel.js +110 -5
- package/dist/icons/IconLinkedIn.js +81 -4
- package/dist/icons/IconLoading.js +87 -4
- package/dist/icons/IconLocation.js +89 -5
- package/dist/icons/IconLock.js +82 -4
- package/dist/icons/IconLogistics.js +81 -4
- package/dist/icons/IconMail.js +103 -5
- package/dist/icons/IconMember.js +87 -5
- package/dist/icons/IconMobilePen.js +92 -5
- package/dist/icons/IconMotorcycleMoped.js +87 -5
- package/dist/icons/IconNoCost.js +101 -5
- package/dist/icons/IconPDF.js +89 -5
- package/dist/icons/IconPencil.js +79 -4
- package/dist/icons/IconPhone.js +79 -4
- package/dist/icons/IconPlus.js +81 -4
- package/dist/icons/IconPricing.js +81 -4
- package/dist/icons/IconProtected.js +80 -4
- package/dist/icons/IconPsychology.js +81 -4
- package/dist/icons/IconQuestionTooltip.js +137 -4
- package/dist/icons/IconQuote.js +81 -4
- package/dist/icons/IconRate.js +80 -4
- package/dist/icons/IconRegister.js +108 -5
- package/dist/icons/IconReport.js +98 -6
- package/dist/icons/IconReturn.js +81 -4
- package/dist/icons/IconSearch.js +79 -4
- package/dist/icons/IconSecure.js +80 -4
- package/dist/icons/IconSecurity.js +82 -4
- package/dist/icons/IconSedanOutline.js +168 -5
- package/dist/icons/IconSelectArrow.js +87 -6
- package/dist/icons/IconSort.js +88 -5
- package/dist/icons/IconSortListed.js +104 -5
- package/dist/icons/IconSortPriceAscending.js +92 -5
- package/dist/icons/IconSortPriceDescending.js +92 -5
- package/dist/icons/IconSortYear.js +88 -5
- package/dist/icons/IconSpan.js +80 -4
- package/dist/icons/IconSpeaker.js +88 -4
- package/dist/icons/IconSpecialCar.js +104 -5
- package/dist/icons/IconStar.js +101 -7
- package/dist/icons/IconStockPhoto.js +104 -5
- package/dist/icons/IconSubscription.js +122 -6
- package/dist/icons/IconSubscriptions.js +122 -6
- package/dist/icons/IconSwap.js +88 -5
- package/dist/icons/IconTax.js +81 -4
- package/dist/icons/IconThinArrow.js +87 -6
- package/dist/icons/IconThumbsdown.js +87 -5
- package/dist/icons/IconThumbsup.js +87 -5
- package/dist/icons/IconTool.js +81 -4
- package/dist/icons/IconTooltip.js +137 -4
- package/dist/icons/IconTrash.js +81 -4
- package/dist/icons/IconTriangleExclamation.js +81 -4
- package/dist/icons/IconTyersBrakes.js +92 -5
- package/dist/icons/IconTyre.js +92 -5
- package/dist/icons/IconVacancy.js +87 -5
- package/dist/icons/IconVolunteer.js +81 -4
- package/dist/icons/IconWhatsapp.js +82 -4
- package/dist/icons/IconXPlatform.js +81 -4
- package/dist/icons/IconZeroEffort.js +86 -5
- package/dist/icons/Logo.js +108 -3
- package/dist/input/Input.js +134 -11
- package/dist/input/Input.stories.js +17 -18
- package/dist/input-mask/InputMask.js +158 -11
- package/dist/input-mask/InputMask.stories.js +5 -6
- package/dist/input-mask/mask-trackers.js +4 -5
- package/dist/input-select/InputSelect.js +390 -68
- package/dist/input-select/InputSelect.stories.js +98 -25
- package/dist/popover/popover.js +136 -4
- package/dist/progress/Progress.js +160 -2
- package/dist/progress/Progress.stories.js +13 -14
- package/dist/radio/Radio.js +227 -4
- package/dist/scroll-area/scroll-area.js +180 -5
- package/dist/search-input-select/SearchInputSelect.js +379 -69
- package/dist/select/Select.js +354 -29
- package/dist/select/Select.stories.js +55 -19
- package/dist/skeleton/Skeleton.js +71 -3
- package/dist/skeleton/Skeleton.stories.js +8 -7
- package/dist/slider/Slider.js +170 -5
- package/dist/slider/Slider.stories.js +12 -11
- package/dist/stack/Stack.js +127 -3
- package/dist/stack/Stack.stories.js +19 -7
- package/dist/table/Table.js +216 -10
- package/dist/table/Table.stories.js +84 -8
- package/dist/tabs/Tabs.js +198 -9
- package/dist/tabs/Tabs.stories.js +46 -13
- package/dist/text/Text.js +152 -6
- package/dist/text/Text.stories.js +44 -7
- package/dist/toast/Toast.stories.js +66 -14
- package/dist/toast/ToastBox.js +77 -29
- package/dist/toast/index.js +0 -1
- package/dist/toast/sonner.js +66 -6
- package/dist/toggle/Toggle.js +180 -7
- package/dist/toggle/Toggle.stories.js +10 -8
- package/dist/tooltip/Tooltip.js +169 -12
- package/dist/tooltip/Tooltip.stories.js +71 -13
- package/dist/utils.js +4 -2
- package/dist/vstack/VStack.js +127 -3
- package/dist/vstack/VStack.stories.js +19 -7
- package/package.json +11 -11
|
@@ -5,7 +5,7 @@ import { useCallback } from 'react';
|
|
|
5
5
|
import Calendar from 'react-calendar';
|
|
6
6
|
import Box from '../box/Box';
|
|
7
7
|
import Button from '../button/Button';
|
|
8
|
-
import { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger
|
|
8
|
+
import { Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '../drawer';
|
|
9
9
|
import FieldWrapper from '../field-wrapper/FieldWrapper';
|
|
10
10
|
import IconCalendar from '../icons/IconCalendar';
|
|
11
11
|
import IconCalendarArrowBack from '../icons/IconCalendarArrowBack';
|
|
@@ -17,27 +17,125 @@ import Stack from '../stack/Stack';
|
|
|
17
17
|
import Text from '../text/Text';
|
|
18
18
|
import { cn } from '../utils';
|
|
19
19
|
import { formatInputBy } from './utils';
|
|
20
|
-
|
|
21
|
-
// non-customized props
|
|
22
|
-
innerValue, setInnerValue, focused, setFocused, handleSelect, handleCancel, handleApply
|
|
23
|
-
|
|
20
|
+
var DatePickerDrawer = function DatePickerDrawer(param) {
|
|
21
|
+
var _param_htmlFor = param.htmlFor, htmlFor = _param_htmlFor === void 0 ? 'datepicker' : _param_htmlFor, _param_locale = param.locale, locale = _param_locale === void 0 ? 'en' : _param_locale, isRange = param.isRange, providedValue = param.value, minDate = param.minDate, maxDate = param.maxDate, placeholder = param.placeholder, calendarType = param.calendarType, isDisabled = param.isDisabled, inputProps = param.inputProps, drawerTitle = param.drawerTitle, cancelButton = param.cancelButton, applyButton = param.applyButton, tileDisabled = param.tileDisabled, tileClassName = param.tileClassName, error = param.error, // non-customized props
|
|
22
|
+
innerValue = param.innerValue, setInnerValue = param.setInnerValue, focused = param.focused, setFocused = param.setFocused, handleSelect = param.handleSelect, handleCancel = param.handleCancel, handleApply = param.handleApply;
|
|
23
|
+
var handleOpenChange = function handleOpenChange(open) {
|
|
24
24
|
setFocused(open);
|
|
25
25
|
if (!open) {
|
|
26
26
|
handleCancel();
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
innerValue.length !== 2 ||
|
|
33
|
-
!innerValue[0] ||
|
|
34
|
-
!innerValue[1]));
|
|
35
|
-
const finalTileClassName = useCallback((args) => {
|
|
36
|
-
const additionalClassNames = tileClassName?.(args);
|
|
29
|
+
var isApplyDisabled = !innerValue || isRange && (!Array.isArray(innerValue) || innerValue.length !== 2 || !innerValue[0] || !innerValue[1]);
|
|
30
|
+
var finalTileClassName = useCallback(function(args) {
|
|
31
|
+
var additionalClassNames = tileClassName === null || tileClassName === void 0 ? void 0 : tileClassName(args);
|
|
37
32
|
return cn('flex item-center justify-center text-center', additionalClassNames);
|
|
38
|
-
}, [
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
}, [
|
|
34
|
+
tileClassName
|
|
35
|
+
]);
|
|
36
|
+
return /*#__PURE__*/ _jsx(FieldWrapper, {
|
|
37
|
+
htmlFor: htmlFor,
|
|
38
|
+
label: inputProps === null || inputProps === void 0 ? void 0 : inputProps.label,
|
|
39
|
+
error: error,
|
|
40
|
+
className: 'w-full',
|
|
41
|
+
children: /*#__PURE__*/ _jsxs(Drawer, {
|
|
42
|
+
open: focused,
|
|
43
|
+
onOpenChange: handleOpenChange,
|
|
44
|
+
children: [
|
|
45
|
+
/*#__PURE__*/ _jsx(DrawerTrigger, {
|
|
46
|
+
asChild: true,
|
|
47
|
+
disabled: isDisabled,
|
|
48
|
+
className: 'w-full',
|
|
49
|
+
children: /*#__PURE__*/ _jsxs(Box, {
|
|
50
|
+
className: cn('flex flex-row p-3 border border-primary2 cursor-pointer hover:border-primary4 rounded-lg', isDisabled && 'bg-primary2', error && 'border-alert4 hover:border-alert4 focus-within:border-alert4'),
|
|
51
|
+
children: [
|
|
52
|
+
innerValue ? /*#__PURE__*/ _jsx(Text, {
|
|
53
|
+
className: "flex-1",
|
|
54
|
+
children: formatInputBy(innerValue, isRange)
|
|
55
|
+
}) : /*#__PURE__*/ _jsx(Text, {
|
|
56
|
+
className: 'flex-1 text-primary2',
|
|
57
|
+
children: placeholder || 'DD-MM-YYYY'
|
|
58
|
+
}),
|
|
59
|
+
/*#__PURE__*/ _jsx(IconCalendar, {
|
|
60
|
+
size: '16px'
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
})
|
|
64
|
+
}),
|
|
65
|
+
/*#__PURE__*/ _jsxs(DrawerContent, {
|
|
66
|
+
hideGrabber: true,
|
|
67
|
+
className: 'datepicker-content flex flex-col items-stretch',
|
|
68
|
+
children: [
|
|
69
|
+
/*#__PURE__*/ _jsxs(DrawerHeader, {
|
|
70
|
+
className: 'flex items-center justify-between py-4 px-6',
|
|
71
|
+
children: [
|
|
72
|
+
/*#__PURE__*/ _jsx(DrawerTitle, {
|
|
73
|
+
children: /*#__PURE__*/ _jsx(Text, {
|
|
74
|
+
className: 'text-xl font-bold uppercase',
|
|
75
|
+
children: drawerTitle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.label) || 'date'
|
|
76
|
+
})
|
|
77
|
+
}),
|
|
78
|
+
/*#__PURE__*/ _jsx(DrawerClose, {
|
|
79
|
+
className: 'text-primary3',
|
|
80
|
+
children: /*#__PURE__*/ _jsx(IconClose, {
|
|
81
|
+
className: 'w-4 h-4 lg:w-6 lg:h-6'
|
|
82
|
+
})
|
|
83
|
+
})
|
|
84
|
+
]
|
|
85
|
+
}),
|
|
86
|
+
/*#__PURE__*/ _jsx(Calendar, {
|
|
87
|
+
value: innerValue,
|
|
88
|
+
onChange: handleSelect,
|
|
89
|
+
locale: locale || 'en',
|
|
90
|
+
selectRange: isRange,
|
|
91
|
+
minDate: minDate,
|
|
92
|
+
maxDate: maxDate,
|
|
93
|
+
calendarType: calendarType,
|
|
94
|
+
formatShortWeekday: function formatShortWeekday(_, date) {
|
|
95
|
+
return format(date, 'EEEEE');
|
|
96
|
+
},
|
|
97
|
+
className: 'p-6',
|
|
98
|
+
tileDisabled: tileDisabled,
|
|
99
|
+
tileClassName: finalTileClassName,
|
|
100
|
+
prevLabel: /*#__PURE__*/ _jsx(IconCalendarArrowBack, {
|
|
101
|
+
size: 24
|
|
102
|
+
}),
|
|
103
|
+
nextLabel: /*#__PURE__*/ _jsx(IconCalendarArrowForward, {
|
|
104
|
+
size: 24
|
|
105
|
+
}),
|
|
106
|
+
prev2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowBack, {
|
|
107
|
+
size: 24
|
|
108
|
+
}),
|
|
109
|
+
next2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowForward, {
|
|
110
|
+
size: 24
|
|
111
|
+
})
|
|
112
|
+
}),
|
|
113
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
114
|
+
className: 'flex flex-row gap-2 py-4 px-6 border-t border-primary1',
|
|
115
|
+
children: [
|
|
116
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
117
|
+
type: 'button',
|
|
118
|
+
variant: 'outline',
|
|
119
|
+
className: 'w-full text-sm p-3 h-10 tracking-[0.5px]',
|
|
120
|
+
onClick: function onClick() {
|
|
121
|
+
return handleOpenChange(false);
|
|
122
|
+
},
|
|
123
|
+
children: (cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.label) || 'cancel'
|
|
124
|
+
}),
|
|
125
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
126
|
+
className: cn('w-full text-sm p-3 h-10 tracking-[0.5px]', isApplyDisabled && 'bg-primary1 hover:bg-primary1'),
|
|
127
|
+
onClick: isApplyDisabled ? undefined : handleApply,
|
|
128
|
+
children: (applyButton === null || applyButton === void 0 ? void 0 : applyButton.label) || 'done'
|
|
129
|
+
})
|
|
130
|
+
]
|
|
131
|
+
}),
|
|
132
|
+
/*#__PURE__*/ _jsx(Box, {
|
|
133
|
+
className: 'h-safe-bottom-edge'
|
|
134
|
+
})
|
|
135
|
+
]
|
|
136
|
+
})
|
|
137
|
+
]
|
|
138
|
+
})
|
|
139
|
+
});
|
|
41
140
|
};
|
|
42
141
|
export default DatePickerDrawer;
|
|
43
|
-
//# sourceMappingURL=DatePickerDrawer.js.map
|
|
@@ -1,4 +1,102 @@
|
|
|
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 ownKeys(object, enumerableOnly) {
|
|
66
|
+
var keys = Object.keys(object);
|
|
67
|
+
if (Object.getOwnPropertySymbols) {
|
|
68
|
+
var symbols = Object.getOwnPropertySymbols(object);
|
|
69
|
+
if (enumerableOnly) {
|
|
70
|
+
symbols = symbols.filter(function(sym) {
|
|
71
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
keys.push.apply(keys, symbols);
|
|
75
|
+
}
|
|
76
|
+
return keys;
|
|
77
|
+
}
|
|
78
|
+
function _object_spread_props(target, source) {
|
|
79
|
+
source = source != null ? source : {};
|
|
80
|
+
if (Object.getOwnPropertyDescriptors) {
|
|
81
|
+
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
82
|
+
} else {
|
|
83
|
+
ownKeys(Object(source)).forEach(function(key) {
|
|
84
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
return target;
|
|
88
|
+
}
|
|
89
|
+
function _sliced_to_array(arr, i) {
|
|
90
|
+
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
91
|
+
}
|
|
92
|
+
function _unsupported_iterable_to_array(o, minLen) {
|
|
93
|
+
if (!o) return;
|
|
94
|
+
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
95
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
96
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
97
|
+
if (n === "Map" || n === "Set") return Array.from(n);
|
|
98
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
99
|
+
}
|
|
2
100
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
101
|
import { format } from 'date-fns';
|
|
4
102
|
import { useEffect, useRef } from 'react';
|
|
@@ -16,59 +114,134 @@ import Stack from '../stack/Stack';
|
|
|
16
114
|
import { cn } from '../utils';
|
|
17
115
|
import { DATE_REGEX, DATERANGE_REGEX } from './constants';
|
|
18
116
|
import { formatPlaceholderBy } from './utils';
|
|
19
|
-
|
|
20
|
-
// non-customized props
|
|
21
|
-
inputValue, innerValue, setInnerValue, setInputValue, focused, setFocused, handleSelect, handleCancel, handleApply
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
117
|
+
var DatePickerPopover = function DatePickerPopover(param) {
|
|
118
|
+
var _param_htmlFor = param.htmlFor, htmlFor = _param_htmlFor === void 0 ? 'datepicker' : _param_htmlFor, _param_locale = param.locale, locale = _param_locale === void 0 ? 'en' : _param_locale, isRange = param.isRange, minDate = param.minDate, maxDate = param.maxDate, placeholder = param.placeholder, calendarType = param.calendarType, isDisabled = param.isDisabled, onError = param.onError, inputProps = param.inputProps, cancelButton = param.cancelButton, applyButton = param.applyButton, tileDisabled = param.tileDisabled, tileClassName = param.tileClassName, providedValue = param.value, // non-customized props
|
|
119
|
+
inputValue = param.inputValue, innerValue = param.innerValue, setInnerValue = param.setInnerValue, setInputValue = param.setInputValue, focused = param.focused, setFocused = param.setFocused, handleSelect = param.handleSelect, handleCancel = param.handleCancel, handleApply = param.handleApply;
|
|
120
|
+
var _ref;
|
|
121
|
+
var containerRef = useRef(null);
|
|
122
|
+
var handleChange = function handleChange(e) {
|
|
123
|
+
var value = e.target.value;
|
|
124
|
+
setInputValue === null || setInputValue === void 0 ? void 0 : setInputValue(value);
|
|
26
125
|
if (isRange && DATERANGE_REGEX.test(value)) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
126
|
+
var _value_split = _sliced_to_array(value.split(' - '), 2), startDate = _value_split[0], endDate = _value_split[1];
|
|
127
|
+
var _startDate_split = _sliced_to_array(startDate.split('/'), 3), startDay = _startDate_split[0], startMonth = _startDate_split[1], startYear = _startDate_split[2];
|
|
128
|
+
var _endDate_split = _sliced_to_array(endDate.split('/'), 3), endDay = _endDate_split[0], endMonth = _endDate_split[1], endYear = _endDate_split[2];
|
|
129
|
+
var formattedStartDate = new Date("".concat(startYear, "-").concat(startMonth, "-").concat(startDay));
|
|
130
|
+
var formattedEndDate = new Date("".concat(endYear, "-").concat(endMonth, "-").concat(endDay));
|
|
32
131
|
if (formattedStartDate >= formattedEndDate) {
|
|
33
|
-
onError
|
|
132
|
+
onError === null || onError === void 0 ? void 0 : onError('start-gte-end');
|
|
34
133
|
return;
|
|
35
134
|
}
|
|
36
|
-
setInnerValue
|
|
135
|
+
setInnerValue === null || setInnerValue === void 0 ? void 0 : setInnerValue([
|
|
136
|
+
formattedStartDate,
|
|
137
|
+
formattedEndDate
|
|
138
|
+
]);
|
|
37
139
|
return;
|
|
38
140
|
}
|
|
39
141
|
if (!isRange && DATE_REGEX.test(value)) {
|
|
40
|
-
|
|
41
|
-
setInnerValue
|
|
142
|
+
var _value_split1 = _sliced_to_array(value.split('-'), 3), day = _value_split1[0], month = _value_split1[1], year = _value_split1[2];
|
|
143
|
+
setInnerValue === null || setInnerValue === void 0 ? void 0 : setInnerValue(new Date("".concat(year, "-").concat(month, "-").concat(day)));
|
|
42
144
|
return;
|
|
43
145
|
}
|
|
44
146
|
};
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
const handleClick = (e) => {
|
|
53
|
-
const targetElement = e.target;
|
|
54
|
-
const isCalendarClick = targetElement.closest('.react-calendar__tile');
|
|
55
|
-
const open = !!containerRef.current?.contains(targetElement) || !!isCalendarClick;
|
|
147
|
+
var isApplyDisabled = !innerValue || isRange && (!Array.isArray(innerValue) || innerValue.length !== 2 || !innerValue[0] || !innerValue[1]);
|
|
148
|
+
useEffect(function() {
|
|
149
|
+
var handleClick = function handleClick(e) {
|
|
150
|
+
var _containerRef_current;
|
|
151
|
+
var targetElement = e.target;
|
|
152
|
+
var isCalendarClick = targetElement.closest('.react-calendar__tile');
|
|
153
|
+
var open = !!((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.contains(targetElement)) || !!isCalendarClick;
|
|
56
154
|
setFocused(open);
|
|
57
155
|
if (!open) {
|
|
58
156
|
handleCancel();
|
|
59
157
|
}
|
|
60
158
|
};
|
|
61
159
|
document.addEventListener('click', handleClick);
|
|
62
|
-
return ()
|
|
63
|
-
|
|
64
|
-
|
|
160
|
+
return function() {
|
|
161
|
+
return document.removeEventListener('click', handleClick);
|
|
162
|
+
};
|
|
163
|
+
}, [
|
|
164
|
+
setFocused,
|
|
165
|
+
handleCancel
|
|
166
|
+
]);
|
|
167
|
+
return /*#__PURE__*/ _jsxs(Box, {
|
|
168
|
+
ref: containerRef,
|
|
169
|
+
className: 'relative',
|
|
170
|
+
children: [
|
|
171
|
+
/*#__PURE__*/ _jsx(InputMask, _object_spread_props(_object_spread({
|
|
172
|
+
htmlFor: htmlFor,
|
|
173
|
+
placeholder: placeholder || formatPlaceholderBy(isRange),
|
|
174
|
+
className: cn(isDisabled ? 'cursor-text' : 'cursor-pointer'),
|
|
175
|
+
value: inputValue,
|
|
176
|
+
isDisabled: isDisabled,
|
|
177
|
+
suffix: /*#__PURE__*/ _jsx(IconCalendar, {
|
|
178
|
+
size: '16px'
|
|
179
|
+
}),
|
|
180
|
+
onChange: handleChange,
|
|
181
|
+
onClick: function onClick() {
|
|
65
182
|
!isDisabled && setFocused(true);
|
|
66
|
-
}
|
|
183
|
+
}
|
|
184
|
+
}, inputProps), {
|
|
185
|
+
mask: formatPlaceholderBy(isRange),
|
|
186
|
+
maskReplacement: {
|
|
67
187
|
D: /\d/,
|
|
68
188
|
M: /\d/,
|
|
69
|
-
Y: /\d
|
|
70
|
-
},
|
|
71
|
-
|
|
189
|
+
Y: /\d/
|
|
190
|
+
},
|
|
191
|
+
maskTrack: function maskTrack(data) {
|
|
192
|
+
return maskTrackDate(data, isRange);
|
|
193
|
+
}
|
|
194
|
+
})),
|
|
195
|
+
focused && /*#__PURE__*/ _jsxs(Box, {
|
|
196
|
+
className: 'absolute top-full left-0 mt-1 z-1 w-max max-w-sm border border-primary1 shadow-xl bg-white rounded-lg overflow-hidden',
|
|
197
|
+
children: [
|
|
198
|
+
/*#__PURE__*/ _jsx(Calendar, {
|
|
199
|
+
value: (_ref = innerValue !== null && innerValue !== void 0 ? innerValue : minDate) !== null && _ref !== void 0 ? _ref : new Date(),
|
|
200
|
+
onChange: handleSelect,
|
|
201
|
+
locale: locale || 'en',
|
|
202
|
+
selectRange: isRange,
|
|
203
|
+
minDate: minDate,
|
|
204
|
+
maxDate: maxDate,
|
|
205
|
+
tileClassName: tileClassName,
|
|
206
|
+
calendarType: calendarType,
|
|
207
|
+
formatShortWeekday: function formatShortWeekday(_, date) {
|
|
208
|
+
return format(date, 'EEEEE');
|
|
209
|
+
},
|
|
210
|
+
className: 'p-4',
|
|
211
|
+
tileDisabled: tileDisabled,
|
|
212
|
+
prevLabel: /*#__PURE__*/ _jsx(IconCalendarArrowBack, {
|
|
213
|
+
size: 24
|
|
214
|
+
}),
|
|
215
|
+
nextLabel: /*#__PURE__*/ _jsx(IconCalendarArrowForward, {
|
|
216
|
+
size: 24
|
|
217
|
+
}),
|
|
218
|
+
prev2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowBack, {
|
|
219
|
+
size: 24
|
|
220
|
+
}),
|
|
221
|
+
next2Label: /*#__PURE__*/ _jsx(IconCalendarDoubleArrowForward, {
|
|
222
|
+
size: 24
|
|
223
|
+
})
|
|
224
|
+
}),
|
|
225
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
226
|
+
className: 'flex flex-row gap-2 p-4 border-t border-primary1',
|
|
227
|
+
children: [
|
|
228
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
229
|
+
type: 'button',
|
|
230
|
+
variant: 'outline',
|
|
231
|
+
className: 'w-full text-sm p-3 h-10 tracking-[0.5px]',
|
|
232
|
+
onClick: handleCancel,
|
|
233
|
+
children: (cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.label) || 'cancel'
|
|
234
|
+
}),
|
|
235
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
236
|
+
className: cn('w-full text-sm p-3 h-10 tracking-[0.5px]', isApplyDisabled && 'bg-primary1 hover:bg-primary1 cursor-not-allowed'),
|
|
237
|
+
onClick: isApplyDisabled ? undefined : handleApply,
|
|
238
|
+
children: (applyButton === null || applyButton === void 0 ? void 0 : applyButton.label) || 'done'
|
|
239
|
+
})
|
|
240
|
+
]
|
|
241
|
+
})
|
|
242
|
+
]
|
|
243
|
+
})
|
|
244
|
+
]
|
|
245
|
+
});
|
|
72
246
|
};
|
|
73
247
|
export default DatePickerPopover;
|
|
74
|
-
//# sourceMappingURL=DatePickerPopover.js.map
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
//# sourceMappingURL=constants.js.map
|
|
1
|
+
export var DATE_INPUT_FORMAT = 'DD-MM-YYYY';
|
|
2
|
+
export var DATE_REGEX = /^(0[0-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/;
|
|
3
|
+
export var DATERANGE_REGEX = /^(0[0-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}\s-\s(0[0-9]|[12][0-9]|3[01])-(0[1-9]|1[0-2])-\d{4}$/;
|
package/dist/datepicker/utils.js
CHANGED
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
import { format } from '@driveflux/time';
|
|
2
2
|
import { DATE_INPUT_FORMAT } from './constants';
|
|
3
|
-
export
|
|
4
|
-
return isRange
|
|
5
|
-
? `${DATE_INPUT_FORMAT} - ${DATE_INPUT_FORMAT}`
|
|
6
|
-
: DATE_INPUT_FORMAT;
|
|
3
|
+
export var formatPlaceholderBy = function formatPlaceholderBy(isRange) {
|
|
4
|
+
return isRange ? "".concat(DATE_INPUT_FORMAT, " - ").concat(DATE_INPUT_FORMAT) : DATE_INPUT_FORMAT;
|
|
7
5
|
};
|
|
8
|
-
export
|
|
9
|
-
return Array.isArray(value)
|
|
10
|
-
? `${format(value[0])} - ${format(value[1])}`
|
|
11
|
-
: value
|
|
12
|
-
? format(value)
|
|
13
|
-
: '';
|
|
6
|
+
export var formatInputBy = function formatInputBy(value, _isRange) {
|
|
7
|
+
return Array.isArray(value) ? "".concat(format(value[0]), " - ").concat(format(value[1])) : value ? format(value) : '';
|
|
14
8
|
};
|
|
15
|
-
//# sourceMappingURL=utils.js.map
|