sprint-asia-custom-component 0.1.18 → 0.1.20
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
CHANGED
|
@@ -46536,6 +46536,7 @@
|
|
|
46536
46536
|
|
|
46537
46537
|
const SearchDropdown = ({
|
|
46538
46538
|
options = ["Loading..."],
|
|
46539
|
+
valueOptions = ["Loading..."],
|
|
46539
46540
|
placeholderSearch = "Search Here",
|
|
46540
46541
|
filterDropdown = "Filter",
|
|
46541
46542
|
setValueFilterDropdown,
|
|
@@ -46578,7 +46579,7 @@
|
|
|
46578
46579
|
}, options?.length > 0 ? options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46579
46580
|
key: index,
|
|
46580
46581
|
className: "hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer",
|
|
46581
|
-
onClick: () => handleClickOption(
|
|
46582
|
+
onClick: () => handleClickOption(valueOptions[index])
|
|
46582
46583
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46583
46584
|
className: "flex justify-between"
|
|
46584
46585
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
@@ -46634,7 +46635,6 @@
|
|
|
46634
46635
|
};
|
|
46635
46636
|
}, [showFilterMenu]);
|
|
46636
46637
|
React.useEffect(() => {
|
|
46637
|
-
console.log("masuk bos");
|
|
46638
46638
|
setDataFilterResult({
|
|
46639
46639
|
role: dataFilterCheckbox,
|
|
46640
46640
|
status: dataFilterStatus
|
|
@@ -46651,25 +46651,37 @@
|
|
|
46651
46651
|
setDataFilterStatus([submenu]);
|
|
46652
46652
|
}
|
|
46653
46653
|
};
|
|
46654
|
+
const handleResetFilter = () => {
|
|
46655
|
+
setDataFilterCheckbox([]);
|
|
46656
|
+
setDataFilterStatus([]);
|
|
46657
|
+
setDataFilterResult({
|
|
46658
|
+
role: [],
|
|
46659
|
+
status: []
|
|
46660
|
+
});
|
|
46661
|
+
};
|
|
46654
46662
|
const buttonText = dataFilterCheckbox.length + dataFilterStatus.length > 0 ? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected` : 'Filter';
|
|
46655
46663
|
return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
46656
46664
|
className: "rounded-md shadow-sm"
|
|
46665
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46666
|
+
className: "flex"
|
|
46657
46667
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
46658
46668
|
type: "button",
|
|
46659
46669
|
className: "flex items-center w-60 py-2.5 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none",
|
|
46660
46670
|
onClick: () => setShowFilterMenu(!showFilterMenu)
|
|
46661
46671
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
46662
46672
|
className: "flex-grow"
|
|
46663
|
-
}, buttonText), /*#__PURE__*/React__default["default"].createElement("
|
|
46673
|
+
}, buttonText), dataFilterCheckbox.length + dataFilterStatus.length > 0 ? /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46674
|
+
onClick: handleResetFilter
|
|
46675
|
+
}, "x") : /*#__PURE__*/React__default["default"].createElement("span", {
|
|
46664
46676
|
className: "ml-2"
|
|
46665
46677
|
}, /*#__PURE__*/React__default["default"].createElement(PiFunnel, {
|
|
46666
46678
|
size: 16,
|
|
46667
46679
|
className: "text-neutral300"
|
|
46668
|
-
}))))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46680
|
+
})))))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46669
46681
|
className: "relative"
|
|
46670
46682
|
}, showFilterMenu && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46671
46683
|
ref: dropdownRef,
|
|
46672
|
-
className: "bg-white rounded-md p-3
|
|
46684
|
+
className: "bg-white border border-neutral40 w-32 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
|
|
46673
46685
|
}, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46674
46686
|
key: index
|
|
46675
46687
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
@@ -46697,7 +46709,7 @@
|
|
|
46697
46709
|
fontSize: "8px"
|
|
46698
46710
|
}
|
|
46699
46711
|
}, dataFilterStatus.length))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46700
|
-
className: "bg-white p-3 shadow-md rounded-md
|
|
46712
|
+
className: "ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-32 top-0 cursor-pointer"
|
|
46701
46713
|
}, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46702
46714
|
key: subIndex,
|
|
46703
46715
|
className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
|
package/package.json
CHANGED
|
@@ -41,7 +41,6 @@ const FilterDropdown = ({
|
|
|
41
41
|
}, [showFilterMenu]);
|
|
42
42
|
|
|
43
43
|
useEffect(() => {
|
|
44
|
-
console.log("masuk bos")
|
|
45
44
|
setDataFilterResult({
|
|
46
45
|
role:dataFilterCheckbox,
|
|
47
46
|
status:dataFilterStatus
|
|
@@ -65,6 +64,15 @@ const FilterDropdown = ({
|
|
|
65
64
|
}
|
|
66
65
|
}
|
|
67
66
|
|
|
67
|
+
const handleResetFilter = () => {
|
|
68
|
+
setDataFilterCheckbox([])
|
|
69
|
+
setDataFilterStatus([])
|
|
70
|
+
setDataFilterResult({
|
|
71
|
+
role:[],
|
|
72
|
+
status:[]
|
|
73
|
+
})
|
|
74
|
+
}
|
|
75
|
+
|
|
68
76
|
const buttonText =
|
|
69
77
|
dataFilterCheckbox.length + dataFilterStatus.length > 0
|
|
70
78
|
? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected`
|
|
@@ -75,16 +83,22 @@ const FilterDropdown = ({
|
|
|
75
83
|
<div>
|
|
76
84
|
<div>
|
|
77
85
|
<span className='rounded-md shadow-sm'>
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
86
|
+
<div className='flex'>
|
|
87
|
+
<button
|
|
88
|
+
type='button'
|
|
89
|
+
className="flex items-center w-60 py-2.5 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
|
|
90
|
+
onClick={() => setShowFilterMenu(!showFilterMenu)}
|
|
91
|
+
>
|
|
92
|
+
<span className='flex-grow'>{buttonText}</span>
|
|
93
|
+
{
|
|
94
|
+
dataFilterCheckbox.length + dataFilterStatus.length > 0 ?
|
|
95
|
+
<p onClick={handleResetFilter}>x</p> :
|
|
96
|
+
<span className='ml-2'>
|
|
97
|
+
<PiFunnel size={16} className='text-neutral300' />
|
|
98
|
+
</span>
|
|
99
|
+
}
|
|
100
|
+
</button>
|
|
101
|
+
</div>
|
|
88
102
|
</span>
|
|
89
103
|
</div>
|
|
90
104
|
<div className="relative">
|
|
@@ -92,7 +106,7 @@ const FilterDropdown = ({
|
|
|
92
106
|
showFilterMenu &&
|
|
93
107
|
<div
|
|
94
108
|
ref={dropdownRef}
|
|
95
|
-
className="bg-white rounded-md p-3
|
|
109
|
+
className="bg-white border border-neutral40 w-32 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
|
|
96
110
|
>
|
|
97
111
|
{
|
|
98
112
|
options.map((option, index) => (
|
|
@@ -118,7 +132,7 @@ const FilterDropdown = ({
|
|
|
118
132
|
</div>
|
|
119
133
|
{
|
|
120
134
|
showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu &&
|
|
121
|
-
<div className="bg-white p-3 shadow-md rounded-md
|
|
135
|
+
<div className="ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-32 top-0 cursor-pointer">
|
|
122
136
|
{
|
|
123
137
|
option.submenu.map((submenu, subIndex) => (
|
|
124
138
|
<div key={subIndex} className='flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5'
|
|
@@ -3,6 +3,7 @@ import { PiMagnifyingGlass, PiCaretDown, PiCaretUp } from 'react-icons/pi';
|
|
|
3
3
|
|
|
4
4
|
const SearchDropdown = ({
|
|
5
5
|
options = ["Loading..."],
|
|
6
|
+
valueOptions = ["Loading..."],
|
|
6
7
|
placeholderSearch = "Search Here",
|
|
7
8
|
filterDropdown = "Filter",
|
|
8
9
|
setValueFilterDropdown,
|
|
@@ -49,7 +50,7 @@ const SearchDropdown = ({
|
|
|
49
50
|
<div
|
|
50
51
|
key={index}
|
|
51
52
|
className='hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer'
|
|
52
|
-
onClick={() => handleClickOption(
|
|
53
|
+
onClick={() => handleClickOption(valueOptions[index])}
|
|
53
54
|
>
|
|
54
55
|
<div className='flex justify-between'>
|
|
55
56
|
<p className='text-sm text-black font-semibold'>{option}</p>
|