sprint-asia-custom-component 0.1.173 → 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 +19 -1
- package/package.json +1 -1
- package/src/components/cardInfo/index.js +18 -0
- package/src/components/dropdownphone/index.js +143 -147
- package/src/index.js +2 -0
package/dist/index.js
CHANGED
|
@@ -45172,6 +45172,23 @@
|
|
|
45172
45172
|
})));
|
|
45173
45173
|
};
|
|
45174
45174
|
|
|
45175
|
+
const CardInfo = ({
|
|
45176
|
+
title = "Title",
|
|
45177
|
+
value = 1000
|
|
45178
|
+
}) => {
|
|
45179
|
+
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
45180
|
+
className: "w-full flex items-center h-28 bg-white shadow border border-neutral30 rounded-lg"
|
|
45181
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
45182
|
+
className: "w-4 h-full bg-info300 rounded-l-lg"
|
|
45183
|
+
}), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
45184
|
+
className: "ml-4"
|
|
45185
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
45186
|
+
className: "mb-2 font-medium text-sm"
|
|
45187
|
+
}, title), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
45188
|
+
className: "font-semibold text-lg"
|
|
45189
|
+
}, value.toLocaleString("id"))));
|
|
45190
|
+
};
|
|
45191
|
+
|
|
45175
45192
|
const ChipBar = ({
|
|
45176
45193
|
currentTab = "Pulsa",
|
|
45177
45194
|
dataBar = ["All Client", "Waiting for approval", "Approved", "Declined"],
|
|
@@ -51953,7 +51970,7 @@
|
|
|
51953
51970
|
className: "w-4 h-4 object-cover rounded-full"
|
|
51954
51971
|
}), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
51955
51972
|
className: "text-sm font-bold text-neutral300 ml-3 mr-2"
|
|
51956
|
-
}, 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", {
|
|
51957
51974
|
type: "number",
|
|
51958
51975
|
value: value,
|
|
51959
51976
|
onChange: onChangeInput,
|
|
@@ -53047,6 +53064,7 @@
|
|
|
53047
53064
|
exports.BillerList = BillerList;
|
|
53048
53065
|
exports.BillerProductList = BillerProductList;
|
|
53049
53066
|
exports.BillingList = BillingList;
|
|
53067
|
+
exports.CardInfo = CardInfo;
|
|
53050
53068
|
exports.CardInternalProduct = CardInternalProduct;
|
|
53051
53069
|
exports.CellModelFive = CellModelFive;
|
|
53052
53070
|
exports.CellModelFour = CellModelFour;
|
package/package.json
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
const CardInfo = ({
|
|
4
|
+
title = "Title",
|
|
5
|
+
value = 1000
|
|
6
|
+
}) => {
|
|
7
|
+
return (
|
|
8
|
+
<div className="w-full flex items-center h-28 bg-white shadow border border-neutral30 rounded-lg">
|
|
9
|
+
<div className="w-4 h-full bg-info300 rounded-l-lg"></div>
|
|
10
|
+
<div className="ml-4">
|
|
11
|
+
<p className="mb-2 font-medium text-sm">{title}</p>
|
|
12
|
+
<p className="font-semibold text-lg">{value.toLocaleString("id")}</p>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
)
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export default CardInfo
|
|
@@ -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;
|
package/src/index.js
CHANGED
|
@@ -58,6 +58,7 @@ import Notification from "./components/notification";
|
|
|
58
58
|
import SearchInput from "./components/searchinput";
|
|
59
59
|
import Stepper from "./components/stepper";
|
|
60
60
|
import Switch from "./components/switch";
|
|
61
|
+
import CardInfo from "./components/cardInfo";
|
|
61
62
|
import ChipBar from "./components/tabLayout/chipBar";
|
|
62
63
|
import TabBar from "./components/tabLayout/tabBar";
|
|
63
64
|
import BillerList from "./components/table/listTable/biller";
|
|
@@ -117,6 +118,7 @@ export {
|
|
|
117
118
|
BillerList,
|
|
118
119
|
TabBar,
|
|
119
120
|
ChipBar,
|
|
121
|
+
CardInfo,
|
|
120
122
|
Switch,
|
|
121
123
|
Stepper,
|
|
122
124
|
SearchInput,
|