@etsoo/materialui
Version:
TypeScript Material-UI Implementation
119 lines (118 loc) • 5.4 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.IntInputField = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const Add_1 = __importDefault(require("@mui/icons-material/Add"));
const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
const react_1 = __importDefault(require("react"));
const shared_1 = require("@etsoo/shared");
const InputField_1 = require("./InputField");
const Box_1 = __importDefault(require("@mui/material/Box"));
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
/**
* Integer input field (controlled)
*/
exports.IntInputField = react_1.default.forwardRef((props, ref) => {
// Destruct
const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
// State
const [localValue, setLocalValue] = react_1.default.useState();
const setValue = (value, source, init = false) => {
if (onValueChange) {
const newValue = onValueChange(value, source, init);
if (newValue === false)
return;
if (newValue === null) {
setLocalValue(undefined);
return;
}
if (newValue === true || newValue === undefined)
setLocalValue(value);
else
setLocalValue(newValue);
}
else {
setLocalValue(value);
}
};
react_1.default.useEffect(() => {
setValue(value, undefined, true);
}, [value]);
// Layout
const layout = ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ref: ref, type: "number", value: localValue == null ? (required ? min : "") : localValue, inputProps: {
min,
step,
max,
style: inputStyle,
inputMode: "numeric"
}, InputProps: {
startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: symbol }) })) : undefined,
endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: endSymbol })) : undefined
}, sx: buttons
? {
"& input[type=number]::-webkit-inner-spin-button": {
WebkitAppearance: "none",
margin: 0
},
"& input[type=number]::-webkit-outer-spin-button": {
WebkitAppearance: "none",
margin: 0
}
}
: undefined, onChange: (event) => {
const source = event.target.value;
setLocalValue(source);
if (onChange)
onChange(event);
}, changeDelay: changeDelay, onChangeDelay: (event) => {
const source = event.target.value;
const value = parseFloat(source);
if (isNaN(value))
setValue(undefined, source);
else if (value > max)
setValue(max, source);
else if (value < min)
setValue(value === 0 ? undefined : min, source);
// 0 is a special case
else
setValue(value, source);
if (onChangeDelay)
onChangeDelay(event);
}, onFocus: onFocus, required: required, ...rest }));
if (buttons)
return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: {
display: "flex",
alignItems: "center",
width: "100%",
gap: 0.5,
...boxProps
}, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => {
if (localValue == null)
return;
const value = shared_1.NumberUtils.parse(localValue);
if (value == null)
return;
if (value <= min)
setValue(undefined, "SUB");
else
setValue(value - step, "SUB");
}, children: (0, jsx_runtime_1.jsx)(Remove_1.default, {}) }), layout, (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => {
if (localValue == null) {
setValue(min, "ADD");
return;
}
const value = shared_1.NumberUtils.parse(localValue);
if (value == null)
return;
if (value >= max)
return;
else
setValue(value + step, "ADD");
}, children: (0, jsx_runtime_1.jsx)(Add_1.default, { color: localValue == null ? undefined : "primary" }) })] }));
else
return layout;
});