sprint-asia-custom-component 0.1.174 → 0.1.175
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/index.js +1 -1
- package/package.json +1 -1
- package/src/components/dropdownphone/index.js +143 -147
package/dist/index.js
CHANGED
|
@@ -51970,7 +51970,7 @@
|
|
|
51970
51970
|
className: "w-4 h-4 object-cover rounded-full"
|
|
51971
51971
|
}), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
51972
51972
|
className: "text-sm font-bold text-neutral300 ml-3 mr-2"
|
|
51973
|
-
}, dropdownCountry.option), isEdited && redeemType !== "ppob"
|
|
51973
|
+
}, dropdownCountry.option), isEdited && redeemType !== "ppob" ? isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, null) : /*#__PURE__*/React__default["default"].createElement(PiCaretDown, null) : null), /*#__PURE__*/React__default["default"].createElement("input", {
|
|
51974
51974
|
type: "number",
|
|
51975
51975
|
value: value,
|
|
51976
51976
|
onChange: onChangeInput,
|
package/package.json
CHANGED
|
@@ -3,181 +3,177 @@ import { PiCaretDown, PiCaretUp, PiInfo } from "react-icons/pi";
|
|
|
3
3
|
import { customList } from "country-codes-list";
|
|
4
4
|
|
|
5
5
|
const DropdownPhone = ({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
dropdownCountry = { option: "+62", value: "id", label: "Indonesia" },
|
|
7
|
+
setDropdownCountry,
|
|
8
|
+
title = "",
|
|
9
|
+
isRequired = true,
|
|
10
|
+
value = "",
|
|
11
|
+
onChangeInput,
|
|
12
|
+
footer = null,
|
|
13
|
+
mode = "default",
|
|
14
|
+
placeholder = "",
|
|
15
|
+
redeemType = "",
|
|
16
|
+
isEdited = true, // ✅ tambahkan prop isEdited
|
|
17
17
|
}) => {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
19
|
+
const wrapperRef = useRef(null);
|
|
20
|
+
const [wrapperWidth, setWrapperWidth] = useState(0);
|
|
21
|
+
const [options, setOptions] = useState([]);
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
const list = Object.entries(customList("countryCode", "{countryNameEn} +{countryCallingCode}")).map(
|
|
25
|
+
([code, label]) => {
|
|
26
|
+
const [countryName, callingCode] = label.split(" +");
|
|
27
|
+
return {
|
|
28
|
+
option: `+${callingCode}`,
|
|
29
|
+
value: code.toLowerCase(),
|
|
30
|
+
label: countryName,
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
const sortedList = list.sort((a, b) => a.label.localeCompare(b.label));
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
});
|
|
46
|
-
}
|
|
37
|
+
const indonesiaExists = sortedList.some((item) => item.value === "id" && item.option === "+62");
|
|
38
|
+
if (!indonesiaExists) {
|
|
39
|
+
sortedList.push({
|
|
40
|
+
option: "+62",
|
|
41
|
+
value: "id",
|
|
42
|
+
label: "Indonesia",
|
|
43
|
+
});
|
|
44
|
+
}
|
|
47
45
|
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
setOptions(sortedList);
|
|
47
|
+
}, []);
|
|
50
48
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (wrapperRef.current) {
|
|
51
|
+
setWrapperWidth(wrapperRef.current.offsetWidth);
|
|
52
|
+
}
|
|
53
|
+
}, [wrapperRef.current, value]);
|
|
56
54
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
55
|
+
const handleClickOption = (data) => {
|
|
56
|
+
setIsOpen(false);
|
|
57
|
+
setDropdownCountry(data);
|
|
58
|
+
};
|
|
61
59
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
60
|
+
return (
|
|
61
|
+
<div className="w-full">
|
|
62
|
+
{title && (
|
|
63
|
+
<div className="flex mb-1">
|
|
64
|
+
<p className="text-sm font-normal text-black">{title}</p>
|
|
65
|
+
{isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
|
|
66
|
+
</div>
|
|
67
|
+
)}
|
|
70
68
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
<div ref={wrapperRef} className="relative w-full">
|
|
70
|
+
<div
|
|
71
|
+
className={`
|
|
74
72
|
flex items-center rounded-md overflow-hidden w-full pr-3
|
|
75
73
|
${!isEdited ? "bg-neutral30 cursor-not-allowed" : ""}
|
|
76
|
-
${
|
|
74
|
+
${
|
|
75
|
+
mode === "danger"
|
|
77
76
|
? "border border-danger500 bg-danger50"
|
|
78
|
-
: "border border-neutral50 bg-neutral20"
|
|
77
|
+
: "border border-neutral50 bg-neutral20"
|
|
78
|
+
}
|
|
79
79
|
`}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
80
|
+
>
|
|
81
|
+
<div
|
|
82
|
+
className={`flex items-center px-3 py-2 border-r border-neutral50 mr-3
|
|
83
83
|
${isEdited && redeemType !== "ppob" ? "cursor-pointer" : "cursor-not-allowed"}`}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
{isEdited && redeemType !== "ppob" && (isOpen ? <PiCaretUp /> : <PiCaretDown />)}
|
|
99
|
-
</div>
|
|
84
|
+
onClick={() => {
|
|
85
|
+
if (isEdited && redeemType !== "ppob") {
|
|
86
|
+
setIsOpen(!isOpen);
|
|
87
|
+
}
|
|
88
|
+
}}
|
|
89
|
+
>
|
|
90
|
+
<img
|
|
91
|
+
src={`https://flagcdn.com/w40/${dropdownCountry.value}.png`}
|
|
92
|
+
alt={dropdownCountry.label}
|
|
93
|
+
className="w-4 h-4 object-cover rounded-full"
|
|
94
|
+
/>
|
|
95
|
+
<p className="text-sm font-bold text-neutral300 ml-3 mr-2">{dropdownCountry.option}</p>
|
|
96
|
+
{isEdited && redeemType !== "ppob" ? isOpen ? <PiCaretUp /> : <PiCaretDown /> : null}
|
|
97
|
+
</div>
|
|
100
98
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
<input
|
|
100
|
+
type="number"
|
|
101
|
+
value={value}
|
|
102
|
+
onChange={onChangeInput}
|
|
103
|
+
className={`
|
|
106
104
|
flex-1 w-full py-2.5 text-sm text-black focus:outline-none
|
|
107
105
|
placeholder:text-neutral300
|
|
108
106
|
${!isEdited ? "bg-neutral30 cursor-not-allowed" : ""}
|
|
109
107
|
${mode === "danger" ? "bg-danger50 text-danger500" : "bg-neutral20"}
|
|
110
108
|
`}
|
|
111
|
-
|
|
112
|
-
|
|
109
|
+
placeholder={placeholder}
|
|
110
|
+
disabled={!isEdited} // ✅ disable input kalau isEdited false
|
|
111
|
+
/>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
{isOpen &&
|
|
115
|
+
redeemType !== "ppob" &&
|
|
116
|
+
isEdited && ( // ✅ hanya tampil kalau isEdited true
|
|
117
|
+
<div
|
|
118
|
+
className="absolute top-full mt-1 z-10 rounded-md shadow-md bg-neutral20 ring-1 ring-black ring-opacity-5 overflow-y-auto max-h-64 no-scrollbar"
|
|
119
|
+
style={{ width: wrapperWidth }}
|
|
120
|
+
>
|
|
121
|
+
<div className="py-2 bg-white">
|
|
122
|
+
<div className="bg-neutral20 rounded-lg px-4 py-2.5 my-1 mx-2 cursor-default">
|
|
123
|
+
<div className="flex items-center gap-2">
|
|
124
|
+
<img
|
|
125
|
+
src={`https://flagcdn.com/w40/${dropdownCountry.value}.png`}
|
|
126
|
+
alt={dropdownCountry.label}
|
|
127
|
+
className="w-5 h-5 object-cover rounded-full"
|
|
113
128
|
/>
|
|
129
|
+
<p className="text-sm text-black">
|
|
130
|
+
{dropdownCountry.label ||
|
|
131
|
+
options.find(
|
|
132
|
+
(opt) => opt.value === dropdownCountry.value && opt.option === dropdownCountry.option
|
|
133
|
+
)?.label}
|
|
134
|
+
</p>
|
|
135
|
+
<p className="text-sm text-black">{dropdownCountry.option}</p>
|
|
136
|
+
</div>
|
|
114
137
|
</div>
|
|
115
138
|
|
|
116
|
-
{
|
|
139
|
+
{options
|
|
140
|
+
.filter((opt) => opt.value !== dropdownCountry.value || opt.option !== dropdownCountry.option)
|
|
141
|
+
.map((option, index) => (
|
|
117
142
|
<div
|
|
118
|
-
|
|
119
|
-
|
|
143
|
+
key={index}
|
|
144
|
+
className="bg-white rounded-lg px-4 py-2.5 my-1 mx-2 cursor-pointer transition-all hover:bg-neutral20"
|
|
145
|
+
onClick={() => handleClickOption(option)}
|
|
120
146
|
>
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
{
|
|
131
|
-
dropdownCountry.label ||
|
|
132
|
-
options.find((opt) => opt.value === dropdownCountry.value && opt.option === dropdownCountry.option)?.label
|
|
133
|
-
}
|
|
134
|
-
</p>
|
|
135
|
-
<p className="text-sm text-black">{dropdownCountry.option}</p>
|
|
136
|
-
</div>
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
{options
|
|
140
|
-
.filter(
|
|
141
|
-
(opt) =>
|
|
142
|
-
opt.value !== dropdownCountry.value ||
|
|
143
|
-
opt.option !== dropdownCountry.option
|
|
144
|
-
)
|
|
145
|
-
.map((option, index) => (
|
|
146
|
-
<div
|
|
147
|
-
key={index}
|
|
148
|
-
className="bg-white rounded-lg px-4 py-2.5 my-1 mx-2 cursor-pointer transition-all hover:bg-neutral20"
|
|
149
|
-
onClick={() => handleClickOption(option)}
|
|
150
|
-
>
|
|
151
|
-
<div className="flex items-center gap-2">
|
|
152
|
-
<img
|
|
153
|
-
src={`https://flagcdn.com/w40/${option.value}.png`}
|
|
154
|
-
alt={option.label}
|
|
155
|
-
className="w-5 h-5 object-cover rounded-full"
|
|
156
|
-
/>
|
|
157
|
-
<p className="text-sm text-black">{option.label}</p>
|
|
158
|
-
<p className="text-sm text-black">{option.option}</p>
|
|
159
|
-
</div>
|
|
160
|
-
</div>
|
|
161
|
-
))}
|
|
162
|
-
</div>
|
|
147
|
+
<div className="flex items-center gap-2">
|
|
148
|
+
<img
|
|
149
|
+
src={`https://flagcdn.com/w40/${option.value}.png`}
|
|
150
|
+
alt={option.label}
|
|
151
|
+
className="w-5 h-5 object-cover rounded-full"
|
|
152
|
+
/>
|
|
153
|
+
<p className="text-sm text-black">{option.label}</p>
|
|
154
|
+
<p className="text-sm text-black">{option.option}</p>
|
|
155
|
+
</div>
|
|
163
156
|
</div>
|
|
164
|
-
|
|
157
|
+
))}
|
|
158
|
+
</div>
|
|
165
159
|
</div>
|
|
160
|
+
)}
|
|
161
|
+
</div>
|
|
166
162
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
</div>
|
|
178
|
-
)}
|
|
163
|
+
{footer && (
|
|
164
|
+
<div className="mt-1">
|
|
165
|
+
{mode === "danger" ? (
|
|
166
|
+
<div className="flex items-center">
|
|
167
|
+
<PiInfo size={16} className="text-danger500" />
|
|
168
|
+
<p className="text-danger500 text-xs ml-1">{footer}</p>
|
|
169
|
+
</div>
|
|
170
|
+
) : (
|
|
171
|
+
<p className="text-black text-xs">{footer}</p>
|
|
172
|
+
)}
|
|
179
173
|
</div>
|
|
180
|
-
|
|
174
|
+
)}
|
|
175
|
+
</div>
|
|
176
|
+
);
|
|
181
177
|
};
|
|
182
178
|
|
|
183
|
-
export default DropdownPhone;
|
|
179
|
+
export default DropdownPhone;
|