sprint-asia-custom-component 0.1.150 → 0.1.152

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 +12 -8
  2. package/package.json +1 -1
  3. package/src/components/filter/filterDropdown/index.js +228 -205
  4. package/src/components/textinput/index.js +4 -0
package/dist/index.js CHANGED
@@ -29224,7 +29224,9 @@
29224
29224
  onChangeInput,
29225
29225
  className = "",
29226
29226
  rightAdornment,
29227
- leftAdornment
29227
+ leftAdornment,
29228
+ minimum,
29229
+ maximum
29228
29230
  }) => {
29229
29231
  const [isFocused, setIsFocused] = React.useState(false);
29230
29232
  const [showPassword, setShowPassword] = React.useState(false);
@@ -29257,6 +29259,8 @@
29257
29259
  ${mode === "danger" && "text-danger500"}
29258
29260
  `
29259
29261
  })), /*#__PURE__*/React__default["default"].createElement("input", {
29262
+ min: minimum !== null && minimum !== undefined && type === "number" ? minimum : undefined,
29263
+ max: maximum !== null && maximum !== undefined && type === "number" ? maximum : undefined,
29260
29264
  type: type === "password" ? showPassword ? "text" : "password" : type,
29261
29265
  className: `py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
29262
29266
  ${!value && mode === "default" && "bg-neutral20 border-neutral50 focus:outline-2 outline-primary500"}
@@ -48065,10 +48069,10 @@
48065
48069
  }
48066
48070
  };
48067
48071
  if (showFilterMenu) {
48068
- document.addEventListener('mousedown', handleOutsideClick);
48072
+ document.addEventListener("mousedown", handleOutsideClick);
48069
48073
  }
48070
48074
  return () => {
48071
- document.removeEventListener('mousedown', handleOutsideClick);
48075
+ document.removeEventListener("mousedown", handleOutsideClick);
48072
48076
  };
48073
48077
  }, [showFilterMenu]);
48074
48078
  const handleResetFilter = () => {
@@ -48105,7 +48109,7 @@
48105
48109
  }
48106
48110
  }
48107
48111
  };
48108
- const buttonText = Object.values(dataFilterResult).flat().length > 0 ? `${Object.values(dataFilterResult).flat().length} Filter Selected` : 'Filter';
48112
+ const buttonText = Object.values(dataFilterResult).flat().length > 0 ? `${Object.values(dataFilterResult).flat().length} Filter Selected` : "Filter";
48109
48113
  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
48110
48114
  className: "rounded-md shadow-sm"
48111
48115
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -48131,7 +48135,7 @@
48131
48135
  className: "relative"
48132
48136
  }, showFilterMenu && /*#__PURE__*/React__default["default"].createElement("div", {
48133
48137
  ref: dropdownRef,
48134
- className: "bg-white border border-neutral40 w-48 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
48138
+ className: "bg-white border border-neutral40 w-48 rounded-md p-3 top-1 absolute z-10 shadow-md"
48135
48139
  }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement("div", {
48136
48140
  key: index
48137
48141
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -48150,7 +48154,7 @@
48150
48154
  fontSize: "8px"
48151
48155
  }
48152
48156
  }, dataFilterResult[option.parameter]?.length || 0))), showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && /*#__PURE__*/React__default["default"].createElement("div", {
48153
- 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"} ${index == 4 && "top-48"}`
48157
+ className: `ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer max-h-64 overflow-hidden overflow-y-auto ${index == 0 && "top-0"} ${index == 1 && "top-16"} ${index == 2 && "top-24"} ${index == 3 && "top-36"} ${index == 4 && "top-48"}`
48154
48158
  }, option.submenu.map((submenu, subIndex) => /*#__PURE__*/React__default["default"].createElement("div", {
48155
48159
  key: subIndex,
48156
48160
  className: "flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5",
@@ -48165,7 +48169,7 @@
48165
48169
  checked: dataFilterResult[option.parameter]?.includes(submenu.value) || false,
48166
48170
  onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
48167
48171
  }), /*#__PURE__*/React__default["default"].createElement("p", {
48168
- className: `text-sm ${dataFilterResult[option.parameter]?.includes(submenu.value) ? 'text-primary500' : 'text-black'}`
48172
+ className: `text-sm ${dataFilterResult[option.parameter]?.includes(submenu.value) ? "text-primary500" : "text-black"}`
48169
48173
  }, submenu.option)), option.type === "radiobutton" && /*#__PURE__*/React__default["default"].createElement("div", {
48170
48174
  className: "flex items-center"
48171
48175
  }, /*#__PURE__*/React__default["default"].createElement("input", {
@@ -48174,7 +48178,7 @@
48174
48178
  checked: dataFilterResult[option.parameter]?.[0] === submenu.value,
48175
48179
  onChange: () => handleOnClickOption(submenu, option.type, option.parameter)
48176
48180
  }), /*#__PURE__*/React__default["default"].createElement("p", {
48177
- className: `text-sm ${dataFilterResult[option.parameter]?.[0] === submenu.value ? 'text-primary500' : 'text-black'}`
48181
+ className: `text-sm ${dataFilterResult[option.parameter]?.[0] === submenu.value ? "text-primary500" : "text-black"}`
48178
48182
  }, submenu.option))))))))));
48179
48183
  };
48180
48184
 
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.150",
4
+ "version": "0.1.152",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/filter/filterDropdown/index.js CHANGED
@@ -1,229 +1,252 @@
1
- import React, { useState, useEffect, useRef } from 'react';
2
- import { PiFunnel, PiCaretRight, PiX } from 'react-icons/pi';
1
+ import React, { useState, useEffect, useRef } from "react";
2
+ import { PiFunnel, PiCaretRight, PiX } from "react-icons/pi";
3
3
 
4
- const FilterDropdown = ({
5
- options = [
4
+ const FilterDropdown = ({
5
+ options = [
6
+ {
7
+ menu: "Type",
8
+ parameter: "type",
9
+ submenu: [
6
10
  {
7
- menu:"Type",
8
- parameter : "type",
9
- submenu:[{
10
- option:"Type 1",
11
- value : "type1"
12
- }],
13
- type:"checkbox"
11
+ option: "Type 1",
12
+ value: "type1",
14
13
  },
14
+ ],
15
+ type: "checkbox",
16
+ },
17
+ {
18
+ menu: "Status",
19
+ parameter: "status",
20
+ submenu: [
15
21
  {
16
- menu:"Status",
17
- parameter : "status",
18
- submenu:[{
19
- option : "Status 1",
20
- value : "status1"
21
- }],
22
- type:"radiobutton"
22
+ option: "Status 1",
23
+ value: "status1",
23
24
  },
25
+ ],
26
+ type: "radiobutton",
27
+ },
28
+ {
29
+ menu: "Payment",
30
+ parameter: "payment",
31
+ submenu: [
24
32
  {
25
- menu:"Payment",
26
- parameter : "payment",
27
- submenu:[{
28
- option : "Payment 1",
29
- value : "payment1"
30
- }],
31
- type:"checkbox"
33
+ option: "Payment 1",
34
+ value: "payment1",
32
35
  },
36
+ ],
37
+ type: "checkbox",
38
+ },
39
+ {
40
+ menu: "Payment 2",
41
+ parameter: "payment 2",
42
+ submenu: [
33
43
  {
34
- menu:"Payment 2",
35
- parameter : "payment 2",
36
- submenu:[{
37
- option : "Payment 2",
38
- value : "payment2"
39
- }],
40
- type:"checkbox"
44
+ option: "Payment 2",
45
+ value: "payment2",
41
46
  },
47
+ ],
48
+ type: "checkbox",
49
+ },
50
+ {
51
+ menu: "Payment 3",
52
+ parameter: "payment 3",
53
+ submenu: [
42
54
  {
43
- menu:"Payment 3",
44
- parameter : "payment 3",
45
- submenu:[{
46
- option : "Payment 3",
47
- value : "payment3"
48
- }],
49
- type:"checkbox"
55
+ option: "Payment 3",
56
+ value: "payment3",
50
57
  },
51
- ],
52
- dataFilterResult,
53
- setDataFilterResult = () => {},
58
+ ],
59
+ type: "checkbox",
60
+ },
61
+ ],
62
+ dataFilterResult,
63
+ setDataFilterResult = () => {},
54
64
  }) => {
55
- const [showFilterMenu, setShowFilterMenu] = useState(false);
56
- const [showFilterSubmenu, setShowFilterSubmenu] = useState(false);
65
+ const [showFilterMenu, setShowFilterMenu] = useState(false);
66
+ const [showFilterSubmenu, setShowFilterSubmenu] = useState(false);
57
67
 
58
- const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = useState();
59
- const [dataFilterCheckbox, setDataFilterCheckbox] = useState([]);
60
- const [dataFilterStatus, setDataFilterStatus] = useState([]);
61
- const dropdownRef = useRef(null);
68
+ const [dataSelectionOptionMenu, setDataSelectionOptionMenu] = useState();
69
+ const [dataFilterCheckbox, setDataFilterCheckbox] = useState([]);
70
+ const [dataFilterStatus, setDataFilterStatus] = useState([]);
71
+ const dropdownRef = useRef(null);
62
72
 
63
- useEffect(() => {
64
- const handleOutsideClick = (event) => {
65
- if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
66
- setShowFilterMenu(false);
67
- setShowFilterSubmenu(false);
68
- }
69
- };
73
+ useEffect(() => {
74
+ const handleOutsideClick = (event) => {
75
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
76
+ setShowFilterMenu(false);
77
+ setShowFilterSubmenu(false);
78
+ }
79
+ };
70
80
 
71
- if (showFilterMenu) {
72
- document.addEventListener('mousedown', handleOutsideClick);
73
- }
81
+ if (showFilterMenu) {
82
+ document.addEventListener("mousedown", handleOutsideClick);
83
+ }
74
84
 
75
- return () => {
76
- document.removeEventListener('mousedown', handleOutsideClick);
77
- };
78
- }, [showFilterMenu]);
85
+ return () => {
86
+ document.removeEventListener("mousedown", handleOutsideClick);
87
+ };
88
+ }, [showFilterMenu]);
79
89
 
80
- const handleResetFilter = () => {
81
- const resetDataFilterResult = Object.fromEntries(
82
- Object.keys(dataFilterResult).map(key => [key, []])
83
- );
84
- setDataFilterResult(resetDataFilterResult);
85
- setShowFilterMenu(false)
86
- setShowFilterSubmenu(false)
87
- }
90
+ const handleResetFilter = () => {
91
+ const resetDataFilterResult = Object.fromEntries(Object.keys(dataFilterResult).map((key) => [key, []]));
92
+ setDataFilterResult(resetDataFilterResult);
93
+ setShowFilterMenu(false);
94
+ setShowFilterSubmenu(false);
95
+ };
88
96
 
89
- const handleOnClickOption = (submenu, type, parameter) => {
90
- if (type === "checkbox") {
91
- const isSubmenuExist = dataFilterResult[parameter]?.includes(submenu.value);
92
- const updatedData = [...(dataFilterResult[parameter] || [])];
93
-
94
- if (isSubmenuExist) {
95
- const index = updatedData.indexOf(submenu.value);
96
- updatedData.splice(index, 1);
97
- } else {
98
- updatedData.push(submenu.value);
99
- }
100
- setDataFilterResult(prevState => ({
101
- ...prevState,
102
- [parameter]: updatedData
103
- }));
104
- } else if (type === "radiobutton") {
105
- if (dataFilterResult[parameter]?.[0] === submenu.value) {
106
- setDataFilterResult(prevState => ({
107
- ...prevState,
108
- [parameter]: []
109
- }));
110
- } else {
111
- setDataFilterResult(prevState => ({
112
- ...prevState,
113
- [parameter]: [submenu.value]
114
- }));
115
- }
116
- }
117
- };
97
+ const handleOnClickOption = (submenu, type, parameter) => {
98
+ if (type === "checkbox") {
99
+ const isSubmenuExist = dataFilterResult[parameter]?.includes(submenu.value);
100
+ const updatedData = [...(dataFilterResult[parameter] || [])];
118
101
 
119
- const buttonText =
120
- Object.values(dataFilterResult).flat().length > 0
121
- ? `${Object.values(dataFilterResult).flat().length} Filter Selected`
122
- : 'Filter';
102
+ if (isSubmenuExist) {
103
+ const index = updatedData.indexOf(submenu.value);
104
+ updatedData.splice(index, 1);
105
+ } else {
106
+ updatedData.push(submenu.value);
107
+ }
108
+ setDataFilterResult((prevState) => ({
109
+ ...prevState,
110
+ [parameter]: updatedData,
111
+ }));
112
+ } else if (type === "radiobutton") {
113
+ if (dataFilterResult[parameter]?.[0] === submenu.value) {
114
+ setDataFilterResult((prevState) => ({
115
+ ...prevState,
116
+ [parameter]: [],
117
+ }));
118
+ } else {
119
+ setDataFilterResult((prevState) => ({
120
+ ...prevState,
121
+ [parameter]: [submenu.value],
122
+ }));
123
+ }
124
+ }
125
+ };
123
126
 
127
+ const buttonText =
128
+ Object.values(dataFilterResult).flat().length > 0
129
+ ? `${Object.values(dataFilterResult).flat().length} Filter Selected`
130
+ : "Filter";
124
131
 
125
- return (
126
- <div>
127
- <div>
128
- <span className='rounded-md shadow-sm'>
129
- <div className='flex'>
130
- <button
131
- type='button'
132
- className={`${Object.values(dataFilterResult).flat().length ? "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`}
133
- >
134
- <span className='flex-grow py-2.5' onClick={() => setShowFilterMenu(!showFilterMenu)}>{buttonText}</span>
135
- {
136
- Object.values(dataFilterResult).flat().length ?
137
- <span className='ml-2' onClick={handleResetFilter}>
138
- <PiX size={16} className='text-black' />
139
- </span>
140
- :
141
- <span className='ml-2'>
142
- <PiFunnel size={16} className='text-neutral300' />
143
- </span>
144
- }
145
- </button>
146
- </div>
132
+ return (
133
+ <div>
134
+ <div>
135
+ <span className="rounded-md shadow-sm">
136
+ <div className="flex">
137
+ <button
138
+ type="button"
139
+ className={`${
140
+ Object.values(dataFilterResult).flat().length
141
+ ? "border-black text-black"
142
+ : "border-neutral50 text-neutral300"
143
+ } flex items-center w-60 text-left px-4 bg-white font-normal text-sm rounded-md border focus:outline-none`}
144
+ >
145
+ <span className="flex-grow py-2.5" onClick={() => setShowFilterMenu(!showFilterMenu)}>
146
+ {buttonText}
147
+ </span>
148
+ {Object.values(dataFilterResult).flat().length ? (
149
+ <span className="ml-2" onClick={handleResetFilter}>
150
+ <PiX size={16} className="text-black" />
151
+ </span>
152
+ ) : (
153
+ <span className="ml-2">
154
+ <PiFunnel size={16} className="text-neutral300" />
147
155
  </span>
148
- </div>
149
- <div className="relative">
150
- {
151
- showFilterMenu &&
152
- <div
153
- ref={dropdownRef}
154
- className="bg-white border border-neutral40 w-48 rounded-md p-3 top-1 absolute z-10 rounded-md shadow-md bg-white"
155
- >
156
- {
157
- options.map((option, index) => (
158
- <div key={index}>
159
- <div
160
- className={`hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer justify-between`}
161
- onClick={() => {
162
- setShowFilterSubmenu(true);
163
- setDataSelectionOptionMenu(option.menu);
164
- }}
165
- >
166
- <p>{option.menu}</p>
167
- {
168
- (dataFilterResult[option.parameter]?.length || 0) === 0 ?
169
- <PiCaretRight size={16} className='text-neutral300' />
170
- :
171
- <div className='w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500'>
172
- <p style={{ fontSize: "8px" }}>{(dataFilterResult[option.parameter]?.length || 0)}</p>
173
- </div>
174
- }
175
- </div>
176
- {
177
- showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu &&
178
- <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"} ${index == 4 && "top-48"}`}>
179
- {
180
- option.submenu.map((submenu, subIndex) => (
181
- <div key={subIndex} className='flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5'
182
- onClick={() => {
183
- handleOnClickOption(submenu, option.type, option.parameter)
184
- }}
185
- >
186
- {
187
- option.type === "checkbox" &&
188
- <div className='flex items-center'>
189
- <input
190
- type='checkbox'
191
- className='mr-2'
192
- checked={dataFilterResult[option.parameter]?.includes(submenu.value) || false}
193
- onChange={() => handleOnClickOption(submenu, option.type, option.parameter)}
194
- />
195
- <p className={`text-sm ${dataFilterResult[option.parameter]?.includes(submenu.value) ? 'text-primary500' : 'text-black'}`}>
196
- {submenu.option}
197
- </p>
198
- </div>
199
- }
200
- {
201
- option.type === "radiobutton" &&
202
- <div className='flex items-center'>
203
- <input
204
- type='radio'
205
- className='mr-2'
206
- checked={dataFilterResult[option.parameter]?.[0] === submenu.value}
207
- onChange={() => handleOnClickOption(submenu, option.type, option.parameter)}
208
- />
209
- <p className={`text-sm ${dataFilterResult[option.parameter]?.[0] === submenu.value ? 'text-primary500' : 'text-black'}`}>
210
- {submenu.option}
211
- </p>
212
- </div>
213
- }
214
- </div>
215
- ))
216
- }
217
- </div>
218
- }
219
- </div>
220
- ))
221
- }
222
- </div>
223
- }
156
+ )}
157
+ </button>
158
+ </div>
159
+ </span>
160
+ </div>
161
+ <div className="relative">
162
+ {showFilterMenu && (
163
+ <div
164
+ ref={dropdownRef}
165
+ className="bg-white border border-neutral40 w-48 rounded-md p-3 top-1 absolute z-10 shadow-md"
166
+ >
167
+ {options.map((option, index) => (
168
+ <div key={index}>
169
+ <div
170
+ className={`hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md flex items-center cursor-pointer justify-between`}
171
+ onClick={() => {
172
+ setShowFilterSubmenu(true);
173
+ setDataSelectionOptionMenu(option.menu);
174
+ }}
175
+ >
176
+ <p>{option.menu}</p>
177
+ {(dataFilterResult[option.parameter]?.length || 0) === 0 ? (
178
+ <PiCaretRight size={16} className="text-neutral300" />
179
+ ) : (
180
+ <div className="w-4 h-4 border border-primary500 rounded-full flex items-center justify-center text-primary500">
181
+ <p style={{ fontSize: "8px" }}>{dataFilterResult[option.parameter]?.length || 0}</p>
182
+ </div>
183
+ )}
224
184
  </div>
225
- </div>
226
- );
227
- };
185
+ {showFilterSubmenu && option.submenu.length > 0 && dataSelectionOptionMenu === option.menu && (
186
+ <div
187
+ className={`ml-1 border border-neutral40 bg-white p-3 shadow-md rounded-md w-56 absolute left-48 cursor-pointer max-h-64 overflow-hidden overflow-y-auto ${
188
+ index == 0 && "top-0"
189
+ } ${index == 1 && "top-16"} ${index == 2 && "top-24"} ${index == 3 && "top-36"} ${
190
+ index == 4 && "top-48"
191
+ }`}
192
+ >
193
+ {option.submenu.map((submenu, subIndex) => (
194
+ <div
195
+ key={subIndex}
196
+ className="flex bg-white hover:bg-neutral20 rounded-md py-2.5 px-4 my-0.5"
197
+ onClick={() => {
198
+ handleOnClickOption(submenu, option.type, option.parameter);
199
+ }}
200
+ >
201
+ {option.type === "checkbox" && (
202
+ <div className="flex items-center">
203
+ <input
204
+ type="checkbox"
205
+ className="mr-2"
206
+ checked={dataFilterResult[option.parameter]?.includes(submenu.value) || false}
207
+ onChange={() => handleOnClickOption(submenu, option.type, option.parameter)}
208
+ />
209
+ <p
210
+ className={`text-sm ${
211
+ dataFilterResult[option.parameter]?.includes(submenu.value)
212
+ ? "text-primary500"
213
+ : "text-black"
214
+ }`}
215
+ >
216
+ {submenu.option}
217
+ </p>
218
+ </div>
219
+ )}
220
+ {option.type === "radiobutton" && (
221
+ <div className="flex items-center">
222
+ <input
223
+ type="radio"
224
+ className="mr-2"
225
+ checked={dataFilterResult[option.parameter]?.[0] === submenu.value}
226
+ onChange={() => handleOnClickOption(submenu, option.type, option.parameter)}
227
+ />
228
+ <p
229
+ className={`text-sm ${
230
+ dataFilterResult[option.parameter]?.[0] === submenu.value
231
+ ? "text-primary500"
232
+ : "text-black"
233
+ }`}
234
+ >
235
+ {submenu.option}
236
+ </p>
237
+ </div>
238
+ )}
239
+ </div>
240
+ ))}
241
+ </div>
242
+ )}
243
+ </div>
244
+ ))}
245
+ </div>
246
+ )}
247
+ </div>
248
+ </div>
249
+ );
250
+ };
228
251
 
229
- export default FilterDropdown;
252
+ export default FilterDropdown;
package/src/components/textinput/index.js CHANGED
@@ -15,6 +15,8 @@ const TextInput = ({
15
15
  className = "",
16
16
  rightAdornment,
17
17
  leftAdornment,
18
+ minimum,
19
+ maximum
18
20
  }) => {
19
21
  const [isFocused, setIsFocused] = useState(false);
20
22
  const [showPassword, setShowPassword] = useState(false);
@@ -56,6 +58,8 @@ const TextInput = ({
56
58
  </section>
57
59
 
58
60
  <input
61
+ min={minimum !== null && minimum !== undefined && type === "number" ? minimum : undefined}
62
+ max={maximum !== null && maximum !== undefined && type === "number" ? maximum : undefined}
59
63
  type={type === "password" ? (showPassword ? "text" : "password") : type}
60
64
  className={`py-2.5 px-4 w-full font-normal text-sm text-neutral300 rounded-md border
61
65
  ${