@etsoo/react 1.5.99 → 1.6.1

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/components/DynamicRouter.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * Dynamic router props
+ */
+export declare type DynamicRouterProps = {
+    basename: string;
+};
+/**
+ * Dynamic router
+ * @param props Props
+ * @returns Component
+ */
+export declare function DynamicRouter(props: React.PropsWithChildren<DynamicRouterProps>): JSX.Element;

package/lib/components/DynamicRouter.js

@@ -0,0 +1,19 @@
+import { BridgeUtils } from '@etsoo/appscript';
+import React from 'react';
+import { BrowserRouter, MemoryRouter } from 'react-router-dom';
+function getEntries(host) {
+    const startUrl = host.getStartUrl();
+    return startUrl == null ? undefined : [startUrl];
+}
+/**
+ * Dynamic router
+ * @param props Props
+ * @returns Component
+ */
+export function DynamicRouter(props) {
+    // Destruct
+    const { basename, children } = props;
+    // Layout
+    const host = BridgeUtils.host;
+    return host == null ? (React.createElement(BrowserRouter, { basename: basename }, children)) : (React.createElement(MemoryRouter, { basename: basename, initialEntries: getEntries(host) }, children));
+}

package/lib/index.d.ts

@@ -1,8 +1,10 @@
 export * from './app/CoreConstants';
+export * from './app/EventWatcher';
 export * from './app/InputDialogProps';
 export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';
 export * from './components/DnDList';
+export * from './components/DynamicRouter';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
 export * from './components/GridMethodRef';

package/lib/index.js

@@ -1,10 +1,12 @@
 // app
 export * from './app/CoreConstants';
+export * from './app/EventWatcher';
 export * from './app/InputDialogProps';
 export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';
 // components
 export * from './components/DnDList';
+export * from './components/DynamicRouter';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
 export * from './components/GridMethodRef';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.99",
+    "version": "1.6.1",
     "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/components/DynamicRouter.tsx

@@ -0,0 +1,35 @@
+import { BridgeUtils, IBridgeHost } from '@etsoo/appscript';
+import React from 'react';
+import { BrowserRouter, MemoryRouter } from 'react-router-dom';
+
+/**
+ * Dynamic router props
+ */
+export type DynamicRouterProps = { basename: string };
+
+function getEntries(host: IBridgeHost) {
+    const startUrl = host.getStartUrl();
+    return startUrl == null ? undefined : [startUrl];
+}
+
+/**
+ * Dynamic router
+ * @param props Props
+ * @returns Component
+ */
+export function DynamicRouter(
+    props: React.PropsWithChildren<DynamicRouterProps>
+) {
+    // Destruct
+    const { basename, children } = props;
+
+    // Layout
+    const host = BridgeUtils.host;
+    return host == null ? (
+        <BrowserRouter basename={basename}>{children}</BrowserRouter>
+    ) : (
+        <MemoryRouter basename={basename} initialEntries={getEntries(host)}>
+            {children}
+        </MemoryRouter>
+    );
+}

package/src/index.ts

@@ -1,11 +1,13 @@
 // app
 export * from './app/CoreConstants';
+export * from './app/EventWatcher';
 export * from './app/InputDialogProps';
 export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';
 
 // components
 export * from './components/DnDList';
+export * from './components/DynamicRouter';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
 export * from './components/GridMethodRef';