refactor file structure
This commit is contained in:
DmitriyB
@@ -0,0 +1,53 @@
|
||||
import { useEffect } from "react";
|
||||
import { calcSlice } from "../../store/reducers/calcSlice";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
import { InputSelect } from "../InputSelect/InputSelect";
|
||||
import { InputNumber } from "../InputNumber/InputNumber";
|
||||
import { AveragePriceApartment } from "./components/AveragePriceApartment/AveragePriceApartment";
|
||||
import { AverageSquareApartment } from "./components/AverageSquareApartment/AverageSquareApartment";
|
||||
import { ConsultationOffice } from "./components/ConsultationOffice/ConsultationOffice";
|
||||
import { ConsultationReserv } from "./components/ConsultationReserv/ConsultationReserv";
|
||||
import { Sales } from "./components/Sales/Sales";
|
||||
import { ResultBlock } from "../ResultBlock/ResultBlock";
|
||||
|
||||
const INITIAL_REGION = "e5b7edfb-17ec-475f-8631-bc796ad19909";
|
||||
|
||||
export const CalculatorComponent = ({ }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { handleSelectRegion, handleOptions, handleValue } = calcSlice.actions;
|
||||
const { selectedRegion, filteredList, squareRC } = useSelector(
|
||||
(state) => state.calcReducer
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(handleSelectRegion(INITIAL_REGION));
|
||||
dispatch(handleOptions());
|
||||
}, []);
|
||||
|
||||
const handleSelect = (element) => {
|
||||
dispatch(handleSelectRegion(element.id));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="input-container-main">
|
||||
<InputSelect
|
||||
option={filteredList}
|
||||
handleSelect={handleSelect}
|
||||
selectedValue={selectedRegion}
|
||||
></InputSelect>
|
||||
<InputNumber handleState={handleValue} number={squareRC}></InputNumber>
|
||||
<AverageSquareApartment></AverageSquareApartment>
|
||||
<AveragePriceApartment></AveragePriceApartment>
|
||||
</div>
|
||||
<div className="input-container-second">
|
||||
<ConsultationOffice></ConsultationOffice>
|
||||
<ConsultationReserv></ConsultationReserv>
|
||||
<Sales></Sales>
|
||||
<ResultBlock></ResultBlock>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { InputComponent } from "../InputComponent/InputComponent";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export const AveragePriceApartment = () => {
|
||||
const { priceAvarage, total } = useSelector((state) => state.calcReducer);
|
||||
|
||||
console.log(priceAvarage)
|
||||
const name = "priceAvarage";
|
||||
const min = 30000;
|
||||
const max = 200000;
|
||||
const large = true
|
||||
|
||||
return ( <div className="container">
|
||||
<span className="caption-input">Средняя стоимость 1 м2</span>
|
||||
<InputComponent
|
||||
min={min}
|
||||
large={large}
|
||||
max={max}
|
||||
name={name}
|
||||
inputClass={"input_type_one"}
|
||||
value={priceAvarage}
|
||||
></InputComponent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
import { InputComponent } from "../InputComponent/InputComponent";
|
||||
import { useSelector } from "react-redux";
|
||||
export const AverageSquareApartment = () => {
|
||||
const { squareApartment, total } = useSelector((state) => state.calcReducer);
|
||||
|
||||
const name = "squareApartment";
|
||||
const min = 1;
|
||||
const max = 200;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<span className="caption-input">Средняя площадь квартиры</span>
|
||||
<InputComponent
|
||||
min={min}
|
||||
max={max}
|
||||
name={name}
|
||||
inputClass={"input_type_one"}
|
||||
value={squareApartment}
|
||||
></InputComponent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
import { InputComponent } from "../InputComponent/InputComponent";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
|
||||
export const ConsultationOffice = ({}) => {
|
||||
|
||||
const { consultation, total } = useSelector((state) => state.calcReducer);
|
||||
|
||||
|
||||
const name = "consultation";
|
||||
const min = 1;
|
||||
const max = 100;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<span className="caption-input_type_two">Консультации в офисе</span>
|
||||
<InputComponent
|
||||
min={min}
|
||||
max={max}
|
||||
name={name}
|
||||
inputClass={'input_type_two'}
|
||||
value={consultation}
|
||||
></InputComponent>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
import { InputComponent } from "../InputComponent/InputComponent";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
|
||||
export const ConsultationReserv = ({ }) => {
|
||||
|
||||
|
||||
const { consultationReserv, total } = useSelector((state) => state.calcReducer);
|
||||
|
||||
|
||||
|
||||
const name = "consultationReserv";
|
||||
const min = 1;
|
||||
const max = 100;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<span className="caption-input_type_two">Консультации, закончившиеся бронью</span>
|
||||
<InputComponent
|
||||
min={min}
|
||||
max={max}
|
||||
name={name}
|
||||
inputClass={'input_type_two'}
|
||||
value={consultationReserv}
|
||||
></InputComponent>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import '../Region/Region.css'
|
||||
export const FederalCity = ({ item, select, setHover, handleSelect }) => {
|
||||
const isSelected = item.id === select;
|
||||
const isAlive = item.name === undefined;
|
||||
|
||||
const handleClick = ({ }) => {
|
||||
handleSelect(item);
|
||||
};
|
||||
|
||||
return <>
|
||||
<use
|
||||
className={isSelected ? "regionClass selected" : "regionClass"}
|
||||
onClick={handleClick}
|
||||
style={isAlive ? { pointerEvents: "none" } : { pointerEvents: "all" }}
|
||||
stroke="#567ECE" fill={isSelected ? "#2B5EC6" : "#EBEBEB"}
|
||||
id="1" x={item.x} y={item.y} xlinkHref="#crc1"> </use>
|
||||
|
||||
</>
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 17px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.caption-input {
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
/* or 19px */
|
||||
|
||||
/* Landing/Blue/Default */
|
||||
|
||||
color: #567ece;
|
||||
}
|
||||
|
||||
.caption-input_type_two {
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
/* or 19px */
|
||||
|
||||
/* Landing/Blue/Default */
|
||||
|
||||
color: #2b5ec6;
|
||||
}
|
||||
|
||||
.input_type_one {
|
||||
-webkit-appearance: none;
|
||||
background: #888888;
|
||||
height: 2px;
|
||||
cursor: pointer;
|
||||
background-image: linear-gradient(#567ece, #567ece);
|
||||
background-size: 70% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.input_type_two {
|
||||
-webkit-appearance: none;
|
||||
background: #888888;
|
||||
border-radius: 2px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
background-image: linear-gradient(#2b5ec6, #2b5ec6);
|
||||
background-size: 70% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.input_type_two::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input_type_two::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
background: #f7f7f7;
|
||||
/* Button/Blue/Default */
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
|
||||
border: 1.2px solid #2b5ec6;
|
||||
border-radius: 1.2px;
|
||||
}
|
||||
|
||||
.input_type_one::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input_type_one::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
background: #567ece;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.value-container {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
/* identical to box height, or 20px */
|
||||
|
||||
text-align: center;
|
||||
|
||||
/* Landing/Blue/Default */
|
||||
|
||||
color: #567ece;
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.value-container_type_two {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
/* identical to box height, or 20px */
|
||||
|
||||
text-align: center;
|
||||
|
||||
/* Landing/Blue/Default */
|
||||
color: #2b5ec6;
|
||||
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.number-input {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 39px;
|
||||
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 21.6px;
|
||||
line-height: 135%;
|
||||
/* or 29px */
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.number-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import "./InputComponent.css";
|
||||
import edit from "./edit.svg";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import CurrencyInput from "react-currency-input-field";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { calcSlice } from "../../../../store/reducers/calcSlice";
|
||||
|
||||
export const InputComponent = ({
|
||||
value,
|
||||
name,
|
||||
min,
|
||||
max,
|
||||
inputClass,
|
||||
large,
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const { handleValue } = calcSlice.actions;
|
||||
const [valid, setValid] = useState(false);
|
||||
const [valueInput, setValueInput] = useState(value);
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
|
||||
const inputRef = useRef();
|
||||
useEffect(() => {
|
||||
setValueInput(value);
|
||||
}, [value]);
|
||||
|
||||
const handleNumber = (number) => {
|
||||
if (!number) {
|
||||
return;
|
||||
}
|
||||
const num = Number(number.replace(/ /g, ""));
|
||||
return num;
|
||||
};
|
||||
|
||||
const handleTotalValues = (value, name) => {
|
||||
const toNum = parseInt(value);
|
||||
dispatch(handleValue({ name: name, value: toNum }));
|
||||
};
|
||||
|
||||
const handleState = (e) => {
|
||||
const { value, name } = e.target;
|
||||
|
||||
setValueInput(value);
|
||||
handleTotalValues(value, name);
|
||||
handleStyle();
|
||||
};
|
||||
|
||||
const handleValidity = (number) => {
|
||||
if (!(number < max && number > min && number !== 0)) {
|
||||
setValid(false);
|
||||
return false;
|
||||
} else {
|
||||
setValid(true);
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnValueChange = (value, name) => {
|
||||
const number = handleNumber(value);
|
||||
setValueInput(number);
|
||||
|
||||
handleStyle();
|
||||
|
||||
setValid(false);
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
setValueInput("");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Number.isNaN(number)) {
|
||||
const validity = handleValidity(number);
|
||||
|
||||
if (validity) {
|
||||
handleTotalValues(number, name);
|
||||
return;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFocusLeft = (e) => {
|
||||
setDisabled(false);
|
||||
const { name, value } = e.target;
|
||||
const number = handleNumber(value);
|
||||
if (number === 0 && number === undefined) {
|
||||
handleTotalValues(min, name);
|
||||
return;
|
||||
} else {
|
||||
if (!valid) {
|
||||
if (!(number < max)) {
|
||||
handleTotalValues(max, name);
|
||||
setValueInput(max);
|
||||
return;
|
||||
}
|
||||
if (number <= min) {
|
||||
handleTotalValues(min, name);
|
||||
setValueInput(min);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleStyle = () => {
|
||||
let width;
|
||||
if (valueInput < min) {
|
||||
return (width = "0%");
|
||||
}
|
||||
width = ((valueInput - min) * 100) / (max - min) + "% 100%";
|
||||
return width;
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
setDisabled(true);
|
||||
setTimeout(() => {
|
||||
inputRef.current.focus();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="number-container">
|
||||
<CurrencyInput
|
||||
ref={inputRef}
|
||||
disabled={!disabled}
|
||||
className="number-input"
|
||||
decimalsLimit={3}
|
||||
allowNegativeValue={false}
|
||||
allowDecimals={false}
|
||||
groupSeparator={" "}
|
||||
style={large ? { width: "78px" } : { width: "45px" }}
|
||||
min={min}
|
||||
max={max}
|
||||
name={name}
|
||||
value={valueInput}
|
||||
onBlur={(e) => handleFocusLeft(e)}
|
||||
onValueChange={(value, name) => handleOnValueChange(value, name)}
|
||||
/>
|
||||
<img
|
||||
onClick={handleFocus}
|
||||
className="edit-icon"
|
||||
alt="edit/изменить"
|
||||
src={edit}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-container">
|
||||
<input
|
||||
style={{
|
||||
backgroundSize: handleStyle(),
|
||||
}}
|
||||
type="range"
|
||||
className={inputClass}
|
||||
name={name}
|
||||
min={min}
|
||||
value={valueInput === "" ? 0 : valueInput}
|
||||
max={max}
|
||||
onChange={(e) => handleState(e)}
|
||||
></input>
|
||||
<div className="value-container">
|
||||
<span>{min}</span>
|
||||
<span>{max}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3.03353H2.7C2.03726 3.03353 1.5 3.57079 1.5 4.23353V20.5002C1.5 21.1629 2.03726 21.7002 2.7 21.7002H18.9667C19.6294 21.7002 20.1667 21.1629 20.1667 20.5002V11.2002M7.33333 15.8669V13.5335L15.5 5.36686L17.8333 7.7002L9.66667 15.8669H7.33333ZM17.8333 3.03353L20.1667 0.700195L22.5 3.03353L20.1667 5.36686L17.8333 3.03353Z" stroke="#F7F7F7" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 522 B |
@@ -0,0 +1,33 @@
|
||||
.input-number {
|
||||
width: 100%;
|
||||
font-family: "GilroyWebRegular";
|
||||
font-style: normal;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
background: rgba(86, 126, 206, 0.1);
|
||||
border-radius: 8px;
|
||||
color: #ebebeb;
|
||||
outline: none;
|
||||
border: none;
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
|
||||
.input-number-caption {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
/* identical to box height, or 20px */
|
||||
|
||||
/* Landing/Blue/Default */
|
||||
|
||||
color: #567ECE;
|
||||
}
|
||||
|
||||
.input-number[type="text"] {
|
||||
padding: 16px 16px 12px;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import "./InputNumber.css";
|
||||
import CurrencyInput from "react-currency-input-field";
|
||||
import { calcSlice } from "../../store/reducers/calcSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useState } from "react";
|
||||
|
||||
export const InputNumber = ({ number }) => {
|
||||
const [valid, setValid] = useState(false);
|
||||
const [valueInput, setValueInput] = useState(number);
|
||||
|
||||
const min = 1500;
|
||||
|
||||
const max = 1000000;
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { handleValue } = calcSlice.actions;
|
||||
|
||||
const handleTotalValues = (value, name) => {
|
||||
const toNum = parseInt(value);
|
||||
dispatch(handleValue({ name: name, value: toNum }));
|
||||
};
|
||||
|
||||
const handleValidity = (number) => {
|
||||
if (!(number < max && number > min && number !== 0)) {
|
||||
setValid(false);
|
||||
return false;
|
||||
} else {
|
||||
setValid(true);
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const handleNumber = (number) => {
|
||||
if (!number) {
|
||||
return;
|
||||
}
|
||||
const num = Number(number.replace(/ /g, ""));
|
||||
return num;
|
||||
};
|
||||
|
||||
const handleOnValueChange = (value, name) => {
|
||||
const number = handleNumber(value);
|
||||
setValueInput(number);
|
||||
|
||||
setValid(false);
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
setValueInput("");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Number.isNaN(number)) {
|
||||
const validity = handleValidity(number);
|
||||
|
||||
if (validity) {
|
||||
handleTotalValues(number, name);
|
||||
return;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFocusLeft = (e) => {
|
||||
const { name, value } = e.target;
|
||||
const number = handleNumber(value);
|
||||
if (number === 0 && number === undefined && number === '') {
|
||||
handleTotalValues(min, name);
|
||||
return;
|
||||
} else {
|
||||
if (!valid) {
|
||||
if (number <= min) {
|
||||
handleTotalValues(min, name);
|
||||
setValueInput(min);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span className="input-number-caption">
|
||||
Кв. м жилья в жилом комплексе
|
||||
</span>
|
||||
<CurrencyInput
|
||||
onBlur={(e) => handleFocusLeft(e)}
|
||||
value={valueInput}
|
||||
onValueChange={(value, name) => handleOnValueChange(value, name)}
|
||||
className="input-number"
|
||||
name="squareRC"
|
||||
decimalSeparator=" "
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.1667 10.5004L14 18.667L5.83337 10.5004" stroke="#F7F7F7" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 241 B |
@@ -0,0 +1,158 @@
|
||||
.select {
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 16px 16px 12px;
|
||||
gap: 74px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 24px */
|
||||
cursor: pointer;
|
||||
font-family: "GilroyWebRegular";
|
||||
width: 100%;
|
||||
border: none;
|
||||
color: #ebebeb;
|
||||
position: relative;
|
||||
height: 52px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(86, 126, 206, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.icon-select {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 13px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
height: 321px;
|
||||
}
|
||||
|
||||
.option {
|
||||
appearance: none;
|
||||
font-family: "GilroyWebRegular";
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 16px 16px 12px;
|
||||
gap: 74px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 24px */
|
||||
border: none;
|
||||
width: 100%;
|
||||
/* Landing/White */
|
||||
cursor: pointer;
|
||||
height: 52px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(86, 126, 206, 0.1);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
width: 100%;
|
||||
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.option-container {
|
||||
z-index: 99;
|
||||
height: auto;
|
||||
background: #141414;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-height: 256px;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.option-container::-webkit-scrollbar-track {
|
||||
background: #393c46;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.option-container::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.option-container::-webkit-scrollbar-thumb {
|
||||
background: #2b5ec6;
|
||||
border-radius: 8px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.option-name {
|
||||
color: #ebebeb;
|
||||
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.map-input {
|
||||
width: 99%;
|
||||
height: 99%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.map-hover-caption {
|
||||
cursor: pointer;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.map-hover {
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.map-caption {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14.4px;
|
||||
line-height: 130%;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
/* Landing/LightGray */
|
||||
|
||||
color: #888888;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { calcSlice } from "../../store/reducers/calcSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
import icon from "./Chevron.svg";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
import { MapComponent } from "../MapComponent/MapComponent";
|
||||
import "./InputSelect.css";
|
||||
export const InputSelect = ({ handleSelect, selectedValue, option }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { handleSearch, handleOptions } = calcSlice.actions;
|
||||
|
||||
const divInput = useRef();
|
||||
const [show, setShow] = useState(false);
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const transition = { duration: 0.3, ease: "easeOut" };
|
||||
|
||||
const iconAnimation = {
|
||||
open: {
|
||||
transform: "rotate(180deg)",
|
||||
},
|
||||
closed: { transform: "rotate(0deg)" },
|
||||
};
|
||||
const handleSelectRegion = (i) => {
|
||||
handleSelect(i);
|
||||
closeDropDown();
|
||||
};
|
||||
|
||||
const closeDropDown = () => {
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
const handleShow = ({}) => {
|
||||
if (!show) {
|
||||
setShow(true);
|
||||
} else {
|
||||
closeDropDown();
|
||||
setText("");
|
||||
}
|
||||
};
|
||||
|
||||
const onSearch = (e) => {
|
||||
setText(e.target.value);
|
||||
dispatch(handleSearch({ query: e.target.value }));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleClose = (e) => {
|
||||
dispatch(handleOptions());
|
||||
setText("");
|
||||
if (e.target !== divInput.current) {
|
||||
closeDropDown();
|
||||
}
|
||||
};
|
||||
document.addEventListener("click", handleClose);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("click", handleClose);
|
||||
};
|
||||
}, []);
|
||||
|
||||
console.log(show, "showDis ");
|
||||
return (
|
||||
<div style={{ position: "relative" }} className="">
|
||||
<motion.img
|
||||
transition={transition}
|
||||
variants={iconAnimation}
|
||||
animate={show ? "open" : "closed"}
|
||||
className="icon-select"
|
||||
src={icon}
|
||||
></motion.img>
|
||||
<div onClick={handleShow} className="select-container">
|
||||
<input
|
||||
ref={divInput}
|
||||
type="text"
|
||||
onChange={(e) => onSearch(e)}
|
||||
value={show ? text : selectedValue.name}
|
||||
placeholder={!show ? "" : selectedValue.name}
|
||||
className="select"
|
||||
></input>
|
||||
<div className="container">
|
||||
{show && (
|
||||
<>
|
||||
<div className="option-container">
|
||||
{option.map((i) => (
|
||||
<button
|
||||
onClick={() => handleSelectRegion(i)}
|
||||
key={i.id}
|
||||
value={i.price}
|
||||
className="option"
|
||||
>
|
||||
<p className="option-name"> {i.name}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="map-input">
|
||||
<MapComponent
|
||||
handleSelect={handleSelect}
|
||||
selectedValue={selectedValue}
|
||||
></MapComponent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="map-caption">
|
||||
Данные будут установлены в соответсвии со средними показателями по
|
||||
выбранному региону.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,95 @@
|
||||
.region-name-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.region-selected {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.region-pointer {
|
||||
background: #567ece;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.region-name {
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
line-height: 100%;
|
||||
color: #ebebeb;
|
||||
}
|
||||
|
||||
.region-hover {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.region-pointer-hover {
|
||||
background: #828a9a;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.region-name-hover {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
|
||||
text-align: center;
|
||||
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.button-block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
font-family: "GilroyWebRegular";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 32px 8px;
|
||||
gap: 8px;
|
||||
width: 156px;
|
||||
height: 42px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
color: #ebebeb;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.button-confirm {
|
||||
background: #567ece;
|
||||
}
|
||||
|
||||
.button-back {
|
||||
border: 1px solid #454545;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import "./MapComponent.css";
|
||||
import { borders, federalCities, regions } from "../../utils/array";
|
||||
import { Region } from "../Region/Region";
|
||||
import { FederalCity } from "../FederalCIty/FederalCity";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export const MapComponent = ({
|
||||
selectedValue,
|
||||
handleSelect,
|
||||
open,
|
||||
setOpen,
|
||||
}) => {
|
||||
const [select, setSelect] = useState(selectedValue.id);
|
||||
const [display, setDisplay] = useState(selectedValue.name);
|
||||
|
||||
useEffect(() => {
|
||||
setSelect(selectedValue.id);
|
||||
setDisplay(selectedValue.name);
|
||||
}, [handleSelect]);
|
||||
|
||||
return (
|
||||
<div className="map-container">
|
||||
{open && (
|
||||
<div className="region-name-block">
|
||||
<div className="region-selected">
|
||||
{display && (
|
||||
<>
|
||||
{" "}
|
||||
<div className="region-pointer"></div>
|
||||
<span className="region-name">{display}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<svg
|
||||
viewBox="0 0 1064 555"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_2181_13226)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d={borders.d}
|
||||
fill="url(#paint0_linear_235_220192)"
|
||||
></path>
|
||||
{regions.map((i) => (
|
||||
<Region
|
||||
handleSelect={handleSelect}
|
||||
select={select}
|
||||
key={i.id}
|
||||
element={i}
|
||||
d={i.d}
|
||||
></Region>
|
||||
))}
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_235_220192"
|
||||
x1="-12.1689"
|
||||
y1="230.282"
|
||||
x2="188.847"
|
||||
y2="-168.875"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.143366" stop-color="#D375FF" />
|
||||
<stop offset="0.771682" stop-color="#798FFF" />
|
||||
</linearGradient>
|
||||
|
||||
<clipPath id="clip0_2181_13226">
|
||||
<rect width="1063.48" height="554.495" />
|
||||
</clipPath>
|
||||
<circle cx="7" cy="7" r="6.5" id="crc1" />
|
||||
</defs>
|
||||
{federalCities.map((item) => (
|
||||
<FederalCity
|
||||
select={select}
|
||||
handleSelect={handleSelect}
|
||||
key={item.id}
|
||||
item={item}
|
||||
></FederalCity>
|
||||
))}
|
||||
</svg>
|
||||
{open && (
|
||||
<div className="button-block">
|
||||
<button onClick={() => setOpen(false)} className="button button-back">
|
||||
Назад
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setOpen(false)}
|
||||
className="button-confirm button"
|
||||
>
|
||||
Продолжить
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,15 @@
|
||||
.regionClass {
|
||||
transition: 0.3s;
|
||||
pointer-events: none;
|
||||
};
|
||||
|
||||
/*
|
||||
.regionClass:not(.selected):hover {
|
||||
fill: rgba(106, 146, 226, 0.2);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.regionNoPointer {
|
||||
}
|
||||
|
||||
*/
|
||||
@@ -0,0 +1,27 @@
|
||||
import "./Region.css";
|
||||
import { useState } from "react";
|
||||
|
||||
export const Region = ({ d, element, handleSelect, select }) => {
|
||||
const isSelected = element.id === select;
|
||||
const isAlive = element.name === undefined;
|
||||
|
||||
const handleClick = ({ }) => {
|
||||
handleSelect(element);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<path
|
||||
className={isSelected ? "regionClass selected" : "regionClass"}
|
||||
style={isAlive ? { pointerEvents: "none" } : { pointerEvents: "all" }}
|
||||
onClick={handleClick}
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d={d}
|
||||
fill={isSelected ? "#2B5EC6" : "#141414"}
|
||||
>
|
||||
</path>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,144 @@
|
||||
.result-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.rub-container {}
|
||||
|
||||
.numbers-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.result-block {
|
||||
height: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 46px;
|
||||
}
|
||||
|
||||
.result-number {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 54px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 58px */
|
||||
margin: 0;
|
||||
color: #219653;
|
||||
}
|
||||
|
||||
.result-caption {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 29px */
|
||||
margin: 0;
|
||||
color: #219653;
|
||||
}
|
||||
|
||||
.result-number_one {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 24px */
|
||||
|
||||
/* Gray/Accent */
|
||||
|
||||
color: #393c46;
|
||||
}
|
||||
|
||||
.result-caption_one {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 12px */
|
||||
margin-bottom: 6px;
|
||||
/* Gray/Accent */
|
||||
|
||||
color: #393c46;
|
||||
}
|
||||
|
||||
.result-diff-caption {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 20px */
|
||||
|
||||
/* White */
|
||||
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
.diff {
|
||||
background: linear-gradient(44.34deg, #D375FF 17.64%, #798FFF 73.73%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 600;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.caption-off {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.title-result {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 130%;
|
||||
/* or 36px */
|
||||
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.button-result {
|
||||
padding: 16px 40px 14px;
|
||||
|
||||
width: 315px;
|
||||
height: 55px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
/* identical to box height, or 20px */
|
||||
|
||||
letter-spacing: 0.01em;
|
||||
font-feature-settings: "tnum" on, "lnum" on;
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
cursor: pointer;
|
||||
/* Inside auto layout */
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.button_on {
|
||||
transition: background ease-in 0.2s;
|
||||
background: #2b5ec6;
|
||||
}
|
||||
|
||||
.button_off {
|
||||
transition: background ease-in 0.2s;
|
||||
|
||||
background: #393c46;
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
import "./ResultBlock.css";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useEffect, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
export const ResultBlock = () => {
|
||||
const { timeUpdated, timeDefalut, priceDefault, priceUpdated } = useSelector(
|
||||
(state) => state.calculationReducer
|
||||
);
|
||||
|
||||
const [turn, setTurn] = useState(false);
|
||||
|
||||
const [showText, setShowText] = useState(false)
|
||||
|
||||
const transition = { duration: 0.35, ease: "easeIn" };
|
||||
|
||||
const colorAnimationValue = {
|
||||
open: { color: "#D375FF", fontSize: "54px", marginRight: "16px" },
|
||||
closed: { color: "#393c46", fontSize: "24px", marginRight: "8px" },
|
||||
};
|
||||
|
||||
|
||||
const colorAnimationCaption = {
|
||||
open: { color: "#D375FF", fontSize: "24px" },
|
||||
closed: { color: "#393c46", fontSize: "12px" },
|
||||
};
|
||||
|
||||
const colorAnimationValueGreen = {
|
||||
open: { color: "#219653", fontSize: "54px", marginRight: "16px" },
|
||||
closed: { color: "#393c46", fontSize: "24px", marginRight: "8px" },
|
||||
};
|
||||
|
||||
const colorAnimationCaptionGreen = {
|
||||
open: { color: "#219653", fontSize: "24px" },
|
||||
closed: { color: "#393c46", fontSize: "12px" },
|
||||
};
|
||||
|
||||
const handleMouthPostifx = (num) => {
|
||||
num = num % 100;
|
||||
|
||||
if (num > 19) {
|
||||
num = num % 10;
|
||||
}
|
||||
|
||||
switch (num) {
|
||||
case 1:
|
||||
return 0;
|
||||
|
||||
case 2:
|
||||
case 3:
|
||||
case 4:
|
||||
return 1;
|
||||
|
||||
default:
|
||||
return 2;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMounth = (num, type) => {
|
||||
const monthesPostfixes = ["месяц", "месяца", "месяцев"];
|
||||
|
||||
let postfix = handleMouthPostifx(num);
|
||||
let value1 = monthesPostfixes[postfix];
|
||||
|
||||
return handleNode(num, value1, type);
|
||||
};
|
||||
|
||||
const shortenNumRu = (num, type) => {
|
||||
if (isNaN(num)) throw new Error(num + " is not a Number!");
|
||||
let currency = {
|
||||
0: "",
|
||||
1: "тыс. руб.",
|
||||
2: "млн. руб",
|
||||
3: "млрд. руб",
|
||||
};
|
||||
let thousands = Math.floor((("" + num).length - 1) / 3);
|
||||
let coef = 1000 ** thousands;
|
||||
|
||||
let value = (num / coef).toFixed(1);
|
||||
let value1 = currency[thousands];
|
||||
|
||||
return handleNode(value, value1, type);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleNode = (value, value1, type) => {
|
||||
if (type === 1) {
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence initial={false}>
|
||||
{turn && (<> <motion.span
|
||||
key={1}
|
||||
transition={transition}
|
||||
variants={colorAnimationValueGreen}
|
||||
animate={turn ? "open" : "closed"}
|
||||
className="result-number_one"
|
||||
>
|
||||
{value}
|
||||
</motion.span>
|
||||
<motion.span
|
||||
key={2}
|
||||
|
||||
transition={transition}
|
||||
variants={colorAnimationCaptionGreen}
|
||||
animate={turn ? "open" : "closed"}
|
||||
className="result-caption_one"
|
||||
>
|
||||
{value1}
|
||||
</motion.span>
|
||||
</>)}
|
||||
</AnimatePresence>
|
||||
|
||||
</>
|
||||
);
|
||||
} else if (type === 0) {
|
||||
return (
|
||||
<>
|
||||
<motion.span
|
||||
initial={false}
|
||||
transition={transition}
|
||||
variants={colorAnimationValue}
|
||||
animate={!turn ? "open" : "closed"}
|
||||
className="result-number_one"
|
||||
>
|
||||
{value}
|
||||
</motion.span>
|
||||
<motion.span
|
||||
initial={false}
|
||||
transition={transition}
|
||||
variants={colorAnimationCaption}
|
||||
animate={!turn ? "open" : "closed"}
|
||||
className="result-caption_one"
|
||||
>
|
||||
{value1}
|
||||
</motion.span>
|
||||
</>
|
||||
);
|
||||
} else if (type === 3) {
|
||||
return (
|
||||
<span className="result-diff-caption">
|
||||
На <span className="diff">{`${value} ${value1}`}</span> вы сократили
|
||||
срок реализации проекта
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span className="result-diff-caption">
|
||||
На <span className="diff">{`${value} ${value1}`}</span> в месяц вы
|
||||
заработали больше с помощью нашего инструмента продаж
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-container">
|
||||
<span className="title-result">Результаты расчета</span>
|
||||
<div className="result-block" style={!showText ? { justifyContent: 'space-between' } : { justifyContent: "space-between" }}>
|
||||
<div className="result-container">
|
||||
<div style={!turn ? { gap: "0" } : { gap: "16px" }} className="numbers-container">
|
||||
<div>
|
||||
{handleMounth(Math.round(timeUpdated), 1)}
|
||||
</div>
|
||||
<div
|
||||
style={turn ? { paddingBottom: "6px" } : { paddingBottom: "0px" }}
|
||||
className="padding"
|
||||
>
|
||||
{handleMounth(Math.round(timeDefalut), 0)}
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{!turn && (<motion.div key={3} initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={transition}
|
||||
exit={{ opacity: 0 }}
|
||||
className="caption-off">На реализацию проекта</motion.div>)}
|
||||
|
||||
{turn && (<motion.div key={4} initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={transition}
|
||||
exit={{ opacity: 0 }}>
|
||||
{handleMounth(Math.floor(timeDefalut - timeUpdated), 4)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
<div className="result-container">
|
||||
<div style={!turn ? { gap: "0" } : { gap: "16px" }}
|
||||
className="numbers-container">
|
||||
<div
|
||||
className="rub-container"
|
||||
>
|
||||
{shortenNumRu(Math.round(priceUpdated), 1)}
|
||||
</div>
|
||||
<div
|
||||
key={2}
|
||||
style={turn ? { paddingBottom: "6px" } : { paddingBottom: "0px" }}
|
||||
className="rub-container"
|
||||
>
|
||||
{shortenNumRu(Math.round(priceDefault), 0)}
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{!turn && (<motion.div transition={transition}
|
||||
onAnimationComplete={definition => {
|
||||
setShowText(definition.opacity === 0 ? true : false)
|
||||
}}
|
||||
key={1} initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="caption-off">На реализацию проекта</motion.div>)}
|
||||
{turn && (<motion.div transition={transition}
|
||||
key={2} initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
|
||||
{shortenNumRu(Math.floor(priceUpdated - priceDefault), 4)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className={
|
||||
turn ? "button-result button_on" : "button-result button_off"
|
||||
}
|
||||
onClick={() => setTurn((prev) => !prev)}
|
||||
>
|
||||
{!turn ? "Использовать инструмент" : "Отключить инструмент"}
|
||||
</button>
|
||||
</div >
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
import { InputComponent } from "../InputComponent/InputComponent";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
|
||||
export const Sales = ({ }) => {
|
||||
|
||||
const { sales, total } = useSelector((state) => state.calcReducer);
|
||||
|
||||
|
||||
const name = "sales";
|
||||
const min = 1;
|
||||
const max = 100;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<span className="caption-input_type_two">Продажи</span>
|
||||
<InputComponent
|
||||
min={min}
|
||||
max={max}
|
||||
name={name}
|
||||
inputClass={'input_type_two'}
|
||||
value={sales}
|
||||
></InputComponent>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user