селект+штпут
This commit is contained in:
parent
ff2569dea8
commit
2540dd8079
133
src/pages/PersonalizationAI/AgeInputWithSelect.tsx
Normal file
133
src/pages/PersonalizationAI/AgeInputWithSelect.tsx
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
import React, { useState, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
InputBase,
|
||||||
|
IconButton,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
Paper,
|
||||||
|
Popper,
|
||||||
|
Grow,
|
||||||
|
ClickAwayListener,
|
||||||
|
MenuList,
|
||||||
|
useTheme
|
||||||
|
} from '@mui/material';
|
||||||
|
import ArrowDownIcon from "@/assets/icons/ArrowDownIcon";
|
||||||
|
|
||||||
|
interface AgeInputWithSelectProps {
|
||||||
|
value: string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AgeInputWithSelect = ({ value, onChange }: AgeInputWithSelectProps) => {
|
||||||
|
const theme = useTheme();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const anchorRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
onChange(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelectItemClick = (selectedValue: string) => {
|
||||||
|
onChange(selectedValue);
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggle = () => {
|
||||||
|
setOpen((prevOpen) => !prevOpen);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = (event: Event) => {
|
||||||
|
if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
ref={anchorRef}
|
||||||
|
sx={{
|
||||||
|
position: 'relative',
|
||||||
|
mt: "17px",
|
||||||
|
height: "48px",
|
||||||
|
maxWidth: "420px",
|
||||||
|
width: "100%",
|
||||||
|
borderRadius: "8px",
|
||||||
|
border: "1px solid #9A9AAF",
|
||||||
|
'&:hover': {
|
||||||
|
borderColor: '#B0B0B0',
|
||||||
|
},
|
||||||
|
'&:focus-within': {
|
||||||
|
borderColor: '#7E2AEA',
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<InputBase
|
||||||
|
value={value}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
fullWidth
|
||||||
|
placeholder="Введите возраст"
|
||||||
|
sx={{
|
||||||
|
height: "100%",
|
||||||
|
padding: "10px 20px",
|
||||||
|
'& input': {
|
||||||
|
height: "100%",
|
||||||
|
width: "100%",
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<IconButton
|
||||||
|
onClick={handleToggle}
|
||||||
|
sx={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 0,
|
||||||
|
top: '50%',
|
||||||
|
transform: `translateY(-50%) rotate(${open ? 180 : 0}deg)`,
|
||||||
|
cursor: 'pointer',
|
||||||
|
color: theme.palette.brightPurple.main,
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
transition: 'transform 0.2s',
|
||||||
|
padding: '8px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ArrowDownIcon style={{ width: "18px", height: "18px" }} />
|
||||||
|
</IconButton>
|
||||||
|
|
||||||
|
<Popper
|
||||||
|
open={open}
|
||||||
|
anchorEl={anchorRef.current}
|
||||||
|
role={undefined}
|
||||||
|
placement="bottom-end"
|
||||||
|
transition
|
||||||
|
disablePortal
|
||||||
|
sx={{ zIndex: 1300 }}
|
||||||
|
>
|
||||||
|
{({ TransitionProps, placement }) => (
|
||||||
|
<Grow
|
||||||
|
{...TransitionProps}
|
||||||
|
style={{
|
||||||
|
transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Paper elevation={8}>
|
||||||
|
<ClickAwayListener onClickAway={handleClose}>
|
||||||
|
<MenuList autoFocusItem={open} id="menu-list-grow">
|
||||||
|
<MenuItem onClick={() => handleSelectItemClick('')}>Выберите возраст</MenuItem>
|
||||||
|
<MenuItem onClick={() => handleSelectItemClick('18-24')}>18-24</MenuItem>
|
||||||
|
<MenuItem onClick={() => handleSelectItemClick('25-34')}>25-34</MenuItem>
|
||||||
|
<MenuItem onClick={() => handleSelectItemClick('35-44')}>35-44</MenuItem>
|
||||||
|
<MenuItem onClick={() => handleSelectItemClick('45-54')}>45-54</MenuItem>
|
||||||
|
<MenuItem onClick={() => handleSelectItemClick('55+')}>55+</MenuItem>
|
||||||
|
</MenuList>
|
||||||
|
</ClickAwayListener>
|
||||||
|
</Paper>
|
||||||
|
</Grow>
|
||||||
|
)}
|
||||||
|
</Popper>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AgeInputWithSelect;
|
@ -1,10 +1,12 @@
|
|||||||
import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery } from "@mui/material";
|
import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery, IconButton } from "@mui/material";
|
||||||
import { InfoPopover } from '@ui_kit/InfoPopover';
|
import { InfoPopover } from '@ui_kit/InfoPopover';
|
||||||
import CheckboxIcon from "@icons/Checkbox";
|
import CheckboxIcon from "@icons/Checkbox";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useCurrentQuiz } from "@/stores/quizes/hooks";
|
import { useCurrentQuiz } from "@/stores/quizes/hooks";
|
||||||
import { auditoryAdd } from "@/api/auditory";
|
import { auditoryAdd } from "@/api/auditory";
|
||||||
import { useSnackbar } from "notistack";
|
import { useSnackbar } from "notistack";
|
||||||
|
import ArrowDownIcon from "@/assets/icons/ArrowDownIcon";
|
||||||
|
import AgeInputWithSelect from "./AgeInputWithSelect";
|
||||||
|
|
||||||
interface GenderAndAgeSelectorProps {
|
interface GenderAndAgeSelectorProps {
|
||||||
handleAdd: (item: any) => void;
|
handleAdd: (item: any) => void;
|
||||||
@ -14,6 +16,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
|
|||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const [age, setAge] = useState<string>('');
|
const [age, setAge] = useState<string>('');
|
||||||
const [gender, setGender] = useState<string>('');
|
const [gender, setGender] = useState<string>('');
|
||||||
|
const [selectOpen, setSelectOpen] = useState<boolean>(false);
|
||||||
const quiz = useCurrentQuiz();
|
const quiz = useCurrentQuiz();
|
||||||
const { enqueueSnackbar } = useSnackbar();
|
const { enqueueSnackbar } = useSnackbar();
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down(800));
|
const isMobile = useMediaQuery(theme.breakpoints.down(800));
|
||||||
@ -60,7 +63,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Box sx={{ display: 'flex', gap: 4, alignItems: "end", flexWrap: "wrap" }}>
|
<Box sx={{ display: 'flex', gap: 4, alignItems: "end", flexWrap: "wrap" }}>
|
||||||
<Box sx={{display: "inline-flex", flexWrap: isMobile ? "wrap" : "initial"}}>
|
<Box sx={{ display: "inline-flex", flexWrap: isMobile ? "wrap" : "initial" }}>
|
||||||
|
|
||||||
<FormControl component="fieldset" variant="standard">
|
<FormControl component="fieldset" variant="standard">
|
||||||
<Box sx={{ display: 'flex', alignItems: "end", gap: '4px' }}>
|
<Box sx={{ display: 'flex', alignItems: "end", gap: '4px' }}>
|
||||||
@ -169,46 +172,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
|
|||||||
}}>Возраст</FormLabel>
|
}}>Возраст</FormLabel>
|
||||||
<InfoPopover />
|
<InfoPopover />
|
||||||
</Box>
|
</Box>
|
||||||
<Select
|
<AgeInputWithSelect value={age} onChange={setAge} />
|
||||||
value={age}
|
|
||||||
onChange={(e) => setAge(e.target.value)}
|
|
||||||
displayEmpty
|
|
||||||
inputProps={{ 'aria-label': 'age', disableUnderline: true }}
|
|
||||||
disableUnderline
|
|
||||||
sx={{
|
|
||||||
height: "48px",
|
|
||||||
maxWidth: "420px",
|
|
||||||
width: "100%",
|
|
||||||
borderRadius: "8px",
|
|
||||||
border: "1px solid #9A9AAF",
|
|
||||||
'& .MuiSelect-filled': {
|
|
||||||
height: "100%",
|
|
||||||
width: "100%",
|
|
||||||
},
|
|
||||||
'& .MuiSelect-select': {
|
|
||||||
height: "100%",
|
|
||||||
width: "100%",
|
|
||||||
p: "10px 20px"
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
borderColor: '#E0E0E0',
|
|
||||||
},
|
|
||||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
|
||||||
borderColor: '#B0B0B0',
|
|
||||||
},
|
|
||||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
|
||||||
borderColor: '#7E2AEA',
|
|
||||||
},
|
|
||||||
mt: "17px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem value="">Выберите возраст</MenuItem>
|
|
||||||
<MenuItem value="18-24">18-24</MenuItem>
|
|
||||||
<MenuItem value="25-34">25-34</MenuItem>
|
|
||||||
<MenuItem value="35-44">35-44</MenuItem>
|
|
||||||
<MenuItem value="45-54">45-54</MenuItem>
|
|
||||||
<MenuItem value="55+">55+</MenuItem>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
@ -229,6 +193,6 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
|
|||||||
>
|
>
|
||||||
Ок
|
Ок
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box >
|
||||||
);
|
);
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user