sprint-asia-custom-component 0.1.174 → 0.1.176
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 +5 -5
- package/package.json +1 -1
- package/src/components/cardInfo/index.js +1 -1
- package/src/components/dropdownphone/index.js +143 -147
- package/src/components/modal/modalLoading/index.js +1 -1
- package/src/components/modal/modalResult/index.js +1 -1
- package/src/components/modal/modalState/index.js +1 -1
package/dist/index.js
CHANGED
|
@@ -29035,7 +29035,7 @@
|
|
|
29035
29035
|
as: React.Fragment
|
|
29036
29036
|
}, /*#__PURE__*/React__default["default"].createElement(_t, {
|
|
29037
29037
|
as: "div",
|
|
29038
|
-
className: "relative z-
|
|
29038
|
+
className: "relative z-[1001]",
|
|
29039
29039
|
initialFocus: cancelButtonRef,
|
|
29040
29040
|
onClose: () => props.onClose(),
|
|
29041
29041
|
static: true
|
|
@@ -29099,7 +29099,7 @@
|
|
|
29099
29099
|
as: React.Fragment
|
|
29100
29100
|
}, /*#__PURE__*/React__default["default"].createElement(_t, {
|
|
29101
29101
|
as: "div",
|
|
29102
|
-
className: "relative z-
|
|
29102
|
+
className: "relative z-[1001]",
|
|
29103
29103
|
initialFocus: cancelButtonRef,
|
|
29104
29104
|
onClose: () => props.onClose(),
|
|
29105
29105
|
static: true
|
|
@@ -44475,7 +44475,7 @@
|
|
|
44475
44475
|
as: React.Fragment
|
|
44476
44476
|
}, /*#__PURE__*/React__default["default"].createElement(_t, {
|
|
44477
44477
|
as: "div",
|
|
44478
|
-
className: "fixed inset-0 overflow-y-auto z-
|
|
44478
|
+
className: "fixed inset-0 overflow-y-auto z-[1001]",
|
|
44479
44479
|
initialFocus: cancelButtonRef,
|
|
44480
44480
|
onClose: () => {},
|
|
44481
44481
|
static: false
|
|
@@ -45174,7 +45174,7 @@
|
|
|
45174
45174
|
|
|
45175
45175
|
const CardInfo = ({
|
|
45176
45176
|
title = "Title",
|
|
45177
|
-
value =
|
|
45177
|
+
value = 0
|
|
45178
45178
|
}) => {
|
|
45179
45179
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
45180
45180
|
className: "w-full flex items-center h-28 bg-white shadow border border-neutral30 rounded-lg"
|
|
@@ -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;
|
|
@@ -48,7 +48,7 @@ const ModalState = ({
|
|
|
48
48
|
<Transition.Root show={isOpen} as={Fragment}>
|
|
49
49
|
<Dialog
|
|
50
50
|
as="div"
|
|
51
|
-
className="fixed inset-0 overflow-y-auto z-
|
|
51
|
+
className="fixed inset-0 overflow-y-auto z-[1001]"
|
|
52
52
|
initialFocus={cancelButtonRef}
|
|
53
53
|
onClose={() => {}}
|
|
54
54
|
static={false}
|