TeactN: Replace detachWhenChanged with activationFn

src/components/left/main/ForumPanel.tsx

@@ -280,9 +280,7 @@ const ForumPanel: FC<OwnProps & StateProps> = ({
 };
 
 export default memo(withGlobal<OwnProps>(
-  (global, ownProps, detachWhenChanged): StateProps => {
+  (global): StateProps => {
-    detachWhenChanged(selectIsForumPanelOpen(global));
-
     const chatId = selectTabState(global).forumPanelChatId;
     const chat = chatId ? selectChat(global, chatId) : undefined;
     const {
@@ -296,4 +294,5 @@ export default memo(withGlobal<OwnProps>(
       withInterfaceAnimations: selectCanAnimateInterface(global),
     };
   },
+  (global) => selectIsForumPanelOpen(global),
 )(ForumPanel));

src/components/story/StorySlides.tsx

@@ -294,7 +294,7 @@ function StorySlides({
   );
 }
 
-export default memo(withGlobal<OwnProps>((global, ownProps, detachWhenChanged): StateProps => {
+export default memo(withGlobal<OwnProps>((global): StateProps => {
   const {
     storyViewer: {
       userId: currentUserId, storyId: currentStoryId, isSingleUser, isSingleStory, isPrivate, isArchive,
@@ -303,9 +303,6 @@ export default memo(withGlobal<OwnProps>((global, ownProps, detachWhenChanged):
   const { byUserId, orderedUserIds: { archived, active } } = global.stories;
   const user = currentUserId ? selectUser(global, currentUserId) : undefined;
 
-  const isOpen = selectIsStoryViewerOpen(global);
-  detachWhenChanged(isOpen);
-
   return {
     byUserId,
     userIds: user?.areStoriesHidden ? archived : active,
@@ -316,4 +313,4 @@ export default memo(withGlobal<OwnProps>((global, ownProps, detachWhenChanged):
     isPrivate,
     isArchive,
   };
-})(StorySlides));
+}, (global) => selectIsStoryViewerOpen(global))(StorySlides));

src/lib/teact/teactn.tsx

@@ -36,10 +36,8 @@ type ActionHandler = (
   payload: any,
 ) => GlobalState | void | Promise<void>;
 
-type DetachWhenChanged = (current: any) => void;
+type MapStateToProps<OwnProps = undefined> = (global: GlobalState, ownProps: OwnProps) => AnyLiteral;
-type MapStateToProps<OwnProps = undefined> = (
+type ActivationFn<OwnProps = undefined> = (global: GlobalState, ownProps: OwnProps) => boolean;
-  (global: GlobalState, ownProps: OwnProps, detachWhenChanged: DetachWhenChanged) => AnyLiteral
-  );
 
 let currentGlobal = {} as GlobalState;
 
@@ -56,12 +54,10 @@ const immediateCallbacks: Function[] = [];
 const actions = {} as Actions;
 const containers = new Map<string, {
   mapStateToProps: MapStateToProps<any>;
+  activationFn?: ActivationFn<any>;
   ownProps: Props;
   mappedProps?: Props;
   forceUpdate: Function;
-  isDetached: boolean;
-  detachReason: any;
-  detachWhenChanged: DetachWhenChanged;
   DEBUG_updates: number;
   DEBUG_componentName: string;
 }>();
@@ -165,21 +161,17 @@ function updateContainers() {
   // eslint-disable-next-line no-restricted-syntax
   for (const container of containers.values()) {
     const {
-      mapStateToProps, ownProps, mappedProps, forceUpdate, isDetached, detachWhenChanged,
+      mapStateToProps, activationFn, ownProps, mappedProps, forceUpdate,
     } = container;
 
-    if (isDetached) {
+    if (activationFn && !activationFn(currentGlobal, ownProps)) {
       continue;
     }
 
     let newMappedProps;
 
     try {
-      newMappedProps = mapStateToProps(currentGlobal, ownProps, detachWhenChanged);
+      newMappedProps = mapStateToProps(currentGlobal, ownProps);
-
-      if (container.isDetached) {
-        continue;
-      }
     } catch (err: any) {
       handleError(err);
 
@@ -246,6 +238,7 @@ export function removeCallback(cb: Function, isImmediate = false) {
 
 export function withGlobal<OwnProps extends AnyLiteral>(
   mapStateToProps: MapStateToProps<OwnProps> = () => ({}),
+  activationFn?: ActivationFn<OwnProps>,
 ) {
   return (Component: FC) => {
     function TeactNContainer(props: OwnProps) {
@@ -262,20 +255,9 @@ export function withGlobal<OwnProps extends AnyLiteral>(
       if (!container) {
         container = {
           mapStateToProps,
+          activationFn,
           ownProps: props,
           forceUpdate,
-          isDetached: false,
-          detachReason: undefined,
-          // This allows to ignore changes in global during animation before unmount
-          detachWhenChanged: (current) => {
-            const { detachReason } = container!;
-
-            if (detachReason === undefined && current !== undefined) {
-              container!.detachReason = current;
-            } else if (detachReason !== undefined && detachReason !== current) {
-              container!.isDetached = true;
-            }
-          },
           DEBUG_updates: 0,
           DEBUG_componentName: Component.name,
         };
@@ -283,18 +265,19 @@ export function withGlobal<OwnProps extends AnyLiteral>(
         containers.set(id, container);
       }
 
-      if (!container.mappedProps || !arePropsShallowEqual(container.ownProps, props)) {
+      if (!container.mappedProps || (
-        container.ownProps = props;
+        !arePropsShallowEqual(container.ownProps, props)
-
+        && (!activationFn || activationFn(currentGlobal, props))
-        if (!container.isDetached) {
+      )) {
-          try {
+        try {
-            container.mappedProps = mapStateToProps(currentGlobal, props, container.detachWhenChanged);
+          container.mappedProps = mapStateToProps(currentGlobal, props);
-          } catch (err: any) {
+        } catch (err: any) {
-            handleError(err);
+          handleError(err);
-          }
         }
       }
 
+      container.ownProps = props;
+
       // eslint-disable-next-line react/jsx-props-no-spreading
       return <Component {...container.mappedProps} {...props} />;
     }
@@ -338,8 +321,8 @@ export function typify<
       handler: ActionHandlers[ActionName],
     ) => void,
     withGlobal: withGlobal as <OwnProps extends AnyLiteral>(
-      mapStateToProps: (
+      mapStateToProps: (global: ProjectGlobalState, ownProps: OwnProps) => AnyLiteral,
-        (global: ProjectGlobalState, ownProps: OwnProps, detachWhenChanged: DetachWhenChanged) => AnyLiteral),
+      activationFn?: (global: ProjectGlobalState, ownProps: OwnProps) => boolean,
     ) => (Component: FC) => FC<OwnProps>,
   };
 }