@etsoo/react 1.5.98 → 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/__tests__/States.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { useAsyncState } from '../src/uses/useAsyncState';
 import { act } from 'react-dom/test-utils';
 
 function App(props: { callback: (state: number) => void }) {
     const { callback } = props;
     const [state, setState] = useAsyncState(0);
+
+    const [state1] = useAsyncState<number>();
+    expect(state1).toBeUndefined();
+
     const click = async () => {
         const currentState = await setState((prev) => prev + 1);
         callback(currentState + 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/lib/uses/useAsyncState.d.ts

@@ -1,4 +1,8 @@
 import React from 'react';
+export declare function useAsyncState<S = undefined>(): [
+    S | undefined,
+    (newState: React.SetStateAction<S | undefined>) => Promise<S | undefined>
+];
 /**
  * Returns a stateful value, and a async function to update it.
  * @param initialState initial stat

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.98",
+    "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';

package/src/uses/useAsyncState.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 
+export function useAsyncState<S = undefined>(): [
+    S | undefined,
+    (newState: React.SetStateAction<S | undefined>) => Promise<S | undefined>
+];
+
 /**
  * Returns a stateful value, and a async function to update it.
  * @param initialState initial stat
@@ -7,12 +12,27 @@ import React from 'react';
  */
 export function useAsyncState<S>(
     initialState: S | (() => S)
-): [S, (newState: React.SetStateAction<S>) => Promise<S>] {
+): [S, (newState: React.SetStateAction<S>) => Promise<S>];
+
+/**
+ * Returns a stateful value, and a async function to update it.
+ * @param initialState initial stat
+ * @returns Current state and update action
+ */
+export function useAsyncState<S>(
+    initialState?: S | (() => S)
+): [
+    S | undefined,
+    (newState: React.SetStateAction<S | undefined>) => Promise<S | undefined>
+] {
     // State
     const [state, setState] = React.useState(initialState);
 
     // Resolve sate
-    const resolveState = React.useRef<(value: S | PromiseLike<S>) => void>();
+    const resolveState =
+        React.useRef<
+            (value: S | undefined | PromiseLike<S | undefined>) => void
+        >();
 
     // Is mounted or not
     const isMounted = React.useRef(false);
@@ -32,8 +52,8 @@ export function useAsyncState<S>(
     }, [state]);
 
     const setAsyncState = React.useCallback(
-        (newState: React.SetStateAction<S>) =>
-            new Promise<S>((resolve) => {
+        (newState: React.SetStateAction<S | undefined>) =>
+            new Promise<S | undefined>((resolve) => {
                 if (isMounted.current) {
                     resolveState.current = resolve;
                     setState(newState);