@swan-io/shared-business 8.15.10 → 8.15.12

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/BirthdatePicker.d.ts +1 -1
  3. package/src/components/BirthdatePicker.js +3 -109
  4. package/src/components/InlineDatePicker.d.ts +12 -0
  5. package/src/components/InlineDatePicker.js +111 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swan-io/shared-business",
3
- "version": "8.15.10",
3
+ "version": "8.15.12",
4
4
  "engines": {
5
5
  "node": ">=20.9.0",
6
6
  "yarn": "^1.22.0"
package/src/components/BirthdatePicker.d.ts CHANGED
@@ -3,7 +3,7 @@ export type BirthdatePickerProps = {
3
3
  label: string;
4
4
  value: string | undefined;
5
5
  error?: string;
6
- onValueChange: (value: string | undefined) => void;
6
+ onValueChange?: (value: string | undefined) => void;
7
7
  style?: StyleProp<ViewStyle>;
8
8
  readOnly?: boolean;
9
9
  };
package/src/components/BirthdatePicker.js CHANGED
@@ -1,112 +1,6 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Box } from "@swan-io/lake/src/components/Box";
3
- import { InputError } from "@swan-io/lake/src/components/InputError";
4
- import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
5
- import { LakeSelect } from "@swan-io/lake/src/components/LakeSelect";
6
- import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
7
- import { Stack } from "@swan-io/lake/src/components/Stack";
8
- import { breakpoints, colors } from "@swan-io/lake/src/constants/design";
9
- import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
10
- import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
11
- import { useForm } from "@swan-io/use-form";
12
- import { StyleSheet, View } from "react-native";
13
- import { match } from "ts-pattern";
14
- import { extractDate, formatExtractedDate } from "../utils/date";
15
- import { getCountry, t } from "../utils/i18n";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
16
2
  import { validateBirthdate } from "../utils/validation";
17
- const months = [
18
- { value: "01", name: t("datePicker.month.january") },
19
- { value: "02", name: t("datePicker.month.february") },
20
- { value: "03", name: t("datePicker.month.march") },
21
- { value: "04", name: t("datePicker.month.april") },
22
- { value: "05", name: t("datePicker.month.may") },
23
- { value: "06", name: t("datePicker.month.june") },
24
- { value: "07", name: t("datePicker.month.july") },
25
- { value: "08", name: t("datePicker.month.august") },
26
- { value: "09", name: t("datePicker.month.september") },
27
- { value: "10", name: t("datePicker.month.october") },
28
- { value: "11", name: t("datePicker.month.november") },
29
- { value: "12", name: t("datePicker.month.december") },
30
- ];
31
- const styles = StyleSheet.create({
32
- container: { paddingTop: 6 },
33
- dayMobile: {
34
- maxWidth: 70,
35
- flexGrow: 0,
36
- },
37
- day: {
38
- maxWidth: 90,
39
- flexGrow: 0,
40
- },
41
- yearMobile: {
42
- maxWidth: 80,
43
- flexGrow: 0,
44
- },
45
- year: {
46
- maxWidth: 120,
47
- flexGrow: 0,
48
- },
49
- error: {
50
- borderColor: colors.negative[400],
51
- },
52
- });
53
- // https://en.wikipedia.org/wiki/List_of_date_formats_by_country
54
- const order = match(getCountry().cca2)
55
- .returnType()
56
- .with("US", () => "MDY")
57
- .with("CN", "JP", "KR", "KP", "TW", "HU", "MN", "LT", "BT", () => "YMD")
58
- .otherwise(() => "DMY");
3
+ import { InlineDatePicker } from "./InlineDatePicker";
59
4
  export const BirthdatePicker = ({ value, label, readOnly = false, onValueChange, error: externalError, style, }) => {
60
- const { desktop } = useResponsive(breakpoints.small);
61
- const { Field } = useForm({
62
- birthdate: {
63
- initialValue: isNotNullish(value) ? extractDate(value) : undefined,
64
- sanitize: date => isNotNullish(date)
65
- ? {
66
- day: date.day.trim(),
67
- month: date.month.trim(),
68
- year: date.year.trim(),
69
- }
70
- : undefined,
71
- strategy: "onBlur",
72
- validate: date => {
73
- const errorMessage = validateBirthdate(date);
74
- if (isNullish(errorMessage) && isNotNullish(date)) {
75
- return onValueChange(formatExtractedDate(date));
76
- }
77
- else {
78
- onValueChange(undefined);
79
- return errorMessage;
80
- }
81
- },
82
- },
83
- });
84
- return (_jsx(View, { style: [styles.container, style], children: _jsx(Field, { name: "birthdate", children: ({ error, onBlur, onChange, value }) => (_jsx(LakeLabel, { label: label, render: id => {
85
- var _a;
86
- const day = (_jsx(View, { style: desktop ? styles.day : styles.dayMobile, children: _jsx(LakeTextInput, { id: id, readOnly: readOnly, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, placeholder: t("datePicker.day"), value: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : undefined, onBlur: onBlur, hideErrors: true, onChangeText: day => {
87
- var _a, _b;
88
- onChange({
89
- day,
90
- month: (_a = value === null || value === void 0 ? void 0 : value.month) !== null && _a !== void 0 ? _a : "",
91
- year: (_b = value === null || value === void 0 ? void 0 : value.year) !== null && _b !== void 0 ? _b : "",
92
- });
93
- }, pattern: "[0-9]", maxLength: 2, autoComplete: "bday-day" }) }));
94
- const month = (_jsx(LakeSelect, { value: (value === null || value === void 0 ? void 0 : value.month) === "" ? undefined : value === null || value === void 0 ? void 0 : value.month, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, readOnly: readOnly, placeholder: t("datePicker.month"), hideErrors: true, items: months, onValueChange: month => {
95
- var _a, _b;
96
- onChange({
97
- day: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : "",
98
- month,
99
- year: (_b = value === null || value === void 0 ? void 0 : value.year) !== null && _b !== void 0 ? _b : "",
100
- });
101
- } }));
102
- const year = (_jsx(View, { style: desktop ? styles.year : styles.yearMobile, children: _jsx(LakeTextInput, { value: value === null || value === void 0 ? void 0 : value.year, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, readOnly: readOnly, placeholder: t("datePicker.year"), onBlur: onBlur, hideErrors: true, onChangeText: year => {
103
- var _a, _b;
104
- return onChange({
105
- day: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : "",
106
- month: (_b = value === null || value === void 0 ? void 0 : value.month) !== null && _b !== void 0 ? _b : "",
107
- year,
108
- });
109
- }, pattern: "[0-9]", maxLength: 4, autoComplete: "bday-year" }) }));
110
- return (_jsxs(Box, { children: [order === "DMY" ? (_jsxs(Stack, { direction: "row", space: 4, children: [day, " ", month, " ", year] })) : (_jsxs(Stack, { direction: "row", space: 4, children: [month, " ", day, " ", year] })), _jsx(InputError, { message: error !== null && error !== void 0 ? error : externalError })] }));
111
- } })) }) }));
5
+ return (_jsx(InlineDatePicker, { value: value, label: label, readOnly: readOnly, onValueChange: onValueChange, error: externalError, style: style, validate: validateBirthdate }));
112
6
  };
package/src/components/InlineDatePicker.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { StyleProp, ViewStyle } from "react-native";
2
+ import { ExtractedDate } from "../utils/date";
3
+ export type InlineDatePickerProps = {
4
+ label: string;
5
+ value: string | undefined;
6
+ error?: string;
7
+ onValueChange?: (value: string | undefined) => void;
8
+ style?: StyleProp<ViewStyle>;
9
+ readOnly?: boolean;
10
+ validate?: (value: ExtractedDate | undefined) => string | undefined;
11
+ };
12
+ export declare const InlineDatePicker: ({ value, label, readOnly, onValueChange, validate, error: externalError, style, }: InlineDatePickerProps) => import("react/jsx-runtime").JSX.Element;
package/src/components/InlineDatePicker.js ADDED
@@ -0,0 +1,111 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Box } from "@swan-io/lake/src/components/Box";
3
+ import { InputError } from "@swan-io/lake/src/components/InputError";
4
+ import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
5
+ import { LakeSelect } from "@swan-io/lake/src/components/LakeSelect";
6
+ import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
7
+ import { Stack } from "@swan-io/lake/src/components/Stack";
8
+ import { breakpoints, colors } from "@swan-io/lake/src/constants/design";
9
+ import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
10
+ import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
11
+ import { useForm } from "@swan-io/use-form";
12
+ import { StyleSheet, View } from "react-native";
13
+ import { match } from "ts-pattern";
14
+ import { extractDate, formatExtractedDate } from "../utils/date";
15
+ import { getCountry, t } from "../utils/i18n";
16
+ const months = [
17
+ { value: "01", name: t("datePicker.month.january") },
18
+ { value: "02", name: t("datePicker.month.february") },
19
+ { value: "03", name: t("datePicker.month.march") },
20
+ { value: "04", name: t("datePicker.month.april") },
21
+ { value: "05", name: t("datePicker.month.may") },
22
+ { value: "06", name: t("datePicker.month.june") },
23
+ { value: "07", name: t("datePicker.month.july") },
24
+ { value: "08", name: t("datePicker.month.august") },
25
+ { value: "09", name: t("datePicker.month.september") },
26
+ { value: "10", name: t("datePicker.month.october") },
27
+ { value: "11", name: t("datePicker.month.november") },
28
+ { value: "12", name: t("datePicker.month.december") },
29
+ ];
30
+ const styles = StyleSheet.create({
31
+ container: { paddingTop: 6 },
32
+ dayMobile: {
33
+ maxWidth: 70,
34
+ flexGrow: 0,
35
+ },
36
+ day: {
37
+ maxWidth: 90,
38
+ flexGrow: 0,
39
+ },
40
+ yearMobile: {
41
+ maxWidth: 80,
42
+ flexGrow: 0,
43
+ },
44
+ year: {
45
+ maxWidth: 120,
46
+ flexGrow: 0,
47
+ },
48
+ error: {
49
+ borderColor: colors.negative[400],
50
+ },
51
+ });
52
+ // https://en.wikipedia.org/wiki/List_of_date_formats_by_country
53
+ const order = match(getCountry().cca2)
54
+ .returnType()
55
+ .with("US", () => "MDY")
56
+ .with("CN", "JP", "KR", "KP", "TW", "HU", "MN", "LT", "BT", () => "YMD")
57
+ .otherwise(() => "DMY");
58
+ export const InlineDatePicker = ({ value, label, readOnly = false, onValueChange, validate = () => undefined, error: externalError, style, }) => {
59
+ const { desktop } = useResponsive(breakpoints.small);
60
+ const { Field } = useForm({
61
+ date: {
62
+ initialValue: isNotNullish(value) ? extractDate(value) : undefined,
63
+ sanitize: date => isNotNullish(date)
64
+ ? {
65
+ day: date.day.trim(),
66
+ month: date.month.trim(),
67
+ year: date.year.trim(),
68
+ }
69
+ : undefined,
70
+ strategy: "onBlur",
71
+ validate: date => {
72
+ const errorMessage = validate(date);
73
+ if (isNullish(errorMessage) && isNotNullish(date)) {
74
+ return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(formatExtractedDate(date));
75
+ }
76
+ else {
77
+ onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(undefined);
78
+ return errorMessage;
79
+ }
80
+ },
81
+ },
82
+ });
83
+ return (_jsx(View, { style: [styles.container, style], children: _jsx(Field, { name: "date", children: ({ error, onBlur, onChange, value }) => (_jsx(LakeLabel, { label: label, render: id => {
84
+ var _a;
85
+ const day = (_jsx(View, { style: desktop ? styles.day : styles.dayMobile, children: _jsx(LakeTextInput, { id: id, readOnly: readOnly, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, placeholder: t("datePicker.day"), value: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : undefined, onBlur: onBlur, hideErrors: true, onChangeText: day => {
86
+ var _a, _b;
87
+ onChange({
88
+ day,
89
+ month: (_a = value === null || value === void 0 ? void 0 : value.month) !== null && _a !== void 0 ? _a : "",
90
+ year: (_b = value === null || value === void 0 ? void 0 : value.year) !== null && _b !== void 0 ? _b : "",
91
+ });
92
+ }, pattern: "[0-9]", maxLength: 2, autoComplete: "bday-day" }) }));
93
+ const month = (_jsx(LakeSelect, { value: (value === null || value === void 0 ? void 0 : value.month) === "" ? undefined : value === null || value === void 0 ? void 0 : value.month, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, readOnly: readOnly, placeholder: t("datePicker.month"), hideErrors: true, items: months, onValueChange: month => {
94
+ var _a, _b;
95
+ onChange({
96
+ day: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : "",
97
+ month,
98
+ year: (_b = value === null || value === void 0 ? void 0 : value.year) !== null && _b !== void 0 ? _b : "",
99
+ });
100
+ } }));
101
+ const year = (_jsx(View, { style: desktop ? styles.year : styles.yearMobile, children: _jsx(LakeTextInput, { value: value === null || value === void 0 ? void 0 : value.year, style: (isNotNullish(error) || isNotNullish(externalError)) && styles.error, readOnly: readOnly, placeholder: t("datePicker.year"), onBlur: onBlur, hideErrors: true, onChangeText: year => {
102
+ var _a, _b;
103
+ return onChange({
104
+ day: (_a = value === null || value === void 0 ? void 0 : value.day) !== null && _a !== void 0 ? _a : "",
105
+ month: (_b = value === null || value === void 0 ? void 0 : value.month) !== null && _b !== void 0 ? _b : "",
106
+ year,
107
+ });
108
+ }, pattern: "[0-9]", maxLength: 4, autoComplete: "bday-year" }) }));
109
+ return (_jsxs(Box, { children: [order === "DMY" ? (_jsxs(Stack, { direction: "row", space: 4, children: [day, " ", month, " ", year] })) : (_jsxs(Stack, { direction: "row", space: 4, children: [month, " ", day, " ", year] })), _jsx(InputError, { message: error !== null && error !== void 0 ? error : externalError })] }));
110
+ } })) }) }));
111
+ };