rsuite 6.0.0-canary-20250416 → 6.0.0-canary-20250424

package/esm/InputNumber/InputNumber.js

@@ -1,293 +0,0 @@
-'use client';
-import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react';
-import isNil from 'lodash/isNil';
-import on from 'dom-lib/on';
-import ArrowUpLineIcon from '@rsuite/icons/ArrowUpLine';
-import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
-import InputGroup from "../InputGroup/InputGroup.js";
-import InputGroupAddon from "../InputGroup/InputGroupAddon.js";
-import Input from "../Input/index.js";
-import Button from "../Button/index.js";
-import Box from "../internals/Box/index.js";
-import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
-import { KEY_VALUES } from "../internals/constants/index.js";
-import { forwardRef, partitionHTMLProps, createChainedFunction } from "../internals/utils/index.js";
-import { useCustom } from "../CustomProvider/index.js";
-/**
- * Check if the value is a number.
- * @param value
- */
-const isNumber = value => /(^-?|^\+?|^\d?)\d*\.\d+$/.test(value + '');
-
-/**
- * Get the length of the decimal.
- * @param value
- */
-function getDecimalLength(value) {
-  if (isNumber(value)) {
-    return value.toString().split('.')[1].length;
-  }
-  return 0;
-}
-
-/**
- * Get the value after the decimal point.
- * @param values
- */
-function decimals() {
-  for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
-    values[_key] = arguments[_key];
-  }
-  const lengths = values.map(getDecimalLength);
-  return Math.max(...lengths);
-}
-
-/**
- * Disable the upper limit of the number.
- * @param value
- * @param max
- */
-function valueReachesMax(value, max) {
-  if (!isNil(value)) {
-    return +value >= max;
-  }
-  return false;
-}
-
-/**
- * Disable the lower limit of the number.
- * @param value
- * @param min
- */
-function valueReachesMin(value, min) {
-  if (!isNil(value)) {
-    return +value <= min;
-  }
-  return false;
-}
-
-/**
- * The `InputNumber` component is used to enter a numerical value.
- * @see https://rsuitejs.com/components/input-number
- */
-const InputNumber = forwardRef((props, ref) => {
-  const {
-    propsWithDefaults
-  } = useCustom('InputNumber', props);
-  const {
-    as = InputGroup,
-    className,
-    classPrefix = 'input-number',
-    disabled,
-    decimalSeparator,
-    formatter,
-    readOnly,
-    plaintext,
-    value: valueProp,
-    defaultValue,
-    size,
-    prefix: prefixElement,
-    postfix,
-    step = 1,
-    buttonAppearance = 'subtle',
-    min: minProp,
-    max: maxProp,
-    scrollable = true,
-    onChange,
-    onWheel,
-    onBlur,
-    onFocus,
-    ...restProps
-  } = propsWithDefaults;
-  const min = minProp !== null && minProp !== void 0 ? minProp : -Infinity;
-  const max = maxProp !== null && maxProp !== void 0 ? maxProp : Infinity;
-  const [value, setValue] = useControlled(valueProp, defaultValue);
-  const [isFocused, setIsFocused] = useState(false);
-  const {
-    withPrefix,
-    merge,
-    prefix
-  } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix());
-  const [htmlInputProps, rest] = partitionHTMLProps(restProps);
-  const inputRef = useRef(null);
-  const getSafeValue = value => {
-    if (!Number.isNaN(value)) {
-      if (+value > max) {
-        value = max;
-      }
-      if (+value < min) {
-        value = min;
-      }
-    } else {
-      value = '';
-    }
-    return value.toString();
-  };
-  const handleChangeValue = useEventCallback((currentValue, event) => {
-    if (currentValue !== value) {
-      setValue(currentValue);
-      onChange === null || onChange === void 0 || onChange(currentValue, event);
-    }
-  });
-
-  // Increment value by step
-  const handleStepUp = useEventCallback(event => {
-    const val = +(value || 0);
-    const bit = decimals(val, step);
-    handleChangeValue(getSafeValue((val + step).toFixed(bit)), event);
-  });
-
-  // Decrement value by step
-  const handleStepDown = useEventCallback(event => {
-    const val = +(value || 0);
-    const bit = decimals(val, step);
-    handleChangeValue(getSafeValue((val - step).toFixed(bit)), event);
-  });
-
-  // Disables step up/down button when
-  // - InputNumber is disabled/readonly
-  // - value reaches max/min limits
-  const stepUpDisabled = disabled || readOnly || valueReachesMax(value, max);
-  const stepDownDisabled = disabled || readOnly || valueReachesMin(value, min);
-  const handleKeyDown = useEventCallback(event => {
-    switch (event.key) {
-      case KEY_VALUES.UP:
-        event.preventDefault();
-        handleStepUp(event);
-        break;
-      case KEY_VALUES.DOWN:
-        event.preventDefault();
-        handleStepDown(event);
-        break;
-      case KEY_VALUES.HOME:
-        if (typeof minProp !== 'undefined') {
-          event.preventDefault();
-          handleChangeValue(getSafeValue(minProp), event);
-        }
-        break;
-      case KEY_VALUES.END:
-        if (typeof maxProp !== 'undefined') {
-          event.preventDefault();
-          handleChangeValue(getSafeValue(maxProp), event);
-        }
-        break;
-    }
-  });
-  const handleWheel = useEventCallback(event => {
-    if (!scrollable) {
-      event.preventDefault();
-      return;
-    }
-    if (!disabled && !readOnly && event.target === document.activeElement) {
-      event.preventDefault();
-      const delta = event['wheelDelta'] || -event.deltaY || -(event === null || event === void 0 ? void 0 : event.detail);
-      if (delta > 0) {
-        handleStepDown(event);
-      }
-      if (delta < 0) {
-        handleStepUp(event);
-      }
-    }
-    onWheel === null || onWheel === void 0 || onWheel(event);
-  });
-  const handleChange = useEventCallback((value, event) => {
-    const separator = decimalSeparator || '.';
-    const escapedSeparator = separator.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
-    const regex = new RegExp(`^-?(?:\\d+)?(${escapedSeparator})?\\d*$`);
-    if (!regex.test(value) && value !== '') {
-      return;
-    }
-    handleChangeValue(value, event);
-  });
-  const replaceDecimalSeparator = useCallback(value => {
-    if (decimalSeparator && value) {
-      return value.toString().replace('.', decimalSeparator);
-    }
-    return value;
-  }, [decimalSeparator]);
-  const restoreDecimalSeparator = useCallback(value => {
-    if (decimalSeparator && value) {
-      return value.replace(decimalSeparator, '.');
-    }
-    return value;
-  }, [decimalSeparator]);
-  const handleBlur = useEventCallback(event => {
-    var _event$target;
-    const value = restoreDecimalSeparator((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    const targetValue = Number.parseFloat(value);
-    handleChangeValue(getSafeValue(targetValue), event);
-    setIsFocused(false);
-  });
-  useEffect(() => {
-    let wheelListener;
-    if (inputRef.current) {
-      wheelListener = on(inputRef.current, 'wheel', handleWheel, {
-        passive: false
-      });
-    }
-    return () => {
-      var _wheelListener;
-      (_wheelListener = wheelListener) === null || _wheelListener === void 0 || _wheelListener.off();
-    };
-  }, [handleWheel, scrollable]);
-  const inputValue = useMemo(() => {
-    if (isNil(value)) {
-      return '';
-    }
-    if (isFocused) {
-      return replaceDecimalSeparator(value);
-    }
-    if (formatter) {
-      return formatter(value);
-    }
-    return replaceDecimalSeparator(value);
-  }, [formatter, isFocused, replaceDecimalSeparator, value]);
-  const input = /*#__PURE__*/React.createElement(Input, _extends({}, htmlInputProps, {
-    ref: plaintext ? ref : undefined,
-    inputRef: inputRef,
-    autoComplete: "off",
-    inputMode: "numeric",
-    step: step,
-    value: inputValue,
-    disabled: disabled,
-    readOnly: readOnly,
-    plaintext: plaintext,
-    onKeyDown: handleKeyDown,
-    onChange: handleChange,
-    onBlur: createChainedFunction(handleBlur, onBlur),
-    onFocus: createChainedFunction(() => setIsFocused(true), onFocus)
-  }));
-  if (plaintext) {
-    return input;
-  }
-  return /*#__PURE__*/React.createElement(Box, _extends({
-    as: as
-  }, rest, {
-    ref: ref,
-    className: classes,
-    disabled: disabled,
-    size: size
-  }), prefixElement && /*#__PURE__*/React.createElement(InputGroupAddon, null, prefixElement), input, /*#__PURE__*/React.createElement("span", {
-    className: prefix('btn-group-vertical')
-  }, /*#__PURE__*/React.createElement(Button, {
-    tabIndex: -1,
-    appearance: buttonAppearance,
-    className: prefix('touchspin-up'),
-    onClick: handleStepUp,
-    disabled: stepUpDisabled,
-    "aria-label": "Increment",
-    size: size
-  }, /*#__PURE__*/React.createElement(ArrowUpLineIcon, null)), /*#__PURE__*/React.createElement(Button, {
-    tabIndex: -1,
-    appearance: buttonAppearance,
-    className: prefix('touchspin-down'),
-    onClick: handleStepDown,
-    disabled: stepDownDisabled,
-    "aria-label": "Decrement",
-    size: size
-  }, /*#__PURE__*/React.createElement(ArrowDownLineIcon, null))), postfix && /*#__PURE__*/React.createElement(InputGroupAddon, null, postfix));
-});
-InputNumber.displayName = 'InputNumber';
-export default InputNumber;