sprint-asia-custom-component 0.1.18 → 0.1.19

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 (3) hide show
  1. package/dist/index.js +16 -5
  2. package/package.json +1 -1
  3. package/src/components/filter/filterDropdown/index.js +27 -13
package/dist/index.js CHANGED
@@ -46634,7 +46634,6 @@
46634
46634
  };
46635
46635
  }, [showFilterMenu]);
46636
46636
  React.useEffect(() => {
46637
- console.log("masuk bos");
46638
46637
  setDataFilterResult({
46639
46638
  role: dataFilterCheckbox,
46640
46639
  status: dataFilterStatus
@@ -46651,25 +46650,37 @@
46651
46650
  setDataFilterStatus([submenu]);
46652
46651
  }
46653
46652
  };
46653
+ const handleResetFilter = () => {
46654
+ setDataFilterCheckbox([]);
46655
+ setDataFilterStatus([]);
46656
+ setDataFilterResult({
46657
+ role: [],
46658
+ status: []
46659
+ });
46660
+ };
46654
46661
  const buttonText = dataFilterCheckbox.length + dataFilterStatus.length > 0 ? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected` : 'Filter';
46655
46662
  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", {
46656
46663
  className: "rounded-md shadow-sm"
46664
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
46665
+ className: "flex"
46657
46666
  }, /*#__PURE__*/React__default["default"].createElement("button", {
46658
46667
  type: "button",
46659
46668
  className: "flex items-center w-60 py-2.5 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none",
46660
46669
  onClick: () => setShowFilterMenu(!showFilterMenu)
46661
46670
  }, /*#__PURE__*/React__default["default"].createElement("span", {
46662
46671
  className: "flex-grow"
46663
- }, buttonText), /*#__PURE__*/React__default["default"].createElement("span", {
46672
+ }, buttonText), dataFilterCheckbox.length + dataFilterStatus.length > 0 ? /*#__PURE__*/React__default["default"].createElement("p", {
46673
+ onClick: handleResetFilter
46674
+ }, "x") : /*#__PURE__*/React__default["default"].createElement("span", {
46664
46675
  className: "ml-2"
46665
46676
  }, /*#__PURE__*/React__default["default"].createElement(PiFunnel, {
46666
46677
  size: 16,
46667
46678
  className: "text-neutral300"
46668
- }))))), /*#__PURE__*/React__default["default"].createElement("div", {
46679
+ })))))), /*#__PURE__*/React__default["default"].createElement("div", {
46669
46680
  className: "relative"
46670
46681
  }, showFilterMenu && /*#__PURE__*/React__default["default"].createElement("div", {
46671
46682
  ref: dropdownRef,
46672
- className: "bg-white rounded-md p-3 min-w-[220px] top-1 absolute z-10 rounded-md shadow-md bg-white"
46683
+ className: "bg-white border border-neutral40 w-32 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
46673
46684
  }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
46674
46685
  key: index
46675
46686
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -46697,7 +46708,7 @@
46697
46708
  fontSize: "8px"
46698
46709
  }
46699
46710
  }, dataFilterStatus.length))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
46700
- className: "bg-white p-3 shadow-md rounded-md max-w-[180px] w-full absolute -right-[185px] top-0 cursor-pointer"
46711
+ className: "ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-32 top-0 cursor-pointer"
46701
46712
  }, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
46702
46713
  key: subIndex,
46703
46714
  className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
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.18",
4
+ "version": "0.1.19",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/filter/filterDropdown/index.js CHANGED
@@ -41,7 +41,6 @@ const FilterDropdown = ({
41
41
  }, [showFilterMenu]);
42
42
 
43
43
  useEffect(() => {
44
- console.log("masuk bos")
45
44
  setDataFilterResult({
46
45
  role:dataFilterCheckbox,
47
46
  status:dataFilterStatus
@@ -65,6 +64,15 @@ const FilterDropdown = ({
65
64
  }
66
65
  }
67
66
 
67
+ const handleResetFilter = () => {
68
+ setDataFilterCheckbox([])
69
+ setDataFilterStatus([])
70
+ setDataFilterResult({
71
+ role:[],
72
+ status:[]
73
+ })
74
+ }
75
+
68
76
  const buttonText =
69
77
  dataFilterCheckbox.length + dataFilterStatus.length > 0
70
78
  ? `${dataFilterCheckbox.length + dataFilterStatus.length} Filter Selected`
@@ -75,16 +83,22 @@ const FilterDropdown = ({
75
83
  <div>
76
84
  <div>
77
85
  <span className='rounded-md shadow-sm'>
78
- <button
79
- type='button'
80
- className="flex items-center w-60 py-2.5 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
81
- onClick={() => setShowFilterMenu(!showFilterMenu)}
82
- >
83
- <span className='flex-grow'>{buttonText}</span>
84
- <span className='ml-2'>
85
- <PiFunnel size={16} className='text-neutral300' />
86
- </span>
87
- </button>
86
+ <div className='flex'>
87
+ <button
88
+ type='button'
89
+ className="flex items-center w-60 py-2.5 text-left px-4 bg-white border-neutral50 font-normal text-sm text-neutral300 rounded-md border focus:outline-none"
90
+ onClick={() => setShowFilterMenu(!showFilterMenu)}
91
+ >
92
+ <span className='flex-grow'>{buttonText}</span>
93
+ {
94
+ dataFilterCheckbox.length + dataFilterStatus.length > 0 ?
95
+ <p onClick={handleResetFilter}>x</p> :
96
+ <span className='ml-2'>
97
+ <PiFunnel size={16} className='text-neutral300' />
98
+ </span>
99
+ }
100
+ </button>
101
+ </div>
88
102
  </span>
89
103
  </div>
90
104
  <div className="relative">
@@ -92,7 +106,7 @@ const FilterDropdown = ({
92
106
  showFilterMenu &&
93
107
  <div
94
108
  ref={dropdownRef}
95
- className="bg-white rounded-md p-3 min-w-[220px] top-1 absolute z-10 rounded-md shadow-md bg-white"
109
+ className="bg-white border border-neutral40 w-32 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
96
110
  >
97
111
  {
98
112
  options.map((option, index) => (
@@ -118,7 +132,7 @@ const FilterDropdown = ({
118
132
  </div>
119
133
  {
120
134
  showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu &&
121
- <div className="bg-white p-3 shadow-md rounded-md max-w-[180px] w-full absolute -right-[185px] top-0 cursor-pointer">
135
+ <div className="ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-32 top-0 cursor-pointer">
122
136
  {
123
137
  option.submenu.map((submenu, subIndex) => (
124
138
  <div key={subIndex} className='flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5'