@etsoo/react 1.5.80 → 1.5.83

package/src/components/ScrollerList.tsx

@@ -8,7 +8,6 @@ import {
     ListProps,
     VariableSizeList
 } from 'react-window';
-import { GridMethodRef } from '../mu/GridMethodRef';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import {
     GridLoadDataProps,
@@ -16,6 +15,7 @@ import {
     GridLoaderStates,
     GridSizeGet
 } from './GridLoader';
+import { GridMethodRef } from './GridMethodRef';
 
 /**
  * Scroller vertical list props
@@ -34,7 +34,7 @@ export interface ScrollerListProps<T extends object>
     /**
      * Methods ref
      */
-    mRef?: React.Ref<ScrollerListForwardRef>;
+    mRef?: React.Ref<ScrollerListForwardRef<T>>;
 
     /**
      * Outer div ref
@@ -77,7 +77,9 @@ interface ScrollerListRef {
 /**
  * Scroller list forward ref
  */
-export interface ScrollerListForwardRef extends GridMethodRef, ScrollerListRef {
+export interface ScrollerListForwardRef<T>
+    extends GridMethodRef<T>,
+        ScrollerListRef {
     /**
      * Refresh latest page data
      */

package/src/index.ts

@@ -1,94 +1,17 @@
 // app
-export * from './app/CommonApp';
 export * from './app/CoreConstants';
 export * from './app/InputDialogProps';
-export * from './app/IServiceAppSettings';
-export * from './app/IServicePage';
-export * from './app/IServiceUser';
-export * from './app/ISmartERPUser';
-export * from './app/Labels';
-export * from './app/ReactApp';
 export * from './app/ReactUtils';
 export * from './app/RefreshTokenRQ';
-export * from './app/ServiceApp';
 
 // components
+export * from './components/DnDList';
 export * from './components/GridColumn';
 export * from './components/GridLoader';
 export * from './components/HRouter';
 export * from './components/ListItemReact';
 export * from './components/ScrollerGrid';
 export * from './components/ScrollerList';
-export * from './components/ShowDataComparison';
-
-// mu
-export * from './mu/pages/CommonPage';
-export * from './mu/pages/CommonPageProps';
-export * from './mu/pages/DataGridPage';
-export * from './mu/pages/DataGridPageProps';
-export * from './mu/pages/EditPage';
-export * from './mu/pages/FixedListPage';
-export * from './mu/pages/ListPage';
-export * from './mu/pages/ListPageProps';
-export * from './mu/pages/ResponsivePage';
-export * from './mu/pages/ResponsivePageProps';
-export * from './mu/pages/SearchPageProps';
-export * from './mu/pages/TablePage';
-export * from './mu/pages/ViewPage';
-
-export * from './mu/texts/DateText';
-export * from './mu/texts/MoneyText';
-export * from './mu/texts/NumberText';
-
-export * from './mu/AuditDisplay';
-export * from './mu/BackButton';
-export * from './mu/BridgeCloseButton';
-export * from './mu/ButtonLink';
-export * from './mu/ComboBox';
-export * from './mu/CountdownButton';
-export * from './mu/CustomFabProps';
-export * from './mu/DataGridEx';
-export * from './mu/DataGridRenderers';
-export * from './mu/DialogButton';
-export * from './mu/DnDList';
-export * from './mu/DraggablePaperComponent';
-export * from './mu/EmailInput';
-export * from './mu/FabBox';
-export * from './mu/FlexBox';
-export * from './mu/GridDataFormat';
-export * from './mu/IconButtonLink';
-export * from './mu/InputField';
-export * from './mu/ItemList';
-export * from './mu/ListItemRightIcon';
-export * from './mu/ListMoreDisplay';
-export * from './mu/LoadingButton';
-export * from './mu/MaskInput';
-export * from './mu/MobileListItemRenderer';
-export * from './mu/MoreFab';
-export * from './mu/MUGlobal';
-export * from './mu/NotifierMU';
-export * from './mu/OptionGroup';
-export * from './mu/PList';
-export * from './mu/ProgressCount';
-export * from './mu/PullToRefreshUI';
-export * from './mu/ResponsibleContainer';
-export * from './mu/RLink';
-export * from './mu/ScrollerListEx';
-export * from './mu/ScrollTopFab';
-export * from './mu/SearchBar';
-export * from './mu/SearchField';
-export * from './mu/SearchOptionGroup';
-export * from './mu/SelectBool';
-export * from './mu/SelectEx';
-export * from './mu/Switch';
-export * from './mu/SwitchAnt';
-export * from './mu/TabBox';
-export * from './mu/TableEx';
-export * from './mu/TextFieldEx';
-export * from './mu/Tiplist';
-export * from './mu/TooltipClick';
-export * from './mu/UserAvatar';
-export * from './mu/UserAvatarEditor';
 
 // notifier
 export * from './notifier/Notifier';
@@ -107,4 +30,5 @@ export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useParamsEx';
 export * from './uses/useTimeout';
+export * from './uses/useWindowScroll';
 export * from './uses/useWindowSize';

package/src/notifier/Notifier.ts

@@ -13,7 +13,6 @@ import {
 import { IAction } from '@etsoo/appscript';
 import { State } from '../states/State';
 import { IProviderProps, IUpdate } from '../states/IState';
-import { Breakpoint, ButtonProps } from '@mui/material';
 
 /**
  * React notification call props
@@ -37,7 +36,7 @@ export interface NotificationReactCallProps extends NotificationCallProps {
     /**
      * Max width
      */
-    maxWidth?: Breakpoint | false;
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
 
     /**
      * OK label
@@ -62,7 +61,7 @@ export interface NotificationReactCallProps extends NotificationCallProps {
     /**
      * Primary button props
      */
-    primaryButton?: ButtonProps;
+    primaryButton?: {};
 }
 
 /**

package/src/states/UserState.ts

@@ -69,8 +69,13 @@ export class UserState<D extends IUser> {
      * Constructor
      */
     constructor() {
-        const { context, provider } = State.create(
-            (state: D, action: UserAction<D>) => {
+        const { context, provider } = State.create<
+            D,
+            UserAction<D>,
+            UserCalls<D>,
+            UserProviderProps<D>
+        >(
+            (state, action) => {
                 // User reducer
                 switch (action.type) {
                     case UserActionType.Login:

package/src/uses/useWindowScroll.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface IScrollPos {
+    x: number;
+    y: number;
+}
+
+/**
+ * Detect window scroll
+ * @returns Scroll location
+ */
+export const useWindowScroll = () => {
+    // State
+    const [pos, setPos] = React.useState<IScrollPos>({
+        x: window.pageXOffset,
+        y: window.pageYOffset
+    });
+
+    React.useEffect(() => {
+        let ticking = false;
+        let lastPos: IScrollPos;
+        let requestAnimationFrameSeed = 0;
+
+        const scrollHandler = () => {
+            lastPos = {
+                x: window.pageXOffset,
+                y: window.pageYOffset
+            };
+
+            if (!ticking) {
+                requestAnimationFrameSeed = window.requestAnimationFrame(() => {
+                    ticking = false;
+                    requestAnimationFrameSeed = 0;
+
+                    if (lastPos.x != lastPos.x || lastPos.y != lastPos.y) {
+                        setPos(lastPos);
+                    }
+                });
+                ticking = true;
+            }
+        };
+
+        window.addEventListener('scroll', scrollHandler, {
+            passive: true,
+            capture: false
+        });
+
+        return () => {
+            // Cancel animation frame
+            if (requestAnimationFrameSeed > 0)
+                window.cancelAnimationFrame(requestAnimationFrameSeed);
+
+            // Remove scroll event
+            window.removeEventListener('scroll', scrollHandler);
+        };
+    }, []);
+
+    // Return
+    return pos;
+};

package/src/uses/useWindowSize.ts

@@ -18,33 +18,42 @@ export const useWindowSize = () => {
 
     React.useEffect(() => {
         let ticking = false;
-        let lastKnownSize: ISize;
+        let lastSize: ISize;
         let requestAnimationFrameSeed = 0;
 
         const resizeHandler = () => {
-            lastKnownSize = {
+            lastSize = {
                 width: document.documentElement.clientWidth,
                 height: document.documentElement.clientHeight
             };
 
             if (!ticking) {
                 requestAnimationFrameSeed = window.requestAnimationFrame(() => {
-                    setSize(lastKnownSize);
                     ticking = false;
                     requestAnimationFrameSeed = 0;
+
+                    if (
+                        lastSize.width != size.width ||
+                        lastSize.height != size.height
+                    ) {
+                        setSize(lastSize);
+                    }
                 });
                 ticking = true;
             }
         };
 
-        window.addEventListener('resize', resizeHandler);
+        window.addEventListener('resize', resizeHandler, {
+            passive: true,
+            capture: false
+        });
 
         return () => {
             // Cancel animation frame
             if (requestAnimationFrameSeed > 0)
                 window.cancelAnimationFrame(requestAnimationFrameSeed);
 
-            // Remove scroll event
+            // Remove resize event
             window.removeEventListener('resize', resizeHandler);
         };
     }, []);

package/__tests__/mu/ComboBox.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { ComboBox } from '../../src';
-import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-it('Render ComboBox', async () => {
-    // Arrange
-    type T = { id: number; name: string };
-    const options: T[] = [
-        { id: 1, name: 'Name 1' },
-        { id: 2, name: 'Name 2' }
-    ];
-
-    render(
-        <ComboBox<T>
-            name="Test"
-            options={options}
-            labelField="name"
-            label="Test"
-        />
-    );
-
-    // Act, click the list
-    const clicked = fireEvent.click(screen.getByRole('button'));
-    expect(clicked).toBeTruthy();
-
-    // Get list item
-    const item = screen.getByText('Name 1');
-    expect(item.nodeName).toBe('LI');
-});

package/__tests__/mu/MUGlobalTests.tsx

@@ -1,58 +0,0 @@
-import { MUGlobal } from '../../src/mu/MUGlobal';
-
-// Theme update function
-const updateFunc = (value: number) => `${value * 8}px`;
-
-// Arrange
-const paddings = { sx: 2, sm: 3, key: 'a' };
-
-test('getMenuItem tests', () => {
-    // Assert
-    expect(
-        MUGlobal.getMenuItem('/user/add', '/user/all').selected
-    ).toBeTruthy();
-    expect(MUGlobal.getMenuItem('/user/add', '/user/*').selected).toBeTruthy();
-    expect(
-        MUGlobal.getMenuItem('/user/add', '/user/edit').selected
-    ).toBeFalsy();
-});
-
-test('half tests', () => {
-    // Act
-    const result = MUGlobal.half(paddings);
-
-    // Assert
-    expect(paddings).toHaveProperty('sx', 2);
-    expect(result).toHaveProperty('sx', 1);
-    expect(result).toHaveProperty('sm', 1.5);
-});
-
-test('increase tests', () => {
-    // Act
-    const result = MUGlobal.increase(paddings, 2);
-
-    // Assert
-    expect(paddings).toHaveProperty('sx', 2);
-    expect(result).toHaveProperty('sx', 4);
-    expect(result).toHaveProperty('sm', 5);
-});
-
-test('adjustWithTheme tests', () => {
-    // Act
-    const result = MUGlobal.adjustWithTheme(160, paddings, updateFunc);
-
-    // Assert
-    expect(paddings).toHaveProperty('sx', 2);
-    expect(result).toHaveProperty('sx', '144px');
-    expect(result).toHaveProperty('sm', '136px');
-});
-
-test('updateWithTheme tests', () => {
-    // Act
-    const result = MUGlobal.updateWithTheme(paddings, updateFunc);
-
-    // Assert
-    expect(paddings).toHaveProperty('sx', 2);
-    expect(result).toHaveProperty('sx', '16px');
-    expect(result).toHaveProperty('sm', '24px');
-});

package/__tests__/mu/NotifierMUTests.tsx

@@ -1,213 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { act } from 'react-dom/test-utils';
-import { INotification, NotificationMessageType, NotifierMU } from '../../src';
-
-// Without it will popup error:
-// The current testing environment is not configured to support act
-(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
-
-// Root
-const root = document.body;
-const container: HTMLElement = document.createElement('div');
-root.append(container);
-
-// The state provider
-const Provider = NotifierMU.setup();
-const reactRoot = createRoot(container);
-
-act(() => {
-    // Concorrent renderer needs act block
-    reactRoot.render(<Provider />);
-});
-
-// Notifier
-const notifier = NotifierMU.instance;
-
-// Timer mock
-// https://jestjs.io/docs/en/timer-mocks
-jest.useFakeTimers();
-
-test('Alert tests', async () => {
-    // Click
-    const handleClick = jest.fn();
-
-    act(() => {
-        // Add the notification
-        notifier.alert('Alert message', handleClick);
-    });
-
-    // Button
-    const button = root.getElementsByTagName('button');
-
-    expect(button.length).toBe(1);
-    expect(button[0].innerHTML).toContain('OK');
-
-    await act(async () => {
-        button[0].click();
-    });
-
-    expect(handleClick).toBeCalled();
-
-    // Fast forward
-    jest.runOnlyPendingTimers();
-});
-
-test('Confirm tests', async () => {
-    // Click
-    const handleClick = jest.fn();
-
-    act(() => {
-        // Add the notification
-        notifier.confirm('Confirm message', undefined, handleClick);
-    });
-
-    // Button
-    const button = root.getElementsByTagName('button');
-
-    expect(button.length).toBe(2);
-    expect(button[0].innerHTML).toContain('Cancel');
-
-    await act(async () => {
-        button[0].click();
-    });
-
-    expect(handleClick).toBeCalled();
-
-    // Fast forward
-    jest.runOnlyPendingTimers();
-});
-
-test('Confirm tests without cancel button', async () => {
-    // Click
-    const handleClick = jest.fn();
-
-    act(() => {
-        // Add the notification
-        notifier.confirm('Confirm message', undefined, handleClick, {
-            cancelButton: false
-        });
-    });
-
-    // Button
-    const button = root.getElementsByTagName('button');
-
-    expect(button.length).toBe(1);
-    expect(button[0].innerHTML).toContain('OK');
-
-    await act(async () => {
-        button[0].click();
-    });
-
-    expect(handleClick).toBeCalled();
-
-    // Fast forward
-    jest.runOnlyPendingTimers();
-});
-
-test('Prompt tests', async () => {
-    // Click
-    const handleClick = jest.fn((result: boolean) => {
-        expect(result).toBeTruthy();
-    });
-
-    act(() => {
-        // Add the notification
-        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
-            type: 'switch',
-            required: false
-        });
-    });
-
-    // Button
-    const button = root.getElementsByTagName('button');
-
-    expect(button.length).toBe(2); // Switch will generate a button
-    expect(button[1].innerHTML).toContain('OK');
-
-    await act(async () => {
-        button[1].click();
-    });
-
-    expect(handleClick).toBeCalled();
-
-    jest.runOnlyPendingTimers();
-});
-
-test('Prompt tests with form submit', async () => {
-    // Click
-    const handleClick = jest.fn((result: boolean) => {
-        expect(result).toBeTruthy();
-    });
-
-    act(() => {
-        // Add the notification
-        notifier.prompt<boolean>('Prompt message', handleClick, undefined, {
-            type: 'switch',
-            required: false
-        });
-    });
-
-    await act(async () => {
-        (
-            root
-                .getElementsByTagName('form')[0]
-                .elements.namedItem('okButton') as HTMLButtonElement
-        )?.click();
-    });
-
-    expect(handleClick).toBeCalled();
-
-    jest.runOnlyPendingTimers();
-});
-
-test('Message tests', (done) => {
-    // Callback
-    const callback = jest.fn(() => done());
-
-    let n: INotification<React.ReactNode, any> | undefined;
-    act(() => {
-        // Add the notification
-        n = notifier.message(
-            NotificationMessageType.Danger,
-            'Error Message',
-            undefined,
-            {
-                callback
-            }
-        );
-    });
-
-    expect(n?.timespan).toBe(5);
-
-    expect(root.innerHTML).toContain('Error Message');
-
-    act(() => {
-        // Here is the bug need further study...
-        n?.dismiss();
-
-        // Fast forward
-        jest.runOnlyPendingTimers();
-    });
-
-    expect(root.innerHTML).not.toContain('Error Message');
-    expect(callback).toBeCalled();
-});
-
-test('Loading tests', () => {
-    act(() => {
-        // Add the notification
-        notifier.showLoading('Loading');
-    });
-
-    expect(root.innerHTML).toContain('Loading');
-
-    act(() => {
-        notifier.hideLoading();
-
-        // Fast forward
-        jest.runOnlyPendingTimers();
-    });
-
-    expect(root.innerHTML).not.toContain('Loading');
-});

package/__tests__/mu/SelectEx.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { SelectEx } from '../../src';
-import { findByText, fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-it('Render SelectEx', async () => {
-    // Arrange
-    type T = { id: number; name: string };
-    const options: T[] = [
-        { id: 1, name: 'Name 1' },
-        { id: 2, name: 'Name 2' }
-    ];
-
-    // Render component
-    const { baseElement } = render(
-        <SelectEx<T> options={options} name="test" search labelField="name" />
-    );
-
-    // Act, click to show the list
-    const button = screen.getByRole('button');
-    fireEvent.mouseDown(button); // Not click
-
-    // Get list item
-    const item = await findByText(baseElement, 'Name 2');
-    expect(item.nodeName).toBe('SPAN');
-});

package/lib/app/CommonApp.d.ts

@@ -1,39 +0,0 @@
-import { IAppSettings, IUser, RefreshTokenProps } from '@etsoo/appscript';
-import { IPageData } from '../states/PageState';
-import { ReactApp } from './ReactApp';
-import { RefreshTokenRQ } from './RefreshTokenRQ';
-/**
- * Common independent application
- * 通用独立程序
- */
-export declare abstract class CommonApp<U extends IUser = IUser, P extends IPageData = IPageData, S extends IAppSettings = IAppSettings> extends ReactApp<S, U, P> {
-    /**
-     * Override persistedFields
-     */
-    protected get persistedFields(): string[];
-    /**
-     * Init call update fields in local storage
-     * @returns Fields
-     */
-    protected initCallEncryptedUpdateFields(): string[];
-    /**
-     * Do user login
-     * @param data User data
-     * @param refreshToken Refresh token
-     * @param keep Keep login
-     * @returns Success data
-     */
-    protected doUserLogin(data: U, refreshToken: string, keep: boolean): string | undefined;
-    /**
-     * Refresh token
-     * @param props Props
-     */
-    refreshToken<D extends object = RefreshTokenRQ>(props?: RefreshTokenProps<D>): Promise<boolean>;
-    /**
-     * Try login
-     * @param data Additional data
-     * @param showLoading Show loading bar or not
-     * @returns Result
-     */
-    tryLogin<D extends object = RefreshTokenRQ>(data?: D, showLoading?: boolean): Promise<boolean>;
-}