zojgame/IRTH-Touch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

login modal

Browse Source
This commit is contained in:
zojgame
2024-06-04 15:46:19 +05:00
parent eb706d7817
commit 99a9885ef0
10 changed files with 152 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -19,6 +19,7 @@
"react-dom": "^18.2.0",
"react-full-screen": "^1.1.1",
"react-image-marker": "^1.2.0",
"react-number-format": "^5.4.0",
"react-range-slider-input": "^3.0.7",
"react-router-dom": "^6.23.1",
"react-swipeable": "^7.0.1",
src/calc/formatNumber.ts
+19
View File
@@ -0,0 +1,19 @@
const formatNumber = (
num: number,
separator: string,
countToSeparate: number,
firstIndexSeparator: number
) => {
const notFormated = [];
const text = `${num}`;
for (let i = 0; i < text.length; i++) {
if (i % countToSeparate === firstIndexSeparator) {
notFormated.push(separator);
}
notFormated.push(text[i]);
}
return notFormated.join("");
};
export { formatNumber };
src/components/MasterSelector.tsx
+38
View File
@@ -0,0 +1,38 @@
import { NumericFormat, PatternFormat } from "react-number-format";
import ChevronDownIcon from "./icons/ChevronDownIcon";
interface IOptions {
id: string;
value: string;
placeholder: string;
}
interface MasterSelectorProps {
title: string;
isError?: false;
options?: IOptions[];
}
// const formatPhone =
const MasterSelector = ({ title }: MasterSelectorProps) => {
return (
<div className="pb-8">
<p className="text-[#0D192266] text-caption-m font-semibold pb-2">
{title}
</p>
<div className="bg-white rounded-lg flex px-4 py-[14px] items-center border">
<div className="text-m text-[#00BED7] pr-2 border-r flex items-center gap-2">
+971 <ChevronDownIcon width="20" height="20" />
</div>
<PatternFormat
format="## #### ###"
placeholder="XX XXXX XX XX"
className="focus:outline-none pl-4"
/>
</div>
</div>
);
};
export default MasterSelector;
src/components/MultiRangeSlider.tsx
+23 -8
View File
@@ -1,5 +1,6 @@
import { useRef, useEffect } from "react";
import RangeSlider from "react-range-slider-input";
import { NumericFormat } from "react-number-format";
import "./multiRangeSlider.css";
import { IMultirangeSlider } from "../types/multirangeSlider";
@@ -20,7 +21,7 @@ const MultiRangeSlider = ({
};
const handleOnFirstInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = Number(e.target.value);
const value = Number(e.target.value.split(",").join(""));
if (
value >= multirangeSlider.minValue &&
value <= multirangeSlider.maxValue
@@ -36,7 +37,7 @@ const MultiRangeSlider = ({
const handleOnSecondInputChange = (
e: React.ChangeEvent<HTMLInputElement>
) => {
const value = Number(e.target.value);
const value = Number(e.target.value.split(",").join(""));
if (
value >= multirangeSlider.minValue &&
value <= multirangeSlider.maxValue
@@ -71,22 +72,36 @@ const MultiRangeSlider = ({
<div className="">
<div className="flex justify-between p-3 bg-white rounded-2xl relative flex-col">
<div className="flex justify-between">
<input
{/* <input
ref={firstInputRef}
key={multirangeSlider.startValue}
type="number"
type="string"
onChange={handleOnFirstInputChange}
defaultValue={formatNumber(multirangeSlider.startValue, ",", 3, 1)}
className="focus:outline-none input_number w-1/2"
/> */}
<NumericFormat
thousandSeparator=","
key={multirangeSlider.startValue}
onChange={handleOnFirstInputChange}
defaultValue={multirangeSlider.startValue}
className="focus:outline-none input_number w-1/2"
/>
<input
<NumericFormat
thousandSeparator=","
key={multirangeSlider.endValue}
onChange={handleOnSecondInputChange}
defaultValue={multirangeSlider.endValue}
className="focus:outline-none input_number w-1/2 text-right"
/>
{/* <input
ref={secondInputRef}
onChange={handleOnSecondInputChange}
key={multirangeSlider.endValue}
type="number"
defaultValue={multirangeSlider.endValue}
type="string"
defaultValue={formatNumber(multirangeSlider.endValue, ",", 3, 1)}
className="focus:outline-none appearance-none input_number text-right w-1/2"
/>
/> */}
</div>
<RangeSlider
min={multirangeSlider.minValue}
src/components/header/Auth/Auth.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ interface AuthProps {
isAuth?: boolean;
}
const Auth = ({ isAuth = true }: AuthProps) => {
const Auth = ({ isAuth = false }: AuthProps) => {
const userName = "Full Name";
return (
src/components/header/Auth/AuthDesktop.tsx
+9 -1
View File
@@ -1,4 +1,6 @@
import useModal from "../../../store/useModal";
import Button from "../../Button";
import LoginModal from "../../modals/LoginModal";
interface AuthProps {
isAuth: boolean;
@@ -6,6 +8,12 @@ interface AuthProps {
}
const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
const { setModal } = useModal();
const handleOnLoginBtnClick = () => {
setModal(<LoginModal />);
};
return (
<div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end text-s">
{isAuth ? (
@@ -22,7 +30,7 @@ const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
</div>
</>
) : (
<Button buttonType="cta" text="Login" />
<Button buttonType="cta" text="Login" onClick={handleOnLoginBtnClick} />
)}
</div>
);
src/components/icons/ChevronDownIcon.tsx
+9 -3
View File
@@ -1,13 +1,19 @@
interface ChevronDownIconProps {
className?: string;
width?: string;
height?: string;
}
const ChevronDownIcon = ({ className }: ChevronDownIconProps) => {
const ChevronDownIcon = ({
className,
width = "24",
height = "24",
}: ChevronDownIconProps) => {
return (
<svg
className={`${!className ? "" : className}`}
width="24"
height="24"
width={width}
height={height}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
src/components/modals/LoginModal.tsx
+39
View File
@@ -0,0 +1,39 @@
import useModal from "../../store/useModal";
import Button from "../Button";
import MasterSelector from "../MasterSelector";
import CrossIcon from "../icons/CrossIcon";
const LoginModal = () => {
const { setModal } = useModal();
const handleOnCloseClick = () => {
setModal(null);
};
return (
<div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11 items-center">
<div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
<div className="w-full flex justify-between items-center border-b pb-6">
<h2 className="text-[#0D1922] text-subheadline-m font-semibold">
Login
</h2>
<button onClick={handleOnCloseClick}>
<CrossIcon />
</button>
</div>
<div className="flex flex-col pt-6">
<MasterSelector title="Contact number" />
<Button text="Login" buttonType="cta" className="justify-center" />
<div className="font-semibold text-caption-m flex justify-center items-center text-[#0D192266] gap-1 pt-4">
Don`t have an account?{" "}
<p className="text-[#00BED7] select-none cursor-pointer">
Create one
</p>
</div>
</div>
</div>
</div>
);
};
export default LoginModal;
src/components/modals/MasterplanFilters.tsx
+5 -1
View File
@@ -41,7 +41,11 @@ const MasterplanFilters = () => {
const updatedSliders = sliders.map((slider) => {
if (sliderId !== slider.id) return slider;
return { ...slider, startValue: e[0], endValue: e[1] };
return {
...slider,
startValue: e[0],
endValue: e[1],
};
});
setSliders(updatedSliders);
yarn.lock
+8 -1
View File
@@ -2115,7 +2115,7 @@ promise-worker-transferable@^1.0.4:
is-promise "^2.1.0"
lie "^3.0.2"
prop-types@^15.6.0, prop-types@^15.6.2:
prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -2173,6 +2173,13 @@ react-is@^16.13.1:
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-number-format@^5.4.0:
version "5.4.0"
resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-5.4.0.tgz#8c1e97add1970d1a2f372ca286bcdaa49632ba5c"
integrity sha512-NWdICrqLhI7rAS8yUeLVd6Wr4cN7UjJ9IBTS0f/a9i7UB4x4Ti70kGnksBtZ7o4Z7YRbvCMMR/jQmkoOBa/4fg==
dependencies:
prop-types "^15.7.2"
react-range-slider-input@^3.0.7:
version "3.0.7"
resolved "https://registry.npmjs.org/react-range-slider-input/-/react-range-slider-input-3.0.7.tgz"