@impulse-ui-native/datetime 2.6.0 → 2.8.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/dist/components/common/quick-date-options.js +10 -3
- package/dist/components/common/quick-date-options.js.map +1 -1
- package/dist/hooks/use-datetime-picker.hook.js +41 -21
- package/dist/hooks/use-datetime-picker.hook.js.map +1 -1
- package/dist/hooks/use-datetime-range-picker.hook.js +45 -23
- package/dist/hooks/use-datetime-range-picker.hook.js.map +1 -1
- package/package.json +8 -8
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, useMemo } from "react";
|
|
3
3
|
import { ScrollView } from "react-native";
|
|
4
|
+
import { useEventCallback } from "@impulse-ui-native/core";
|
|
4
5
|
import { Tag } from "@impulse-ui-native/primitives";
|
|
5
6
|
import { useComponentsTokens } from "@impulse-ui-native/theme";
|
|
6
7
|
import { getQuickOptionKey } from "../../utils";
|
|
8
|
+
const QuickDateOptionTag = memo(function QuickDateOptionTag2(props) {
|
|
9
|
+
const handlePress = useEventCallback(
|
|
10
|
+
() => props.onPress?.(props.option.value)
|
|
11
|
+
);
|
|
12
|
+
return /* @__PURE__ */ jsx(Tag, { label: props.option.label, onPress: handlePress });
|
|
13
|
+
});
|
|
7
14
|
const QuickDateOptions = memo(function QuickDateOptions2(props) {
|
|
8
15
|
const tokens = useComponentsTokens();
|
|
9
16
|
const style = useMemo(
|
|
@@ -17,10 +24,10 @@ const QuickDateOptions = memo(function QuickDateOptions2(props) {
|
|
|
17
24
|
contentContainerStyle: style,
|
|
18
25
|
showsHorizontalScrollIndicator: false,
|
|
19
26
|
children: props.options.map((option, index) => /* @__PURE__ */ jsx(
|
|
20
|
-
|
|
27
|
+
QuickDateOptionTag,
|
|
21
28
|
{
|
|
22
|
-
|
|
23
|
-
onPress:
|
|
29
|
+
option,
|
|
30
|
+
onPress: props.onPress
|
|
24
31
|
},
|
|
25
32
|
getQuickOptionKey(option.value) ?? index
|
|
26
33
|
))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/common/quick-date-options.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { ScrollView, ViewStyle } from \"react-native\";\n\nimport { Tag } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { QuickDateOption, TimeRange } from \"../../types\";\nimport { getQuickOptionKey } from \"../../utils\";\n\ninterface QuickDateOptionsProps {\n options: QuickDateOption<Date | TimeRange>[];\n onPress?: (date: QuickDateOption<Date | TimeRange>[\"value\"]) => void;\n}\n\nexport const QuickDateOptions = memo(function QuickDateOptions(\n props: QuickDateOptionsProps,\n) {\n const tokens = useComponentsTokens();\n\n const style = useMemo<ViewStyle>(\n () => ({ gap: tokens.datetimePicker.quickDateOptions.gap }),\n [tokens.datetimePicker.quickDateOptions],\n );\n\n return (\n <ScrollView\n horizontal\n contentContainerStyle={style}\n showsHorizontalScrollIndicator={false}\n >\n {props.options.map((option, index) => (\n <
|
|
1
|
+
{"version":3,"sources":["../../../src/components/common/quick-date-options.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { ScrollView, ViewStyle } from \"react-native\";\n\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Tag } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { QuickDateOption, TimeRange } from \"../../types\";\nimport { getQuickOptionKey } from \"../../utils\";\n\ninterface QuickDateOptionsProps {\n options: QuickDateOption<Date | TimeRange>[];\n onPress?: (date: QuickDateOption<Date | TimeRange>[\"value\"]) => void;\n}\n\ninterface QuickDateOptionTagProps {\n option: QuickDateOption<Date | TimeRange>;\n onPress?: QuickDateOptionsProps[\"onPress\"];\n}\n\nconst QuickDateOptionTag = memo(function QuickDateOptionTag(\n props: QuickDateOptionTagProps,\n) {\n const handlePress = useEventCallback(() =>\n props.onPress?.(props.option.value),\n );\n\n return <Tag label={props.option.label} onPress={handlePress} />;\n});\n\nexport const QuickDateOptions = memo(function QuickDateOptions(\n props: QuickDateOptionsProps,\n) {\n const tokens = useComponentsTokens();\n\n const style = useMemo<ViewStyle>(\n () => ({ gap: tokens.datetimePicker.quickDateOptions.gap }),\n [tokens.datetimePicker.quickDateOptions],\n );\n\n return (\n <ScrollView\n horizontal\n contentContainerStyle={style}\n showsHorizontalScrollIndicator={false}\n >\n {props.options.map((option, index) => (\n <QuickDateOptionTag\n key={getQuickOptionKey(option.value) ?? index}\n option={option}\n onPress={props.onPress}\n />\n ))}\n </ScrollView>\n );\n});\n"],"mappings":"AA2BS;AA3BT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAA6B;AAEtC,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAGpC,SAAS,yBAAyB;AAYlC,MAAM,qBAAqB,KAAK,SAASA,oBACvC,OACA;AACA,QAAM,cAAc;AAAA,IAAiB,MACnC,MAAM,UAAU,MAAM,OAAO,KAAK;AAAA,EACpC;AAEA,SAAO,oBAAC,OAAI,OAAO,MAAM,OAAO,OAAO,SAAS,aAAa;AAC/D,CAAC;AAEM,MAAM,mBAAmB,KAAK,SAASC,kBAC5C,OACA;AACA,QAAM,SAAS,oBAAoB;AAEnC,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,KAAK,OAAO,eAAe,iBAAiB,IAAI;AAAA,IACzD,CAAC,OAAO,eAAe,gBAAgB;AAAA,EACzC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACV,uBAAuB;AAAA,MACvB,gCAAgC;AAAA,MAE/B,gBAAM,QAAQ,IAAI,CAAC,QAAQ,UAC1B;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,SAAS,MAAM;AAAA;AAAA,QAFV,kBAAkB,OAAO,KAAK,KAAK;AAAA,MAG1C,CACD;AAAA;AAAA,EACH;AAEJ,CAAC;","names":["QuickDateOptionTag","QuickDateOptions"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useCallback, useEffect, useId, useState } from "react";
|
|
1
|
+
import { useCallback, useEffect, useId, useMemo, useState } from "react";
|
|
2
2
|
import { useControllableState, useIsOpen } from "@impulse-ui-native/core";
|
|
3
3
|
import { isDateInMonth, isSameDay } from "../utils";
|
|
4
4
|
function useDatetimePicker({
|
|
@@ -85,26 +85,46 @@ function useDatetimePicker({
|
|
|
85
85
|
setTempDate(selected);
|
|
86
86
|
}
|
|
87
87
|
}, [isOpen, selected, isClosed]);
|
|
88
|
-
return
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
88
|
+
return useMemo(
|
|
89
|
+
() => ({
|
|
90
|
+
id,
|
|
91
|
+
isOpen,
|
|
92
|
+
visible,
|
|
93
|
+
tempDate,
|
|
94
|
+
selected,
|
|
95
|
+
setVisible,
|
|
96
|
+
setTempDate,
|
|
97
|
+
setSelected,
|
|
98
|
+
open,
|
|
99
|
+
close,
|
|
100
|
+
onPressOpen,
|
|
101
|
+
onPressApply,
|
|
102
|
+
onPressCancel,
|
|
103
|
+
onPressCalendarDay,
|
|
104
|
+
onChangeTime,
|
|
105
|
+
onPressClear,
|
|
106
|
+
onPressQuickDateOption,
|
|
107
|
+
syncState
|
|
108
|
+
}),
|
|
109
|
+
[
|
|
110
|
+
close,
|
|
111
|
+
id,
|
|
112
|
+
isOpen,
|
|
113
|
+
onChangeTime,
|
|
114
|
+
onPressApply,
|
|
115
|
+
onPressCalendarDay,
|
|
116
|
+
onPressCancel,
|
|
117
|
+
onPressClear,
|
|
118
|
+
onPressOpen,
|
|
119
|
+
onPressQuickDateOption,
|
|
120
|
+
open,
|
|
121
|
+
selected,
|
|
122
|
+
setSelected,
|
|
123
|
+
syncState,
|
|
124
|
+
tempDate,
|
|
125
|
+
visible
|
|
126
|
+
]
|
|
127
|
+
);
|
|
108
128
|
}
|
|
109
129
|
export {
|
|
110
130
|
useDatetimePicker
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-datetime-picker.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useId, useState } from \"react\";\n\nimport { useControllableState, useIsOpen } from \"@impulse-ui-native/core\";\n\nimport { TimePickerValue, TimeRange } from \"../types\";\nimport { isDateInMonth, isSameDay } from \"../utils\";\n\ninterface UseDatetimePickerStateOptions {\n value?: Date | null;\n defaultValue?: Date | null;\n onChange?: (value: Date | null) => void;\n}\n\nexport function useDatetimePicker({\n value,\n defaultValue,\n onChange,\n}: UseDatetimePickerStateOptions) {\n const id = useId();\n\n const [visible, setVisible] = useState<Date>(\n value ?? defaultValue ?? new Date(),\n );\n\n const [tempDate, setTempDate] = useState<Date | null>(\n value ?? defaultValue ?? null,\n );\n\n const [selected, setSelected] = useControllableState<Date | null>({\n prop: value,\n defaultProp: defaultValue ?? null,\n onChange,\n });\n\n const { isOpen, isClosed, open, close } = useIsOpen();\n\n const onPressOpen = useCallback(() => {\n setTempDate(selected);\n open();\n }, [open, selected]);\n\n const syncState = useCallback(() => {\n setTempDate(selected);\n\n if (selected) {\n setVisible(selected);\n }\n }, [selected]);\n\n const onPressApply = useCallback(() => {\n setSelected(tempDate);\n close();\n }, [close, tempDate]);\n\n const onPressCancel = useCallback(() => {\n close();\n }, [close]);\n\n const onPressCalendarDay = useCallback((date: Date) => {\n setTempDate((prev) => {\n if (!prev) {\n return date;\n }\n\n if (isSameDay(date, prev)) {\n return null;\n }\n\n const nextDate = new Date(date);\n\n nextDate.setHours(prev.getHours());\n nextDate.setMinutes(prev.getMinutes());\n nextDate.setSeconds(prev.getSeconds());\n nextDate.setMilliseconds(prev.getMilliseconds());\n\n return nextDate;\n });\n }, []);\n\n const onChangeTime = useCallback(\n (time: TimePickerValue | null) => {\n setTempDate((prev) => {\n const nextDate = new Date(prev ?? visible);\n\n nextDate.setHours(time?.hours ?? 0);\n nextDate.setMinutes(time?.minutes ?? 0);\n nextDate.setSeconds(time?.seconds ?? 0);\n nextDate.setMilliseconds(0);\n\n return nextDate;\n });\n },\n [visible],\n );\n\n const onPressClear = useCallback(() => {\n setTempDate(null);\n }, []);\n\n const onPressQuickDateOption = useCallback(\n (optionValue: Date | TimeRange) => {\n if (!(optionValue instanceof Date)) {\n return;\n }\n\n setTempDate(optionValue);\n\n if (!isDateInMonth(optionValue, visible)) {\n setVisible(optionValue);\n }\n },\n [visible],\n );\n\n useEffect(() => {\n if (!isOpen && isClosed) {\n setTempDate(selected);\n }\n }, [isOpen, selected, isClosed]);\n\n return {\n
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-datetime-picker.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useState } from \"react\";\n\nimport { useControllableState, useIsOpen } from \"@impulse-ui-native/core\";\n\nimport { TimePickerValue, TimeRange } from \"../types\";\nimport { isDateInMonth, isSameDay } from \"../utils\";\n\ninterface UseDatetimePickerStateOptions {\n value?: Date | null;\n defaultValue?: Date | null;\n onChange?: (value: Date | null) => void;\n}\n\nexport function useDatetimePicker({\n value,\n defaultValue,\n onChange,\n}: UseDatetimePickerStateOptions) {\n const id = useId();\n\n const [visible, setVisible] = useState<Date>(\n value ?? defaultValue ?? new Date(),\n );\n\n const [tempDate, setTempDate] = useState<Date | null>(\n value ?? defaultValue ?? null,\n );\n\n const [selected, setSelected] = useControllableState<Date | null>({\n prop: value,\n defaultProp: defaultValue ?? null,\n onChange,\n });\n\n const { isOpen, isClosed, open, close } = useIsOpen();\n\n const onPressOpen = useCallback(() => {\n setTempDate(selected);\n open();\n }, [open, selected]);\n\n const syncState = useCallback(() => {\n setTempDate(selected);\n\n if (selected) {\n setVisible(selected);\n }\n }, [selected]);\n\n const onPressApply = useCallback(() => {\n setSelected(tempDate);\n close();\n }, [close, tempDate]);\n\n const onPressCancel = useCallback(() => {\n close();\n }, [close]);\n\n const onPressCalendarDay = useCallback((date: Date) => {\n setTempDate((prev) => {\n if (!prev) {\n return date;\n }\n\n if (isSameDay(date, prev)) {\n return null;\n }\n\n const nextDate = new Date(date);\n\n nextDate.setHours(prev.getHours());\n nextDate.setMinutes(prev.getMinutes());\n nextDate.setSeconds(prev.getSeconds());\n nextDate.setMilliseconds(prev.getMilliseconds());\n\n return nextDate;\n });\n }, []);\n\n const onChangeTime = useCallback(\n (time: TimePickerValue | null) => {\n setTempDate((prev) => {\n const nextDate = new Date(prev ?? visible);\n\n nextDate.setHours(time?.hours ?? 0);\n nextDate.setMinutes(time?.minutes ?? 0);\n nextDate.setSeconds(time?.seconds ?? 0);\n nextDate.setMilliseconds(0);\n\n return nextDate;\n });\n },\n [visible],\n );\n\n const onPressClear = useCallback(() => {\n setTempDate(null);\n }, []);\n\n const onPressQuickDateOption = useCallback(\n (optionValue: Date | TimeRange) => {\n if (!(optionValue instanceof Date)) {\n return;\n }\n\n setTempDate(optionValue);\n\n if (!isDateInMonth(optionValue, visible)) {\n setVisible(optionValue);\n }\n },\n [visible],\n );\n\n useEffect(() => {\n if (!isOpen && isClosed) {\n setTempDate(selected);\n }\n }, [isOpen, selected, isClosed]);\n\n return useMemo(\n () => ({\n id,\n isOpen,\n visible,\n tempDate,\n selected,\n setVisible,\n setTempDate,\n setSelected,\n open,\n close,\n onPressOpen,\n onPressApply,\n onPressCancel,\n onPressCalendarDay,\n onChangeTime,\n onPressClear,\n onPressQuickDateOption,\n syncState,\n }),\n [\n close,\n id,\n isOpen,\n onChangeTime,\n onPressApply,\n onPressCalendarDay,\n onPressCancel,\n onPressClear,\n onPressOpen,\n onPressQuickDateOption,\n open,\n selected,\n setSelected,\n syncState,\n tempDate,\n visible,\n ],\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useCallback, useEffect, useId, useState } from "react";
|
|
1
|
+
import { useCallback, useEffect, useId, useMemo, useState } from "react";
|
|
2
2
|
import { useControllableState, useIsOpen } from "@impulse-ui-native/core";
|
|
3
3
|
import {
|
|
4
4
|
applyTime,
|
|
@@ -132,28 +132,50 @@ function useDatetimeRangePicker({
|
|
|
132
132
|
setTempRange(selected);
|
|
133
133
|
}
|
|
134
134
|
}, [isOpen, selected, isClosed]);
|
|
135
|
-
return
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
135
|
+
return useMemo(
|
|
136
|
+
() => ({
|
|
137
|
+
id,
|
|
138
|
+
isOpen,
|
|
139
|
+
visible,
|
|
140
|
+
tempRange,
|
|
141
|
+
selected,
|
|
142
|
+
setVisible,
|
|
143
|
+
setTempRange,
|
|
144
|
+
setSelected,
|
|
145
|
+
open,
|
|
146
|
+
close,
|
|
147
|
+
onPressOpen,
|
|
148
|
+
onPressApply,
|
|
149
|
+
onPressCancel,
|
|
150
|
+
onPressCalendarDay,
|
|
151
|
+
onChangeTime,
|
|
152
|
+
onChangeStartTime,
|
|
153
|
+
onChangeEndTime,
|
|
154
|
+
onPressClear,
|
|
155
|
+
onPressQuickDateOption,
|
|
156
|
+
syncState
|
|
157
|
+
}),
|
|
158
|
+
[
|
|
159
|
+
close,
|
|
160
|
+
id,
|
|
161
|
+
isOpen,
|
|
162
|
+
onChangeEndTime,
|
|
163
|
+
onChangeStartTime,
|
|
164
|
+
onChangeTime,
|
|
165
|
+
onPressApply,
|
|
166
|
+
onPressCalendarDay,
|
|
167
|
+
onPressCancel,
|
|
168
|
+
onPressClear,
|
|
169
|
+
onPressOpen,
|
|
170
|
+
onPressQuickDateOption,
|
|
171
|
+
open,
|
|
172
|
+
selected,
|
|
173
|
+
setSelected,
|
|
174
|
+
syncState,
|
|
175
|
+
tempRange,
|
|
176
|
+
visible
|
|
177
|
+
]
|
|
178
|
+
);
|
|
157
179
|
}
|
|
158
180
|
export {
|
|
159
181
|
useDatetimeRangePicker
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-datetime-range-picker.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useId, useState } from \"react\";\n\nimport { useControllableState, useIsOpen } from \"@impulse-ui-native/core\";\n\nimport { RangeSide, TimePickerValue, TimeRange } from \"../types\";\nimport {\n applyTime,\n endOfDay,\n getInitialVisibleDate,\n isDateInMonth,\n isSameDay,\n normalizeRange,\n startOfDay,\n} from \"../utils\";\n\ninterface UseDatetimeRangePickerStateOptions {\n value?: TimeRange | null;\n defaultValue?: TimeRange | null;\n onChange?: (value: TimeRange | null) => void;\n}\n\nexport function useDatetimeRangePicker({\n value,\n defaultValue,\n onChange,\n}: UseDatetimeRangePickerStateOptions) {\n const id = useId();\n\n const [visible, setVisible] = useState<Date>(\n getInitialVisibleDate(value, defaultValue),\n );\n\n const [tempRange, setTempRange] = useState<TimeRange | null>(\n value ?? defaultValue ?? null,\n );\n\n const [selected, setSelected] = useControllableState<TimeRange | null>({\n prop: value,\n defaultProp: defaultValue ?? null,\n onChange,\n });\n\n const { isOpen, isClosed, open, close } = useIsOpen();\n\n const onPressOpen = useCallback(() => {\n setTempRange(selected);\n open();\n }, [open, selected]);\n\n const syncState = useCallback(() => {\n setTempRange(selected);\n\n const nextVisible = selected?.start ?? selected?.end;\n\n if (nextVisible) {\n setVisible(nextVisible);\n }\n }, [selected]);\n\n const onPressApply = useCallback(() => {\n setSelected(normalizeRange(tempRange));\n close();\n }, [close, tempRange]);\n\n const onPressCancel = useCallback(() => {\n close();\n }, [close]);\n\n const onPressCalendarDay = useCallback((date: Date) => {\n setTempRange((prev) => {\n const startDate = startOfDay(date);\n const endDate = endOfDay(date);\n\n if (!prev?.start || prev.end) {\n return {\n start: startDate,\n };\n }\n\n if (isSameDay(startDate, prev.start)) {\n return null;\n }\n\n if (startDate < prev.start) {\n return {\n start: startDate,\n end: endOfDay(prev.start),\n };\n }\n\n return {\n start: prev.start,\n end: endDate,\n };\n });\n }, []);\n\n const onChangeStartTime = useCallback(\n (time: TimePickerValue | null) => {\n setTempRange((prev) => {\n const fallbackDate = prev?.start ?? visible;\n\n return normalizeRange({\n start: applyTime(fallbackDate, time),\n end: prev?.end,\n });\n });\n },\n [visible],\n );\n\n const onChangeEndTime = useCallback(\n (time: TimePickerValue | null) => {\n setTempRange((prev) => {\n const fallbackDate = prev?.end ?? prev?.start ?? visible;\n\n return normalizeRange({\n start: prev?.start,\n end: applyTime(fallbackDate, time),\n });\n });\n },\n [visible],\n );\n\n const onChangeTime = useCallback(\n (side: RangeSide, time: TimePickerValue | null) => {\n if (side === \"start\") {\n onChangeStartTime(time);\n return;\n }\n\n onChangeEndTime(time);\n },\n [onChangeEndTime, onChangeStartTime],\n );\n\n const onPressClear = useCallback(() => {\n setTempRange(null);\n }, []);\n\n const onPressQuickDateOption = useCallback(\n (optionValue: Date | TimeRange) => {\n if (optionValue instanceof Date) {\n const nextDate = startOfDay(optionValue);\n\n setTempRange({\n start: nextDate,\n });\n\n if (!isDateInMonth(nextDate, visible)) {\n setVisible(nextDate);\n }\n\n return;\n }\n\n const nextRange = normalizeRange(optionValue);\n\n setTempRange(nextRange);\n\n const nextVisible = nextRange?.start ?? nextRange?.end;\n\n if (nextVisible && !isDateInMonth(nextVisible, visible)) {\n setVisible(nextVisible);\n }\n },\n [visible],\n );\n\n useEffect(() => {\n if (!isOpen && isClosed) {\n setTempRange(selected);\n }\n }, [isOpen, selected, isClosed]);\n\n return {\n
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-datetime-range-picker.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useState } from \"react\";\n\nimport { useControllableState, useIsOpen } from \"@impulse-ui-native/core\";\n\nimport { RangeSide, TimePickerValue, TimeRange } from \"../types\";\nimport {\n applyTime,\n endOfDay,\n getInitialVisibleDate,\n isDateInMonth,\n isSameDay,\n normalizeRange,\n startOfDay,\n} from \"../utils\";\n\ninterface UseDatetimeRangePickerStateOptions {\n value?: TimeRange | null;\n defaultValue?: TimeRange | null;\n onChange?: (value: TimeRange | null) => void;\n}\n\nexport function useDatetimeRangePicker({\n value,\n defaultValue,\n onChange,\n}: UseDatetimeRangePickerStateOptions) {\n const id = useId();\n\n const [visible, setVisible] = useState<Date>(\n getInitialVisibleDate(value, defaultValue),\n );\n\n const [tempRange, setTempRange] = useState<TimeRange | null>(\n value ?? defaultValue ?? null,\n );\n\n const [selected, setSelected] = useControllableState<TimeRange | null>({\n prop: value,\n defaultProp: defaultValue ?? null,\n onChange,\n });\n\n const { isOpen, isClosed, open, close } = useIsOpen();\n\n const onPressOpen = useCallback(() => {\n setTempRange(selected);\n open();\n }, [open, selected]);\n\n const syncState = useCallback(() => {\n setTempRange(selected);\n\n const nextVisible = selected?.start ?? selected?.end;\n\n if (nextVisible) {\n setVisible(nextVisible);\n }\n }, [selected]);\n\n const onPressApply = useCallback(() => {\n setSelected(normalizeRange(tempRange));\n close();\n }, [close, tempRange]);\n\n const onPressCancel = useCallback(() => {\n close();\n }, [close]);\n\n const onPressCalendarDay = useCallback((date: Date) => {\n setTempRange((prev) => {\n const startDate = startOfDay(date);\n const endDate = endOfDay(date);\n\n if (!prev?.start || prev.end) {\n return {\n start: startDate,\n };\n }\n\n if (isSameDay(startDate, prev.start)) {\n return null;\n }\n\n if (startDate < prev.start) {\n return {\n start: startDate,\n end: endOfDay(prev.start),\n };\n }\n\n return {\n start: prev.start,\n end: endDate,\n };\n });\n }, []);\n\n const onChangeStartTime = useCallback(\n (time: TimePickerValue | null) => {\n setTempRange((prev) => {\n const fallbackDate = prev?.start ?? visible;\n\n return normalizeRange({\n start: applyTime(fallbackDate, time),\n end: prev?.end,\n });\n });\n },\n [visible],\n );\n\n const onChangeEndTime = useCallback(\n (time: TimePickerValue | null) => {\n setTempRange((prev) => {\n const fallbackDate = prev?.end ?? prev?.start ?? visible;\n\n return normalizeRange({\n start: prev?.start,\n end: applyTime(fallbackDate, time),\n });\n });\n },\n [visible],\n );\n\n const onChangeTime = useCallback(\n (side: RangeSide, time: TimePickerValue | null) => {\n if (side === \"start\") {\n onChangeStartTime(time);\n return;\n }\n\n onChangeEndTime(time);\n },\n [onChangeEndTime, onChangeStartTime],\n );\n\n const onPressClear = useCallback(() => {\n setTempRange(null);\n }, []);\n\n const onPressQuickDateOption = useCallback(\n (optionValue: Date | TimeRange) => {\n if (optionValue instanceof Date) {\n const nextDate = startOfDay(optionValue);\n\n setTempRange({\n start: nextDate,\n });\n\n if (!isDateInMonth(nextDate, visible)) {\n setVisible(nextDate);\n }\n\n return;\n }\n\n const nextRange = normalizeRange(optionValue);\n\n setTempRange(nextRange);\n\n const nextVisible = nextRange?.start ?? nextRange?.end;\n\n if (nextVisible && !isDateInMonth(nextVisible, visible)) {\n setVisible(nextVisible);\n }\n },\n [visible],\n );\n\n useEffect(() => {\n if (!isOpen && isClosed) {\n setTempRange(selected);\n }\n }, [isOpen, selected, isClosed]);\n\n return useMemo(\n () => ({\n id,\n isOpen,\n visible,\n tempRange,\n selected,\n setVisible,\n setTempRange,\n setSelected,\n open,\n close,\n onPressOpen,\n onPressApply,\n onPressCancel,\n onPressCalendarDay,\n onChangeTime,\n onChangeStartTime,\n onChangeEndTime,\n onPressClear,\n onPressQuickDateOption,\n syncState,\n }),\n [\n close,\n id,\n isOpen,\n onChangeEndTime,\n onChangeStartTime,\n onChangeTime,\n onPressApply,\n onPressCalendarDay,\n onPressCancel,\n onPressClear,\n onPressOpen,\n onPressQuickDateOption,\n open,\n selected,\n setSelected,\n syncState,\n tempRange,\n visible,\n ],\n );\n}\n"],"mappings":"AAAA,SAAS,aAAa,WAAW,OAAO,SAAS,gBAAgB;AAEjE,SAAS,sBAAsB,iBAAiB;AAGhD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQA,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,KAAK,MAAM;AAEjB,QAAM,CAAC,SAAS,UAAU,IAAI;AAAA,IAC5B,sBAAsB,OAAO,YAAY;AAAA,EAC3C;AAEA,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,SAAS,gBAAgB;AAAA,EAC3B;AAEA,QAAM,CAAC,UAAU,WAAW,IAAI,qBAAuC;AAAA,IACrE,MAAM;AAAA,IACN,aAAa,gBAAgB;AAAA,IAC7B;AAAA,EACF,CAAC;AAED,QAAM,EAAE,QAAQ,UAAU,MAAM,MAAM,IAAI,UAAU;AAEpD,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,QAAQ;AACrB,SAAK;AAAA,EACP,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,QAAM,YAAY,YAAY,MAAM;AAClC,iBAAa,QAAQ;AAErB,UAAM,cAAc,UAAU,SAAS,UAAU;AAEjD,QAAI,aAAa;AACf,iBAAW,WAAW;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,eAAe,YAAY,MAAM;AACrC,gBAAY,eAAe,SAAS,CAAC;AACrC,UAAM;AAAA,EACR,GAAG,CAAC,OAAO,SAAS,CAAC;AAErB,QAAM,gBAAgB,YAAY,MAAM;AACtC,UAAM;AAAA,EACR,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,qBAAqB,YAAY,CAAC,SAAe;AACrD,iBAAa,CAAC,SAAS;AACrB,YAAM,YAAY,WAAW,IAAI;AACjC,YAAM,UAAU,SAAS,IAAI;AAE7B,UAAI,CAAC,MAAM,SAAS,KAAK,KAAK;AAC5B,eAAO;AAAA,UACL,OAAO;AAAA,QACT;AAAA,MACF;AAEA,UAAI,UAAU,WAAW,KAAK,KAAK,GAAG;AACpC,eAAO;AAAA,MACT;AAEA,UAAI,YAAY,KAAK,OAAO;AAC1B,eAAO;AAAA,UACL,OAAO;AAAA,UACP,KAAK,SAAS,KAAK,KAAK;AAAA,QAC1B;AAAA,MACF;AAEA,aAAO;AAAA,QACL,OAAO,KAAK;AAAA,QACZ,KAAK;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACxB,CAAC,SAAiC;AAChC,mBAAa,CAAC,SAAS;AACrB,cAAM,eAAe,MAAM,SAAS;AAEpC,eAAO,eAAe;AAAA,UACpB,OAAO,UAAU,cAAc,IAAI;AAAA,UACnC,KAAK,MAAM;AAAA,QACb,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,SAAiC;AAChC,mBAAa,CAAC,SAAS;AACrB,cAAM,eAAe,MAAM,OAAO,MAAM,SAAS;AAEjD,eAAO,eAAe;AAAA,UACpB,OAAO,MAAM;AAAA,UACb,KAAK,UAAU,cAAc,IAAI;AAAA,QACnC,CAAC;AAAA,MACH,CAAC;AAAA,IACH;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAiB,SAAiC;AACjD,UAAI,SAAS,SAAS;AACpB,0BAAkB,IAAI;AACtB;AAAA,MACF;AAEA,sBAAgB,IAAI;AAAA,IACtB;AAAA,IACA,CAAC,iBAAiB,iBAAiB;AAAA,EACrC;AAEA,QAAM,eAAe,YAAY,MAAM;AACrC,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAyB;AAAA,IAC7B,CAAC,gBAAkC;AACjC,UAAI,uBAAuB,MAAM;AAC/B,cAAM,WAAW,WAAW,WAAW;AAEvC,qBAAa;AAAA,UACX,OAAO;AAAA,QACT,CAAC;AAED,YAAI,CAAC,cAAc,UAAU,OAAO,GAAG;AACrC,qBAAW,QAAQ;AAAA,QACrB;AAEA;AAAA,MACF;AAEA,YAAM,YAAY,eAAe,WAAW;AAE5C,mBAAa,SAAS;AAEtB,YAAM,cAAc,WAAW,SAAS,WAAW;AAEnD,UAAI,eAAe,CAAC,cAAc,aAAa,OAAO,GAAG;AACvD,mBAAW,WAAW;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,UAAU;AACvB,mBAAa,QAAQ;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,QAAQ,UAAU,QAAQ,CAAC;AAE/B,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/datetime",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.0",
|
|
4
4
|
"description": "Date and time selection components for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/core": "2.
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
34
|
-
"@impulse-ui-native/
|
|
35
|
-
"@impulse-ui-native/
|
|
36
|
-
"@impulse-ui-native/select": "2.
|
|
37
|
-
"@impulse-ui-native/portal": "2.
|
|
31
|
+
"@impulse-ui-native/core": "2.8.0",
|
|
32
|
+
"@impulse-ui-native/theme": "2.8.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "2.8.0",
|
|
34
|
+
"@impulse-ui-native/flyout": "2.8.0",
|
|
35
|
+
"@impulse-ui-native/icon": "2.8.0",
|
|
36
|
+
"@impulse-ui-native/select": "2.8.0",
|
|
37
|
+
"@impulse-ui-native/portal": "2.8.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/react": "~19.2.14",
|