rc-input-number - npm Package Compare versions

Comparing version 8.4.0 to 8.5.0

es/InputNumber.d.ts

@@ -35,2 +35,3 @@ import { ValueType } from '@rc-component/mini-decimal';
     keyboard?: boolean;
+    wheel?: boolean;
     /** Parse display value to validate number */
@@ -37,0 +38,0 @@ parser?: (displayValue: string | undefined) => T;

es/InputNumber.js

@@ -6,3 +6,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "className", "style", "min", "max", "step", "defaultValue", "value", "disabled", "readOnly", "upHandler", "downHandler", "keyboard", "controls", "classNames", "stringMode", "parser", "formatter", "precision", "decimalSeparator", "onChange", "onInput", "onPressEnter", "onStep", "changeOnBlur"],
+var _excluded = ["prefixCls", "className", "style", "min", "max", "step", "defaultValue", "value", "disabled", "readOnly", "upHandler", "downHandler", "keyboard", "wheel", "controls", "classNames", "stringMode", "parser", "formatter", "precision", "decimalSeparator", "onChange", "onInput", "onPressEnter", "onStep", "changeOnBlur"],
   _excluded2 = ["disabled", "style", "prefixCls", "value", "prefix", "suffix", "addonBefore", "addonAfter", "classes", "className", "classNames"];
@@ -58,2 +58,3 @@ import getMiniDecimal, { getNumberPrecision, num2str, toFixed, validateNumber } from '@rc-component/mini-decimal';
     keyboard = props.keyboard,
+    wheel = props.wheel,
     _props$controls = props.controls,
@@ -275,3 +276,3 @@ controls = _props$controls === void 0 ? true : _props$controls,
         setUncontrolledDecimalValue(updateValue);
-        onChange === null || onChange === void 0 ? void 0 : onChange(updateValue.isEmpty() ? null : getDecimalValue(stringMode, updateValue));
+        onChange === null || onChange === void 0 || onChange(updateValue.isEmpty() ? null : getDecimalValue(stringMode, updateValue));
 
@@ -310,3 +311,3 @@ // Reformat input if value is not controlled
     // Trigger onInput later to let user customize value if they want to handle something after onChange
-    onInput === null || onInput === void 0 ? void 0 : onInput(inputStr);
+    onInput === null || onInput === void 0 || onInput(inputStr);
 
@@ -357,7 +358,7 @@ // optimize for chinese input experience
     var updatedValue = triggerValueUpdate(target, false);
-    onStep === null || onStep === void 0 ? void 0 : onStep(getDecimalValue(stringMode, updatedValue), {
+    onStep === null || onStep === void 0 || onStep(getDecimalValue(stringMode, updatedValue), {
       offset: shiftKeyRef.current ? getDecupleSteps(step) : step,
       type: up ? 'up' : 'down'
     });
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
   };
@@ -404,3 +405,3 @@
       flushInputValue(false);
-      onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(event);
+      onPressEnter === null || onPressEnter === void 0 || onPressEnter(event);
     }
@@ -421,2 +422,25 @@ if (keyboard === false) {
   };
+  React.useEffect(function () {
+    var onWheel = function onWheel(event) {
+      if (wheel === false) {
+        return;
+      }
+      ;
+      // moving mouse wheel rises wheel event with deltaY < 0
+      // scroll value grows from top to bottom, as screen Y coordinate
+      onInternalStep(event.deltaY < 0);
+      event.preventDefault();
+    };
+    var input = inputRef.current;
+    if (input) {
+      // React onWheel is passive and we can't preventDefault() in it.
+      // That's why we should subscribe with DOM listener
+      // https://stackoverflow.com/questions/63663025/react-onwheel-handler-cant-preventdefault-because-its-a-passive-event-listenev
+      input.addEventListener('wheel', onWheel);
+      return function () {
+        return input.removeEventListener('wheel', onWheel);
+      };
+    }
+    ;
+  }, [onInternalStep]);
 
@@ -423,0 +447,0 @@ // >>> Focus & Blur

lib/hooks/useFrame.js

@@ -13,3 +13,3 @@ "use strict";
  */
-var _default = function _default() {
+var _default = exports.default = function _default() {
   var idRef = (0, _react.useRef)(0);
@@ -28,3 +28,2 @@ var cleanUp = function cleanUp() {
   };
-};
-exports.default = _default;
+};

lib/index.js

@@ -9,3 +9,2 @@ "use strict";
 var _InputNumber = _interopRequireDefault(require("./InputNumber"));
-var _default = _InputNumber.default;
-exports.default = _default;
+var _default = exports.default = _InputNumber.default;

lib/InputNumber.d.ts

@@ -35,2 +35,3 @@ import { ValueType } from '@rc-component/mini-decimal';
     keyboard?: boolean;
+    wheel?: boolean;
     /** Parse display value to validate number */
@@ -37,0 +38,0 @@ parser?: (displayValue: string | undefined) => T;

lib/InputNumber.js

@@ -25,6 +25,6 @@ "use strict";
 var _useFrame = _interopRequireDefault(require("./hooks/useFrame"));
-var _excluded = ["prefixCls", "className", "style", "min", "max", "step", "defaultValue", "value", "disabled", "readOnly", "upHandler", "downHandler", "keyboard", "controls", "classNames", "stringMode", "parser", "formatter", "precision", "decimalSeparator", "onChange", "onInput", "onPressEnter", "onStep", "changeOnBlur"],
+var _excluded = ["prefixCls", "className", "style", "min", "max", "step", "defaultValue", "value", "disabled", "readOnly", "upHandler", "downHandler", "keyboard", "wheel", "controls", "classNames", "stringMode", "parser", "formatter", "precision", "decimalSeparator", "onChange", "onInput", "onPressEnter", "onStep", "changeOnBlur"],
   _excluded2 = ["disabled", "style", "prefixCls", "value", "prefix", "suffix", "addonBefore", "addonAfter", "classes", "className", "classNames"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -68,2 +68,3 @@ * We support `stringMode` which need handle correct type when user call in onChange
     keyboard = props.keyboard,
+    wheel = props.wheel,
     _props$controls = props.controls,
@@ -285,3 +286,3 @@ controls = _props$controls === void 0 ? true : _props$controls,
         setUncontrolledDecimalValue(updateValue);
-        onChange === null || onChange === void 0 ? void 0 : onChange(updateValue.isEmpty() ? null : getDecimalValue(stringMode, updateValue));
+        onChange === null || onChange === void 0 || onChange(updateValue.isEmpty() ? null : getDecimalValue(stringMode, updateValue));
 
@@ -320,3 +321,3 @@ // Reformat input if value is not controlled
     // Trigger onInput later to let user customize value if they want to handle something after onChange
-    onInput === null || onInput === void 0 ? void 0 : onInput(inputStr);
+    onInput === null || onInput === void 0 || onInput(inputStr);
 
@@ -367,7 +368,7 @@ // optimize for chinese input experience
     var updatedValue = triggerValueUpdate(target, false);
-    onStep === null || onStep === void 0 ? void 0 : onStep(getDecimalValue(stringMode, updatedValue), {
+    onStep === null || onStep === void 0 || onStep(getDecimalValue(stringMode, updatedValue), {
       offset: shiftKeyRef.current ? (0, _numberUtil.getDecupleSteps)(step) : step,
       type: up ? 'up' : 'down'
     });
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
   };
@@ -414,3 +415,3 @@
       flushInputValue(false);
-      onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(event);
+      onPressEnter === null || onPressEnter === void 0 || onPressEnter(event);
     }
@@ -431,2 +432,25 @@ if (keyboard === false) {
   };
+  React.useEffect(function () {
+    var onWheel = function onWheel(event) {
+      if (wheel === false) {
+        return;
+      }
+      ;
+      // moving mouse wheel rises wheel event with deltaY < 0
+      // scroll value grows from top to bottom, as screen Y coordinate
+      onInternalStep(event.deltaY < 0);
+      event.preventDefault();
+    };
+    var input = inputRef.current;
+    if (input) {
+      // React onWheel is passive and we can't preventDefault() in it.
+      // That's why we should subscribe with DOM listener
+      // https://stackoverflow.com/questions/63663025/react-onwheel-handler-cant-preventdefault-because-its-a-passive-event-listenev
+      input.addEventListener('wheel', onWheel);
+      return function () {
+        return input.removeEventListener('wheel', onWheel);
+      };
+    }
+    ;
+  }, [onInternalStep]);
 
@@ -556,3 +580,2 @@ // >>> Focus & Blur
 InputNumber.displayName = 'InputNumber';
-var _default = InputNumber;
-exports.default = _default;
+var _default = exports.default = InputNumber;

lib/StepHandler.js

@@ -15,4 +15,4 @@ "use strict";
 var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable react/no-unknown-property */
@@ -19,0 +19,0 @@

package.json

 {
   "name": "rc-input-number",
-  "version": "8.4.0",
+  "version": "8.5.0",
   "description": "React input-number component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -241,2 +241,8 @@ # rc-input-number
         </tr>
+        <tr>
+          <td>wheel</td>
+          <td>Boolean</td>
+          <td>true</td>
+          <td>Allows changing value with mouse wheel</td>
+        </tr>
     </tbody>
@@ -250,2 +256,6 @@ </table>
 
+## Mouse Wheel
+* When you scroll up or down, the input value will be increased or decreased by `step`
+* Scrolling with the <kbd>Shift</kbd> key, the input value will be changed by `10 * step`
+
 ## Test Case
@@ -252,0 +262,0 @@

No alert changes

Improved metrics

Total package byte prevSize

80447

increased by1.77%

Lines of code

1762

increased by2.5%

Number of lines in readme file

277

increased by3.75%

No dependency changes