Transition: Allow static children

2022-02-25 22:52:19 +02:00 · 2022-02-25 22:52:19 +02:00 · 8b60cef7c2
commit 8b60cef7c2
parent 59c402f0e3
16 changed files with 209 additions and 222 deletions
--- a/src/components/common/MessageOutgoingStatus.tsx
+++ b/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}`} />
-        )}
+        <i className={`icon-message-${status}`} />
      </Transition>
    </div>
  );
--- a/src/components/common/ProfileInfo.tsx
+++ b/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 && (
--- a/src/components/left/ConnectionStatusOverlay.tsx
+++ b/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
--- a/src/components/left/main/Badge.tsx
+++ b/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>
  );
 };
--- a/src/components/left/main/LeftMainHeader.tsx
+++ b/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}
-            />
-          )}
+          <ConnectionStatusOverlay
+            connectionStatus={connectionStatus}
+            connectionStatusText={connectionStatusText!}
+            onClick={toggleConnectionStatus}
+          />
        </ShowTransition>
      </div>
    </div>
--- a/src/components/left/search/LeftSearch.tsx
+++ b/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>
  );
--- a/src/components/mediaViewer/MediaViewer.tsx
+++ b/src/components/mediaViewer/MediaViewer.tsx
@ -461,96 +461,92 @@ const MediaViewer: FC<StateProps> = ({
      className={isZoomed ? 'zoomed' : ''}
      isOpen={isOpen}
    >
-      {() => (
-        <>
-          <div className="media-viewer-head" dir={lang.isRtl ? 'rtl' : undefined}>
-            {IS_SINGLE_COLUMN_LAYOUT && (
-              <Button
-                className="media-viewer-close"
-                round
-                size="smaller"
-                color="translucent-white"
-                ariaLabel={lang('Close')}
-                onClick={close}
-              >
-                <i className="icon-close" />
-              </Button>
-            )}
-            <Transition activeKey={animationKey.current!} name={headerAnimation}>
-              {renderSenderInfo}
-            </Transition>
-            <MediaViewerActions
-              mediaData={fullMediaBlobUrl || previewBlobUrl}
-              isVideo={isVideo}
-              isZoomed={isZoomed}
-              message={message}
-              fileName={fileName}
-              onCloseMediaViewer={close}
-              onForward={handleForward}
-              onZoomToggle={handleZoomToggle}
-              isAvatar={isAvatar}
-            />
-          </div>
-          <PanZoom
-            noWrap={!canPanZoomWrap}
-            canPan={isZoomed}
-            panDeltaX={panDelta.x}
-            panDeltaY={panDelta.y}
-            zoomLevel={zoomLevel}
-            onPan={handlePan}
+      <div className="media-viewer-head" dir={lang.isRtl ? 'rtl' : undefined}>
+        {IS_SINGLE_COLUMN_LAYOUT && (
+          <Button
+            className="media-viewer-close"
+            round
+            size="smaller"
+            color="translucent-white"
+            ariaLabel={lang('Close')}
+            onClick={close}
          >
-            <SlideTransition
-              activeKey={selectedMediaMessageIndex}
-              name={slideAnimation}
-            >
-              {(isActive: boolean) => (
-                <MediaViewerSlides
-                  messageId={messageId}
-                  getMessageId={getMessageId}
-                  chatId={chatId}
-                  isPhoto={isPhoto}
-                  isGif={isGif}
-                  threadId={threadId}
-                  avatarOwnerId={avatarOwner && avatarOwner.id}
-                  profilePhotoIndex={profilePhotoIndex}
-                  origin={origin}
-                  isOpen={isOpen}
-                  hasFooter={hasFooter}
-                  isZoomed={isZoomed}
-                  isActive={isActive}
-                  isVideo={isVideo}
-                  animationLevel={animationLevel}
-                  onClose={close}
-                  selectMessage={selectMessage}
-                  onFooterClick={handleFooterClick}
-                />
-              )}
-            </SlideTransition>
-          </PanZoom>
-          {!isFirst && !IS_TOUCH_ENV && (
-            <button
-              type="button"
-              className={`navigation prev ${isVideo && !isGif && 'inline'}`}
-              aria-label={lang('AccDescrPrevious')}
-              dir={lang.isRtl ? 'rtl' : undefined}
-              onClick={() => selectMessage(previousMessageId)}
+            <i className="icon-close" />
+          </Button>
+        )}
+        <Transition activeKey={animationKey.current!} name={headerAnimation}>
+          {renderSenderInfo()}
+        </Transition>
+        <MediaViewerActions
+          mediaData={fullMediaBlobUrl || previewBlobUrl}
+          isVideo={isVideo}
+          isZoomed={isZoomed}
+          message={message}
+          fileName={fileName}
+          onCloseMediaViewer={close}
+          onForward={handleForward}
+          onZoomToggle={handleZoomToggle}
+          isAvatar={isAvatar}
+        />
+      </div>
+      <PanZoom
+        noWrap={!canPanZoomWrap}
+        canPan={isZoomed}
+        panDeltaX={panDelta.x}
+        panDeltaY={panDelta.y}
+        zoomLevel={zoomLevel}
+        onPan={handlePan}
+      >
+        <SlideTransition
+          activeKey={selectedMediaMessageIndex}
+          name={slideAnimation}
+        >
+          {(isActive: boolean) => (
+            <MediaViewerSlides
+              messageId={messageId}
+              getMessageId={getMessageId}
+              chatId={chatId}
+              isPhoto={isPhoto}
+              isGif={isGif}
+              threadId={threadId}
+              avatarOwnerId={avatarOwner && avatarOwner.id}
+              profilePhotoIndex={profilePhotoIndex}
+              origin={origin}
+              isOpen={isOpen}
+              hasFooter={hasFooter}
+              isZoomed={isZoomed}
+              isActive={isActive}
+              isVideo={isVideo}
+              animationLevel={animationLevel}
+              onClose={close}
+              selectMessage={selectMessage}
+              onFooterClick={handleFooterClick}
            />
          )}
-          {!isLast && !IS_TOUCH_ENV && (
-            <button
-              type="button"
-              className={`navigation next ${isVideo && !isGif && 'inline'}`}
-              aria-label={lang('Next')}
-              dir={lang.isRtl ? 'rtl' : undefined}
-              onClick={() => selectMessage(nextMessageId)}
-            />
-          )}
-          <ZoomControls
-            isShown={isZoomed}
-            onChangeZoom={handleZoomValue}
-          />
-        </>
+        </SlideTransition>
+      </PanZoom>
+      {!isFirst && !IS_TOUCH_ENV && (
+        <button
+          type="button"
+          className={`navigation prev ${isVideo && !isGif && 'inline'}`}
+          aria-label={lang('AccDescrPrevious')}
+          dir={lang.isRtl ? 'rtl' : undefined}
+          onClick={() => selectMessage(previousMessageId)}
+        />
      )}
+      {!isLast && !IS_TOUCH_ENV && (
+        <button
+          type="button"
+          className={`navigation next ${isVideo && !isGif && 'inline'}`}
+          aria-label={lang('Next')}
+          dir={lang.isRtl ? 'rtl' : undefined}
+          onClick={() => selectMessage(nextMessageId)}
+        />
+      )}
+      <ZoomControls
+        isShown={isZoomed}
+        onChangeZoom={handleZoomValue}
+      />
    </ShowTransition>
  );
 };
--- a/src/components/mediaViewer/SlideTransition.tsx
+++ b/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>;
--- a/src/components/middle/MiddleColumn.tsx
+++ b/src/components/middle/MiddleColumn.tsx
@ -397,111 +397,107 @@ const MiddleColumn: FC<StateProps> = ({
              cleanupExceptionKey={cleanupExceptionKey}
              onStop={handleSlideStop}
            >
-              {() => (
-                <>
-                  <MessageList
-                    key={`${renderingChatId}-${renderingThreadId}-${renderingMessageListType}`}
+              <MessageList
+                key={`${renderingChatId}-${renderingThreadId}-${renderingMessageListType}`}
+                chatId={renderingChatId}
+                threadId={renderingThreadId}
+                type={renderingMessageListType}
+                canPost={renderingCanPost}
+                hasTools={renderingHasTools}
+                onFabToggle={setIsFabShown}
+                onNotchToggle={setIsNotchShown}
+                isReady={isReady}
+                withBottomShift={withMessageListBottomShift}
+              />
+              <div className={footerClassName}>
+                {renderingCanPost && (
+                  <Composer
                    chatId={renderingChatId}
                    threadId={renderingThreadId}
-                    type={renderingMessageListType}
-                    canPost={renderingCanPost}
-                    hasTools={renderingHasTools}
-                    onFabToggle={setIsFabShown}
-                    onNotchToggle={setIsNotchShown}
+                    messageListType={renderingMessageListType}
+                    dropAreaState={dropAreaState}
+                    onDropHide={handleHideDropArea}
                    isReady={isReady}
-                    withBottomShift={withMessageListBottomShift}
                  />
-                  <div className={footerClassName}>
-                    {renderingCanPost && (
-                      <Composer
-                        chatId={renderingChatId}
-                        threadId={renderingThreadId}
-                        messageListType={renderingMessageListType}
-                        dropAreaState={dropAreaState}
-                        onDropHide={handleHideDropArea}
-                        isReady={isReady}
-                      />
-                    )}
-                    {isPinnedMessageList && (
-                      <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
-                        <Button
-                          size="tiny"
-                          fluid
-                          color="secondary"
-                          className="unpin-all-button"
-                          onClick={handleOpenUnpinModal}
-                        >
-                          <i className="icon-unpin" />
-                          <span>{lang('Chat.Pinned.UnpinAll', pinnedMessagesCount, 'i')}</span>
-                        </Button>
-                      </div>
-                    )}
-                    {isMessagingDisabled && (
-                      <div className={messagingDisabledClassName}>
-                        <div className="messaging-disabled-inner">
-                          <span>
-                            {messageSendingRestrictionReason}
-                          </span>
-                        </div>
-                      </div>
-                    )}
-                    {IS_SINGLE_COLUMN_LAYOUT && renderingCanSubscribe && (
-                      <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
-                        <Button
-                          size="tiny"
-                          fluid
-                          ripple
-                          className="join-subscribe-button"
-                          onClick={handleSubscribeClick}
-                        >
-                          {lang(renderingIsChannel ? 'ProfileJoinChannel' : 'ProfileJoinGroup')}
-                        </Button>
-                      </div>
-                    )}
-                    {IS_SINGLE_COLUMN_LAYOUT && renderingCanStartBot && (
-                      <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
-                        <Button
-                          size="tiny"
-                          fluid
-                          ripple
-                          className="join-subscribe-button"
-                          onClick={handleStartBot}
-                        >
-                          {lang('BotStart')}
-                        </Button>
-                      </div>
-                    )}
-                    {IS_SINGLE_COLUMN_LAYOUT && renderingCanRestartBot && (
-                      <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
-                        <Button
-                          size="tiny"
-                          fluid
-                          ripple
-                          className="join-subscribe-button"
-                          onClick={handleRestartBot}
-                        >
-                          {lang('BotRestart')}
-                        </Button>
-                      </div>
-                    )}
-                    <MessageSelectToolbar
-                      messageListType={renderingMessageListType}
-                      isActive={isSelectModeActive}
-                      canPost={renderingCanPost}
-                    />
-                    <PaymentModal
-                      isOpen={Boolean(isPaymentModalOpen)}
-                      onClose={closePaymentModal}
-                    />
-                    <ReceiptModal
-                      isOpen={Boolean(isReceiptModalOpen)}
-                      onClose={clearReceipt}
-                    />
-                    <SeenByModal isOpen={isSeenByModalOpen} />
-                    <ReactorListModal isOpen={isReactorListModalOpen} />
+                )}
+                {isPinnedMessageList && (
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
+                    <Button
+                      size="tiny"
+                      fluid
+                      color="secondary"
+                      className="unpin-all-button"
+                      onClick={handleOpenUnpinModal}
+                    >
+                      <i className="icon-unpin" />
+                      <span>{lang('Chat.Pinned.UnpinAll', pinnedMessagesCount, 'i')}</span>
+                    </Button>
                  </div>
-                </>
-              )}
+                )}
+                {isMessagingDisabled && (
+                  <div className={messagingDisabledClassName}>
+                    <div className="messaging-disabled-inner">
+                      <span>
+                        {messageSendingRestrictionReason}
+                      </span>
+                    </div>
+                  </div>
+                )}
+                {IS_SINGLE_COLUMN_LAYOUT && renderingCanSubscribe && (
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
+                    <Button
+                      size="tiny"
+                      fluid
+                      ripple
+                      className="join-subscribe-button"
+                      onClick={handleSubscribeClick}
+                    >
+                      {lang(renderingIsChannel ? 'ProfileJoinChannel' : 'ProfileJoinGroup')}
+                    </Button>
+                  </div>
+                )}
+                {IS_SINGLE_COLUMN_LAYOUT && renderingCanStartBot && (
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
+                    <Button
+                      size="tiny"
+                      fluid
+                      ripple
+                      className="join-subscribe-button"
+                      onClick={handleStartBot}
+                    >
+                      {lang('BotStart')}
+                    </Button>
+                  </div>
+                )}
+                {IS_SINGLE_COLUMN_LAYOUT && renderingCanRestartBot && (
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
+                    <Button
+                      size="tiny"
+                      fluid
+                      ripple
+                      className="join-subscribe-button"
+                      onClick={handleRestartBot}
+                    >
+                      {lang('BotRestart')}
+                    </Button>
+                  </div>
+                )}
+                <MessageSelectToolbar
+                  messageListType={renderingMessageListType}
+                  isActive={isSelectModeActive}
+                  canPost={renderingCanPost}
+                />
+                <PaymentModal
+                  isOpen={Boolean(isPaymentModalOpen)}
+                  onClose={closePaymentModal}
+                />
+                <ReceiptModal
+                  isOpen={Boolean(isReceiptModalOpen)}
+                  onClose={clearReceipt}
+                />
+                <SeenByModal isOpen={isSeenByModalOpen} />
+                <ReactorListModal isOpen={isReactorListModalOpen} />
+              </div>
            </Transition>

            <ScrollDownButton
--- a/src/components/middle/MiddleHeader.tsx
+++ b/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
--- a/src/components/payment/PaymentModal.tsx
+++ b/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>
-          )}
+          <div className="content custom-scroll">
+            {renderModalContent(step)}
+          </div>
        </Transition>
      ) : (
        <div className="empty-content">
--- a/src/components/right/Profile.tsx
+++ b/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>
--- a/src/components/right/RightHeader.tsx
+++ b/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>
  );
--- a/src/components/ui/SearchInput.tsx
+++ b/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} />
-        )}
+        <Loading color={spinnerColor} backgroundColor={spinnerBackgroundColor} onClick={onSpinnerClick} />
      </ShowTransition>
      {!isLoading && (value || canClose) && onReset && (
        <Button
--- a/src/components/ui/ShowTransition.tsx
+++ b/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>
    )
  );
--- a/src/components/ui/Transition.tsx
+++ b/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>
    );
  });