@carbon/react/lib/components/FluidNumberInput/FluidNumberInput.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var cx = require('classnames');
require('../NumberInput/NumberInput.Skeleton.js');
var NumberInput = require('../NumberInput/NumberInput.js');
var usePrefix = require('../../internal/usePrefix.js');
var FormContext = require('../FluidForm/FormContext.js');
var NumberFormatPropTypes = require('../NumberInput/NumberFormatPropTypes.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

const FluidNumberInput = /*#__PURE__*/React__default["default"].forwardRef(function FluidNumberInput({
  className,
  ...other
}, ref) {
  const prefix = usePrefix.usePrefix();
  const classNames = cx__default["default"](`${prefix}--number-input--fluid`, className);
  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
    value: {
      isFluid: true
    }
  }, /*#__PURE__*/React__default["default"].createElement(NumberInput.NumberInput, _rollupPluginBabelHelpers["extends"]({
    ref: ref,
    className: classNames
  }, other)));
});
FluidNumberInput.propTypes = {
  /**
   * `true` to allow empty string.
   */
  allowEmpty: PropTypes__default["default"].bool,
  /**
   * Specify an optional className to be applied to the wrapper node
   */
  className: PropTypes__default["default"].string,
  /**
   * Optional starting value for uncontrolled state
   */
  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
  /**
   * Specify if the wheel functionality for the input should be disabled, or not
   */
  disableWheel: PropTypes__default["default"].bool,
  /**
   * Specify if the control should be disabled, or not
   */
  disabled: PropTypes__default["default"].bool,
  /**
   * **Experimental:** Specify Intl.NumberFormat options applied to internal
   * number parsing and formatting. Use with `type="text"`, has no effect when
   * `type="number"`.
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
   */
  formatOptions: NumberFormatPropTypes.NumberFormatOptionsPropType,
  /**
   * Provide a description for up/down icons that can be read by screen readers
   */
  iconDescription: PropTypes__default["default"].string,
  /**
   * Specify a custom `id` for the input
   */
  id: PropTypes__default["default"].string.isRequired,
  /**
   * Instruct the browser which keyboard to display on mobile devices. Note that
   * standard numeric keyboards vary across devices and operating systems.
   * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
   */
  inputMode: PropTypes__default["default"].oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),
  /**
   * Specify if the currently value is invalid.
   */
  invalid: PropTypes__default["default"].bool,
  /**
   * Message which is displayed if the value is invalid.
   */
  invalidText: PropTypes__default["default"].node,
  /**
   * Generic `label` that will be used as the textual representation of what
   * this field is for
   */
  label: PropTypes__default["default"].node,
  /**
   * **Experimental:** Specify a [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt)
   * language code for parsing and formatting. Use with `type="text"`, has no
   * effect when `type="number"`.
   */
  locale: PropTypes__default["default"].string,
  /**
   * The maximum value.
   */
  max: PropTypes__default["default"].number,
  /**
   * The minimum value.
   */
  min: PropTypes__default["default"].number,
  /**
   * Provide an optional handler that is called when the internal state of
   * NumberInput changes. This handler is called with event and state info.
   * When type="number", this is called on every change of the input.
   * When type="text", this is only called on blur after the number has been
   * parsed and formatted.
   * `(event, { value, direction }) => void`
   */
  onChange: PropTypes__default["default"].func,
  /**
   * Provide an optional function to be called when the up/down button is clicked
   */
  onClick: PropTypes__default["default"].func,
  /**
   * Provide an optional function to be called when a key is pressed in the number input
   */
  onKeyUp: PropTypes__default["default"].func,
  /**
   * When type="text", provide an optional pattern to restrict user input. Has
   * no effect when type="number".
   */
  pattern: PropTypes__default["default"].string,
  /**
   * Specify how much the values should increase/decrease upon clicking on up/down button
   */
  step: PropTypes__default["default"].number,
  /**
   * Provide custom text for the component for each translation id
   */
  translateWithId: PropTypes__default["default"].func,
  /**
   * **Experimental**: Specify if the input should be of type text or number.
   * Use type="text" with `locale`, `formatOptions`, and guide user input with
   * `pattern` and `inputMode`.
   */
  type: PropTypes__default["default"].oneOf(['number', 'text']),
  /**
   * Specify the value of the input
   */
  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
  /**
   * Specify whether the control is currently in warning state
   */
  warn: PropTypes__default["default"].bool,
  /**
   * Provide the text that is displayed when the control is in warning state
   */
  warnText: PropTypes__default["default"].node,
  /**
   * Whether or not the component is readonly
   */
  readOnly: PropTypes__default["default"].bool
};

exports["default"] = FluidNumberInput;