мобилка для 6 шага амо

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<CustomSelectProps> = ({ items, selectedItemId, setSelectedItem, handleScroll }) => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down(600));
+
+    const ref = useRef<HTMLDivElement | null>(null);
+    const [opened, setOpened] = useState<boolean>(false);
+
+    const toggleOpened = useCallback(() => {
+        setOpened((isOpened) => !isOpened);
+    }, []);
+
+    const onScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+        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) => (
+                <MenuItem
+                    key={item.id}
+                    value={item.id}
+                    sx={{
+                        padding: "6px 0",
+                        zIndex: 5,
+                        borderTop: "1px solid rgba(154, 154, 175, 0.1)",
+                        width: "auto",
+                    }}
+                >
+                    <Box
+                        sx={{
+                            fontSize: "16px",
+                            color: "#4D4D4D",
+                            display: "flex",
+                            flexDirection: isMobile ? "column" : "row",
+                            justifyContent: "space-evenly",
+                            width: "100%",
+                        }}
+                    >
+                        <Typography
+                            sx={{
+                                width: "33%",
+                                borderRight: isMobile ? "none" : "1px solid  rgba(154, 154, 175, 0.1)",
+                                padding: isMobile ? "5px 0 5px 20px" : "10px 0 10px 20px",
+                            }}
+                        >
+                            {item.title}
+                        </Typography>
+                        <Typography
+                            sx={{
+                                width: "33%",
+                                borderRight: isMobile ? "none" : "1px solid  rgba(154, 154, 175, 0.1)",
+                                padding: isMobile ? "5px 0 5px 20px" : "10px 0 10px 20px",
+                                color: isMobile ? "#9A9AAF" : "#4D4D4D",
+                            }}
+                        >
+                            {item.subTitle}
+                        </Typography>
+
+                    </Box>
+                </MenuItem>
+            ));
+        }
+        return (
+            <MenuItem
+                key={"-1"}
+                disabled
+                sx={{ padding: "12px", zIndex: 2 }}
+            >
+                нет данных
+            </MenuItem>
+        );
+    }, [items, selectedItemId]);
+
+    return (
+        <Box>
+            <Box
+                sx={{
+                    zIndex: 0,
+                    position: "relative",
+                    width: "100%",
+                    height: "56px",
+                    padding: "5px",
+                    color: "#4D4D4D",
+                    border: `2px solid ${theme.palette.common.white}`,
+                    borderRadius: "12px",
+                    background: "#EFF0F5",
+                    display: "flex",
+                    alignItems: "center",
+                    cursor: "pointer",
+                }}
+                onClick={() => {
+                    if (ref.current !== null) ref.current?.click();
+                }}
+            >
+                <Typography
+                    sx={{
+                        marginLeft: isMobile ? "10px" : "20px",
+                        fontWeight: "400" ,
+                        fontSize: "18px",
+
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        flexGrow: 1,
+                    }}
+                >
+                    {currentItem?.title || "Выберите поле"}
+                </Typography>
+                <img
+                    src={arrow_down}
+                    alt="check"
+                    style={{
+                        position: "absolute",
+                        top: "50%",
+                        right: "10px",
+                        transform: `translateY(-50%) rotate(${opened ? "180deg" : "0deg"}`,
+                        height: "36px",
+                        width: "36px",
+                    }}
+                    className={`select-icon ${opened ? "opened" : ""}`}
+                />
+            </Box>
+            <Select
+                ref={ref}
+                className="select"
+                value={selectedItemId || ""}
+                open={opened}
+                MenuProps={{
+                    disablePortal: true,
+                    PaperProps: {
+                        onScroll: onScroll,
+                        style: {
+                            zIndex: 2,
+                            minWidth: undefined,
+                            maxHeight: "300px",
+                            overflow: "auto",
+                            overflowX: "auto",
+                            paddingTop: 0,
+                            marginTop: "-50px",
+                            borderRadius: "12px",
+                            border: "1px solid",
+                            maxWidth: "calc(100% - 104px)",
+                            left: "52px",
+                            boxShadow: "none"
+                        },
+                    },
+                }}
+                sx={{
+                    display: "block",
+                    "& .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input": {
+                        display: "none",
+                    },
+                    "& .MuiSelect-icon": {
+                        display: "none",
+                    },
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        border: 0,
+                    },
+                    "& .MuiMenu-root.MuiModal-root": {
+                        zIndex: 0,
+                    },
+                }}
+                onChange={({ target }: SelectChangeEvent<string>) => setSelectedItem(target.value)}
+                onClick={toggleOpened}
+            >
+                {menuItems}
+            </Select>
+        </Box>
+    );
+};

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 (
         <Box
             sx={{
                 display: "inline-flex",
-                justifyContent: "space-between",
+                justifyContent: isMobile ? undefined : "space-between",
                 width: "100%",
-                height: "326px"
+                height: "326px",
+                flexDirection: isMobile ? "column" : undefined,
+                gap: isMobile ? "30px" : undefined
             }}
         >
             <Box
                 sx={{
                     mr: "22px",
-                    width: "50%"
+                    width: isMobile ? "100%" : "50%",
                 }}
             >
                 <Typography
@@ -45,6 +50,14 @@ export const CurrentFields = ({
 
                     }}
                 >Выберите поле</Typography>
+                {isMobile &&
+                    <CurrentFieldSelect
+                        items={fieldsItems}
+                        selectedItemId={currentField
+                        } setSelectedItem={setCurrentField}
+                        handleScroll={() => { }}/>
+                }
+                {!isMobile &&
                 <CustomRadioGroup
                     items={fieldsItems}
                     selectedItemId={currentField}
@@ -52,10 +65,13 @@ export const CurrentFields = ({
                     handleScroll={() => { }}
                     activeScope={undefined}
                 />
+                }
+
             </Box>
             <Box
                 sx={{
-                    width: "50%"
+                    width: isMobile ? "100%" : "50%",
+
                 }}
             >
                 <Typography
@@ -68,6 +84,14 @@ export const CurrentFields = ({
                         m: "15px 0 10px",
                     }}
                 >Выберите вопрос для этого поля</Typography>
+                {isMobile &&
+                <CurrentFieldSelect
+                    items={items}
+                    selectedItemId={currentQuestion}
+                    setSelectedItem={setCurrentQuestion}
+                    handleScroll={() => { }}/>
+                }
+                {!isMobile &&
                 <CustomRadioGroup
                     items={items}
                     selectedItemId={currentQuestion}
@@ -75,6 +99,8 @@ export const CurrentFields = ({
                     handleScroll={() => { }}
                     activeScope={undefined}
                 />
+                }
+
             </Box>
         </Box>
     )