sprint-asia-custom-component 0.1.62 → 0.1.64
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.
- package/dist/index.css +1 -1
- package/dist/index.js +3636 -1028
- package/package.json +1 -1
- package/src/components/footer/index.js +3 -3
- package/src/components/searchdropdown/index.js +92 -82
package/package.json
CHANGED
|
@@ -25,7 +25,7 @@ const Footer = ({
|
|
|
25
25
|
<PrimaryButton
|
|
26
26
|
title={titleLeftButton}
|
|
27
27
|
onClick={onClickLeftButton}
|
|
28
|
-
isActive={
|
|
28
|
+
isActive={true}
|
|
29
29
|
/>
|
|
30
30
|
}
|
|
31
31
|
{
|
|
@@ -33,7 +33,7 @@ const Footer = ({
|
|
|
33
33
|
<DangerButton
|
|
34
34
|
title={titleLeftButton}
|
|
35
35
|
onClick={onClickLeftButton}
|
|
36
|
-
isActive={
|
|
36
|
+
isActive={true}
|
|
37
37
|
/>
|
|
38
38
|
}
|
|
39
39
|
{
|
|
@@ -41,7 +41,7 @@ const Footer = ({
|
|
|
41
41
|
<OutlineButton
|
|
42
42
|
title={titleLeftButton}
|
|
43
43
|
onClick={onClickLeftButton}
|
|
44
|
-
isActive={
|
|
44
|
+
isActive={true}
|
|
45
45
|
/>
|
|
46
46
|
}
|
|
47
47
|
</div>
|
|
@@ -1,95 +1,105 @@
|
|
|
1
|
-
import React, { useState, useRef } from
|
|
2
|
-
import { PiMagnifyingGlass, PiCaretDown, PiCaretUp } from
|
|
1
|
+
import React, { useState, useRef } from "react";
|
|
2
|
+
import { PiMagnifyingGlass, PiCaretDown, PiCaretUp } from "react-icons/pi";
|
|
3
3
|
|
|
4
4
|
const SearchDropdown = ({
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
setFilterSearch,
|
|
20
|
-
onEnterPress,
|
|
5
|
+
options = [
|
|
6
|
+
{
|
|
7
|
+
option: "Name 1",
|
|
8
|
+
value: "Value 1",
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
option: "Name 2",
|
|
12
|
+
value: "Value 2",
|
|
13
|
+
},
|
|
14
|
+
],
|
|
15
|
+
placeholderSearch = "Search Here",
|
|
16
|
+
filterDropdown = "Filter",
|
|
17
|
+
setFilterDropdown,
|
|
18
|
+
onEnterPress,
|
|
21
19
|
}) => {
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
const [input, setInput] = useState("");
|
|
21
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
22
|
+
const dropdownRef = useRef(null);
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const handleClickOption = (data) => {
|
|
32
|
-
setIsOpen(false)
|
|
33
|
-
setFilterDropdown(data)
|
|
24
|
+
const handleKeyDown = (event) => {
|
|
25
|
+
if (event.key === "Enter") {
|
|
26
|
+
onEnterPress(input);
|
|
34
27
|
}
|
|
28
|
+
};
|
|
35
29
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
options?.length > 0 ?
|
|
57
|
-
options.map((option, index) => (
|
|
58
|
-
<div
|
|
59
|
-
key={index}
|
|
60
|
-
className='hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer'
|
|
61
|
-
onClick={() => handleClickOption(option)}
|
|
62
|
-
>
|
|
63
|
-
<div className='flex justify-between'>
|
|
64
|
-
<p className='text-sm text-black'>{option.option}</p>
|
|
65
|
-
</div>
|
|
66
|
-
</div>
|
|
67
|
-
))
|
|
68
|
-
:
|
|
69
|
-
<div className='text-sm font-normal text-black flex justify-center'>
|
|
70
|
-
<p>Data Not Available</p>
|
|
71
|
-
</div>
|
|
72
|
-
}
|
|
73
|
-
</div>
|
|
74
|
-
</div>
|
|
75
|
-
)}
|
|
30
|
+
const handleClickOption = (data) => {
|
|
31
|
+
setIsOpen(false);
|
|
32
|
+
setFilterDropdown(data);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div className="relative inline-block text-left w-full" ref={dropdownRef}>
|
|
37
|
+
<div className="flex items-center h-full">
|
|
38
|
+
<div
|
|
39
|
+
className={`${
|
|
40
|
+
input ? "border-black" : "border-neutral50"
|
|
41
|
+
} relative cursor-pointer border-t border-b border-l rounded-tl-md rounded-bl-md`}
|
|
42
|
+
onClick={() => setIsOpen(!isOpen)}
|
|
43
|
+
>
|
|
44
|
+
<div className="flex items-center bg-white rounded-tl-md rounded-bl-md">
|
|
45
|
+
<p className="flex items-center w-full py-2.5 text-left pl-4 pr-4 bg-white rounded-md font-bold text-sm text-neutral300">
|
|
46
|
+
{filterDropdown.option}
|
|
47
|
+
</p>
|
|
48
|
+
{isOpen ? <PiCaretUp /> : <PiCaretDown />}
|
|
49
|
+
<p className={`${input ? "text-black" : "text-neutral50"} ml-3`}>|</p>
|
|
76
50
|
</div>
|
|
77
|
-
|
|
78
|
-
<div
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
51
|
+
{isOpen && (
|
|
52
|
+
<div
|
|
53
|
+
className="z-10 origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden"
|
|
54
|
+
role="menu"
|
|
55
|
+
aria-orientation="vertical"
|
|
56
|
+
aria-labelledby="options-menu"
|
|
57
|
+
>
|
|
58
|
+
<div className="px-1 py-2 max-h-56 overflow-y-auto">
|
|
59
|
+
{options?.length > 0 ? (
|
|
60
|
+
options.map((option, index) => (
|
|
61
|
+
<div
|
|
62
|
+
key={index}
|
|
63
|
+
className="hover:bg-neutral20 bg-white py-2.5 px-4 my-0.5 rounded-md cursor-pointer"
|
|
64
|
+
onClick={() => handleClickOption(option)}
|
|
65
|
+
>
|
|
66
|
+
<div className="flex justify-between">
|
|
67
|
+
<p className="text-sm text-black">{option.option}</p>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
))
|
|
71
|
+
) : (
|
|
72
|
+
<div className="text-sm font-normal text-black flex justify-center">
|
|
73
|
+
<p>Data Not Available</p>
|
|
74
|
+
</div>
|
|
75
|
+
)}
|
|
76
|
+
</div>
|
|
88
77
|
</div>
|
|
78
|
+
)}
|
|
79
|
+
</div>
|
|
80
|
+
<div
|
|
81
|
+
className={`${
|
|
82
|
+
input ? "border-black" : "border-neutral50"
|
|
83
|
+
} relative border-t border-b border-r rounded-tr-md rounded-br-md`}
|
|
84
|
+
>
|
|
85
|
+
<div className="flex items-center bg-white rounded-tr-md rounded-br-md focus:outline-none">
|
|
86
|
+
<PiMagnifyingGlass
|
|
87
|
+
className={`${
|
|
88
|
+
input ? "text-black" : "text-neutral50"
|
|
89
|
+
} absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4`}
|
|
90
|
+
/>
|
|
91
|
+
<input
|
|
92
|
+
type="search"
|
|
93
|
+
onChange={(e) => setInput(e.target.value)}
|
|
94
|
+
onKeyDown={(e) => handleKeyDown(e)}
|
|
95
|
+
className="flex items-center w-full py-2.5 text-left pl-8 pr-4 bg-white rounded-md font-normal text-sm text-black focus:outline-none"
|
|
96
|
+
placeholder={placeholderSearch}
|
|
97
|
+
/>
|
|
89
98
|
</div>
|
|
90
99
|
</div>
|
|
91
100
|
</div>
|
|
92
|
-
|
|
101
|
+
</div>
|
|
102
|
+
);
|
|
93
103
|
};
|
|
94
104
|
|
|
95
|
-
export default SearchDropdown;
|
|
105
|
+
export default SearchDropdown;
|