Transition: Allow static children

src/components/common/MessageOutgoingStatus.tsx

@@ -18,9 +18,7 @@ const MessageOutgoingStatus: FC<OwnProps> = ({ status }) => {
   return (
     <div className="MessageOutgoingStatus">
       <Transition name="reveal" activeKey={Keys[status]}>
-        {() => (
         <i className={`icon-message-${status}`} />
-        )}
       </Transition>
     </div>
   );

src/components/common/ProfileInfo.tsx

@@ -191,7 +191,7 @@ const ProfileInfo: FC<OwnProps & StateProps> = ({
       <div className="photo-wrapper">
         {renderPhotoTabs()}
         <Transition activeKey={currentPhotoIndex} name={slideAnimation} className="profile-slide-container">
-          {renderPhoto}
+          {renderPhoto()}
         </Transition>
 
         {!isFirst && (

src/components/left/ConnectionStatusOverlay.tsx

@@ -27,7 +27,7 @@ const ConnectionStatusOverlay: FC<OwnProps> = ({
       <Spinner color="black" />
       <div className="state-text">
         <Transition activeKey={connectionStatus} name="slide-fade">
-          {() => connectionStatusText}
+          {connectionStatusText}
         </Transition>
       </div>
       <Button

src/components/left/main/Badge.tsx

@@ -61,7 +61,7 @@ const Badge: FC<OwnProps> = ({ chat, isPinned, isMuted }) => {
 
   return (
     <ShowTransition isCustom className="Badge-transition" isOpen={isShown}>
-      {renderContent}
+      {renderContent()}
     </ShowTransition>
   );
 };

src/components/left/main/LeftMainHeader.tsx

@@ -331,13 +331,11 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
           isCustom
           className="connection-state-wrapper"
         >
-          {() => (
           <ConnectionStatusOverlay
             connectionStatus={connectionStatus}
             connectionStatusText={connectionStatusText!}
             onClick={toggleConnectionStatus}
           />
-          )}
         </ShowTransition>
       </div>
     </div>

src/components/left/search/LeftSearch.tsx

@@ -90,7 +90,7 @@ const LeftSearch: FC<OwnProps & StateProps> = ({
         renderCount={TRANSITION_RENDER_COUNT}
         activeKey={currentContent}
       >
-        {() => {
+        {(() => {
           switch (currentContent) {
             case GlobalSearchContent.ChatList:
               if (chatId) {
@@ -136,7 +136,7 @@ const LeftSearch: FC<OwnProps & StateProps> = ({
             default:
               return undefined;
           }
-        }}
+        })()}
       </Transition>
     </div>
   );

src/components/mediaViewer/MediaViewer.tsx

@@ -461,8 +461,6 @@ const MediaViewer: FC<StateProps> = ({
       className={isZoomed ? 'zoomed' : ''}
       isOpen={isOpen}
     >
-      {() => (
-        <>
       <div className="media-viewer-head" dir={lang.isRtl ? 'rtl' : undefined}>
         {IS_SINGLE_COLUMN_LAYOUT && (
           <Button
@@ -477,7 +475,7 @@ const MediaViewer: FC<StateProps> = ({
           </Button>
         )}
         <Transition activeKey={animationKey.current!} name={headerAnimation}>
-              {renderSenderInfo}
+          {renderSenderInfo()}
         </Transition>
         <MediaViewerActions
           mediaData={fullMediaBlobUrl || previewBlobUrl}
@@ -549,8 +547,6 @@ const MediaViewer: FC<StateProps> = ({
         isShown={isZoomed}
         onChangeZoom={handleZoomValue}
       />
-        </>
-      )}
     </ShowTransition>
   );
 };

src/components/mediaViewer/SlideTransition.tsx

@@ -2,9 +2,9 @@ import React, { FC } from '../../lib/teact/teact';
 
 import { IS_TOUCH_ENV } from '../../util/environment';
 
-import Transition, { TransitionProps } from '../ui/Transition';
+import Transition, { ChildrenFn, TransitionProps } from '../ui/Transition';
 
-const SlideTransition: FC<TransitionProps> = ({ children, ...props }) => {
+const SlideTransition: FC<TransitionProps & { children: ChildrenFn }> = ({ children, ...props }) => {
   if (IS_TOUCH_ENV) return children(true, true, 1);
   // eslint-disable-next-line react/jsx-props-no-spreading
   return <Transition {...props}>{children}</Transition>;

src/components/middle/MiddleColumn.tsx

@@ -397,8 +397,6 @@ const MiddleColumn: FC<StateProps> = ({
               cleanupExceptionKey={cleanupExceptionKey}
               onStop={handleSlideStop}
             >
-              {() => (
-                <>
               <MessageList
                 key={`${renderingChatId}-${renderingThreadId}-${renderingMessageListType}`}
                 chatId={renderingChatId}
@@ -500,8 +498,6 @@ const MiddleColumn: FC<StateProps> = ({
                 <SeenByModal isOpen={isSeenByModalOpen} />
                 <ReactorListModal isOpen={isReactorListModalOpen} />
               </div>
-                </>
-              )}
             </Transition>
 
             <ScrollDownButton

src/components/middle/MiddleHeader.tsx

@@ -371,7 +371,7 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
         name={shouldSkipHistoryAnimations ? 'none' : 'slide-fade'}
         activeKey={currentTransitionKey}
       >
-        {renderInfo}
+        {renderInfo()}
       </Transition>
 
       <GroupCallTopPane

src/components/payment/PaymentModal.tsx

@@ -322,11 +322,9 @@ const Invoice: FC<OwnProps & StateProps & GlobalStateProps> = ({
       </div>
       {step !== undefined ? (
         <Transition name="slide" activeKey={step}>
-          {() => (
           <div className="content custom-scroll">
             {renderModalContent(step)}
           </div>
-          )}
         </Transition>
       ) : (
         <div className="empty-content">

src/components/right/Profile.tsx

@@ -445,7 +445,7 @@ const Profile: FC<OwnProps & StateProps> = ({
             onStart={applyTransitionFix}
             onStop={handleTransitionStop}
           >
-            {renderContent}
+            {renderContent()}
           </Transition>
           <TabList big activeTab={activeTab} tabs={tabs} onSwitchTab={setActiveTab} />
         </div>

src/components/right/RightHeader.tsx

@@ -428,7 +428,7 @@ const RightHeader: FC<OwnProps & StateProps> = ({
         name={(shouldSkipTransition || shouldSkipAnimation) ? 'none' : 'slide-fade'}
         activeKey={renderingContentKey}
       >
-        {renderHeaderContent}
+        {renderHeaderContent()}
       </Transition>
     </div>
   );

src/components/ui/SearchInput.tsx

@@ -134,9 +134,7 @@ const SearchInput: FC<OwnProps> = ({
       />
       <i className="icon-search" />
       <ShowTransition isOpen={Boolean(isLoading)} className="slow">
-        {() => (
         <Loading color={spinnerColor} backgroundColor={spinnerBackgroundColor} onClick={onSpinnerClick} />
-        )}
       </ShowTransition>
       {!isLoading && (value || canClose) && onReset && (
         <Button

src/components/ui/ShowTransition.tsx

@@ -4,7 +4,6 @@ import useShowTransition from '../../hooks/useShowTransition';
 import usePrevious from '../../hooks/usePrevious';
 import buildClassName from '../../util/buildClassName';
 
-type ChildrenFn = () => any;
 
 type OwnProps = {
   isOpen: boolean;
@@ -12,7 +11,7 @@ type OwnProps = {
   id?: string;
   className?: string;
   onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  children: ChildrenFn;
+  children: React.ReactNode;
 };
 
 const ShowTransition: FC<OwnProps> = ({
@@ -23,7 +22,7 @@ const ShowTransition: FC<OwnProps> = ({
   );
   const prevIsOpen = usePrevious(isOpen);
   const prevChildren = usePrevious(children);
-  const fromChildrenRef = useRef<ChildrenFn>();
+  const fromChildrenRef = useRef<React.ReactNode>();
 
   if (prevIsOpen && !isOpen) {
     fromChildrenRef.current = prevChildren;
@@ -32,7 +31,7 @@ const ShowTransition: FC<OwnProps> = ({
   return (
     shouldRender && (
       <div id={id} className={buildClassName(className, transitionClassNames)} onClick={onClick}>
-        {isOpen ? children() : fromChildrenRef.current!()}
+        {isOpen ? children : fromChildrenRef.current!}
       </div>
     )
   );

src/components/ui/Transition.tsx

@@ -15,7 +15,7 @@ import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck'
 
 import './Transition.scss';
 
-type ChildrenFn = (isActive: boolean, isFrom: boolean, currentKey: number) => any;
+export type ChildrenFn = (isActive: boolean, isFrom: boolean, currentKey: number) => React.ReactNode;
 export type TransitionProps = {
   ref?: RefObject<HTMLDivElement>;
   activeKey: number;
@@ -33,7 +33,7 @@ export type TransitionProps = {
   className?: string;
   onStart?: NoneToVoidFunction;
   onStop?: NoneToVoidFunction;
-  children: ChildrenFn;
+  children: React.ReactNode | ChildrenFn;
 };
 
 const classNames = {
@@ -65,7 +65,7 @@ const Transition: FC<TransitionProps> = ({
     containerRef = ref;
   }
 
-  const rendersRef = useRef<Record<number, ChildrenFn>>({});
+  const rendersRef = useRef<Record<number, React.ReactNode | ChildrenFn>>({});
   const prevActiveKey = usePrevious<any>(activeKey);
   const forceUpdate = useForceUpdate();
 
@@ -257,7 +257,11 @@ const Transition: FC<TransitionProps> = ({
     }
 
     return (
-      <div key={key} teactOrderKey={key}>{render(key === activeKey, key === prevActiveKey, activeKey)}</div>
+      <div key={key} teactOrderKey={key}>{
+        typeof render === 'function'
+          ? render(key === activeKey, key === prevActiveKey, activeKey)
+          : render
+      }</div>
     );
   });