@drivy/cobalt/components/Form/Stepper.js

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { PureComponent } from "react";
import Button from "../Buttons/Button/index.js";
import { MinusIcon, PlusIcon } from "../Icon/index.js";
import { withFieldLabelAndHint } from "./field.js";
function _define_property(obj, key, value) {
    if (key in obj) Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
    });
    else obj[key] = value;
    return obj;
}
const AUTO_CHANGE_TIMEOUT_IN_MS = 750;
const AUTO_CHANGE_INTERVAL_IN_MS = 150;
const enforceInRange = (value, min, max)=>{
    let enforcedValue = value;
    if (void 0 !== max) enforcedValue = Math.min(enforcedValue, max);
    if (void 0 !== min) enforcedValue = Math.max(enforcedValue, min);
    return enforcedValue;
};
class Stepper extends PureComponent {
    componentDidUpdate(_prevProps, prevState) {
        if (prevState.value !== this.state.value) this.changeValue(this.state.value);
        else if (this.props.value !== this.state.value) this.changeValue(this.props.value);
    }
    render() {
        const { name, status, disabled, min, max, children } = this.props;
        return /*#__PURE__*/ jsx("div", {
            className: classnames("cobalt-Stepper", {
                "cobalt-Stepper--disabled": disabled,
                "cobalt-Stepper--success": "success" === status,
                "cobalt-Stepper--error": "error" === status
            }),
            children: /*#__PURE__*/ jsxs("div", {
                className: "cobalt-Stepper__Wrapper",
                children: [
                    /*#__PURE__*/ jsx(Button, {
                        className: "cobalt-Stepper__ActionButton",
                        disabled: disabled || this.state.value === min,
                        ...!disabled && {
                            onPointerDown: ()=>this.onPointerDown(this.onDecrement),
                            onPointerUp: this.onPointerUp,
                            onPointerLeave: this.onPointerUp
                        },
                        type: "button",
                        "data-label": "stepper-minus",
                        children: /*#__PURE__*/ jsx(MinusIcon, {})
                    }),
                    /*#__PURE__*/ jsxs("div", {
                        className: "cobalt-Stepper__ContentWrapper",
                        children: [
                            children ? children(this.state.value) : this.state.value,
                            /*#__PURE__*/ jsx("input", {
                                type: "hidden",
                                name: name,
                                value: this.state.value
                            })
                        ]
                    }),
                    /*#__PURE__*/ jsx(Button, {
                        className: "cobalt-Stepper__ActionButton",
                        disabled: disabled || this.state.value === max,
                        ...!disabled && {
                            onPointerDown: ()=>this.onPointerDown(this.onIncrement),
                            onPointerUp: this.onPointerUp,
                            onPointerLeave: this.onPointerUp
                        },
                        type: "button",
                        "data-label": "stepper-plus",
                        children: /*#__PURE__*/ jsx(PlusIcon, {})
                    })
                ]
            })
        });
    }
    constructor(props){
        super(props), _define_property(this, "timeout", null), _define_property(this, "interval", null), _define_property(this, "onDecrement", ()=>{
            (null !== this.props.min || this.state.value > this.props.min) && this.changeValue(parseFloat((this.state.value - this.props.step).toFixed(10)));
        }), _define_property(this, "onIncrement", ()=>{
            (null !== this.props.max || this.state.value < this.props.max) && this.changeValue(parseFloat((this.state.value + this.props.step).toFixed(10)));
        }), _define_property(this, "onPointerDown", (callback)=>{
            callback();
            this.timeout && clearTimeout(this.timeout);
            this.timeout = setTimeout(()=>{
                this.interval && clearInterval(this.interval);
                this.interval = setInterval(callback, AUTO_CHANGE_INTERVAL_IN_MS);
            }, AUTO_CHANGE_TIMEOUT_IN_MS);
        }), _define_property(this, "onPointerUp", ()=>{
            if (this.interval) {
                clearInterval(this.interval);
                this.interval = null;
            }
            this.timeout && clearTimeout(this.timeout);
        }), _define_property(this, "changeValue", (value)=>{
            this.setState({
                value: enforceInRange(value, this.props.min, this.props.max)
            }, ()=>{
                this.props.onChange?.(this.state.value);
            });
        });
        if (props.step < 0) throw new Error("Incorrect step value. Can't be below zero");
        this.onDecrement = this.onDecrement.bind(this);
        this.onIncrement = this.onIncrement.bind(this);
        this.changeValue = this.changeValue.bind(this);
        this.onPointerDown = this.onPointerDown.bind(this);
        this.onPointerUp = this.onPointerUp.bind(this);
        this.state = {
            value: enforceInRange(props.value, props.min, props.max)
        };
    }
}
const wrappedComponent = withFieldLabelAndHint(Stepper);
wrappedComponent.displayName = "Stepper";
const StepperMeta = ({ children })=>/*#__PURE__*/ jsx("div", {
        className: "cobalt-Stepper__Meta",
        children: children
    });
export { StepperMeta, wrappedComponent as Stepper };

//# sourceMappingURL=Stepper.js.map