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

React elements in Brizy style

import { classNames } from "../classNamesFn";
import React from "react";
import _ from "underscore";
import { correctNumber, formatInputValue, preciseAdd, preciseSub } from "./utils";
const DEBOUNCE_WAIT = 1000;
export class AutoCorrectingInput extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            text: 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 = _.debounce(() => {
            this.setState(({ text, value }, { min, max, step }) => {
                const textValue = parseFloat(String(text));
                const correctedTextValue = correctNumber(!Number.isNaN(textValue) ? textValue : value, min, max, step);
                return {
                    text: 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: 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 = correctNumber(preciseAdd(textValue, step), min, max, step);
            if (correctedAndIncrementedTextValue !== value) {
                return {
                    text: 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 = correctNumber(preciseSub(textValue, step), min, max, step);
            if (correctedAndDecrementedTextValue !== value) {
                return {
                    text: 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 = classNames(className)("auto-correcting-input");
        return (React.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 }));
    }
}