мобилка для 6 шага амо
This commit is contained in:
Tamara
parent
72fbb34434
commit
753ae6c4a1
192
src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFieldSelectMobile.tsx
Normal file
192
src/pages/IntegrationsPage/IntegrationsModal/AmoQuestions/CurrentFieldSelectMobile.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user