sprint-asia-custom-component 0.1.31 → 0.1.33

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 +56 -59
  2. package/package.json +1 -1
  3. package/src/components/filter/filterDropdown/index.js +143 -145
  4. package/src/templates/index.js +31 -5
package/dist/index.js CHANGED
@@ -46654,6 +46654,7 @@
46654
46654
  const FilterDropdown = ({
46655
46655
  options = [{
46656
46656
  menu: "Type",
46657
+ parameter: "type",
46657
46658
  submenu: [{
46658
46659
  option: "Type 1",
46659
46660
  value: "type1"
@@ -46661,12 +46662,22 @@
46661
46662
  type: "checkbox"
46662
46663
  }, {
46663
46664
  menu: "Status",
46665
+ parameter: "status",
46664
46666
  submenu: [{
46665
46667
  option: "Status 1",
46666
46668
  value: "status1"
46667
46669
  }],
46668
46670
  type: "radiobutton"
46671
+ }, {
46672
+ menu: "Payment",
46673
+ parameter: "payment",
46674
+ submenu: [{
46675
+ option: "Payment 1",
46676
+ value: "payment1"
46677
+ }],
46678
+ type: "checkbox"
46669
46679
  }],
46680
+ dataFilterResult,
46670
46681
  setDataFilterResult = () => {}
46671
46682
  }) => {
46672
46683
  const [showFilterMenu, setShowFilterMenu] = React.useState(false);
@@ -46674,8 +46685,6 @@
46674
46685
  const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = React.useState();
46675
46686
  const [dataFilterCheckbox, setDataFilterCheckbox] = React.useState([]);
46676
46687
  const [dataFilterStatus, setDataFilterStatus] = React.useState([]);
46677
- const [dataValueFilterCheckbox, setDataValueFilterCheckbox] = React.useState([]);
46678
- const [dataValueFilterStatus, setDataValueFilterStatus] = React.useState([]);
46679
46688
  const dropdownRef = React.useRef(null);
46680
46689
  React.useEffect(() => {
46681
46690
  const handleOutsideClick = event => {
@@ -46691,41 +46700,42 @@
46691
46700
  document.removeEventListener('mousedown', handleOutsideClick);
46692
46701
  };
46693
46702
  }, [showFilterMenu]);
46694
- React.useEffect(() => {
46695
- setDataFilterResult({
46696
- role: dataValueFilterCheckbox,
46697
- status: dataValueFilterStatus
46698
- });
46699
- }, [dataValueFilterCheckbox, dataValueFilterStatus]);
46700
- const handleClickSubmenuCheckbox = submenu => {
46701
- const updatedOptionsName = dataFilterCheckbox.includes(submenu.option) ? dataFilterCheckbox.filter(selected => selected !== submenu.option) : [...dataFilterCheckbox, submenu.option];
46702
- setDataFilterCheckbox(updatedOptionsName);
46703
- const updatedOptionsValue = dataValueFilterCheckbox.includes(submenu.value) ? dataValueFilterCheckbox.filter(selected => selected !== submenu.value) : [...dataValueFilterCheckbox, submenu.value];
46704
- setDataValueFilterCheckbox(updatedOptionsValue);
46705
- };
46706
- const handleClickSubmenuRadioButton = submenu => {
46707
- if (submenu.option == dataFilterStatus[0] && submenu.value == dataValueFilterStatus[0]) {
46708
- setDataFilterStatus([]);
46709
- setDataValueFilterStatus([]);
46710
- } else {
46711
- setDataFilterStatus([submenu.option]);
46712
- setDataValueFilterStatus([submenu.value]);
46713
- }
46714
- };
46715
46703
  const handleResetFilter = () => {
46716
- setDataFilterCheckbox([]);
46717
- setDataFilterStatus([]);
46718
- setDataValueFilterCheckbox([]);
46719
- setDataValueFilterStatus([]);
46720
- setDataFilterResult({
46721
- role: [],
46722
- status: []
46723
- });
46704
+ const resetDataFilterResult = Object.fromEntries(Object.keys(dataFilterResult).map(key => [key, []]));
46705
+ setDataFilterResult(resetDataFilterResult);
46724
46706
  setShowFilterMenu(false);
46725
46707
  setShowFilterSubmenu(false);
46726
46708
  };
46727
- const buttonText = dataFilterCheckbox.length + dataFilterStatus.length > 0 ? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected` : 'Filter';
46728
- 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", {
46709
+ const handleOnClickOption = (submenu, type, parameter) => {
46710
+ if (type === "checkbox") {
46711
+ const isSubmenuExist = dataFilterResult[parameter]?.includes(submenu.value);
46712
+ const updatedData = [...(dataFilterResult[parameter] || [])];
46713
+ if (isSubmenuExist) {
46714
+ const index = updatedData.indexOf(submenu.value);
46715
+ updatedData.splice(index, 1);
46716
+ } else {
46717
+ updatedData.push(submenu.value);
46718
+ }
46719
+ setDataFilterResult(prevState => ({
46720
+ ...prevState,
46721
+ [parameter]: updatedData
46722
+ }));
46723
+ } else if (type === "radiobutton") {
46724
+ if (dataFilterResult[parameter]?.[0] === submenu.value) {
46725
+ setDataFilterResult(prevState => ({
46726
+ ...prevState,
46727
+ [parameter]: []
46728
+ }));
46729
+ } else {
46730
+ setDataFilterResult(prevState => ({
46731
+ ...prevState,
46732
+ [parameter]: [submenu.value]
46733
+ }));
46734
+ }
46735
+ }
46736
+ };
46737
+ const buttonText = Object.values(dataFilterResult).flat().length > 0 ? `${Object.values(dataFilterResult).flat().length} Filter Selected` : 'Filter';
46738
+ return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
46729
46739
  className: "rounded-md shadow-sm"
46730
46740
  }, /*#__PURE__*/React__default["default"].createElement("div", {
46731
46741
  className: "flex"
@@ -46735,7 +46745,7 @@
46735
46745
  }, /*#__PURE__*/React__default["default"].createElement("span", {
46736
46746
  className: "flex-grow py-2.5",
46737
46747
  onClick: () => setShowFilterMenu(!showFilterMenu)
46738
- }, buttonText), dataFilterCheckbox.length + dataFilterStatus.length > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
46748
+ }, buttonText), Object.values(dataFilterResult).flat().length ? /*#__PURE__*/React__default["default"].createElement("span", {
46739
46749
  className: "ml-2",
46740
46750
  onClick: handleResetFilter
46741
46751
  }, /*#__PURE__*/React__default["default"].createElement(PiX, {
@@ -46750,7 +46760,7 @@
46750
46760
  className: "relative"
46751
46761
  }, showFilterMenu && /*#__PURE__*/React__default["default"].createElement("div", {
46752
46762
  ref: dropdownRef,
46753
- className: "bg-white border border-neutral40 w-32 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
46763
+ className: "bg-white border border-neutral40 w-48 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
46754
46764
  }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
46755
46765
  key: index
46756
46766
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -46759,16 +46769,7 @@
46759
46769
  setShowFilterSubmenu(true);
46760
46770
  setDataSelectionOptionMenu(option.menu);
46761
46771
  }
46762
- }, /*#__PURE__*/React__default["default"].createElement("p", null, option.menu), option.type == "checkbox" ? dataFilterCheckbox.length == 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
46763
- size: 16,
46764
- className: "text-neutral300"
46765
- }) : /*#__PURE__*/React__default["default"].createElement("div", {
46766
- className: "w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500"
46767
- }, /*#__PURE__*/React__default["default"].createElement("p", {
46768
- style: {
46769
- fontSize: "8px"
46770
- }
46771
- }, dataFilterCheckbox.length)) : dataFilterStatus.length == 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
46772
+ }, /*#__PURE__*/React__default["default"].createElement("p", null, option.menu), (dataFilterResult[option.parameter]?.length || 0) === 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
46772
46773
  size: 16,
46773
46774
  className: "text-neutral300"
46774
46775
  }) : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -46777,37 +46778,33 @@
46777
46778
  style: {
46778
46779
  fontSize: "8px"
46779
46780
  }
46780
- }, dataFilterStatus.length))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
46781
- className: `ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-32 cursor-pointer ${option.type == "checkbox" ? "top-0" : "top-16"}`
46781
+ }, dataFilterResult[option.parameter]?.length || 0))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
46782
+ className: `ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer ${index == 0 && "top-0"} ${index == 1 && "top-16"} ${index == 2 && "top-24"} ${index == 3 && "top-36"}`
46782
46783
  }, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
46783
46784
  key: subIndex,
46784
46785
  className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
46785
46786
  onClick: () => {
46786
- if (option.type === "checkbox") {
46787
- handleClickSubmenuCheckbox(submenu);
46788
- } else if (option.type === "radiobutton") {
46789
- handleClickSubmenuRadioButton(submenu);
46790
- }
46787
+ handleOnClickOption(submenu, option.type, option.parameter);
46791
46788
  }
46792
46789
  }, option.type === "checkbox" && /*#__PURE__*/React__default["default"].createElement("div", {
46793
46790
  className: "flex items-center"
46794
46791
  }, /*#__PURE__*/React__default["default"].createElement("input", {
46795
46792
  type: "checkbox",
46796
46793
  className: "mr-2",
46797
- checked: dataFilterCheckbox.includes(submenu.option),
46798
- onChange: () => handleClickSubmenuCheckbox(submenu)
46794
+ checked: dataFilterResult[option.parameter]?.includes(submenu.value) || false,
46795
+ onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
46799
46796
  }), /*#__PURE__*/React__default["default"].createElement("p", {
46800
- className: `text-sm ${dataFilterCheckbox.includes(submenu) ? 'text-primary500' : 'text-black'}`
46797
+ className: `text-sm ${dataFilterResult[option.parameter]?.includes(submenu.value) ? 'text-primary500' : 'text-black'}`
46801
46798
  }, submenu.option)), option.type === "radiobutton" && /*#__PURE__*/React__default["default"].createElement("div", {
46802
46799
  className: "flex items-center"
46803
46800
  }, /*#__PURE__*/React__default["default"].createElement("input", {
46804
46801
  type: "radio",
46805
46802
  className: "mr-2",
46806
- checked: dataFilterStatus.includes(submenu.option),
46807
- onChange: () => handleClickSubmenuRadioButton(submenu)
46803
+ checked: dataFilterResult[option.parameter]?.[0] === submenu.value,
46804
+ onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
46808
46805
  }), /*#__PURE__*/React__default["default"].createElement("p", {
46809
- className: `text-sm ${dataFilterStatus.includes(submenu) ? 'text-primary500' : 'text-black'}`
46810
- }, submenu.option)))))))))));
46806
+ className: `text-sm ${dataFilterResult[option.parameter]?.[0] === submenu.value ? 'text-primary500' : 'text-black'}`
46807
+ }, submenu.option))))))))));
46811
46808
  };
46812
46809
 
46813
46810
  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.31",
4
+ "version": "0.1.33",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/filter/filterDropdown/index.js CHANGED
@@ -5,6 +5,7 @@ const FilterDropdown = ({
5
5
  options = [
6
6
  {
7
7
  menu:"Type",
8
+ parameter : "type",
8
9
  submenu:[{
9
10
  option:"Type 1",
10
11
  value : "type1"
@@ -13,22 +14,32 @@ const FilterDropdown = ({
13
14
  },
14
15
  {
15
16
  menu:"Status",
17
+ parameter : "status",
16
18
  submenu:[{
17
19
  option : "Status 1",
18
20
  value : "status1"
19
21
  }],
20
22
  type:"radiobutton"
21
23
  },
24
+ {
25
+ menu:"Payment",
26
+ parameter : "payment",
27
+ submenu:[{
28
+ option : "Payment 1",
29
+ value : "payment1"
30
+ }],
31
+ type:"checkbox"
32
+ },
22
33
  ],
34
+ dataFilterResult,
23
35
  setDataFilterResult = () => {},
24
36
  }) => {
25
37
  const [showFilterMenu, setShowFilterMenu] = useState(false);
26
38
  const [showFilterSubmenu, setShowFilterSubmenu] = useState(false);
39
+
27
40
  const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = useState();
28
41
  const [dataFilterCheckbox, setDataFilterCheckbox] = useState([]);
29
42
  const [dataFilterStatus, setDataFilterStatus] = useState([]);
30
- const [dataValueFilterCheckbox, setDataValueFilterCheckbox] = useState([]);
31
- const [dataValueFilterStatus, setDataValueFilterStatus] = useState([]);
32
43
  const dropdownRef = useRef(null);
33
44
 
34
45
  useEffect(() => {
@@ -48,163 +59,150 @@ const FilterDropdown = ({
48
59
  };
49
60
  }, [showFilterMenu]);
50
61
 
51
- useEffect(() => {
52
- setDataFilterResult({
53
- role:dataValueFilterCheckbox,
54
- status:dataValueFilterStatus
55
- })
56
- }, [dataValueFilterCheckbox, dataValueFilterStatus])
57
-
58
- const handleClickSubmenuCheckbox = (submenu) => {
59
- const updatedOptionsName = dataFilterCheckbox.includes(submenu.option)
60
- ? dataFilterCheckbox.filter((selected) => selected !== submenu.option)
61
- : [...dataFilterCheckbox, submenu.option];
62
-
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);
70
- }
71
-
72
- const handleClickSubmenuRadioButton = (submenu) => {
73
- if (submenu.option == dataFilterStatus[0] && submenu.value == dataValueFilterStatus[0]) {
74
- setDataFilterStatus([])
75
- setDataValueFilterStatus([])
76
- }
77
- else {
78
- setDataFilterStatus([submenu.option]);
79
- setDataValueFilterStatus([submenu.value]);
80
- }
81
- }
82
-
83
62
  const handleResetFilter = () => {
84
- setDataFilterCheckbox([])
85
- setDataFilterStatus([])
86
- setDataValueFilterCheckbox([])
87
- setDataValueFilterStatus([])
88
- setDataFilterResult({
89
- role:[],
90
- status:[]
91
- })
63
+ const resetDataFilterResult = Object.fromEntries(
64
+ Object.keys(dataFilterResult).map(key => [key, []])
65
+ );
66
+ setDataFilterResult(resetDataFilterResult);
92
67
  setShowFilterMenu(false)
93
68
  setShowFilterSubmenu(false)
94
69
  }
95
70
 
71
+ const handleOnClickOption = (submenu, type, parameter) => {
72
+ if (type === "checkbox") {
73
+ const isSubmenuExist = dataFilterResult[parameter]?.includes(submenu.value);
74
+ const updatedData = [...(dataFilterResult[parameter] || [])];
75
+
76
+ if (isSubmenuExist) {
77
+ const index = updatedData.indexOf(submenu.value);
78
+ updatedData.splice(index, 1);
79
+ } else {
80
+ updatedData.push(submenu.value);
81
+ }
82
+ setDataFilterResult(prevState => ({
83
+ ...prevState,
84
+ [parameter]: updatedData
85
+ }));
86
+ } else if (type === "radiobutton") {
87
+ if (dataFilterResult[parameter]?.[0] === submenu.value) {
88
+ setDataFilterResult(prevState => ({
89
+ ...prevState,
90
+ [parameter]: []
91
+ }));
92
+ } else {
93
+ setDataFilterResult(prevState => ({
94
+ ...prevState,
95
+ [parameter]: [submenu.value]
96
+ }));
97
+ }
98
+ }
99
+ };
100
+
96
101
  const buttonText =
97
- dataFilterCheckbox.length + dataFilterStatus.length > 0
98
- ? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected`
102
+ Object.values(dataFilterResult).flat().length > 0
103
+ ? `${Object.values(dataFilterResult).flat().length} Filter Selected`
99
104
  : 'Filter';
100
105
 
106
+
101
107
  return (
102
108
  <div>
103
109
  <div>
104
- <div>
105
- <span className='rounded-md shadow-sm'>
106
- <div className='flex'>
107
- <button
108
- type='button'
109
- className={`${dataFilterCheckbox.length + dataFilterStatus.length > 0 ? "border-black text-black" : "border-neutral50 text-neutral300"} flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none`}
110
- >
111
- <span className='flex-grow py-2.5' onClick={() => setShowFilterMenu(!showFilterMenu)}>{buttonText}</span>
112
- {
113
- dataFilterCheckbox.length + dataFilterStatus.length > 0 ?
114
- <span className='ml-2' onClick={handleResetFilter}>
115
- <PiX size={16} className='text-black' />
116
- </span>
117
- :
118
- <span className='ml-2'>
119
- <PiFunnel size={16} className='text-neutral300' />
120
- </span>
121
- }
122
- </button>
123
- </div>
124
- </span>
125
- </div>
126
- <div className="relative">
127
- {
128
- showFilterMenu &&
129
- <div
130
- ref={dropdownRef}
131
- className="bg-white border border-neutral40 w-32 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
132
- >
133
- {
134
- options.map((option, index) => (
135
- <div key={index}>
136
- <div
137
- className={`hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer justify-between`}
138
- onClick={() => {
139
- setShowFilterSubmenu(true);
140
- setDataSelectionOptionMenu(option.menu);
141
- }}
142
- >
143
- <p>{option.menu}</p>
110
+ <span className='rounded-md shadow-sm'>
111
+ <div className='flex'>
112
+ <button
113
+ type='button'
114
+ className={`${dataFilterCheckbox.length + dataFilterStatus.length > 0 ? "border-black text-black" : "border-neutral50 text-neutral300"} flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none`}
115
+ >
116
+ <span className='flex-grow py-2.5' onClick={() => setShowFilterMenu(!showFilterMenu)}>{buttonText}</span>
117
+ {
118
+ Object.values(dataFilterResult).flat().length ?
119
+ <span className='ml-2' onClick={handleResetFilter}>
120
+ <PiX size={16} className='text-black' />
121
+ </span>
122
+ :
123
+ <span className='ml-2'>
124
+ <PiFunnel size={16} className='text-neutral300' />
125
+ </span>
126
+ }
127
+ </button>
128
+ </div>
129
+ </span>
130
+ </div>
131
+ <div className="relative">
132
+ {
133
+ showFilterMenu &&
134
+ <div
135
+ ref={dropdownRef}
136
+ className="bg-white border border-neutral40 w-48 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
137
+ >
138
+ {
139
+ options.map((option, index) => (
140
+ <div key={index}>
141
+ <div
142
+ className={`hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer justify-between`}
143
+ onClick={() => {
144
+ setShowFilterSubmenu(true);
145
+ setDataSelectionOptionMenu(option.menu);
146
+ }}
147
+ >
148
+ <p>{option.menu}</p>
149
+ {
150
+ (dataFilterResult[option.parameter]?.length || 0) === 0 ?
151
+ <PiCaretRight size={16} className='text-neutral300' />
152
+ :
153
+ <div className='w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500'>
154
+ <p style={{ fontSize: "8px" }}>{(dataFilterResult[option.parameter]?.length || 0)}</p>
155
+ </div>
156
+ }
157
+ </div>
158
+ {
159
+ showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu &&
160
+ <div className={`ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer ${index == 0 && "top-0"} ${index == 1 && "top-16"} ${index == 2 && "top-24"} ${index == 3 && "top-36"}`}>
144
161
  {
145
- option.type == "checkbox" ?
146
- dataFilterCheckbox.length == 0 ?
147
- <PiCaretRight size={16} className='text-neutral300' />
148
- : <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>
149
- :
150
- dataFilterStatus.length == 0 ?
151
- <PiCaretRight size={16} className='text-neutral300' />
152
- : <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>
162
+ option.submenu.map((submenu, subIndex) => (
163
+ <div key={subIndex} className='flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5'
164
+ onClick={() => {
165
+ handleOnClickOption(submenu, option.type, option.parameter)
166
+ }}
167
+ >
168
+ {
169
+ option.type === "checkbox" &&
170
+ <div className='flex items-center'>
171
+ <input
172
+ type='checkbox'
173
+ className='mr-2'
174
+ checked={dataFilterResult[option.parameter]?.includes(submenu.value) || false}
175
+ onChange={() => handleOnClickOption(submenu, option.type, option.parameter)}
176
+ />
177
+ <p className={`text-sm ${dataFilterResult[option.parameter]?.includes(submenu.value) ? 'text-primary500' : 'text-black'}`}>
178
+ {submenu.option}
179
+ </p>
180
+ </div>
181
+ }
182
+ {
183
+ option.type === "radiobutton" &&
184
+ <div className='flex items-center'>
185
+ <input
186
+ type='radio'
187
+ className='mr-2'
188
+ checked={dataFilterResult[option.parameter]?.[0] === submenu.value}
189
+ onChange={() => handleOnClickOption(submenu, option.type, option.parameter)}
190
+ />
191
+ <p className={`text-sm ${dataFilterResult[option.parameter]?.[0] === submenu.value ? 'text-primary500' : 'text-black'}`}>
192
+ {submenu.option}
193
+ </p>
194
+ </div>
195
+ }
196
+ </div>
197
+ ))
153
198
  }
154
199
  </div>
155
- {
156
- showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu &&
157
- <div className={`ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-32 cursor-pointer ${option.type == "checkbox" ? "top-0" : "top-16"}`}>
158
- {
159
- option.submenu.map((submenu, subIndex) => (
160
- <div key={subIndex} className='flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5'
161
- onClick={() => {
162
- if (option.type === "checkbox") {
163
- handleClickSubmenuCheckbox(submenu);
164
- } else if (option.type === "radiobutton") {
165
- handleClickSubmenuRadioButton(submenu);
166
- }
167
- }}
168
- >
169
- {
170
- option.type === "checkbox" &&
171
- <div className='flex items-center'>
172
- <input
173
- type='checkbox'
174
- className='mr-2'
175
- checked={dataFilterCheckbox.includes(submenu.option)}
176
- onChange={() => handleClickSubmenuCheckbox(submenu)}
177
- />
178
- <p className={`text-sm ${dataFilterCheckbox.includes(submenu) ? 'text-primary500' : 'text-black'}`}>
179
- {submenu.option}
180
- </p>
181
- </div>
182
- }
183
- {
184
- option.type === "radiobutton" &&
185
- <div className='flex items-center'>
186
- <input
187
- type='radio'
188
- className='mr-2'
189
- checked={dataFilterStatus.includes(submenu.option)}
190
- onChange={() => handleClickSubmenuRadioButton(submenu)}
191
- />
192
- <p className={`text-sm ${dataFilterStatus.includes(submenu) ? 'text-primary500' : 'text-black'}`}>
193
- {submenu.option}
194
- </p>
195
- </div>
196
- }
197
- </div>
198
- ))
199
- }
200
- </div>
201
- }
202
- </div>
203
- ))
204
- }
205
- </div>
206
- }
207
- </div>
200
+ }
201
+ </div>
202
+ ))
203
+ }
204
+ </div>
205
+ }
208
206
  </div>
209
207
  </div>
210
208
  );
package/src/templates/index.js CHANGED
@@ -54,9 +54,6 @@ import FilterDropdown from '../components/filter/filterDropdown';
54
54
 
55
55
 
56
56
  const Templates = () => {
57
-
58
-
59
-
60
57
  const [startDate, setStartDate] = useState(null);
61
58
  const [endDate, setEndDate] = useState(null);
62
59
 
@@ -719,7 +716,16 @@ const Templates = () => {
719
716
  console.log("After setting price: ", price);
720
717
  };
721
718
 
722
- const [dataFilterResult, setDataFilterResult] = useState()
719
+ const [dataFilterResult, setDataFilterResult] = useState({
720
+ type:[],
721
+ status:[],
722
+ payment:[]
723
+ })
724
+ const [dataFilterResult2, setDataFilterResult2] = useState({
725
+ type:[],
726
+ status:[],
727
+ payment:[]
728
+ })
723
729
 
724
730
  const [searchFilter, setSearchFilter] = useState()
725
731
  const [filterDropdown, setFilterDropdown] = useState({
@@ -962,6 +968,7 @@ const Templates = () => {
962
968
  options = {[
963
969
  {
964
970
  menu:"Type",
971
+ parameter : "type",
965
972
  submenu:[
966
973
  {
967
974
  option:"Type 1",
@@ -971,11 +978,16 @@ const Templates = () => {
971
978
  option:"Type 2",
972
979
  value : "type2"
973
980
  },
981
+ {
982
+ option:"Type 3",
983
+ value : "type3"
984
+ },
974
985
  ],
975
986
  type:"checkbox"
976
987
  },
977
988
  {
978
989
  menu:"Status",
990
+ parameter : "status",
979
991
  submenu:[
980
992
  {
981
993
  option : "Status 1",
@@ -985,11 +997,25 @@ const Templates = () => {
985
997
  option : "Status 2",
986
998
  value : "status2"
987
999
  },
1000
+ {
1001
+ option : "Status 3",
1002
+ value : "status3"
1003
+ },
988
1004
  ],
989
1005
  type:"radiobutton"
990
1006
  },
1007
+ {
1008
+ menu:"Payment",
1009
+ parameter : "payment",
1010
+ submenu:[{
1011
+ option : "Payment 1",
1012
+ value : "payment1"
1013
+ }],
1014
+ type:"radiobutton"
1015
+ },
991
1016
  ]}
992
- setDataFilterResult={setDataFilterResult}
1017
+ dataFilterResult={dataFilterResult2}
1018
+ setDataFilterResult={setDataFilterResult2}
993
1019
  />
994
1020
 
995
1021
  <div className='m-9'></div>