@etsoo/react 1.5.23 → 1.5.26

package/lib/index.d.ts

@@ -88,6 +88,7 @@ export * from './states/RouterProps';
 export * from './states/State';
 export * from './states/UserState';
 export * from './uses/useCombinedRefs';
+export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useTimeout';
 export * from './uses/useWindowSize';

package/lib/index.js

@@ -94,6 +94,7 @@ export * from './states/State';
 export * from './states/UserState';
 // uses
 export * from './uses/useCombinedRefs';
+export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useTimeout';
 export * from './uses/useWindowSize';

package/lib/mu/BridgeCloseButton.js

@@ -15,7 +15,9 @@ export function BridgeCloseButton(props) {
         : globalApp.get('close'), validate, ...rest } = props;
     // Host
     const host = BridgeUtils.host;
-    if (host == null || (validate && validate(host) === false)) {
+    if (host == null ||
+        !host.closable() ||
+        (validate && validate(host) === false)) {
         return React.createElement(React.Fragment, null);
     }
     // Click handler

package/lib/mu/InputField.js

@@ -1,5 +1,6 @@
 import { TextField } from '@mui/material';
 import React from 'react';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 import { MUGlobal } from './MUGlobal';
 /**
  * Input field
@@ -15,7 +16,9 @@ export function InputField(props) {
     if (readOnly != null)
         InputProps.readOnly = readOnly;
     const isMounted = React.useRef(true);
-    const delaySeed = React.useRef(0);
+    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
+        ? useDelayedExecutor(onChange, changeDelay)
+        : undefined;
     const onChangeEx = (event) => {
         if (onChange == null)
             return;
@@ -23,17 +26,12 @@ export function InputField(props) {
             onChange(event);
             return;
         }
-        if (delaySeed.current > 0)
-            window.clearTimeout(delaySeed.current);
-        delaySeed.current = window.setTimeout(() => {
-            if (isMounted.current)
-                onChange(event);
-        }, changeDelay);
+        delayed === null || delayed === void 0 ? void 0 : delayed.call(undefined, event);
     };
     React.useEffect(() => {
         return () => {
             isMounted.current = false;
-            window.clearTimeout(delaySeed.current);
+            delayed === null || delayed === void 0 ? void 0 : delayed.clear();
         };
     }, []);
     // Layout

package/lib/mu/SearchBar.js

@@ -5,6 +5,7 @@ import { useDimensions } from '../uses/useDimensions';
 import { DomUtils } from '@etsoo/shared';
 import { Labels } from '../app/Labels';
 import { ReactUtils } from '../app/ReactUtils';
+import { useDelayedExecutor } from '..';
 // Cached width attribute name
 const cachedWidthName = 'data-cached-width';
 // Reset form
@@ -179,7 +180,7 @@ export function SearchBar(props) {
             return;
         if (state.form == null)
             state.form = event.currentTarget;
-        handleSubmit();
+        delayed.call();
     };
     // Handle more button click
     const handleMore = () => {
@@ -191,8 +192,18 @@ export function SearchBar(props) {
             return;
         if (state.moreForm == null)
             state.moreForm = event.currentTarget;
-        handleSubmit();
+        delayed.call();
     };
+    // Submit at once
+    const handleSubmitInstant = (reset = false) => {
+        // Prepare data
+        const data = new FormData(state.form);
+        if (state.moreForm != null) {
+            DomUtils.mergeFormData(data, new FormData(state.moreForm));
+        }
+        onSubmit(data, reset);
+    };
+    const delayed = useDelayedExecutor(handleSubmitInstant, 480);
     // Reset
     const handleReset = () => {
         // Clear form values
@@ -203,36 +214,12 @@ export function SearchBar(props) {
         // Resubmit
         handleSubmitInstant(true);
     };
-    // Submit
-    const handleSubmit = (delay = 480) => {
-        if (state.submitSeed != null) {
-            clearTimeout(state.submitSeed);
-        }
-        // Delay the change
-        state.submitSeed = window.setTimeout(handleSubmitInstant, delay);
-    };
-    // Submit at once
-    const handleSubmitInstant = (reset = false) => {
-        // Reset timeout
-        state.submitSeed = undefined;
-        // Prepare data
-        const data = new FormData(state.form);
-        if (state.moreForm != null) {
-            DomUtils.mergeFormData(data, new FormData(state.moreForm));
-        }
-        onSubmit(data, reset);
-    };
-    // First loading
     React.useEffect(() => {
+        // Delayed way
+        delayed.call(100);
         return () => {
-            // Clear the seeds
-            if (state.submitSeed != null)
-                clearTimeout(state.submitSeed);
+            delayed.clear();
         };
-    }, []);
-    React.useEffect(() => {
-        // Delayed way
-        handleSubmit(100);
     }, [className]);
     // Layout
     return (React.createElement(React.Fragment, null,

package/lib/mu/SearchField.js

@@ -1,5 +1,6 @@
 import { TextField } from '@mui/material';
 import React from 'react';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 import { MUGlobal } from './MUGlobal';
 /**
  * Search field
@@ -15,7 +16,9 @@ export function SearchField(props) {
     if (readOnly != null)
         InputProps.readOnly = readOnly;
     const isMounted = React.useRef(true);
-    const delaySeed = React.useRef(0);
+    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
+        ? useDelayedExecutor(onChange, changeDelay)
+        : undefined;
     const onChangeEx = (event) => {
         if (onChange == null)
             return;
@@ -23,17 +26,12 @@ export function SearchField(props) {
             onChange(event);
             return;
         }
-        if (delaySeed.current > 0)
-            window.clearTimeout(delaySeed.current);
-        delaySeed.current = window.setTimeout(() => {
-            if (isMounted.current)
-                onChange(event);
-        }, changeDelay);
+        delayed === null || delayed === void 0 ? void 0 : delayed.call(undefined, event);
     };
     React.useEffect(() => {
         return () => {
             isMounted.current = false;
-            window.clearTimeout(delaySeed.current);
+            delayed === null || delayed === void 0 ? void 0 : delayed.clear();
         };
     }, []);
     // Layout

package/lib/mu/TextFieldEx.js

@@ -4,6 +4,7 @@ import { MUGlobal } from './MUGlobal';
 import { Clear, Visibility } from '@mui/icons-material';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { Keyboard } from '@etsoo/shared';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 export const TextFieldEx = React.forwardRef((props, ref) => {
     // Destructure
     const { changeDelay, error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
@@ -91,7 +92,9 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
         }
     }), []);
     const isMounted = React.useRef(true);
-    const delaySeed = React.useRef(0);
+    const delayed = onChange != null && changeDelay != null && changeDelay >= 1
+        ? useDelayedExecutor(onChange, changeDelay)
+        : undefined;
     const onChangeEx = (event) => {
         if (errorText != null) {
             // Reset
@@ -111,17 +114,12 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
             onChange(event);
             return;
         }
-        if (delaySeed.current > 0)
-            window.clearTimeout(delaySeed.current);
-        delaySeed.current = window.setTimeout(() => {
-            if (isMounted.current)
-                onChange(event);
-        }, changeDelay);
+        delayed === null || delayed === void 0 ? void 0 : delayed.call(undefined, event);
     };
     React.useEffect(() => {
         return () => {
             isMounted.current = false;
-            window.clearTimeout(delaySeed.current);
+            delayed === null || delayed === void 0 ? void 0 : delayed.clear();
         };
     }, []);
     // Textfield

package/lib/mu/Tiplist.js

@@ -2,6 +2,7 @@ import { DataTypes } from '@etsoo/shared';
 import { Autocomplete } from '@mui/material';
 import React from 'react';
 import { ReactUtils } from '../app/ReactUtils';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
 /**
@@ -57,17 +58,11 @@ export function Tiplist(props) {
         }
         // Stop bubble
         event.stopPropagation();
-        // Clear any seed
-        if (state.loadDataSeed != null) {
-            clearTimeout(state.loadDataSeed);
-        }
-        // Delay 480 for loading data
-        state.loadDataSeed = window.setTimeout(loadDataDirect, 480, event.currentTarget.value);
+        // Call with delay
+        delayed.call(undefined, event.currentTarget.value);
     };
     // Directly load data
     const loadDataDirect = (keyword, id) => {
-        // Reset seed value
-        state.loadDataSeed = undefined;
         // Reset options
         // setOptions([]);
         if (id == null) {
@@ -96,6 +91,7 @@ export function Tiplist(props) {
             });
         });
     };
+    const delayed = useDelayedExecutor(loadDataDirect, 480);
     const setInputValue = (value) => {
         var _a;
         stateUpdate({ value });
@@ -126,11 +122,8 @@ export function Tiplist(props) {
     }
     React.useEffect(() => {
         return () => {
-            // Clear any seed
-            if (state.loadDataSeed != null) {
-                clearTimeout(state.loadDataSeed);
-            }
             isMounted.current = false;
+            delayed.clear();
         };
     }, []);
     // Layout

package/lib/mu/TooltipClick.js

@@ -1,5 +1,6 @@
 import { ClickAwayListener, Tooltip } from '@mui/material';
 import React from 'react';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 /**
  * Tooltip with click visibility
  * @param props Props
@@ -12,26 +13,19 @@ export function TooltipClick(props) {
     // State
     const [localTitle, setTitle] = React.useState(title);
     const [open, setOpen] = React.useState(false);
-    const leaveSeed = React.useRef(0);
+    const delayed = leaveDelay > 0
+        ? useDelayedExecutor(() => setOpen(false), leaveDelay)
+        : undefined;
     // Callback for open the tooltip
     const openTooltip = (newTitle) => {
         setOpen(true);
         if (newTitle)
             setTitle(newTitle);
-        if (leaveDelay > 0) {
-            clearLeaveSeed();
-            leaveSeed.current = window.setTimeout(() => setOpen(false), leaveDelay);
-        }
-    };
-    const clearLeaveSeed = () => {
-        if (leaveSeed.current > 0) {
-            window.clearTimeout(leaveSeed.current);
-            leaveSeed.current = 0;
-        }
+        delayed === null || delayed === void 0 ? void 0 : delayed.call();
     };
     React.useEffect(() => {
         return () => {
-            clearLeaveSeed();
+            delayed === null || delayed === void 0 ? void 0 : delayed.clear();
         };
     }, []);
     // Layout

package/lib/uses/useDelayedExecutor.d.ts

@@ -0,0 +1,5 @@
+import { DelayedExecutorType } from '@etsoo/shared';
+/**
+ * Create delayed executor
+ */
+export declare function useDelayedExecutor<P extends any[]>(func: (...args: P) => void, delayMiliseconcs: number): DelayedExecutorType<P>;

package/lib/uses/useDelayedExecutor.js

@@ -0,0 +1,11 @@
+import { ExtendUtils } from '@etsoo/shared';
+import React from 'react';
+/**
+ * Create delayed executor
+ */
+export function useDelayedExecutor(func, delayMiliseconcs) {
+    const ref = React.useRef();
+    if (ref.current == null)
+        ref.current = ExtendUtils.delayedExecutor(func, delayMiliseconcs);
+    return ref.current;
+}

package/lib/uses/useDimensions.d.ts

@@ -1,7 +1,6 @@
 interface states {
     count: number;
     indices: number[];
-    seed?: number;
 }
 /**
  * Calculate element(s) dimensions

package/lib/uses/useDimensions.js

@@ -1,5 +1,6 @@
 import { DomUtils } from '@etsoo/shared';
 import React from 'react';
+import { useDelayedExecutor } from './useDelayedExecutor';
 /**
  * Calculate element(s) dimensions
  * @param elements Observed elments count
@@ -13,6 +14,37 @@ export function useDimensions(elements, updateCallback, miliseconds = 50, equalC
         count: 0,
         indices: []
     });
+    // Dimentions
+    const dimensions = React.useRef();
+    if (dimensions.current == null) {
+        // Init
+        const init = [];
+        for (let e = 0; e < elements; e++) {
+            init.push(((index) => {
+                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;
+    }
+    const delayed = useDelayedExecutor(setState, miliseconds);
     // Observer
     const resizeObserver = new ResizeObserver((entries) => {
         // Update Rect
@@ -41,18 +73,9 @@ export function useDimensions(elements, updateCallback, miliseconds = 50, equalC
         });
         // Update state
         if (indices.length > 0) {
-            const update = { count: state.count + 1, indices, seed: undefined };
-            if (miliseconds > 0) {
-                if (state.seed != null) {
-                    clearTimeout(state.seed);
-                }
-                state.seed = window.setTimeout((localUpdate) => {
-                    setState(localUpdate);
-                }, miliseconds, update);
-            }
-            else {
-                setState(update);
-            }
+            // Count only for unique update
+            const update = { count: state.count + 1, indices };
+            delayed.call(undefined, update);
         }
     });
     // Init
@@ -80,18 +103,14 @@ export function useDimensions(elements, updateCallback, miliseconds = 50, equalC
             ];
         })(e));
     }
-    // Dimensions
-    const [dimensions] = React.useState(init);
     // Layout ready
     React.useEffect(() => {
         return () => {
             // Clear the observer
             resizeObserver.disconnect();
-            if (state.seed != null) {
-                clearTimeout(state.seed);
-            }
+            delayed.clear();
         };
     }, []);
     // Return
-    return { dimensions, state };
+    return { dimensions: dimensions.current, state };
 }

package/lib/uses/useTimeout.d.ts

@@ -3,6 +3,6 @@
  * @param action Action function
  * @param milliseconds Interval of milliseconds
  */
-export declare const useTimeout: (action: Function, milliseconds: number) => {
+export declare const useTimeout: (action: (...args: any[]) => void, milliseconds: number) => {
     cancel: () => void;
 };

package/lib/uses/useTimeout.js

@@ -1,3 +1,4 @@
+import { ExtendUtils } from '@etsoo/shared';
 import React from 'react';
 /**
  * For setTimeout to merge actions
@@ -5,26 +6,17 @@ import React from 'react';
  * @param milliseconds Interval of milliseconds
  */
 export const useTimeout = (action, milliseconds) => {
-    // Time out seed
-    let seed = 0;
-    // Cancel function
-    const cancel = () => {
-        if (seed > 0) {
-            clearTimeout(seed);
-            seed = 0;
-        }
-    };
+    // Delayed
+    const d = ExtendUtils.delayedExecutor(action, milliseconds);
     // Merge into the life cycle
     React.useEffect(() => {
-        seed = window.setTimeout(() => {
-            action.call(null);
-        }, milliseconds);
+        d.call();
         return () => {
-            cancel();
+            d.clear();
         };
     }, []);
     // Return cancel method
     return {
-        cancel
+        cancel: d.clear
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.5.23",
+    "version": "1.5.26",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,11 +50,11 @@
         "@emotion/react": "^11.8.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.8.1",
-        "@etsoo/appscript": "^1.2.52",
-        "@etsoo/notificationbase": "^1.1.1",
-        "@etsoo/shared": "^1.1.11",
+        "@etsoo/appscript": "^1.2.56",
+        "@etsoo/notificationbase": "^1.1.2",
+        "@etsoo/shared": "^1.1.14",
         "@mui/icons-material": "^5.4.2",
-        "@mui/material": "^5.4.2",
+        "@mui/material": "^5.4.3",
         "@reach/router": "^1.3.4",
         "@types/pica": "^9.0.0",
         "@types/pulltorefreshjs": "^0.1.5",
@@ -76,19 +76,19 @@
         "react-window": "^1.8.6"
     },
     "devDependencies": {
-        "@babel/cli": "^7.17.3",
+        "@babel/cli": "^7.17.6",
         "@babel/core": "^7.17.5",
         "@babel/plugin-transform-runtime": "^7.17.0",
         "@babel/preset-env": "^7.16.11",
         "@babel/runtime-corejs3": "^7.17.2",
-        "@types/jest": "^27.4.0",
+        "@types/jest": "^27.4.1",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.12.0",
-        "@typescript-eslint/parser": "^5.12.0",
-        "eslint": "^8.9.0",
+        "@typescript-eslint/eslint-plugin": "^5.12.1",
+        "@typescript-eslint/parser": "^5.12.1",
+        "eslint": "^8.10.0",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-react": "^7.28.0",
+        "eslint-plugin-react": "^7.29.2",
         "jest": "^27.5.1",
         "react-test-renderer": "^17.0.2",
         "ts-jest": "^27.1.3",

package/src/index.ts

@@ -101,6 +101,7 @@ export * from './states/UserState';
 
 // uses
 export * from './uses/useCombinedRefs';
+export * from './uses/useDelayedExecutor';
 export * from './uses/useDimensions';
 export * from './uses/useTimeout';
 export * from './uses/useWindowSize';

package/src/mu/BridgeCloseButton.tsx

@@ -40,7 +40,11 @@ export function BridgeCloseButton(props: BridgeCloseButtonProps) {
     // Host
     const host = BridgeUtils.host;
 
-    if (host == null || (validate && validate(host) === false)) {
+    if (
+        host == null ||
+        !host.closable() ||
+        (validate && validate(host) === false)
+    ) {
         return <React.Fragment />;
     }
 

package/src/mu/InputField.tsx

@@ -1,5 +1,6 @@
 import { TextField, TextFieldProps } from '@mui/material';
 import React from 'react';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 import { MUGlobal } from './MUGlobal';
 
 /**
@@ -42,7 +43,10 @@ export function InputField(props: InputFieldProps) {
     if (readOnly != null) InputProps.readOnly = readOnly;
 
     const isMounted = React.useRef(true);
-    const delaySeed = React.useRef(0);
+    const delayed =
+        onChange != null && changeDelay != null && changeDelay >= 1
+            ? useDelayedExecutor(onChange, changeDelay)
+            : undefined;
 
     const onChangeEx = (
         event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -54,16 +58,13 @@ export function InputField(props: InputFieldProps) {
             return;
         }
 
-        if (delaySeed.current > 0) window.clearTimeout(delaySeed.current);
-        delaySeed.current = window.setTimeout(() => {
-            if (isMounted.current) onChange(event);
-        }, changeDelay);
+        delayed?.call(undefined, event);
     };
 
     React.useEffect(() => {
         return () => {
             isMounted.current = false;
-            window.clearTimeout(delaySeed.current);
+            delayed?.clear();
         };
     }, []);
 

package/src/mu/SearchBar.tsx

@@ -5,6 +5,7 @@ import { useDimensions } from '../uses/useDimensions';
 import { DomUtils } from '@etsoo/shared';
 import { Labels } from '../app/Labels';
 import { ReactUtils } from '../app/ReactUtils';
+import { useDelayedExecutor } from '..';
 
 /**
  * Search bar props
@@ -103,7 +104,6 @@ export function SearchBar(props: SearchBarProps) {
     const state = React.useRef<{
         form?: HTMLFormElement;
         moreForm?: HTMLFormElement;
-        submitSeed?: number;
         lastMaxWidth: number;
         hasMore: boolean;
     }>({ hasMore: true, lastMaxWidth: 9999 }).current;
@@ -256,7 +256,7 @@ export function SearchBar(props: SearchBarProps) {
 
         if (state.form == null) state.form = event.currentTarget;
 
-        handleSubmit();
+        delayed.call();
     };
 
     // Handle more button click
@@ -270,34 +270,11 @@ export function SearchBar(props: SearchBarProps) {
 
         if (state.moreForm == null) state.moreForm = event.currentTarget;
 
-        handleSubmit();
-    };
-
-    // Reset
-    const handleReset = () => {
-        // Clear form values
-        if (state.form != null) resetForm(state.form);
-        if (state.moreForm != null) resetForm(state.moreForm);
-
-        // Resubmit
-        handleSubmitInstant(true);
-    };
-
-    // Submit
-    const handleSubmit = (delay = 480) => {
-        if (state.submitSeed != null) {
-            clearTimeout(state.submitSeed);
-        }
-
-        // Delay the change
-        state.submitSeed = window.setTimeout(handleSubmitInstant, delay);
+        delayed.call();
     };
 
     // Submit at once
     const handleSubmitInstant = (reset: boolean = false) => {
-        // Reset timeout
-        state.submitSeed = undefined;
-
         // Prepare data
         const data = new FormData(state.form);
         if (state.moreForm != null) {
@@ -307,17 +284,25 @@ export function SearchBar(props: SearchBarProps) {
         onSubmit(data, reset);
     };
 
-    // First loading
-    React.useEffect(() => {
-        return () => {
-            // Clear the seeds
-            if (state.submitSeed != null) clearTimeout(state.submitSeed);
-        };
-    }, []);
+    const delayed = useDelayedExecutor(handleSubmitInstant, 480);
+
+    // Reset
+    const handleReset = () => {
+        // Clear form values
+        if (state.form != null) resetForm(state.form);
+        if (state.moreForm != null) resetForm(state.moreForm);
+
+        // Resubmit
+        handleSubmitInstant(true);
+    };
 
     React.useEffect(() => {
         // Delayed way
-        handleSubmit(100);
+        delayed.call(100);
+
+        return () => {
+            delayed.clear();
+        };
     }, [className]);
 
     // Layout

package/src/mu/SearchField.tsx

@@ -1,5 +1,6 @@
 import { TextField, TextFieldProps } from '@mui/material';
 import React from 'react';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 import { MUGlobal } from './MUGlobal';
 
 /**
@@ -42,7 +43,10 @@ export function SearchField(props: SearchFieldProps) {
     if (readOnly != null) InputProps.readOnly = readOnly;
 
     const isMounted = React.useRef(true);
-    const delaySeed = React.useRef(0);
+    const delayed =
+        onChange != null && changeDelay != null && changeDelay >= 1
+            ? useDelayedExecutor(onChange, changeDelay)
+            : undefined;
 
     const onChangeEx = (
         event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -54,16 +58,13 @@ export function SearchField(props: SearchFieldProps) {
             return;
         }
 
-        if (delaySeed.current > 0) window.clearTimeout(delaySeed.current);
-        delaySeed.current = window.setTimeout(() => {
-            if (isMounted.current) onChange(event);
-        }, changeDelay);
+        delayed?.call(undefined, event);
     };
 
     React.useEffect(() => {
         return () => {
             isMounted.current = false;
-            window.clearTimeout(delaySeed.current);
+            delayed?.clear();
         };
     }, []);
 

package/src/mu/TextFieldEx.tsx

@@ -9,6 +9,7 @@ import { MUGlobal } from './MUGlobal';
 import { Clear, Visibility } from '@mui/icons-material';
 import useCombinedRefs from '../uses/useCombinedRefs';
 import { Keyboard } from '@etsoo/shared';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 
 /**
  * Extended text field props
@@ -193,7 +194,10 @@ export const TextFieldEx = React.forwardRef<
     );
 
     const isMounted = React.useRef(true);
-    const delaySeed = React.useRef(0);
+    const delayed =
+        onChange != null && changeDelay != null && changeDelay >= 1
+            ? useDelayedExecutor(onChange, changeDelay)
+            : undefined;
 
     const onChangeEx = (
         event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -218,16 +222,13 @@ export const TextFieldEx = React.forwardRef<
             return;
         }
 
-        if (delaySeed.current > 0) window.clearTimeout(delaySeed.current);
-        delaySeed.current = window.setTimeout(() => {
-            if (isMounted.current) onChange(event);
-        }, changeDelay);
+        delayed?.call(undefined, event);
     };
 
     React.useEffect(() => {
         return () => {
             isMounted.current = false;
-            window.clearTimeout(delaySeed.current);
+            delayed?.clear();
         };
     }, []);
 

package/src/mu/Tiplist.tsx

@@ -3,6 +3,7 @@ import { DataTypes } from '@etsoo/shared';
 import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
 import React from 'react';
 import { ReactUtils } from '../app/ReactUtils';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
 import { InputField } from './InputField';
 import { SearchField } from './SearchField';
@@ -95,7 +96,6 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
 
     // State
     const [state] = React.useState<{
-        loadDataSeed?: number;
         idLoaded?: boolean;
         idSet?: boolean;
     }>({});
@@ -125,24 +125,12 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
         // Stop bubble
         event.stopPropagation();
 
-        // Clear any seed
-        if (state.loadDataSeed != null) {
-            clearTimeout(state.loadDataSeed);
-        }
-
-        // Delay 480 for loading data
-        state.loadDataSeed = window.setTimeout(
-            loadDataDirect,
-            480,
-            event.currentTarget.value
-        );
+        // Call with delay
+        delayed.call(undefined, event.currentTarget.value);
     };
 
     // Directly load data
     const loadDataDirect = (keyword?: string, id?: DataTypes.IdType) => {
-        // Reset seed value
-        state.loadDataSeed = undefined;
-
         // Reset options
         // setOptions([]);
 
@@ -176,6 +164,8 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
         });
     };
 
+    const delayed = useDelayedExecutor(loadDataDirect, 480);
+
     const setInputValue = (value: T | null) => {
         stateUpdate({ value });
 
@@ -207,12 +197,8 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
 
     React.useEffect(() => {
         return () => {
-            // Clear any seed
-            if (state.loadDataSeed != null) {
-                clearTimeout(state.loadDataSeed);
-            }
-
             isMounted.current = false;
+            delayed.clear();
         };
     }, []);
 

package/src/mu/TooltipClick.tsx

@@ -1,5 +1,6 @@
 import { ClickAwayListener, Tooltip, TooltipProps } from '@mui/material';
 import React from 'react';
+import { useDelayedExecutor } from '../uses/useDelayedExecutor';
 
 /**
  * Tooltip with click visibility props
@@ -36,32 +37,22 @@ export function TooltipClick(props: TooltipClickProps) {
     // State
     const [localTitle, setTitle] = React.useState(title);
     const [open, setOpen] = React.useState(false);
-    const leaveSeed = React.useRef(0);
+
+    const delayed =
+        leaveDelay > 0
+            ? useDelayedExecutor(() => setOpen(false), leaveDelay)
+            : undefined;
 
     // Callback for open the tooltip
     const openTooltip = (newTitle?: string) => {
         setOpen(true);
         if (newTitle) setTitle(newTitle);
-
-        if (leaveDelay > 0) {
-            clearLeaveSeed();
-            leaveSeed.current = window.setTimeout(
-                () => setOpen(false),
-                leaveDelay
-            );
-        }
-    };
-
-    const clearLeaveSeed = () => {
-        if (leaveSeed.current > 0) {
-            window.clearTimeout(leaveSeed.current);
-            leaveSeed.current = 0;
-        }
+        delayed?.call();
     };
 
     React.useEffect(() => {
         return () => {
-            clearLeaveSeed();
+            delayed?.clear();
         };
     }, []);
 

package/src/uses/useDelayedExecutor.ts

@@ -0,0 +1,15 @@
+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
+) {
+    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';
 
 interface states {
     count: number;
     indices: number[];
-    seed?: number;
 }
 
 /**
@@ -29,6 +29,45 @@ export function useDimensions(
         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);
+                                }
+
+                                // Update element
+                                init[index][1] = instance;
+
+                                // Start observe
+                                resizeObserver.observe(instance);
+                            }
+                        }
+                    ];
+                })(e)
+            );
+        }
+        dimensions.current = init;
+    }
+
+    const delayed = useDelayedExecutor(setState, miliseconds);
+
     // Observer
     const resizeObserver = new ResizeObserver((entries) => {
         // Update Rect
@@ -62,21 +101,9 @@ export function useDimensions(
 
         // Update state
         if (indices.length > 0) {
-            const update = { count: state.count + 1, indices, seed: undefined };
-            if (miliseconds > 0) {
-                if (state.seed != null) {
-                    clearTimeout(state.seed);
-                }
-                state.seed = window.setTimeout(
-                    (localUpdate: states) => {
-                        setState(localUpdate);
-                    },
-                    miliseconds,
-                    update
-                );
-            } else {
-                setState(update);
-            }
+            // Count only for unique update
+            const update = { count: state.count + 1, indices };
+            delayed.call(undefined, update);
         }
     });
 
@@ -111,21 +138,15 @@ export function useDimensions(
         );
     }
 
-    // Dimensions
-    const [dimensions] = React.useState(init);
-
     // Layout ready
     React.useEffect(() => {
         return () => {
             // Clear the observer
             resizeObserver.disconnect();
-
-            if (state.seed != null) {
-                clearTimeout(state.seed);
-            }
+            delayed.clear();
         };
     }, []);
 
     // Return
-    return { dimensions, state };
+    return { dimensions: dimensions.current, state };
 }

package/src/uses/useTimeout.ts

@@ -1,3 +1,4 @@
+import { ExtendUtils } from '@etsoo/shared';
 import React from 'react';
 
 /**
@@ -5,31 +6,24 @@ import React from 'react';
  * @param action Action function
  * @param milliseconds Interval of milliseconds
  */
-export const useTimeout = (action: Function, milliseconds: number) => {
-    // Time out seed
-    let seed = 0;
-
-    // Cancel function
-    const cancel = () => {
-        if (seed > 0) {
-            clearTimeout(seed);
-            seed = 0;
-        }
-    };
+export const useTimeout = (
+    action: (...args: any[]) => void,
+    milliseconds: number
+) => {
+    // Delayed
+    const d = ExtendUtils.delayedExecutor(action, milliseconds);
 
     // Merge into the life cycle
     React.useEffect(() => {
-        seed = window.setTimeout(() => {
-            action.call(null);
-        }, milliseconds);
+        d.call();
 
         return () => {
-            cancel();
+            d.clear();
         };
     }, []);
 
     // Return cancel method
     return {
-        cancel
+        cancel: d.clear
     };
-};
+};