sprint-asia-custom-component 0.1.16 → 0.1.17
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 +49272 -46682
- package/package.json +1 -1
- package/src/components/filter/filterDropdown/index.js +68 -37
- package/src/index.js +63 -64
- package/src/templates/index.js +6 -23
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
|
@@ -1,71 +1,70 @@
|
|
|
1
|
-
|
|
1
|
+
import './index.css';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
import { BrowserRouter as Router } from 'react-router-dom';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import ReactDOM from 'react-dom/client';
|
|
7
|
+
import App from './App';
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
10
|
+
root.render(
|
|
11
|
+
<React.StrictMode>
|
|
12
|
+
<Router> {/* Wrap your App component with Router */}
|
|
13
|
+
<App />
|
|
14
|
+
</Router>
|
|
15
|
+
</React.StrictMode>
|
|
16
|
+
);
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
import './index.css';
|
|
20
|
-
import Alert from './components/alert'
|
|
21
|
-
import DangerButton from './components/button/dangerbutton'
|
|
22
|
-
import OutlineButton from './components/button/outlinebutton'
|
|
23
|
-
import PrimaryButton from './components/button/primarybutton'
|
|
24
|
-
import CardInternalProduct from './components/card';
|
|
25
|
-
import Chip from './components/chip'
|
|
26
|
-
import CustomDatePicker from './components/datepicker';
|
|
27
|
-
import Description from './components/description';
|
|
28
|
-
import DropdownCard from './components/dropdown/dropdownCard';
|
|
29
|
-
import DropdownChip from './components/dropdown/dropdownChip';
|
|
30
|
-
import DropdownText from './components/dropdown/dropdownText';
|
|
31
|
-
import DropzoneUploadFile from './components/dropzone/uploadfile';
|
|
32
|
-
import DropzoneUploadPhoto from './components/dropzone/uploadphoto';
|
|
33
|
-
import EmptyData from './components/emptystate/table/emptydata';
|
|
34
|
-
import NotFound from './components/emptystate/table/notfound';
|
|
35
|
-
import ExportToExcel from './components/export/excel';
|
|
36
|
-
import FilterCheckbox from './components/filter/filterCheckbox';
|
|
37
|
-
import FilterText from './components/filter/filterText';
|
|
38
|
-
import Menu from './components/menu';
|
|
39
|
-
import
|
|
40
|
-
import
|
|
41
|
-
import
|
|
42
|
-
import
|
|
43
|
-
import
|
|
44
|
-
import
|
|
45
|
-
import
|
|
46
|
-
import
|
|
47
|
-
import
|
|
48
|
-
import
|
|
49
|
-
import
|
|
50
|
-
import
|
|
51
|
-
import
|
|
52
|
-
import
|
|
53
|
-
import
|
|
54
|
-
import
|
|
55
|
-
import
|
|
56
|
-
import
|
|
57
|
-
import
|
|
58
|
-
import
|
|
59
|
-
import
|
|
60
|
-
import
|
|
61
|
-
import
|
|
62
|
-
import
|
|
63
|
-
import
|
|
64
|
-
import
|
|
65
|
-
import
|
|
66
|
-
import FilterDropdown from './components/filter/filterDropdown';
|
|
19
|
+
// import './index.css';
|
|
20
|
+
// import Alert from './components/alert'
|
|
21
|
+
// import DangerButton from './components/button/dangerbutton'
|
|
22
|
+
// import OutlineButton from './components/button/outlinebutton'
|
|
23
|
+
// import PrimaryButton from './components/button/primarybutton'
|
|
24
|
+
// import CardInternalProduct from './components/card';
|
|
25
|
+
// import Chip from './components/chip'
|
|
26
|
+
// import CustomDatePicker from './components/datepicker';
|
|
27
|
+
// import Description from './components/description';
|
|
28
|
+
// import DropdownCard from './components/dropdown/dropdownCard';
|
|
29
|
+
// import DropdownChip from './components/dropdown/dropdownChip';
|
|
30
|
+
// import DropdownText from './components/dropdown/dropdownText';
|
|
31
|
+
// import DropzoneUploadFile from './components/dropzone/uploadfile';
|
|
32
|
+
// import DropzoneUploadPhoto from './components/dropzone/uploadphoto';
|
|
33
|
+
// import EmptyData from './components/emptystate/table/emptydata';
|
|
34
|
+
// import NotFound from './components/emptystate/table/notfound';
|
|
35
|
+
// import ExportToExcel from './components/export/excel';
|
|
36
|
+
// import FilterCheckbox from './components/filter/filterCheckbox';
|
|
37
|
+
// import FilterText from './components/filter/filterText';
|
|
38
|
+
// import Menu from './components/menu';
|
|
39
|
+
// import ModalLoading from './components/modal/modalLoading';
|
|
40
|
+
// import ModalResult from './components/modal/modalResult';
|
|
41
|
+
// import ModalState from './components/modal/modalState';
|
|
42
|
+
// import Notification from './components/notification';
|
|
43
|
+
// import SearchInput from './components/searchinput';
|
|
44
|
+
// import Stepper from './components/stepper';
|
|
45
|
+
// import Switch from './components/switch';
|
|
46
|
+
// import ChipBar from './components/tabLayout/chipBar';
|
|
47
|
+
// import TabBar from './components/tabLayout/tabBar';
|
|
48
|
+
// import BillerList from './components/table/listTable/biller';
|
|
49
|
+
// import BillerProductList from './components/table/listTable/product/billerproduct';
|
|
50
|
+
// import InternalProductList from './components/table/listTable/product/internalproduct';
|
|
51
|
+
// import ReportList from './components/table/listTable/report/businessadmin';
|
|
52
|
+
// import ReportListClient from './components/table/listTable/report/clientadmin';
|
|
53
|
+
// import Pagination from './components/table/pagination';
|
|
54
|
+
// import TextInput from './components/textinput';
|
|
55
|
+
// import HeaderTable from './components/table/headerTable';
|
|
56
|
+
// import BillingList from './components/table/listTable/billing';
|
|
57
|
+
// import ModalBilling from './components/modal/modalBilling';
|
|
58
|
+
// import LimitList from './components/table/listTable/limit';
|
|
59
|
+
// import ModalLimit from './components/modal/modalLimit';
|
|
60
|
+
// import VerticalStepBar from './components/verticalstepbar';
|
|
61
|
+
// import DepositList from './components/table/listTable/deposit';
|
|
62
|
+
// import ModalDeposit from './components/modal/modalDeposit';
|
|
63
|
+
// import CellModelOne from './components/table/listTable/cellmodelone';
|
|
64
|
+
// import SearchDropdown from './components/searchdropdown';
|
|
65
|
+
// import FilterDropdown from './components/filter/filterDropdown';
|
|
67
66
|
|
|
68
67
|
|
|
69
|
-
export {CellModelOne, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
70
|
-
SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
|
|
71
|
-
DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
|
|
68
|
+
// export {CellModelOne, SearchDropdown, FilterDropdown, HeaderTable, TextInput, Pagination, ReportList, ReportListClient, InternalProductList, BillerProductList, BillerList, TabBar, ChipBar, Switch, Stepper,
|
|
69
|
+
// SearchInput, Notification, ModalState, ModalResult, ModalLoading, Menu, FilterText, FilterCheckbox, ExportToExcel, NotFound, EmptyData, DropzoneUploadPhoto, DropzoneUploadFile, DropdownText, DropdownChip, DropdownCard, Description, CustomDatePicker, Chip, CardInternalProduct, PrimaryButton, OutlineButton,
|
|
70
|
+
// DangerButton, Alert, BillingList, ModalBilling, LimitList, ModalLimit, VerticalStepBar, DepositList, ModalDeposit}
|
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>
|