ограничение ввода отрицательных чисел и мелкие правки по стилю

This commit is contained in:
Tamara 2022-12-08 03:21:02 +03:00
parent 37c15047d4
commit 77b3ac8369
5 changed files with 85 additions and 57 deletions

@ -217,11 +217,11 @@ const Discounts: React.FC = () => {
const toTime = React.useRef<HTMLInputElement | null>(null);
const toCapacity = React.useRef<HTMLInputElement | null>(null);
const cleraAddedMore = () => {
if (fieldAddedMore.current) {
fieldAddedMore.current.value = "";
}
}
// const cleraAddedMore = () => {
// if (fieldAddedMore.current) {
// fieldAddedMore.current.value = "";
// }
// }
const checkFields = () => {
if( fieldName.current != null
@ -268,6 +268,12 @@ const Discounts: React.FC = () => {
discountsArraySet( discountsArray );
}
const PositiveInput = (event:any) => {
const numberInput = parseInt(event.target.value);
if(isNaN(numberInput) || numberInput < 0) {event.target.value = '0'}
}
return (
<React.Fragment>
<LocalizationProvider dateAdapter={AdapterDayjs}>
@ -285,33 +291,22 @@ const Discounts: React.FC = () => {
СКИДКИ
</Typography>
<Box sx={{
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "left",
alignItems: "left",
marginTop: "15px",
}}>
<Typography
variant="h4"
sx={{
width: "90%",
height: "40px",
fontWeight: "normal",
color: theme.palette.grayDisabled.main,
marginTop: "35px"
}}>
Название:
</Typography>
}}
>
<TextField
id = "standard-basic"
label = { "" }
label = { "Название" }
variant = "filled"
color = "secondary"
sx={{
width: "200px",
height: "30px",
marginTop: "-20px"
}}
InputProps={{
style: {
@ -332,7 +327,8 @@ const Discounts: React.FC = () => {
height: "40px",
fontWeight: "normal",
color: theme.palette.grayDisabled.main,
marginTop: "75px"
marginTop: "75px",
paddingLeft: '10px',
}}>
Условия:
</Typography>
@ -400,6 +396,7 @@ const Discounts: React.FC = () => {
color: theme.palette.secondary.main
} }}
inputRef={ fieldAddedMore }
onChange={PositiveInput}
/>
<TextField
@ -421,7 +418,7 @@ const Discounts: React.FC = () => {
color: theme.palette.secondary.main
} }}
inputRef={ basketMore }
onChange={ () => cleraAddedMore() }
onChange={ PositiveInput }
/>
<TextField
@ -443,6 +440,7 @@ const Discounts: React.FC = () => {
color: theme.palette.secondary.main
} }}
inputRef={ toTime }
onChange={ PositiveInput }
/>
<TextField
@ -464,6 +462,7 @@ const Discounts: React.FC = () => {
color: theme.palette.secondary.main
} }}
inputRef={ toCapacity }
onChange={PositiveInput}
/>
<TableContainer component={Paper} sx={{

@ -180,26 +180,24 @@ const Promocode: React.FC = () => {
alignItems: "left",
marginTop: "15px",
}}>
<Typography
variant="h4"
sx={{
width: "90%",
height: "40px",
fontWeight: "normal",
color: theme.palette.grayDisabled.main,
marginTop: "35px"
}}>
Название:
</Typography>
{/*<Typography */}
{/* variant="h4" */}
{/* sx={{*/}
{/* width: "90%",*/}
{/* height: "40px",*/}
{/* fontWeight: "normal",*/}
{/* color: theme.palette.grayDisabled.main,*/}
{/* marginTop: "35px"*/}
{/*}}>*/}
{/* Название:*/}
{/*</Typography>*/}
<TextField
id = "standard-basic"
label = { "" }
label = { "Название" }
variant = "filled"
color = "secondary"
sx={{
width: "200px",
height: "30px",
marginTop: "-20px"
}}
InputProps={{
style: {
@ -302,10 +300,12 @@ const Promocode: React.FC = () => {
Дата действия:
</Typography>
<Box sx={{
<Box
sx={{
width: "90%",
display: "flex"
}}>
}}
>
<Typography sx={{
width: "35px",
display: "flex",

@ -187,15 +187,22 @@ const DataGridElement: React.FC<MWProps> = ({ openModal }) => {
setSelectedPromocode( codeNumber );
}
const PositiveInput = (event:any) => {
const numberInput = parseInt(event.target.value);
if(isNaN(numberInput) || numberInput < 0) {event.target.value = '0'}
}
const fieldAdded = React.useRef<HTMLInputElement | null>(null);
const [ fieldAddedValue, setFieldAddedValue ] = React.useState("");
const changeAdded = () => {
const changeAdded = (event:any) => {
if( fieldAdded.current != null ) {
if( fieldAdded.current.value != null ) {
setFieldAddedValue( fieldAdded.current.value );
}
}
PositiveInput(event)
};
const separator = (amount: number) => {
@ -296,6 +303,7 @@ console.log(amount)
return discounts.map(e => `${(e*100).toFixed(2)}%`).join(' × ') + ` = ${(100 - discounts.reduce((a : number,cv : number) => a*(1-cv), 100)) .toFixed(2)}%`;
}
return (
<Box style={{ width: "100%" }}>
<Box style={{ height: 400 }}>
@ -512,7 +520,7 @@ console.log(amount)
color: theme.palette.secondary.main
} }}
inputRef={ fieldAdded }
onChange={ () => changeAdded() }
onChange={ changeAdded }
/>
</Box>

@ -50,15 +50,8 @@ const Authorization: React.FC = () => {
</Box>
<Button
variant = "contained"
sx={{
backgroundColor: theme.palette.content.main,
width: "50%",
height: "62px",
"&:hover": {
backgroundColor: theme.palette.menu.main
}
}}>
variant = 'enter'
>
ВОЙТИ
</Button>
</Box>

@ -1,6 +1,12 @@
import { createTheme, PaletteColorOptions } from "@mui/material";
//import { createTheme } from "./types";
declare module '@mui/material/Button' {
interface ButtonPropsVariantOverrides {
enter: true;
}
}
const fontFamily: string = "GilroyRegular";
const fontWeight: string = "600";
@ -81,6 +87,28 @@ const theme = createTheme({
fontSize: 16
}
},
components: {
MuiButton: {
variants: [
{
props: {
variant: 'enter' },
style: {
backgroundColor: "#26272c",
padding: '12px 48px',
"&:hover": {
backgroundColor: "#2f3339"
}
},
},
],
},
},
});