@etsoo/react 1.5.79 → 1.5.82

package/README.md

@@ -1,5 +1,5 @@
 # AppReact
-**TypeScript React framework for SmartERP**
+**TypeScript ReactJs UI Independent Framework**
 
 ## Installing
 
@@ -13,4 +13,9 @@ Using yarn:
 
 ```bash
 $ yarn add @etsoo/react
-```
+```
+
+## UI Implmentation
+
+- @etsoo/materialui, targeting administration applications
+- @etsoo/bootstrap, targeting websites

package/__tests__/ReactUtils.ts

@@ -0,0 +1,6 @@
+import { ReactUtils } from '../src/app/ReactUtils';
+
+test('Tests for ReactUtils.formatInputValue', () => {
+    expect(ReactUtils.formatInputValue([1, 'a'])).toEqual([1, 'a']);
+    expect(ReactUtils.formatInputValue(true)).toEqual('true');
+});

package/lib/{mu → components}/DnDList.d.ts

@@ -1,19 +1,6 @@
 import { UniqueIdentifier } from '@dnd-kit/core';
 import { DataTypes } from '@etsoo/shared';
-import { Theme } from '@mui/material';
 import React, { CSSProperties } from 'react';
-/**
- * DnD item default style
- * @param index Item index
- * @param isDragging Is dragging
- * @param theme Theme
- * @returns Style
- */
-export declare const DnDItemStyle: (index: number, isDragging: boolean, theme: Theme) => {
-    padding: string;
-    zIndex: string | number;
-    background: string;
-};
 /**
  * DnD list forward ref
  */
@@ -47,7 +34,7 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
     /**
      * Get list item style callback
      */
-    getItemStyle?: (index: number, isDragging: boolean) => CSSProperties;
+    getItemStyle: (index: number, isDragging: boolean) => CSSProperties;
     /**
      * Item renderer
      */

package/lib/{mu → components}/DnDList.js

@@ -1,7 +1,6 @@
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { useTheme } from '@mui/material';
 import React from 'react';
 function SortableItem(props) {
     // Destruct
@@ -24,22 +23,6 @@ function SortableItem(props) {
     };
     return itemRenderer(nodeRef, actionNodeRef);
 }
-/**
- * DnD item default style
- * @param index Item index
- * @param isDragging Is dragging
- * @param theme Theme
- * @returns Style
- */
-export const DnDItemStyle = (index, isDragging, theme) => ({
-    padding: theme.spacing(1),
-    zIndex: isDragging ? 1 : 'auto',
-    background: isDragging
-        ? theme.palette.primary.light
-        : index % 2 === 0
-            ? theme.palette.grey[100]
-            : theme.palette.grey[50]
-});
 /**
  * DnD (Drag and Drop) sortable list
  * @param props Props
@@ -47,13 +30,7 @@ export const DnDItemStyle = (index, isDragging, theme) => ({
  */
 export function DnDList(props) {
     // Destruct
-    const { keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
-    let getItemStyle = props.getItemStyle;
-    if (getItemStyle == null) {
-        // Theme
-        const theme = useTheme();
-        getItemStyle = (index, isDragging) => DnDItemStyle(index, isDragging, theme);
-    }
+    const { getItemStyle, keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } = props;
     // States
     const [items, setItems] = React.useState([]);
     const [activeId, setActiveId] = React.useState();

package/lib/components/GridMethodRef.d.ts

@@ -0,0 +1,11 @@
+import { GridLoaderStates } from './GridLoader';
+/**
+ * Grid method ref
+ */
+export interface GridMethodRef<T> {
+    /**
+     * Reset
+     * @param add Additional data
+     */
+    reset(add?: Partial<GridLoaderStates<T>>): void;
+}

package/lib/components/ScrollerGrid.d.ts

@@ -1,8 +1,8 @@
 import { DataTypes, IdDefaultType } from '@etsoo/shared';
 import React from 'react';
 import { Align, GridChildComponentProps, VariableSizeGridProps } from 'react-window';
-import { GridMethodRef } from '../mu/GridMethodRef';
 import { GridLoader, GridLoaderStates } from './GridLoader';
+import { GridMethodRef } from './GridMethodRef';
 export declare type ScrollerGridItemRendererProps<T> = Omit<GridChildComponentProps<T>, 'data'> & {
     /**
      * Selected items
@@ -41,7 +41,7 @@ export declare type ScrollerGridProps<T extends object, D extends DataTypes.Keys
     /**
      * Methods
      */
-    mRef?: React.Ref<ScrollerGridForwardRef>;
+    mRef?: React.Ref<ScrollerGridForwardRef<T>>;
     /**
      * On items select change
      */
@@ -54,7 +54,7 @@ export declare type ScrollerGridProps<T extends object, D extends DataTypes.Keys
 /**
  * Scroller grid forward ref
  */
-export interface ScrollerGridForwardRef extends GridMethodRef {
+export interface ScrollerGridForwardRef<T> extends GridMethodRef<T> {
     /**
      * Scroll to the specified offsets
      */

package/lib/components/ScrollerList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Align, ListChildComponentProps, ListProps } from 'react-window';
-import { GridMethodRef } from '../mu/GridMethodRef';
 import { GridLoader } from './GridLoader';
+import { GridMethodRef } from './GridMethodRef';
 /**
  * Scroller vertical list props
  */
@@ -13,7 +13,7 @@ export interface ScrollerListProps<T extends object> extends GridLoader<T>, Omit
     /**
      * Methods ref
      */
-    mRef?: React.Ref<ScrollerListForwardRef>;
+    mRef?: React.Ref<ScrollerListForwardRef<T>>;
     /**
      * Outer div ref
      */
@@ -48,7 +48,7 @@ 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/lib/index.d.ts

@@ -1,87 +1,14 @@
-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';
+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';
-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';
 export * from './notifier/Notifier';
 export * from '@etsoo/notificationbase';
 export * from './states/CultureState';
@@ -94,4 +21,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/lib/index.js

@@ -1,90 +1,16 @@
 // 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';
 export * from '@etsoo/notificationbase';
@@ -100,4 +26,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/lib/notifier/Notifier.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { INotificaseBase, INotification, INotifier, Notification, NotificationAlign, NotificationCallProps, NotificationContainer, NotificationRenderProps } from '@etsoo/notificationbase';
 import { IAction } from '@etsoo/appscript';
 import { IProviderProps } from '../states/IState';
-import { Breakpoint, ButtonProps } from '@mui/material';
 /**
  * React notification call props
  */
@@ -22,7 +21,7 @@ export interface NotificationReactCallProps extends NotificationCallProps {
     /**
      * Max width
      */
-    maxWidth?: Breakpoint | false;
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
     /**
      * OK label
      */
@@ -42,7 +41,7 @@ export interface NotificationReactCallProps extends NotificationCallProps {
     /**
      * Primary button props
      */
-    primaryButton?: ButtonProps;
+    primaryButton?: {};
 }
 /**
  * React notification interface

package/lib/uses/useWindowScroll.d.ts

@@ -0,0 +1,10 @@
+interface IScrollPos {
+    x: number;
+    y: number;
+}
+/**
+ * Detect window scroll
+ * @returns Scroll location
+ */
+export declare const useWindowScroll: () => IScrollPos;
+export {};

package/lib/uses/useWindowScroll.js

@@ -0,0 +1,46 @@
+import React from 'react';
+/**
+ * Detect window scroll
+ * @returns Scroll location
+ */
+export const useWindowScroll = () => {
+    // State
+    const [pos, setPos] = React.useState({
+        x: window.pageXOffset,
+        y: window.pageYOffset
+    });
+    React.useEffect(() => {
+        let ticking = false;
+        let lastPos;
+        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/lib/uses/useWindowSize.js

@@ -11,28 +11,34 @@ export const useWindowSize = () => {
     });
     React.useEffect(() => {
         let ticking = false;
-        let lastKnownSize;
+        let lastSize;
         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/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.79",
-    "description": "TypeScript ReactJs framework",
+    "version": "1.5.82",
+    "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "scripts": {
@@ -31,7 +31,6 @@
     },
     "keywords": [
         "React",
-        "MaterialUI",
         "TypeScript",
         "ETSOO",
         "SmartERP",
@@ -39,7 +38,7 @@
         "青岛亿速思维",
         "上海亿商"
     ],
-    "author": "Garry Xiao",
+    "author": "Etsoo",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/ETSOO/AppReact/issues"
@@ -51,25 +50,14 @@
         "@emotion/css": "^11.10.0",
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",
-        "@etsoo/appscript": "^1.2.82",
+        "@etsoo/appscript": "^1.2.88",
         "@etsoo/notificationbase": "^1.1.7",
-        "@etsoo/shared": "^1.1.48",
-        "@mui/icons-material": "^5.10.2",
-        "@mui/material": "^5.10.2",
-        "@types/pica": "^9.0.1",
-        "@types/pulltorefreshjs": "^0.1.5",
+        "@etsoo/shared": "^1.1.51",
         "@types/react": "^18.0.17",
-        "@types/react-avatar-editor": "^13.0.0",
         "@types/react-dom": "^18.0.6",
-        "@types/react-input-mask": "^3.0.1",
         "@types/react-window": "^1.8.5",
-        "pica": "^9.0.1",
-        "pulltorefreshjs": "^0.1.22",
         "react": "^18.2.0",
-        "react-avatar-editor": "^13.0.0",
         "react-dom": "^18.2.0",
-        "react-draggable": "^4.4.5",
-        "react-imask": "^6.4.2",
         "react-router-dom": "^6.3.0",
         "react-window": "^1.8.7"
     },
@@ -79,17 +67,17 @@
         "@babel/plugin-transform-runtime": "^7.18.10",
         "@babel/preset-env": "^7.18.10",
         "@babel/runtime-corejs3": "^7.18.9",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.3.0",
         "@types/jest": "^28.1.8",
-        "@types/react-test-renderer": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "^5.35.1",
         "@typescript-eslint/parser": "^5.35.1",
-        "eslint": "^8.22.0",
+        "eslint": "^8.23.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-react": "^7.31.0",
+        "eslint-plugin-react": "^7.31.1",
         "jest": "^28.1.3",
         "jest-environment-jsdom": "^28.1.3",
-        "react-test-renderer": "^18.2.0",
         "ts-jest": "^28.0.8",
         "typescript": "^4.8.2"
     }

package/src/{mu → components}/DnDList.tsx

@@ -11,7 +11,6 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { DataTypes } from '@etsoo/shared';
-import { Theme, useTheme } from '@mui/material';
 import React, { CSSProperties } from 'react';
 
 function SortableItem(props: {
@@ -55,27 +54,6 @@ function SortableItem(props: {
     return itemRenderer(nodeRef, actionNodeRef);
 }
 
-/**
- * DnD item default style
- * @param index Item index
- * @param isDragging Is dragging
- * @param theme Theme
- * @returns Style
- */
-export const DnDItemStyle = (
-    index: number,
-    isDragging: boolean,
-    theme: Theme
-) => ({
-    padding: theme.spacing(1),
-    zIndex: isDragging ? 1 : 'auto',
-    background: isDragging
-        ? theme.palette.primary.light
-        : index % 2 === 0
-        ? theme.palette.grey[100]
-        : theme.palette.grey[50]
-});
-
 /**
  * DnD list forward ref
  */
@@ -113,7 +91,7 @@ export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
     /**
      * Get list item style callback
      */
-    getItemStyle?: (index: number, isDragging: boolean) => CSSProperties;
+    getItemStyle: (index: number, isDragging: boolean) => CSSProperties;
 
     /**
      * Item renderer
@@ -169,16 +147,15 @@ export function DnDList<
     >
 >(props: DnDListPros<D, K>) {
     // Destruct
-    const { keyField, itemRenderer, labelField, mRef, onChange, onDragEnd } =
-        props;
-
-    let getItemStyle = props.getItemStyle;
-    if (getItemStyle == null) {
-        // Theme
-        const theme = useTheme();
-        getItemStyle = (index, isDragging) =>
-            DnDItemStyle(index, isDragging, theme);
-    }
+    const {
+        getItemStyle,
+        keyField,
+        itemRenderer,
+        labelField,
+        mRef,
+        onChange,
+        onDragEnd
+    } = props;
 
     // States
     const [items, setItems] = React.useState<D[]>([]);
@@ -326,7 +303,7 @@ export function DnDList<
                         <SortableItem
                             id={id}
                             key={id}
-                            style={getItemStyle!(index, id === activeId)}
+                            style={getItemStyle(index, id === activeId)}
                             itemRenderer={(nodeRef, actionNodeRef) =>
                                 itemRenderer(
                                     item,

package/src/components/GridMethodRef.ts

@@ -0,0 +1,12 @@
+import { GridLoaderStates } from './GridLoader';
+
+/**
+ * Grid method ref
+ */
+export interface GridMethodRef<T> {
+    /**
+     * Reset
+     * @param add Additional data
+     */
+    reset(add?: Partial<GridLoaderStates<T>>): void;
+}