@impulse-ui-native/datetime 2.1.0 → 2.1.2

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.
Files changed (91) hide show
  1. package/dist/components/common/calendar-day.d.mts +16 -0
  2. package/dist/components/common/calendar-day.js +56 -0
  3. package/dist/components/common/calendar-day.js.map +1 -0
  4. package/dist/components/common/calendar.d.mts +14 -0
  5. package/dist/components/common/calendar.js +58 -0
  6. package/dist/components/common/calendar.js.map +1 -0
  7. package/dist/components/common/date-control.d.mts +14 -0
  8. package/dist/components/common/date-control.js +57 -0
  9. package/dist/components/common/date-control.js.map +1 -0
  10. package/dist/components/common/datetime-picker-flyout-actions.d.mts +15 -0
  11. package/dist/components/common/datetime-picker-flyout-actions.js +26 -0
  12. package/dist/components/common/datetime-picker-flyout-actions.js.map +1 -0
  13. package/dist/components/common/quick-date-options.d.mts +13 -0
  14. package/dist/components/common/quick-date-options.js +33 -0
  15. package/dist/components/common/quick-date-options.js.map +1 -0
  16. package/dist/components/common/visible-date-select.d.mts +11 -0
  17. package/dist/components/common/visible-date-select.js +70 -0
  18. package/dist/components/common/visible-date-select.js.map +1 -0
  19. package/dist/components/date/date-picker.d.mts +10 -0
  20. package/dist/components/date/date-picker.flyout.d.mts +12 -0
  21. package/dist/components/date/date-picker.flyout.js +58 -0
  22. package/dist/components/date/date-picker.flyout.js.map +1 -0
  23. package/dist/components/date/date-picker.js +61 -0
  24. package/dist/components/date/date-picker.js.map +1 -0
  25. package/dist/components/date/date-range-picker.d.mts +10 -0
  26. package/dist/components/date/date-range-picker.js +63 -0
  27. package/dist/components/date/date-range-picker.js.map +1 -0
  28. package/dist/components/datetime/datetime-picker.d.mts +10 -0
  29. package/dist/components/datetime/datetime-picker.flyout.d.mts +13 -0
  30. package/dist/components/datetime/datetime-picker.flyout.js +80 -0
  31. package/dist/components/datetime/datetime-picker.flyout.js.map +1 -0
  32. package/dist/components/datetime/datetime-picker.js +63 -0
  33. package/dist/components/datetime/datetime-picker.js.map +1 -0
  34. package/dist/components/datetime/datetime-range-picker.d.mts +10 -0
  35. package/dist/components/datetime/datetime-range-picker.flyout.d.mts +14 -0
  36. package/dist/components/datetime/datetime-range-picker.flyout.js +114 -0
  37. package/dist/components/datetime/datetime-range-picker.flyout.js.map +1 -0
  38. package/dist/components/datetime/datetime-range-picker.js +69 -0
  39. package/dist/components/datetime/datetime-range-picker.js.map +1 -0
  40. package/dist/components/index.d.mts +12 -0
  41. package/dist/components/index.js +13 -0
  42. package/dist/components/index.js.map +1 -0
  43. package/dist/components/time/picker-column.d.mts +15 -0
  44. package/dist/components/time/picker-column.js +177 -0
  45. package/dist/components/time/picker-column.js.map +1 -0
  46. package/dist/components/time/time-picker.d.mts +14 -0
  47. package/dist/components/time/time-picker.flyout.d.mts +13 -0
  48. package/dist/components/time/time-picker.flyout.js +153 -0
  49. package/dist/components/time/time-picker.flyout.js.map +1 -0
  50. package/dist/components/time/time-picker.js +111 -0
  51. package/dist/components/time/time-picker.js.map +1 -0
  52. package/dist/constants/index.d.mts +1 -0
  53. package/dist/constants/index.js +2 -0
  54. package/dist/constants/index.js.map +1 -0
  55. package/dist/constants/picker.constants.d.mts +11 -0
  56. package/dist/constants/picker.constants.js +17 -0
  57. package/dist/constants/picker.constants.js.map +1 -0
  58. package/dist/hooks/index.d.mts +6 -0
  59. package/dist/hooks/index.js +7 -0
  60. package/dist/hooks/index.js.map +1 -0
  61. package/dist/hooks/use-datetime-picker.hook.d.mts +32 -0
  62. package/dist/hooks/use-datetime-picker.hook.js +112 -0
  63. package/dist/hooks/use-datetime-picker.hook.js.map +1 -0
  64. package/dist/hooks/use-datetime-range-picker.hook.d.mts +34 -0
  65. package/dist/hooks/use-datetime-range-picker.hook.js +161 -0
  66. package/dist/hooks/use-datetime-range-picker.hook.js.map +1 -0
  67. package/dist/index.d.mts +14 -117
  68. package/dist/index.js +3 -1741
  69. package/dist/index.js.map +1 -1
  70. package/dist/types/common.types.d.mts +42 -0
  71. package/dist/types/common.types.js +1 -0
  72. package/dist/types/common.types.js.map +1 -0
  73. package/dist/types/datetime-picker.types.d.mts +12 -0
  74. package/dist/types/datetime-picker.types.js +1 -0
  75. package/dist/types/datetime-picker.types.js.map +1 -0
  76. package/dist/types/datetime-range-picker.types.d.mts +12 -0
  77. package/dist/types/datetime-range-picker.types.js +1 -0
  78. package/dist/types/datetime-range-picker.types.js.map +1 -0
  79. package/dist/types/index.d.mts +5 -0
  80. package/dist/types/index.js +4 -0
  81. package/dist/types/index.js.map +1 -0
  82. package/dist/utils/calendar-day.utils.d.mts +32 -0
  83. package/dist/utils/calendar-day.utils.js +120 -0
  84. package/dist/utils/calendar-day.utils.js.map +1 -0
  85. package/dist/utils/datetime.utils.d.mts +22 -0
  86. package/dist/utils/datetime.utils.js +165 -0
  87. package/dist/utils/datetime.utils.js.map +1 -0
  88. package/dist/utils/index.d.mts +5 -0
  89. package/dist/utils/index.js +3 -0
  90. package/dist/utils/index.js.map +1 -0
  91. package/package.json +11 -10
@@ -0,0 +1,16 @@
1
+ import * as react from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+
4
+ interface CalendarDayProps {
5
+ date: Date;
6
+ selected?: boolean;
7
+ isSelected?: boolean;
8
+ isRangeStart?: boolean;
9
+ isInRange?: boolean;
10
+ isRangeEnd?: boolean;
11
+ isCurrentMonth?: boolean;
12
+ onPress?: (date: Date) => void;
13
+ }
14
+ declare const CalendarDay: react.MemoExoticComponent<(props: CalendarDayProps) => react_jsx_runtime.JSX.Element>;
15
+
16
+ export { CalendarDay };
@@ -0,0 +1,56 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { memo, useCallback } from "react";
3
+ import { StyleSheet } from "react-native";
4
+ import { Pressable, Typography, View } from "@impulse-ui-native/primitives";
5
+ import { useThemedStyles } from "@impulse-ui-native/theme";
6
+ const CalendarDay = memo(function CalendarDay2(props) {
7
+ const styles = useThemedStyles(themedStyles, props, [
8
+ props.isSelected,
9
+ props.isRangeStart,
10
+ props.isInRange,
11
+ props.isRangeEnd,
12
+ props.isCurrentMonth
13
+ ]);
14
+ const handleOnPress = useCallback(
15
+ () => props.onPress?.(props.date),
16
+ [props.date, props.onPress]
17
+ );
18
+ return /* @__PURE__ */ jsx(Pressable, { style: styles.pressableStyles, onPress: handleOnPress, children: /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsx(Typography.Body, { style: styles.text, numeric: true, children: props.date.getDate() }) }) });
19
+ });
20
+ function themedStyles(theme, props) {
21
+ const dayTokens = theme.components.datetimePicker.day;
22
+ let color = dayTokens.color;
23
+ let backgroundColor = "transparent";
24
+ if (!props.isCurrentMonth) {
25
+ color = dayTokens.outsideMonthColor;
26
+ }
27
+ if (props.isInRange) {
28
+ backgroundColor = dayTokens.rangeBackgroundColor;
29
+ color = dayTokens.rangeColor;
30
+ }
31
+ if (props.isSelected || props.isRangeStart || props.isRangeEnd) {
32
+ backgroundColor = dayTokens.selectedBackgroundColor;
33
+ color = dayTokens.selectedColor;
34
+ }
35
+ return StyleSheet.create({
36
+ pressableStyles: {
37
+ justifyContent: "center",
38
+ alignItems: "center"
39
+ },
40
+ container: {
41
+ borderRadius: dayTokens.borderRadius,
42
+ width: dayTokens.size,
43
+ height: dayTokens.size,
44
+ justifyContent: "center",
45
+ alignItems: "center",
46
+ backgroundColor
47
+ },
48
+ text: {
49
+ color
50
+ }
51
+ });
52
+ }
53
+ export {
54
+ CalendarDay
55
+ };
56
+ //# sourceMappingURL=calendar-day.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/common/calendar-day.tsx"],"sourcesContent":["import { memo, useCallback } from \"react\";\nimport { StyleSheet, TextStyle, ViewStyle } from \"react-native\";\n\nimport { Pressable, Typography, View } from \"@impulse-ui-native/primitives\";\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\ninterface CalendarDayProps {\n date: Date;\n selected?: boolean;\n isSelected?: boolean;\n isRangeStart?: boolean;\n isInRange?: boolean;\n isRangeEnd?: boolean;\n isCurrentMonth?: boolean;\n onPress?: (date: Date) => void;\n}\n\nexport const CalendarDay = memo(function CalendarDay(props: CalendarDayProps) {\n const styles = useThemedStyles(themedStyles, props, [\n props.isSelected,\n props.isRangeStart,\n props.isInRange,\n props.isRangeEnd,\n props.isCurrentMonth,\n ]);\n\n const handleOnPress = useCallback(\n () => props.onPress?.(props.date),\n [props.date, props.onPress],\n );\n\n return (\n <Pressable style={styles.pressableStyles} onPress={handleOnPress}>\n <View style={styles.container}>\n <Typography.Body style={styles.text} numeric>\n {props.date.getDate()}\n </Typography.Body>\n </View>\n </Pressable>\n );\n});\n\nfunction themedStyles(\n theme: AppTheme,\n props: {\n isSelected?: boolean;\n isRangeStart?: boolean;\n isInRange?: boolean;\n isRangeEnd?: boolean;\n isCurrentMonth?: boolean;\n },\n) {\n const dayTokens = theme.components.datetimePicker.day;\n\n let color: TextStyle[\"color\"] = dayTokens.color;\n let backgroundColor: ViewStyle[\"backgroundColor\"] = \"transparent\";\n\n if (!props.isCurrentMonth) {\n color = dayTokens.outsideMonthColor;\n }\n\n if (props.isInRange) {\n backgroundColor = dayTokens.rangeBackgroundColor;\n color = dayTokens.rangeColor;\n }\n\n if (props.isSelected || props.isRangeStart || props.isRangeEnd) {\n backgroundColor = dayTokens.selectedBackgroundColor;\n color = dayTokens.selectedColor;\n }\n\n return StyleSheet.create({\n pressableStyles: {\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n\n container: {\n borderRadius: dayTokens.borderRadius,\n width: dayTokens.size,\n height: dayTokens.size,\n justifyContent: \"center\",\n alignItems: \"center\",\n backgroundColor,\n },\n\n text: {\n color,\n },\n });\n}\n"],"mappings":"AAkCQ;AAlCR,SAAS,MAAM,mBAAmB;AAClC,SAAS,kBAAwC;AAEjD,SAAS,WAAW,YAAY,YAAY;AAC5C,SAAmB,uBAAuB;AAanC,MAAM,cAAc,KAAK,SAASA,aAAY,OAAyB;AAC5E,QAAM,SAAS,gBAAgB,cAAc,OAAO;AAAA,IAClD,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,IAChC,CAAC,MAAM,MAAM,MAAM,OAAO;AAAA,EAC5B;AAEA,SACE,oBAAC,aAAU,OAAO,OAAO,iBAAiB,SAAS,eACjD,8BAAC,QAAK,OAAO,OAAO,WAClB,8BAAC,WAAW,MAAX,EAAgB,OAAO,OAAO,MAAM,SAAO,MACzC,gBAAM,KAAK,QAAQ,GACtB,GACF,GACF;AAEJ,CAAC;AAED,SAAS,aACP,OACA,OAOA;AACA,QAAM,YAAY,MAAM,WAAW,eAAe;AAElD,MAAI,QAA4B,UAAU;AAC1C,MAAI,kBAAgD;AAEpD,MAAI,CAAC,MAAM,gBAAgB;AACzB,YAAQ,UAAU;AAAA,EACpB;AAEA,MAAI,MAAM,WAAW;AACnB,sBAAkB,UAAU;AAC5B,YAAQ,UAAU;AAAA,EACpB;AAEA,MAAI,MAAM,cAAc,MAAM,gBAAgB,MAAM,YAAY;AAC9D,sBAAkB,UAAU;AAC5B,YAAQ,UAAU;AAAA,EACpB;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,iBAAiB;AAAA,MACf,gBAAgB;AAAA,MAChB,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACT,cAAc,UAAU;AAAA,MACxB,OAAO,UAAU;AAAA,MACjB,QAAQ,UAAU;AAAA,MAClB,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CAAC;AACH;","names":["CalendarDay"]}
@@ -0,0 +1,14 @@
1
+ import * as react from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { TimeRange } from '../../types/common.types.mjs';
4
+ import '@impulse-ui-native/flyout';
5
+ import '@impulse-ui-native/primitives';
6
+
7
+ interface CalendarProps {
8
+ value: Date | TimeRange | null | undefined;
9
+ visible: Date;
10
+ onPress: (date: Date) => void;
11
+ }
12
+ declare const Calendar: react.MemoExoticComponent<(props: CalendarProps) => react_jsx_runtime.JSX.Element>;
13
+
14
+ export { Calendar };
@@ -0,0 +1,58 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { memo, useMemo } from "react";
3
+ import { Typography, View } from "@impulse-ui-native/primitives";
4
+ import { useComponentsTokens } from "@impulse-ui-native/theme";
5
+ import {
6
+ getCalendarDayState,
7
+ getDateKey,
8
+ getDayNames,
9
+ getMonthCalendarMatrix
10
+ } from "../../utils";
11
+ import { CalendarDay } from "./calendar-day";
12
+ const Calendar = memo(function Calendar2(props) {
13
+ const { visible, value, onPress } = props;
14
+ const tokens = useComponentsTokens();
15
+ const calendarTokens = tokens.datetimePicker.calendar;
16
+ const visibleMonth = visible.getMonth();
17
+ const visibleYear = visible.getFullYear();
18
+ const days = useMemo(() => {
19
+ return getDayNames();
20
+ }, []);
21
+ const calendar = useMemo(() => {
22
+ return getMonthCalendarMatrix(visibleYear, visibleMonth);
23
+ }, [visibleYear, visibleMonth]);
24
+ return /* @__PURE__ */ jsxs(View, { children: [
25
+ /* @__PURE__ */ jsx(
26
+ View,
27
+ {
28
+ flexDirection: "row",
29
+ marginBottom: calendarTokens.dayNamesMarginBottom,
30
+ children: days.map((day) => /* @__PURE__ */ jsx(Typography.Body, { flex: 1, textAlign: "center", children: day[0] }, day))
31
+ }
32
+ ),
33
+ /* @__PURE__ */ jsx(View, { gap: calendarTokens.weeksGap, children: calendar.map((dates, index) => /* @__PURE__ */ jsx(View, { flexDirection: "row", justifyContent: "space-around", children: dates.map((date) => {
34
+ const state = getCalendarDayState({
35
+ date,
36
+ visible,
37
+ value
38
+ });
39
+ return /* @__PURE__ */ jsx(
40
+ CalendarDay,
41
+ {
42
+ date,
43
+ isSelected: state.isSelected,
44
+ isInRange: state.isInRange,
45
+ isRangeStart: state.isRangeStart,
46
+ isRangeEnd: state.isRangeEnd,
47
+ isCurrentMonth: state.isCurrentMonth,
48
+ onPress
49
+ },
50
+ getDateKey(date)
51
+ );
52
+ }) }, index)) })
53
+ ] });
54
+ });
55
+ export {
56
+ Calendar
57
+ };
58
+ //# sourceMappingURL=calendar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/common/calendar.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { Typography, View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens, useTheme } from \"@impulse-ui-native/theme\";\n\nimport { TimeRange } from \"../../types\";\nimport {\n getCalendarDayState,\n getDateKey,\n getDayNames,\n getMonthCalendarMatrix,\n} from \"../../utils\";\nimport { CalendarDay } from \"./calendar-day\";\n\ninterface CalendarProps {\n value: Date | TimeRange | null | undefined;\n visible: Date;\n onPress: (date: Date) => void;\n}\n\nexport const Calendar = memo(function Calendar(props: CalendarProps) {\n const { visible, value, onPress } = props;\n\n const tokens = useComponentsTokens();\n const calendarTokens = tokens.datetimePicker.calendar;\n\n const visibleMonth = visible.getMonth();\n const visibleYear = visible.getFullYear();\n\n const days = useMemo(() => {\n return getDayNames();\n }, []);\n\n const calendar = useMemo(() => {\n return getMonthCalendarMatrix(visibleYear, visibleMonth);\n }, [visibleYear, visibleMonth]);\n\n return (\n <View>\n <View\n flexDirection=\"row\"\n marginBottom={calendarTokens.dayNamesMarginBottom}\n >\n {days.map((day) => (\n <Typography.Body flex={1} textAlign=\"center\" key={day}>\n {day[0]}\n </Typography.Body>\n ))}\n </View>\n\n <View gap={calendarTokens.weeksGap}>\n {calendar.map((dates, index) => (\n <View flexDirection=\"row\" justifyContent=\"space-around\" key={index}>\n {dates.map((date) => {\n const state = getCalendarDayState({\n date,\n visible,\n value,\n });\n\n return (\n <CalendarDay\n key={getDateKey(date)}\n date={date}\n isSelected={state.isSelected}\n isInRange={state.isInRange}\n isRangeStart={state.isRangeStart}\n isRangeEnd={state.isRangeEnd}\n isCurrentMonth={state.isCurrentMonth}\n onPress={onPress}\n />\n );\n })}\n </View>\n ))}\n </View>\n </View>\n );\n});\n"],"mappings":"AAsCI,SAMM,KANN;AAtCJ,SAAS,MAAM,eAAe;AAE9B,SAAS,YAAY,YAAY;AACjC,SAAS,2BAAqC;AAG9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAQrB,MAAM,WAAW,KAAK,SAASA,UAAS,OAAsB;AACnE,QAAM,EAAE,SAAS,OAAO,QAAQ,IAAI;AAEpC,QAAM,SAAS,oBAAoB;AACnC,QAAM,iBAAiB,OAAO,eAAe;AAE7C,QAAM,eAAe,QAAQ,SAAS;AACtC,QAAM,cAAc,QAAQ,YAAY;AAExC,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,QAAQ,MAAM;AAC7B,WAAO,uBAAuB,aAAa,YAAY;AAAA,EACzD,GAAG,CAAC,aAAa,YAAY,CAAC;AAE9B,SACE,qBAAC,QACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAc;AAAA,QACd,cAAc,eAAe;AAAA,QAE5B,eAAK,IAAI,CAAC,QACT,oBAAC,WAAW,MAAX,EAAgB,MAAM,GAAG,WAAU,UACjC,cAAI,CAAC,KAD0C,GAElD,CACD;AAAA;AAAA,IACH;AAAA,IAEA,oBAAC,QAAK,KAAK,eAAe,UACvB,mBAAS,IAAI,CAAC,OAAO,UACpB,oBAAC,QAAK,eAAc,OAAM,gBAAe,gBACtC,gBAAM,IAAI,CAAC,SAAS;AACnB,YAAM,QAAQ,oBAAoB;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,YAAY,MAAM;AAAA,UAClB,WAAW,MAAM;AAAA,UACjB,cAAc,MAAM;AAAA,UACpB,YAAY,MAAM;AAAA,UAClB,gBAAgB,MAAM;AAAA,UACtB;AAAA;AAAA,QAPK,WAAW,IAAI;AAAA,MAQtB;AAAA,IAEJ,CAAC,KApB0D,KAqB7D,CACD,GACH;AAAA,KACF;AAEJ,CAAC;","names":["Calendar"]}
@@ -0,0 +1,14 @@
1
+ import * as react from 'react';
2
+ import { PropsWithChildren } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { PressableProps } from 'react-native';
5
+ import { DatetimePickerCommonProps } from '../../types/common.types.mjs';
6
+ import '@impulse-ui-native/flyout';
7
+ import '@impulse-ui-native/primitives';
8
+
9
+ interface DateControlProps extends DatetimePickerCommonProps {
10
+ onPress: PressableProps["onPress"];
11
+ }
12
+ declare const DateControl: react.MemoExoticComponent<(props: PropsWithChildren<DateControlProps>) => react_jsx_runtime.JSX.Element>;
13
+
14
+ export { DateControl };
@@ -0,0 +1,57 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { memo } from "react";
3
+ import { CalendarDotsIcon } from "@impulse-ui-native/icon/icons/calendar-dots";
4
+ import { Control, Pressable } from "@impulse-ui-native/primitives";
5
+ const DateControl = memo(function DateControl2(props) {
6
+ const {
7
+ size = "medium",
8
+ variant = "outlined",
9
+ label,
10
+ error,
11
+ disabled,
12
+ PrefixIcon = CalendarDotsIcon,
13
+ Prefix,
14
+ onPressPrefix: onPrefixPress,
15
+ SuffixIcon,
16
+ Suffix,
17
+ onPressSuffix: onSuffixPress,
18
+ onPress,
19
+ children
20
+ } = props;
21
+ return /* @__PURE__ */ jsx(
22
+ Control.Provider,
23
+ {
24
+ size,
25
+ variant,
26
+ error,
27
+ disabled,
28
+ children: /* @__PURE__ */ jsxs(Control.Root, { children: [
29
+ /* @__PURE__ */ jsx(Control.Label, { children: label }),
30
+ /* @__PURE__ */ jsx(Pressable, { onPress, children: /* @__PURE__ */ jsxs(Control.Container, { children: [
31
+ /* @__PURE__ */ jsx(
32
+ Control.Addon,
33
+ {
34
+ icon: PrefixIcon,
35
+ Content: Prefix,
36
+ onPress: onPrefixPress
37
+ }
38
+ ),
39
+ children,
40
+ /* @__PURE__ */ jsx(
41
+ Control.Addon,
42
+ {
43
+ icon: SuffixIcon,
44
+ Content: Suffix,
45
+ onPress: onSuffixPress
46
+ }
47
+ )
48
+ ] }) }),
49
+ /* @__PURE__ */ jsx(Control.Error, {})
50
+ ] })
51
+ }
52
+ );
53
+ });
54
+ export {
55
+ DateControl
56
+ };
57
+ //# sourceMappingURL=date-control.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/common/date-control.tsx"],"sourcesContent":["import { memo, PropsWithChildren } from \"react\";\nimport { PressableProps } from \"react-native\";\n\nimport { CalendarDotsIcon } from \"@impulse-ui-native/icon/icons/calendar-dots\";\nimport { Control, Pressable } from \"@impulse-ui-native/primitives\";\n\nimport { DatetimePickerCommonProps } from \"../../types\";\n\ninterface DateControlProps extends DatetimePickerCommonProps {\n onPress: PressableProps[\"onPress\"];\n}\n\nexport const DateControl = memo(function DateControl(\n props: PropsWithChildren<DateControlProps>,\n) {\n const {\n size = \"medium\",\n variant = \"outlined\",\n label,\n error,\n disabled,\n PrefixIcon = CalendarDotsIcon,\n Prefix,\n onPressPrefix: onPrefixPress,\n SuffixIcon,\n Suffix,\n onPressSuffix: onSuffixPress,\n onPress,\n children,\n } = props;\n\n return (\n <Control.Provider\n size={size}\n variant={variant}\n error={error}\n disabled={disabled}\n >\n <Control.Root>\n <Control.Label>{label}</Control.Label>\n <Pressable onPress={onPress}>\n <Control.Container>\n <Control.Addon\n icon={PrefixIcon}\n Content={Prefix}\n onPress={onPrefixPress}\n />\n {children}\n <Control.Addon\n icon={SuffixIcon}\n Content={Suffix}\n onPress={onSuffixPress}\n />\n </Control.Container>\n </Pressable>\n <Control.Error />\n </Control.Root>\n </Control.Provider>\n );\n});\n"],"mappings":"AAuCQ,cAEE,YAFF;AAvCR,SAAS,YAA+B;AAGxC,SAAS,wBAAwB;AACjC,SAAS,SAAS,iBAAiB;AAQ5B,MAAM,cAAc,KAAK,SAASA,aACvC,OACA;AACA,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,+BAAC,QAAQ,MAAR,EACC;AAAA,4BAAC,QAAQ,OAAR,EAAe,iBAAM;AAAA,QACtB,oBAAC,aAAU,SACT,+BAAC,QAAQ,WAAR,EACC;AAAA;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,MAAM;AAAA,cACN,SAAS;AAAA,cACT,SAAS;AAAA;AAAA,UACX;AAAA,UACC;AAAA,UACD;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,MAAM;AAAA,cACN,SAAS;AAAA,cACT,SAAS;AAAA;AAAA,UACX;AAAA,WACF,GACF;AAAA,QACA,oBAAC,QAAQ,OAAR,EAAc;AAAA,SACjB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["DateControl"]}
@@ -0,0 +1,15 @@
1
+ import * as react from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { DatetimePickerFlyoutCommonProps } from '../../types/common.types.mjs';
4
+ import '@impulse-ui-native/flyout';
5
+ import '@impulse-ui-native/primitives';
6
+
7
+ interface DatetimePickerFlyoutActionsProps {
8
+ canClear?: boolean;
9
+ onPressApply: DatetimePickerFlyoutCommonProps["onPressApply"];
10
+ onPressCancel: DatetimePickerFlyoutCommonProps["onPressCancel"];
11
+ onPressClear: DatetimePickerFlyoutCommonProps["onPressClear"];
12
+ }
13
+ declare const DatetimePickerFlyoutActions: react.MemoExoticComponent<(props: DatetimePickerFlyoutActionsProps) => react_jsx_runtime.JSX.Element>;
14
+
15
+ export { DatetimePickerFlyoutActions };
@@ -0,0 +1,26 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { memo } from "react";
3
+ import {
4
+ Button,
5
+ Pressable,
6
+ Typography,
7
+ View
8
+ } from "@impulse-ui-native/primitives";
9
+ import { useComponentsTokens } from "@impulse-ui-native/theme";
10
+ const DatetimePickerFlyoutActions = memo(
11
+ function DatetimePickerFlyoutActions2(props) {
12
+ const tokens = useComponentsTokens();
13
+ const flyoutActionsTokens = tokens.datetimePicker.flyoutActions;
14
+ return /* @__PURE__ */ jsxs(View, { gap: flyoutActionsTokens.gap, children: [
15
+ props.canClear ? /* @__PURE__ */ jsx(View, { alignItems: "center", children: /* @__PURE__ */ jsx(Pressable, { onPress: props.onPressClear, children: /* @__PURE__ */ jsx(Typography.BodyLarge, { color: flyoutActionsTokens.clearColor, children: "Clear" }) }) }) : null,
16
+ /* @__PURE__ */ jsxs(View, { flexDirection: "row", gap: flyoutActionsTokens.buttonsGap, children: [
17
+ /* @__PURE__ */ jsx(View, { flex: 1, children: /* @__PURE__ */ jsx(Button, { onPress: props.onPressCancel, variant: "outlined", children: "Cancel" }) }),
18
+ /* @__PURE__ */ jsx(View, { flex: 1, children: /* @__PURE__ */ jsx(Button, { onPress: props.onPressApply, children: "Apply" }) })
19
+ ] })
20
+ ] });
21
+ }
22
+ );
23
+ export {
24
+ DatetimePickerFlyoutActions
25
+ };
26
+ //# sourceMappingURL=datetime-picker-flyout-actions.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/common/datetime-picker-flyout-actions.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport {\n Button,\n Pressable,\n Typography,\n View,\n} from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { DatetimePickerFlyoutCommonProps } from \"../../types\";\n\ninterface DatetimePickerFlyoutActionsProps {\n canClear?: boolean;\n onPressApply: DatetimePickerFlyoutCommonProps[\"onPressApply\"];\n onPressCancel: DatetimePickerFlyoutCommonProps[\"onPressCancel\"];\n onPressClear: DatetimePickerFlyoutCommonProps[\"onPressClear\"];\n}\n\nexport const DatetimePickerFlyoutActions = memo(\n function DatetimePickerFlyoutActions(\n props: DatetimePickerFlyoutActionsProps,\n ) {\n const tokens = useComponentsTokens();\n const flyoutActionsTokens = tokens.datetimePicker.flyoutActions;\n\n return (\n <View gap={flyoutActionsTokens.gap}>\n {props.canClear ? (\n <View alignItems=\"center\">\n <Pressable onPress={props.onPressClear}>\n <Typography.BodyLarge color={flyoutActionsTokens.clearColor}>\n Clear\n </Typography.BodyLarge>\n </Pressable>\n </View>\n ) : null}\n\n <View flexDirection=\"row\" gap={flyoutActionsTokens.buttonsGap}>\n <View flex={1}>\n <Button onPress={props.onPressCancel} variant=\"outlined\">\n Cancel\n </Button>\n </View>\n\n <View flex={1}>\n <Button onPress={props.onPressApply}>Apply</Button>\n </View>\n </View>\n </View>\n );\n },\n);\n"],"mappings":"AA+Bc,cAON,YAPM;AA/Bd,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AAW7B,MAAM,8BAA8B;AAAA,EACzC,SAASA,6BACP,OACA;AACA,UAAM,SAAS,oBAAoB;AACnC,UAAM,sBAAsB,OAAO,eAAe;AAElD,WACE,qBAAC,QAAK,KAAK,oBAAoB,KAC5B;AAAA,YAAM,WACL,oBAAC,QAAK,YAAW,UACf,8BAAC,aAAU,SAAS,MAAM,cACxB,8BAAC,WAAW,WAAX,EAAqB,OAAO,oBAAoB,YAAY,mBAE7D,GACF,GACF,IACE;AAAA,MAEJ,qBAAC,QAAK,eAAc,OAAM,KAAK,oBAAoB,YACjD;AAAA,4BAAC,QAAK,MAAM,GACV,8BAAC,UAAO,SAAS,MAAM,eAAe,SAAQ,YAAW,oBAEzD,GACF;AAAA,QAEA,oBAAC,QAAK,MAAM,GACV,8BAAC,UAAO,SAAS,MAAM,cAAc,mBAAK,GAC5C;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AACF;","names":["DatetimePickerFlyoutActions"]}
@@ -0,0 +1,13 @@
1
+ import * as react from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { QuickDateOption, TimeRange } from '../../types/common.types.mjs';
4
+ import '@impulse-ui-native/flyout';
5
+ import '@impulse-ui-native/primitives';
6
+
7
+ interface QuickDateOptionsProps {
8
+ options: QuickDateOption<Date | TimeRange>[];
9
+ onPress?: (date: QuickDateOption<Date | TimeRange>["value"]) => void;
10
+ }
11
+ declare const QuickDateOptions: react.MemoExoticComponent<(props: QuickDateOptionsProps) => react_jsx_runtime.JSX.Element>;
12
+
13
+ export { QuickDateOptions };
@@ -0,0 +1,33 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { memo, useMemo } from "react";
3
+ import { ScrollView } from "react-native";
4
+ import { Tag } from "@impulse-ui-native/primitives";
5
+ import { useComponentsTokens } from "@impulse-ui-native/theme";
6
+ import { getQuickOptionKey } from "../../utils";
7
+ const QuickDateOptions = memo(function QuickDateOptions2(props) {
8
+ const tokens = useComponentsTokens();
9
+ const style = useMemo(
10
+ () => ({ gap: tokens.datetimePicker.quickDateOptions.gap }),
11
+ [tokens.datetimePicker.quickDateOptions]
12
+ );
13
+ return /* @__PURE__ */ jsx(
14
+ ScrollView,
15
+ {
16
+ horizontal: true,
17
+ contentContainerStyle: style,
18
+ showsHorizontalScrollIndicator: false,
19
+ children: props.options.map((option, index) => /* @__PURE__ */ jsx(
20
+ Tag,
21
+ {
22
+ label: option.label,
23
+ onPress: () => props.onPress?.(option.value)
24
+ },
25
+ getQuickOptionKey(option.value) ?? index
26
+ ))
27
+ }
28
+ );
29
+ });
30
+ export {
31
+ QuickDateOptions
32
+ };
33
+ //# sourceMappingURL=quick-date-options.js.map
@@ -0,0 +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 <Tag\n key={getQuickOptionKey(option.value) ?? index}\n label={option.label}\n onPress={() => props.onPress?.(option.value)}\n />\n ))}\n </ScrollView>\n );\n});\n"],"mappings":"AA+BQ;AA/BR,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAA6B;AAEtC,SAAS,WAAW;AACpB,SAAS,2BAA2B;AAGpC,SAAS,yBAAyB;AAO3B,MAAM,mBAAmB,KAAK,SAASA,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,OAAO,OAAO;AAAA,UACd,SAAS,MAAM,MAAM,UAAU,OAAO,KAAK;AAAA;AAAA,QAFtC,kBAAkB,OAAO,KAAK,KAAK;AAAA,MAG1C,CACD;AAAA;AAAA,EACH;AAEJ,CAAC;","names":["QuickDateOptions"]}
@@ -0,0 +1,11 @@
1
+ import * as react from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+
4
+ interface VisibleDateSelectProps {
5
+ value: Date;
6
+ defaultValue?: Date;
7
+ onChange: (value: Date) => void;
8
+ }
9
+ declare const VisibleDateSelect: react.MemoExoticComponent<(props: VisibleDateSelectProps) => react_jsx_runtime.JSX.Element>;
10
+
11
+ export { VisibleDateSelect };
@@ -0,0 +1,70 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { memo, useCallback, useMemo } from "react";
3
+ import { CalendarDotsIcon } from "@impulse-ui-native/icon/icons/calendar-dots";
4
+ import { View } from "@impulse-ui-native/primitives";
5
+ import { Select } from "@impulse-ui-native/select";
6
+ import { useComponentsTokens } from "@impulse-ui-native/theme";
7
+ import { getMonthNames, getYears } from "../../utils";
8
+ const VisibleDateSelect = memo(function VisibleDateSelect2(props) {
9
+ const tokens = useComponentsTokens();
10
+ const monthOptions = useMemo(() => {
11
+ return getMonthNames().map((month, index) => ({
12
+ label: month,
13
+ value: index
14
+ }));
15
+ }, []);
16
+ const yearOptions = useMemo(() => {
17
+ return getYears().map((year) => ({
18
+ label: String(year),
19
+ value: year
20
+ }));
21
+ }, []);
22
+ const onChangeVisibleMonth = useCallback(
23
+ (month) => {
24
+ if (month !== void 0 && month !== props.value.getMonth()) {
25
+ const newDate = new Date(props.value);
26
+ newDate.setMonth(month);
27
+ props.onChange(newDate);
28
+ }
29
+ },
30
+ [props.value, props.onChange]
31
+ );
32
+ const onChangeVisibleYear = useCallback(
33
+ (year) => {
34
+ if (year !== void 0 && year !== props.value.getFullYear()) {
35
+ const newDate = new Date(props.value);
36
+ newDate.setFullYear(year);
37
+ props.onChange(newDate);
38
+ }
39
+ },
40
+ [props.value, props.onChange]
41
+ );
42
+ return /* @__PURE__ */ jsxs(View, { flexDirection: "row", gap: tokens.datetimePicker.visibleDateSelect.gap, children: [
43
+ /* @__PURE__ */ jsx(View, { flex: 1, children: /* @__PURE__ */ jsx(
44
+ Select,
45
+ {
46
+ options: monthOptions,
47
+ value: props.value.getMonth(),
48
+ defaultValue: props.defaultValue?.getMonth() ?? props.value.getMonth(),
49
+ PrefixIcon: CalendarDotsIcon,
50
+ onChange: onChangeVisibleMonth,
51
+ placeholder: "Month"
52
+ }
53
+ ) }),
54
+ /* @__PURE__ */ jsx(View, { flex: 1, children: /* @__PURE__ */ jsx(
55
+ Select,
56
+ {
57
+ options: yearOptions,
58
+ value: props.value.getFullYear(),
59
+ defaultValue: props.defaultValue?.getFullYear() ?? props.value.getFullYear(),
60
+ PrefixIcon: CalendarDotsIcon,
61
+ onChange: onChangeVisibleYear,
62
+ placeholder: "Year"
63
+ }
64
+ ) })
65
+ ] });
66
+ });
67
+ export {
68
+ VisibleDateSelect
69
+ };
70
+ //# sourceMappingURL=visible-date-select.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/common/visible-date-select.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from \"react\";\n\nimport { CalendarDotsIcon } from \"@impulse-ui-native/icon/icons/calendar-dots\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { Select, SelectOption } from \"@impulse-ui-native/select\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { getMonthNames, getYears } from \"../../utils\";\n\ninterface VisibleDateSelectProps {\n value: Date;\n defaultValue?: Date;\n onChange: (value: Date) => void;\n}\n\nexport const VisibleDateSelect = memo(function VisibleDateSelect(\n props: VisibleDateSelectProps,\n) {\n const tokens = useComponentsTokens();\n\n const monthOptions = useMemo<SelectOption<number>[]>(() => {\n return getMonthNames().map((month, index) => ({\n label: month,\n value: index,\n }));\n }, []);\n\n const yearOptions = useMemo<SelectOption<number>[]>(() => {\n return getYears().map((year) => ({\n label: String(year),\n value: year,\n }));\n }, []);\n\n const onChangeVisibleMonth = useCallback(\n (month: number | undefined) => {\n if (month !== undefined && month !== props.value.getMonth()) {\n const newDate = new Date(props.value);\n newDate.setMonth(month);\n\n props.onChange(newDate);\n }\n },\n [props.value, props.onChange],\n );\n\n const onChangeVisibleYear = useCallback(\n (year: number | undefined) => {\n if (year !== undefined && year !== props.value.getFullYear()) {\n const newDate = new Date(props.value);\n newDate.setFullYear(year);\n\n props.onChange(newDate);\n }\n },\n [props.value, props.onChange],\n );\n\n return (\n <View flexDirection=\"row\" gap={tokens.datetimePicker.visibleDateSelect.gap}>\n <View flex={1}>\n <Select\n options={monthOptions}\n value={props.value.getMonth()}\n defaultValue={\n props.defaultValue?.getMonth() ?? props.value.getMonth()\n }\n PrefixIcon={CalendarDotsIcon}\n onChange={onChangeVisibleMonth}\n placeholder=\"Month\"\n />\n </View>\n\n <View flex={1}>\n <Select\n options={yearOptions}\n value={props.value.getFullYear()}\n defaultValue={\n props.defaultValue?.getFullYear() ?? props.value.getFullYear()\n }\n PrefixIcon={CalendarDotsIcon}\n onChange={onChangeVisibleYear}\n placeholder=\"Year\"\n />\n </View>\n </View>\n );\n});\n"],"mappings":"AA2DI,SAEI,KAFJ;AA3DJ,SAAS,MAAM,aAAa,eAAe;AAE3C,SAAS,wBAAwB;AACjC,SAAS,YAAY;AACrB,SAAS,cAA4B;AACrC,SAAS,2BAA2B;AAEpC,SAAS,eAAe,gBAAgB;AAQjC,MAAM,oBAAoB,KAAK,SAASA,mBAC7C,OACA;AACA,QAAM,SAAS,oBAAoB;AAEnC,QAAM,eAAe,QAAgC,MAAM;AACzD,WAAO,cAAc,EAAE,IAAI,CAAC,OAAO,WAAW;AAAA,MAC5C,OAAO;AAAA,MACP,OAAO;AAAA,IACT,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,QAAgC,MAAM;AACxD,WAAO,SAAS,EAAE,IAAI,CAAC,UAAU;AAAA,MAC/B,OAAO,OAAO,IAAI;AAAA,MAClB,OAAO;AAAA,IACT,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAuB;AAAA,IAC3B,CAAC,UAA8B;AAC7B,UAAI,UAAU,UAAa,UAAU,MAAM,MAAM,SAAS,GAAG;AAC3D,cAAM,UAAU,IAAI,KAAK,MAAM,KAAK;AACpC,gBAAQ,SAAS,KAAK;AAEtB,cAAM,SAAS,OAAO;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,MAAM,OAAO,MAAM,QAAQ;AAAA,EAC9B;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,SAA6B;AAC5B,UAAI,SAAS,UAAa,SAAS,MAAM,MAAM,YAAY,GAAG;AAC5D,cAAM,UAAU,IAAI,KAAK,MAAM,KAAK;AACpC,gBAAQ,YAAY,IAAI;AAExB,cAAM,SAAS,OAAO;AAAA,MACxB;AAAA,IACF;AAAA,IACA,CAAC,MAAM,OAAO,MAAM,QAAQ;AAAA,EAC9B;AAEA,SACE,qBAAC,QAAK,eAAc,OAAM,KAAK,OAAO,eAAe,kBAAkB,KACrE;AAAA,wBAAC,QAAK,MAAM,GACV;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO,MAAM,MAAM,SAAS;AAAA,QAC5B,cACE,MAAM,cAAc,SAAS,KAAK,MAAM,MAAM,SAAS;AAAA,QAEzD,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,aAAY;AAAA;AAAA,IACd,GACF;AAAA,IAEA,oBAAC,QAAK,MAAM,GACV;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,OAAO,MAAM,MAAM,YAAY;AAAA,QAC/B,cACE,MAAM,cAAc,YAAY,KAAK,MAAM,MAAM,YAAY;AAAA,QAE/D,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,aAAY;AAAA;AAAA,IACd,GACF;AAAA,KACF;AAEJ,CAAC;","names":["VisibleDateSelect"]}
@@ -0,0 +1,10 @@
1
+ import * as react from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { DatetimePickerProps } from '../../types/datetime-picker.types.mjs';
4
+ import '../../types/common.types.mjs';
5
+ import '@impulse-ui-native/flyout';
6
+ import '@impulse-ui-native/primitives';
7
+
8
+ declare const DatePicker: react.MemoExoticComponent<(props: DatetimePickerProps) => react_jsx_runtime.JSX.Element>;
9
+
10
+ export { DatePicker };
@@ -0,0 +1,12 @@
1
+ import * as react from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { DatetimePickerFlyoutCommonProps, TimeRange } from '../../types/common.types.mjs';
4
+ import '@impulse-ui-native/flyout';
5
+ import '@impulse-ui-native/primitives';
6
+
7
+ interface DatePickerFlyoutProps extends DatetimePickerFlyoutCommonProps {
8
+ value: Date | TimeRange | null | undefined;
9
+ }
10
+ declare const DatePickerFlyout: react.MemoExoticComponent<(props: DatePickerFlyoutProps) => react_jsx_runtime.JSX.Element>;
11
+
12
+ export { DatePickerFlyout };
@@ -0,0 +1,58 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { memo } from "react";
3
+ import { Flyout } from "@impulse-ui-native/flyout";
4
+ import { Portal } from "@impulse-ui-native/portal";
5
+ import { View } from "@impulse-ui-native/primitives";
6
+ import { useComponentsTokens } from "@impulse-ui-native/theme";
7
+ import { Calendar } from "../common/calendar";
8
+ import { DatetimePickerFlyoutActions } from "../common/datetime-picker-flyout-actions";
9
+ import { QuickDateOptions } from "../common/quick-date-options";
10
+ import { VisibleDateSelect } from "../common/visible-date-select";
11
+ const DatePickerFlyout = memo(function DatePickerFlyout2(props) {
12
+ const {
13
+ visible,
14
+ value,
15
+ clearable,
16
+ quickDateOptions,
17
+ onPressQuickDateOption,
18
+ onChangeVisible,
19
+ onPressCalendarDay,
20
+ onPressClear,
21
+ onPressCancel,
22
+ onPressApply,
23
+ ...rest
24
+ } = props;
25
+ const tokens = useComponentsTokens();
26
+ const datePickerTokens = tokens.datetimePicker.datePickerFlyout;
27
+ return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Flyout, { ...rest, children: /* @__PURE__ */ jsxs(View, { gap: datePickerTokens.gap, children: [
28
+ /* @__PURE__ */ jsx(VisibleDateSelect, { value: visible, onChange: onChangeVisible }),
29
+ /* @__PURE__ */ jsx(
30
+ Calendar,
31
+ {
32
+ value,
33
+ visible,
34
+ onPress: onPressCalendarDay
35
+ }
36
+ ),
37
+ quickDateOptions && quickDateOptions.length > 0 ? /* @__PURE__ */ jsx(
38
+ QuickDateOptions,
39
+ {
40
+ options: quickDateOptions,
41
+ onPress: onPressQuickDateOption
42
+ }
43
+ ) : null,
44
+ /* @__PURE__ */ jsx(
45
+ DatetimePickerFlyoutActions,
46
+ {
47
+ canClear: Boolean(value && clearable),
48
+ onPressApply,
49
+ onPressCancel,
50
+ onPressClear
51
+ }
52
+ )
53
+ ] }) }) });
54
+ });
55
+ export {
56
+ DatePickerFlyout
57
+ };
58
+ //# sourceMappingURL=date-picker.flyout.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/date/date-picker.flyout.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Flyout } from \"@impulse-ui-native/flyout\";\nimport { Portal } from \"@impulse-ui-native/portal\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport { DatetimePickerFlyoutCommonProps, TimeRange } from \"../../types\";\nimport { Calendar } from \"../common/calendar\";\nimport { DatetimePickerFlyoutActions } from \"../common/datetime-picker-flyout-actions\";\nimport { QuickDateOptions } from \"../common/quick-date-options\";\nimport { VisibleDateSelect } from \"../common/visible-date-select\";\n\ninterface DatePickerFlyoutProps extends DatetimePickerFlyoutCommonProps {\n value: Date | TimeRange | null | undefined;\n}\n\nexport const DatePickerFlyout = memo(function DatePickerFlyout(\n props: DatePickerFlyoutProps,\n) {\n const {\n visible,\n value,\n clearable,\n quickDateOptions,\n onPressQuickDateOption,\n onChangeVisible,\n onPressCalendarDay,\n onPressClear,\n onPressCancel,\n onPressApply,\n ...rest\n } = props;\n\n const tokens = useComponentsTokens();\n const datePickerTokens = tokens.datetimePicker.datePickerFlyout;\n\n return (\n <Portal>\n <Flyout {...rest}>\n <View gap={datePickerTokens.gap}>\n <VisibleDateSelect value={visible} onChange={onChangeVisible} />\n\n <Calendar\n value={value}\n visible={visible}\n onPress={onPressCalendarDay}\n />\n\n {quickDateOptions && quickDateOptions.length > 0 ? (\n <QuickDateOptions\n options={quickDateOptions}\n onPress={onPressQuickDateOption}\n />\n ) : null}\n\n <DatetimePickerFlyoutActions\n canClear={Boolean(value && clearable)}\n onPressApply={onPressApply}\n onPressCancel={onPressCancel}\n onPressClear={onPressClear}\n />\n </View>\n </Flyout>\n </Portal>\n );\n});\n"],"mappings":"AAwCQ,SACE,KADF;AAxCR,SAAS,YAAY;AAErB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AAGpC,SAAS,gBAAgB;AACzB,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAM3B,MAAM,mBAAmB,KAAK,SAASA,kBAC5C,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,oBAAoB;AACnC,QAAM,mBAAmB,OAAO,eAAe;AAE/C,SACE,oBAAC,UACC,8BAAC,UAAQ,GAAG,MACV,+BAAC,QAAK,KAAK,iBAAiB,KAC1B;AAAA,wBAAC,qBAAkB,OAAO,SAAS,UAAU,iBAAiB;AAAA,IAE9D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA;AAAA,IACX;AAAA,IAEC,oBAAoB,iBAAiB,SAAS,IAC7C;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAS;AAAA;AAAA,IACX,IACE;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,QAAQ,SAAS,SAAS;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF,GACF,GACF;AAEJ,CAAC;","names":["DatePickerFlyout"]}
@@ -0,0 +1,61 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { memo } from "react";
3
+ import { Control } from "@impulse-ui-native/primitives";
4
+ import { useDatetimePicker } from "../../hooks";
5
+ import { DateControl } from "../common/date-control";
6
+ import { DatePickerFlyout } from "./date-picker.flyout";
7
+ const DatePicker = memo(function DatePicker2(props) {
8
+ const {
9
+ value,
10
+ defaultValue,
11
+ clearable,
12
+ onChange,
13
+ placeholder,
14
+ quickDateOptions,
15
+ ...rest
16
+ } = props;
17
+ const {
18
+ id,
19
+ isOpen,
20
+ visible,
21
+ tempDate,
22
+ selected,
23
+ setVisible,
24
+ close,
25
+ onPressOpen,
26
+ onPressApply,
27
+ onPressCancel,
28
+ onPressCalendarDay,
29
+ onPressClear,
30
+ onPressQuickDateOption,
31
+ syncState
32
+ } = useDatetimePicker({ value, defaultValue, onChange });
33
+ return /* @__PURE__ */ jsxs(DateControl, { ...rest, onPress: onPressOpen, children: [
34
+ selected === null ? /* @__PURE__ */ jsx(Control.Placeholder, { children: placeholder }) : null,
35
+ selected !== null ? /* @__PURE__ */ jsx(Control.Value, { children: selected.toDateString() }) : null,
36
+ /* @__PURE__ */ jsx(
37
+ DatePickerFlyout,
38
+ {
39
+ id,
40
+ open: isOpen,
41
+ title: "Date",
42
+ visible,
43
+ value: tempDate,
44
+ clearable,
45
+ quickDateOptions,
46
+ onClose: close,
47
+ onCloseFinished: syncState,
48
+ onPressQuickDateOption,
49
+ onChangeVisible: setVisible,
50
+ onPressCalendarDay,
51
+ onPressApply,
52
+ onPressCancel,
53
+ onPressClear
54
+ }
55
+ )
56
+ ] });
57
+ });
58
+ export {
59
+ DatePicker
60
+ };
61
+ //# sourceMappingURL=date-picker.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/components/date/date-picker.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Control } from \"@impulse-ui-native/primitives\";\n\nimport { useDatetimePicker } from \"../../hooks\";\nimport { DatetimePickerProps } from \"../../types\";\nimport { DateControl } from \"../common/date-control\";\nimport { DatePickerFlyout } from \"./date-picker.flyout\";\n\nexport const DatePicker = memo(function DatePicker(props: DatetimePickerProps) {\n const {\n value,\n defaultValue,\n clearable,\n onChange,\n placeholder,\n quickDateOptions,\n ...rest\n } = props;\n\n const {\n id,\n isOpen,\n visible,\n tempDate,\n selected,\n setVisible,\n close,\n onPressOpen,\n onPressApply,\n onPressCancel,\n onPressCalendarDay,\n onPressClear,\n onPressQuickDateOption,\n syncState,\n } = useDatetimePicker({ value, defaultValue, onChange });\n\n return (\n <DateControl {...rest} onPress={onPressOpen}>\n {selected === null ? (\n <Control.Placeholder>{placeholder}</Control.Placeholder>\n ) : null}\n\n {selected !== null ? (\n <Control.Value>{selected.toDateString()}</Control.Value>\n ) : null}\n\n <DatePickerFlyout\n id={id}\n open={isOpen}\n title=\"Date\"\n visible={visible}\n value={tempDate}\n clearable={clearable}\n quickDateOptions={quickDateOptions}\n onClose={close}\n onCloseFinished={syncState}\n onPressQuickDateOption={onPressQuickDateOption}\n onChangeVisible={setVisible}\n onPressCalendarDay={onPressCalendarDay}\n onPressApply={onPressApply}\n onPressCancel={onPressCancel}\n onPressClear={onPressClear}\n />\n </DateControl>\n );\n});\n"],"mappings":"AAsCI,SAEI,KAFJ;AAtCJ,SAAS,YAAY;AAErB,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAE1B,MAAM,aAAa,KAAK,SAASA,YAAW,OAA4B;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,EAAE,OAAO,cAAc,SAAS,CAAC;AAEvD,SACE,qBAAC,eAAa,GAAG,MAAM,SAAS,aAC7B;AAAA,iBAAa,OACZ,oBAAC,QAAQ,aAAR,EAAqB,uBAAY,IAChC;AAAA,IAEH,aAAa,OACZ,oBAAC,QAAQ,OAAR,EAAe,mBAAS,aAAa,GAAE,IACtC;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,OAAM;AAAA,QACN;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,iBAAiB;AAAA,QACjB;AAAA,QACA,iBAAiB;AAAA,QACjB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ,CAAC;","names":["DatePicker"]}
@@ -0,0 +1,10 @@
1
+ import * as react from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { DatetimeRangePickerProps } from '../../types/datetime-range-picker.types.mjs';
4
+ import '../../types/common.types.mjs';
5
+ import '@impulse-ui-native/flyout';
6
+ import '@impulse-ui-native/primitives';
7
+
8
+ declare const DateRangePicker: react.MemoExoticComponent<(props: DatetimeRangePickerProps) => react_jsx_runtime.JSX.Element>;
9
+
10
+ export { DateRangePicker };