@ntragas/pouncejstest/dist/cjs/components/NumberInput/NumberInput.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _helpers = require("../../utils/helpers");

var _Input = require("../utils/Input");

var _AbstractButton = _interopRequireDefault(require("../AbstractButton"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Flex = _interopRequireDefault(require("../Flex"));

/**
 * A number input is a typical HTML <input> for numbers
 */
function NumberInput(_ref2) {
  var label = _ref2.label,
      invalid = _ref2.invalid,
      required = _ref2.required,
      disabled = _ref2.disabled,
      id = _ref2.id,
      name = _ref2.name,
      _ref2$value = _ref2.value,
      value = _ref2$value === void 0 ? 0 : _ref2$value,
      max = _ref2.max,
      min = _ref2.min,
      _ref2$onInputNumberCh = _ref2.onInputNumberChange,
      onInputNumberChange = _ref2$onInputNumberCh === void 0 ? _helpers.noop : _ref2$onInputNumberCh,
      _ref2$onChange = _ref2.onChange,
      _onChange2 = _ref2$onChange === void 0 ? _helpers.noop : _ref2$onChange,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["label", "invalid", "required", "disabled", "id", "name", "value", "max", "min", "onInputNumberChange", "onChange"]);

  var _React$useState = _react.default.useState(0),
      inputNumberValue = _React$useState[0],
      setInputNumberValue = _React$useState[1];

  var _ref = _react.default.useRef(null);

  _react.default.useLayoutEffect(function () {
    setInputNumberValue(value);
  }, [value]);

  var _onChange = _react.default.useCallback(function (num) {
    onInputNumberChange(num);
    setInputNumberValue(num);
  }, [onInputNumberChange, setInputNumberValue]);

  var stepUp = _react.default.useCallback(function () {
    var _ref$current, _ref$current2;

    (_ref$current = _ref.current) == null ? void 0 : _ref$current.stepUp();

    _onChange((_ref$current2 = _ref.current) == null ? void 0 : _ref$current2.value);
  }, [_ref, setInputNumberValue]);

  var stepDown = _react.default.useCallback(function () {
    var _ref$current3, _ref$current4;

    (_ref$current3 = _ref.current) == null ? void 0 : _ref$current3.stepDown();

    _onChange((_ref$current4 = _ref.current) == null ? void 0 : _ref$current4.value);
  }, [_ref, setInputNumberValue]);

  var identifier = id || name || (0, _helpers.slugify)(label);
  var inputNumberProps = (0, _extends2.default)({}, rest, {
    onChange: function onChange(e) {
      setInputNumberValue(Number(e.currentTarget.value));

      _onChange(e.currentTarget.value);

      _onChange2(e);
    }
  });
  return /*#__PURE__*/_react.default.createElement(_Input.InputControl, {
    invalid: invalid,
    disabled: disabled,
    required: required
  }, /*#__PURE__*/_react.default.createElement(_Input.InputElement, (0, _extends2.default)({
    as: "input",
    type: "number",
    role: "spinbutton",
    id: identifier,
    name: name,
    value: inputNumberValue,
    "aria-valuenow": value !== undefined ? Number(value) : undefined,
    max: max,
    "aria-valuemax": max,
    min: min,
    "aria-valuemin": min,
    ref: _ref
  }, inputNumberProps)), /*#__PURE__*/_react.default.createElement(_Input.InputLabel, {
    raised: !(0, _helpers.isEmptyValue)(value),
    htmlFor: identifier
  }, label), /*#__PURE__*/_react.default.createElement(_Flex.default, {
    direction: "column",
    position: "absolute",
    top: 0,
    right: 0,
    height: "100%",
    color: "white",
    borderLeft: "1px solid",
    borderColor: "navyblue-300"
  }, /*#__PURE__*/_react.default.createElement(_AbstractButton.default, {
    "aria-label": "Increment",
    "aria-hidden": true,
    tabIndex: -1,
    onClick: stepUp
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
    type: "caret-up",
    size: "large"
  })), /*#__PURE__*/_react.default.createElement(_AbstractButton.default, {
    "aria-label": "Decrement",
    "aria-hidden": true,
    tabIndex: -1,
    onClick: stepDown
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
    type: "caret-down",
    size: "large"
  }))));
}

var _default = (0, _helpers.typedMemo)(NumberInput);

exports.default = _default;