@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
46 lines (45 loc) • 1.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NumberInput = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const index_1 = tslib_1.__importStar(require("./index"));
const join_1 = tslib_1.__importDefault(require("../utils/join"));
/**
* This component allows - and empty values as intermediery values
* it calls change only with valid numeric values
*/
exports.NumberInput = React.forwardRef((props, ref) => {
const [value, setValue] = React.useState(() => {
// awlays controlled
return props.value ?? '';
});
const handleChange = React.useCallback((event) => {
const { value } = event.target;
let newVal = Number(value);
if (value === '-' || value === '') {
// we are saving invalid values so we allow values as empty string and '-'
// there is a validation that prevents the
newVal = value;
// the value may be empty or negative
setValue(value);
}
else if (!isNaN(newVal)) {
setValue(value);
// only set when a valid numer
props.onChange(newVal);
}
}, []);
React.useEffect(() => {
setValue(props.value);
}, [props.value]);
const handleBlur = React.useCallback((event) => {
props?.onBlur?.(event);
// show the prop value
if (value !== props.value) {
setValue(props.value);
}
}, [props.value, value]);
const { noArrows, ...restOfProps } = props;
return (React.createElement(index_1.default, { ...restOfProps, ref: ref, className: (0, join_1.default)(noArrows ? `${index_1.baseClassName}--no-arrows` : '', props.className), value: value, onBlur: handleBlur, onChange: handleChange }));
});