pouncejs/dist/esm/components/NumberInput/NumberInput.js

A collection of UI components from Panther labs

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import { slugify, noop, isEmptyValue } from '../../utils/helpers';
import { typedMemo } from '../../utils/helpers';
import { InputControl, InputElement, InputLabel } from '../utils/Input';
import AbstractButton from '../AbstractButton';
import Icon from '../Icon';
import Flex from '../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 ? noop : _ref2$onInputNumberCh,
      _ref2$onChange = _ref2.onChange,
      _onChange2 = _ref2$onChange === void 0 ? noop : _ref2$onChange,
      rest = _objectWithoutPropertiesLoose(_ref2, ["label", "invalid", "required", "disabled", "id", "name", "value", "max", "min", "onInputNumberChange", "onChange"]);

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

  var _ref = React.useRef(null);

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

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

  var stepUp = React.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, _onChange, setInputNumberValue]);
  var stepDown = React.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, _onChange, setInputNumberValue]);
  var identifier = id || name || slugify(label);

  var inputNumberProps = _extends({}, rest, {
    onChange: function onChange(e) {
      setInputNumberValue(Number(e.currentTarget.value));

      _onChange(e.currentTarget.value);

      _onChange2(e);
    }
  });

  return /*#__PURE__*/React.createElement(InputControl, {
    invalid: invalid,
    disabled: disabled,
    required: required
  }, /*#__PURE__*/React.createElement(InputElement, _extends({
    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.createElement(InputLabel, {
    raised: !isEmptyValue(value),
    htmlFor: identifier
  }, label), /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    position: "absolute",
    top: 0,
    right: 0,
    height: "100%",
    color: "white",
    borderLeft: "1px solid",
    borderColor: "navyblue-300"
  }, /*#__PURE__*/React.createElement(AbstractButton, {
    "aria-label": "Increment",
    "aria-hidden": true,
    tabIndex: -1,
    onClick: stepUp
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "caret-up",
    size: "large"
  })), /*#__PURE__*/React.createElement(AbstractButton, {
    "aria-label": "Decrement",
    "aria-hidden": true,
    tabIndex: -1,
    onClick: stepDown
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "caret-down",
    size: "large"
  }))));
}

export default typedMemo(NumberInput);