@swan-io/shared-business 15.5.3 → 17.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/src/components/DatePicker.d.ts +0 -29
- package/src/components/DatePicker.js +0 -209
- package/src/components/InputPhoneNumber.d.ts +0 -10
- package/src/components/InputPhoneNumber.js +1 -8
- package/src/components/CollapsibleLakeAlert.d.ts +0 -10
- package/src/components/CollapsibleLakeAlert.js +0 -10
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@swan-io/shared-business",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "17.0.0",
|
|
4
4
|
"engines": {
|
|
5
5
|
"node": ">22.12.0"
|
|
6
6
|
},
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"react": ">=19.0.0",
|
|
29
29
|
"react-dom": ">=19.0.0",
|
|
30
30
|
"react-native-web": ">=0.21.2",
|
|
31
|
-
"@swan-io/lake": "
|
|
31
|
+
"@swan-io/lake": "17.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@formatjs/intl": "^4.1.16",
|
|
@@ -53,6 +53,6 @@
|
|
|
53
53
|
"react-dom": "^19.2.7",
|
|
54
54
|
"react-native-web": "^0.21.2",
|
|
55
55
|
"type-fest": "^5.8.0",
|
|
56
|
-
"@swan-io/lake": "
|
|
56
|
+
"@swan-io/lake": "17.0.0"
|
|
57
57
|
}
|
|
58
58
|
}
|
|
@@ -35,11 +35,6 @@ export type DatePickerRange = {
|
|
|
35
35
|
start: Option<DatePickerDate>;
|
|
36
36
|
end: Option<DatePickerDate>;
|
|
37
37
|
};
|
|
38
|
-
export declare const validateDateRangeOrder: (value: {
|
|
39
|
-
start: string;
|
|
40
|
-
end: string;
|
|
41
|
-
}, format: DateFormat) => boolean;
|
|
42
|
-
export declare const isTodayOrFutureDate: (date: DatePickerDate) => boolean;
|
|
43
38
|
export declare const isDateInRange: (minDate: Date, maxDate: Date) => (date: DatePickerDate) => boolean;
|
|
44
39
|
export type DatePickerProps = {
|
|
45
40
|
label: string;
|
|
@@ -59,28 +54,4 @@ type DatePickerModalProps = Except<DatePickerProps, "error"> & {
|
|
|
59
54
|
onDismiss: () => void;
|
|
60
55
|
};
|
|
61
56
|
export declare const DatePickerModal: ({ value, format, firstWeekDay, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDismiss, }: DatePickerModalProps) => import("react").JSX.Element;
|
|
62
|
-
export type DateRangePickerProps = {
|
|
63
|
-
value: {
|
|
64
|
-
start: string;
|
|
65
|
-
end: string;
|
|
66
|
-
};
|
|
67
|
-
error?: string;
|
|
68
|
-
format: DateFormat;
|
|
69
|
-
startLabel: string;
|
|
70
|
-
endLabel: string;
|
|
71
|
-
firstWeekDay: keyof typeof weekDayIndex;
|
|
72
|
-
isSelectable?: (date: DatePickerDate) => boolean;
|
|
73
|
-
onChange: (date: {
|
|
74
|
-
start: string;
|
|
75
|
-
end: string;
|
|
76
|
-
}) => void;
|
|
77
|
-
};
|
|
78
|
-
export declare const DateRangePicker: ({ value, error, format, startLabel, endLabel, firstWeekDay, isSelectable, onChange, }: DateRangePickerProps) => import("react").JSX.Element;
|
|
79
|
-
type DateRangePickerModalProps = DateRangePickerProps & {
|
|
80
|
-
visible: boolean;
|
|
81
|
-
cancelLabel: string;
|
|
82
|
-
confirmLabel: string;
|
|
83
|
-
onDismiss: () => void;
|
|
84
|
-
};
|
|
85
|
-
export declare const DateRangePickerModal: ({ value, error, format, firstWeekDay, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDismiss, }: DateRangePickerModalProps) => import("react").JSX.Element;
|
|
86
57
|
export {};
|
|
@@ -3,7 +3,6 @@ import { Option } from "@swan-io/boxed";
|
|
|
3
3
|
import { BottomPanel } from "@swan-io/lake/src/components/BottomPanel";
|
|
4
4
|
import { Box } from "@swan-io/lake/src/components/Box";
|
|
5
5
|
import { Fill } from "@swan-io/lake/src/components/Fill";
|
|
6
|
-
import { Icon } from "@swan-io/lake/src/components/Icon";
|
|
7
6
|
import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
|
|
8
7
|
import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
|
|
9
8
|
import { LakeSelect } from "@swan-io/lake/src/components/LakeSelect";
|
|
@@ -11,11 +10,9 @@ import { LakeText } from "@swan-io/lake/src/components/LakeText";
|
|
|
11
10
|
import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
|
|
12
11
|
import { Popover } from "@swan-io/lake/src/components/Popover";
|
|
13
12
|
import { Pressable } from "@swan-io/lake/src/components/Pressable";
|
|
14
|
-
import { Separator } from "@swan-io/lake/src/components/Separator";
|
|
15
13
|
import { Space } from "@swan-io/lake/src/components/Space";
|
|
16
14
|
import { colors, spacings } from "@swan-io/lake/src/constants/design";
|
|
17
15
|
import { useBoolean } from "@swan-io/lake/src/hooks/useBoolean";
|
|
18
|
-
import { useFirstMountState } from "@swan-io/lake/src/hooks/useFirstMountState";
|
|
19
16
|
import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
|
|
20
17
|
import { noop } from "@swan-io/lake/src/utils/function";
|
|
21
18
|
import { isNotEmpty, isNotNullish, isNotNullishOrEmpty, isNullishOrEmpty, } from "@swan-io/lake/src/utils/nullish";
|
|
@@ -32,18 +29,12 @@ const styles = StyleSheet.create({
|
|
|
32
29
|
label: {
|
|
33
30
|
flex: 1,
|
|
34
31
|
},
|
|
35
|
-
arrowContainer: {
|
|
36
|
-
height: 40, // input height
|
|
37
|
-
},
|
|
38
32
|
popover: {
|
|
39
33
|
padding: spacings[12],
|
|
40
34
|
},
|
|
41
35
|
popoverDesktop: {
|
|
42
36
|
padding: spacings[24],
|
|
43
37
|
},
|
|
44
|
-
rangeCalendarSide: {
|
|
45
|
-
flex: 1,
|
|
46
|
-
},
|
|
47
38
|
button: {
|
|
48
39
|
flex: 1,
|
|
49
40
|
},
|
|
@@ -109,7 +100,6 @@ const styles = StyleSheet.create({
|
|
|
109
100
|
});
|
|
110
101
|
const MODALE_MOBILE_THRESHOLD = 600;
|
|
111
102
|
const DATE_PICKER_MOBILE_THRESHOLD = 400;
|
|
112
|
-
const DATE_RANGE_PICKER_THRESHOLD = 800;
|
|
113
103
|
const NB_DAYS_IN_WEEK = 7;
|
|
114
104
|
const weekDayNames = [
|
|
115
105
|
t("datePicker.day.sunday"),
|
|
@@ -154,26 +144,10 @@ const parseDate = (value, format) => {
|
|
|
154
144
|
? Option.Some({ day: date.date(), month: date.month(), year: date.year() })
|
|
155
145
|
: Option.None();
|
|
156
146
|
};
|
|
157
|
-
const parseRange = (value, format) => {
|
|
158
|
-
return {
|
|
159
|
-
start: parseDate(value.start, format),
|
|
160
|
-
end: parseDate(value.end, format),
|
|
161
|
-
};
|
|
162
|
-
};
|
|
163
147
|
const stringifyDate = (value, format) => {
|
|
164
148
|
const date = dayjs.utc().year(value.year).month(value.month).date(value.day);
|
|
165
149
|
return date.format(format);
|
|
166
150
|
};
|
|
167
|
-
export const validateDateRangeOrder = (value, format) => {
|
|
168
|
-
const range = parseRange(value, format);
|
|
169
|
-
if (range.start.isNone() || range.end.isNone()) {
|
|
170
|
-
return true;
|
|
171
|
-
}
|
|
172
|
-
if (isDateAfter(range.start.value, range.end.value)) {
|
|
173
|
-
return false;
|
|
174
|
-
}
|
|
175
|
-
return true;
|
|
176
|
-
};
|
|
177
151
|
const range = (start, end) => {
|
|
178
152
|
const result = [];
|
|
179
153
|
for (let i = start; i <= end; i++) {
|
|
@@ -193,16 +167,6 @@ const padEnd = (input, length, value) => {
|
|
|
193
167
|
const itemsToAppend = new Array(length - input.length).fill(value);
|
|
194
168
|
return [...input, ...itemsToAppend];
|
|
195
169
|
};
|
|
196
|
-
export const isTodayOrFutureDate = (date) => {
|
|
197
|
-
const yesterday = new Date();
|
|
198
|
-
yesterday.setDate(yesterday.getDate() - 1);
|
|
199
|
-
const yesterdayDate = {
|
|
200
|
-
day: yesterday.getDate(),
|
|
201
|
-
month: yesterday.getMonth(),
|
|
202
|
-
year: yesterday.getFullYear(),
|
|
203
|
-
};
|
|
204
|
-
return isDateAfter(date, yesterdayDate);
|
|
205
|
-
};
|
|
206
170
|
export const isDateInRange = (minDate, maxDate) => (date) => {
|
|
207
171
|
const min = {
|
|
208
172
|
day: minDate.getDate(),
|
|
@@ -327,39 +291,6 @@ const getRangeIndicatorType = (date, value) => {
|
|
|
327
291
|
}
|
|
328
292
|
return "none";
|
|
329
293
|
};
|
|
330
|
-
const computeDateDistanceInDays = (date1, date2) => {
|
|
331
|
-
const date1Date = new Date(date1.year, date1.month, date1.day);
|
|
332
|
-
const date2Date = new Date(date2.year, date2.month, date2.day);
|
|
333
|
-
const diffInMs = Math.abs(date2Date.getTime() - date1Date.getTime());
|
|
334
|
-
return Math.round(diffInMs / (1000 * 3600 * 24));
|
|
335
|
-
};
|
|
336
|
-
const getNewDateRange = (currentRange, selectedDate) => {
|
|
337
|
-
const { start, end } = currentRange;
|
|
338
|
-
// Handle initial selection
|
|
339
|
-
if (start.isNone()) {
|
|
340
|
-
return { start: Option.Some(selectedDate), end: Option.None() };
|
|
341
|
-
}
|
|
342
|
-
if (end.isNone()) {
|
|
343
|
-
if (isDateAfter(selectedDate, start.value)) {
|
|
344
|
-
return { start, end: Option.Some(selectedDate) };
|
|
345
|
-
}
|
|
346
|
-
return { start: Option.Some(selectedDate), end: currentRange.start };
|
|
347
|
-
}
|
|
348
|
-
// Handle selection outside of the current range
|
|
349
|
-
if (isDateBefore(selectedDate, start.value)) {
|
|
350
|
-
return { start: Option.Some(selectedDate), end: currentRange.end };
|
|
351
|
-
}
|
|
352
|
-
if (isDateAfter(selectedDate, end.value)) {
|
|
353
|
-
return { start: currentRange.start, end: Option.Some(selectedDate) };
|
|
354
|
-
}
|
|
355
|
-
// We change the closest date to the new date
|
|
356
|
-
const startDistance = computeDateDistanceInDays(start.value, selectedDate);
|
|
357
|
-
const endDistance = computeDateDistanceInDays(end.value, selectedDate);
|
|
358
|
-
if (startDistance < endDistance) {
|
|
359
|
-
return { start: Option.Some(selectedDate), end: currentRange.end };
|
|
360
|
-
}
|
|
361
|
-
return { start: currentRange.start, end: Option.Some(selectedDate) };
|
|
362
|
-
};
|
|
363
294
|
const getTodayYearMonth = () => ({
|
|
364
295
|
month: new Date().getMonth(),
|
|
365
296
|
year: new Date().getFullYear(),
|
|
@@ -370,18 +301,6 @@ const getYearMonth = (value, format) => {
|
|
|
370
301
|
}
|
|
371
302
|
return parseDate(value, format);
|
|
372
303
|
};
|
|
373
|
-
const isYearMonthBefore = (date1, date2) => {
|
|
374
|
-
return date1.year < date2.year || (date1.year === date2.year && date1.month < date2.month);
|
|
375
|
-
};
|
|
376
|
-
const isYearMonthEquals = (date1, date2) => {
|
|
377
|
-
return date1.year === date2.year && date1.month === date2.month;
|
|
378
|
-
};
|
|
379
|
-
const minYearMonth = (date1, date2) => {
|
|
380
|
-
return isYearMonthBefore(date1, date2) ? date1 : date2;
|
|
381
|
-
};
|
|
382
|
-
const maxYearMonth = (date1, date2) => {
|
|
383
|
-
return isYearMonthBefore(date1, date2) ? date2 : date1;
|
|
384
|
-
};
|
|
385
304
|
const incrementYearMonth = ({ month, year }) => {
|
|
386
305
|
if (month === 11) {
|
|
387
306
|
return { month: 0, year: year + 1 };
|
|
@@ -518,131 +437,3 @@ const DateModal = ({ children, visible, maxWidth, withCloseButton, onPressClose,
|
|
|
518
437
|
}
|
|
519
438
|
return (_jsx(BottomPanel, { visible: visible, onPressClose: onPressClose, children: _jsx(View, { style: styles.popover, children: children }) }));
|
|
520
439
|
};
|
|
521
|
-
const DateRangePickerModalContent = ({ value, format, firstWeekDay, desktop, displayTwoCalendar, isSelectable, onChange, }) => {
|
|
522
|
-
const isFirstMount = useFirstMountState();
|
|
523
|
-
const [periods, setPeriods] = useState(() => {
|
|
524
|
-
const startYearMonth = getYearMonth(value.start, format).getOr(getTodayYearMonth());
|
|
525
|
-
const endYearMonth = getYearMonth(value.end, format).getOr(incrementYearMonth(startYearMonth));
|
|
526
|
-
return {
|
|
527
|
-
start: startYearMonth,
|
|
528
|
-
end: isYearMonthEquals(startYearMonth, endYearMonth)
|
|
529
|
-
? incrementYearMonth(startYearMonth)
|
|
530
|
-
: endYearMonth,
|
|
531
|
-
};
|
|
532
|
-
});
|
|
533
|
-
// Automatically change displayed year and month when start date changes
|
|
534
|
-
useEffect(() => {
|
|
535
|
-
if (isFirstMount) {
|
|
536
|
-
return;
|
|
537
|
-
}
|
|
538
|
-
const startYearMonth = getYearMonth(value.start, format);
|
|
539
|
-
if (startYearMonth.isSome()) {
|
|
540
|
-
setPeriods(periods => {
|
|
541
|
-
const isStartAndEndSameMonth = isYearMonthEquals(startYearMonth.value, periods.end);
|
|
542
|
-
if (isStartAndEndSameMonth) {
|
|
543
|
-
return {
|
|
544
|
-
start: decrementYearMonth(periods.end),
|
|
545
|
-
end: periods.end,
|
|
546
|
-
};
|
|
547
|
-
}
|
|
548
|
-
// change end period if it becomes before start period
|
|
549
|
-
const endPeriod = maxYearMonth(periods.end, incrementYearMonth(startYearMonth.value));
|
|
550
|
-
return {
|
|
551
|
-
start: startYearMonth.value,
|
|
552
|
-
end: endPeriod,
|
|
553
|
-
};
|
|
554
|
-
});
|
|
555
|
-
}
|
|
556
|
-
}, [isFirstMount, value.start, format]);
|
|
557
|
-
// Automatically change displayed year and month when end date changes
|
|
558
|
-
useEffect(() => {
|
|
559
|
-
if (isFirstMount) {
|
|
560
|
-
return;
|
|
561
|
-
}
|
|
562
|
-
const endYearMonth = getYearMonth(value.end, format);
|
|
563
|
-
if (endYearMonth.isSome()) {
|
|
564
|
-
setPeriods(periods => {
|
|
565
|
-
const isStartAndEndSameMonth = isYearMonthEquals(periods.start, endYearMonth.value);
|
|
566
|
-
if (isStartAndEndSameMonth) {
|
|
567
|
-
return {
|
|
568
|
-
start: periods.start,
|
|
569
|
-
end: incrementYearMonth(periods.start),
|
|
570
|
-
};
|
|
571
|
-
}
|
|
572
|
-
// change start period if it becomes after end period
|
|
573
|
-
const startPeriod = minYearMonth(periods.start, decrementYearMonth(endYearMonth.value));
|
|
574
|
-
return {
|
|
575
|
-
start: startPeriod,
|
|
576
|
-
end: endYearMonth.value,
|
|
577
|
-
};
|
|
578
|
-
});
|
|
579
|
-
}
|
|
580
|
-
}, [isFirstMount, value.end, format]);
|
|
581
|
-
const setStartPeriod = useCallback((yearMonth) => {
|
|
582
|
-
setPeriods(periods => ({
|
|
583
|
-
start: yearMonth,
|
|
584
|
-
end: maxYearMonth(periods.end, incrementYearMonth(yearMonth)),
|
|
585
|
-
}));
|
|
586
|
-
}, []);
|
|
587
|
-
const setEndPeriod = useCallback((yearMonth) => {
|
|
588
|
-
setPeriods(periods => ({
|
|
589
|
-
start: minYearMonth(periods.start, decrementYearMonth(yearMonth)),
|
|
590
|
-
end: yearMonth,
|
|
591
|
-
}));
|
|
592
|
-
}, []);
|
|
593
|
-
const dateRange = useMemo(() => parseRange(value, format), [value, format]);
|
|
594
|
-
const handleSelectDate = (date) => {
|
|
595
|
-
const newRange = getNewDateRange(dateRange, date);
|
|
596
|
-
const newValue = {
|
|
597
|
-
start: newRange.start.match({
|
|
598
|
-
Some: date => stringifyDate(date, format),
|
|
599
|
-
None: () => value.start,
|
|
600
|
-
}),
|
|
601
|
-
end: newRange.end.match({
|
|
602
|
-
Some: date => stringifyDate(date, format),
|
|
603
|
-
None: () => value.end,
|
|
604
|
-
}),
|
|
605
|
-
};
|
|
606
|
-
onChange(newValue);
|
|
607
|
-
};
|
|
608
|
-
if (!displayTwoCalendar) {
|
|
609
|
-
return (_jsxs(_Fragment, { children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, hideArrows: !desktop, onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, isSelectable: isSelectable, onChange: handleSelectDate })] }));
|
|
610
|
-
}
|
|
611
|
-
return (_jsx(View, { children: _jsxs(Box, { direction: "row", alignItems: "start", children: [_jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, maxValue: decrementYearMonth(periods.end), arrowsPosition: "around", onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, isSelectable: isSelectable, onChange: handleSelectDate })] }), _jsx(Separator, { space: 24, horizontal: true }), _jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.end, minValue: incrementYearMonth(periods.start), arrowsPosition: "around", onChange: setEndPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.end.month, year: periods.end.year, value: dateRange, firstWeekDay: firstWeekDay, isSelectable: isSelectable, onChange: handleSelectDate })] })] }) }));
|
|
612
|
-
};
|
|
613
|
-
export const DateRangePicker = ({ value, error, format, startLabel, endLabel, firstWeekDay, isSelectable, onChange, }) => {
|
|
614
|
-
const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
|
|
615
|
-
const { desktop: displayTwoCalendar } = useResponsive(DATE_RANGE_PICKER_THRESHOLD);
|
|
616
|
-
const ref = useRef(null);
|
|
617
|
-
const [isOpened, { on: open, off: close }] = useBoolean(false);
|
|
618
|
-
const handleStartChange = useCallback((start) => {
|
|
619
|
-
onChange({ start, end: value.end });
|
|
620
|
-
}, [value, onChange]);
|
|
621
|
-
const handleEndChange = useCallback((end) => {
|
|
622
|
-
onChange({ start: value.start, end });
|
|
623
|
-
}, [value, onChange]);
|
|
624
|
-
return (_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) }), _jsx(Space, { width: 12 }), _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open, ariaLabel: t("common.open"), ariaExpanded: isOpened })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error !== null && error !== void 0 ? error : " " }), _jsx(DateModal, { visible: isOpened, maxWidth: 900, withCloseButton: true, onPressClose: close, children: _jsx(DateRangePickerModalContent, { value: value, format: format, firstWeekDay: firstWeekDay, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: onChange }) })] }));
|
|
625
|
-
};
|
|
626
|
-
export const DateRangePickerModal = ({ value, error, format, firstWeekDay, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDismiss, }) => {
|
|
627
|
-
const { desktop } = useResponsive(MODALE_MOBILE_THRESHOLD);
|
|
628
|
-
const { desktop: displayTwoCalendar } = useResponsive(DATE_RANGE_PICKER_THRESHOLD);
|
|
629
|
-
const [localeValue, setLocaleValue] = useState(value);
|
|
630
|
-
useEffect(() => {
|
|
631
|
-
setLocaleValue(value);
|
|
632
|
-
}, [value]);
|
|
633
|
-
const handleStartChange = (start) => {
|
|
634
|
-
setLocaleValue({ start, end: localeValue.end });
|
|
635
|
-
};
|
|
636
|
-
const handleEndChange = (end) => {
|
|
637
|
-
setLocaleValue({ start: localeValue.start, end });
|
|
638
|
-
};
|
|
639
|
-
const handleCancel = () => {
|
|
640
|
-
setLocaleValue(value);
|
|
641
|
-
onDismiss();
|
|
642
|
-
};
|
|
643
|
-
const handleConfirm = () => {
|
|
644
|
-
onChange(localeValue);
|
|
645
|
-
onDismiss();
|
|
646
|
-
};
|
|
647
|
-
return (_jsxs(DateModal, { visible: visible, maxWidth: 900, onPressClose: handleCancel, children: [_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error !== null && error !== void 0 ? error : " " })] }), _jsx(DateRangePickerModalContent, { value: localeValue, format: format, firstWeekDay: firstWeekDay, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: setLocaleValue }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeButton, { mode: "secondary", size: "small", onPress: handleCancel, style: styles.button, children: cancelLabel }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { color: "current", size: "small", onPress: handleConfirm, style: styles.button, children: confirmLabel })] })] }));
|
|
648
|
-
};
|
|
@@ -23,15 +23,5 @@ type Props = {
|
|
|
23
23
|
onSubmitEditing?: () => void;
|
|
24
24
|
onBlur?: () => void;
|
|
25
25
|
};
|
|
26
|
-
export declare const getInitialPhoneCountry: (phoneNumber: string | undefined, defaultCountry: Country) => {
|
|
27
|
-
readonly cca2: "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AQ" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BR" | "BS" | "BT" | "BV" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CF" | "CG" | "CH" | "CI" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CV" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB" | "GD" | "GE" | "GF" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GP" | "GQ" | "GR" | "GS" | "GT" | "GU" | "GW" | "GY" | "HK" | "HM" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MF" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NC" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PM" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RE" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SD" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SY" | "SZ" | "TC" | "TD" | "TF" | "TG" | "TH" | "TJ" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "UM" | "US" | "UY" | "UZ" | "VA" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WF" | "WS" | "XK" | "YE" | "YT" | "ZA" | "ZM" | "ZW";
|
|
28
|
-
readonly cca3: "ABW" | "AFG" | "AGO" | "AIA" | "ALA" | "ALB" | "AND" | "ARE" | "ARG" | "ARM" | "ASM" | "ATA" | "ATF" | "ATG" | "AUS" | "AUT" | "AZE" | "BDI" | "BEL" | "BEN" | "BES" | "BFA" | "BGD" | "BGR" | "BHR" | "BHS" | "BIH" | "BLM" | "BLR" | "BLZ" | "BMU" | "BOL" | "BRA" | "BRB" | "BRN" | "BTN" | "BVT" | "BWA" | "CAF" | "CAN" | "CCK" | "CHE" | "CHL" | "CHN" | "CIV" | "CMR" | "COD" | "COG" | "COK" | "COL" | "COM" | "CPV" | "CRI" | "CUB" | "CUW" | "CXR" | "CYM" | "CYP" | "CZE" | "DEU" | "DJI" | "DMA" | "DNK" | "DOM" | "DZA" | "ECU" | "EGY" | "ERI" | "ESH" | "ESP" | "EST" | "ETH" | "FIN" | "FJI" | "FLK" | "FRA" | "FRO" | "FSM" | "GAB" | "GBR" | "GEO" | "GGY" | "GHA" | "GIB" | "GIN" | "GLP" | "GMB" | "GNB" | "GNQ" | "GRC" | "GRD" | "GRL" | "GTM" | "GUF" | "GUM" | "GUY" | "HKG" | "HMD" | "HND" | "HRV" | "HTI" | "HUN" | "IDN" | "IMN" | "IND" | "IRL" | "IRN" | "IRQ" | "ISL" | "ISR" | "ITA" | "JAM" | "JEY" | "JOR" | "JPN" | "KAZ" | "KEN" | "KGZ" | "KHM" | "KIR" | "KNA" | "KOR" | "KWT" | "LAO" | "LBN" | "LBR" | "LBY" | "LCA" | "LIE" | "LKA" | "LSO" | "LTU" | "LUX" | "LVA" | "MAC" | "MAF" | "MAR" | "MCO" | "MDA" | "MDG" | "MDV" | "MEX" | "MHL" | "MKD" | "MLI" | "MLT" | "MMR" | "MNE" | "MNG" | "MNP" | "MOZ" | "MRT" | "MSR" | "MTQ" | "MUS" | "MWI" | "MYS" | "MYT" | "NAM" | "NCL" | "NER" | "NFK" | "NGA" | "NIC" | "NIU" | "NLD" | "NOR" | "NPL" | "NZL" | "OMN" | "PAK" | "PAN" | "PCN" | "PER" | "PHL" | "PLW" | "PNG" | "POL" | "PRI" | "PRK" | "PRT" | "PRY" | "PSE" | "PYF" | "QAT" | "REU" | "ROU" | "RUS" | "RWA" | "SAU" | "SDN" | "SEN" | "SGP" | "SGS" | "SLB" | "SLE" | "SLV" | "SMR" | "SOM" | "SPM" | "SRB" | "SSD" | "STP" | "SUR" | "SVK" | "SVN" | "SWE" | "SWZ" | "SYC" | "SYR" | "TCA" | "TCD" | "TGO" | "THA" | "TJK" | "TKM" | "TLS" | "TON" | "TTO" | "TUN" | "TUR" | "TUV" | "TWN" | "TZA" | "UGA" | "UKR" | "UMI" | "URY" | "USA" | "UZB" | "VAT" | "VCT" | "VEN" | "VGB" | "VIR" | "VNM" | "VUT" | "WLF" | "WSM" | "XKX" | "YEM" | "ZAF" | "ZMB" | "ZWE";
|
|
29
|
-
name: string;
|
|
30
|
-
deburr: string;
|
|
31
|
-
idd: string;
|
|
32
|
-
uid: string;
|
|
33
|
-
flag: string;
|
|
34
|
-
isNationality: boolean;
|
|
35
|
-
};
|
|
36
26
|
export declare const InputPhoneNumber: ({ ref, id, country, value, countries, error, help, valid, autofocus, disabled, readOnly, countryAriaLabel, hideErrors, onCountryChange, onChangeText, onSubmitEditing, onBlur, }: Props) => import("react").JSX.Element;
|
|
37
27
|
export {};
|
|
@@ -7,7 +7,7 @@ import { colors } from "@swan-io/lake/src/constants/design";
|
|
|
7
7
|
import { isNotNullishOrEmpty } from "@swan-io/lake/src/utils/nullish";
|
|
8
8
|
import { useEffect, useImperativeHandle, useRef } from "react";
|
|
9
9
|
import { StyleSheet } from "react-native";
|
|
10
|
-
import {
|
|
10
|
+
import { phoneCountries } from "../constants/countries";
|
|
11
11
|
import { PhoneCountryPicker } from "./PhoneCountryPicker";
|
|
12
12
|
const styles = StyleSheet.create({
|
|
13
13
|
picker: {
|
|
@@ -24,13 +24,6 @@ const styles = StyleSheet.create({
|
|
|
24
24
|
borderBottomLeftRadius: 0,
|
|
25
25
|
},
|
|
26
26
|
});
|
|
27
|
-
export const getInitialPhoneCountry = (phoneNumber, defaultCountry) => {
|
|
28
|
-
var _a;
|
|
29
|
-
if (phoneNumber == null) {
|
|
30
|
-
return defaultCountry;
|
|
31
|
-
}
|
|
32
|
-
return (_a = countries.find(country => phoneNumber.startsWith(`+${country.idd}`))) !== null && _a !== void 0 ? _a : defaultCountry;
|
|
33
|
-
};
|
|
34
27
|
export const InputPhoneNumber = ({ ref, id, country, value, countries, error, help, valid = false, autofocus = false, disabled = false, readOnly = false, countryAriaLabel, hideErrors = false, onCountryChange, onChangeText, onSubmitEditing, onBlur, }) => {
|
|
35
28
|
var _a;
|
|
36
29
|
const inputRef = useRef(null);
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { LakeAlert } from "@swan-io/lake/src/components/LakeAlert";
|
|
2
|
-
import { ComponentProps, ReactNode } from "react";
|
|
3
|
-
type CollapsibleLakeAlertProps = ComponentProps<typeof LakeAlert> & {
|
|
4
|
-
showMoreLabel?: string;
|
|
5
|
-
showLessLabel?: string;
|
|
6
|
-
initialCollapsed?: boolean;
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
};
|
|
9
|
-
export declare const CollapsibleLakeAlert: ({ showMoreLabel, showLessLabel, initialCollapsed, children, ...rest }: CollapsibleLakeAlertProps) => import("react").JSX.Element;
|
|
10
|
-
export {};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { LakeAlert } from "@swan-io/lake/src/components/LakeAlert";
|
|
3
|
-
import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
|
|
4
|
-
import { useBoolean } from "@swan-io/lake/src/hooks/useBoolean";
|
|
5
|
-
import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
|
|
6
|
-
import { t } from "../utils/i18n";
|
|
7
|
-
export const CollapsibleLakeAlert = ({ showMoreLabel = t("common.showMore"), showLessLabel = t("common.showLess"), initialCollapsed = false, children, ...rest }) => {
|
|
8
|
-
const [visible, { toggle }] = useBoolean(initialCollapsed);
|
|
9
|
-
return (_jsx(LakeAlert, { anchored: true, ...rest, callToAction: isNotNullish(children) ? (_jsx(LakeButton, { onPress: toggle, mode: "tertiary", size: "small", children: visible ? showLessLabel : showMoreLabel })) : null, children: visible ? children : null }));
|
|
10
|
-
};
|