mikhail_lanskikh/graff.event
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

in process new phone input with mask and codes

Browse Source
This commit is contained in:
Lanskikh
2024-09-03 19:00:21 +05:00
parent b8be47299e
commit 60d54fe4e7
6 changed files with 96 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+4
View File
@@ -11,10 +11,13 @@
},
"dependencies": {
"framer-motion": "^11.3.31",
"intl-tel-input": "^24.3.6",
"ky": "^1.7.1",
"libphonenumber-js": "^1.11.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-input-mask": "^2.0.4",
"react-phone-number-input": "^3.4.5",
"react-router-dom": "^6.26.1",
"react-swipeable": "^7.0.1",
"usehooks-ts": "^3.1.0",
@@ -25,6 +28,7 @@
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react-input-mask": "^3.0.5",
"@types/react-phone-number-input": "^3.1.37",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.20",
"eslint": "^9.9.0",
src/assets/promotion/Ellipse.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

src/components/Form.tsx
+29 -14
View File
@@ -1,19 +1,26 @@
import examples from 'libphonenumber-js/mobile/examples';
import {
formatPhoneNumber,
getCountries,
getCountryCallingCode,
} from 'react-phone-number-input';
import ReactInputMask from 'react-input-mask';
import { FormEvent, useEffect, useRef, useState } from 'react';
import { Title } from './ui/Title';
import { api } from '../api';
import { PhoneCode } from '../types/PhoneCode';
import { Button } from './ui/Button';
import { ClassNameWrapper } from '../hocs/ClassNameWrapper';
import { LoaderIcon } from './icons/LoaderIcon';
import { ChevronUpIcon } from './icons/ChevronUpIcon';
import { ChevronDownIcon } from './icons/ChevronDownIcon';
import { phoneCodes } from '../consts/phoneCodes';
import { ArrowRightIcon } from './icons/ArrowRightIcon';
import { CountryCode, getExampleNumber } from 'libphonenumber-js';
export function Form() {
const [name, setName] = useState('');
const [phoneCode, setPhoneCode] = useState<PhoneCode>('+7');
const [[phoneCode, country], setPhoneCodeAndCountry] = useState<
[string, string]
>(['', '']);
const [phone, setPhone] = useState('');
const [email, setEmail] = useState('');
const [description, setDescription] = useState('');
@@ -116,17 +123,20 @@ export function Form() {
<div className="flex gap-x-3 py-4 border-[#3D425C] relative">
<SelectPhoneCode
currentPhoneCode={phoneCode}
onClick={setPhoneCode}
onClick={setPhoneCodeAndCountry}
/>
<div className="border-l border-[#3D425C]" />
<ReactInputMask
required
type="tel"
id="tel"
mask={'(999) 99 999 99'}
mask={
getExampleNumber(country as CountryCode, examples)
?.formatNational
}
maskChar={null}
value={phone}
placeholder="(900) 000 00 00"
placeholder={formatPhoneNumber(examples[country] as string)}
onChange={e => setPhone(e.target.value)}
className="bg-transparent rounded-none outline-none transition-all w-full placeholder:h4 placeholder:font-medium placeholder:select-none peer"
/>
@@ -154,7 +164,7 @@ export function Form() {
</div>
</div>
<div className="space-y-4 max-w-[23vw]">
<div className="space-y-4 max-w-[25vw]">
<Button
width="full"
disabled={isLoading}
@@ -186,7 +196,7 @@ export function Form() {
</p>
</div>
</form>
<div className="absolute bottom-0 -right-[min(136px,calc(136/1600*100vw))] animate-[spin_5s_linear_infinite]">
<div className="absolute bottom-0 -right-[min(136px,calc(136/1600*100vw))] animate-[spin_10s_linear_infinite]">
<div className="relative w-[calc(512/1600*100vw)] aspect-square flex justify-center transition-all duration-700 hover:w-[calc(446/1600*100vw)] origin-center">
<div className="w-[calc(116/1600*100vw)] flex flex-col justify-between h-full absolute">
<img src="/src/assets/form/1_1.png" alt="" />
@@ -239,11 +249,15 @@ function SelectPhoneCode({
currentPhoneCode,
onClick,
}: {
currentPhoneCode: PhoneCode;
onClick: (phoneCode: PhoneCode) => void;
currentPhoneCode: string;
onClick: ([phoneCode, country]: [string, string]) => void;
}) {
const [open, setOpen] = useState(false);
useEffect(() => {
console.log(getCountries().map(country => getCountryCallingCode(country)));
}, []);
return (
<div className="relative flex flex-col">
<button
@@ -258,14 +272,15 @@ function SelectPhoneCode({
</button>
{open && (
<div className="absolute z-10 bg-[#14161F] top-[100%] w-[calc(100%+4px)] -left-1 border border-t-0 p-1 rounded-b-lg border-[#3D425C]">
{phoneCodes
.filter(phonecode => phonecode !== currentPhoneCode)
.map(phoneCode => (
{getCountries()
.map(country => [getCountryCallingCode(country), country])
.filter(([phonecode]) => phonecode !== currentPhoneCode)
.map(([phoneCode, country]) => (
<p
key={phoneCode}
className="h4 cursor-pointer hover:bg-[#3D425C] py-1"
onClick={() => {
onClick(phoneCode);
onClick([phoneCode, country]);
setOpen(false);
}}
>
src/components/InfoCollecting.tsx
+1
View File
@@ -7,6 +7,7 @@ export function InfoCollecting() {
<span className="text-gradient">Собираем информацию</span>
<br /> о поведении пользователей
</Title>
<div className="flex"></div>
</div>
);
}
src/components/Promotion.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ function Feature({
return (
<div
ref={ref}
className="p-7 border-t border-x border-[#3D425C] last:border-b group"
className="p-7 border-t border-x border-[#3D425C] last:border-b group hover:bg-[url(/src/assets/promotion/Ellipse.png)] bg-no-repeat bg-center bg-cover"
>
<motion.div
className="flex justify-between gap-x-4 [clip-path:polygon(0%_0%,100%_0%,100%_calc(100%+28px),0%_calc(100%+28px))]"
yarn.lock
+61 -2
View File
@@ -569,6 +569,13 @@
dependencies:
"@types/react" "*"
"@types/react-phone-number-input@^3.1.37":
version "3.1.37"
resolved "https://registry.yarnpkg.com/@types/react-phone-number-input/-/react-phone-number-input-3.1.37.tgz#7781cbb31d693da99eff4dbfad5635021477cb77"
integrity sha512-N5/4VjptmOJWs4g5keMxjAuc8yQFr0fM+OSYfT8h0IQVm5kUiLAGNg+TGHy21Xzb1DB/PhDkiWnKcIREgr5VWA==
dependencies:
react-phone-number-input "*"
"@types/react@*", "@types/react@^18.3.3":
version "18.3.4"
resolved "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz"
@@ -842,6 +849,11 @@ chokidar@^3.5.3:
optionalDependencies:
fsevents "~2.3.2"
classnames@^2.5.1:
version "2.5.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
color-convert@^1.9.0:
version "1.9.3"
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -881,6 +893,11 @@ convert-source-map@^2.0.0:
resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz"
integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
country-flag-icons@^1.5.11:
version "1.5.13"
resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.5.13.tgz#963596b7fca6602b4b389a4e7b711ef3f33cc0b1"
integrity sha512-4JwHNqaKZ19doQoNcBjsoYA+I7NqCH/mC/6f5cBWvdKzcK5TMmzLpq3Z/syVHMHJuDGFwJ+rPpGizvrqJybJow==
cross-spawn@^7.0.0, cross-spawn@^7.0.2:
version "7.0.3"
resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -1271,6 +1288,18 @@ imurmurhash@^0.1.4:
resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
input-format@^0.3.10:
version "0.3.10"
resolved "https://registry.yarnpkg.com/input-format/-/input-format-0.3.10.tgz#e8a8855e2e89e3b1cd995333f6277c14865f0e35"
integrity sha512-5cFv/kOZD7Ch0viprVkuYPDkAU7HBZYBx8QrIpQ6yXUWbAQ0+RQ8IIojDJOf/RO6FDJLL099HDSK2KoVZ2zevg==
dependencies:
prop-types "^15.8.1"
intl-tel-input@^24.3.6:
version "24.3.6"
resolved "https://registry.yarnpkg.com/intl-tel-input/-/intl-tel-input-24.3.6.tgz#e1deb7158888479041d72a1ab442730b9c59abc7"
integrity sha512-27kLHadPt9dSAqc5zR0VHxW2zOBThQ8ctrouVNcm3s+0otyKA3dsQFyuYRnlTV5Kux/PPv7RejQf1Fw32xwUcA==
invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -1395,6 +1424,11 @@ levn@^0.4.1:
prelude-ls "^1.2.1"
type-check "~0.4.0"
libphonenumber-js@^1.11.5, libphonenumber-js@^1.11.7:
version "1.11.7"
resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.11.7.tgz#efe4fcf816e1982925e9c800d0013b0ee99b8283"
integrity sha512-x2xON4/Qg2bRIS11KIN9yCNYUjhtiEjNyptjX0mX+pyKHecxuJVLIpfX1lq9ZD6CrC/rB+y4GBi18c6CEcUR+A==
lilconfig@^2.1.0:
version "2.1.0"
resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz"
@@ -1427,7 +1461,7 @@ lodash.merge@^4.6.2:
resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
loose-envify@^1.0.0, loose-envify@^1.1.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -1517,7 +1551,7 @@ normalize-range@^0.1.2:
resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
object-assign@^4.0.1:
object-assign@^4.0.1, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -1671,6 +1705,15 @@ prettier@^3.3.3:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.13.1"
punycode@^2.1.0:
version "2.3.1"
resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
@@ -1697,6 +1740,22 @@ react-input-mask@^2.0.4:
invariant "^2.2.4"
warning "^4.0.2"
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-phone-number-input@*, react-phone-number-input@^3.4.5:
version "3.4.5"
resolved "https://registry.yarnpkg.com/react-phone-number-input/-/react-phone-number-input-3.4.5.tgz#9ceeccca59283eda614f516ac6040524e88e4e01"
integrity sha512-IlLTG0F/2P+72drqGNiYaguV3KOD4EVxQWGJ7YSofbOb6vyCWWLJqQIQsFFNpfrMrXzYtB3G+aHL9tprGfisFw==
dependencies:
classnames "^2.5.1"
country-flag-icons "^1.5.11"
input-format "^0.3.10"
libphonenumber-js "^1.11.5"
prop-types "^15.8.1"
react-refresh@^0.14.2:
version "0.14.2"
resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz"