sprint-asia-custom-component 0.1.32 → 0.1.34

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
@@ -46658,6 +46658,7 @@
46658
46658
  const FilterDropdown = ({
46659
46659
  options = [{
46660
46660
  menu: "Type",
46661
+ parameter: "type",
46661
46662
  submenu: [{
46662
46663
  option: "Type 1",
46663
46664
  value: "type1"
@@ -46665,12 +46666,22 @@
46665
46666
  type: "checkbox"
46666
46667
  }, {
46667
46668
  menu: "Status",
46669
+ parameter: "status",
46668
46670
  submenu: [{
46669
46671
  option: "Status 1",
46670
46672
  value: "status1"
46671
46673
  }],
46672
46674
  type: "radiobutton"
46675
+ }, {
46676
+ menu: "Payment",
46677
+ parameter: "payment",
46678
+ submenu: [{
46679
+ option: "Payment 1",
46680
+ value: "payment1"
46681
+ }],
46682
+ type: "checkbox"
46673
46683
  }],
46684
+ dataFilterResult,
46674
46685
  setDataFilterResult = () => {}
46675
46686
  }) => {
46676
46687
  const [showFilterMenu, setShowFilterMenu] = React.useState(false);
@@ -46678,8 +46689,6 @@
46678
46689
  const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = React.useState();
46679
46690
  const [dataFilterCheckbox, setDataFilterCheckbox] = React.useState([]);
46680
46691
  const [dataFilterStatus, setDataFilterStatus] = React.useState([]);
46681
- const [dataValueFilterCheckbox, setDataValueFilterCheckbox] = React.useState([]);
46682
- const [dataValueFilterStatus, setDataValueFilterStatus] = React.useState([]);
46683
46692
  const dropdownRef = React.useRef(null);
46684
46693
  React.useEffect(() => {
46685
46694
  const handleOutsideClick = event => {
@@ -46695,41 +46704,42 @@
46695
46704
  document.removeEventListener('mousedown', handleOutsideClick);
46696
46705
  };
46697
46706
  }, [showFilterMenu]);
46698
- React.useEffect(() => {
46699
- setDataFilterResult({
46700
- role: dataValueFilterCheckbox,
46701
- status: dataValueFilterStatus
46702
- });
46703
- }, [dataValueFilterCheckbox, dataValueFilterStatus]);
46704
- const handleClickSubmenuCheckbox = submenu => {
46705
- const updatedOptionsName = dataFilterCheckbox.includes(submenu.option) ? dataFilterCheckbox.filter(selected => selected !== submenu.option) : [...dataFilterCheckbox, submenu.option];
46706
- setDataFilterCheckbox(updatedOptionsName);
46707
- const updatedOptionsValue = dataValueFilterCheckbox.includes(submenu.value) ? dataValueFilterCheckbox.filter(selected => selected !== submenu.value) : [...dataValueFilterCheckbox, submenu.value];
46708
- setDataValueFilterCheckbox(updatedOptionsValue);
46709
- };
46710
- const handleClickSubmenuRadioButton = submenu => {
46711
- if (submenu.option == dataFilterStatus[0] && submenu.value == dataValueFilterStatus[0]) {
46712
- setDataFilterStatus([]);
46713
- setDataValueFilterStatus([]);
46714
- } else {
46715
- setDataFilterStatus([submenu.option]);
46716
- setDataValueFilterStatus([submenu.value]);
46717
- }
46718
- };
46719
46707
  const handleResetFilter = () => {
46720
- setDataFilterCheckbox([]);
46721
- setDataFilterStatus([]);
46722
- setDataValueFilterCheckbox([]);
46723
- setDataValueFilterStatus([]);
46724
- setDataFilterResult({
46725
- role: [],
46726
- status: []
46727
- });
46708
+ const resetDataFilterResult = Object.fromEntries(Object.keys(dataFilterResult).map(key => [key, []]));
46709
+ setDataFilterResult(resetDataFilterResult);
46728
46710
  setShowFilterMenu(false);
46729
46711
  setShowFilterSubmenu(false);
46730
46712
  };
46731
- const buttonText = dataFilterCheckbox.length + dataFilterStatus.length > 0 ? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected` : 'Filter';
46732
- 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", {
46713
+ const handleOnClickOption = (submenu, type, parameter) => {
46714
+ if (type === "checkbox") {
46715
+ const isSubmenuExist = dataFilterResult[parameter]?.includes(submenu.value);
46716
+ const updatedData = [...(dataFilterResult[parameter] || [])];
46717
+ if (isSubmenuExist) {
46718
+ const index = updatedData.indexOf(submenu.value);
46719
+ updatedData.splice(index, 1);
46720
+ } else {
46721
+ updatedData.push(submenu.value);
46722
+ }
46723
+ setDataFilterResult(prevState => ({
46724
+ ...prevState,
46725
+ [parameter]: updatedData
46726
+ }));
46727
+ } else if (type === "radiobutton") {
46728
+ if (dataFilterResult[parameter]?.[0] === submenu.value) {
46729
+ setDataFilterResult(prevState => ({
46730
+ ...prevState,
46731
+ [parameter]: []
46732
+ }));
46733
+ } else {
46734
+ setDataFilterResult(prevState => ({
46735
+ ...prevState,
46736
+ [parameter]: [submenu.value]
46737
+ }));
46738
+ }
46739
+ }
46740
+ };
46741
+ const buttonText = Object.values(dataFilterResult).flat().length > 0 ? `${Object.values(dataFilterResult).flat().length} Filter Selected` : 'Filter';
46742
+ return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
46733
46743
  className: "rounded-md shadow-sm"
46734
46744
  }, /*#__PURE__*/React__default["default"].createElement("div", {
46735
46745
  className: "flex"
@@ -46739,7 +46749,7 @@
46739
46749
  }, /*#__PURE__*/React__default["default"].createElement("span", {
46740
46750
  className: "flex-grow py-2.5",
46741
46751
  onClick: () => setShowFilterMenu(!showFilterMenu)
46742
- }, buttonText), dataFilterCheckbox.length + dataFilterStatus.length > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
46752
+ }, buttonText), Object.values(dataFilterResult).flat().length ? /*#__PURE__*/React__default["default"].createElement("span", {
46743
46753
  className: "ml-2",
46744
46754
  onClick: handleResetFilter
46745
46755
  }, /*#__PURE__*/React__default["default"].createElement(PiX, {
@@ -46754,7 +46764,7 @@
46754
46764
  className: "relative"
46755
46765
  }, showFilterMenu && /*#__PURE__*/React__default["default"].createElement("div", {
46756
46766
  ref: dropdownRef,
46757
- className: "bg-white border border-neutral40 w-32 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
46767
+ className: "bg-white border border-neutral40 w-48 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
46758
46768
  }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
46759
46769
  key: index
46760
46770
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -46763,16 +46773,7 @@
46763
46773
  setShowFilterSubmenu(true);
46764
46774
  setDataSelectionOptionMenu(option.menu);
46765
46775
  }
46766
- }, /*#__PURE__*/React__default["default"].createElement("p", null, option.menu), option.type == "checkbox" ? dataFilterCheckbox.length == 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
46767
- size: 16,
46768
- className: "text-neutral300"
46769
- }) : /*#__PURE__*/React__default["default"].createElement("div", {
46770
- className: "w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500"
46771
- }, /*#__PURE__*/React__default["default"].createElement("p", {
46772
- style: {
46773
- fontSize: "8px"
46774
- }
46775
- }, dataFilterCheckbox.length)) : dataFilterStatus.length == 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
46776
+ }, /*#__PURE__*/React__default["default"].createElement("p", null, option.menu), (dataFilterResult[option.parameter]?.length || 0) === 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
46776
46777
  size: 16,
46777
46778
  className: "text-neutral300"
46778
46779
  }) : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -46781,37 +46782,33 @@
46781
46782
  style: {
46782
46783
  fontSize: "8px"
46783
46784
  }
46784
- }, dataFilterStatus.length))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
46785
- 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"}`
46785
+ }, dataFilterResult[option.parameter]?.length || 0))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
46786
+ 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"}`
46786
46787
  }, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
46787
46788
  key: subIndex,
46788
46789
  className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
46789
46790
  onClick: () => {
46790
- if (option.type === "checkbox") {
46791
- handleClickSubmenuCheckbox(submenu);
46792
- } else if (option.type === "radiobutton") {
46793
- handleClickSubmenuRadioButton(submenu);
46794
- }
46791
+ handleOnClickOption(submenu, option.type, option.parameter);
46795
46792
  }
46796
46793
  }, option.type === "checkbox" && /*#__PURE__*/React__default["default"].createElement("div", {
46797
46794
  className: "flex items-center"
46798
46795
  }, /*#__PURE__*/React__default["default"].createElement("input", {
46799
46796
  type: "checkbox",
46800
46797
  className: "mr-2",
46801
- checked: dataFilterCheckbox.includes(submenu.option),
46802
- onChange: () => handleClickSubmenuCheckbox(submenu)
46798
+ checked: dataFilterResult[option.parameter]?.includes(submenu.value) || false,
46799
+ onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
46803
46800
  }), /*#__PURE__*/React__default["default"].createElement("p", {
46804
- className: `text-sm ${dataFilterCheckbox.includes(submenu) ? 'text-primary500' : 'text-black'}`
46801
+ className: `text-sm ${dataFilterResult[option.parameter]?.includes(submenu.value) ? 'text-primary500' : 'text-black'}`
46805
46802
  }, submenu.option)), option.type === "radiobutton" && /*#__PURE__*/React__default["default"].createElement("div", {
46806
46803
  className: "flex items-center"
46807
46804
  }, /*#__PURE__*/React__default["default"].createElement("input", {
46808
46805
  type: "radio",
46809
46806
  className: "mr-2",
46810
- checked: dataFilterStatus.includes(submenu.option),
46811
- onChange: () => handleClickSubmenuRadioButton(submenu)
46807
+ checked: dataFilterResult[option.parameter]?.[0] === submenu.value,
46808
+ onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
46812
46809
  }), /*#__PURE__*/React__default["default"].createElement("p", {
46813
- className: `text-sm ${dataFilterStatus.includes(submenu) ? 'text-primary500' : 'text-black'}`
46814
- }, submenu.option)))))))))));
46810
+ className: `text-sm ${dataFilterResult[option.parameter]?.[0] === submenu.value ? 'text-primary500' : 'text-black'}`
46811
+ }, submenu.option))))))))));
46815
46812
  };
46816
46813
 
46817
46814
  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.32",
4
+ "version": "0.1.34",
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>