Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 53x 53x 53x 262x 262x 8x 8x 8x 8x 8x 262x | import * as React from "react";
import { Box, BoxProps, InputAdornment, SxProps } from "@mui/material";
import NumberFormat from "react-number-format";
import { GiveInput } from "./GiveInput";
const MAX_INT_VALUE = Number.MAX_SAFE_INTEGER;
const MIN_INT_VALUE = Number.MIN_SAFE_INTEGER;
export type GiveIntegerInputProps = {
min?: number;
max?: number | null;
label?: string | React.ReactNode;
placeholder?: string;
error?: boolean;
disabled?: boolean;
helperText?: string | React.ReactNode;
startIcon?: React.ReactNode;
endIcon?: React.ReactNode;
allowNegative?: boolean;
inputRef?: React.Ref<any>;
sx?: SxProps;
isFullWidth?: boolean;
value?: string | number | null | undefined;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
containerProps?: BoxProps;
inputProps?: Record<any, any>;
};
const GiveIntegerInput = ({
min = MIN_INT_VALUE,
max = MAX_INT_VALUE,
allowNegative = false,
containerProps,
startIcon,
endIcon,
isFullWidth = true,
...props
}: GiveIntegerInputProps) => {
const minValue = min === MIN_INT_VALUE ? (allowNegative ? min : 0) : min;
const isAllowed = (values: any) => {
const { formattedValue, floatValue, value } = values;
Iif (max && value > max) return false;
Iif (!floatValue && floatValue !== 0) {
return formattedValue === "" || formattedValue === "-";
} else Eif (max) {
return floatValue >= minValue && floatValue <= max;
}
return true;
};
return (
<Box sx={{ width: "100%", ...containerProps?.sx }} {...containerProps}>
<NumberFormat
customInput={GiveInput}
thousandSeparator={false}
allowLeadingZeros={false}
allowNegative={allowNegative}
decimalScale={0}
isAllowed={isAllowed}
fullWidth={isFullWidth}
min={minValue}
inputMode="numeric"
InputProps={{
startAdornment: startIcon ? (
<InputAdornment position="start">{startIcon}</InputAdornment>
) : null,
endAdornment: endIcon ? (
<InputAdornment position="end">{endIcon}</InputAdornment>
) : null,
}}
{...props}
/>
</Box>
);
};
export default GiveIntegerInput;
|