@etsoo/materialui
Version:
TypeScript Material-UI Implementation
100 lines (99 loc) • 6.1 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.NumberSpinner = NumberSpinner;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const number_field_1 = require("@base-ui/react/number-field");
const Box_1 = __importDefault(require("@mui/material/Box"));
const Button_1 = __importDefault(require("@mui/material/Button"));
const FormControl_1 = __importDefault(require("@mui/material/FormControl"));
const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
const Add_1 = __importDefault(require("@mui/icons-material/Add"));
const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
const OutlinedInput_1 = __importDefault(require("@mui/material/OutlinedInput"));
const OpenInFull_1 = __importDefault(require("@mui/icons-material/OpenInFull"));
/**
* Number spinner component
*/
function NumberSpinner({ 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", sx: {
"& .MuiButton-root": {
borderColor: "divider",
minWidth: 0,
bgcolor: "action.hover",
"&:not(.Mui-disabled)": {
color: "text.primary"
}
}
}, children: props.children })), children: [(0, jsx_runtime_1.jsxs)(number_field_1.NumberField.ScrubArea, { render: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "span", sx: { userSelect: "none", width: "max-content" } }), children: [label != null && ((0, jsx_runtime_1.jsx)(FormLabel_1.default, { 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 })), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.ScrubAreaCursor, { children: (0, jsx_runtime_1.jsx)(OpenInFull_1.default, { fontSize: "small", sx: { transform: "translateY(12.5%) rotate(45deg)" } }) })] }), (0, jsx_runtime_1.jsxs)(Box_1.default, { sx: { display: "flex" }, children: [(0, jsx_runtime_1.jsx)(number_field_1.NumberField.Decrement, { render: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", "aria-label": "Decrease", size: size, sx: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
borderRight: "0px",
"&.Mui-disabled": {
borderRight: "0px"
}
} }), children: (0, jsx_runtime_1.jsx)(Remove_1.default, { fontSize: size }) }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.Input, { id: id, render: (props, state) => ((0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { 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 } })) }), (0, jsx_runtime_1.jsx)(number_field_1.NumberField.Increment, { render: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outlined", "aria-label": "Increase", size: size, sx: {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderLeft: "0px",
"&.Mui-disabled": {
borderLeft: "0px"
}
} }), children: (0, jsx_runtime_1.jsx)(Add_1.default, { fontSize: size }) })] })] }));
}