Добавил закрытие импута по нажатие Enter и закртие по Escape
This commit is contained in:
ArtChaos189
parent
35a0a8c334
commit
028446f33d
@ -1,250 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import axios from "axios";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
IconButton,
|
|
||||||
SxProps,
|
|
||||||
TextField,
|
|
||||||
Theme,
|
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
|
|
||||||
|
|
||||||
import { usePrivilegies } from "@root/hooks/privilege.hook";
|
|
||||||
|
|
||||||
interface CustomWrapperProps {
|
|
||||||
text: string;
|
|
||||||
sx?: SxProps<Theme>;
|
|
||||||
result?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface СardChildren {
|
|
||||||
name: string;
|
|
||||||
type: string;
|
|
||||||
price: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const СardChildren = ({ name, type, price, description }: СardChildren) => {
|
|
||||||
const [inputOpen, setInputOpen] = useState<boolean>(false);
|
|
||||||
const [inputValue, setInputValue] = useState<string>("");
|
|
||||||
|
|
||||||
const PutPrivilegies = () => {
|
|
||||||
axios({
|
|
||||||
method: "put",
|
|
||||||
url: "https://admin.pena.digital/strator/privilege/service",
|
|
||||||
data: {
|
|
||||||
price: inputValue,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!inputOpen && inputValue !== "") {
|
|
||||||
PutPrivilegies();
|
|
||||||
setInputValue("");
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
key={type}
|
|
||||||
sx={{
|
|
||||||
px: "20px",
|
|
||||||
py: "25px",
|
|
||||||
backgroundColor: "#F1F2F6",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box sx={{ display: "flex" }}>
|
|
||||||
<Box sx={{ width: "200px", borderRight: "1px solid black" }}>
|
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
sx={{
|
|
||||||
color: "#fe9903",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</Typography>
|
|
||||||
<Tooltip placement="top" title={description}>
|
|
||||||
<IconButton>
|
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M9.25 9.25H10V14.5H10.75"
|
|
||||||
stroke="#7E2AEA"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M9.8125 7C10.4338 7 10.9375 6.49632 10.9375 5.875C10.9375 5.25368 10.4338 4.75 9.8125 4.75C9.19118 4.75 8.6875 5.25368 8.6875 5.875C8.6875 6.49632 9.19118 7 9.8125 7Z"
|
|
||||||
fill="#7E2AEA"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</IconButton>
|
|
||||||
</Tooltip>
|
|
||||||
<IconButton onClick={() => setInputOpen(!inputOpen)}>
|
|
||||||
<ModeEditOutlineOutlinedIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ width: "600px", display: "flex", justifyContent: "space-around" }}>
|
|
||||||
{inputOpen ? (
|
|
||||||
<TextField
|
|
||||||
placeholder="введите число"
|
|
||||||
fullWidth
|
|
||||||
onChange={(event) => setInputValue(event.target.value)}
|
|
||||||
sx={{
|
|
||||||
alignItems: "center",
|
|
||||||
width: "400px",
|
|
||||||
"& .MuiInputBase-root": {
|
|
||||||
backgroundColor: "#F2F3F7",
|
|
||||||
height: "48px",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
inputProps={{
|
|
||||||
sx: {
|
|
||||||
borderRadius: "10px",
|
|
||||||
fontSize: "18px",
|
|
||||||
lineHeight: "21px",
|
|
||||||
py: 0,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Typography sx={{ color: "black", mr: "5px" }}>price: {price}</Typography>
|
|
||||||
)}
|
|
||||||
<Typography sx={{ color: "black" }}>{type}</Typography>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const PrivilegiesWrapper = ({ text, sx, result }: CustomWrapperProps) => {
|
|
||||||
const theme = useTheme();
|
|
||||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
|
||||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
|
||||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
|
||||||
|
|
||||||
const { privilegies, isError, isLoading, errorMessage } = usePrivilegies();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: "100%",
|
|
||||||
overflow: "hidden",
|
|
||||||
borderRadius: "12px",
|
|
||||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
|
||||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
|
||||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
|
||||||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
|
||||||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
|
||||||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
|
|
||||||
4749)`,
|
|
||||||
|
|
||||||
...sx,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
border: "1px solid white",
|
|
||||||
"&:first-of-type": {
|
|
||||||
borderTopLeftRadius: "12px ",
|
|
||||||
borderTopRightRadius: "12px",
|
|
||||||
},
|
|
||||||
"&:last-of-type": {
|
|
||||||
borderBottomLeftRadius: "12px",
|
|
||||||
borderBottomRightRadius: "12px",
|
|
||||||
},
|
|
||||||
"&:not(:last-of-type)": {
|
|
||||||
borderBottom: `1px solid gray`,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
onClick={() => setIsExpanded((prev) => !prev)}
|
|
||||||
sx={{
|
|
||||||
height: "88px",
|
|
||||||
px: "20px",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
cursor: "pointer",
|
|
||||||
userSelect: "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
width: "100%",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
fontSize: "18px",
|
|
||||||
lineHeight: upMd ? undefined : "19px",
|
|
||||||
fontWeight: 400,
|
|
||||||
color: "#FFFFFF",
|
|
||||||
px: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{text}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
height: "100%",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{result ? (
|
|
||||||
<>
|
|
||||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
|
||||||
<path
|
|
||||||
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
|
|
||||||
stroke="#7E2AEA"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
|
|
||||||
pl: upSm ? "2px" : 0,
|
|
||||||
height: "50%",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect y="0.8125" width="30" height="30" rx="6" fill="#252734" />
|
|
||||||
<path
|
|
||||||
d="M7.5 19.5625L15 12.0625L22.5 19.5625"
|
|
||||||
stroke="#fe9903"
|
|
||||||
stroke-width="1.5"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
{isExpanded &&
|
|
||||||
(isError ? (
|
|
||||||
<Typography>errorMessage</Typography>
|
|
||||||
) : (
|
|
||||||
privilegies?.Шаблонизатор.map(({ name, type, price, description }) => (
|
|
||||||
<СardChildren key={type} name={name} type={type} price={price} description={description} />
|
|
||||||
))
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -2,7 +2,7 @@ import { AccordionDetails, Table, TableBody, TableCell, TableHead, TableRow, Typ
|
|||||||
|
|
||||||
import FormDeleteRoles from "./FormDeleteRoles";
|
import FormDeleteRoles from "./FormDeleteRoles";
|
||||||
import FormCreateRoles from "./FormCreateRoles";
|
import FormCreateRoles from "./FormCreateRoles";
|
||||||
import { PrivilegiesWrapper } from "./CustomWrapper";
|
import { PrivilegiesWrapper } from "./PrivilegiesWrapper";
|
||||||
|
|
||||||
import theme from "../../theme";
|
import theme from "../../theme";
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user