diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFieldSelectMobile.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFieldSelectMobile.tsx new file mode 100644 index 00000000..9cfafc70 --- /dev/null +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFieldSelectMobile.tsx @@ -0,0 +1,192 @@ +import * as React from "react"; +import { FC, useCallback, useMemo, useRef, useState } from "react"; +import { Avatar, MenuItem, Select, SelectChangeEvent, Typography, useMediaQuery, useTheme, Box } from "@mui/material"; +import arrow_down from "@icons/arrow_down.svg"; +import { MinifiedData } from "@/pages/IntegrationsPage/IntegrationsModal/types"; + +type CustomSelectProps = { + items: MinifiedData[] | []; + selectedItemId: string | null; + setSelectedItem: (value: string | null) => void; + handleScroll: () => void; +}; + +export const CurrentFieldSelect: FC = ({ items, selectedItemId, setSelectedItem, handleScroll }) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); + + const ref = useRef(null); + const [opened, setOpened] = useState(false); + + const toggleOpened = useCallback(() => { + setOpened((isOpened) => !isOpened); + }, []); + + const onScroll = useCallback((e: React.UIEvent) => { + const scrollHeight = e.currentTarget.scrollHeight; + const scrollTop = e.currentTarget.scrollTop; + const clientHeight = e.currentTarget.clientHeight; + const scrolledToBottom = scrollTop / (scrollHeight - clientHeight) > 0.9; + + if (scrolledToBottom) { + handleScroll(); + } + }, []); + + const currentItem = useMemo(() => items.find((item) => item.id === selectedItemId) || null, [selectedItemId, items]); + + const menuItems = useMemo(() => { + if (items.length !== 0) { + return items.map((item) => ( + + + + {item.title} + + + {item.subTitle} + + + + + )); + } + return ( + + нет данных + + ); + }, [items, selectedItemId]); + + return ( + + { + if (ref.current !== null) ref.current?.click(); + }} + > + + {currentItem?.title || "Выберите поле"} + + check + + + + ); +}; diff --git a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFields.tsx b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFields.tsx index 6d40ac74..cbb10bee 100644 --- a/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFields.tsx +++ b/src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFields.tsx @@ -1,6 +1,8 @@ import { CustomRadioGroup } from "@/components/CustomRadioGroup/CustomRadioGroup" -import { Box, Typography } from "@mui/material" +import {Box, Typography, useMediaQuery, useTheme} from "@mui/material" import { MinifiedData } from "../types"; +import {CustomSelect} from "@/components/CustomSelect/CustomSelect"; +import {CurrentFieldSelect} from "@/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFieldSelectMobile"; interface Props { items: MinifiedData[]; @@ -18,20 +20,23 @@ export const CurrentFields = ({ setCurrentField, setCurrentQuestion, }: Props) => { - + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); return ( Выберите поле + {isMobile && + { }}/> + } + {!isMobile && { }} activeScope={undefined} /> + } + Выберите вопрос для этого поля + {isMobile && + { }}/> + } + {!isMobile && { }} activeScope={undefined} /> + } + )