react-intl-number-input 0.3.2 → 0.5.0

package/README.md

@@ -1,20 +1,41 @@
-# react-intl-number-input
-A React component for masked and formatted number input.
-
-[Demo](https://nandorip.github.io/react-intl-number-input/example/dist/)
-
-## Install
-
-```
-npm install react-intl-number-input
-```
-
-## Usage
-
-```javascript
-import React from 'react'
-import { render } from 'react-dom';
-import IntlNumberInput from 'react-intl-number-input';
+# react-intl-number-input
+A React component for masked and formatted number input.
+
+[Demo](https://nandorip.github.io/react-intl-number-input/example/dist/)
+
+## Requirements
+
+- Node.js 18+ (recommended: latest LTS)
+- React / ReactDOM: `>=16.8.0 <20`
+
+## Install
+
+```
+npm install react-intl-number-input
+```
+
+## Development
+
+```
+npm install
+npm start
+```
+
+Open `http://localhost:3001`.
+
+## Scripts
+
+- `npm start`: runs webpack dev server
+- `npm run build`: builds the demo bundle in `example/dist`
+- `npm run transpile`: transpiles library source from `src` to `dist`
+- `npm test`: runs unit tests with Jest
+- `npm run publish-demo`: builds and deploys demo to GitHub Pages
+
+## Usage
+
+```javascript
+import React from 'react'
+import IntlNumberInput from 'react-intl-number-input';
 
 class App extends React.Component {
   constructor(props) {
@@ -48,10 +69,26 @@ class App extends React.Component {
       </div>
     );
   }
-}
-
-render(<App />, document.getElementById("root"));
-```
+}
+
+```
+
+React 18+:
+
+```javascript
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);
+```
+
+React 16/17:
+
+```javascript
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<App />, document.getElementById("root"));
+```
 
 ## Properties
 

package/dist/index.js

@@ -1,130 +1,135 @@
-'use strict';
+"use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var IntlNumberInput = function (_Component) {
-  _inherits(IntlNumberInput, _Component);
-
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var IntlNumberInput = /*#__PURE__*/function (_Component) {
   function IntlNumberInput(props) {
+    var _this;
     _classCallCheck(this, IntlNumberInput);
-
-    var _this = _possibleConstructorReturn(this, (IntlNumberInput.__proto__ || Object.getPrototypeOf(IntlNumberInput)).call(this, props));
-
+    _this = _callSuper(this, IntlNumberInput, [props]);
     _this.state = {
-      maskedValue: '0'
+      maskedValue: '0',
+      value: 0
     };
     return _this;
   }
-
-  _createClass(IntlNumberInput, [{
-    key: 'componentDidMount',
+  _inherits(IntlNumberInput, _Component);
+  return _createClass(IntlNumberInput, [{
+    key: "componentDidMount",
     value: function componentDidMount() {
       this.setMaskedValue(this.props.value);
     }
   }, {
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (prevProps.value !== this.props.value) {
         this.setMaskedValue(this.props.value);
       }
     }
   }, {
-    key: 'setMaskedValue',
+    key: "setMaskedValue",
     value: function setMaskedValue() {
       var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
       this.setState({
         maskedValue: this.formatNumber(value)
       });
     }
   }, {
-    key: 'getMaskedValue',
+    key: "getMaskedValue",
     value: function getMaskedValue() {
       return this.state.maskedValue;
     }
   }, {
-    key: 'formatNumber',
+    key: "getValue",
+    value: function getValue() {
+      return this.state.value;
+    }
+  }, {
+    key: "getPrecisionValue",
+    value: function getPrecisionValue(precision) {
+      return Math.pow(10, precision);
+    }
+  }, {
+    key: "getNumberValue",
+    value: function getNumberValue(strValue) {
+      var numberValue = Number(strValue.replace(/[^0-9]/g, ''));
+      return numberValue / this.getPrecisionValue(this.props.precision);
+    }
+  }, {
+    key: "formatNumber",
     value: function formatNumber() {
       var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
       var numberValue = value;
       if (typeof numberValue === 'string') {
         numberValue = this.getNumberValue(numberValue);
       }
-
       var formattedNumber = new Intl.NumberFormat(this.props.locale, {
         style: 'decimal',
         minimumFractionDigits: this.props.precision,
         maximumFractionDigits: this.props.precision
       }).format(numberValue);
-
-      return '' + this.props.prefix + formattedNumber + this.props.suffix;
-    }
-  }, {
-    key: 'getPrecisionValue',
-    value: function getPrecisionValue(precision) {
-      return Math.pow(10, precision);
-    }
-  }, {
-    key: 'getNumberValue',
-    value: function getNumberValue(strValue) {
-      var numberValue = Number(strValue.replace(/[^0-9-]/g, ''));
-
-      return numberValue / this.getPrecisionValue(this.props.precision);
+      return "".concat(this.props.prefix).concat(formattedNumber).concat(this.props.suffix);
     }
   }, {
-    key: 'updateValues',
+    key: "updateValues",
     value: function updateValues(event) {
       var value = this.getNumberValue(event.target.value);
       var maskedValue = this.formatNumber(value);
-
-      this.setState({ maskedValue: maskedValue });
-
       return [value, maskedValue];
     }
   }, {
-    key: 'handleChange',
+    key: "handleChange",
     value: function handleChange(event) {
+      var _this2 = this;
       event.preventDefault();
-
-      var _updateValues = this.updateValues(event),
-          _updateValues2 = _slicedToArray(_updateValues, 2),
-          value = _updateValues2[0],
-          maskedValue = _updateValues2[1];
-
+      var _this$updateValues = this.updateValues(event),
+        _this$updateValues2 = _slicedToArray(_this$updateValues, 2),
+        value = _this$updateValues2[0],
+        maskedValue = _this$updateValues2[1];
+      event.persist();
       if (this.props.onChange && maskedValue) {
-        this.props.onChange(event, value, maskedValue);
+        this.setState({
+          value: value,
+          maskedValue: maskedValue
+        }, function () {
+          _this2.props.onChange(event, value, maskedValue);
+        });
       }
     }
   }, {
-    key: 'customProps',
+    key: "customProps",
     value: function customProps() {
-      var customProps = _extends({}, this.props);
-
+      var customProps = _objectSpread({}, this.props);
       delete customProps.locale;
       delete customProps.prefix;
       delete customProps.suffix;
@@ -132,42 +137,35 @@ var IntlNumberInput = function (_Component) {
       delete customProps.autoFocus;
       delete customProps.value;
       delete customProps.onChange;
-
       return customProps;
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
-      var _this2 = this;
-
-      return _react2.default.createElement('input', _extends({
+      var _this3 = this;
+      return /*#__PURE__*/_react["default"].createElement("input", _extends({
         value: this.state.maskedValue,
         disabled: this.props.disabled,
         onChange: function onChange(e) {
-          return _this2.handleChange(e);
+          return _this3.handleChange(e);
         }
       }, this.customProps()));
     }
   }]);
-
-  return IntlNumberInput;
 }(_react.Component);
-
 IntlNumberInput.propTypes = {
-  locale: _propTypes2.default.string.isRequired,
-  prefix: _propTypes2.default.string.isRequired,
-  suffix: _propTypes2.default.string.isRequired,
-  precision: _propTypes2.default.number.isRequired,
-  value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-  disabled: _propTypes2.default.bool,
-  onChange: _propTypes2.default.func
+  locale: _propTypes["default"].string.isRequired,
+  prefix: _propTypes["default"].string.isRequired,
+  suffix: _propTypes["default"].string.isRequired,
+  precision: _propTypes["default"].number.isRequired,
+  value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  disabled: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func
 };
-
 IntlNumberInput.defaultProps = {
   locale: 'en-US',
   prefix: '',
   suffix: '',
   precision: 2
 };
-
-exports.default = IntlNumberInput;
+var _default = exports["default"] = IntlNumberInput;

package/jest.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  moduleFileExtensions: ["js", "jsx"],
+  testMatch: ["**/*.test.jsx"]
+};

package/jest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-intl-number-input",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "A React component for masked and formatted number input.",
   "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack-dev-server --mode development",
-    "transpile": "babel src -d dist --copy-files",
+    "test": "jest --runInBand",
+    "start": "webpack serve --mode development",
+    "transpile": "babel src -d dist --copy-files --no-copy-ignored --ignore \"**/*.test.jsx\"",
     "prepublishOnly": "npm run transpile",
     "build": "webpack --mode production",
     "deploy": "gh-pages -d example/dist",
@@ -34,24 +34,30 @@
   },
   "homepage": "https://github.com/nandorip/react-intl-number-input#readme",
   "peerDependencies": {
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2"
+    "react": ">=16.8.0 <20",
+    "react-dom": ">=16.8.0 <20"
   },
-  "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "gh-pages": "^2.0.0",
-    "html-webpack-plugin": "^3.2.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "webpack": "^4.19.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.8"
+  "dependencies": {
+    "prop-types": "^15.8.1"
   },
-  "dependencies": {}
+  "devDependencies": {
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.4",
+    "@babel/plugin-transform-object-rest-spread": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "babel-jest": "^30.2.0",
+    "babel-loader": "^10.0.0",
+    "gh-pages": "^6.3.0",
+    "html-webpack-plugin": "^5.6.4",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
+  }
 }