pager-widget 0.2.1 → 0.2.3
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/App.jsx +104 -50
- package/ConsentPopup.jsx +21 -15
- package/Dropdown.jsx +146 -0
- package/InputConverter.jsx +365 -246
- package/dist/inter.fd2364ba.woff2 +0 -0
- package/dist/lib.js +15 -13
- package/fontStyles.js +9 -19
- package/package.json +1 -1
- package/static/additional.css +28 -9
- package/static/fonts/inter.woff2 +0 -0
- package/useEndpoint.js +11 -0
- package/yarn-error.log +9536 -0
- package/dist/Gordita-Medium.e5d1fa87.woff2 +0 -0
- package/dist/Gordita-Regular.6d2fd269.woff2 +0 -0
package/Dropdown.jsx
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { countries } from "country-codes-flags-phone-codes";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
|
|
5
|
+
const DropdownWrapper = styled.div`
|
|
6
|
+
width: 100%;
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
9
|
+
`;
|
|
10
|
+
const DropdownContent = styled.span`
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
border: 1px solid ${({ error }) => (error === "true" ? "var(--red-300, #FFA2A2)" : "var(--k300, #d0d5dd)")};
|
|
13
|
+
|
|
14
|
+
font-size: 14px;
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-weight: 400;
|
|
17
|
+
background: #fff;
|
|
18
|
+
padding: 10px 30px 10px 2px;
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
width: 91%;
|
|
21
|
+
height: 24px;
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: space-between;
|
|
24
|
+
align-items: center;
|
|
25
|
+
font-family: Inter, Open Sans;
|
|
26
|
+
`;
|
|
27
|
+
const DropdownList = styled.div`
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
gap: 8px;
|
|
31
|
+
border: 1px solid #cbc8c8fa;
|
|
32
|
+
padding: 12px -1px;
|
|
33
|
+
position: absolute;
|
|
34
|
+
width: 100%;
|
|
35
|
+
bottom: 100%;
|
|
36
|
+
background: white;
|
|
37
|
+
border-radius: 8px;
|
|
38
|
+
left: 0px;
|
|
39
|
+
height: 250px;
|
|
40
|
+
`;
|
|
41
|
+
const DropdownInput = styled.input`
|
|
42
|
+
width: 100%;
|
|
43
|
+
padding-left: 20px;
|
|
44
|
+
border-bottom: 1px solid #d0d5dd;
|
|
45
|
+
outline: none;
|
|
46
|
+
border-top: none;
|
|
47
|
+
border-left: none;
|
|
48
|
+
border-right: none;
|
|
49
|
+
background: transparent;
|
|
50
|
+
height: 40px;
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
`;
|
|
54
|
+
const DropdownNode = styled.span`
|
|
55
|
+
padding: 8px 8px;
|
|
56
|
+
border-radius: 8px;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
`;
|
|
59
|
+
|
|
60
|
+
const Dropdown = ({error,updateFieldValue, fieldId}) => {
|
|
61
|
+
const [selectedCountry, setSelectedCountry] = useState({
|
|
62
|
+
flag: null,
|
|
63
|
+
country: "Select a country",
|
|
64
|
+
});
|
|
65
|
+
const [isDropDownOpen, setIsDropDownOpen] = useState(false);
|
|
66
|
+
const [hoveredCountry, setHoveredCountry] = useState(null);
|
|
67
|
+
const [searchQuery, setSearchQuery] = useState("");
|
|
68
|
+
|
|
69
|
+
const filteredCountries = countries.filter((country) =>
|
|
70
|
+
country.name.toLowerCase().includes(searchQuery.toLowerCase())
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
const handleSelectDropdown = (flag, country) => {
|
|
74
|
+
setSelectedCountry({ flag, country });
|
|
75
|
+
setIsDropDownOpen(false);
|
|
76
|
+
updateFieldValue(fieldId, country)
|
|
77
|
+
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<>
|
|
82
|
+
|
|
83
|
+
<DropdownWrapper>
|
|
84
|
+
<DropdownContent error={error} onClick={() => setIsDropDownOpen(!isDropDownOpen)}>
|
|
85
|
+
{selectedCountry.flag && selectedCountry.flag} {" "}
|
|
86
|
+
{selectedCountry.country}{" "}
|
|
87
|
+
<span style={{ rotate: isDropDownOpen ? "180deg" : "0deg" }}>
|
|
88
|
+
<svg
|
|
89
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
90
|
+
width="28"
|
|
91
|
+
height="28"
|
|
92
|
+
viewBox="0 0 20 20"
|
|
93
|
+
fill="none"
|
|
94
|
+
>
|
|
95
|
+
<path
|
|
96
|
+
d="M6.66675 8.45312C7.5518 9.67136 8.58931 10.7625 9.75185 11.6983C9.89789 11.8158 10.1023 11.8158 10.2483 11.6983C11.4109 10.7625 12.4484 9.67136 13.3334 8.45312"
|
|
97
|
+
stroke="#344054"
|
|
98
|
+
stroke-width="1.4"
|
|
99
|
+
stroke-linecap="round"
|
|
100
|
+
stroke-linejoin="round"
|
|
101
|
+
/>
|
|
102
|
+
</svg>
|
|
103
|
+
</span>
|
|
104
|
+
</DropdownContent>
|
|
105
|
+
{isDropDownOpen && (
|
|
106
|
+
<DropdownList>
|
|
107
|
+
<DropdownInput onChange={(e) => setSearchQuery(e.target.value)} placeholder="search..." />
|
|
108
|
+
<div
|
|
109
|
+
style={{
|
|
110
|
+
height: "220px",
|
|
111
|
+
overflowY: "scroll",
|
|
112
|
+
display: "flex",
|
|
113
|
+
flexDirection: "column",
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
{filteredCountries.length > 0 ? (
|
|
117
|
+
filteredCountries.map((country, index) => (
|
|
118
|
+
<DropdownNode
|
|
119
|
+
style={{
|
|
120
|
+
background:
|
|
121
|
+
hoveredCountry === index ? "#e9e5e5" : "transparent",
|
|
122
|
+
}}
|
|
123
|
+
onClick={() =>
|
|
124
|
+
handleSelectDropdown(country.flag, country.name)
|
|
125
|
+
}
|
|
126
|
+
onMouseOver={() => setHoveredCountry(index)}
|
|
127
|
+
onMouseLeave={() => setHoveredCountry(null)}
|
|
128
|
+
>
|
|
129
|
+
{country.flag} {country.name}
|
|
130
|
+
</DropdownNode>
|
|
131
|
+
))
|
|
132
|
+
) : (
|
|
133
|
+
<span style={{ padding: "10px", textAlign: "center" }}>
|
|
134
|
+
No results found
|
|
135
|
+
</span>
|
|
136
|
+
)}
|
|
137
|
+
</div>
|
|
138
|
+
</DropdownList>
|
|
139
|
+
)}
|
|
140
|
+
</DropdownWrapper>
|
|
141
|
+
</>
|
|
142
|
+
|
|
143
|
+
);
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
export default Dropdown;
|