@etsoo/react 1.1.82 → 1.1.86

package/lib/app/ReactApp.d.ts

@@ -8,6 +8,9 @@ import { UserAction, UserState } from '../states/UserState';
 import { InputDialogProps } from './InputDialogProps';
 /**
  * React app state detector
+ * Case 1: undefined, when refresh the whole page
+ * Case 2: false, unauthorized
+ * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
  * @param props Props
  * @returns Component
  */
@@ -47,6 +50,11 @@ export declare abstract class ReactApp<S extends IAppSettings, D extends IUser>
      * @param culture New culture definition
      */
     changeCultureEx(dispatch: React.Dispatch<CultureAction>, culture: DataTypes.CultureDefinition): void;
+    /**
+     * Try login
+     * Will update user state with UserActionType.Unauthorized
+     */
+    tryLogin(): void;
     /**
      * Set page data
      * @param data Page data

package/lib/app/ReactApp.js

@@ -5,6 +5,9 @@ import { UserActionType, UserState } from '../states/UserState';
 let app;
 /**
  * React app state detector
+ * Case 1: undefined, when refresh the whole page
+ * Case 2: false, unauthorized
+ * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
  * @param props Props
  * @returns Component
  */
@@ -52,6 +55,17 @@ export class ReactApp extends CoreApp {
         // Super call
         super.changeCulture(culture);
     }
+    /**
+     * Try login
+     * Will update user state with UserActionType.Unauthorized
+     */
+    tryLogin() {
+        // Dispatch action
+        if (this.userStateDispatch != null)
+            this.userStateDispatch({
+                type: UserActionType.Unauthorized
+            });
+    }
     /**
      * Set page data
      * @param data Page data

package/lib/index.d.ts

@@ -27,6 +27,7 @@ export * from './mu/DataGridEx';
 export * from './mu/DataGridRenderers';
 export * from './mu/DialogButton';
 export * from './mu/DraggablePaperComponent';
+export * from './mu/EmailInput';
 export * from './mu/FabBox';
 export * from './mu/FlexBox';
 export * from './mu/IconButtonLink';

package/lib/index.js

@@ -30,6 +30,7 @@ export * from './mu/DataGridEx';
 export * from './mu/DataGridRenderers';
 export * from './mu/DialogButton';
 export * from './mu/DraggablePaperComponent';
+export * from './mu/EmailInput';
 export * from './mu/FabBox';
 export * from './mu/FlexBox';
 export * from './mu/IconButtonLink';

package/lib/mu/EmailInput.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material';
+/**
+ * Email input props
+ */
+export declare type EmailInputProps = Omit<TextFieldProps, 'type'> & {};
+/**
+ * Email input
+ * @param props Props
+ */
+export declare function EmailInput(props: EmailInputProps): JSX.Element;

package/lib/mu/EmailInput.js

@@ -0,0 +1,15 @@
+import { TextField } from '@mui/material';
+import React from 'react';
+/**
+ * Email input
+ * @param props Props
+ */
+export function EmailInput(props) {
+    var _a;
+    // Destruct
+    const { inputProps = {}, ...rest } = props;
+    // Default max length
+    (_a = inputProps.maxLength) !== null && _a !== void 0 ? _a : (inputProps.maxLength = 128);
+    // Layout
+    return (React.createElement(TextField, { type: "email", fullWidth: true, inputProps: inputProps, ...rest }));
+}

package/lib/mu/SearchBar.d.ts

@@ -11,6 +11,11 @@ export interface SearchBarProps {
      * Fields
      */
     fields: React.ReactElement[];
+    /**
+     * Inner height
+     * @default 40
+     */
+    innerHeight?: number;
     /**
      * On submit callback
      */

package/lib/mu/SearchBar.js

@@ -53,7 +53,7 @@ const setChildState = (child, enabled) => {
  */
 export function SearchBar(props) {
     // Destruct
-    const { className, fields, onSubmit } = props;
+    const { className, fields, innerHeight = 40, onSubmit } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Spacing
@@ -235,7 +235,7 @@ export function SearchBar(props) {
                 if (form)
                     forms.form = form;
             } },
-            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, sx: {
+            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, height: innerHeight, sx: {
                     '& > :not(style)': {
                         flexBasis: 'auto',
                         flexGrow: 0,

package/lib/mu/pages/CommonPage.js

@@ -22,7 +22,7 @@ export const CommonPageScrollContainer = global;
  */
 export function CommonPage(props) {
     // Destruct
-    const { children, disableGutters = true, fabButtons, fabSize = 'medium', maxWidth = false, moreActions, onRefresh, onUpdate, paddings = MUGlobal.pagePaddings, scrollContainer, pullContainer, sx = {}, ...rest } = props;
+    const { children, disableGutters = true, fabButtons, fabSize = 'medium', maxWidth = false, moreActions, onRefresh, onUpdate, onUpdateAll, paddings = MUGlobal.pagePaddings, scrollContainer, pullContainer, sx = {}, ...rest } = props;
     // Merge style
     Object.assign(sx, {
         padding: paddings
@@ -30,14 +30,19 @@ export function CommonPage(props) {
     // Labels
     const labels = Labels.CommonPage;
     // Update
-    const update = onUpdate
-        ? onUpdate
-        : onRefresh
+    const update = onUpdateAll
+        ? onUpdateAll
+        : onUpdate
             ? (authorized) => {
-                if (authorized)
-                    onRefresh();
+                if (authorized == null || authorized)
+                    onUpdate();
             }
-            : undefined;
+            : onRefresh
+                ? (authorized) => {
+                    if (authorized)
+                        onRefresh();
+                }
+                : undefined;
     // Return the UI
     return (React.createElement(React.Fragment, null,
         update && React.createElement(ReactAppStateDetector, { update: update }),

package/lib/mu/pages/CommonPageProps.d.ts

@@ -21,13 +21,17 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
      */
     moreActions?: MoreAction[];
     /**
-     * On refresh callback
+     * On refresh callback, only when authorized = true
      */
     onRefresh?: () => void | PromiseLike<void>;
     /**
-     * On page update, may uses onRefresh
+     * On page update, when authorized = null or true case, may uses onRefresh
      */
-    onUpdate?: IStateUpdate;
+    onUpdate?: () => void | PromiseLike<void>;
+    /**
+     * On page update, all cases with authorized
+     */
+    onUpdateAll?: IStateUpdate;
     /**
      * Paddings
      */

package/lib/mu/pages/DataGridPage.js

@@ -15,7 +15,7 @@ import { CommonPage } from './CommonPage';
 export function DataGridPage(props) {
     var _a, _b;
     // Destruct
-    const { adjustHeight, fields, height, loadData, mRef, pageProps = {}, ...rest } = props;
+    const { adjustHeight, fields, height, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states, setStates] = React.useReducer((currentState, newState) => {
@@ -38,7 +38,7 @@ export function DataGridPage(props) {
         return loadData({ ...json, ...rest });
     };
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     React.useEffect(() => {
         if (rect != null && rect.height > 50 && height == null) {

package/lib/mu/pages/FixedListPage.js

@@ -15,7 +15,7 @@ import { CommonPage } from './CommonPage';
 export function FixedListPage(props) {
     var _a;
     // Destruct
-    const { adjustHeight, fields, loadData, mRef, pageProps = {}, ...rest } = props;
+    const { adjustHeight, fields, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
@@ -44,7 +44,7 @@ export function FixedListPage(props) {
         return loadData({ ...json, ...rest });
     };
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 100);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50) {

package/lib/mu/pages/ResponsivePage.js

@@ -16,7 +16,7 @@ import { CommonPage } from './CommonPage';
 export function ResponsivePage(props) {
     var _a, _b;
     // Destruct
-    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, height, loadData, innerItemRenderer, itemSize, mRef, pageProps = {}, ...rest } = props;
+    const { adjustHeight, columns, dataGridMinWidth = DataGridExCalColumns(columns).total, fields, height, loadData, innerItemRenderer, itemSize, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states, setStates] = React.useReducer((currentState, newState) => {
@@ -39,7 +39,7 @@ export function ResponsivePage(props) {
         setStates({ data });
     };
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const showDataGrid = ((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0) >= dataGridMinWidth;
     React.useEffect(() => {

package/lib/mu/pages/SearchPageProps.d.ts

@@ -17,4 +17,9 @@ export interface SearchPageProps<T> extends Omit<GridLoader<T>, 'loadData'> {
      * Page props
      */
     pageProps?: CommonPageProps;
+    /**
+     * Size ready to read miliseconds span
+     * @default 100
+     */
+    sizeReadyMiliseconds?: number;
 }

package/lib/mu/pages/TablePage.js

@@ -15,7 +15,7 @@ import { CommonPage, CommonPagePullContainer, CommonPageScrollContainer } from '
 export function TablePage(props) {
     var _a;
     // Destruct
-    const { columns, fields, loadData, mRef, pageProps = {}, ...rest } = props;
+    const { columns, fields, loadData, mRef, sizeReadyMiliseconds = 100, pageProps = {}, ...rest } = props;
     (_a = pageProps.paddings) !== null && _a !== void 0 ? _a : (pageProps.paddings = MUGlobal.pagePaddings);
     // States
     const [states] = React.useState({});
@@ -47,7 +47,7 @@ export function TablePage(props) {
         return previousValue + ((_a = width !== null && width !== void 0 ? width : minWidth) !== null && _a !== void 0 ? _a : TableExMinWidth);
     }, 0), [columns]);
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 100);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50 && rect.width >= totalWidth) {

package/lib/states/UserState.d.ts

@@ -8,7 +8,8 @@ import { IProviderProps, IUpdate } from './IState';
 export declare enum UserActionType {
     Login = "LOGIN",
     Logout = "LOGOUT",
-    Update = "UPDATE"
+    Update = "UPDATE",
+    Unauthorized = "UNAUTHORIZED"
 }
 /**
  * User action to manage the user

package/lib/states/UserState.js

@@ -5,12 +5,14 @@ import { State } from './State';
  */
 export var UserActionType;
 (function (UserActionType) {
-    // Login action
+    // Login
     UserActionType["Login"] = "LOGIN";
-    // Logout action
+    // Logout
     UserActionType["Logout"] = "LOGOUT";
-    // Update action
+    // Update
     UserActionType["Update"] = "UPDATE";
+    // Unauthorized
+    UserActionType["Unauthorized"] = "UNAUTHORIZED";
 })(UserActionType || (UserActionType = {}));
 /**
  * User state
@@ -29,7 +31,7 @@ export class UserState {
                     return {
                         ...state,
                         token: undefined,
-                        authorized: false // Flag as authorized
+                        authorized: false // Flag as unauthorized
                     };
                 case UserActionType.Update:
                     if (action.update) {
@@ -38,6 +40,11 @@ export class UserState {
                         return newState;
                     }
                     return state;
+                case UserActionType.Unauthorized:
+                    return {
+                        ...state,
+                        authorized: false // Flag as unauthorized
+                    };
                 default:
                     return state;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.1.82",
+    "version": "1.1.86",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",

package/src/app/ReactApp.ts

@@ -23,6 +23,9 @@ let app: IReactApp<IAppSettings, any>;
 
 /**
  * React app state detector
+ * Case 1: undefined, when refresh the whole page
+ * Case 2: false, unauthorized
+ * Case 3: true, authorized or considered as authorized (maynot, like token expiry)
  * @param props Props
  * @returns Component
  */
@@ -103,6 +106,18 @@ export abstract class ReactApp<S extends IAppSettings, D extends IUser>
         super.changeCulture(culture);
     }
 
+    /**
+     * Try login
+     * Will update user state with UserActionType.Unauthorized
+     */
+    override tryLogin() {
+        // Dispatch action
+        if (this.userStateDispatch != null)
+            this.userStateDispatch({
+                type: UserActionType.Unauthorized
+            });
+    }
+
     /**
      * Set page data
      * @param data Page data

package/src/index.ts

@@ -32,6 +32,7 @@ export * from './mu/DataGridEx';
 export * from './mu/DataGridRenderers';
 export * from './mu/DialogButton';
 export * from './mu/DraggablePaperComponent';
+export * from './mu/EmailInput';
 export * from './mu/FabBox';
 export * from './mu/FlexBox';
 export * from './mu/IconButtonLink';

package/src/mu/EmailInput.tsx

@@ -0,0 +1,24 @@
+import { TextField, TextFieldProps } from '@mui/material';
+import React from 'react';
+
+/**
+ * Email input props
+ */
+export type EmailInputProps = Omit<TextFieldProps, 'type'> & {};
+
+/**
+ * Email input
+ * @param props Props
+ */
+export function EmailInput(props: EmailInputProps) {
+    // Destruct
+    const { inputProps = {}, ...rest } = props;
+
+    // Default max length
+    inputProps.maxLength ??= 128;
+
+    // Layout
+    return (
+        <TextField type="email" fullWidth inputProps={inputProps} {...rest} />
+    );
+}

package/src/mu/SearchBar.tsx

@@ -20,6 +20,12 @@ export interface SearchBarProps {
      */
     fields: React.ReactElement[];
 
+    /**
+     * Inner height
+     * @default 40
+     */
+    innerHeight?: number;
+
     /**
      * On submit callback
      */
@@ -78,7 +84,7 @@ const setChildState = (child: Element, enabled: boolean) => {
  */
 export function SearchBar(props: SearchBarProps) {
     // Destruct
-    const { className, fields, onSubmit } = props;
+    const { className, fields, innerHeight = 40, onSubmit } = props;
 
     // Labels
     const labels = Labels.CommonPage;
@@ -316,6 +322,7 @@ export function SearchBar(props: SearchBarProps) {
                     alignItems="center"
                     direction="row"
                     spacing={1}
+                    height={innerHeight}
                     sx={{
                         '& > :not(style)': {
                             flexBasis: 'auto',

package/src/mu/pages/CommonPage.tsx

@@ -35,6 +35,7 @@ export function CommonPage(props: CommonPageProps) {
         moreActions,
         onRefresh,
         onUpdate,
+        onUpdateAll,
         paddings = MUGlobal.pagePaddings,
         scrollContainer,
         pullContainer,
@@ -51,8 +52,12 @@ export function CommonPage(props: CommonPageProps) {
     const labels = Labels.CommonPage;
 
     // Update
-    const update = onUpdate
-        ? onUpdate
+    const update = onUpdateAll
+        ? onUpdateAll
+        : onUpdate
+        ? (authorized?: boolean) => {
+              if (authorized == null || authorized) onUpdate();
+          }
         : onRefresh
         ? (authorized?: boolean) => {
               if (authorized) onRefresh();

package/src/mu/pages/CommonPageProps.ts

@@ -24,14 +24,19 @@ export interface CommonPageProps extends Omit<ContainerProps, 'id'> {
     moreActions?: MoreAction[];
 
     /**
-     * On refresh callback
+     * On refresh callback, only when authorized = true
      */
     onRefresh?: () => void | PromiseLike<void>;
 
     /**
-     * On page update, may uses onRefresh
+     * On page update, when authorized = null or true case, may uses onRefresh
      */
-    onUpdate?: IStateUpdate;
+    onUpdate?: () => void | PromiseLike<void>;
+
+    /**
+     * On page update, all cases with authorized
+     */
+    onUpdateAll?: IStateUpdate;
 
     /**
      * Paddings

package/src/mu/pages/DataGridPage.tsx

@@ -30,6 +30,7 @@ export function DataGridPage<T>(props: DataGridPageProps<T>) {
         height,
         loadData,
         mRef,
+        sizeReadyMiliseconds = 100,
         pageProps = {},
         ...rest
     } = props;
@@ -63,7 +64,7 @@ export function DataGridPage<T>(props: DataGridPageProps<T>) {
     };
 
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
 
     React.useEffect(() => {

package/src/mu/pages/FixedListPage.tsx

@@ -30,6 +30,7 @@ export function FixedListPage<T>(
         fields,
         loadData,
         mRef,
+        sizeReadyMiliseconds = 100,
         pageProps = {},
         ...rest
     } = props;
@@ -74,7 +75,7 @@ export function FixedListPage<T>(
     };
 
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 100);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50) {

package/src/mu/pages/ResponsivePage.tsx

@@ -35,6 +35,7 @@ export function ResponsivePage<T>(props: ResponsePageProps<T>) {
         innerItemRenderer,
         itemSize,
         mRef,
+        sizeReadyMiliseconds = 100,
         pageProps = {},
         ...rest
     } = props;
@@ -68,7 +69,7 @@ export function ResponsivePage<T>(props: ResponsePageProps<T>) {
     };
 
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 50);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const showDataGrid = (rect?.width ?? 0) >= dataGridMinWidth;
 

package/src/mu/pages/SearchPageProps.ts

@@ -19,4 +19,10 @@ export interface SearchPageProps<T> extends Omit<GridLoader<T>, 'loadData'> {
      * Page props
      */
     pageProps?: CommonPageProps;
+
+    /**
+     * Size ready to read miliseconds span
+     * @default 100
+     */
+    sizeReadyMiliseconds?: number;
 }

package/src/mu/pages/TablePage.tsx

@@ -20,7 +20,15 @@ import { TablePageProps } from './TablePageProps';
  */
 export function TablePage<T>(props: TablePageProps<T>) {
     // Destruct
-    const { columns, fields, loadData, mRef, pageProps = {}, ...rest } = props;
+    const {
+        columns,
+        fields,
+        loadData,
+        mRef,
+        sizeReadyMiliseconds = 100,
+        pageProps = {},
+        ...rest
+    } = props;
 
     pageProps.paddings ??= MUGlobal.pagePaddings;
 
@@ -66,7 +74,7 @@ export function TablePage<T>(props: TablePageProps<T>) {
     );
 
     // Watch container
-    const { dimensions } = useDimensions(1, undefined, 100);
+    const { dimensions } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
     const list = React.useMemo(() => {
         if (rect != null && rect.height > 50 && rect.width >= totalWidth) {

package/src/states/UserState.ts

@@ -7,14 +7,17 @@ import { State } from './State';
  * Style like 'const enum' will remove definition of the enum and cause module errors
  */
 export enum UserActionType {
-    // Login action
+    // Login
     Login = 'LOGIN',
 
-    // Logout action
+    // Logout
     Logout = 'LOGOUT',
 
-    // Update action
-    Update = 'UPDATE'
+    // Update
+    Update = 'UPDATE',
+
+    // Unauthorized
+    Unauthorized = 'UNAUTHORIZED'
 }
 
 /**
@@ -75,7 +78,7 @@ export class UserState<D extends IUser> {
                         return {
                             ...state, // Keep other user data
                             token: undefined, // Remove token
-                            authorized: false // Flag as authorized
+                            authorized: false // Flag as unauthorized
                         };
                     case UserActionType.Update:
                         if (action.update) {
@@ -84,6 +87,11 @@ export class UserState<D extends IUser> {
                             return newState;
                         }
                         return state;
+                    case UserActionType.Unauthorized:
+                        return {
+                            ...state, // Keep other user data and token for refresh
+                            authorized: false // Flag as unauthorized
+                        };
                     default:
                         return state;
                 }