Changeset View
Changeset View
Standalone View
Standalone View
native/chat/chat-thread-list-item.react.js
| // @flow | // @flow | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { Text, View } from 'react-native'; | import { Text, View } from 'react-native'; | ||||
| import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js'; | import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js'; | ||||
| import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js'; | |||||
| import type { ThreadInfo } from 'lib/types/thread-types.js'; | import type { ThreadInfo } from 'lib/types/thread-types.js'; | ||||
| import type { UserInfo } from 'lib/types/user-types.js'; | import type { UserInfo } from 'lib/types/user-types.js'; | ||||
| import { shortAbsoluteDate } from 'lib/utils/date-utils.js'; | import { shortAbsoluteDate } from 'lib/utils/date-utils.js'; | ||||
| import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; | import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; | ||||
| import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react.js'; | import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react.js'; | ||||
| import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js'; | import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js'; | ||||
| import MessagePreview from './message-preview.react.js'; | import MessagePreview from './message-preview.react.js'; | ||||
| import SwipeableThread from './swipeable-thread.react.js'; | import SwipeableThread from './swipeable-thread.react.js'; | ||||
| import Avatar from '../components/avatar.react.js'; | |||||
| import Button from '../components/button.react.js'; | import Button from '../components/button.react.js'; | ||||
| import ColorSplotch from '../components/color-splotch.react.js'; | import ColorSplotch from '../components/color-splotch.react.js'; | ||||
| import { SingleLine } from '../components/single-line.react.js'; | import { SingleLine } from '../components/single-line.react.js'; | ||||
| import ThreadAncestorsLabel from '../components/thread-ancestors-label.react.js'; | import ThreadAncestorsLabel from '../components/thread-ancestors-label.react.js'; | ||||
| import ThreadAvatar from '../components/thread-avatar.react.js'; | |||||
| import UnreadDot from '../components/unread-dot.react.js'; | import UnreadDot from '../components/unread-dot.react.js'; | ||||
| import { useColors, useStyles } from '../themes/colors.js'; | import { useColors, useStyles } from '../themes/colors.js'; | ||||
| import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; | import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; | ||||
| type Props = { | type Props = { | ||||
| +data: ChatThreadItem, | +data: ChatThreadItem, | ||||
| +onPressItem: ( | +onPressItem: ( | ||||
| threadInfo: ThreadInfo, | threadInfo: ThreadInfo, | ||||
| ▲ Show 20 Lines • Show All 84 Lines • ▼ Show 20 Lines | const lastActivityStyle = React.useMemo(() => { | ||||
| return [styles.lastActivity, styles.unreadLastActivity]; | return [styles.lastActivity, styles.unreadLastActivity]; | ||||
| }, [ | }, [ | ||||
| data.threadInfo.currentUser.unread, | data.threadInfo.currentUser.unread, | ||||
| styles.lastActivity, | styles.lastActivity, | ||||
| styles.unreadLastActivity, | styles.unreadLastActivity, | ||||
| ]); | ]); | ||||
| const resolvedThreadInfo = useResolvedThreadInfo(data.threadInfo); | const resolvedThreadInfo = useResolvedThreadInfo(data.threadInfo); | ||||
| const avatarInfo = useGetAvatarForThread(data.threadInfo); | |||||
| const shouldRenderAvatars = useShouldRenderAvatars(); | const shouldRenderAvatars = useShouldRenderAvatars(); | ||||
| const avatar = React.useMemo(() => { | const avatar = React.useMemo(() => { | ||||
| if (!shouldRenderAvatars) { | if (!shouldRenderAvatars) { | ||||
| return <ColorSplotch color={data.threadInfo.color} size="profile" />; | return <ColorSplotch color={data.threadInfo.color} size="profile" />; | ||||
| } | } | ||||
| return <Avatar size="large" avatarInfo={avatarInfo} />; | return <ThreadAvatar size="large" threadInfo={data.threadInfo} />; | ||||
| }, [avatarInfo, data.threadInfo.color, shouldRenderAvatars]); | }, [data.threadInfo, shouldRenderAvatars]); | ||||
| return ( | return ( | ||||
| <> | <> | ||||
| <SwipeableThread | <SwipeableThread | ||||
| threadInfo={data.threadInfo} | threadInfo={data.threadInfo} | ||||
| mostRecentNonLocalMessage={data.mostRecentNonLocalMessage} | mostRecentNonLocalMessage={data.mostRecentNonLocalMessage} | ||||
| onSwipeableWillOpen={onSwipeableWillOpen} | onSwipeableWillOpen={onSwipeableWillOpen} | ||||
| currentlyOpenedSwipeableId={currentlyOpenedSwipeableId} | currentlyOpenedSwipeableId={currentlyOpenedSwipeableId} | ||||
| ▲ Show 20 Lines • Show All 93 Lines • Show Last 20 Lines | |||||