@etsoo/materialui
Version:
TypeScript Material-UI Implementation
82 lines (81 loc) • 5.01 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NumberField = NumberField;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const number_field_1 = require("@base-ui/react/number-field");
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
const FormHelperText_1 = __importDefault(require("@mui/material/FormHelperText"));
const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
const KeyboardArrowDown_1 = __importDefault(require("@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
*/
function NumberField({ id: idProp, label, error, size = "medium", ...other }) {
let id = React.useId();
if (idProp) {
id = idProp;
}
return ((0, jsx_runtime_1.jsxs)(number_field_1.NumberField.Root, { ...other, render: (props, state) => ((0, jsx_runtime_1.jsx)(FormControl_1.default, { size: size, ref: props.ref, disabled: state.disabled, required: state.required, error: error, variant: "outlined", children: props.children })), children: [(0, jsx_runtime_1.jsx)(SSRInitialFilled, { ...other }), (0, jsx_runtime_1.jsx)(InputLabel_1.default, { htmlFor: id, children: label }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.Input, { id: id, render: (props, state) => ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { 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: (0, jsx_runtime_1.jsxs)(InputAdornment_1.default, { 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: [(0, jsx_runtime_1.jsx)(number_field_1.NumberField.Increment, { render: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: size, "aria-label": "Increase" }), children: (0, jsx_runtime_1.jsx)(KeyboardArrowUp_1.default, { fontSize: size, sx: { transform: "translateY(2px)" } }) }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.Decrement, { render: (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: size, "aria-label": "Decrease" }), children: (0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, { fontSize: size, sx: { transform: "translateY(-2px)" } }) })] }), sx: { pr: 0 } })) }), (0, jsx_runtime_1.jsx)(FormHelperText_1.default, { sx: { ml: 0, "&:empty": { mt: 0 } }, children: "Enter value between 10 and 40" })] }));
}