Add unread UI implementation #539
Conversation
Add unread UI implementation
update the unread icon mock example
Use useContainerSettigs hook and update the dist files
update unreadIcon for error handling
| template.track?.('content_clicked', MessagingEdgeEventType.INTERACT, null); | ||
|
|
||
| // Mark as read when interacted with | ||
| setIsRead(true); |
There was a problem hiding this comment.
lets put a TODO: here that this shouldnt be handled internally.
| : styles.container, | ||
| styleOverrides?.container | ||
| styleOverrides?.container, | ||
| getUnreadBackgroundColor() && { backgroundColor: getUnreadBackgroundColor() } |
There was a problem hiding this comment.
These functions cannot be memoized by react, so Id either memoize them or just handle them inline, which reads much cleaner
| } | ||
|
|
||
| // Helper function to convert placement from settings to component position | ||
| const convertPlacement = (placement: 'topleft' | 'topright' | 'bottomleft' | 'bottomright'): 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' => { |
There was a problem hiding this comment.
not sure we really need this, also Id create a type for the placement if you want to keep it
|
|
||
| switch (displayPosition) { | ||
| case 'top-left': | ||
| return { ...baseStyle, top: 6, left: 6 }; |
There was a problem hiding this comment.
since baseStyle is applied everywhere, you can just keep it in the styles of the component its applied to, Id also just add these styles in StyleSheet.create so they can be optimized
| } | ||
| }; | ||
|
|
||
| const getDotColor = () => { |
There was a problem hiding this comment.
this doesnt need to be a function, you can just do
const dotColor = useMemo(() => colorScheme === 'dark'...
| const unreadSettings = settings.content.unread_indicator; | ||
|
|
||
| // Use settings from context with fallbacks to props | ||
| const displaySize = size; |
There was a problem hiding this comment.
This just reassigns the variable and then it isnt really used differently?
| } | ||
|
|
||
| // If image failed to load, fallback to dot | ||
| if (renderType === 'image' && imageLoadError) { |
| // If image failed to load, fallback to dot | ||
| if (renderType === 'image' && imageLoadError) { | ||
| return ( | ||
| <View |
There was a problem hiding this comment.
But here i'd make this a separate component since its the same as below.
| } | ||
|
|
||
| if (renderType === 'image' && (imageSource || darkImageSource)) { | ||
| const finalImageSource = colorScheme === 'dark' && darkImageSource ? darkImageSource : imageSource; |
dsoffiantini
force-pushed
the
content-card-containers
branch
6 times, most recently
from
6997afe to
81521eb
Compare
Update with review comments
Add unread UI implementation
Update the dist files, so a lot of files are changed. You can ignore the dist files.
Description
Example:
Light mode with image icon set - use image and unread background color
Dark mode with no image url for icon - default to dot and unread background color
Related Issue
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: