sprint-asia-custom-component 0.1.28 → 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.
Files changed (4) hide show
  1. package/dist/index.js +27 -13
  2. package/package.json +1 -1
  3. package/src/components/filter/filterDropdown/index.js +33 -15
  4. package/src/templates/index.js +25 -11
package/dist/index.js CHANGED
@@ -46654,11 +46654,17 @@
46654
46654
  const FilterDropdown = ({
46655
46655
  options = [{
46656
46656
  menu: "Type",
46657
- submenu: ["Type 1", "Type 2"],
46657
+ submenu: [{
46658
+ name: "Type 1",
46659
+ value: "type1"
46660
+ }],
46658
46661
  type: "checkbox"
46659
46662
  }, {
46660
46663
  menu: "Status",
46661
- submenu: ["Status 1", "Status 2"],
46664
+ submenu: [{
46665
+ name: "Status 1",
46666
+ value: "status1"
46667
+ }],
46662
46668
  type: "radiobutton"
46663
46669
  }],
46664
46670
  setDataFilterResult = () => {}
@@ -46668,6 +46674,8 @@
46668
46674
  const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = React.useState();
46669
46675
  const [dataFilterCheckbox, setDataFilterCheckbox] = React.useState([]);
46670
46676
  const [dataFilterStatus, setDataFilterStatus] = React.useState([]);
46677
+ const [dataValueFilterCheckbox, setDataValueFilterCheckbox] = React.useState([]);
46678
+ const [dataValueFilterStatus, setDataValueFilterStatus] = React.useState([]);
46671
46679
  const dropdownRef = React.useRef(null);
46672
46680
  React.useEffect(() => {
46673
46681
  const handleOutsideClick = event => {
@@ -46685,24 +46693,30 @@
46685
46693
  }, [showFilterMenu]);
46686
46694
  React.useEffect(() => {
46687
46695
  setDataFilterResult({
46688
- role: dataFilterCheckbox,
46689
- status: dataFilterStatus
46696
+ role: dataValueFilterCheckbox,
46697
+ status: dataValueFilterStatus
46690
46698
  });
46691
- }, [dataFilterCheckbox, dataFilterStatus]);
46699
+ }, [dataValueFilterCheckbox, dataValueFilterStatus]);
46692
46700
  const handleClickSubmenuCheckbox = submenu => {
46693
- const updatedOptions = dataFilterCheckbox.includes(submenu) ? dataFilterCheckbox.filter(selected => selected !== submenu) : [...dataFilterCheckbox, submenu];
46694
- setDataFilterCheckbox(updatedOptions);
46701
+ const updatedOptionsName = dataFilterCheckbox.includes(submenu.name) ? dataFilterCheckbox.filter(selected => selected !== submenu.name) : [...dataFilterCheckbox, submenu.name];
46702
+ setDataFilterCheckbox(updatedOptionsName);
46703
+ const updatedOptionsValue = dataValueFilterCheckbox.includes(submenu.value) ? dataValueFilterCheckbox.filter(selected => selected !== submenu.value) : [...dataValueFilterCheckbox, submenu.value];
46704
+ setDataValueFilterCheckbox(updatedOptionsValue);
46695
46705
  };
46696
46706
  const handleClickSubmenuRadioButton = submenu => {
46697
- if (submenu == dataFilterStatus[0]) {
46707
+ if (submenu.name == dataFilterStatus[0] && submenu.value == dataValueFilterStatus[0]) {
46698
46708
  setDataFilterStatus([]);
46709
+ setDataValueFilterStatus([]);
46699
46710
  } else {
46700
- setDataFilterStatus([submenu]);
46711
+ setDataFilterStatus([submenu.name]);
46712
+ setDataValueFilterStatus([submenu.value]);
46701
46713
  }
46702
46714
  };
46703
46715
  const handleResetFilter = () => {
46704
46716
  setDataFilterCheckbox([]);
46705
46717
  setDataFilterStatus([]);
46718
+ setDataValueFilterCheckbox([]);
46719
+ setDataValueFilterStatus([]);
46706
46720
  setDataFilterResult({
46707
46721
  role: [],
46708
46722
  status: []
@@ -46780,20 +46794,20 @@
46780
46794
  }, /*#__PURE__*/React__default["default"].createElement("input", {
46781
46795
  type: "checkbox",
46782
46796
  className: "mr-2",
46783
- checked: dataFilterCheckbox.includes(submenu),
46797
+ checked: dataFilterCheckbox.includes(submenu.name),
46784
46798
  onChange: () => handleClickSubmenuCheckbox(submenu)
46785
46799
  }), /*#__PURE__*/React__default["default"].createElement("p", {
46786
46800
  className: `text-sm ${dataFilterCheckbox.includes(submenu) ? 'text-primary500' : 'text-black'}`
46787
- }, submenu)), option.type === "radiobutton" && /*#__PURE__*/React__default["default"].createElement("div", {
46801
+ }, submenu.name)), option.type === "radiobutton" && /*#__PURE__*/React__default["default"].createElement("div", {
46788
46802
  className: "flex items-center"
46789
46803
  }, /*#__PURE__*/React__default["default"].createElement("input", {
46790
46804
  type: "radio",
46791
46805
  className: "mr-2",
46792
- checked: dataFilterStatus.includes(submenu),
46806
+ checked: dataFilterStatus.includes(submenu.name),
46793
46807
  onChange: () => handleClickSubmenuRadioButton(submenu)
46794
46808
  }), /*#__PURE__*/React__default["default"].createElement("p", {
46795
46809
  className: `text-sm ${dataFilterStatus.includes(submenu) ? 'text-primary500' : 'text-black'}`
46796
- }, submenu)))))))))));
46810
+ }, submenu.name)))))))))));
46797
46811
  };
46798
46812
 
46799
46813
  const Footer = ({
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sprint-asia-custom-component",
3
3
  "main": "dist/index.js",
4
- "version": "0.1.28",
4
+ "version": "0.1.29",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/filter/filterDropdown/index.js CHANGED
@@ -5,12 +5,18 @@ const FilterDropdown = ({
5
5
  options = [
6
6
  {
7
7
  menu:"Type",
8
- submenu:["Type 1", "Type 2"],
8
+ submenu:[{
9
+ name:"Type 1",
10
+ value : "type1"
11
+ }],
9
12
  type:"checkbox"
10
13
  },
11
14
  {
12
15
  menu:"Status",
13
- submenu:["Status 1", "Status 2"],
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:dataFilterCheckbox,
46
- status:dataFilterStatus
53
+ role:dataValueFilterCheckbox,
54
+ status:dataValueFilterStatus
47
55
  })
48
- }, [dataFilterCheckbox, dataFilterStatus])
56
+ }, [dataValueFilterCheckbox, dataValueFilterStatus])
49
57
 
50
58
  const handleClickSubmenuCheckbox = (submenu) => {
51
- const updatedOptions = dataFilterCheckbox.includes(submenu)
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(updatedOptions);
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/templates/index.js CHANGED
@@ -719,10 +719,7 @@ const Templates = () => {
719
719
  console.log("After setting price: ", price);
720
720
  };
721
721
 
722
- const [selectedMenuCheckbox, setSelectedMenuCheckbox] = useState(null)
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:["Type 1", "Type 2"],
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:["Status 1", "Status 2"],
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
- selectedOptionMenu={selectedMenuCheckbox}
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>