react-country-list-picker 1.0.0 → 1.0.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/CountryList.d.ts +1 -1
- package/dist/CountryList.js +104 -2
- package/dist/CountryList.native.d.ts +1 -1
- package/dist/CountryList.native.js +96 -2
- package/dist/types.d.ts +28 -0
- package/package.json +2 -2
package/dist/CountryList.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { CountryListProps } from './types';
|
|
3
|
-
export default function CountryList({ onSelect, data, searchable, searchPlaceholder, }: CountryListProps): React.JSX.Element;
|
|
3
|
+
export default function CountryList({ onSelect, data, searchable, searchPlaceholder, textColor, dialTextColor, backgroundColor, searchBackgroundColor, fontSize, dialFontSize, borderColor, searchPlaceholderTextColor, containerStyle, searchStyle, rowStyle, flagStyle, nameStyle, dialStyle, }: CountryListProps): React.JSX.Element;
|
package/dist/CountryList.js
CHANGED
|
@@ -49,7 +49,11 @@ const styles = {
|
|
|
49
49
|
color: '#888',
|
|
50
50
|
},
|
|
51
51
|
};
|
|
52
|
-
function CountryList({ onSelect, data, searchable = true, searchPlaceholder = 'Search country...',
|
|
52
|
+
function CountryList({ onSelect, data, searchable = true, searchPlaceholder = 'Search country...',
|
|
53
|
+
// Shortcut styling props
|
|
54
|
+
textColor, dialTextColor, backgroundColor, searchBackgroundColor, fontSize, dialFontSize, borderColor, searchPlaceholderTextColor,
|
|
55
|
+
// Custom style overrides
|
|
56
|
+
containerStyle, searchStyle, rowStyle, flagStyle, nameStyle, dialStyle, }) {
|
|
53
57
|
const [query, setQuery] = (0, react_1.useState)('');
|
|
54
58
|
const source = data !== null && data !== void 0 ? data : countries_json_1.default;
|
|
55
59
|
const filtered = (0, react_1.useMemo)(() => {
|
|
@@ -60,5 +64,103 @@ function CountryList({ onSelect, data, searchable = true, searchPlaceholder = 'S
|
|
|
60
64
|
c.dial_code.includes(q) ||
|
|
61
65
|
c.code.toLowerCase().includes(q));
|
|
62
66
|
}, [query, source]);
|
|
63
|
-
|
|
67
|
+
// Unique ID for placeholder dynamic styling
|
|
68
|
+
const inputId = (0, react_1.useMemo)(() => `clp-search-${Math.floor(Math.random() * 1000000)}`, []);
|
|
69
|
+
// Compute merged styles dynamically based on shortcuts and style overrides
|
|
70
|
+
const mergedContainerStyle = (0, react_1.useMemo)(() => {
|
|
71
|
+
const dynamic = {};
|
|
72
|
+
if (backgroundColor) {
|
|
73
|
+
dynamic.backgroundColor = backgroundColor;
|
|
74
|
+
}
|
|
75
|
+
if (borderColor) {
|
|
76
|
+
dynamic.border = `1px solid ${borderColor}`;
|
|
77
|
+
}
|
|
78
|
+
return {
|
|
79
|
+
...styles.container,
|
|
80
|
+
...dynamic,
|
|
81
|
+
...containerStyle,
|
|
82
|
+
};
|
|
83
|
+
}, [backgroundColor, borderColor, containerStyle]);
|
|
84
|
+
const mergedSearchStyle = (0, react_1.useMemo)(() => {
|
|
85
|
+
const dynamic = {};
|
|
86
|
+
if (fontSize !== undefined) {
|
|
87
|
+
dynamic.fontSize = fontSize;
|
|
88
|
+
}
|
|
89
|
+
if (borderColor) {
|
|
90
|
+
dynamic.borderBottom = `1px solid ${borderColor}`;
|
|
91
|
+
}
|
|
92
|
+
if (textColor) {
|
|
93
|
+
dynamic.color = textColor;
|
|
94
|
+
}
|
|
95
|
+
if (searchBackgroundColor) {
|
|
96
|
+
dynamic.backgroundColor = searchBackgroundColor;
|
|
97
|
+
}
|
|
98
|
+
else if (backgroundColor) {
|
|
99
|
+
dynamic.backgroundColor = backgroundColor;
|
|
100
|
+
}
|
|
101
|
+
return {
|
|
102
|
+
...styles.search,
|
|
103
|
+
...dynamic,
|
|
104
|
+
...searchStyle,
|
|
105
|
+
};
|
|
106
|
+
}, [fontSize, borderColor, textColor, searchBackgroundColor, backgroundColor, searchStyle]);
|
|
107
|
+
const mergedRowStyle = (0, react_1.useMemo)(() => {
|
|
108
|
+
const dynamic = {};
|
|
109
|
+
if (borderColor) {
|
|
110
|
+
// In web we can add internal item borders if the border color is modified
|
|
111
|
+
// Let's keep it simple, but we can match border styling if desired
|
|
112
|
+
}
|
|
113
|
+
return {
|
|
114
|
+
...styles.row,
|
|
115
|
+
...dynamic,
|
|
116
|
+
...rowStyle,
|
|
117
|
+
};
|
|
118
|
+
}, [borderColor, rowStyle]);
|
|
119
|
+
const mergedFlagStyle = (0, react_1.useMemo)(() => {
|
|
120
|
+
const dynamic = {};
|
|
121
|
+
if (fontSize !== undefined) {
|
|
122
|
+
dynamic.fontSize = Math.round(fontSize * 1.4);
|
|
123
|
+
}
|
|
124
|
+
return {
|
|
125
|
+
...styles.flag,
|
|
126
|
+
...dynamic,
|
|
127
|
+
...flagStyle,
|
|
128
|
+
};
|
|
129
|
+
}, [fontSize, flagStyle]);
|
|
130
|
+
const mergedNameStyle = (0, react_1.useMemo)(() => {
|
|
131
|
+
const dynamic = {};
|
|
132
|
+
if (fontSize !== undefined) {
|
|
133
|
+
dynamic.fontSize = fontSize;
|
|
134
|
+
}
|
|
135
|
+
if (textColor) {
|
|
136
|
+
dynamic.color = textColor;
|
|
137
|
+
}
|
|
138
|
+
return {
|
|
139
|
+
...styles.name,
|
|
140
|
+
...dynamic,
|
|
141
|
+
...nameStyle,
|
|
142
|
+
};
|
|
143
|
+
}, [fontSize, textColor, nameStyle]);
|
|
144
|
+
const mergedDialStyle = (0, react_1.useMemo)(() => {
|
|
145
|
+
const dynamic = {};
|
|
146
|
+
if (dialFontSize !== undefined) {
|
|
147
|
+
dynamic.fontSize = dialFontSize;
|
|
148
|
+
}
|
|
149
|
+
else if (fontSize !== undefined) {
|
|
150
|
+
dynamic.fontSize = Math.round(fontSize * 0.9);
|
|
151
|
+
}
|
|
152
|
+
if (dialTextColor) {
|
|
153
|
+
dynamic.color = dialTextColor;
|
|
154
|
+
}
|
|
155
|
+
else if (textColor) {
|
|
156
|
+
dynamic.color = textColor;
|
|
157
|
+
dynamic.opacity = 0.6; // reduce opacity for secondary feel if sharing main text color
|
|
158
|
+
}
|
|
159
|
+
return {
|
|
160
|
+
...styles.dial,
|
|
161
|
+
...dynamic,
|
|
162
|
+
...dialStyle,
|
|
163
|
+
};
|
|
164
|
+
}, [dialFontSize, fontSize, dialTextColor, textColor, dialStyle]);
|
|
165
|
+
return ((0, jsx_runtime_1.jsxs)("div", { style: mergedContainerStyle, children: [searchable && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchPlaceholderTextColor && ((0, jsx_runtime_1.jsx)("style", { children: `#${inputId}::placeholder { color: ${searchPlaceholderTextColor}; opacity: 1; }` })), (0, jsx_runtime_1.jsx)("input", { id: inputId, style: mergedSearchStyle, placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value) })] })), (0, jsx_runtime_1.jsx)("div", { style: styles.list, children: filtered.map((country) => ((0, jsx_runtime_1.jsxs)("div", { style: mergedRowStyle, onClick: () => onSelect(country), children: [(0, jsx_runtime_1.jsx)("span", { style: mergedFlagStyle, children: country.Icon }), (0, jsx_runtime_1.jsx)("span", { style: mergedNameStyle, children: country.name }), (0, jsx_runtime_1.jsx)("span", { style: mergedDialStyle, children: country.dial_code })] }, country.code))) })] }));
|
|
64
166
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { CountryListProps } from './types';
|
|
3
|
-
export default function CountryList({ onSelect, data, searchable, searchPlaceholder, }: CountryListProps): React.JSX.Element;
|
|
3
|
+
export default function CountryList({ onSelect, data, searchable, searchPlaceholder, textColor, dialTextColor, backgroundColor, searchBackgroundColor, fontSize, dialFontSize, borderColor, searchPlaceholderTextColor, containerStyle, searchStyle, rowStyle, flagStyle, nameStyle, dialStyle, }: CountryListProps): React.JSX.Element;
|
|
@@ -8,7 +8,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
8
8
|
const react_1 = require("react");
|
|
9
9
|
const react_native_1 = require("react-native");
|
|
10
10
|
const countries_json_1 = __importDefault(require("./data/countries.json"));
|
|
11
|
-
function CountryList({ onSelect, data, searchable = true, searchPlaceholder = 'Search country...',
|
|
11
|
+
function CountryList({ onSelect, data, searchable = true, searchPlaceholder = 'Search country...',
|
|
12
|
+
// Shortcut styling props
|
|
13
|
+
textColor, dialTextColor, backgroundColor, searchBackgroundColor, fontSize, dialFontSize, borderColor, searchPlaceholderTextColor,
|
|
14
|
+
// Custom style overrides
|
|
15
|
+
containerStyle, searchStyle, rowStyle, flagStyle, nameStyle, dialStyle, }) {
|
|
12
16
|
const [query, setQuery] = (0, react_1.useState)('');
|
|
13
17
|
const source = data !== null && data !== void 0 ? data : countries_json_1.default;
|
|
14
18
|
const filtered = (0, react_1.useMemo)(() => {
|
|
@@ -19,7 +23,97 @@ function CountryList({ onSelect, data, searchable = true, searchPlaceholder = 'S
|
|
|
19
23
|
c.dial_code.includes(q) ||
|
|
20
24
|
c.code.toLowerCase().includes(q));
|
|
21
25
|
}, [query, source]);
|
|
22
|
-
|
|
26
|
+
// Compute merged styles dynamically based on shortcuts and style overrides for React Native
|
|
27
|
+
const mergedContainerStyle = (0, react_1.useMemo)(() => {
|
|
28
|
+
const dynamic = {};
|
|
29
|
+
if (backgroundColor) {
|
|
30
|
+
dynamic.backgroundColor = backgroundColor;
|
|
31
|
+
}
|
|
32
|
+
if (borderColor) {
|
|
33
|
+
dynamic.borderColor = borderColor;
|
|
34
|
+
}
|
|
35
|
+
return [
|
|
36
|
+
styles.container,
|
|
37
|
+
dynamic,
|
|
38
|
+
containerStyle,
|
|
39
|
+
];
|
|
40
|
+
}, [backgroundColor, borderColor, containerStyle]);
|
|
41
|
+
const mergedSearchStyle = (0, react_1.useMemo)(() => {
|
|
42
|
+
const dynamic = {};
|
|
43
|
+
if (fontSize !== undefined) {
|
|
44
|
+
dynamic.fontSize = fontSize;
|
|
45
|
+
}
|
|
46
|
+
if (borderColor) {
|
|
47
|
+
dynamic.borderBottomColor = borderColor;
|
|
48
|
+
}
|
|
49
|
+
if (textColor) {
|
|
50
|
+
dynamic.color = textColor;
|
|
51
|
+
}
|
|
52
|
+
if (searchBackgroundColor) {
|
|
53
|
+
dynamic.backgroundColor = searchBackgroundColor;
|
|
54
|
+
}
|
|
55
|
+
else if (backgroundColor) {
|
|
56
|
+
dynamic.backgroundColor = backgroundColor;
|
|
57
|
+
}
|
|
58
|
+
return [
|
|
59
|
+
styles.search,
|
|
60
|
+
dynamic,
|
|
61
|
+
searchStyle,
|
|
62
|
+
];
|
|
63
|
+
}, [fontSize, borderColor, textColor, searchBackgroundColor, backgroundColor, searchStyle]);
|
|
64
|
+
const mergedRowStyle = (0, react_1.useMemo)(() => {
|
|
65
|
+
return [
|
|
66
|
+
styles.row,
|
|
67
|
+
rowStyle,
|
|
68
|
+
];
|
|
69
|
+
}, [rowStyle]);
|
|
70
|
+
const mergedFlagStyle = (0, react_1.useMemo)(() => {
|
|
71
|
+
const dynamic = {};
|
|
72
|
+
if (fontSize !== undefined) {
|
|
73
|
+
dynamic.fontSize = Math.round(fontSize * 1.4);
|
|
74
|
+
}
|
|
75
|
+
return [
|
|
76
|
+
styles.flag,
|
|
77
|
+
dynamic,
|
|
78
|
+
flagStyle,
|
|
79
|
+
];
|
|
80
|
+
}, [fontSize, flagStyle]);
|
|
81
|
+
const mergedNameStyle = (0, react_1.useMemo)(() => {
|
|
82
|
+
const dynamic = {};
|
|
83
|
+
if (fontSize !== undefined) {
|
|
84
|
+
dynamic.fontSize = fontSize;
|
|
85
|
+
}
|
|
86
|
+
if (textColor) {
|
|
87
|
+
dynamic.color = textColor;
|
|
88
|
+
}
|
|
89
|
+
return [
|
|
90
|
+
styles.name,
|
|
91
|
+
dynamic,
|
|
92
|
+
nameStyle,
|
|
93
|
+
];
|
|
94
|
+
}, [fontSize, textColor, nameStyle]);
|
|
95
|
+
const mergedDialStyle = (0, react_1.useMemo)(() => {
|
|
96
|
+
const dynamic = {};
|
|
97
|
+
if (dialFontSize !== undefined) {
|
|
98
|
+
dynamic.fontSize = dialFontSize;
|
|
99
|
+
}
|
|
100
|
+
else if (fontSize !== undefined) {
|
|
101
|
+
dynamic.fontSize = Math.round(fontSize * 0.9);
|
|
102
|
+
}
|
|
103
|
+
if (dialTextColor) {
|
|
104
|
+
dynamic.color = dialTextColor;
|
|
105
|
+
}
|
|
106
|
+
else if (textColor) {
|
|
107
|
+
dynamic.color = textColor;
|
|
108
|
+
dynamic.opacity = 0.6;
|
|
109
|
+
}
|
|
110
|
+
return [
|
|
111
|
+
styles.dial,
|
|
112
|
+
dynamic,
|
|
113
|
+
dialStyle,
|
|
114
|
+
];
|
|
115
|
+
}, [dialFontSize, fontSize, dialTextColor, textColor, dialStyle]);
|
|
116
|
+
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: mergedContainerStyle, children: [searchable && ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: mergedSearchStyle, placeholder: searchPlaceholder, placeholderTextColor: searchPlaceholderTextColor, value: query, onChangeText: setQuery })), (0, jsx_runtime_1.jsx)(react_native_1.FlatList, { data: filtered, keyExtractor: (item) => item.code, renderItem: ({ item }) => ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: mergedRowStyle, onPress: () => onSelect(item), children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: mergedFlagStyle, children: item.Icon }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: mergedNameStyle, children: item.name }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: mergedDialStyle, children: item.dial_code })] })) })] }));
|
|
23
117
|
}
|
|
24
118
|
const styles = react_native_1.StyleSheet.create({
|
|
25
119
|
container: {
|
package/dist/types.d.ts
CHANGED
|
@@ -13,4 +13,32 @@ export interface CountryListProps {
|
|
|
13
13
|
searchable?: boolean;
|
|
14
14
|
/** Placeholder text for the search box */
|
|
15
15
|
searchPlaceholder?: string;
|
|
16
|
+
/** Text color for the country name and general text elements */
|
|
17
|
+
textColor?: string;
|
|
18
|
+
/** Text color for the dial code */
|
|
19
|
+
dialTextColor?: string;
|
|
20
|
+
/** Background color for the list container and item backgrounds */
|
|
21
|
+
backgroundColor?: string;
|
|
22
|
+
/** Background color for the search input */
|
|
23
|
+
searchBackgroundColor?: string;
|
|
24
|
+
/** Font size for the country name and search input */
|
|
25
|
+
fontSize?: number;
|
|
26
|
+
/** Font size for the dial code */
|
|
27
|
+
dialFontSize?: number;
|
|
28
|
+
/** Border color for the container and list items */
|
|
29
|
+
borderColor?: string;
|
|
30
|
+
/** Custom placeholder text color for the search input */
|
|
31
|
+
searchPlaceholderTextColor?: string;
|
|
32
|
+
/** Custom styles for the outer container */
|
|
33
|
+
containerStyle?: any;
|
|
34
|
+
/** Custom styles for the search text input */
|
|
35
|
+
searchStyle?: any;
|
|
36
|
+
/** Custom styles for each country row container */
|
|
37
|
+
rowStyle?: any;
|
|
38
|
+
/** Custom styles for the flag symbol text */
|
|
39
|
+
flagStyle?: any;
|
|
40
|
+
/** Custom styles for the country name text */
|
|
41
|
+
nameStyle?: any;
|
|
42
|
+
/** Custom styles for the dial code text */
|
|
43
|
+
dialStyle?: any;
|
|
16
44
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-country-list-picker",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Cross-platform country list / picker component and country data (name, dial code, ISO code, flag) for React and React Native.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -37,4 +37,4 @@
|
|
|
37
37
|
},
|
|
38
38
|
"author": "",
|
|
39
39
|
"license": "MIT"
|
|
40
|
-
}
|
|
40
|
+
}
|