@etsoo/materialui
Version:
TypeScript Material-UI Implementation
43 lines (42 loc) • 2.86 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
import IconButton from "@mui/material/IconButton";
import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputAdornment from "@mui/material/InputAdornment";
import InputLabel from "@mui/material/InputLabel";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
/**
* This component is a placeholder for FormControl to correctly set the shrink label state on SSR.
*/
function SSRInitialFilled(_) {
return null;
}
SSRInitialFilled.muiName = "Input";
/**
* Number field component
*/
export function NumberField({ id: idProp, label, error, size = "medium", ...other }) {
let id = React.useId();
if (idProp) {
id = idProp;
}
return (_jsxs(BaseNumberField.Root, { ...other, render: (props, state) => (_jsx(FormControl, { size: size, ref: props.ref, disabled: state.disabled, required: state.required, error: error, variant: "outlined", children: props.children })), children: [_jsx(SSRInitialFilled, { ...other }), _jsx(InputLabel, { htmlFor: id, children: label }), _jsx(BaseNumberField.Input, { id: id, render: (props, state) => (_jsx(OutlinedInput, { label: label, inputRef: props.ref, value: state.inputValue, onBlur: props.onBlur, onChange: props.onChange, onKeyUp: props.onKeyUp, onKeyDown: props.onKeyDown, onFocus: props.onFocus, slotProps: {
input: props
}, endAdornment: _jsxs(InputAdornment, { position: "end", sx: {
flexDirection: "column",
maxHeight: "unset",
alignSelf: "stretch",
borderLeft: "1px solid",
borderColor: "divider",
ml: 0,
"& button": {
py: 0,
flex: 1,
borderRadius: 0.5
}
}, children: [_jsx(BaseNumberField.Increment, { render: _jsx(IconButton, { size: size, "aria-label": "Increase" }), children: _jsx(KeyboardArrowUpIcon, { fontSize: size, sx: { transform: "translateY(2px)" } }) }), _jsx(BaseNumberField.Decrement, { render: _jsx(IconButton, { size: size, "aria-label": "Decrease" }), children: _jsx(KeyboardArrowDownIcon, { fontSize: size, sx: { transform: "translateY(-2px)" } }) })] }), sx: { pr: 0 } })) }), _jsx(FormHelperText, { sx: { ml: 0, "&:empty": { mt: 0 } }, children: "Enter value between 10 and 40" })] }));
}