@impulse-ui-native/datetime 2.7.0 → 2.9.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 +22 -12
- package/dist/components/common/quick-date-options.js.map +1 -1
- package/dist/components/time/picker-column.js +23 -39
- package/dist/components/time/picker-column.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 +10 -10
|
@@ -1,32 +1,42 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { memo
|
|
3
|
-
import { ScrollView } from "react-native";
|
|
2
|
+
import { memo } from "react";
|
|
3
|
+
import { ScrollView, StyleSheet } from "react-native";
|
|
4
|
+
import { useEventCallback } from "@impulse-ui-native/core";
|
|
4
5
|
import { Tag } from "@impulse-ui-native/primitives";
|
|
5
|
-
import {
|
|
6
|
+
import { useThemedStyles } from "@impulse-ui-native/theme";
|
|
6
7
|
import { getQuickOptionKey } from "../../utils";
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
() => ({ gap: tokens.datetimePicker.quickDateOptions.gap }),
|
|
11
|
-
[tokens.datetimePicker.quickDateOptions]
|
|
8
|
+
const QuickDateOptionTag = memo(function QuickDateOptionTag2(props) {
|
|
9
|
+
const handlePress = useEventCallback(
|
|
10
|
+
() => props.onPress?.(props.option.value)
|
|
12
11
|
);
|
|
12
|
+
return /* @__PURE__ */ jsx(Tag, { label: props.option.label, onPress: handlePress });
|
|
13
|
+
});
|
|
14
|
+
const QuickDateOptions = memo(function QuickDateOptions2(props) {
|
|
15
|
+
const styles = useThemedStyles(themedStyles);
|
|
13
16
|
return /* @__PURE__ */ jsx(
|
|
14
17
|
ScrollView,
|
|
15
18
|
{
|
|
16
19
|
horizontal: true,
|
|
17
|
-
contentContainerStyle:
|
|
20
|
+
contentContainerStyle: styles.content,
|
|
18
21
|
showsHorizontalScrollIndicator: false,
|
|
19
22
|
children: props.options.map((option, index) => /* @__PURE__ */ jsx(
|
|
20
|
-
|
|
23
|
+
QuickDateOptionTag,
|
|
21
24
|
{
|
|
22
|
-
|
|
23
|
-
onPress:
|
|
25
|
+
option,
|
|
26
|
+
onPress: props.onPress
|
|
24
27
|
},
|
|
25
28
|
getQuickOptionKey(option.value) ?? index
|
|
26
29
|
))
|
|
27
30
|
}
|
|
28
31
|
);
|
|
29
32
|
});
|
|
33
|
+
function themedStyles(theme) {
|
|
34
|
+
return StyleSheet.create({
|
|
35
|
+
content: {
|
|
36
|
+
gap: theme.components.datetimePicker.quickDateOptions.gap
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
}
|
|
30
40
|
export {
|
|
31
41
|
QuickDateOptions
|
|
32
42
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/common/quick-date-options.tsx"],"sourcesContent":["import { memo
|
|
1
|
+
{"version":3,"sources":["../../../src/components/common/quick-date-options.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { ScrollView, StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useEventCallback } from \"@impulse-ui-native/core\";\nimport { Tag } from \"@impulse-ui-native/primitives\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { 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 styles = useThemedStyles(themedStyles);\n\n return (\n <ScrollView\n horizontal\n contentContainerStyle={styles.content}\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\nfunction themedStyles(theme: AppTheme) {\n return StyleSheet.create({\n content: {\n gap: theme.components.datetimePicker.quickDateOptions.gap,\n },\n });\n}\n"],"mappings":"AA4BS;AA5BT,SAAS,YAAY;AACrB,SAAS,YAAY,kBAAkB;AAGvC,SAAS,wBAAwB;AACjC,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAGhC,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,gBAAgB,YAAY;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAU;AAAA,MACV,uBAAuB,OAAO;AAAA,MAC9B,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;AAED,SAAS,aAAa,OAAiB;AACrC,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,KAAK,MAAM,WAAW,eAAe,iBAAiB;AAAA,IACxD;AAAA,EACF,CAAC;AACH;","names":["QuickDateOptionTag","QuickDateOptions"]}
|
|
@@ -1,39 +1,16 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { memo, useCallback, useEffect,
|
|
3
|
-
import {
|
|
4
|
-
FlatList,
|
|
5
|
-
StyleSheet
|
|
6
|
-
} from "react-native";
|
|
2
|
+
import { memo, useCallback, useEffect, useRef } from "react";
|
|
3
|
+
import { FlatList, StyleSheet } from "react-native";
|
|
7
4
|
import { Pressable, Typography, View } from "@impulse-ui-native/primitives";
|
|
8
|
-
import {
|
|
9
|
-
useComponentsTokens
|
|
10
|
-
} from "@impulse-ui-native/theme";
|
|
5
|
+
import { useComponentsTokens, useThemedStyles } from "@impulse-ui-native/theme";
|
|
11
6
|
import { getClosestIndexByValue } from "../../utils";
|
|
12
7
|
const PickerColumn = memo(function PickerColumn2(props) {
|
|
13
8
|
const { data, label, value, initialScrollIndex = 0, onChange } = props;
|
|
14
|
-
const tokens = useComponentsTokens();
|
|
15
|
-
const columnTokens = tokens.timePicker.column;
|
|
16
9
|
const listRef = useRef(null);
|
|
17
10
|
const currentIndexRef = useRef(initialScrollIndex);
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
{
|
|
22
|
-
width: columnTokens.listWidth,
|
|
23
|
-
height: columnTokens.itemHeight
|
|
24
|
-
}
|
|
25
|
-
],
|
|
26
|
-
[columnTokens.listWidth, columnTokens.itemHeight]
|
|
27
|
-
);
|
|
28
|
-
const contentContainerStyle = useMemo(
|
|
29
|
-
() => [
|
|
30
|
-
styles.contentContainerStyle,
|
|
31
|
-
{
|
|
32
|
-
paddingVertical: columnTokens.verticalPadding
|
|
33
|
-
}
|
|
34
|
-
],
|
|
35
|
-
[columnTokens.verticalPadding]
|
|
36
|
-
);
|
|
11
|
+
const tokens = useComponentsTokens();
|
|
12
|
+
const columnTokens = tokens.timePicker.column;
|
|
13
|
+
const styles = useThemedStyles(themedStyles);
|
|
37
14
|
const keyExtractor = useCallback((item, index) => {
|
|
38
15
|
return `${item}-${index}`;
|
|
39
16
|
}, []);
|
|
@@ -58,7 +35,7 @@ const PickerColumn = memo(function PickerColumn2(props) {
|
|
|
58
35
|
({ item }) => {
|
|
59
36
|
const selected = item === value;
|
|
60
37
|
const fontWeight = selected ? columnTokens.selectedFontWeight : columnTokens.fontWeight;
|
|
61
|
-
return /* @__PURE__ */ jsx(Pressable, { style:
|
|
38
|
+
return /* @__PURE__ */ jsx(Pressable, { style: styles.pressable, children: /* @__PURE__ */ jsx(
|
|
62
39
|
Typography.Master,
|
|
63
40
|
{
|
|
64
41
|
fontSize: columnTokens.fontSize,
|
|
@@ -77,7 +54,7 @@ const PickerColumn = memo(function PickerColumn2(props) {
|
|
|
77
54
|
columnTokens.fontWeight,
|
|
78
55
|
columnTokens.selectedColor,
|
|
79
56
|
columnTokens.selectedFontWeight,
|
|
80
|
-
|
|
57
|
+
styles.pressable,
|
|
81
58
|
value
|
|
82
59
|
]
|
|
83
60
|
);
|
|
@@ -146,7 +123,7 @@ const PickerColumn = memo(function PickerColumn2(props) {
|
|
|
146
123
|
decelerationRate: "fast",
|
|
147
124
|
initialScrollIndex,
|
|
148
125
|
showsVerticalScrollIndicator: false,
|
|
149
|
-
contentContainerStyle,
|
|
126
|
+
contentContainerStyle: styles.contentContainer,
|
|
150
127
|
onMomentumScrollEnd,
|
|
151
128
|
onScrollToIndexFailed,
|
|
152
129
|
removeClippedSubviews: true,
|
|
@@ -164,13 +141,20 @@ const PickerColumn = memo(function PickerColumn2(props) {
|
|
|
164
141
|
}
|
|
165
142
|
);
|
|
166
143
|
});
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
144
|
+
function themedStyles(theme) {
|
|
145
|
+
const columnTokens = theme.components.timePicker.column;
|
|
146
|
+
return StyleSheet.create({
|
|
147
|
+
contentContainer: {
|
|
148
|
+
paddingVertical: columnTokens.verticalPadding
|
|
149
|
+
},
|
|
150
|
+
pressable: {
|
|
151
|
+
alignItems: "center",
|
|
152
|
+
height: columnTokens.itemHeight,
|
|
153
|
+
justifyContent: "center",
|
|
154
|
+
width: columnTokens.listWidth
|
|
155
|
+
}
|
|
156
|
+
});
|
|
157
|
+
}
|
|
174
158
|
export {
|
|
175
159
|
PickerColumn
|
|
176
160
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/time/picker-column.tsx"],"sourcesContent":["import { memo, useCallback, useEffect,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/time/picker-column.tsx"],"sourcesContent":["import type {\n ListRenderItemInfo,\n NativeScrollEvent,\n NativeSyntheticEvent,\n} from \"react-native\";\nimport { memo, useCallback, useEffect, useRef } from \"react\";\nimport { FlatList, StyleSheet } from \"react-native\";\n\nimport type { AppTheme, FontWeightValue } from \"@impulse-ui-native/theme\";\nimport { Pressable, Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { getClosestIndexByValue } from \"../../utils\";\n\ninterface PickerColumnProps {\n data: number[];\n label: string;\n type: \"hour\" | \"minute\" | \"second\";\n format: \"12h\" | \"24h\";\n value?: number;\n initialScrollIndex?: number;\n onChange?: (value: number) => void;\n}\n\nexport const PickerColumn = memo(function PickerColumn(\n props: PickerColumnProps,\n) {\n const { data, label, value, initialScrollIndex = 0, onChange } = props;\n\n const listRef = useRef<FlatList<number>>(null);\n const currentIndexRef = useRef(initialScrollIndex);\n const tokens = useComponentsTokens();\n const columnTokens = tokens.timePicker.column;\n const styles = useThemedStyles(themedStyles);\n\n const keyExtractor = useCallback((item: number, index: number) => {\n return `${item}-${index}`;\n }, []);\n\n const getItemLayout = useCallback(\n (_: ArrayLike<number> | null | undefined, index: number) => {\n return {\n length: columnTokens.itemHeight,\n offset: columnTokens.itemHeight * index,\n index,\n };\n },\n [columnTokens.itemHeight],\n );\n\n const scrollToIndex = useCallback((index: number, animated: boolean) => {\n currentIndexRef.current = index;\n\n listRef.current?.scrollToIndex({\n index,\n animated,\n });\n }, []);\n\n const renderItem = useCallback(\n ({ item }: ListRenderItemInfo<number>) => {\n const selected = item === value;\n const fontWeight: FontWeightValue = (\n selected ? columnTokens.selectedFontWeight : columnTokens.fontWeight\n ) as FontWeightValue;\n\n return (\n <Pressable style={styles.pressable}>\n <Typography.Master\n fontSize={columnTokens.fontSize}\n color={selected ? columnTokens.selectedColor : columnTokens.color}\n textAlign=\"center\"\n numberOfLines={1}\n fontWeight={fontWeight}\n numeric\n >\n {String(item).padStart(2, \"0\")}\n </Typography.Master>\n </Pressable>\n );\n },\n [\n columnTokens.color,\n columnTokens.fontSize,\n columnTokens.fontWeight,\n columnTokens.selectedColor,\n columnTokens.selectedFontWeight,\n styles.pressable,\n value,\n ],\n );\n\n const onMomentumScrollEnd = useCallback(\n (event: NativeSyntheticEvent<NativeScrollEvent>) => {\n const offset = event.nativeEvent.contentOffset.y;\n const index = Math.round(offset / columnTokens.itemHeight);\n const newValue = data[index];\n\n if (newValue === value) {\n return;\n }\n\n currentIndexRef.current = index;\n\n if (newValue !== undefined) {\n onChange?.(newValue);\n }\n },\n [columnTokens.itemHeight, data, onChange, value],\n );\n\n const onScrollToIndexFailed = useCallback(() => {\n requestAnimationFrame(() => {\n listRef.current?.scrollToOffset({\n offset: initialScrollIndex * columnTokens.itemHeight,\n animated: false,\n });\n });\n }, [columnTokens.itemHeight, initialScrollIndex]);\n\n useEffect(() => {\n if (value === undefined) {\n return;\n }\n\n const closestIndex = getClosestIndexByValue(\n data,\n value,\n currentIndexRef.current,\n );\n\n if (closestIndex === -1 || closestIndex === currentIndexRef.current) {\n return;\n }\n\n scrollToIndex(closestIndex, true);\n }, [data, scrollToIndex, value]);\n\n return (\n <View\n width={columnTokens.width}\n height={columnTokens.height}\n flexDirection=\"row\"\n justifyContent=\"center\"\n gap={columnTokens.gap}\n >\n <View\n width={columnTokens.listWidth}\n height={columnTokens.height}\n overflow=\"hidden\"\n >\n <FlatList\n ref={listRef}\n data={data}\n renderItem={renderItem}\n keyExtractor={keyExtractor}\n getItemLayout={getItemLayout}\n snapToInterval={columnTokens.itemHeight}\n snapToAlignment=\"start\"\n decelerationRate=\"fast\"\n initialScrollIndex={initialScrollIndex}\n showsVerticalScrollIndicator={false}\n contentContainerStyle={styles.contentContainer}\n onMomentumScrollEnd={onMomentumScrollEnd}\n onScrollToIndexFailed={onScrollToIndexFailed}\n removeClippedSubviews\n windowSize={3}\n initialNumToRender={7}\n maxToRenderPerBatch={7}\n updateCellsBatchingPeriod={50}\n scrollEventThrottle={16}\n />\n </View>\n\n <Typography.Body alignSelf=\"center\">{label}</Typography.Body>\n </View>\n );\n});\n\nfunction themedStyles(theme: AppTheme) {\n const columnTokens = theme.components.timePicker.column;\n\n return StyleSheet.create({\n contentContainer: {\n paddingVertical: columnTokens.verticalPadding,\n },\n pressable: {\n alignItems: \"center\",\n height: columnTokens.itemHeight,\n justifyContent: \"center\",\n width: columnTokens.listWidth,\n },\n });\n}\n"],"mappings":"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","names":["PickerColumn"]}
|
|
@@ -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":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/datetime",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.9.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/
|
|
37
|
-
"@impulse-ui-native/
|
|
31
|
+
"@impulse-ui-native/core": "2.9.0",
|
|
32
|
+
"@impulse-ui-native/theme": "2.9.0",
|
|
33
|
+
"@impulse-ui-native/icon": "2.9.0",
|
|
34
|
+
"@impulse-ui-native/select": "2.9.0",
|
|
35
|
+
"@impulse-ui-native/flyout": "2.9.0",
|
|
36
|
+
"@impulse-ui-native/primitives": "2.9.0",
|
|
37
|
+
"@impulse-ui-native/portal": "2.9.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/react": "~19.2.14",
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
"react": "19.2.3",
|
|
45
45
|
"react-native": "0.86.2",
|
|
46
46
|
"typescript": "~6.0.3",
|
|
47
|
-
"@impulse-ui-native/
|
|
47
|
+
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
48
48
|
"@impulse-ui-native/tsconfig": "1.0.0",
|
|
49
|
-
"@impulse-ui-native/
|
|
49
|
+
"@impulse-ui-native/prettier-config": "1.0.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": ">=18",
|