@impulse-ui-native/datetime 2.1.0 → 2.1.1
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/calendar-day.d.mts +16 -0
- package/dist/components/common/calendar-day.js +56 -0
- package/dist/components/common/calendar-day.js.map +1 -0
- package/dist/components/common/calendar.d.mts +14 -0
- package/dist/components/common/calendar.js +58 -0
- package/dist/components/common/calendar.js.map +1 -0
- package/dist/components/common/date-control.d.mts +14 -0
- package/dist/components/common/date-control.js +57 -0
- package/dist/components/common/date-control.js.map +1 -0
- package/dist/components/common/datetime-picker-flyout-actions.d.mts +15 -0
- package/dist/components/common/datetime-picker-flyout-actions.js +26 -0
- package/dist/components/common/datetime-picker-flyout-actions.js.map +1 -0
- package/dist/components/common/quick-date-options.d.mts +13 -0
- package/dist/components/common/quick-date-options.js +33 -0
- package/dist/components/common/quick-date-options.js.map +1 -0
- package/dist/components/common/visible-date-select.d.mts +11 -0
- package/dist/components/common/visible-date-select.js +70 -0
- package/dist/components/common/visible-date-select.js.map +1 -0
- package/dist/components/date/date-picker.d.mts +10 -0
- package/dist/components/date/date-picker.flyout.d.mts +12 -0
- package/dist/components/date/date-picker.flyout.js +58 -0
- package/dist/components/date/date-picker.flyout.js.map +1 -0
- package/dist/components/date/date-picker.js +61 -0
- package/dist/components/date/date-picker.js.map +1 -0
- package/dist/components/date/date-range-picker.d.mts +10 -0
- package/dist/components/date/date-range-picker.js +63 -0
- package/dist/components/date/date-range-picker.js.map +1 -0
- package/dist/components/datetime/datetime-picker.d.mts +10 -0
- package/dist/components/datetime/datetime-picker.flyout.d.mts +13 -0
- package/dist/components/datetime/datetime-picker.flyout.js +80 -0
- package/dist/components/datetime/datetime-picker.flyout.js.map +1 -0
- package/dist/components/datetime/datetime-picker.js +63 -0
- package/dist/components/datetime/datetime-picker.js.map +1 -0
- package/dist/components/datetime/datetime-range-picker.d.mts +10 -0
- package/dist/components/datetime/datetime-range-picker.flyout.d.mts +14 -0
- package/dist/components/datetime/datetime-range-picker.flyout.js +114 -0
- package/dist/components/datetime/datetime-range-picker.flyout.js.map +1 -0
- package/dist/components/datetime/datetime-range-picker.js +69 -0
- package/dist/components/datetime/datetime-range-picker.js.map +1 -0
- package/dist/components/index.d.mts +12 -0
- package/dist/components/index.js +13 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/time/picker-column.d.mts +15 -0
- package/dist/components/time/picker-column.js +177 -0
- package/dist/components/time/picker-column.js.map +1 -0
- package/dist/components/time/time-picker.d.mts +14 -0
- package/dist/components/time/time-picker.flyout.d.mts +13 -0
- package/dist/components/time/time-picker.flyout.js +153 -0
- package/dist/components/time/time-picker.flyout.js.map +1 -0
- package/dist/components/time/time-picker.js +111 -0
- package/dist/components/time/time-picker.js.map +1 -0
- package/dist/constants/index.d.mts +1 -0
- package/dist/constants/index.js +2 -0
- package/dist/constants/index.js.map +1 -0
- package/dist/constants/picker.constants.d.mts +11 -0
- package/dist/constants/picker.constants.js +17 -0
- package/dist/constants/picker.constants.js.map +1 -0
- package/dist/hooks/index.d.mts +6 -0
- package/dist/hooks/index.js +7 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/use-datetime-picker.hook.d.mts +32 -0
- package/dist/hooks/use-datetime-picker.hook.js +112 -0
- package/dist/hooks/use-datetime-picker.hook.js.map +1 -0
- package/dist/hooks/use-datetime-range-picker.hook.d.mts +34 -0
- package/dist/hooks/use-datetime-range-picker.hook.js +161 -0
- package/dist/hooks/use-datetime-range-picker.hook.js.map +1 -0
- package/dist/index.d.mts +14 -117
- package/dist/index.js +3 -1741
- package/dist/index.js.map +1 -1
- package/dist/types/common.types.d.mts +42 -0
- package/dist/types/common.types.js +1 -0
- package/dist/types/common.types.js.map +1 -0
- package/dist/types/datetime-picker.types.d.mts +12 -0
- package/dist/types/datetime-picker.types.js +1 -0
- package/dist/types/datetime-picker.types.js.map +1 -0
- package/dist/types/datetime-range-picker.types.d.mts +12 -0
- package/dist/types/datetime-range-picker.types.js +1 -0
- package/dist/types/datetime-range-picker.types.js.map +1 -0
- package/dist/types/index.d.mts +5 -0
- package/dist/types/index.js +4 -0
- package/dist/types/index.js.map +1 -0
- package/dist/utils/calendar-day.utils.d.mts +32 -0
- package/dist/utils/calendar-day.utils.js +120 -0
- package/dist/utils/calendar-day.utils.js.map +1 -0
- package/dist/utils/datetime.utils.d.mts +22 -0
- package/dist/utils/datetime.utils.js +165 -0
- package/dist/utils/datetime.utils.js.map +1 -0
- package/dist/utils/index.d.mts +5 -0
- package/dist/utils/index.js +3 -0
- package/dist/utils/index.js.map +1 -0
- package/package.json +9 -8
|
@@ -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 };
|