sprint-asia-custom-component 0.1.32 → 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 (5) hide show
  1. package/dist/index.js +61 -68
  2. package/package.json +1 -1
  3. package/src/components/dropdown/dropdownText/index.js +5 -3
  4. package/src/components/filter/filterDropdown/index.js +143 -145
  5. package/src/templates/index.js +31 -5
package/dist/index.js CHANGED
@@ -24004,10 +24004,7 @@
24004
24004
  title = "Title Dropdown",
24005
24005
  placeholder = "Placeholder",
24006
24006
  isRequired = true,
24007
- currentOption = {
24008
- option: "Name 1",
24009
- value: "Value 1"
24010
- }
24007
+ currentOption
24011
24008
  }) => {
24012
24009
  const [isOpen, setIsOpen] = React.useState(false);
24013
24010
  const [selectedOption, setSelectedOption] = React.useState(null);
@@ -24029,13 +24026,12 @@
24029
24026
  setIsOpen(!isOpen);
24030
24027
  };
24031
24028
  const handleOptionClick = (option, value) => {
24029
+ console.log("ini option", option);
24030
+ console.log("ini value", value);
24032
24031
  setSelectedOption(option);
24033
24032
  setIsOpen(false);
24034
24033
  if (onSelect) {
24035
- onSelect({
24036
- option: option,
24037
- value: value
24038
- });
24034
+ onSelect(value);
24039
24035
  }
24040
24036
  };
24041
24037
  return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -24055,7 +24051,7 @@
24055
24051
  onClick: handleToggleDropdownText
24056
24052
  }, /*#__PURE__*/React__default["default"].createElement("span", {
24057
24053
  className: "flex-grow overflow-hidden"
24058
- }, selectedOption ? selectedOption : currentOption.option ? currentOption.option : placeholder), /*#__PURE__*/React__default["default"].createElement("span", {
24054
+ }, selectedOption ? selectedOption : currentOption ? currentOption : placeholder), /*#__PURE__*/React__default["default"].createElement("span", {
24059
24055
  className: "ml-2"
24060
24056
  }, isOpen ? /*#__PURE__*/React__default["default"].createElement(PiCaretUp, {
24061
24057
  size: 16,
@@ -46658,6 +46654,7 @@
46658
46654
  const FilterDropdown = ({
46659
46655
  options = [{
46660
46656
  menu: "Type",
46657
+ parameter: "type",
46661
46658
  submenu: [{
46662
46659
  option: "Type 1",
46663
46660
  value: "type1"
@@ -46665,12 +46662,22 @@
46665
46662
  type: "checkbox"
46666
46663
  }, {
46667
46664
  menu: "Status",
46665
+ parameter: "status",
46668
46666
  submenu: [{
46669
46667
  option: "Status 1",
46670
46668
  value: "status1"
46671
46669
  }],
46672
46670
  type: "radiobutton"
46671
+ }, {
46672
+ menu: "Payment",
46673
+ parameter: "payment",
46674
+ submenu: [{
46675
+ option: "Payment 1",
46676
+ value: "payment1"
46677
+ }],
46678
+ type: "checkbox"
46673
46679
  }],
46680
+ dataFilterResult,
46674
46681
  setDataFilterResult = () => {}
46675
46682
  }) => {
46676
46683
  const [showFilterMenu, setShowFilterMenu] = React.useState(false);
@@ -46678,8 +46685,6 @@
46678
46685
  const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = React.useState();
46679
46686
  const [dataFilterCheckbox, setDataFilterCheckbox] = React.useState([]);
46680
46687
  const [dataFilterStatus, setDataFilterStatus] = React.useState([]);
46681
- const [dataValueFilterCheckbox, setDataValueFilterCheckbox] = React.useState([]);
46682
- const [dataValueFilterStatus, setDataValueFilterStatus] = React.useState([]);
46683
46688
  const dropdownRef = React.useRef(null);
46684
46689
  React.useEffect(() => {
46685
46690
  const handleOutsideClick = event => {
@@ -46695,41 +46700,42 @@
46695
46700
  document.removeEventListener('mousedown', handleOutsideClick);
46696
46701
  };
46697
46702
  }, [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
46703
  const handleResetFilter = () => {
46720
- setDataFilterCheckbox([]);
46721
- setDataFilterStatus([]);
46722
- setDataValueFilterCheckbox([]);
46723
- setDataValueFilterStatus([]);
46724
- setDataFilterResult({
46725
- role: [],
46726
- status: []
46727
- });
46704
+ const resetDataFilterResult = Object.fromEntries(Object.keys(dataFilterResult).map(key => [key, []]));
46705
+ setDataFilterResult(resetDataFilterResult);
46728
46706
  setShowFilterMenu(false);
46729
46707
  setShowFilterSubmenu(false);
46730
46708
  };
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", {
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", {
46733
46739
  className: "rounded-md shadow-sm"
46734
46740
  }, /*#__PURE__*/React__default["default"].createElement("div", {
46735
46741
  className: "flex"
@@ -46739,7 +46745,7 @@
46739
46745
  }, /*#__PURE__*/React__default["default"].createElement("span", {
46740
46746
  className: "flex-grow py-2.5",
46741
46747
  onClick: () => setShowFilterMenu(!showFilterMenu)
46742
- }, 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", {
46743
46749
  className: "ml-2",
46744
46750
  onClick: handleResetFilter
46745
46751
  }, /*#__PURE__*/React__default["default"].createElement(PiX, {
@@ -46754,7 +46760,7 @@
46754
46760
  className: "relative"
46755
46761
  }, showFilterMenu && /*#__PURE__*/React__default["default"].createElement("div", {
46756
46762
  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"
46763
+ className: "bg-white border border-neutral40 w-48 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
46758
46764
  }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
46759
46765
  key: index
46760
46766
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -46763,16 +46769,7 @@
46763
46769
  setShowFilterSubmenu(true);
46764
46770
  setDataSelectionOptionMenu(option.menu);
46765
46771
  }
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, {
46772
+ }, /*#__PURE__*/React__default["default"].createElement("p", null, option.menu), (dataFilterResult[option.parameter]?.length || 0) === 0 ? /*#__PURE__*/React__default["default"].createElement(PiCaretRight, {
46776
46773
  size: 16,
46777
46774
  className: "text-neutral300"
46778
46775
  }) : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -46781,37 +46778,33 @@
46781
46778
  style: {
46782
46779
  fontSize: "8px"
46783
46780
  }
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"}`
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"}`
46786
46783
  }, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
46787
46784
  key: subIndex,
46788
46785
  className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
46789
46786
  onClick: () => {
46790
- if (option.type === "checkbox") {
46791
- handleClickSubmenuCheckbox(submenu);
46792
- } else if (option.type === "radiobutton") {
46793
- handleClickSubmenuRadioButton(submenu);
46794
- }
46787
+ handleOnClickOption(submenu, option.type, option.parameter);
46795
46788
  }
46796
46789
  }, option.type === "checkbox" && /*#__PURE__*/React__default["default"].createElement("div", {
46797
46790
  className: "flex items-center"
46798
46791
  }, /*#__PURE__*/React__default["default"].createElement("input", {
46799
46792
  type: "checkbox",
46800
46793
  className: "mr-2",
46801
- checked: dataFilterCheckbox.includes(submenu.option),
46802
- onChange: () => handleClickSubmenuCheckbox(submenu)
46794
+ checked: dataFilterResult[option.parameter]?.includes(submenu.value) || false,
46795
+ onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
46803
46796
  }), /*#__PURE__*/React__default["default"].createElement("p", {
46804
- className: `text-sm ${dataFilterCheckbox.includes(submenu) ? 'text-primary500' : 'text-black'}`
46797
+ className: `text-sm ${dataFilterResult[option.parameter]?.includes(submenu.value) ? 'text-primary500' : 'text-black'}`
46805
46798
  }, submenu.option)), option.type === "radiobutton" && /*#__PURE__*/React__default["default"].createElement("div", {
46806
46799
  className: "flex items-center"
46807
46800
  }, /*#__PURE__*/React__default["default"].createElement("input", {
46808
46801
  type: "radio",
46809
46802
  className: "mr-2",
46810
- checked: dataFilterStatus.includes(submenu.option),
46811
- onChange: () => handleClickSubmenuRadioButton(submenu)
46803
+ checked: dataFilterResult[option.parameter]?.[0] === submenu.value,
46804
+ onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
46812
46805
  }), /*#__PURE__*/React__default["default"].createElement("p", {
46813
- className: `text-sm ${dataFilterStatus.includes(submenu) ? 'text-primary500' : 'text-black'}`
46814
- }, submenu.option)))))))))));
46806
+ className: `text-sm ${dataFilterResult[option.parameter]?.[0] === submenu.value ? 'text-primary500' : 'text-black'}`
46807
+ }, submenu.option))))))))));
46815
46808
  };
46816
46809
 
46817
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.32",
4
+ "version": "0.1.33",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/dropdown/dropdownText/index.js CHANGED
@@ -16,7 +16,7 @@ const DropdownText = ({
16
16
  title = "Title Dropdown",
17
17
  placeholder = "Placeholder",
18
18
  isRequired = true,
19
- currentOption = {option : "Name 1", value:"Value 1"},
19
+ currentOption,
20
20
  }) => {
21
21
  const [isOpen, setIsOpen] = useState(false);
22
22
  const [selectedOption, setSelectedOption] = useState(null);
@@ -43,10 +43,12 @@ const DropdownText = ({
43
43
  };
44
44
 
45
45
  const handleOptionClick = (option, value) => {
46
+ console.log("ini option", option)
47
+ console.log("ini value", value)
46
48
  setSelectedOption(option);
47
49
  setIsOpen(false);
48
50
  if (onSelect) {
49
- onSelect({option: option, value: value});
51
+ onSelect(value);
50
52
  }
51
53
  };
52
54
 
@@ -67,7 +69,7 @@ const DropdownText = ({
67
69
  className="flex items-center w-full py-2.5 text-left px-4 bg-neutral20 border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none overflow-hidden"
68
70
  onClick={handleToggleDropdownText}
69
71
  >
70
- <span className='flex-grow overflow-hidden'>{selectedOption ? selectedOption : currentOption.option ? currentOption.option : placeholder}</span>
72
+ <span className='flex-grow overflow-hidden'>{selectedOption ? selectedOption : currentOption ? currentOption : placeholder}</span>
71
73
  <span className='ml-2'>
72
74
  {isOpen ? <PiCaretUp size={16} className='text-neutral300' /> : <PiCaretDown size={16} className='text-neutral300' />}
73
75
  </span>
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>