From b39577d19138c7fcb7a9c70777db97256db73725 Mon Sep 17 00:00:00 2001 From: Tamara Date: Thu, 4 May 2023 02:25:35 +0300 Subject: [PATCH] =?UTF-8?q?=D0=BA=D0=B0=D1=81=D1=82=D0=BE=D0=BC=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20=D1=80=D0=B0=D0=B4=D0=B8=D0=BE=D0=BA=D0=BD=D0=BE?= =?UTF-8?q?=D0=BF=D0=BA=D0=B8=20=D0=B8=20=D1=81=D0=B2=D0=B8=D1=87-=D0=BF?= =?UTF-8?q?=D0=BE=D0=BB=D0=B7=D1=83=D0=BD=D0=BA=D0=B8=20=D0=B8=D1=81=D0=BF?= =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=D0=B0=20=D0=B8=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=8F=D0=BB=D0=B0=20=D0=B2=D0=BE=20=D0=B2?= =?UTF-8?q?=D1=81=D0=B5=D0=BC=20=D0=BF=D1=80=D0=BE=D0=B5=D0=BA=D1=82=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SwichResult.tsx | 65 ++++++++++++------- src/index.tsx | 2 +- src/pages/ContactFormPage/BranchingForm.tsx | 6 +- .../NewField/SwitchNewField.tsx | 7 +- src/pages/InstallQuiz/BannerInstall.tsx | 14 ++-- src/pages/InstallQuiz/VidjetInstall.tsx | 18 +++-- src/pages/Questions/branchingQuestions.tsx | 6 +- src/pages/{ => Result}/Setting.tsx | 18 ++--- src/pages/Result/SettingForm.tsx | 4 +- src/ui_kit/CustomSwitch.tsx | 59 ++++++++++------- src/ui_kit/RadioCheck.tsx | 24 +++++++ src/ui_kit/RadioIcon.tsx | 23 +++++++ 12 files changed, 172 insertions(+), 74 deletions(-) rename src/pages/{ => Result}/Setting.tsx (84%) create mode 100644 src/ui_kit/RadioCheck.tsx create mode 100644 src/ui_kit/RadioIcon.tsx diff --git a/src/components/SwichResult.tsx b/src/components/SwichResult.tsx index ab5db71b..ee4d93d3 100644 --- a/src/components/SwichResult.tsx +++ b/src/components/SwichResult.tsx @@ -1,12 +1,16 @@ -import { Box, IconButton, Typography } from "@mui/material"; +import {Box, FormControlLabel, IconButton, Typography} from "@mui/material"; import { useState } from "react"; +import CustomizedSwitch from "@ui_kit/CustomSwitch"; +import * as React from "react"; -type Props = { +interface Props { text: string; icon: any; -}; -export const SwitchSetting = ({ text, icon }: Props) => { - const [active, setActive] = useState(false); + onClick?: () => void +} + +export const SwitchSetting = ({ text, icon, onClick }: Props) => { + // const [active, setActive] = useState(false); return ( { alignItems: "center", }} > - + icon - {text} + {/*{text}*/} + } + label={text} + labelPlacement="start" + sx={{ + display: 'flex', + justifyContent: 'space-between', + color: "#9A9AAF", + width: "100%", + paddingRight: "15px" + }} + onClick={onClick} + + /> - setActive(!active)}> - - - - - + + + {/* setActive(!active)}>*/} + {/* */} + {/* */} + {/* */} + {/* */} + {/**/} ); }; diff --git a/src/index.tsx b/src/index.tsx index ae27bf09..b08312f6 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -21,7 +21,7 @@ import QuestionsPage from "./pages/Questions/QuestionsPage"; import ContactFormPage from "./pages/ContactFormPage/ContactFormPage"; import InstallQuiz from "./pages/InstallQuiz/InstallQuiz"; import {Result} from "./pages/Result/Result"; -import { Setting } from "./pages/Setting"; +import { Setting } from "./pages/Result/Setting"; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement diff --git a/src/pages/ContactFormPage/BranchingForm.tsx b/src/pages/ContactFormPage/BranchingForm.tsx index 05f1775b..cd701adb 100644 --- a/src/pages/ContactFormPage/BranchingForm.tsx +++ b/src/pages/ContactFormPage/BranchingForm.tsx @@ -13,6 +13,8 @@ import * as React from "react"; import CustomButton from "../../components/CustomButton"; import SelectableButton from "../../components/CreateQuiz/SelectableButton"; import {useState} from "react"; +import RadioCheck from "@ui_kit/RadioCheck"; +import RadioIcon from "@ui_kit/RadioIcon"; type LogicForm = "conditions" | "results"; @@ -111,8 +113,8 @@ export default function BranchingForm() { value={value} onChange={handleChangeRadio} > - } label="Все условия обязательны" /> - } label="Обязательно хотя бы одно условие" /> + } icon={}/>} label="Все условия обязательны" /> + } icon={}/>} label="Обязательно хотя бы одно условие" /> diff --git a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx index dd8dda31..b0217195 100644 --- a/src/pages/ContactFormPage/NewField/SwitchNewField.tsx +++ b/src/pages/ContactFormPage/NewField/SwitchNewField.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import NewFieldParent from "./NewFieldParent"; -import {FormControlLabel, Switch} from "@mui/material"; +import {FormControlLabel} from "@mui/material"; import SelectMask from "../SelectMask"; -import CustomSwitch from "@ui_kit/CustomSwitch"; +import CustomizedSwitch from "@ui_kit/CustomSwitch"; @@ -30,7 +30,7 @@ export default function SwitchNewField({switchState ='name'}: Props) { } + control={} label="Маска для телефона" labelPlacement="start" sx={{ @@ -42,6 +42,7 @@ export default function SwitchNewField({switchState ='name'}: Props) { }} /> + {SwitchMask ? : diff --git a/src/pages/InstallQuiz/BannerInstall.tsx b/src/pages/InstallQuiz/BannerInstall.tsx index 2486d7cd..c40b0566 100644 --- a/src/pages/InstallQuiz/BannerInstall.tsx +++ b/src/pages/InstallQuiz/BannerInstall.tsx @@ -19,6 +19,8 @@ import Accordion from "@mui/material/Accordion"; import AccordionSummary from "@mui/material/AccordionSummary"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import AccordionDetails from "@mui/material/AccordionDetails"; +import RadioCheck from "@ui_kit/RadioCheck"; +import RadioIcon from "@ui_kit/RadioIcon"; @@ -130,25 +132,25 @@ export default function BannerInstall () { } + control={} icon={}/>} label="Слева сверху" /> } + control={} icon={}/>} label="Справа сверху" /> } + control={} icon={}/>} label="Слева снизу" /> } + control={} icon={}/>} label="Справа снизу" /> @@ -185,13 +187,13 @@ export default function BannerInstall () { } + control={} icon={}/>} label="Сверху страницы" /> } + control={} icon={}/>} label="Снизу страницы" /> diff --git a/src/pages/InstallQuiz/VidjetInstall.tsx b/src/pages/InstallQuiz/VidjetInstall.tsx index 6bf08a89..f0bc5b32 100644 --- a/src/pages/InstallQuiz/VidjetInstall.tsx +++ b/src/pages/InstallQuiz/VidjetInstall.tsx @@ -13,10 +13,10 @@ import React, {useState} from "react"; import InstallQzOnSiteParent from "./InstallQzOnSiteParent"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import VidjetImg from "../../assets/VidjetImg.png" -import SelectableButton from "../../components/CreateQuiz/SelectableButton"; import LDownButton from "@icons/InstallQuizIcon/LDownButton"; import RDownButton from "@icons/InstallQuizIcon/RDownButton"; -import CustomRadio from "@ui_kit/CustomRadio"; +import RadioCheck from "@ui_kit/RadioCheck"; +import RadioIcon from "@ui_kit/RadioIcon"; @@ -104,13 +104,23 @@ export default function VidjetInstall () { } + control={ + } + icon={} + /> + } label="Да" /> } + control={ + } + icon={} + /> + } label="Нет" /> diff --git a/src/pages/Questions/branchingQuestions.tsx b/src/pages/Questions/branchingQuestions.tsx index d1427d99..b0faf453 100644 --- a/src/pages/Questions/branchingQuestions.tsx +++ b/src/pages/Questions/branchingQuestions.tsx @@ -21,6 +21,8 @@ import ArrowDown from "../../assets/icons/ArrowDownIcon"; import CustomButton from "../../components/CustomButton"; import { useState } from "react"; import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; +import RadioCheck from "@ui_kit/RadioCheck"; +import RadioIcon from "@ui_kit/RadioIcon"; export default function BranchingQuestions() { const theme = useTheme(); @@ -246,13 +248,13 @@ export default function BranchingQuestions() { } + control={} icon={}/>} label="Все условия обязательны" /> } + control={} icon={}/>} label="Обязательно хотя бы одно условие" /> diff --git a/src/pages/Setting.tsx b/src/pages/Result/Setting.tsx similarity index 84% rename from src/pages/Setting.tsx rename to src/pages/Result/Setting.tsx index 33b37d42..233adf76 100644 --- a/src/pages/Setting.tsx +++ b/src/pages/Result/Setting.tsx @@ -1,16 +1,16 @@ import { Box, Button, Typography, useTheme } from "@mui/material"; -import { SettingForm } from "./Result/SettingForm"; -import { DescriptionForm } from "../components/DescriptionForm/DescriptionForm"; -import { ResultListForm } from "../components/ResultListForm"; +import { SettingForm } from "./SettingForm"; +import { DescriptionForm } from "../../components/DescriptionForm/DescriptionForm"; +import { ResultListForm } from "../../components/ResultListForm"; -import CustomWrapper from "../components/CustomWrapper"; -import CustomButton from "../components/CustomButton"; -import BackButton from "../components/Button/BackButton"; +import CustomWrapper from "../../components/CustomWrapper"; +import CustomButton from "../../components/CustomButton"; +import BackButton from "../../components/Button/BackButton"; -import Plus from "../assets/icons/Plus"; -import Info from "../assets/icons/Info"; -import IconPlus from "../assets/icons/IconPlus"; +import Plus from "@icons/Plus"; +import Info from "@icons/Info"; +import IconPlus from "@icons/IconPlus"; export const Setting = () => { const theme = useTheme(); diff --git a/src/pages/Result/SettingForm.tsx b/src/pages/Result/SettingForm.tsx index ce031e97..2cd79368 100644 --- a/src/pages/Result/SettingForm.tsx +++ b/src/pages/Result/SettingForm.tsx @@ -29,8 +29,8 @@ const buttonSetting: { title: string; sx: SxProps; type: string }[] = [ ]; export const SettingForm = () => { - const [activeIndex, setActiveIndex] = useState(); - const [typeActive, setTypeActive] = useState(); + const [activeIndex, setActiveIndex] = useState(0); + const [typeActive, setTypeActive] = useState("toContactForm"); const active = (index: number, type: string) => { setActiveIndex(index); diff --git a/src/ui_kit/CustomSwitch.tsx b/src/ui_kit/CustomSwitch.tsx index 8bb53b12..92ef383b 100644 --- a/src/ui_kit/CustomSwitch.tsx +++ b/src/ui_kit/CustomSwitch.tsx @@ -1,24 +1,37 @@ -import {IconButton} from "@mui/material"; -import {useState} from "react"; +import {Switch, SwitchProps} from "@mui/material"; +import {styled} from "@mui/material/styles"; - -export default function CustomSwitch () { - const [active, setActive] = useState(false); - return ( - setActive(!active)}> - - - - - - ) -} \ No newline at end of file +export default styled((props: SwitchProps) => ( + )) +(() => ({ + width: 52, + height: 31, + padding: 0, + '& .MuiSwitch-switchBase': { + padding: 0, + margin: 2, + transitionDuration: '300ms', + '&.Mui-checked': { + transform: 'translateX(21px)', + color: '#fff', + '& + .MuiSwitch-track': { + backgroundColor: '#7E2AEA', + opacity: 1, + border: 0, + }, + }, + '&.Mui-disabled .MuiSwitch-thumb': { + color: '#9A9AAF', + boxShadow: 'none' + }, + }, + '& .MuiSwitch-thumb': { + boxSizing: 'border-box', + width: 27, + height: 27, + }, + '& .MuiSwitch-track': { + borderRadius: 40 / 2, + backgroundColor: '#9A9AAF' + }, + })); \ No newline at end of file diff --git a/src/ui_kit/RadioCheck.tsx b/src/ui_kit/RadioCheck.tsx new file mode 100644 index 00000000..311daded --- /dev/null +++ b/src/ui_kit/RadioCheck.tsx @@ -0,0 +1,24 @@ +import { Box, useTheme } from "@mui/material"; + + +export default function RadioCheck() { + const theme = useTheme(); + + return ( + + + + + + + ); +} \ No newline at end of file diff --git a/src/ui_kit/RadioIcon.tsx b/src/ui_kit/RadioIcon.tsx new file mode 100644 index 00000000..f406676e --- /dev/null +++ b/src/ui_kit/RadioIcon.tsx @@ -0,0 +1,23 @@ +import { Box, useTheme } from "@mui/material"; + + +export default function RadioIcon() { + const theme = useTheme(); + + return ( + + + + + + ); +} \ No newline at end of file