@etsoo/react 1.7.94 → 1.7.95

package/src/states/UserState.ts

@@ -1,44 +1,44 @@
-import { IAction, IUser, IUserData, UserKey } from '@etsoo/appscript';
-import { Utils } from '@etsoo/shared';
-import { IProviderProps, IUpdate } from './IState';
-import { State } from './State';
+import { IAction, IUser, IUserData, UserKey } from "@etsoo/appscript";
+import { Utils } from "@etsoo/shared";
+import { IProviderProps, IUpdate } from "./IState";
+import { State } from "./State";
 
 /**
  * User action type
  * Style like 'const enum' will remove definition of the enum and cause module errors
  */
 export enum UserActionType {
-    // Login
-    Login = 'LOGIN',
+  // Login
+  Login = "LOGIN",
 
-    // Logout
-    Logout = 'LOGOUT',
+  // Logout
+  Logout = "LOGOUT",
 
-    // Update
-    Update = 'UPDATE',
+  // Update
+  Update = "UPDATE",
 
-    // Unauthorized
-    Unauthorized = 'UNAUTHORIZED'
+  // Unauthorized
+  Unauthorized = "UNAUTHORIZED"
 }
 
 /**
  * User action to manage the user
  */
 export interface UserAction<D extends IUser> extends IAction {
-    /**
-     * Action type
-     */
-    type: UserActionType;
+  /**
+   * Action type
+   */
+  type: UserActionType;
 
-    /**
-     * User data
-     */
-    user?: IUserData;
+  /**
+   * User data
+   */
+  user?: IUserData;
 
-    /**
-     * User update callback
-     */
-    update?: (state: D) => void;
+  /**
+   * User update callback
+   */
+  update?: (state: D) => void;
 }
 
 /**
@@ -55,83 +55,83 @@ export interface UserCalls<D extends IUser> extends IUpdate<D, UserAction<D>> {}
  * User state
  */
 export class UserState<D extends IUser> {
-    /**
-     * Context
-     */
-    readonly context;
+  /**
+   * Context
+   */
+  readonly context;
 
-    /**
-     * Provider
-     */
-    readonly provider;
+  /**
+   * Provider
+   */
+  readonly provider;
 
-    /**
-     * Constructor
-     */
-    constructor() {
-        const { context, provider } = State.create<
-            D,
-            UserAction<D>,
-            UserCalls<D>,
-            UserProviderProps<D>
-        >(
-            (state, action) => {
-                // User reducer
-                switch (action.type) {
-                    case UserActionType.Login:
-                        const lastChangedFields =
-                            state.authorized && action.user
-                                ? this.getChangedFields(action.user, state)
-                                : undefined;
-                        return {
-                            ...action.user!,
-                            authorized: true,
-                            lastChangedFields
-                        } as D;
-                    case UserActionType.Logout:
-                        return {
-                            ...state, // Keep other user data
-                            lastChangedFields: undefined,
-                            token: undefined, // Remove token
-                            authorized: false // Flag as unauthorized
-                        };
-                    case UserActionType.Update:
-                        if (action.update) {
-                            var newState = { ...state };
-                            action.update(newState);
-                            newState.lastChangedFields = this.getChangedFields(
-                                newState,
-                                state
-                            );
-                            return newState;
-                        }
-                        return state;
-                    case UserActionType.Unauthorized:
-                        // Avoid multiple updates (For example, multiple API calls failed with 405)
-                        if (state.authorized === false) return state;
+  /**
+   * Constructor
+   */
+  constructor() {
+    const { context, provider } = State.create<
+      D,
+      UserAction<D>,
+      UserCalls<D>,
+      UserProviderProps<D>
+    >(
+      (state, action) => {
+        // User reducer
+        switch (action.type) {
+          case UserActionType.Login:
+            const lastChangedFields =
+              state.authorized && action.user
+                ? this.getChangedFields(action.user, state)
+                : undefined;
+            return {
+              ...action.user!,
+              authorized: true,
+              lastChangedFields
+            } as D;
+          case UserActionType.Logout:
+            return {
+              ...state, // Keep other user data
+              lastChangedFields: undefined,
+              token: undefined, // Remove token
+              authorized: false // Flag as unauthorized
+            };
+          case UserActionType.Update:
+            if (action.update) {
+              var newState = { ...state };
+              action.update(newState);
+              newState.lastChangedFields = this.getChangedFields(
+                newState,
+                state
+              );
+              return newState;
+            }
+            return state;
+          case UserActionType.Unauthorized:
+            // Avoid multiple updates (For example, multiple API calls failed with 405)
+            if (state.authorized === false) return state;
 
-                        return {
-                            ...state, // Keep other user data and token for refresh
-                            lastChangedFields: undefined,
-                            authorized: false // Flag as unauthorized
-                        };
-                    default:
-                        return state;
-                }
-            },
-            {} as D,
-            {} as UserCalls<D>
-        );
+            return {
+              ...state, // Keep other user data and token for refresh
+              lastChangedFields: undefined,
+              authorized: false // Flag as unauthorized
+            };
+          default:
+            return state;
+        }
+      },
+      {} as D,
+      {} as UserCalls<D>
+    );
 
-        this.context = context;
-        this.provider = provider;
-    }
+    this.context = context;
+    this.provider = provider;
+  }
 
-    private getChangedFields(input: object, init: object) {
-        return Utils.objectUpdated(input, init, [
-            'authorized',
-            'seconds',
-            'lastChangedFields'
-        ]) as UserKey[];
-    }
+  private getChangedFields(input: object, init: object) {
+    return Utils.objectUpdated(input, init, [
+      "authorized",
+      "seconds",
+      "lastChangedFields"
+    ]) as UserKey[];
+  }
 }

package/src/uses/useAsyncState.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from "react";
 
 export function useAsyncState<S = undefined>(): [
-    S | undefined,
-    (newState: React.SetStateAction<S | undefined>) => Promise<S | undefined>
+  S | undefined,
+  (newState: React.SetStateAction<S | undefined>) => Promise<S | undefined>
 ];
 
 /**
@@ -11,7 +11,7 @@ export function useAsyncState<S = undefined>(): [
  * @returns Current state and update action
  */
 export function useAsyncState<S>(
-    initialState: S | (() => S)
+  initialState: S | (() => S)
 ): [S, (newState: React.SetStateAction<S>) => Promise<S>];
 
 /**
@@ -20,47 +20,45 @@ export function useAsyncState<S>(
  * @returns Current state and update action
  */
 export function useAsyncState<S>(
-    initialState?: S | (() => S)
+  initialState?: S | (() => S)
 ): [
-    S | undefined,
-    (newState: React.SetStateAction<S | undefined>) => Promise<S | undefined>
+  S | undefined,
+  (newState: React.SetStateAction<S | undefined>) => Promise<S | undefined>
 ] {
-    // State
-    const [state, setState] = React.useState(initialState);
+  // State
+  const [state, setState] = React.useState(initialState);
 
-    // Resolve sate
-    const resolveState =
-        React.useRef<
-            (value: S | undefined | PromiseLike<S | undefined>) => void
-        >();
+  // Resolve sate
+  const resolveState =
+    React.useRef<(value: S | undefined | PromiseLike<S | undefined>) => void>();
 
-    // Is mounted or not
-    const isMounted = React.useRef(false);
-    React.useEffect(() => {
-        isMounted.current = true;
+  // Is mounted or not
+  const isMounted = React.useRef(false);
+  React.useEffect(() => {
+    isMounted.current = true;
 
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
 
-    // When state update
-    React.useEffect(() => {
-        if (resolveState.current) {
-            resolveState.current(state);
-        }
-    }, [state]);
+  // When state update
+  React.useEffect(() => {
+    if (resolveState.current) {
+      resolveState.current(state);
+    }
+  }, [state]);
 
-    const setAsyncState = React.useCallback(
-        (newState: React.SetStateAction<S | undefined>) =>
-            new Promise<S | undefined>((resolve) => {
-                if (isMounted.current) {
-                    resolveState.current = resolve;
-                    setState(newState);
-                }
-            }),
-        []
-    );
+  const setAsyncState = React.useCallback(
+    (newState: React.SetStateAction<S | undefined>) =>
+      new Promise<S | undefined>((resolve) => {
+        if (isMounted.current) {
+          resolveState.current = resolve;
+          setState(newState);
+        }
+      }),
+    []
+  );
 
-    return [state, setAsyncState];
+  return [state, setAsyncState];
 }

package/src/uses/useCombinedRefs.ts

@@ -4,22 +4,22 @@
  * @returns Callback
  */
 export function useCombinedRefs<T>(...refs: (React.Ref<T> | undefined)[]) {
-    return (target: T | null) => {
-        // Ignore null reference
-        if (target == null) return;
+  return (target: T | null) => {
+    // Ignore null reference
+    if (target == null) return;
 
-        // Update all refs
-        refs.forEach((ref) => {
-            // Null ref
-            if (!ref) return;
+    // Update all refs
+    refs.forEach((ref) => {
+      // Null ref
+      if (!ref) return;
 
-            // Callback function
-            if (typeof ref === 'function') {
-                ref(target);
-            } else {
-                // as any to update readonly property
-                Reflect.set(ref, 'current', target);
-            }
-        });
-    };
+      // Callback function
+      if (typeof ref === "function") {
+        ref(target);
+      } else {
+        // as any to update readonly property
+        Reflect.set(ref, "current", target);
+      }
+    });
+  };
 }

package/src/uses/useDelayedExecutor.ts

@@ -1,15 +1,15 @@
-import { DelayedExecutorType, ExtendUtils } from '@etsoo/shared';
-import React from 'react';
+import { DelayedExecutorType, ExtendUtils } from "@etsoo/shared";
+import React from "react";
 
 /**
  * Create delayed executor
  */
 export function useDelayedExecutor<P extends any[]>(
-    func: (...args: P) => void,
-    delayMiliseconcs: number
+  func: (...args: P) => void,
+  delayMiliseconcs: number
 ) {
-    const ref = React.useRef<DelayedExecutorType<P>>();
-    if (ref.current == null)
-        ref.current = ExtendUtils.delayedExecutor(func, delayMiliseconcs);
-    return ref.current;
+  const ref = React.useRef<DelayedExecutorType<P>>();
+  if (ref.current == null)
+    ref.current = ExtendUtils.delayedExecutor(func, delayMiliseconcs);
+  return ref.current;
 }

package/src/uses/useDimensions.ts

@@ -1,10 +1,10 @@
-import { DomUtils } from '@etsoo/shared';
-import React from 'react';
-import { useDelayedExecutor } from './useDelayedExecutor';
+import { DomUtils } from "@etsoo/shared";
+import React from "react";
+import { useDelayedExecutor } from "./useDelayedExecutor";
 
 interface states {
-    count: number;
-    indices: number[];
+  count: number;
+  indices: number[];
 }
 
 /**
@@ -15,109 +15,108 @@ interface states {
  * @param equalCallback Equall callback
  */
 export function useDimensions(
-    elements: number,
-    updateCallback?: (target: Element, rect: DOMRect) => boolean | void,
-    miliseconds: number = 50,
-    equalCallback: (
-        d1?: DOMRect,
-        d2?: DOMRect
-    ) => boolean = DomUtils.dimensionEqual
+  elements: number,
+  updateCallback?: (target: Element, rect: DOMRect) => boolean | void,
+  miliseconds: number = 50,
+  equalCallback: (
+    d1?: DOMRect,
+    d2?: DOMRect
+  ) => boolean = DomUtils.dimensionEqual
 ) {
-    // State
-    const [state, setState] = React.useState<states>({
-        count: 0,
-        indices: []
-    });
+  // State
+  const [state, setState] = React.useState<states>({
+    count: 0,
+    indices: []
+  });
+
+  // Dimentions
+  const dimensions =
+    React.useRef<[React.RefCallback<Element>, Element?, DOMRect?][]>();
+  if (dimensions.current == null) {
+    // Init
+    const init: [React.RefCallback<Element>, Element?, DOMRect?][] = [];
+    for (let e = 0; e < elements; e++) {
+      init.push(
+        ((index): [React.RefCallback<Element>] => {
+          return [
+            (instance) => {
+              if (instance != null) {
+                // Current element
+                const currentElement = init[index][1];
+
+                if (currentElement != null) {
+                  // Same target, return
+                  if (currentElement == instance) return;
+
+                  // Cancel observation
+                  resizeObserver.unobserve(currentElement);
+                }
 
-    // Dimentions
-    const dimensions =
-        React.useRef<[React.RefCallback<Element>, Element?, DOMRect?][]>();
-    if (dimensions.current == null) {
-        // Init
-        const init: [React.RefCallback<Element>, Element?, DOMRect?][] = [];
-        for (let e = 0; e < elements; e++) {
-            init.push(
-                ((index): [React.RefCallback<Element>] => {
-                    return [
-                        (instance) => {
-                            if (instance != null) {
-                                // Current element
-                                const currentElement = init[index][1];
-
-                                if (currentElement != null) {
-                                    // Same target, return
-                                    if (currentElement == instance) return;
-
-                                    // Cancel observation
-                                    resizeObserver.unobserve(currentElement);
-                                }
-
-                                // Update element
-                                init[index][1] = instance;
-
-                                // Start observe
-                                resizeObserver.observe(instance);
-                            }
-                        }
-                    ];
-                })(e)
-            );
-        }
-        dimensions.current = init;
-    }
+                // Update element
+                init[index][1] = instance;
 
-    const delayed = useDelayedExecutor(setState, miliseconds);
-
-    // Observer
-    const resizeObserver = new ResizeObserver((entries) => {
-        // Update Rect
-        const indices: number[] = [];
-        const init = dimensions.current!;
-
-        entries.forEach((entry) => {
-            const index = init.findIndex((item) => item[1] === entry.target);
-            if (index !== -1) {
-                // Previous rect
-                const pre = init[index][2];
-
-                // New rect
-                const rect = entry.target.getBoundingClientRect();
-
-                // Check equal
-                if (!equalCallback(pre, rect)) {
-                    // Update callback
-                    if (updateCallback) {
-                        // Return false means no further push
-                        if (updateCallback(entry.target, rect) === false)
-                            return;
-                    }
-
-                    // Update rect
-                    init[index][2] = rect;
-
-                    // Push for update
-                    indices.push(index);
-                }
+                // Start observe
+                resizeObserver.observe(instance);
+              }
             }
-        });
-
-        // Update state
-        if (indices.length > 0) {
-            // Count only for unique update
-            const update = { count: state.count + 1, indices };
-            delayed.call(undefined, update);
+          ];
+        })(e)
+      );
+    }
+    dimensions.current = init;
+  }
+
+  const delayed = useDelayedExecutor(setState, miliseconds);
+
+  // Observer
+  const resizeObserver = new ResizeObserver((entries) => {
+    // Update Rect
+    const indices: number[] = [];
+    const init = dimensions.current!;
+
+    entries.forEach((entry) => {
+      const index = init.findIndex((item) => item[1] === entry.target);
+      if (index !== -1) {
+        // Previous rect
+        const pre = init[index][2];
+
+        // New rect
+        const rect = entry.target.getBoundingClientRect();
+
+        // Check equal
+        if (!equalCallback(pre, rect)) {
+          // Update callback
+          if (updateCallback) {
+            // Return false means no further push
+            if (updateCallback(entry.target, rect) === false) return;
+          }
+
+          // Update rect
+          init[index][2] = rect;
+
+          // Push for update
+          indices.push(index);
         }
+      }
     });
 
-    // Layout ready
-    React.useEffect(() => {
-        return () => {
-            // Clear the observer
-            resizeObserver.disconnect();
-            delayed.clear();
-        };
-    }, []);
-
-    // Return
-    return { dimensions: dimensions.current, state };
+    // Update state
+    if (indices.length > 0) {
+      // Count only for unique update
+      const update = { count: state.count + 1, indices };
+      delayed.call(undefined, update);
+    }
+  });
+
+  // Layout ready
+  React.useEffect(() => {
+    return () => {
+      // Clear the observer
+      resizeObserver.disconnect();
+      delayed.clear();
+    };
+  }, []);
+
+  // Return
+  return { dimensions: dimensions.current, state };
 }

package/src/uses/useParamsEx.ts

@@ -1,14 +1,14 @@
-import { DataTypes, DomUtils } from '@etsoo/shared';
-import { useParams } from 'react-router-dom';
+import { DataTypes, DomUtils } from "@etsoo/shared";
+import { useParams } from "react-router-dom";
 
 /**
  * Extended useParams of react-router-dom
  * Provide exact type data
  */
 export function useParamsEx<T extends DataTypes.BasicTemplate>(template: T) {
-    // Get parameters
-    const params = useParams<{ [K in keyof T]: string }>();
+  // Get parameters
+  const params = useParams<{ [K in keyof T]: string }>();
 
-    // Return
-    return DomUtils.dataAs(params, template, false);
+  // Return
+  return DomUtils.dataAs(params, template, false);
 }

package/src/uses/useRefs.ts

@@ -1,5 +1,5 @@
-import { DataTypes } from '@etsoo/shared';
-import React from 'react';
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
 
 /**
  * Create multiple refs
@@ -7,9 +7,9 @@ import React from 'react';
  * @returns Result
  */
 export function useRefs<F extends ReadonlyArray<string>, T = HTMLInputElement>(
-    fields: F
+  fields: F
 ): DataTypes.DI<F, React.MutableRefObject<T | null>> {
-    const refs: Record<string, React.MutableRefObject<T | null>> = {};
-    fields.forEach((field) => (refs[field] = React.useRef<T>(null)));
-    return refs as any;
+  const refs: Record<string, React.MutableRefObject<T | null>> = {};
+  fields.forEach((field) => (refs[field] = React.useRef<T>(null)));
+  return refs as any;
 }