@prefect9/ui/components/CountField.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.parse-float.js");
require("core-js/modules/es.parse-int.js");
require("core-js/modules/es.string.trim.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _isType = require("@prefect9/is-type");
var _ = require("../");
var _jsxRuntime = require("react/jsx-runtime");
function CountField(_ref) {
  let {
    className,
    label,
    value,
    onChange: editHandler,
    increment = 1,
    min = null,
    max = null
  } = _ref;
  const ref = (0, _react.useRef)(null);
  const id = (0, _react.useId)();
  const [focus, setFocus] = (0, _react.useState)(false);
  (0, _react.useEffect)(() => {
    if (!ref || !ref.current) return;
    const input = ref.current;
    const focusHandler = () => setFocus(true);
    input.addEventListener('focus', focusHandler, {
      passive: true
    });
    const blurHandler = () => setFocus(false);
    input.addEventListener('blur', blurHandler, {
      passive: true
    });
    return () => {
      if (input) input.removeEventListener('focus', focusHandler, {
        passive: true
      });
      if (input) input.removeEventListener('blur', blurHandler, {
        passive: true
      });
    };
  }, [ref]);
  (0, _react.useEffect)(() => {
    value = "".concat(value);
    if (focus && value.length < 1) return;
    if (value.trim() === '-') return;
    let parse = parseFloat(value);
    if (!isFinite(parse) && (0, _isType.isFunc)(editHandler)) {
      editHandler('0');
      return;
    }
    if ((0, _isType.isNum)(min) && parse < min) {
      editHandler(min);
      return;
    }
    if ((0, _isType.isNum)(max) && parse > max) {
      editHandler(max);
      return;
    }
  }, [value, focus]);
  const changeHandler = (0, _react.useCallback)(e => {
    if (!ref || !ref.current) return;
    const input = ref.current;
    const newValue = input.value;
    const isDecimal = false;
    let validValue;
    if (newValue.length < 1) validValue = '';else if (newValue.trim() === '-') validValue = '-';else if (!isDecimal) {
      const parse = parseInt(newValue);
      if (!isFinite(parse)) return;
      validValue = "".concat(parse);
    } else validValue = '0';
    if ((0, _isType.isFunc)(editHandler)) editHandler(validValue);
  }, [ref]);
  const plusHandler = (0, _react.useCallback)(function (e) {
    let multiple = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
    e.preventDefault();
    let nowValue = parseFloat(value);
    if (!isFinite(nowValue)) nowValue = 0;
    nowValue += multiple * increment;
    if ((0, _isType.isNum)(min) && nowValue < min) nowValue = min;
    if ((0, _isType.isNum)(max) && nowValue > max) nowValue = max;
    if ((0, _isType.isFunc)(editHandler)) editHandler(nowValue);
  }, [value, increment]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "prefect9-field prefect9-counter ".concat((0, _isType.isStr)(className) && className.length ? className : ''),
    children: [(0, _isType.isStr)(label) && label.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
      htmlFor: id,
      className: "prefect9-field__label",
      children: label
    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "prefect9-field__container",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        className: "prefect9-counter__minus",
        onClick: e => plusHandler(e, -1),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Icons.Minus, {})
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
        ref: ref,
        id: id,
        className: "prefect9-field__input",
        value: value,
        onInput: changeHandler,
        autoComplete: "off"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        className: "prefect9-counter__plus",
        onClick: e => plusHandler(e),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Icons.Plus, {})
      })]
    })]
  });
}
var _default = exports.default = CountField;