jb-input-react - npm Package Compare versions

Comparing version 1.0.8 to 2.0.0

dist/JBInput.js

@@ -33,3 +33,2 @@ import React, { useEffect, useRef, useState, useImperativeHandle, useCallback } from 'react';
 }
-
 module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -44,3 +43,2 @@ });
 }
-
 module.exports = _arrayWithHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -51,31 +49,28 @@ });
 function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
     try {
-      if (!_n && _i["return"] != null) _i["return"]();
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
     } finally {
-      if (_d) throw _e;
+      try {
+        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
     }
+    return _arr;
   }
-
-  return _arr;
 }
-
 module.exports = _iterableToArrayLimit, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -87,10 +82,5 @@ });
   if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
   return arr2;
 }
-
 module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -108,3 +98,2 @@ });
 }
-
 module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -117,3 +106,2 @@ });
 }
-
 module.exports = _nonIterableRest, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -126,3 +114,2 @@ });
 }
-
 module.exports = _slicedToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -139,5 +126,4 @@ });
       dom.addEventListener(event, handler, passive);
-    } // this will clean up the event every time the component is re-rendered
-
-
+    }
+    // this will clean up the event every time the component is re-rendered
     return function cleanup() {
@@ -151,2 +137,3 @@ if (dom) {
 
+// eslint-disable-next-line react/display-name
 var JBInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -157,70 +144,58 @@ /**
   var element = useRef();
-
   var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      refChangeCount = _useState2[0],
-      refChangeCountSetter = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    refChangeCount = _useState2[0],
+    refChangeCountSetter = _useState2[1];
   useImperativeHandle(ref, function () {
     return element ? element.current : {};
   }, [element]);
+  //to force rerender for events
   useEffect(function () {
     refChangeCountSetter(refChangeCount + 1);
   }, [element.current]);
-
-  function onChange(e) {
-    if (props.onChange) {
+  var onChange = useCallback(function (e) {
+    if (typeof props.onChange === "function") {
       props.onChange(e);
     }
-  }
-
-  function onKeydown(e) {
-    if (props.onKeydown) {
+  });
+  var onKeydown = useCallback(function (e) {
+    if (typeof props.onKeydown === "function") {
       props.onKeydown(e);
     }
-  }
-
+  }, [props.onKeydown]);
   var onKeyup = useCallback(function (e) {
-    if (typeof props.onKeyup == "function") {
+    if (typeof props.onKeyup === "function") {
       props.onKeyup(e);
     }
-  }, []);
-
-  function onEnter(e) {
+  }, [props.onKeyup]);
+  var onEnter = useCallback(function (e) {
     if (props.onEnter) {
       props.onEnter(e);
     }
-  }
-
-  function onFocus(e) {
+  }, [props.onEnter]);
+  var onFocus = useCallback(function (e) {
     if (props.onFocus && e instanceof FocusEvent) {
       props.onFocus(e);
     }
-  }
-
-  function onBlur(e) {
+  }, [props.onFocus]);
+  var onBlur = useCallback(function (e) {
     if (props.onBlur && e instanceof FocusEvent) {
       props.onBlur(e);
     }
-  }
-
-  function onInput(e) {
+  }, [props.onBlur]);
+  var onInput = useCallback(function (e) {
     if (typeof props.onInput == 'function' && e instanceof InputEvent) {
       props.onInput(e);
     }
-  }
-
-  function onBeforeInput(e) {
+  }, [props.onInput]);
+  var onBeforeInput = useCallback(function (e) {
     if (typeof props.onBeforeInput == 'function' && e instanceof InputEvent) {
       props.onBeforeInput(e);
     }
-  }
-
+  }, [props.onBeforeInput]);
   useEffect(function () {
     var value = props.value;
-
     if (props.value == null || props.value === undefined) {
       value = '';
     }
-
     element.current.value = value;
@@ -291,3 +266,3 @@ }, [props.value]);
 
-export { JBInput as default };
+export { JBInput };
 //# sourceMappingURL=JBInput.js.map

dist/JBInput.umd.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('prop-types'), require('jb-input')) :
-	typeof define === 'function' && define.amd ? define(['react', 'prop-types', 'jb-input'], factory) :
-	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.JBInput = factory(global.React, global.PropTypes));
-})(this, (function (React, PropTypes) { 'use strict';
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('jb-input')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'jb-input'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBInput = {}, global.React, global.PropTypes));
+})(this, (function (exports, React, PropTypes) { 'use strict';
 
@@ -40,3 +40,2 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 	}
-
 	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -51,3 +50,2 @@ });
 	}
-
 	module.exports = _arrayWithHoles, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -58,31 +56,28 @@ });
 	function _iterableToArrayLimit(arr, i) {
-	  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-	  if (_i == null) return;
-	  var _arr = [];
-	  var _n = true;
-	  var _d = false;
-
-	  var _s, _e;
-
-	  try {
-	    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-	      _arr.push(_s.value);
-
-	      if (i && _arr.length === i) break;
-	    }
-	  } catch (err) {
-	    _d = true;
-	    _e = err;
-	  } finally {
+	  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+	  if (null != _i) {
+	    var _s,
+	      _e,
+	      _x,
+	      _r,
+	      _arr = [],
+	      _n = !0,
+	      _d = !1;
 	    try {
-	      if (!_n && _i["return"] != null) _i["return"]();
+	      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+	        if (Object(_i) !== _i) return;
+	        _n = !1;
+	      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+	    } catch (err) {
+	      _d = !0, _e = err;
 	    } finally {
-	      if (_d) throw _e;
+	      try {
+	        if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+	      } finally {
+	        if (_d) throw _e;
+	      }
 	    }
+	    return _arr;
 	  }
-
-	  return _arr;
 	}
-
 	module.exports = _iterableToArrayLimit, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -94,10 +89,5 @@ });
 	  if (len == null || len > arr.length) len = arr.length;
-
-	  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-	    arr2[i] = arr[i];
-	  }
-
+	  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
 	  return arr2;
 	}
-
 	module.exports = _arrayLikeToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -115,3 +105,2 @@ });
 	}
-
 	module.exports = _unsupportedIterableToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -124,3 +113,2 @@ });
 	}
-
 	module.exports = _nonIterableRest, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -133,3 +121,2 @@ });
 	}
-
 	module.exports = _slicedToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
@@ -146,5 +133,4 @@ });
 	      dom.addEventListener(event, handler, passive);
-	    } // this will clean up the event every time the component is re-rendered
-
-
+	    }
+	    // this will clean up the event every time the component is re-rendered
 	    return function cleanup() {
@@ -158,2 +144,3 @@ if (dom) {
 
+	// eslint-disable-next-line react/display-name
 	var JBInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -164,70 +151,58 @@ /**
 	  var element = React.useRef();
-
 	  var _useState = React.useState(0),
-	      _useState2 = _slicedToArray(_useState, 2),
-	      refChangeCount = _useState2[0],
-	      refChangeCountSetter = _useState2[1];
-
+	    _useState2 = _slicedToArray(_useState, 2),
+	    refChangeCount = _useState2[0],
+	    refChangeCountSetter = _useState2[1];
 	  React.useImperativeHandle(ref, function () {
 	    return element ? element.current : {};
 	  }, [element]);
+	  //to force rerender for events
 	  React.useEffect(function () {
 	    refChangeCountSetter(refChangeCount + 1);
 	  }, [element.current]);
-
-	  function onChange(e) {
-	    if (props.onChange) {
+	  var onChange = React.useCallback(function (e) {
+	    if (typeof props.onChange === "function") {
 	      props.onChange(e);
 	    }
-	  }
-
-	  function onKeydown(e) {
-	    if (props.onKeydown) {
+	  });
+	  var onKeydown = React.useCallback(function (e) {
+	    if (typeof props.onKeydown === "function") {
 	      props.onKeydown(e);
 	    }
-	  }
-
+	  }, [props.onKeydown]);
 	  var onKeyup = React.useCallback(function (e) {
-	    if (typeof props.onKeyup == "function") {
+	    if (typeof props.onKeyup === "function") {
 	      props.onKeyup(e);
 	    }
-	  }, []);
-
-	  function onEnter(e) {
+	  }, [props.onKeyup]);
+	  var onEnter = React.useCallback(function (e) {
 	    if (props.onEnter) {
 	      props.onEnter(e);
 	    }
-	  }
-
-	  function onFocus(e) {
+	  }, [props.onEnter]);
+	  var onFocus = React.useCallback(function (e) {
 	    if (props.onFocus && e instanceof FocusEvent) {
 	      props.onFocus(e);
 	    }
-	  }
-
-	  function onBlur(e) {
+	  }, [props.onFocus]);
+	  var onBlur = React.useCallback(function (e) {
 	    if (props.onBlur && e instanceof FocusEvent) {
 	      props.onBlur(e);
 	    }
-	  }
-
-	  function onInput(e) {
+	  }, [props.onBlur]);
+	  var onInput = React.useCallback(function (e) {
 	    if (typeof props.onInput == 'function' && e instanceof InputEvent) {
 	      props.onInput(e);
 	    }
-	  }
-
-	  function onBeforeInput(e) {
+	  }, [props.onInput]);
+	  var onBeforeInput = React.useCallback(function (e) {
 	    if (typeof props.onBeforeInput == 'function' && e instanceof InputEvent) {
 	      props.onBeforeInput(e);
 	    }
-	  }
-
+	  }, [props.onBeforeInput]);
 	  React.useEffect(function () {
 	    var value = props.value;
-
 	    if (props.value == null || props.value === undefined) {
 	      value = '';
 	    }
-
 	    element.current.value = value;
@@ -298,5 +273,7 @@ }, [props.value]);
 
-	return JBInput;
+	exports.JBInput = JBInput;
 
+	Object.defineProperty(exports, '__esModule', { value: true });
+
 }));
 //# sourceMappingURL=JBInput.umd.js.map

index.js

@@ -1,2 +0,1 @@
-import JBInput from './dist/JBInput.js';
-export default JBInput;
+export {JBInput} from './dist/JBInput.js';

lib/JBInput.js

@@ -6,3 +6,3 @@ import React, { useRef, useEffect, useImperativeHandle, useState, useCallback } from 'react';
 // eslint-disable-next-line react/display-name
-const JBInput = React.forwardRef((props, ref) => {
+export const JBInput = React.forwardRef((props, ref) => {
     /**
@@ -18,12 +18,13 @@ * @type {React.MutableRefObject<HTMLInputElement>}
     );
+    //to force rerender for events
     useEffect(() => {
         refChangeCountSetter(refChangeCount + 1);
     }, [element.current]);
-    function onChange(e) {
-        if (props.onChange) {
+    const onChange = useCallback((e)=>{
+        if (typeof props.onChange === "function") {
             props.onChange(e);
         }
-    }
+    });
     const onKeydown = useCallback((e)=>{
-        if (typeof props.onKeydown == "function") {
+        if (typeof props.onKeydown === "function") {
             props.onKeydown(e);
@@ -33,3 +34,3 @@ }
     const onKeyup = useCallback((e)=>{
-        if (typeof props.onKeyup == "function") {
+        if (typeof props.onKeyup === "function") {
             props.onKeyup(e);
@@ -39,27 +40,27 @@ }
     
-    function onEnter(e) {
+    const onEnter = useCallback((e)=>{
         if (props.onEnter) {
             props.onEnter(e);
         }
-    }
-    function onFocus(e) {
+    },[props.onEnter]);
+    const onFocus = useCallback((e)=>{
         if (props.onFocus && e instanceof FocusEvent) {
             props.onFocus(e);
         }
-    }
-    function onBlur(e) {
+    },[props.onFocus]);
+    const onBlur = useCallback((e)=>{
         if (props.onBlur && e instanceof FocusEvent) {
             props.onBlur(e);
         }
-    }
-    function onInput(e) {
+    },[props.onBlur]);
+    const onInput = useCallback((e)=>{
         if (typeof props.onInput == 'function' && e instanceof InputEvent) {
             props.onInput(e);
         }
-    }
-    function onBeforeInput(e) {
+    },[props.onInput]);
+    const onBeforeInput = useCallback((e)=>{
         if (typeof props.onBeforeInput == 'function' && e instanceof InputEvent) {
             props.onBeforeInput(e);
         }
-    }
+    },[props.onBeforeInput]);
     useEffect(() => {
@@ -134,3 +135,2 @@ let value = props.value;
 JBInput.displayName = "JBInput";
-export default JBInput;
 

package.json

@@ -17,3 +17,3 @@ {
   ],
-  "version": "1.0.8",
+  "version": "2.0.0",
   "bugs": "https://github.com/javadbat/jb-input-react/issues",
@@ -20,0 +20,0 @@ "license": "MIT",

README.md

 # JBInput React
 
-this component is React.js wrapper for [jb-input](https://www.npmjs.com/package/jb-input) web component
+this component is React.js wrapper for [jb-input](https://www.npmjs.com/package/jb-input) web component.
 
@@ -32,3 +32,3 @@ text input `react component` with this benefit:
 ```js
-import JBInput from 'jb-input-react';
+import {JBInput} from 'jb-input-react';
 ```
@@ -35,0 +35,0 @@ ``` jsx

No alert changes

Improved metrics

Total package byte prevSize

75794

increased by3.86%

Lines of code

617

increased by1.31%

No dependency changes