sprint-asia-custom-component 0.1.16 → 0.1.18
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 +58 -22
- package/package.json +1 -1
- package/src/components/filter/filterDropdown/index.js +68 -37
- package/src/index.js +0 -1
- package/src/templates/index.js +6 -23
package/dist/index.js
CHANGED
|
@@ -46603,17 +46603,21 @@
|
|
|
46603
46603
|
|
|
46604
46604
|
const FilterDropdown = ({
|
|
46605
46605
|
options = [{
|
|
46606
|
-
menu: "
|
|
46607
|
-
submenu: ["
|
|
46606
|
+
menu: "Type",
|
|
46607
|
+
submenu: ["Type 1", "Type 2"],
|
|
46608
|
+
type: "checkbox"
|
|
46609
|
+
}, {
|
|
46610
|
+
menu: "Status",
|
|
46611
|
+
submenu: ["Status 1", "Status 2"],
|
|
46612
|
+
type: "radiobutton"
|
|
46608
46613
|
}],
|
|
46609
|
-
|
|
46610
|
-
selectedOptionMenu = null,
|
|
46611
|
-
setSelectedOptionMenu,
|
|
46612
|
-
selectedOptionSubmenu = [],
|
|
46613
|
-
setSelectedOptionSubmenu
|
|
46614
|
+
setDataFilterResult = () => {}
|
|
46614
46615
|
}) => {
|
|
46615
46616
|
const [showFilterMenu, setShowFilterMenu] = React.useState(false);
|
|
46616
46617
|
const [showFilterSubmenu, setShowFilterSubmenu] = React.useState(false);
|
|
46618
|
+
const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = React.useState();
|
|
46619
|
+
const [dataFilterCheckbox, setDataFilterCheckbox] = React.useState([]);
|
|
46620
|
+
const [dataFilterStatus, setDataFilterStatus] = React.useState([]);
|
|
46617
46621
|
const dropdownRef = React.useRef(null);
|
|
46618
46622
|
React.useEffect(() => {
|
|
46619
46623
|
const handleOutsideClick = event => {
|
|
@@ -46629,14 +46633,25 @@
|
|
|
46629
46633
|
document.removeEventListener('mousedown', handleOutsideClick);
|
|
46630
46634
|
};
|
|
46631
46635
|
}, [showFilterMenu]);
|
|
46636
|
+
React.useEffect(() => {
|
|
46637
|
+
console.log("masuk bos");
|
|
46638
|
+
setDataFilterResult({
|
|
46639
|
+
role: dataFilterCheckbox,
|
|
46640
|
+
status: dataFilterStatus
|
|
46641
|
+
});
|
|
46642
|
+
}, [dataFilterCheckbox, dataFilterStatus]);
|
|
46632
46643
|
const handleClickSubmenuCheckbox = submenu => {
|
|
46633
|
-
const updatedOptions =
|
|
46634
|
-
|
|
46644
|
+
const updatedOptions = dataFilterCheckbox.includes(submenu) ? dataFilterCheckbox.filter(selected => selected !== submenu) : [...dataFilterCheckbox, submenu];
|
|
46645
|
+
setDataFilterCheckbox(updatedOptions);
|
|
46635
46646
|
};
|
|
46636
46647
|
const handleClickSubmenuRadioButton = submenu => {
|
|
46637
|
-
|
|
46648
|
+
if (submenu == dataFilterStatus[0]) {
|
|
46649
|
+
setDataFilterStatus([]);
|
|
46650
|
+
} else {
|
|
46651
|
+
setDataFilterStatus([submenu]);
|
|
46652
|
+
}
|
|
46638
46653
|
};
|
|
46639
|
-
const buttonText =
|
|
46654
|
+
const buttonText = dataFilterCheckbox.length + dataFilterStatus.length > 0 ? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected` : 'Filter';
|
|
46640
46655
|
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", {
|
|
46641
46656
|
className: "rounded-md shadow-sm"
|
|
46642
46657
|
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
@@ -46661,36 +46676,57 @@
|
|
|
46661
46676
|
className: `hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer justify-between`,
|
|
46662
46677
|
onClick: () => {
|
|
46663
46678
|
setShowFilterSubmenu(true);
|
|
46664
|
-
|
|
46679
|
+
setDataSelectionOptionMenu(option.menu);
|
|
46680
|
+
}
|
|
46681
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", null, option.menu), option.type == "checkbox" ? dataFilterCheckbox.length == 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
|
|
46682
|
+
size: 16,
|
|
46683
|
+
className: "text-neutral300"
|
|
46684
|
+
}) : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46685
|
+
className: "w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500"
|
|
46686
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46687
|
+
style: {
|
|
46688
|
+
fontSize: "8px"
|
|
46665
46689
|
}
|
|
46666
|
-
},
|
|
46690
|
+
}, dataFilterCheckbox.length)) : dataFilterStatus.length == 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
|
|
46667
46691
|
size: 16,
|
|
46668
46692
|
className: "text-neutral300"
|
|
46669
|
-
})
|
|
46693
|
+
}) : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46694
|
+
className: "w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500"
|
|
46695
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46696
|
+
style: {
|
|
46697
|
+
fontSize: "8px"
|
|
46698
|
+
}
|
|
46699
|
+
}, dataFilterStatus.length))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46670
46700
|
className: "bg-white p-3 shadow-md rounded-md max-w-[180px] w-full absolute -right-[185px] top-0 cursor-pointer"
|
|
46671
46701
|
}, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46672
46702
|
key: subIndex,
|
|
46673
46703
|
className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
|
|
46674
46704
|
onClick: () => {
|
|
46675
|
-
if (type === "checkbox") {
|
|
46705
|
+
if (option.type === "checkbox") {
|
|
46676
46706
|
handleClickSubmenuCheckbox(submenu);
|
|
46677
|
-
} else if (type === "radiobutton") {
|
|
46707
|
+
} else if (option.type === "radiobutton") {
|
|
46678
46708
|
handleClickSubmenuRadioButton(submenu);
|
|
46679
46709
|
}
|
|
46680
46710
|
}
|
|
46681
|
-
}, type === "checkbox" && /*#__PURE__*/React__default["default"].createElement("
|
|
46711
|
+
}, option.type === "checkbox" && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46712
|
+
className: "flex items-center"
|
|
46713
|
+
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
46682
46714
|
type: "checkbox",
|
|
46683
46715
|
className: "mr-2",
|
|
46684
|
-
checked:
|
|
46716
|
+
checked: dataFilterCheckbox.includes(submenu),
|
|
46685
46717
|
onChange: () => handleClickSubmenuCheckbox(submenu)
|
|
46686
|
-
}),
|
|
46718
|
+
}), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46719
|
+
className: `text-sm ${dataFilterCheckbox.includes(submenu) ? 'text-primary500' : 'text-black'}`
|
|
46720
|
+
}, submenu)), option.type === "radiobutton" && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
46721
|
+
className: "flex items-center"
|
|
46722
|
+
}, /*#__PURE__*/React__default["default"].createElement("input", {
|
|
46687
46723
|
type: "radio",
|
|
46688
46724
|
className: "mr-2",
|
|
46689
|
-
checked:
|
|
46725
|
+
checked: dataFilterStatus.includes(submenu),
|
|
46690
46726
|
onChange: () => handleClickSubmenuRadioButton(submenu)
|
|
46691
46727
|
}), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
46692
|
-
className: `text-sm ${
|
|
46693
|
-
}, submenu))))))))));
|
|
46728
|
+
className: `text-sm ${dataFilterStatus.includes(submenu) ? 'text-primary500' : 'text-black'}`
|
|
46729
|
+
}, submenu)))))))))));
|
|
46694
46730
|
};
|
|
46695
46731
|
|
|
46696
46732
|
exports.Alert = Alert;
|
package/package.json
CHANGED
|
@@ -4,18 +4,23 @@ import { PiFunnel, PiCaretRight } from 'react-icons/pi';
|
|
|
4
4
|
const FilterDropdown = ({
|
|
5
5
|
options = [
|
|
6
6
|
{
|
|
7
|
-
menu:"
|
|
8
|
-
submenu:["
|
|
7
|
+
menu:"Type",
|
|
8
|
+
submenu:["Type 1", "Type 2"],
|
|
9
|
+
type:"checkbox"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
menu:"Status",
|
|
13
|
+
submenu:["Status 1", "Status 2"],
|
|
14
|
+
type:"radiobutton"
|
|
9
15
|
},
|
|
10
16
|
],
|
|
11
|
-
|
|
12
|
-
selectedOptionMenu = null,
|
|
13
|
-
setSelectedOptionMenu,
|
|
14
|
-
selectedOptionSubmenu = [],
|
|
15
|
-
setSelectedOptionSubmenu,
|
|
17
|
+
setDataFilterResult = () => {},
|
|
16
18
|
}) => {
|
|
17
19
|
const [showFilterMenu, setShowFilterMenu] = useState(false);
|
|
18
20
|
const [showFilterSubmenu, setShowFilterSubmenu] = useState(false);
|
|
21
|
+
const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = useState();
|
|
22
|
+
const [dataFilterCheckbox, setDataFilterCheckbox] = useState([]);
|
|
23
|
+
const [dataFilterStatus, setDataFilterStatus] = useState([]);
|
|
19
24
|
const dropdownRef = useRef(null);
|
|
20
25
|
|
|
21
26
|
useEffect(() => {
|
|
@@ -35,21 +40,34 @@ const FilterDropdown = ({
|
|
|
35
40
|
};
|
|
36
41
|
}, [showFilterMenu]);
|
|
37
42
|
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
console.log("masuk bos")
|
|
45
|
+
setDataFilterResult({
|
|
46
|
+
role:dataFilterCheckbox,
|
|
47
|
+
status:dataFilterStatus
|
|
48
|
+
})
|
|
49
|
+
}, [dataFilterCheckbox, dataFilterStatus])
|
|
50
|
+
|
|
38
51
|
const handleClickSubmenuCheckbox = (submenu) => {
|
|
39
|
-
const updatedOptions =
|
|
40
|
-
?
|
|
41
|
-
: [...
|
|
52
|
+
const updatedOptions = dataFilterCheckbox.includes(submenu)
|
|
53
|
+
? dataFilterCheckbox.filter((selected) => selected !== submenu)
|
|
54
|
+
: [...dataFilterCheckbox, submenu];
|
|
42
55
|
|
|
43
|
-
|
|
56
|
+
setDataFilterCheckbox(updatedOptions);
|
|
44
57
|
}
|
|
45
58
|
|
|
46
59
|
const handleClickSubmenuRadioButton = (submenu) => {
|
|
47
|
-
|
|
60
|
+
if (submenu == dataFilterStatus[0]) {
|
|
61
|
+
setDataFilterStatus([])
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
setDataFilterStatus([submenu]);
|
|
65
|
+
}
|
|
48
66
|
}
|
|
49
67
|
|
|
50
68
|
const buttonText =
|
|
51
|
-
|
|
52
|
-
? `${
|
|
69
|
+
dataFilterCheckbox.length + dataFilterStatus.length > 0
|
|
70
|
+
? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected`
|
|
53
71
|
: 'Filter';
|
|
54
72
|
|
|
55
73
|
return (
|
|
@@ -83,50 +101,63 @@ const FilterDropdown = ({
|
|
|
83
101
|
className={`hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer justify-between`}
|
|
84
102
|
onClick={() => {
|
|
85
103
|
setShowFilterSubmenu(true);
|
|
86
|
-
|
|
104
|
+
setDataSelectionOptionMenu(option.menu);
|
|
87
105
|
}}
|
|
88
106
|
>
|
|
89
107
|
<p>{option.menu}</p>
|
|
90
108
|
{
|
|
91
|
-
option.
|
|
92
|
-
|
|
109
|
+
option.type == "checkbox" ?
|
|
110
|
+
dataFilterCheckbox.length == 0 ?
|
|
111
|
+
<PiCaretRight size={16} className='text-neutral300' />
|
|
112
|
+
: <div className='w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500'><p style={{fontSize:"8px"}}>{dataFilterCheckbox.length}</p></div>
|
|
113
|
+
:
|
|
114
|
+
dataFilterStatus.length == 0 ?
|
|
115
|
+
<PiCaretRight size={16} className='text-neutral300' />
|
|
116
|
+
: <div className='w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500'><p style={{fontSize:"8px"}}>{dataFilterStatus.length}</p></div>
|
|
93
117
|
}
|
|
94
118
|
</div>
|
|
95
119
|
{
|
|
96
|
-
showFilterSubmenu && option.submenu.length > 0 &&
|
|
120
|
+
showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu &&
|
|
97
121
|
<div className="bg-white p-3 shadow-md rounded-md max-w-[180px] w-full absolute -right-[185px] top-0 cursor-pointer">
|
|
98
122
|
{
|
|
99
123
|
option.submenu.map((submenu, subIndex) => (
|
|
100
124
|
<div key={subIndex} className='flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5'
|
|
101
125
|
onClick={() => {
|
|
102
|
-
if (type === "checkbox") {
|
|
126
|
+
if (option.type === "checkbox") {
|
|
103
127
|
handleClickSubmenuCheckbox(submenu);
|
|
104
|
-
} else if (type === "radiobutton") {
|
|
128
|
+
} else if (option.type === "radiobutton") {
|
|
105
129
|
handleClickSubmenuRadioButton(submenu);
|
|
106
130
|
}
|
|
107
131
|
}}
|
|
108
132
|
>
|
|
109
133
|
{
|
|
110
|
-
type === "checkbox" &&
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
134
|
+
option.type === "checkbox" &&
|
|
135
|
+
<div className='flex items-center'>
|
|
136
|
+
<input
|
|
137
|
+
type='checkbox'
|
|
138
|
+
className='mr-2'
|
|
139
|
+
checked={dataFilterCheckbox.includes(submenu)}
|
|
140
|
+
onChange={() => handleClickSubmenuCheckbox(submenu)}
|
|
141
|
+
/>
|
|
142
|
+
<p className={`text-sm ${dataFilterCheckbox.includes(submenu) ? 'text-primary500' : 'text-black'}`}>
|
|
143
|
+
{submenu}
|
|
144
|
+
</p>
|
|
145
|
+
</div>
|
|
117
146
|
}
|
|
118
147
|
{
|
|
119
|
-
type === "radiobutton" &&
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
148
|
+
option.type === "radiobutton" &&
|
|
149
|
+
<div className='flex items-center'>
|
|
150
|
+
<input
|
|
151
|
+
type='radio'
|
|
152
|
+
className='mr-2'
|
|
153
|
+
checked={dataFilterStatus.includes(submenu)}
|
|
154
|
+
onChange={() => handleClickSubmenuRadioButton(submenu)}
|
|
155
|
+
/>
|
|
156
|
+
<p className={`text-sm ${dataFilterStatus.includes(submenu) ? 'text-primary500' : 'text-black'}`}>
|
|
157
|
+
{submenu}
|
|
158
|
+
</p>
|
|
159
|
+
</div>
|
|
126
160
|
}
|
|
127
|
-
<p className={`text-sm ${selectedOptionSubmenu.includes(submenu) ? 'text-primary500' : 'text-black'}`}>
|
|
128
|
-
{submenu}
|
|
129
|
-
</p>
|
|
130
161
|
</div>
|
|
131
162
|
))
|
|
132
163
|
}
|
package/src/index.js
CHANGED
|
@@ -36,7 +36,6 @@ import ExportToExcel from './components/export/excel';
|
|
|
36
36
|
import FilterCheckbox from './components/filter/filterCheckbox';
|
|
37
37
|
import FilterText from './components/filter/filterText';
|
|
38
38
|
import Menu from './components/menu';
|
|
39
|
-
import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
|
|
40
39
|
import ModalLoading from './components/modal/modalLoading';
|
|
41
40
|
import ModalResult from './components/modal/modalResult';
|
|
42
41
|
import ModalState from './components/modal/modalState';
|
package/src/templates/index.js
CHANGED
|
@@ -944,12 +944,14 @@ const Templates = () => {
|
|
|
944
944
|
options = {[
|
|
945
945
|
{
|
|
946
946
|
menu:"Type",
|
|
947
|
-
submenu:["Type 1", "Type 2"]
|
|
947
|
+
submenu:["Type 1", "Type 2"],
|
|
948
|
+
type:"checkbox"
|
|
948
949
|
},
|
|
949
950
|
{
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
951
|
+
menu:"Status",
|
|
952
|
+
submenu:["Status 1", "Status 2"],
|
|
953
|
+
type:"radiobutton"
|
|
954
|
+
},
|
|
953
955
|
]}
|
|
954
956
|
selectedOptionMenu={selectedMenuCheckbox}
|
|
955
957
|
setSelectedOptionMenu={setSelectedMenuCheckbox}
|
|
@@ -957,25 +959,6 @@ const Templates = () => {
|
|
|
957
959
|
setSelectedOptionSubmenu={setSelectedSubmenuCheckbox}
|
|
958
960
|
/>
|
|
959
961
|
|
|
960
|
-
<div className='m-9'></div>
|
|
961
|
-
<FilterDropdown
|
|
962
|
-
type='radiobutton'
|
|
963
|
-
options = {[
|
|
964
|
-
{
|
|
965
|
-
menu:"Type",
|
|
966
|
-
submenu:["Type 1", "Type 2"]
|
|
967
|
-
},
|
|
968
|
-
{
|
|
969
|
-
menu:"Company",
|
|
970
|
-
submenu:["Company 1", "Company 2"]
|
|
971
|
-
}
|
|
972
|
-
]}
|
|
973
|
-
selectedOptionMenu={selectedMenuRadioButton}
|
|
974
|
-
setSelectedOptionMenu={setSelectedMenuRadioButton}
|
|
975
|
-
selectedOptionSubmenu={selectedSubmenuRadioButton}
|
|
976
|
-
setSelectedOptionSubmenu={setSelectedSubmenuRadioButton}
|
|
977
|
-
/>
|
|
978
|
-
|
|
979
962
|
<div className='m-9'></div>
|
|
980
963
|
<p className='text-black font-bold text-2xl text-center py-2'>Menu</p>
|
|
981
964
|
<div>
|