sprint-asia-custom-component 0.1.137 → 0.1.139
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
|
@@ -26815,8 +26815,6 @@
|
|
|
26815
26815
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
26816
26816
|
const [selectedOptions, setSelectedOptions] = React.useState([]);
|
|
26817
26817
|
const dropdownRef = React.useRef(null);
|
|
26818
|
-
|
|
26819
|
-
// Inisialisasi selectedOptions dengan currentValue saat pertama kali render
|
|
26820
26818
|
React.useEffect(() => {
|
|
26821
26819
|
setSelectedOptions(currentValue);
|
|
26822
26820
|
}, [currentValue]);
|
|
@@ -26839,9 +26837,6 @@
|
|
|
26839
26837
|
const handleOptionClick = optionValue => {
|
|
26840
26838
|
const updatedOptions = selectedOptions.some(option => option.value === optionValue) ? selectedOptions.filter(selected => selected.value !== optionValue) : [...selectedOptions, options.find(option => option.value === optionValue)];
|
|
26841
26839
|
setSelectedOptions(updatedOptions);
|
|
26842
|
-
|
|
26843
|
-
// Menampilkan selectedOptions setelah setiap klik
|
|
26844
|
-
console.log('Current selected options:', updatedOptions);
|
|
26845
26840
|
if (onSelect) {
|
|
26846
26841
|
onSelect(updatedOptions);
|
|
26847
26842
|
}
|
|
@@ -26853,7 +26848,7 @@
|
|
|
26853
26848
|
className: "rounded-md shadow-sm"
|
|
26854
26849
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
26855
26850
|
type: "button",
|
|
26856
|
-
className: "flex items-center w-
|
|
26851
|
+
className: "flex items-center w-full py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none",
|
|
26857
26852
|
onClick: handleToggleFilterCheckboxDropdown
|
|
26858
26853
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
26859
26854
|
className: "flex-grow"
|
|
@@ -26866,13 +26861,15 @@
|
|
|
26866
26861
|
size: 16,
|
|
26867
26862
|
className: "text-neutral300"
|
|
26868
26863
|
}))))), isOpen && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
26869
|
-
className: "z-10 origin-top-right absolute left-0 mt-2 w-
|
|
26864
|
+
className: "z-10 origin-top-right absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none",
|
|
26870
26865
|
role: "menu",
|
|
26871
26866
|
"aria-orientation": "vertical",
|
|
26872
26867
|
"aria-labelledby": "options-menu"
|
|
26873
26868
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
26874
26869
|
className: "px-1 py-2"
|
|
26875
|
-
}, options.
|
|
26870
|
+
}, options.length === 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
26871
|
+
className: "bg-neutral20 py-2.5 px-4 my-0.5 rounded-md text-sm text-neutral500 text-center"
|
|
26872
|
+
}, "No Data") : options.map(val => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
26876
26873
|
key: val.value,
|
|
26877
26874
|
className: `hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer ${selectedOptions.some(option => option.value === val.value) ? 'bg-primary500' : ''}`,
|
|
26878
26875
|
onClick: () => handleOptionClick(val.value)
|
package/package.json
CHANGED
|
@@ -15,7 +15,6 @@ const FilterCheckboxDropdown = ({
|
|
|
15
15
|
const [selectedOptions, setSelectedOptions] = useState([]);
|
|
16
16
|
const dropdownRef = useRef(null);
|
|
17
17
|
|
|
18
|
-
// Inisialisasi selectedOptions dengan currentValue saat pertama kali render
|
|
19
18
|
useEffect(() => {
|
|
20
19
|
setSelectedOptions(currentValue);
|
|
21
20
|
}, [currentValue]);
|
|
@@ -47,9 +46,6 @@ const FilterCheckboxDropdown = ({
|
|
|
47
46
|
|
|
48
47
|
setSelectedOptions(updatedOptions);
|
|
49
48
|
|
|
50
|
-
// Menampilkan selectedOptions setelah setiap klik
|
|
51
|
-
console.log('Current selected options:', updatedOptions);
|
|
52
|
-
|
|
53
49
|
if (onSelect) {
|
|
54
50
|
onSelect(updatedOptions);
|
|
55
51
|
}
|
|
@@ -61,7 +57,7 @@ const FilterCheckboxDropdown = ({
|
|
|
61
57
|
<span className='rounded-md shadow-sm'>
|
|
62
58
|
<button
|
|
63
59
|
type='button'
|
|
64
|
-
className="flex items-center w-
|
|
60
|
+
className="flex items-center w-full py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
|
|
65
61
|
onClick={handleToggleFilterCheckboxDropdown}
|
|
66
62
|
>
|
|
67
63
|
<span className='flex-grow'>{buttonText}</span>
|
|
@@ -74,31 +70,37 @@ const FilterCheckboxDropdown = ({
|
|
|
74
70
|
|
|
75
71
|
{isOpen && (
|
|
76
72
|
<div
|
|
77
|
-
className='z-10 origin-top-right absolute left-0 mt-2 w-
|
|
73
|
+
className='z-10 origin-top-right absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none'
|
|
78
74
|
role='menu'
|
|
79
75
|
aria-orientation='vertical'
|
|
80
76
|
aria-labelledby='options-menu'
|
|
81
77
|
>
|
|
82
78
|
<div className='px-1 py-2'>
|
|
83
|
-
{options.
|
|
84
|
-
<div
|
|
85
|
-
|
|
86
|
-
className={`hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer ${
|
|
87
|
-
selectedOptions.some(option => option.value === val.value) ? 'bg-primary500' : ''
|
|
88
|
-
}`}
|
|
89
|
-
onClick={() => handleOptionClick(val.value)}
|
|
90
|
-
>
|
|
91
|
-
<input
|
|
92
|
-
type='checkbox'
|
|
93
|
-
className='mr-2'
|
|
94
|
-
checked={selectedOptions.some(option => option.value === val.value)}
|
|
95
|
-
onChange={() => handleOptionClick(val.value)}
|
|
96
|
-
/>
|
|
97
|
-
<p className={`text-sm ${selectedOptions.some(option => option.value === val.value) ? 'text-primary500' : 'text-black'}`}>
|
|
98
|
-
{val.option}
|
|
99
|
-
</p>
|
|
79
|
+
{options.length === 0 ? (
|
|
80
|
+
<div className='bg-neutral20 py-2.5 px-4 my-0.5 rounded-md text-sm text-neutral500 text-center'>
|
|
81
|
+
No Data
|
|
100
82
|
</div>
|
|
101
|
-
)
|
|
83
|
+
) : (
|
|
84
|
+
options.map((val) => (
|
|
85
|
+
<div
|
|
86
|
+
key={val.value}
|
|
87
|
+
className={`hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer ${
|
|
88
|
+
selectedOptions.some(option => option.value === val.value) ? 'bg-primary500' : ''
|
|
89
|
+
}`}
|
|
90
|
+
onClick={() => handleOptionClick(val.value)}
|
|
91
|
+
>
|
|
92
|
+
<input
|
|
93
|
+
type='checkbox'
|
|
94
|
+
className='mr-2'
|
|
95
|
+
checked={selectedOptions.some(option => option.value === val.value)}
|
|
96
|
+
onChange={() => handleOptionClick(val.value)}
|
|
97
|
+
/>
|
|
98
|
+
<p className={`text-sm ${selectedOptions.some(option => option.value === val.value) ? 'text-primary500' : 'text-black'}`}>
|
|
99
|
+
{val.option}
|
|
100
|
+
</p>
|
|
101
|
+
</div>
|
|
102
|
+
))
|
|
103
|
+
)}
|
|
102
104
|
</div>
|
|
103
105
|
</div>
|
|
104
106
|
)}
|