@stardust-ui/react-component-event-listener - npm Package Compare versions

Comparing version 0.35.0 to 0.36.0

dist/commonjs/EventListener.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
@@ -12,85 +12,25 @@ value: true
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var PropTypes = _interopRequireWildcard(require("prop-types"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _useEventListener = _interopRequireDefault(require("./useEventListener"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+function EventListener(props) {
+  (0, _useEventListener.default)(props);
+  return null;
+}
 
-var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+EventListener.displayName = 'EventListener'; // TODO: use Babel plugin for this
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _addEventListener = _interopRequireDefault(require("./lib/addEventListener"));
-
-var _removeEventListener = _interopRequireDefault(require("./lib/removeEventListener"));
-
-var _shouldUpdateListener = _interopRequireDefault(require("./lib/shouldUpdateListener"));
-
-var _types = require("./types.internal");
-
-var EventListener =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(EventListener, _React$Component);
-
-  function EventListener() {
-    var _getPrototypeOf2;
-
-    var _this;
-
-    (0, _classCallCheck2.default)(this, EventListener);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(EventListener)).call.apply(_getPrototypeOf2, [this].concat(args)));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEvent", function (e) {
-      return _this.props.listener(e);
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(EventListener, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      return (0, _shouldUpdateListener.default)(this.props, nextProps);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      (0, _addEventListener.default)(this.handleEvent, this.props);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      (0, _removeEventListener.default)(this.handleEvent, prevProps);
-      (0, _addEventListener.default)(this.handleEvent, this.props);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      (0, _removeEventListener.default)(this.handleEvent, this.props);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }]);
-  return EventListener;
-}(React.Component);
-
-(0, _defineProperty2.default)(EventListener, "displayName", 'EventListener');
-(0, _defineProperty2.default)(EventListener, "propTypes", _types.listenerPropTypes);
-(0, _defineProperty2.default)(EventListener, "defaultProps", {
+EventListener.propTypes = process.env.NODE_ENV !== 'production' ? {
+  capture: PropTypes.bool,
+  listener: PropTypes.func.isRequired,
+  targetRef: PropTypes.shape({
+    current: PropTypes.object
+  }).isRequired,
+  type: PropTypes.string.isRequired
+} : {};
+EventListener.defaultProps = {
   capture: false
-});
+};
 var _default = EventListener;
 exports.default = _default;

dist/commonjs/index.js

@@ -12,3 +12,3 @@ "use strict";
   EventListener: true,
-  StackableEventListener: true
+  useEventListener: true
 };
@@ -21,6 +21,6 @@ Object.defineProperty(exports, "EventListener", {
 });
-Object.defineProperty(exports, "StackableEventListener", {
+Object.defineProperty(exports, "useEventListener", {
   enumerable: true,
   get: function get() {
-    return _StackableEventListener.default;
+    return _useEventListener.default;
   }
@@ -32,4 +32,2 @@ });
 
-var _StackableEventListener = _interopRequireDefault(require("./StackableEventListener"));
-
 var _types = require("./types");
@@ -47,2 +45,5 @@
 });
+
+var _useEventListener = _interopRequireDefault(require("./useEventListener"));
+
 var documentRef = {
@@ -49,0 +50,0 @@ current: typeof document === 'undefined' ? null : document

dist/es/EventListener.d.ts

@@ -1,16 +0,21 @@
-import * as React from 'react';
-import { EventListenerProps } from './types';
-declare class EventListener extends React.Component<EventListenerProps> {
-    static displayName: string;
-    static propTypes: Record<"capture" | "listener" | "targetRef" | "type", any>;
-    static defaultProps: {
+import * as PropTypes from 'prop-types';
+import { EventListenerOptions, EventTypes } from './types';
+declare function EventListener<T extends EventTypes>(props: EventListenerOptions<T>): any;
+declare namespace EventListener {
+    var displayName: string;
+    var propTypes: {
+        capture: PropTypes.Requireable<boolean>;
+        listener: PropTypes.Validator<(...args: any[]) => any>;
+        targetRef: PropTypes.Validator<import("react").RefObject<Node | Window>>;
+        type: PropTypes.Validator<"waiting" | "error" | "abort" | "cancel" | "progress" | "ended" | "change" | "input" | "select" | "fullscreenchange" | "fullscreenerror" | "readystatechange" | "visibilitychange" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "blur" | "canplay" | "canplaythrough" | "click" | "close" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "focus" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "load" | "loadeddata" | "loadedmetadata" | "loadend" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "pause" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "reset" | "resize" | "scroll" | "securitypolicyviolation" | "seeked" | "seeking" | "stalled" | "submit" | "suspend" | "timeupdate" | "toggle" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">;
+    } | {
+        capture?: undefined;
+        listener?: undefined;
+        targetRef?: undefined;
+        type?: undefined;
+    };
+    var defaultProps: {
         capture: boolean;
     };
-    shouldComponentUpdate(nextProps: EventListenerProps): boolean;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: EventListenerProps): void;
-    componentWillUnmount(): void;
-    handleEvent: (e: Event) => void;
-    render(): any;
 }
 export default EventListener;

dist/es/EventListener.js

@@ -1,78 +0,22 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import * as React from 'react';
-import addEventListener from './lib/addEventListener';
-import removeEventListener from './lib/removeEventListener';
-import shouldUpdateListener from './lib/shouldUpdateListener';
-import { listenerPropTypes } from './types.internal';
+import * as PropTypes from 'prop-types';
+import useEventListener from './useEventListener';
 
-var EventListener =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(EventListener, _React$Component);
+function EventListener(props) {
+  useEventListener(props);
+  return null;
+}
 
-  function EventListener() {
-    var _getPrototypeOf2;
+EventListener.displayName = 'EventListener'; // TODO: use Babel plugin for this
 
-    var _this;
-
-    _classCallCheck(this, EventListener);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(EventListener)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _defineProperty(_assertThisInitialized(_this), "handleEvent", function (e) {
-      return _this.props.listener(e);
-    });
-
-    return _this;
-  }
-
-  _createClass(EventListener, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      return shouldUpdateListener(this.props, nextProps);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      addEventListener(this.handleEvent, this.props);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      removeEventListener(this.handleEvent, prevProps);
-      addEventListener(this.handleEvent, this.props);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      removeEventListener(this.handleEvent, this.props);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return null;
-    }
-  }]);
-
-  return EventListener;
-}(React.Component);
-
-_defineProperty(EventListener, "displayName", 'EventListener');
-
-_defineProperty(EventListener, "propTypes", listenerPropTypes);
-
-_defineProperty(EventListener, "defaultProps", {
+EventListener.propTypes = process.env.NODE_ENV !== 'production' ? {
+  capture: PropTypes.bool,
+  listener: PropTypes.func.isRequired,
+  targetRef: PropTypes.shape({
+    current: PropTypes.object
+  }).isRequired,
+  type: PropTypes.string.isRequired
+} : {};
+EventListener.defaultProps = {
   capture: false
-});
-
+};
 export default EventListener;

dist/es/index.d.ts

@@ -5,3 +5,3 @@ import { TargetRef } from './types';
 export { default as EventListener } from './EventListener';
-export { default as StackableEventListener } from './StackableEventListener';
 export * from './types';
+export { default as useEventListener } from './useEventListener';

dist/es/index.js

@@ -8,3 +8,3 @@ export var documentRef = {
 export { default as EventListener } from './EventListener';
-export { default as StackableEventListener } from './StackableEventListener';
-export * from './types';
+export * from './types';
+export { default as useEventListener } from './useEventListener';

dist/es/types.d.ts

 import * as React from 'react';
-export interface EventListenerProps {
-    /** Idicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. */
+export interface EventListenerOptions<T extends EventTypes = 'click'> {
+    /** Indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. */
     capture?: boolean;
     /** A function which receives a notification when an event of the specified type occurs. */
-    listener: EventHandler<EventTypes>;
+    listener: EventHandler<T>;
     /** A ref object with a target node. */
     targetRef: TargetRef;
     /** A case-sensitive string representing the event type to listen for. */
-    type: EventTypes;
+    type: T;
 }
@@ -12,0 +12,0 @@ export declare type EventHandler<T extends EventTypes> = (e: DocumentEventMap[T]) => void;

package.json

 {
   "name": "@stardust-ui/react-component-event-listener",
   "description": "React components for binding events on the global scope.",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "author": "Oleksandr Fediashov <[e-mail]>",
@@ -12,3 +12,3 @@ "bugs": "https://github.com/stardust-ui/react/issues",
   "devDependencies": {
-    "@stardust-ui/internal-tooling": "^0.35.0",
+    "@stardust-ui/internal-tooling": "^0.36.0",
     "lerna-alias": "^3.0.3-0"
@@ -37,3 +37,3 @@ },
   "types": "dist/es/index.d.ts",
-  "gitHead": "e4a1dd1c9223bdd7e5dcac0fb7ff9b23f0f93e88"
+  "gitHead": "9b39b1fe5076c8588ba9353f56ad785fd4a75252"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

13033

decreased by-70.65%

Number of package files

14

decreased by-63.16%

Lines of code

217

decreased by-71.45%

Number of low supply chain risk alerts

7

increased by600%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes