var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
// A controlled input that will only trigger the onChange event if the new value is within the allowed min/max
var ClampedInput = /** @class */ (function (_super) {
    __extends(ClampedInput, _super);
    function ClampedInput(props) {
        var _this = _super.call(this, props) || this;
        _this.handleInputBlurred = function () {
            var value = parseInt(_this.state.value, 10);
            var valueIsNaN = Number.isNaN(value);
            var _a = _this.props, min = _a.min, max = _a.max, onChange = _a.onChange;
            if (!valueIsNaN && value >= min && value <= max) {
                onChange(value);
            }
            else {
                _this.setState({
                    value: _this.props.value,
                });
            }
        };
        _this.handleInputFocused = function () {
            if (_this.props.highlightOnFocus && _this.inputRef.current) {
                _this.inputRef.current.select();
            }
        };
        _this.handleInputChange = function (event) {
            _this.setState({
                value: event.target.value,
            });
        };
        _this.inputRef = React.createRef();
        _this.state = {
            value: props.value,
        };
        return _this;
    }
    ClampedInput.prototype.componentDidUpdate = function (prevProps) {
        if (prevProps.value !== this.props.value) {
            this.setState({
                value: this.props.value,
            });
        }
    };
    ClampedInput.prototype.render = function () {
        return (React.createElement("input", { className: this.props.className, min: this.props.min, max: this.props.max, onChange: this.handleInputChange, onBlur: this.handleInputBlurred, onFocus: this.handleInputFocused, onMouseDown: this.props.onMouseDown, ref: this.inputRef, style: this.props.style, title: this.props.title, type: "number", value: this.state.value }));
    };
    ClampedInput.propTypes = {
        className: PropTypes.string,
        highlightOnFocus: PropTypes.bool,
        min: PropTypes.number.isRequired,
        max: PropTypes.number.isRequired,
        onChange: PropTypes.func.isRequired,
        onMouseDown: PropTypes.func,
        style: PropTypes.object,
        title: PropTypes.string,
        value: PropTypes.number.isRequired,
    };
    ClampedInput.defaultProps = {
        className: '',
        highlightOnFocus: false,
    };
    return ClampedInput;
}(PureComponent));
export default ClampedInput;
//# sourceMappingURL=ClampedInput.js.map