To fix Storybook, make `<Message>` take `renderReactionPicker`

ts/components/conversation/Message.stories.tsx

@@ -47,6 +47,8 @@ const renderEmojiPicker: Props['renderEmojiPicker'] = ({
   />
 );
 
+const renderReactionPicker: Props['renderReactionPicker'] = () => <div />;
+
 const MessageAudioContainer: React.FC<AudioAttachmentProps> = props => {
   const [active, setActive] = React.useState<{
     id?: string;
@@ -135,6 +137,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
       ? ReadStatus.Read
       : overrideProps.readStatus,
   renderEmojiPicker,
+  renderReactionPicker,
   renderAudioAttachment,
   replyToMessage: action('replyToMessage'),
   retrySend: action('retrySend'),

ts/components/conversation/Message.tsx

@@ -63,7 +63,7 @@ import {
 } from '../../types/Colors';
 import { createRefMerger } from '../_util';
 import { emojiToData } from '../emoji/lib';
-import { SmartReactionPicker } from '../../state/smart/ReactionPicker';
+import type { SmartReactionPicker } from '../../state/smart/ReactionPicker';
 import { getCustomColorStyle } from '../../util/getCustomColorStyle';
 import { offsetDistanceModifier } from '../../util/popperUtil';
 
@@ -197,6 +197,9 @@ export type PropsHousekeeping = {
   disableScroll?: boolean;
   collapseMetadata?: boolean;
   renderAudioAttachment: (props: AudioAttachmentProps) => JSX.Element;
+  renderReactionPicker: (
+    props: React.ComponentProps<typeof SmartReactionPicker>
+  ) => JSX.Element;
 };
 
 export type PropsActions = {
@@ -1319,6 +1322,7 @@ export class Message extends React.PureComponent<Props, State> {
       isTapToView,
       reactToMessage,
       renderEmojiPicker,
+      renderReactionPicker,
       replyToMessage,
       selectedReaction,
     } = this.props;
@@ -1459,22 +1463,22 @@ export class Message extends React.PureComponent<Props, State> {
                 this.popperPreventOverflowModifier(),
               ]}
             >
-              {({ ref, style }) => (
-                <SmartReactionPicker
-                  ref={ref}
-                  style={style}
-                  selected={selectedReaction}
-                  onClose={this.toggleReactionPicker}
-                  onPick={emoji => {
+              {({ ref, style }) =>
+                renderReactionPicker({
+                  ref,
+                  style,
+                  selected: selectedReaction,
+                  onClose: this.toggleReactionPicker,
+                  onPick: emoji => {
                     this.toggleReactionPicker(true);
                     reactToMessage(id, {
                       emoji,
                       remove: emoji === selectedReaction,
                     });
-                  }}
-                  renderEmojiPicker={renderEmojiPicker}
-                />
-              )}
+                  },
+                  renderEmojiPicker,
+                })
+              }
             </Popper>,
             reactionPickerRoot
           )}

ts/components/conversation/MessageDetail.stories.tsx

@@ -75,6 +75,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   reactToMessage: action('reactToMessage'),
   renderAudioAttachment: () => <div>*AudioAttachment*</div>,
   renderEmojiPicker: () => <div />,
+  renderReactionPicker: () => <div />,
   replyToMessage: action('replyToMessage'),
   retrySend: action('retrySend'),
   showContactDetail: action('showContactDetail'),

ts/components/conversation/MessageDetail.tsx

@@ -68,6 +68,7 @@ export type PropsBackboneActions = Pick<
   | 'reactToMessage'
   | 'renderAudioAttachment'
   | 'renderEmojiPicker'
+  | 'renderReactionPicker'
   | 'replyToMessage'
   | 'retrySend'
   | 'showContactDetail'
@@ -271,6 +272,7 @@ export class MessageDetail extends React.Component<Props> {
       reactToMessage,
       renderAudioAttachment,
       renderEmojiPicker,
+      renderReactionPicker,
       replyToMessage,
       retrySend,
       showContactDetail,
@@ -319,6 +321,7 @@ export class MessageDetail extends React.Component<Props> {
             reactToMessage={reactToMessage}
             renderAudioAttachment={renderAudioAttachment}
             renderEmojiPicker={renderEmojiPicker}
+            renderReactionPicker={renderReactionPicker}
             replyToMessage={replyToMessage}
             retrySend={retrySend}
             showForwardMessageModal={showForwardMessageModal}

ts/components/conversation/Quote.stories.tsx

@@ -66,6 +66,7 @@ const defaultMessageProps: MessagesProps = {
   reactToMessage: action('default--reactToMessage'),
   readStatus: ReadStatus.Read,
   renderEmojiPicker: () => <div />,
+  renderReactionPicker: () => <div />,
   renderAudioAttachment: () => <div>*AudioAttachment*</div>,
   replyToMessage: action('default--replyToMessage'),
   retrySend: action('default--retrySend'),

ts/components/conversation/Timeline.stories.tsx

@@ -387,6 +387,7 @@ const renderItem = (
     id=""
     isSelected={false}
     renderEmojiPicker={() => <div />}
+    renderReactionPicker={() => <div />}
     item={items[id]}
     i18n={i18n}
     interactionMode="keyboard"

ts/components/conversation/TimelineItem.stories.tsx

@@ -32,6 +32,10 @@ const renderEmojiPicker: TimelineItemProps['renderEmojiPicker'] = ({
   />
 );
 
+const renderReactionPicker: TimelineItemProps['renderReactionPicker'] = () => (
+  <div />
+);
+
 const renderContact = (conversationId: string) => (
   <React.Fragment key={conversationId}>{conversationId}</React.Fragment>
 );
@@ -86,6 +90,7 @@ const getDefaultProps = () => ({
   renderContact,
   renderUniversalTimerNotification,
   renderEmojiPicker,
+  renderReactionPicker,
   renderAudioAttachment: () => <div>*AudioAttachment*</div>,
 });
 

ts/components/conversation/TimelineItem.tsx

@@ -176,7 +176,10 @@ type PropsActionsType = MessageActionsType &
 
 export type PropsType = PropsLocalType &
   PropsActionsType &
-  Pick<AllMessageProps, 'renderEmojiPicker' | 'renderAudioAttachment'>;
+  Pick<
+    AllMessageProps,
+    'renderEmojiPicker' | 'renderAudioAttachment' | 'renderReactionPicker'
+  >;
 
 export class TimelineItem extends React.PureComponent<PropsType> {
   public render(): JSX.Element | null {

ts/state/smart/MessageDetail.tsx

@@ -13,12 +13,17 @@ import { StateType } from '../reducer';
 import { getIntl, getInteractionMode } from '../selectors/user';
 import { renderAudioAttachment } from './renderAudioAttachment';
 import { renderEmojiPicker } from './renderEmojiPicker';
+import { renderReactionPicker } from './renderReactionPicker';
 import { getContactNameColorSelector } from '../selectors/conversations';
 
 export { Contact } from '../../components/conversation/MessageDetail';
 export type OwnProps = Omit<
   MessageDetailProps,
-  'i18n' | 'interactionMode' | 'renderAudioAttachment' | 'renderEmojiPicker'
+  | 'i18n'
+  | 'interactionMode'
+  | 'renderAudioAttachment'
+  | 'renderEmojiPicker'
+  | 'renderReactionPicker'
 >;
 
 const mapStateToProps = (
@@ -81,6 +86,7 @@ const mapStateToProps = (
     reactToMessage,
     renderAudioAttachment,
     renderEmojiPicker,
+    renderReactionPicker,
     replyToMessage,
     retrySend,
     showContactDetail,

ts/state/smart/Timeline.tsx

@@ -33,6 +33,7 @@ import { SmartHeroRow } from './HeroRow';
 import { SmartTimelineLoadingRow } from './TimelineLoadingRow';
 import { renderAudioAttachment } from './renderAudioAttachment';
 import { renderEmojiPicker } from './renderEmojiPicker';
+import { renderReactionPicker } from './renderReactionPicker';
 
 import { getOwn } from '../../util/getOwn';
 import { assert } from '../../util/assert';
@@ -77,6 +78,7 @@ function renderItem(
       id={messageId}
       onHeightChange={createBoundOnHeightChange(onHeightChange, messageId)}
       renderEmojiPicker={renderEmojiPicker}
+      renderReactionPicker={renderReactionPicker}
       renderAudioAttachment={renderAudioAttachment}
     />
   );

ts/state/smart/renderReactionPicker.tsx

@@ -0,0 +1,10 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { ComponentProps } from 'react';
+
+import { SmartReactionPicker } from './ReactionPicker';
+
+export const renderReactionPicker = (
+  props: ComponentProps<typeof SmartReactionPicker>
+): JSX.Element => <SmartReactionPicker {...props} />;