diff --git a/native/chat/multimedia-message-multimedia.react.js b/native/chat/multimedia-message-multimedia.react.js --- a/native/chat/multimedia-message-multimedia.react.js +++ b/native/chat/multimedia-message-multimedia.react.js @@ -1,6 +1,5 @@ // @flow -import type { LeafRoute } from '@react-navigation/core'; import { useRoute } from '@react-navigation/native'; import invariant from 'invariant'; import * as React from 'react'; @@ -16,28 +15,17 @@ import InlineMultimedia from './inline-multimedia.react.js'; import { getMediaKey } from './multimedia-message-utils.js'; import { type PendingMultimediaUpload } from '../input/input-state.js'; -import { - type KeyboardState, - KeyboardContext, -} from '../keyboard/keyboard-state.js'; -import { - OverlayContext, - type OverlayContextType, -} from '../navigation/overlay-context.js'; +import { KeyboardContext } from '../keyboard/keyboard-state.js'; +import { OverlayContext } from '../navigation/overlay-context.js'; import { ImageModalRouteName } from '../navigation/route-names.js'; -import { type Colors, useColors } from '../themes/colors.js'; import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js'; import type { VerticalBounds, LayoutCoordinates, } from '../types/layout-types.js'; -import { - type ViewStyle, - type AnimatedStyleObj, - AnimatedView, -} from '../types/styles.js'; +import { type ViewStyle, AnimatedView } from '../types/styles.js'; -type BaseProps = { +type Props = { +mediaInfo: MediaInfo, +item: ChatMultimediaMessageInfoItem, +verticalBounds: ?VerticalBounds, @@ -51,53 +39,6 @@ +clickable: boolean, +setClickable: boolean => void, }; -type Props = { - ...BaseProps, - +route: LeafRoute<>, - // Redux state - +colors: Colors, - // withKeyboardState - +keyboardState: ?KeyboardState, - // withOverlayContext - +overlayContext: ?OverlayContextType, - +viewRef: { current: ?React.ElementRef }, - +onPress: () => void, - +onLayout: () => void, - +animatedWrapperStyle: AnimatedStyleObj, -}; - -class MultimediaMessageMultimedia extends React.PureComponent { - render(): React.Node { - const { - mediaInfo, - pendingUpload, - postInProgress, - viewRef, - onPress, - onLayout, - animatedWrapperStyle, - } = this.props; - - const wrapperStyles = [ - styles.container, - animatedWrapperStyle, - this.props.style, - ]; - return ( - - - - - - ); - } -} const styles = StyleSheet.create({ container: { @@ -109,11 +50,8 @@ }, }); -const ConnectedMultimediaMessageMultimedia: React.ComponentType = - React.memo(function ConnectedMultimediaMessageMultimedia( - props: BaseProps, - ) { - const colors = useColors(); +const MultimediaMessageMultimedia: React.ComponentType = + React.memo(function MultimediaMessageMultimedia(props: Props) { const keyboardState = React.useContext(KeyboardContext); const overlayContext = React.useContext(OverlayContext); invariant( @@ -209,19 +147,26 @@ scrollWasDisabled.current = scrollIsDisabled; }, [overlayContext.scrollBlockingModalStatus, props]); + const { mediaInfo, postInProgress, pendingUpload, item, style } = props; + + const wrapperStyles = React.useMemo( + () => [styles.container, animatedWrapperStyle, style], + [animatedWrapperStyle, style], + ); + return ( - + + + + + ); }); -export default ConnectedMultimediaMessageMultimedia; +export default MultimediaMessageMultimedia;