116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
import { useState } from "react"
|
||
import { InputAdornment, TextField, Typography, useTheme } from "@mui/material"
|
||
|
||
import type { ChangeEvent } from "react"
|
||
import { CustomPrivilege } from "@frontend/kitui"
|
||
|
||
interface Props {
|
||
id: string
|
||
value: number
|
||
adornmentText: string
|
||
privilege: CustomPrivilege
|
||
onChange: (value: number) => void
|
||
}
|
||
|
||
const sliderSettingsByType = {
|
||
день: { max: 365, min: 0 },
|
||
шаблон: { max: 5000, min: 0 },
|
||
МБ: { max: 5000, min: 0 },
|
||
заявка: { max: 5000, min: 0 }
|
||
}
|
||
|
||
export default function NumberInputWithUnitAdornment({ id, value, adornmentText, privilege, onChange }: Props) {
|
||
const theme = useTheme()
|
||
const [changed, setChanged] = useState<boolean>(false)
|
||
|
||
return (
|
||
<TextField
|
||
type="number"
|
||
size="small"
|
||
placeholder="Введите вручную"
|
||
id={id}
|
||
onBlur={(e) => {
|
||
e.target.value = String(Number(String(e.target.value).replace(/^0+(?=\d\.)/, "")))
|
||
console.log("сработало", e.target.value)
|
||
}}
|
||
value={changed ? (value !== sliderSettingsByType[privilege.value]?.min ? parseInt(String(value), 10) : sliderSettingsByType[privilege.value]?.min) : ""}
|
||
onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
|
||
if (!changed) {
|
||
setChanged(true)
|
||
}
|
||
|
||
if (Number(target.value) > 999999) {
|
||
target.value = "999999"
|
||
}
|
||
|
||
const newNumber = parseInt(target.value)
|
||
|
||
|
||
if (!isFinite(newNumber) || newNumber < 0) {
|
||
onChange(sliderSettingsByType[privilege.value]?.min)
|
||
|
||
return
|
||
}
|
||
|
||
onChange(newNumber)
|
||
}}
|
||
sx={{
|
||
maxWidth: "200px",
|
||
minWidth: "200px",
|
||
".MuiInputBase-root": {
|
||
display: "flex",
|
||
pr: 0,
|
||
height: "48px",
|
||
borderRadius: "8px",
|
||
backgroundColor: "#F2F3F7",
|
||
fieldset: {
|
||
border: "1px solid" + theme.palette.gray.main,
|
||
},
|
||
"&.Mui-focused fieldset": {
|
||
borderColor: theme.palette.purple.main,
|
||
},
|
||
input: {
|
||
height: "31px",
|
||
borderRight: !changed ? "none" : "1px solid #9A9AAF",
|
||
},
|
||
"&.Mui-focused input": {
|
||
borderRight: "1px solid #9A9AAF",
|
||
},
|
||
"&:not(.Mui-focused) .MuiInputAdornment-root": {
|
||
display: !changed ? "none" : undefined,
|
||
},
|
||
"&.Mui-focused ::-webkit-input-placeholder": {
|
||
color: "transparent",
|
||
},
|
||
|
||
// Hiding arrows
|
||
"input::-webkit-outer-spin-button, input::-webkit-inner-spin-button": {
|
||
WebkitAppearance: "none",
|
||
margin: 0,
|
||
},
|
||
"input[type = number]": {
|
||
MozAppearance: "textfield",
|
||
},
|
||
},
|
||
}}
|
||
InputProps={{
|
||
endAdornment: (
|
||
<InputAdornment
|
||
position="end"
|
||
sx={{
|
||
userSelect: "none",
|
||
pointerEvents: "none",
|
||
pl: "2px",
|
||
pr: "13px",
|
||
}}
|
||
>
|
||
<Typography variant="body2" color="#4D4D4D">
|
||
{adornmentText}
|
||
</Typography>
|
||
</InputAdornment>
|
||
),
|
||
}}
|
||
/>
|
||
)
|
||
}
|