diff --git a/app/components/markdown/markdown_latex_block/index.tsx b/app/components/markdown/markdown_latex_block/index.tsx index e2aca8337..c97808199 100644 --- a/app/components/markdown/markdown_latex_block/index.tsx +++ b/app/components/markdown/markdown_latex_block/index.tsx @@ -213,7 +213,7 @@ const LatexCodeBlock = ({content, theme}: Props) => { math={latexCode} renderError={onRenderErrorMessage} resizeMode={'cover'} - style={styles} + style={styles.mathStyle} /> ))} diff --git a/app/components/post_draft/post_input/post_input.tsx b/app/components/post_draft/post_input/post_input.tsx index 47afe09b2..3e3f31da2 100644 --- a/app/components/post_draft/post_input/post_input.tsx +++ b/app/components/post_draft/post_input/post_input.tsx @@ -128,7 +128,7 @@ export default function PostInput({ const maxHeight = isTablet ? 150 : 88; const pasteInputStyle = useMemo(() => { return {...style.input, maxHeight}; - }, [maxHeight]); + }, [maxHeight, style.input]); const blur = () => { input.current?.blur(); diff --git a/app/context/theme/index.tsx b/app/context/theme/index.tsx index 68e0730b7..261eea249 100644 --- a/app/context/theme/index.tsx +++ b/app/context/theme/index.tsx @@ -69,6 +69,10 @@ const ThemeProvider = ({currentTeamId, children, themes}: Props) => { updateThemeIfNeeded(theme); }, [theme]); + useEffect(() => { + setTheme(getTheme(currentTeamId, themes)); + }, [currentTeamId, themes]); + return ({children}); }; diff --git a/app/screens/create_direct_message/user_list.tsx b/app/screens/create_direct_message/user_list.tsx index 0b1c809d5..1ac63e053 100644 --- a/app/screens/create_direct_message/user_list.tsx +++ b/app/screens/create_direct_message/user_list.tsx @@ -142,6 +142,13 @@ export default function UserList({ {paddingBottom: keyboardHeight}, ], [style, keyboardHeight]); + const data = useMemo(() => { + if (term) { + return profiles; + } + return createProfilesSections(profiles); + }, [term, profiles]); + const openUserProfile = useCallback(async (profile: UserProfile) => { const {user} = await storeProfile(serverUrl, profile); if (user) { @@ -159,7 +166,7 @@ export default function UserList({ } }, []); - const renderItem = useCallback(({item, index}: ListRenderItemInfo) => { + const renderItem = useCallback(({item, index, section}: ListRenderItemInfo & {section?: SectionListData}) => { // The list will re-render when the selection changes because it's passed into the list as extraData const selected = Boolean(selectedIds[item.id]); const canAdd = Object.keys(selectedIds).length < General.MAX_USERS_IN_GM; @@ -167,7 +174,7 @@ export default function UserList({ return ( ); - }, [selectedIds, currentUserId, handleSelectProfile, teammateNameDisplay, tutorialWatched]); + }, [selectedIds, currentUserId, handleSelectProfile, teammateNameDisplay, tutorialWatched, data]); const renderLoading = useCallback(() => { if (!loading) { @@ -219,11 +226,11 @@ export default function UserList({ ); }, [style]); - const renderFlatList = (data: UserProfile[]) => { + const renderFlatList = (items: UserProfile[]) => { return ( >) => { + const renderSectionList = (sections: Array>) => { return ( { - if (term) { - return profiles; - } - return createProfilesSections(profiles); - }, [term, profiles]); - if (term) { return renderFlatList(data as UserProfile[]); } diff --git a/app/screens/home/channel_list/categories_list/categories/body/category_body.tsx b/app/screens/home/channel_list/categories_list/categories/body/category_body.tsx index a519848e5..7a98a3822 100644 --- a/app/screens/home/channel_list/categories_list/categories/body/category_body.tsx +++ b/app/screens/home/channel_list/categories_list/categories/body/category_body.tsx @@ -77,6 +77,10 @@ const CategoryBody = ({sortedChannels, unreadIds, unreadsOnTop, category, limit, }; }, [height, unreadHeight]); + const listHeight = useMemo(() => ({ + height: category.collapsed ? unreadHeight : height, + }), [category.collapsed, height, unreadHeight]); + return ( ); diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/index.ts b/app/screens/home/channel_list/categories_list/categories/unreads/index.ts index cf146fb76..c89bd9da1 100644 --- a/app/screens/home/channel_list/categories_list/categories/unreads/index.ts +++ b/app/screens/home/channel_list/categories_list/categories/unreads/index.ts @@ -9,7 +9,7 @@ import {combineLatestWith, map, switchMap} from 'rxjs/operators'; import {Preferences} from '@constants'; import {getPreferenceAsBool} from '@helpers/api/preference'; import {filterAndSortMyChannels, makeChannelsMap} from '@helpers/database'; -import {getChannelById, observeChannelsByLastPostAt, observeCurrentChannel, observeNotifyPropsByChannels, queryMyChannelUnreads} from '@queries/servers/channel'; +import {getChannelById, observeChannelsByLastPostAt, observeNotifyPropsByChannels, queryMyChannelUnreads} from '@queries/servers/channel'; import {queryPreferencesByCategoryAndName} from '@queries/servers/preference'; import {observeLastUnreadChannelId} from '@queries/servers/system'; import {observeUnreadsAndMentionsInTeam} from '@queries/servers/thread'; @@ -48,7 +48,6 @@ const enhanced = withObservables(['currentTeamId', 'isTablet', 'onlyUnreads'], ( if (gU || onlyUnreads) { const lastUnread = isTablet ? observeLastUnreadChannelId(database).pipe( switchMap(getC), - switchMap((ch) => (ch ? of$(ch) : observeCurrentChannel(database))), ) : of$(undefined); const myUnreadChannels = queryMyChannelUnreads(database, currentTeamId).observeWithColumns(['last_post_at']); const notifyProps = myUnreadChannels.pipe(switchMap((cs) => observeNotifyPropsByChannels(database, cs))); diff --git a/app/screens/latex/index.tsx b/app/screens/latex/index.tsx index 80da7b039..8205a59a5 100644 --- a/app/screens/latex/index.tsx +++ b/app/screens/latex/index.tsx @@ -30,6 +30,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => { container: { minHeight: '100%', }, + mathStyle: { + color: theme.centerChannelColor, + }, scrollCode: { minHeight: '100%', flexDirection: 'column', @@ -87,6 +90,7 @@ const Latex = ({content}: Props) => { onError={onErrorMessage} renderError={onRenderErrorMessage} resizeMode={'cover'} + style={style.mathStyle} /> ))} diff --git a/app/screens/settings/display_timezone/display_timezone.tsx b/app/screens/settings/display_timezone/display_timezone.tsx index 4cc24251b..cb7999c10 100644 --- a/app/screens/settings/display_timezone/display_timezone.tsx +++ b/app/screens/settings/display_timezone/display_timezone.tsx @@ -56,7 +56,7 @@ const DisplayTimezone = ({currentUser, componentId}: DisplayTimezoneProps) => { const screen = Screens.SETTINGS_DISPLAY_TIMEZONE_SELECT; const title = intl.formatMessage({id: 'settings_display.timezone.select', defaultMessage: 'Select Timezone'}); const passProps = { - selectedTimezone: timezone.manualTimezone, + selectedTimezone: userTimezone.manualTimezone || timezone.manualTimezone || timezone.automaticTimezone, onBack: updateManualTimezone, }; diff --git a/app/screens/settings/display_timezone_select/index.tsx b/app/screens/settings/display_timezone_select/index.tsx index 7968b27ea..6d60e978c 100644 --- a/app/screens/settings/display_timezone_select/index.tsx +++ b/app/screens/settings/display_timezone_select/index.tsx @@ -8,7 +8,6 @@ import {Edge, SafeAreaView} from 'react-native-safe-area-context'; import {getAllSupportedTimezones} from '@actions/remote/user'; import Search from '@components/search'; -import {List} from '@constants'; import {useServerUrl} from '@context/server'; import {useTheme} from '@context/theme'; import {popTopScreen} from '@screens/navigation'; @@ -20,6 +19,9 @@ import TimezoneRow from './timezone_row'; const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { + flexGrow: { + flexGrow: 1, + }, container: { flex: 1, backgroundColor: theme.centerChannelBg, @@ -44,8 +46,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { const EDGES: Edge[] = ['left', 'right']; const EMPTY_TIMEZONES: string[] = []; -const ITEM_HEIGHT = 45; -const VIEWABILITY_CONFIG = List.VISIBILITY_CONFIG_DEFAULTS; +const ITEM_HEIGHT = 48; const keyExtractor = (item: string) => item; const getItemLayout = (_data: string[], index: number) => ({ @@ -75,7 +76,7 @@ const SelectTimezones = ({selectedTimezone, onBack}: SelectTimezonesProps) => { }), [theme.centerChannelColor]); const [timezones, setTimezones] = useState(EMPTY_TIMEZONES); - const [initialScrollIndex, setInitialScrollIndex] = useState(0); + const [initialScrollIndex, setInitialScrollIndex] = useState(); const [value, setValue] = useState(''); const filteredTimezones = (timezonePrefix: string) => { @@ -85,6 +86,15 @@ const SelectTimezones = ({selectedTimezone, onBack}: SelectTimezonesProps) => { const lowerCasePrefix = timezonePrefix.toLowerCase(); + // if initial scroll index is set when the items change + // and the index is grater than the amount of items + // the list starts to render partial results until there is + // and interaction, so setting the index as undefined corrects + // the rendering + if (initialScrollIndex) { + setInitialScrollIndex(undefined); + } + return timezones.filter((t) => ( getTimezoneRegion(t).toLowerCase().indexOf(lowerCasePrefix) >= 0 || t.toLowerCase().indexOf(lowerCasePrefix) >= 0 @@ -149,10 +159,9 @@ const SelectTimezones = ({selectedTimezone, onBack}: SelectTimezonesProps) => { keyExtractor={keyExtractor} keyboardDismissMode='on-drag' keyboardShouldPersistTaps='always' - maxToRenderPerBatch={15} removeClippedSubviews={true} renderItem={renderItem} - viewabilityConfig={VIEWABILITY_CONFIG} + contentContainerStyle={styles.flexGrow} /> ); diff --git a/app/screens/settings/display_timezone_select/timezone_row.tsx b/app/screens/settings/display_timezone_select/timezone_row.tsx index be328910f..92579609f 100644 --- a/app/screens/settings/display_timezone_select/timezone_row.tsx +++ b/app/screens/settings/display_timezone_select/timezone_row.tsx @@ -10,7 +10,7 @@ import SettingSeparator from '@screens/settings/settings_separator'; import {makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; -const ITEM_HEIGHT = 45; +const ITEM_HEIGHT = 48; const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { diff --git a/app/screens/user_profile/user_profile.tsx b/app/screens/user_profile/user_profile.tsx index b565bcd81..1e848fa8f 100644 --- a/app/screens/user_profile/user_profile.tsx +++ b/app/screens/user_profile/user_profile.tsx @@ -22,6 +22,7 @@ import type UserModel from '@typings/database/models/servers/user'; type Props = { channelId?: string; + closeButtonId: string; currentUserId: string; enablePostIconOverride: boolean; enablePostUsernameOverride: boolean; @@ -45,7 +46,7 @@ const LABEL_HEIGHT = 58; const EXTRA_HEIGHT = 60; const UserProfile = ({ - channelId, currentUserId, enablePostIconOverride, enablePostUsernameOverride, + channelId, closeButtonId, currentUserId, enablePostIconOverride, enablePostUsernameOverride, isChannelAdmin, isDirectMessage, isMilitaryTime, isSystemAdmin, isTeamAdmin, location, teamId, teammateDisplayName, user, userIconOverride, usernameOverride, @@ -152,7 +153,7 @@ const UserProfile = ({ return (