@etsoo/materialui
Version:
TypeScript Material-UI Implementation
61 lines (60 loc) • 3.89 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 Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import FormControl from "@mui/material/FormControl";
import FormLabel from "@mui/material/FormLabel";
import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "@mui/icons-material/Remove";
import OutlinedInput from "@mui/material/OutlinedInput";
import OpenInFullIcon from "@mui/icons-material/OpenInFull";
/**
* Number spinner component
*/
export function NumberSpinner({ 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", sx: {
"& .MuiButton-root": {
borderColor: "divider",
minWidth: 0,
bgcolor: "action.hover",
"&:not(.Mui-disabled)": {
color: "text.primary"
}
}
}, children: props.children })), children: [_jsxs(BaseNumberField.ScrubArea, { render: _jsx(Box, { component: "span", sx: { userSelect: "none", width: "max-content" } }), children: [label != null && (_jsx(FormLabel, { htmlFor: id, sx: {
display: "inline-block",
cursor: "ew-resize",
fontSize: "0.875rem",
color: "text.primary",
fontWeight: 500,
lineHeight: 1.5,
mb: 0.5
}, children: label })), _jsx(BaseNumberField.ScrubAreaCursor, { children: _jsx(OpenInFullIcon, { fontSize: "small", sx: { transform: "translateY(12.5%) rotate(45deg)" } }) })] }), _jsxs(Box, { sx: { display: "flex" }, children: [_jsx(BaseNumberField.Decrement, { render: _jsx(Button, { variant: "outlined", "aria-label": "Decrease", size: size, sx: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
borderRight: "0px",
"&.Mui-disabled": {
borderRight: "0px"
}
} }), children: _jsx(RemoveIcon, { fontSize: size }) }), _jsx(BaseNumberField.Input, { id: id, render: (props, state) => (_jsx(OutlinedInput, { inputRef: props.ref, value: state.inputValue, onBlur: props.onBlur, onChange: props.onChange, onKeyUp: props.onKeyUp, onKeyDown: props.onKeyDown, onFocus: props.onFocus, slotProps: {
input: {
...props,
size: Math.max((other.min?.toString() || "").length, state.inputValue.length || 1) + 1,
sx: {
textAlign: "center"
}
}
}, sx: { pr: 0, borderRadius: 0, flex: 1 } })) }), _jsx(BaseNumberField.Increment, { render: _jsx(Button, { variant: "outlined", "aria-label": "Increase", size: size, sx: {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeft: "0px",
"&.Mui-disabled": {
borderLeft: "0px"
}
} }), children: _jsx(AddIcon, { fontSize: size }) })] })] }));
}