diff --git a/package.json b/package.json index f71414a..b008666 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/calc/formatNumber.ts b/src/calc/formatNumber.ts new file mode 100644 index 0000000..300190a --- /dev/null +++ b/src/calc/formatNumber.ts @@ -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 }; diff --git a/src/components/MasterSelector.tsx b/src/components/MasterSelector.tsx new file mode 100644 index 0000000..35c4000 --- /dev/null +++ b/src/components/MasterSelector.tsx @@ -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 ( +
+

+ {title} +

+
+
+ +971 +
+ +
+
+ ); +}; + +export default MasterSelector; diff --git a/src/components/MultiRangeSlider.tsx b/src/components/MultiRangeSlider.tsx index 18aa4ad..315bdc7 100644 --- a/src/components/MultiRangeSlider.tsx +++ b/src/components/MultiRangeSlider.tsx @@ -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) => { - 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 ) => { - 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 = ({
- */} + - + {/* + /> */}
{ +const Auth = ({ isAuth = false }: AuthProps) => { const userName = "Full Name"; return ( diff --git a/src/components/header/Auth/AuthDesktop.tsx b/src/components/header/Auth/AuthDesktop.tsx index fc03351..dc67375 100644 --- a/src/components/header/Auth/AuthDesktop.tsx +++ b/src/components/header/Auth/AuthDesktop.tsx @@ -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(); + }; + return (
{isAuth ? ( @@ -22,7 +30,7 @@ const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
) : ( -
); diff --git a/src/components/icons/ChevronDownIcon.tsx b/src/components/icons/ChevronDownIcon.tsx index 670e128..56da840 100644 --- a/src/components/icons/ChevronDownIcon.tsx +++ b/src/components/icons/ChevronDownIcon.tsx @@ -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 ( { + const { setModal } = useModal(); + const handleOnCloseClick = () => { + setModal(null); + }; + + return ( +
+
+
+

+ Login +

+ +
+
+ + +
+
+
+ ); +}; + +export default LoginModal; diff --git a/src/components/modals/MasterplanFilters.tsx b/src/components/modals/MasterplanFilters.tsx index 9db653c..cbe5d78 100644 --- a/src/components/modals/MasterplanFilters.tsx +++ b/src/components/modals/MasterplanFilters.tsx @@ -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); diff --git a/yarn.lock b/yarn.lock index 81e4721..bedd669 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"