feat(useSyncWithLS): disable callback in active tab

gravity-ui · Mar 22, 2024 · 55bdbfa · 55bdbfa
1 parent 7a93a52
commit 55bdbfa
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/Stories/hooks/useSyncWithLS/README.md b/src/components/Stories/hooks/useSyncWithLS/README.md
@@ -12,8 +12,9 @@ The `useSyncWithLS` hook executes callback when value changed in Local Storage
 
 ## Properties
 
-| Name           | Description                                                  |      Type      |   Default   |
-| :------------- | :----------------------------------------------------------- | :------------: | :---------: |
-| callback       | Callback function called when key in local storage triggered | `VoidFunction` |             |
-| dataSourceName | Name for data source of keys                                 |    `string`    | 'sync-tabs' |
-| uniqueKey      | Key in local storage for handle                              |    `string`    |             |
+| Name                     | Description                                                  |      Type      |   Default   |
+| :----------------------- | :----------------------------------------------------------- | :------------: | :---------: |
+| callback                 | Callback function called when key in local storage triggered | `VoidFunction` |             |
+| dataSourceName           | Name for data source of keys                                 |    `string`    | 'sync-tabs' |
+| uniqueKey                | Key in local storage for handle                              |    `string`    |             |
+| disableActiveTabCallback | Disable callback in tab that triggers local storage          |   `boolean`    |   'false'   |
diff --git a/src/components/Stories/hooks/useSyncWithLS/useSyncWithLS.ts b/src/components/Stories/hooks/useSyncWithLS/useSyncWithLS.ts
@@ -4,13 +4,15 @@ export type UseSyncWithLSInputProps<T> = {
     callback: T;
     uniqueKey: string;
     dataSourceName?: string;
+    disableActiveTabCallback?: boolean;
 };
 export type UseSyncWithLSOutputProps = {callback: (...args: unknown[]) => void};
 
 export const useSyncWithLS = <T extends Function>({
     dataSourceName = 'sync-tabs',
     callback,
     uniqueKey,
+    disableActiveTabCallback = false,
 }: UseSyncWithLSInputProps<T>): UseSyncWithLSOutputProps => {
     const key = `${dataSourceName}.${uniqueKey}`;
 
@@ -34,7 +36,11 @@ export const useSyncWithLS = <T extends Function>({
     return {
         callback: React.useCallback(() => {
             localStorage.setItem(key, String(Number(localStorage.getItem(key) || '0') + 1));
+
+            if (disableActiveTabCallback) {
+                return undefined;
+            }
             return callback();
-        }, [key, callback]),
+        }, [key, disableActiveTabCallback, callback]),
     };
 };