@teambit/base-ui.hook.use-click-outside - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

dist/click-outside.d.ts

@@ -1,2 +0,2 @@
-import { RefObject } from 'react';
+import { RefObject, Component } from 'react';
 export declare type ClickOutsideProps = {
@@ -7,3 +7,12 @@ targetRef: RefObject<HTMLElement>;
 };
-/** useClickOutside wrapper, for components that can't use hooks directly */
-export declare function ClickOutside({ targetRef, handler, enabled }: ClickOutsideProps): any;
+/** triggers event which clicking outside of the the ref component. (React15 compatible!) */
+export declare class ClickOutside extends Component<ClickOutsideProps> {
+    static defaultProps: Partial<ClickOutsideProps>;
+    private listener;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: ClickOutsideProps): void;
+    private enable;
+    private disable;
+    render(): any;
+}

dist/click-outside.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClickOutside = void 0;
-const use_click_outside_1 = require("./use-click-outside");
-/** useClickOutside wrapper, for components that can't use hooks directly */
-function ClickOutside({ targetRef, handler, enabled }) {
-    use_click_outside_1.useClickOutside(targetRef, handler, enabled);
-    return null;
+const react_1 = require("react");
+/** triggers event which clicking outside of the the ref component. (React15 compatible!) */
+class ClickOutside extends react_1.Component {
+    constructor() {
+        super(...arguments);
+        this.listener = (event) => {
+            const { targetRef, handler } = this.props;
+            const element = event.target;
+            // Do nothing if clicking ref's element or descendent elements
+            if (!targetRef.current || !element || targetRef.current.contains(element)) {
+                return;
+            }
+            handler(event);
+        };
+    }
+    componentDidMount() {
+        if (this.props.enabled) {
+            this.enable();
+        }
+    }
+    componentWillUnmount() {
+        this.disable();
+    }
+    componentDidUpdate(prevProps) {
+        const nextProps = this.props;
+        if (prevProps.enabled !== nextProps.enabled) {
+            if (nextProps.enabled) {
+                this.enable();
+            }
+            else {
+                this.disable();
+            }
+        }
+    }
+    enable() {
+        document.addEventListener('mousedown', this.listener);
+        document.addEventListener('touchstart', this.listener);
+    }
+    disable() {
+        document.removeEventListener('mousedown', this.listener);
+        document.removeEventListener('touchstart', this.listener);
+    }
+    render() {
+        return null;
+    }
 }
 exports.ClickOutside = ClickOutside;
+ClickOutside.defaultProps = {
+    enabled: true,
+};
 //# sourceMappingURL=click-outside.js.map

dist/click-outside.spec.js

@@ -25,3 +25,3 @@ "use strict";
 const click_outside_1 = require("./click-outside");
-describe('click outside node', () => {
+describe('click outside node (React15 hooks-less)', () => {
     it('should not trigger, when clicking inside', () => {
@@ -28,0 +28,0 @@ const handleOutside = jest.fn(() => { });

package.json

 {
   "name": "@teambit/base-ui.hook.use-click-outside",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "homepage": "https://bit.dev/teambit/base-ui/hook/use-click-outside",
@@ -9,3 +9,3 @@ "main": "dist/index.js",
     "name": "hook/use-click-outside",
-    "version": "0.7.0"
+    "version": "0.8.0"
   },
@@ -12,0 +12,0 @@ "dependencies": {

No alert changes

Improved metrics

Total package byte prevSize

40854

increased by48.36%

Number of package files

30

increased by15.38%

Lines of code

749

increased by50.7%

No dependency changes