fix: ResponsiveObserve unsubscribe (#25309) (#25319)

* fix: ResponsiveObserve unsubscribe (#25309)

* fix: ResponsiveObserve unsubscribe (#25309)

* fix: ResponsiveObserve unsubscribe

* test: add responsiveObserve.test.js

components/_util/__tests__/responsiveObserve.test.js

@@ -0,0 +1,14 @@
+import ResponsiveObserve, { responsiveMap } from '../responsiveObserve';
+
+describe('Test ResponsiveObserve', () => {
+  it('test ResponsiveObserve subscribe and unsubscribe', () => {
+    const { xs } = responsiveMap;
+    const subscribeFunc = jest.fn();
+    const token = ResponsiveObserve.subscribe(subscribeFunc);
+    expect(ResponsiveObserve.matchHandlers[xs].mql.matches).toBeTruthy();
+    expect(subscribeFunc).toBeCalledTimes(1);
+
+    ResponsiveObserve.unsubscribe(token);
+    expect(ResponsiveObserve.matchHandlers[xs].mql.removeListener).toBeCalled();
+  });
+});

components/_util/responsiveObserve.ts

@@ -14,49 +14,40 @@ export const responsiveMap: BreakpointMap = {
 };
 
 type SubscribeFunc = (screens: ScreenMap) => void;
-
+const subscribers = new Map<Number, SubscribeFunc>();
-let subscribers: Array<{
-  token: string;
-  func: SubscribeFunc;
-}> = [];
 let subUid = -1;
 let screens = {};
 
 const responsiveObserve = {
-  matchHandlers: {},
+  matchHandlers: {} as {
+    [prop: string]: {
+      mql: MediaQueryList;
+      listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
+    };
+  },
   dispatch(pointMap: ScreenMap) {
     screens = pointMap;
-    subscribers.forEach(item => {
+    subscribers.forEach(func => func(screens));
-      item.func(screens);
+    return subscribers.size >= 1;
-    });
-    return subscribers.length >= 1;
   },
-  subscribe(func: SubscribeFunc) {
+  subscribe(func: SubscribeFunc): number {
-    if (subscribers.length === 0) {
+    if (!subscribers.size) this.register();
-      this.register();
+    subUid += 1;
-    }
+    subscribers.set(subUid, func);
-    const token = (++subUid).toString();
-    subscribers.push({
-      token,
-      func,
-    });
     func(screens);
-    return token;
+    return subUid;
   },
-  unsubscribe(token: string) {
+  unsubscribe(token: number) {
-    subscribers = subscribers.filter(item => item.token !== token);
+    subscribers.delete(token);
-    if (subscribers.length === 0) {
+    if (!subscribers.size) this.unregister();
-      this.unregister();
-    }
   },
   unregister() {
     Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
       const matchMediaQuery = responsiveMap[screen]!;
       const handler = this.matchHandlers[matchMediaQuery];
-      if (handler && handler.mql && handler.listener) {
+      handler?.mql.removeListener(handler?.listener);
-        handler.mql.removeListener(handler.listener);
-      }
     });
+    subscribers.clear();
   },
   register() {
     Object.keys(responsiveMap).forEach((screen: Breakpoint) => {

components/grid/row.tsx

@@ -40,7 +40,7 @@ export default class Row extends React.Component<RowProps, RowState> {
     },
   };
 
-  token: string;
+  token: number;
 
   componentDidMount() {
     this.token = ResponsiveObserve.subscribe(screens => {