sprint-asia-custom-component 0.1.27 → 0.1.29
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 +46821 -49379
- package/package.json +1 -1
- package/src/components/filter/filterDropdown/index.js +33 -15
- package/src/index.js +64 -64
- package/src/templates/index.js +25 -11
package/package.json
CHANGED
|
@@ -5,12 +5,18 @@ const FilterDropdown = ({
|
|
|
5
5
|
options = [
|
|
6
6
|
{
|
|
7
7
|
menu:"Type",
|
|
8
|
-
submenu:[
|
|
8
|
+
submenu:[{
|
|
9
|
+
name:"Type 1",
|
|
10
|
+
value : "type1"
|
|
11
|
+
}],
|
|
9
12
|
type:"checkbox"
|
|
10
13
|
},
|
|
11
14
|
{
|
|
12
15
|
menu:"Status",
|
|
13
|
-
submenu:[
|
|
16
|
+
submenu:[{
|
|
17
|
+
name : "Status 1",
|
|
18
|
+
value : "status1"
|
|
19
|
+
}],
|
|
14
20
|
type:"radiobutton"
|
|
15
21
|
},
|
|
16
22
|
],
|
|
@@ -21,6 +27,8 @@ const FilterDropdown = ({
|
|
|
21
27
|
const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = useState();
|
|
22
28
|
const [dataFilterCheckbox, setDataFilterCheckbox] = useState([]);
|
|
23
29
|
const [dataFilterStatus, setDataFilterStatus] = useState([]);
|
|
30
|
+
const [dataValueFilterCheckbox, setDataValueFilterCheckbox] = useState([]);
|
|
31
|
+
const [dataValueFilterStatus, setDataValueFilterStatus] = useState([]);
|
|
24
32
|
const dropdownRef = useRef(null);
|
|
25
33
|
|
|
26
34
|
useEffect(() => {
|
|
@@ -42,31 +50,41 @@ const FilterDropdown = ({
|
|
|
42
50
|
|
|
43
51
|
useEffect(() => {
|
|
44
52
|
setDataFilterResult({
|
|
45
|
-
role:
|
|
46
|
-
status:
|
|
53
|
+
role:dataValueFilterCheckbox,
|
|
54
|
+
status:dataValueFilterStatus
|
|
47
55
|
})
|
|
48
|
-
}, [
|
|
56
|
+
}, [dataValueFilterCheckbox, dataValueFilterStatus])
|
|
49
57
|
|
|
50
58
|
const handleClickSubmenuCheckbox = (submenu) => {
|
|
51
|
-
const
|
|
52
|
-
? dataFilterCheckbox.filter((selected) => selected !== submenu)
|
|
53
|
-
: [...dataFilterCheckbox, submenu];
|
|
59
|
+
const updatedOptionsName = dataFilterCheckbox.includes(submenu.name)
|
|
60
|
+
? dataFilterCheckbox.filter((selected) => selected !== submenu.name)
|
|
61
|
+
: [...dataFilterCheckbox, submenu.name];
|
|
54
62
|
|
|
55
|
-
setDataFilterCheckbox(
|
|
63
|
+
setDataFilterCheckbox(updatedOptionsName);
|
|
64
|
+
|
|
65
|
+
const updatedOptionsValue = dataValueFilterCheckbox.includes(submenu.value)
|
|
66
|
+
? dataValueFilterCheckbox.filter((selected) => selected !== submenu.value)
|
|
67
|
+
: [...dataValueFilterCheckbox, submenu.value];
|
|
68
|
+
|
|
69
|
+
setDataValueFilterCheckbox(updatedOptionsValue);
|
|
56
70
|
}
|
|
57
71
|
|
|
58
72
|
const handleClickSubmenuRadioButton = (submenu) => {
|
|
59
|
-
if (submenu == dataFilterStatus[0]) {
|
|
73
|
+
if (submenu.name == dataFilterStatus[0] && submenu.value == dataValueFilterStatus[0]) {
|
|
60
74
|
setDataFilterStatus([])
|
|
75
|
+
setDataValueFilterStatus([])
|
|
61
76
|
}
|
|
62
77
|
else {
|
|
63
|
-
setDataFilterStatus([submenu]);
|
|
78
|
+
setDataFilterStatus([submenu.name]);
|
|
79
|
+
setDataValueFilterStatus([submenu.value]);
|
|
64
80
|
}
|
|
65
81
|
}
|
|
66
82
|
|
|
67
83
|
const handleResetFilter = () => {
|
|
68
84
|
setDataFilterCheckbox([])
|
|
69
85
|
setDataFilterStatus([])
|
|
86
|
+
setDataValueFilterCheckbox([])
|
|
87
|
+
setDataValueFilterStatus([])
|
|
70
88
|
setDataFilterResult({
|
|
71
89
|
role:[],
|
|
72
90
|
status:[]
|
|
@@ -154,11 +172,11 @@ const FilterDropdown = ({
|
|
|
154
172
|
<input
|
|
155
173
|
type='checkbox'
|
|
156
174
|
className='mr-2'
|
|
157
|
-
checked={dataFilterCheckbox.includes(submenu)}
|
|
175
|
+
checked={dataFilterCheckbox.includes(submenu.name)}
|
|
158
176
|
onChange={() => handleClickSubmenuCheckbox(submenu)}
|
|
159
177
|
/>
|
|
160
178
|
<p className={`text-sm ${dataFilterCheckbox.includes(submenu) ? 'text-primary500' : 'text-black'}`}>
|
|
161
|
-
{submenu}
|
|
179
|
+
{submenu.name}
|
|
162
180
|
</p>
|
|
163
181
|
</div>
|
|
164
182
|
}
|
|
@@ -168,11 +186,11 @@ const FilterDropdown = ({
|
|
|
168
186
|
<input
|
|
169
187
|
type='radio'
|
|
170
188
|
className='mr-2'
|
|
171
|
-
checked={dataFilterStatus.includes(submenu)}
|
|
189
|
+
checked={dataFilterStatus.includes(submenu.name)}
|
|
172
190
|
onChange={() => handleClickSubmenuRadioButton(submenu)}
|
|
173
191
|
/>
|
|
174
192
|
<p className={`text-sm ${dataFilterStatus.includes(submenu) ? 'text-primary500' : 'text-black'}`}>
|
|
175
|
-
{submenu}
|
|
193
|
+
{submenu.name}
|
|
176
194
|
</p>
|
|
177
195
|
</div>
|
|
178
196
|
}
|
package/src/index.js
CHANGED
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
import './index.css';
|
|
1
|
+
// import './index.css';
|
|
2
2
|
|
|
3
|
-
import { BrowserRouter as Router } from 'react-router-dom';
|
|
3
|
+
// import { BrowserRouter as Router } from 'react-router-dom';
|
|
4
4
|
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import ReactDOM from 'react-dom/client';
|
|
7
|
-
import App from './App';
|
|
5
|
+
// import React from 'react';
|
|
6
|
+
// import ReactDOM from 'react-dom/client';
|
|
7
|
+
// import App from './App';
|
|
8
8
|
|
|
9
|
-
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
10
|
-
root.render(
|
|
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
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
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';
|
|
66
|
+
import Footer from './components/footer';
|
|
67
67
|
|
|
68
68
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
export {Footer, 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}
|
package/src/templates/index.js
CHANGED
|
@@ -719,10 +719,7 @@ const Templates = () => {
|
|
|
719
719
|
console.log("After setting price: ", price);
|
|
720
720
|
};
|
|
721
721
|
|
|
722
|
-
const [
|
|
723
|
-
const [selectedSubmenuCheckbox, setSelectedSubmenuCheckbox] = useState([])
|
|
724
|
-
const [selectedMenuRadioButton, setSelectedMenuRadioButton] = useState(null)
|
|
725
|
-
const [selectedSubmenuRadioButton, setSelectedSubmenuRadioButton] = useState([])
|
|
722
|
+
const [dataFilterResult, setDataFilterResult] = useState()
|
|
726
723
|
|
|
727
724
|
const [searchFilter, setSearchFilter] = useState()
|
|
728
725
|
const [filterDropdown, setFilterDropdown] = useState({
|
|
@@ -962,24 +959,41 @@ const Templates = () => {
|
|
|
962
959
|
|
|
963
960
|
<div className='m-9'></div>
|
|
964
961
|
<FilterDropdown
|
|
965
|
-
type='checkbox'
|
|
966
962
|
options = {[
|
|
967
963
|
{
|
|
968
964
|
menu:"Type",
|
|
969
|
-
submenu:[
|
|
965
|
+
submenu:[
|
|
966
|
+
{
|
|
967
|
+
name:"Type 1",
|
|
968
|
+
value : "type1"
|
|
969
|
+
},
|
|
970
|
+
{
|
|
971
|
+
name:"Type 2",
|
|
972
|
+
value : "type2"
|
|
973
|
+
},
|
|
974
|
+
],
|
|
970
975
|
type:"checkbox"
|
|
971
976
|
},
|
|
972
977
|
{
|
|
973
978
|
menu:"Status",
|
|
974
|
-
submenu:[
|
|
979
|
+
submenu:[
|
|
980
|
+
{
|
|
981
|
+
name : "Status 1",
|
|
982
|
+
value : "status1"
|
|
983
|
+
},
|
|
984
|
+
{
|
|
985
|
+
name : "Status 2",
|
|
986
|
+
value : "status2"
|
|
987
|
+
},
|
|
988
|
+
],
|
|
975
989
|
type:"radiobutton"
|
|
976
990
|
},
|
|
977
991
|
]}
|
|
978
|
-
|
|
979
|
-
setSelectedOptionMenu={setSelectedMenuCheckbox}
|
|
980
|
-
selectedOptionSubmenu={selectedSubmenuCheckbox}
|
|
981
|
-
setSelectedOptionSubmenu={setSelectedSubmenuCheckbox}
|
|
992
|
+
setDataFilterResult={setDataFilterResult}
|
|
982
993
|
/>
|
|
994
|
+
{
|
|
995
|
+
console.log("woeee ini", dataFilterResult)
|
|
996
|
+
}
|
|
983
997
|
|
|
984
998
|
<div className='m-9'></div>
|
|
985
999
|
<p className='text-black font-bold text-2xl text-center py-2'>Menu</p>
|