@brizy/ui/lib/AutoCorrectingInput/index.js

React elements in Brizy style

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AutoCorrectingInput = void 0;
const classNamesFn_1 = require("../classNamesFn");
const react_1 = __importDefault(require("react"));
const underscore_1 = __importDefault(require("underscore"));
const utils_1 = require("./utils");
const DEBOUNCE_WAIT = 1000;
class AutoCorrectingInput extends react_1.default.Component {
    constructor() {
        super(...arguments);
        this.state = {
            text: (0, utils_1.formatInputValue)(this.props.value, this.props.step),
            value: this.props.value,
            prevPropsValue: this.props.value,
        };
        this.handleChange = (e) => {
            this.setState({ text: e.target.value }, () => {
                if (this.props.onTextChange)
                    this.props.onTextChange(this.state.text);
                this.debouncedOnChange();
            });
        };
        this.debouncedOnChange = underscore_1.default.debounce(() => {
            this.setState(({ text, value }, { min, max, step }) => {
                const textValue = parseFloat(String(text));
                const correctedTextValue = (0, utils_1.correctNumber)(!Number.isNaN(textValue) ? textValue : value, min, max, step);
                return {
                    text: (0, utils_1.formatInputValue)(correctedTextValue, step),
                    value: correctedTextValue,
                };
            }, () => {
                if (this.props.onTextChange)
                    this.props.onTextChange(this.state.text);
                this.props.onChange(this.state.value);
            });
        }, DEBOUNCE_WAIT);
    }
    static getDerivedStateFromProps(props, state) {
        if (props.value !== state.prevPropsValue) {
            return {
                text: (0, utils_1.formatInputValue)(props.value, props.step),
                value: props.value,
                prevPropsValue: props.value,
            };
        }
        return null;
    }
    componentWillUnmount() {
        this.debouncedOnChange.cancel();
    }
    increment() {
        this.setState(({ text, value }, { min, max, step }) => {
            const textValue = Number(text);
            const correctedAndIncrementedTextValue = (0, utils_1.correctNumber)((0, utils_1.preciseAdd)(textValue, step), min, max, step);
            if (correctedAndIncrementedTextValue !== value) {
                return {
                    text: (0, utils_1.formatInputValue)(correctedAndIncrementedTextValue, step),
                    value: correctedAndIncrementedTextValue,
                };
            }
            return null;
        }, () => {
            if (this.props.onTextChange)
                this.props.onTextChange(this.state.text);
            this.props.onChange(this.state.value);
        });
    }
    decrement() {
        this.setState(({ text, value }, { min, max, step }) => {
            const textValue = Number(text);
            const correctedAndDecrementedTextValue = (0, utils_1.correctNumber)((0, utils_1.preciseSub)(textValue, step), min, max, step);
            if (correctedAndDecrementedTextValue !== value) {
                return {
                    text: (0, utils_1.formatInputValue)(correctedAndDecrementedTextValue, step),
                    value: correctedAndDecrementedTextValue,
                };
            }
            return null;
        }, () => {
            if (this.props.onTextChange)
                this.props.onTextChange(this.state.text);
            this.props.onChange(this.state.value);
        });
    }
    render() {
        const { className, min, max, step, onFocus, onBlur, onMouseEnter, onMouseLeave, size } = this.props;
        const { text } = this.state;
        const _className = (0, classNamesFn_1.classNames)(className)("auto-correcting-input");
        return (react_1.default.createElement("input", { className: _className, type: "number", value: text, min: min, max: max, step: step, size: size, onFocus: onFocus, onBlur: onBlur, onChange: this.handleChange, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }));
    }
}
exports.AutoCorrectingInput = AutoCorrectingInput;