@fangzsx/component-library 0.0.28 → 0.0.29
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.
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface CountryOption {
|
|
4
|
+
iso: string;
|
|
5
|
+
country: string;
|
|
6
|
+
code: string;
|
|
7
|
+
}
|
|
8
|
+
export interface CountryValue {
|
|
9
|
+
iso: string | null;
|
|
10
|
+
country: string | null;
|
|
11
|
+
dialCode: string | null;
|
|
12
|
+
countryCode: string | null;
|
|
13
|
+
}
|
|
14
|
+
/** Default country value — Philippines (+63) */
|
|
15
|
+
export declare const PH_DEFAULT: CountryValue;
|
|
16
|
+
interface BaseProps {
|
|
17
|
+
/** List of available countries */
|
|
18
|
+
options: CountryOption[];
|
|
19
|
+
/** Currently selected country value (defaults to Philippines) */
|
|
20
|
+
value?: CountryValue;
|
|
21
|
+
/** Called when the country selection changes */
|
|
22
|
+
onChange: (value: CountryValue) => void;
|
|
23
|
+
/** Placeholder for the search input inside the dropdown */
|
|
24
|
+
searchPlaceholder?: string;
|
|
25
|
+
/** If true, shows inline validation error styling */
|
|
26
|
+
error?: boolean;
|
|
27
|
+
/** Helper text shown below the input */
|
|
28
|
+
helperText?: string;
|
|
29
|
+
/** Disables the entire component */
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
/** Optional flag renderer — receives ISO code, return a ReactNode */
|
|
32
|
+
renderFlag?: (iso: string) => React.ReactNode;
|
|
33
|
+
}
|
|
34
|
+
interface PhoneMode extends BaseProps {
|
|
35
|
+
/** Renders phone input alongside the country dropdown */
|
|
36
|
+
mode: "phone";
|
|
37
|
+
/** Current phone number value */
|
|
38
|
+
phoneNumber: string;
|
|
39
|
+
/** Called when the phone number changes */
|
|
40
|
+
onPhoneChange: (value: string) => void;
|
|
41
|
+
/** If true, shows inline validation error on the phone input */
|
|
42
|
+
phoneError?: boolean;
|
|
43
|
+
/** Helper text for the phone input */
|
|
44
|
+
phoneHelperText?: string;
|
|
45
|
+
}
|
|
46
|
+
interface CountryMode extends BaseProps {
|
|
47
|
+
/** Renders a country-only dropdown (no phone input) */
|
|
48
|
+
mode: "country";
|
|
49
|
+
phoneNumber?: never;
|
|
50
|
+
onPhoneChange?: never;
|
|
51
|
+
phoneError?: never;
|
|
52
|
+
phoneHelperText?: never;
|
|
53
|
+
}
|
|
54
|
+
export type PhoneAndCountryDropdownProps = PhoneMode | CountryMode;
|
|
55
|
+
declare const PhoneAndCountryDropdown: React.FC<PhoneAndCountryDropdownProps>;
|
|
56
|
+
export default PhoneAndCountryDropdown;
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
import { jsx as e, jsxs as t, Fragment as N } from "react/jsx-runtime";
|
|
2
|
+
import { c as B } from "../../createSvgIcon-C0YrvByi.js";
|
|
3
|
+
import { Box as d, Typography as p, TextField as K, Popper as U, ClickAwayListener as Y, Paper as _, InputBase as G, InputAdornment as J, List as Q, ListItemButton as V, ListItemIcon as X, ListItemText as Z } from "@mui/material";
|
|
4
|
+
import { useState as v, useRef as D, useEffect as $, useMemo as ee } from "react";
|
|
5
|
+
const H = B(/* @__PURE__ */ e("path", {
|
|
6
|
+
d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
|
|
7
|
+
}), "KeyboardArrowDown"), oe = B(/* @__PURE__ */ e("path", {
|
|
8
|
+
d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
|
|
9
|
+
}), "Search"), re = {
|
|
10
|
+
iso: "PH",
|
|
11
|
+
country: "Philippines",
|
|
12
|
+
dialCode: "63",
|
|
13
|
+
countryCode: "PH"
|
|
14
|
+
}, R = (n) => n.replace(/-/g, ""), ne = (n) => /* @__PURE__ */ e(
|
|
15
|
+
d,
|
|
16
|
+
{
|
|
17
|
+
component: "span",
|
|
18
|
+
sx: {
|
|
19
|
+
fontSize: 20,
|
|
20
|
+
lineHeight: 1,
|
|
21
|
+
width: 24,
|
|
22
|
+
textAlign: "center",
|
|
23
|
+
userSelect: "none"
|
|
24
|
+
},
|
|
25
|
+
children: te(n)
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
function te(n) {
|
|
29
|
+
return n.toUpperCase().split("").map((s) => String.fromCodePoint(127397 + s.charCodeAt(0))).join("");
|
|
30
|
+
}
|
|
31
|
+
const k = ({
|
|
32
|
+
anchorEl: n,
|
|
33
|
+
open: s,
|
|
34
|
+
options: x,
|
|
35
|
+
searchValue: o,
|
|
36
|
+
onSearchChange: w,
|
|
37
|
+
onSelect: y,
|
|
38
|
+
onClose: m,
|
|
39
|
+
showDialCode: C,
|
|
40
|
+
searchPlaceholder: i = "Search country or code",
|
|
41
|
+
renderFlag: u
|
|
42
|
+
}) => {
|
|
43
|
+
const f = D(null);
|
|
44
|
+
$(() => {
|
|
45
|
+
s && setTimeout(() => f.current?.focus(), 50);
|
|
46
|
+
}, [s]);
|
|
47
|
+
const a = ee(() => {
|
|
48
|
+
const r = o.toLowerCase(), h = R(r);
|
|
49
|
+
return x.filter(
|
|
50
|
+
(c) => c.country.toLowerCase().includes(r) || c.code.includes(r) || R(c.code).includes(h) || c.iso.toLowerCase().includes(r)
|
|
51
|
+
);
|
|
52
|
+
}, [x, o]);
|
|
53
|
+
return !s || !n ? null : /* @__PURE__ */ e(
|
|
54
|
+
U,
|
|
55
|
+
{
|
|
56
|
+
open: s,
|
|
57
|
+
anchorEl: n,
|
|
58
|
+
placement: "bottom-start",
|
|
59
|
+
disablePortal: !1,
|
|
60
|
+
sx: {
|
|
61
|
+
zIndex: 1300,
|
|
62
|
+
width: Math.max(n.offsetWidth, 340)
|
|
63
|
+
},
|
|
64
|
+
modifiers: [
|
|
65
|
+
{ name: "offset", options: { offset: [0, 4] } },
|
|
66
|
+
{ name: "preventOverflow", options: { boundary: "viewport" } }
|
|
67
|
+
],
|
|
68
|
+
children: /* @__PURE__ */ e(Y, { onClickAway: m, children: /* @__PURE__ */ t(_, { elevation: 4, sx: { borderRadius: 1.5, overflow: "hidden" }, children: [
|
|
69
|
+
/* @__PURE__ */ e(d, { sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ e(
|
|
70
|
+
G,
|
|
71
|
+
{
|
|
72
|
+
inputRef: f,
|
|
73
|
+
fullWidth: !0,
|
|
74
|
+
placeholder: i,
|
|
75
|
+
value: o,
|
|
76
|
+
onChange: (r) => w(r.target.value),
|
|
77
|
+
startAdornment: /* @__PURE__ */ e(J, { position: "start", children: /* @__PURE__ */ e(oe, { fontSize: "small", color: "action" }) }),
|
|
78
|
+
sx: { fontSize: 14 }
|
|
79
|
+
}
|
|
80
|
+
) }),
|
|
81
|
+
/* @__PURE__ */ t(
|
|
82
|
+
Q,
|
|
83
|
+
{
|
|
84
|
+
dense: !0,
|
|
85
|
+
sx: {
|
|
86
|
+
maxHeight: 240,
|
|
87
|
+
overflowY: "auto",
|
|
88
|
+
py: 0.5
|
|
89
|
+
},
|
|
90
|
+
children: [
|
|
91
|
+
a.length === 0 && /* @__PURE__ */ e(p, { variant: "body2", color: "text.secondary", sx: { px: 2, py: 1 }, children: "No results found" }),
|
|
92
|
+
a.map((r) => /* @__PURE__ */ t(
|
|
93
|
+
V,
|
|
94
|
+
{
|
|
95
|
+
onClick: () => y(r),
|
|
96
|
+
sx: { px: 2, py: 0.75 },
|
|
97
|
+
children: [
|
|
98
|
+
/* @__PURE__ */ e(X, { sx: { minWidth: 36 }, children: u(r.iso) }),
|
|
99
|
+
/* @__PURE__ */ e(
|
|
100
|
+
Z,
|
|
101
|
+
{
|
|
102
|
+
primary: r.country,
|
|
103
|
+
primaryTypographyProps: { fontSize: 14 }
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
C && /* @__PURE__ */ t(p, { variant: "body2", color: "text.secondary", sx: { ml: 1, whiteSpace: "nowrap" }, children: [
|
|
107
|
+
"+",
|
|
108
|
+
r.code
|
|
109
|
+
] })
|
|
110
|
+
]
|
|
111
|
+
},
|
|
112
|
+
r.iso
|
|
113
|
+
))
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
)
|
|
117
|
+
] }) })
|
|
118
|
+
}
|
|
119
|
+
);
|
|
120
|
+
}, ce = (n) => {
|
|
121
|
+
const {
|
|
122
|
+
mode: s,
|
|
123
|
+
options: x,
|
|
124
|
+
value: o = re,
|
|
125
|
+
onChange: w,
|
|
126
|
+
searchPlaceholder: y,
|
|
127
|
+
error: m = !1,
|
|
128
|
+
helperText: C,
|
|
129
|
+
disabled: i = !1,
|
|
130
|
+
renderFlag: u = ne
|
|
131
|
+
} = n, [f, a] = v(!1), [r, h] = v(""), [c, E] = v(!1), [b, S] = v(!1), g = D(null), P = (l) => {
|
|
132
|
+
w({
|
|
133
|
+
iso: l.iso,
|
|
134
|
+
country: l.country,
|
|
135
|
+
dialCode: l.code,
|
|
136
|
+
countryCode: l.iso
|
|
137
|
+
}), a(!1), h("");
|
|
138
|
+
}, I = () => {
|
|
139
|
+
a(!1), h("");
|
|
140
|
+
};
|
|
141
|
+
if (s === "phone") {
|
|
142
|
+
const { phoneNumber: l, onPhoneChange: q, phoneError: F, phoneHelperText: M } = n, O = F || c && !l.trim(), L = M || (c && !l.trim() ? "Phone number is required" : void 0), W = m || b && !o.iso, A = C || (b && !o.iso ? "Country is required" : void 0);
|
|
143
|
+
return /* @__PURE__ */ t(d, { sx: { position: "relative" }, children: [
|
|
144
|
+
/* @__PURE__ */ t(d, { sx: { display: "flex" }, children: [
|
|
145
|
+
/* @__PURE__ */ t(
|
|
146
|
+
d,
|
|
147
|
+
{
|
|
148
|
+
ref: g,
|
|
149
|
+
tabIndex: 0,
|
|
150
|
+
onClick: () => !i && a(!0),
|
|
151
|
+
onBlur: () => S(!0),
|
|
152
|
+
sx: {
|
|
153
|
+
display: "flex",
|
|
154
|
+
alignItems: "center",
|
|
155
|
+
gap: 0.75,
|
|
156
|
+
px: 1.5,
|
|
157
|
+
height: 40,
|
|
158
|
+
border: "1px solid",
|
|
159
|
+
borderColor: W ? "error.main" : "rgba(0,0,0,0.23)",
|
|
160
|
+
borderRight: "none",
|
|
161
|
+
borderRadius: "4px 0 0 4px",
|
|
162
|
+
cursor: i ? "default" : "pointer",
|
|
163
|
+
bgcolor: "background.paper",
|
|
164
|
+
"&:hover": i ? {} : { borderColor: "rgba(0,0,0,0.87)" },
|
|
165
|
+
minWidth: 110,
|
|
166
|
+
flexShrink: 0,
|
|
167
|
+
boxSizing: "border-box",
|
|
168
|
+
outline: "none"
|
|
169
|
+
},
|
|
170
|
+
children: [
|
|
171
|
+
o.iso && /* @__PURE__ */ t(N, { children: [
|
|
172
|
+
u(o.iso),
|
|
173
|
+
/* @__PURE__ */ t(p, { variant: "body2", sx: { whiteSpace: "nowrap" }, children: [
|
|
174
|
+
"+",
|
|
175
|
+
o.dialCode
|
|
176
|
+
] })
|
|
177
|
+
] }),
|
|
178
|
+
/* @__PURE__ */ e(
|
|
179
|
+
H,
|
|
180
|
+
{
|
|
181
|
+
fontSize: "small",
|
|
182
|
+
sx: { ml: "auto", color: "action.active" }
|
|
183
|
+
}
|
|
184
|
+
)
|
|
185
|
+
]
|
|
186
|
+
}
|
|
187
|
+
),
|
|
188
|
+
/* @__PURE__ */ e(
|
|
189
|
+
K,
|
|
190
|
+
{
|
|
191
|
+
fullWidth: !0,
|
|
192
|
+
size: "small",
|
|
193
|
+
type: "tel",
|
|
194
|
+
value: l,
|
|
195
|
+
onChange: (j) => q(j.target.value),
|
|
196
|
+
onBlur: () => E(!0),
|
|
197
|
+
disabled: i,
|
|
198
|
+
error: O,
|
|
199
|
+
sx: {
|
|
200
|
+
"& .MuiOutlinedInput-root": {
|
|
201
|
+
borderRadius: "0 4px 4px 0"
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
)
|
|
206
|
+
] }),
|
|
207
|
+
(A || L) && /* @__PURE__ */ e(
|
|
208
|
+
p,
|
|
209
|
+
{
|
|
210
|
+
variant: "caption",
|
|
211
|
+
color: "error",
|
|
212
|
+
sx: { display: "block", mt: 0.5, ml: 0 },
|
|
213
|
+
children: A || L
|
|
214
|
+
}
|
|
215
|
+
),
|
|
216
|
+
/* @__PURE__ */ e(
|
|
217
|
+
k,
|
|
218
|
+
{
|
|
219
|
+
anchorEl: g.current,
|
|
220
|
+
open: f,
|
|
221
|
+
options: x,
|
|
222
|
+
searchValue: r,
|
|
223
|
+
onSearchChange: h,
|
|
224
|
+
onSelect: P,
|
|
225
|
+
onClose: I,
|
|
226
|
+
showDialCode: !0,
|
|
227
|
+
searchPlaceholder: y,
|
|
228
|
+
renderFlag: u
|
|
229
|
+
}
|
|
230
|
+
)
|
|
231
|
+
] });
|
|
232
|
+
}
|
|
233
|
+
const T = m || b && !o.iso, z = C || (b && !o.iso ? "Country is required" : void 0);
|
|
234
|
+
return /* @__PURE__ */ t(d, { sx: { position: "relative" }, children: [
|
|
235
|
+
/* @__PURE__ */ t(
|
|
236
|
+
d,
|
|
237
|
+
{
|
|
238
|
+
ref: g,
|
|
239
|
+
tabIndex: 0,
|
|
240
|
+
onClick: () => !i && a(!0),
|
|
241
|
+
onBlur: () => S(!0),
|
|
242
|
+
sx: {
|
|
243
|
+
display: "flex",
|
|
244
|
+
alignItems: "center",
|
|
245
|
+
gap: 1,
|
|
246
|
+
px: 1.5,
|
|
247
|
+
height: 40,
|
|
248
|
+
border: "1px solid",
|
|
249
|
+
borderColor: T ? "error.main" : "grey.400",
|
|
250
|
+
borderRadius: "6px",
|
|
251
|
+
cursor: i ? "default" : "pointer",
|
|
252
|
+
bgcolor: "background.paper",
|
|
253
|
+
"&:hover": i ? {} : { borderColor: "grey.800" },
|
|
254
|
+
outline: "none"
|
|
255
|
+
},
|
|
256
|
+
children: [
|
|
257
|
+
o.countryCode && u(o.countryCode),
|
|
258
|
+
/* @__PURE__ */ e(
|
|
259
|
+
p,
|
|
260
|
+
{
|
|
261
|
+
variant: "body2",
|
|
262
|
+
sx: { flex: 1, color: o.country ? "text.primary" : "text.secondary" },
|
|
263
|
+
children: o.country ?? "Select country"
|
|
264
|
+
}
|
|
265
|
+
),
|
|
266
|
+
/* @__PURE__ */ e(H, { fontSize: "small", sx: { color: "action.active" } })
|
|
267
|
+
]
|
|
268
|
+
}
|
|
269
|
+
),
|
|
270
|
+
z && /* @__PURE__ */ e(p, { variant: "caption", color: T ? "error" : "text.secondary", sx: { mt: 0.5, ml: 0.5 }, children: z }),
|
|
271
|
+
/* @__PURE__ */ e(
|
|
272
|
+
k,
|
|
273
|
+
{
|
|
274
|
+
anchorEl: g.current,
|
|
275
|
+
open: f,
|
|
276
|
+
options: x,
|
|
277
|
+
searchValue: r,
|
|
278
|
+
onSearchChange: h,
|
|
279
|
+
onSelect: P,
|
|
280
|
+
onClose: I,
|
|
281
|
+
showDialCode: !1,
|
|
282
|
+
searchPlaceholder: y,
|
|
283
|
+
renderFlag: u
|
|
284
|
+
}
|
|
285
|
+
)
|
|
286
|
+
] });
|
|
287
|
+
};
|
|
288
|
+
export {
|
|
289
|
+
re as PH_DEFAULT,
|
|
290
|
+
ce as default
|
|
291
|
+
};
|