@etsoo/react 1.5.99 → 1.6.0

package/__tests__/EventWatcher.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { EventWatcher } from '../src/app/EventWatcher';
+
+function App(props: { callback: () => void }) {
+    const { callback } = props;
+    const watcher = new EventWatcher();
+
+    React.useEffect(() => {
+        watcher.add({
+            type: 'click',
+            action: (_event) => callback(),
+            once: true
+        });
+    }, []);
+    return <button onClick={(event) => watcher.do(event)}></button>;
+}
+
+test('Tests for EventWatcher', () => {
+    const callback = jest.fn();
+    render(<App callback={callback} />);
+    const button = screen.getByRole<HTMLButtonElement>('button');
+    button.click();
+    expect(callback).toBeCalled();
+    button.click();
+    expect(callback).toBeCalledTimes(1);
+});

package/lib/app/EventWatcher.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+/**
+ * Event watcher action
+ */
+export interface EventWatcherAction {
+    /**
+     * Event type
+     */
+    type?: string | string[];
+    /**
+     * Once action or not
+     */
+    once?: boolean;
+    /**
+     * Action
+     */
+    action: (event: React.BaseSyntheticEvent | string) => void | PromiseLike<void>;
+}
+/**
+ * Event watcher
+ */
+export declare class EventWatcher {
+    private actions;
+    /**
+     * Add action
+     * @param action Action
+     */
+    add(action: EventWatcherAction): void;
+    /**
+     * Do the event
+     * @param event Event
+     */
+    do(event: React.BaseSyntheticEvent | string): void;
+    private isMatch;
+}

package/lib/app/EventWatcher.js

@@ -0,0 +1,43 @@
+/**
+ * Event watcher
+ */
+export class EventWatcher {
+    constructor() {
+        this.actions = [];
+    }
+    /**
+     * Add action
+     * @param action Action
+     */
+    add(action) {
+        this.actions.push(action);
+    }
+    /**
+     * Do the event
+     * @param event Event
+     */
+    do(event) {
+        // Type
+        const type = typeof event === 'string' ? event : event.type;
+        // Execute
+        const removeIndices = [];
+        this.actions.forEach((item, index) => {
+            if (!this.isMatch(item, type))
+                return;
+            item.action(event);
+            if (item.once)
+                removeIndices.push(index);
+        });
+        // Remove all once actions
+        removeIndices
+            .reverse()
+            .forEach((index) => this.actions.splice(index, 1));
+    }
+    isMatch(action, type) {
+        if (action.type == null)
+            return true;
+        if (typeof action.type === 'string')
+            return action.type === type;
+        return action.type.includes(type);
+    }
+}

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 export * from './app/CoreConstants';
+export * from './app/EventWatcher';
 export * from './app/InputDialogProps';
 export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';

package/lib/index.js

@@ -1,5 +1,6 @@
 // app
 export * from './app/CoreConstants';
+export * from './app/EventWatcher';
 export * from './app/InputDialogProps';
 export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.99",
+    "version": "1.6.0",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/app/EventWatcher.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+
+/**
+ * Event watcher action
+ */
+export interface EventWatcherAction {
+    /**
+     * Event type
+     */
+    type?: string | string[];
+
+    /**
+     * Once action or not
+     */
+    once?: boolean;
+
+    /**
+     * Action
+     */
+    action: (
+        event: React.BaseSyntheticEvent | string
+    ) => void | PromiseLike<void>;
+}
+
+/**
+ * Event watcher
+ */
+export class EventWatcher {
+    private actions: EventWatcherAction[] = [];
+
+    /**
+     * Add action
+     * @param action Action
+     */
+    add(action: EventWatcherAction) {
+        this.actions.push(action);
+    }
+
+    /**
+     * Do the event
+     * @param event Event
+     */
+    do(event: React.BaseSyntheticEvent | string) {
+        // Type
+        const type = typeof event === 'string' ? event : event.type;
+
+        // Execute
+        const removeIndices: number[] = [];
+        this.actions.forEach((item, index) => {
+            if (!this.isMatch(item, type)) return;
+            item.action(event);
+            if (item.once) removeIndices.push(index);
+        });
+
+        // Remove all once actions
+        removeIndices
+            .reverse()
+            .forEach((index) => this.actions.splice(index, 1));
+    }
+
+    private isMatch(action: EventWatcherAction, type: string) {
+        if (action.type == null) return true;
+        if (typeof action.type === 'string') return action.type === type;
+        return action.type.includes(type);
+    }
+}

package/src/index.ts

@@ -1,5 +1,6 @@
 // app
 export * from './app/CoreConstants';
+export * from './app/EventWatcher';
 export * from './app/InputDialogProps';
 export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';