@vnmfify/core/stepper/stepper-input.js

```shell npm i @vnmfify/core -S ```

import { Input } from "@vnxjs/components";
import * as React from "react";
import { useCallback, useContext, useEffect, useRef, useState } from "react";
import { prefixClassname } from "../styles";
import { preventDefault } from "../utils/dom/event";
import { formatNumber } from "../utils/format/number";
import { addUnitPx } from "../utils/format/unit";
import StepperContext from "./stepper.context";

function StepperInput(props) {
  var {
    width,
    disabled: disabledProp,
    onFocus
  } = props;
  var {
    value: valueProp,
    size,
    disabled,
    precision = 0,
    formatValue,
    onChange
  } = useContext(StepperContext);
  var digit = precision > 0;
  var rootRef = useRef();
  var [value, setValue] = useState();
  useEffect(() => setValue(valueProp), [valueProp]);
  var onTouchEnd = useCallback(event => {
    if (disabledProp) {
      preventDefault(event);
    }
  }, [disabledProp]);
  var handleFocus = useCallback(event => {
    if (disabledProp) {
      var _rootRef$current;

      (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
    } else {
      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
    }
  }, [disabledProp, onFocus]);
  var onInput = useCallback(_ref => {
    var {
      detail
    } = _ref;
    var {
      value: inputValue
    } = detail;
    var formatted = formatNumber(String(inputValue), digit);

    if (precision > 0 && formatted.includes(".")) {
      var pair = formatted.split(".");
      formatted = "".concat(pair[0], ".").concat(pair[1].slice(0, precision));
    }

    var isNumeric = formatted === String(+formatted);
    setValue(isNumeric ? +formatted : formatted);
  }, [digit, precision]);
  var onBlur = useCallback(_ref2 => {
    var {
      detail
    } = _ref2;
    var {
      value: inputValue
    } = detail;
    var value = formatValue === null || formatValue === void 0 ? void 0 : formatValue(inputValue);
    setValue(value);
    onChange === null || onChange === void 0 ? void 0 : onChange(value);
  }, [formatValue, onChange]);
  return /*#__PURE__*/React.createElement(Input, {
    ref: rootRef,
    className: prefixClassname("stepper__input"),
    style: {
      width: width ? addUnitPx(width) : "",
      height: size ? addUnitPx(size) : ""
    },
    disabled: disabledProp || disabled,
    type: digit ? "digit" : "number",
    value: value,
    onTouchEnd: onTouchEnd,
    onFocus: handleFocus,
    onInput: onInput,
    onBlur: onBlur
  });
}

export default StepperInput;
//# sourceMappingURL=stepper-input.js.map