From ab45851e192f6de7377e4d7d821acf4df65d2292 Mon Sep 17 00:00:00 2001 From: Shaz MJ Date: Thu, 24 Mar 2022 08:19:43 +1100 Subject: [PATCH] Uses existing badge --- .../__snapshots__/category_body.test.tsx.snap | 6 +- .../categories/body/category_body.tsx | 2 +- .../channel/__snapshots__/badge.test.tsx.snap | 38 ------------ .../channel_list_item.test.tsx.snap | 6 +- .../categories/body/channel/badge.test.tsx | 20 ------ .../categories/body/channel/badge.tsx | 62 ------------------- .../body/channel/channel_list_item.tsx | 31 ++++++---- 7 files changed, 28 insertions(+), 137 deletions(-) delete mode 100644 app/components/channel_list/categories/body/channel/__snapshots__/badge.test.tsx.snap delete mode 100644 app/components/channel_list/categories/body/channel/badge.test.tsx delete mode 100644 app/components/channel_list/categories/body/channel/badge.tsx diff --git a/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap b/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap index f8bfadc08..7202ed8da 100644 --- a/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap +++ b/app/components/channel_list/categories/body/__snapshots__/category_body.test.tsx.snap @@ -13,6 +13,7 @@ Object { Object { "value": Object { "height": 40, + "marginVertical": 2, "opacity": 1, }, } @@ -21,6 +22,7 @@ Object { style={ Object { "height": 40, + "marginVertical": 2, "opacity": 1, } } @@ -46,10 +48,10 @@ Object { diff --git a/app/components/channel_list/categories/body/category_body.tsx b/app/components/channel_list/categories/body/category_body.tsx index c27f2ac00..2961cf21f 100644 --- a/app/components/channel_list/categories/body/category_body.tsx +++ b/app/components/channel_list/categories/body/category_body.tsx @@ -41,7 +41,7 @@ const CategoryBody = ({currentChannelId, sortedIds, category, hiddenChannelIds, collapsed={category.collapsed} /> ); - }, [currentChannelId]); + }, [currentChannelId, category.collapsed]); return ( - - 10 - - -`; diff --git a/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap b/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap index 9f969d335..ddfdff33a 100644 --- a/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap +++ b/app/components/channel_list/categories/body/channel/__snapshots__/channel_list_item.test.tsx.snap @@ -6,6 +6,7 @@ exports[`components/channel_list/categories/body/channel/item should match snaps Object { "value": Object { "height": 40, + "marginVertical": 2, "opacity": 1, }, } @@ -14,6 +15,7 @@ exports[`components/channel_list/categories/body/channel/item should match snaps style={ Object { "height": 40, + "marginVertical": 2, "opacity": 1, } } @@ -39,10 +41,10 @@ exports[`components/channel_list/categories/body/channel/item should match snaps diff --git a/app/components/channel_list/categories/body/channel/badge.test.tsx b/app/components/channel_list/categories/body/channel/badge.test.tsx deleted file mode 100644 index 0696f225e..000000000 --- a/app/components/channel_list/categories/body/channel/badge.test.tsx +++ /dev/null @@ -1,20 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -import {renderWithIntlAndTheme} from '@test/intl-test-helper'; - -import Badge from './badge'; - -describe('components/channel_list/categories/body/channel/badge', () => { - it('should match snapshot', () => { - const wrapper = renderWithIntlAndTheme( - , - ); - expect(wrapper.toJSON()).toMatchSnapshot(); - }); -}); diff --git a/app/components/channel_list/categories/body/channel/badge.tsx b/app/components/channel_list/categories/body/channel/badge.tsx deleted file mode 100644 index 7a7270f38..000000000 --- a/app/components/channel_list/categories/body/channel/badge.tsx +++ /dev/null @@ -1,62 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React, {useMemo} from 'react'; -import {Text, View} from 'react-native'; - -import {useTheme} from '@context/theme'; -import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; -import {typography} from '@utils/typography'; - -const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ - badge: { - backgroundColor: theme.mentionBg, - borderRadius: 10, - height: 20, - marginTop: 5, - paddingHorizontal: 8, - alignItems: 'center', - justifyContent: 'center', - textAlignVertical: 'center', - }, - text: { - color: theme.mentionColor, - ...typography('Body', 75), - }, - mutedBadge: { - backgroundColor: changeOpacity(theme.mentionBg, 0.4), - }, - mutedText: { - color: changeOpacity(theme.mentionColor, 0.4), - }, -})); - -const Badge = ({count, muted}: {count: number; muted: boolean}) => { - const theme = useTheme(); - const styles = getStyleSheet(theme); - - const viewStyle = useMemo(() => [ - styles.badge, - muted && styles.mutedBadge, - ], [muted]); - - const textStyle = useMemo(() => [ - styles.text, - - muted && styles.mutedText, - ], [muted]); - - if (!count) { - return null; - } - - return ( - - - {`${count}`} - - - ); -}; - -export default Badge; diff --git a/app/components/channel_list/categories/body/channel/channel_list_item.tsx b/app/components/channel_list/categories/body/channel/channel_list_item.tsx index 475035688..1e458be25 100644 --- a/app/components/channel_list/categories/body/channel/channel_list_item.tsx +++ b/app/components/channel_list/categories/body/channel/channel_list_item.tsx @@ -8,6 +8,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler'; import Animated, {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import {switchToChannelById} from '@actions/remote/channel'; +import Badge from '@components/badge'; import ChannelIcon from '@components/channel_icon'; import {General} from '@constants'; import {useServerUrl} from '@context/server'; @@ -15,17 +16,15 @@ import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; -import Badge from './badge'; - import type ChannelModel from '@typings/database/models/servers/channel'; import type MyChannelModel from '@typings/database/models/servers/my_channel'; const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ container: { flexDirection: 'row', - marginBottom: 8, paddingLeft: 2, - paddingVertical: 4, + height: 40, + alignItems: 'center', }, icon: { fontSize: 24, @@ -44,6 +43,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ muted: { color: changeOpacity(theme.sidebarText, 0.4), }, + badge: { + position: 'relative', + borderWidth: 0, + left: 0, + top: 0, + alignSelf: undefined, + }, + mutedBadge: { + opacity: 0.4, + }, })); const textStyle = StyleSheet.create({ @@ -77,6 +86,7 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan const animatedStyle = useAnimatedStyle(() => { return { + marginVertical: withTiming(sharedValue.value ? 0 : 2, {duration: 500}), height: withTiming(sharedValue.value ? 0 : 40, {duration: 500}), opacity: withTiming(sharedValue.value ? 0 : 1, {duration: 500, easing: Easing.inOut(Easing.exp)}), }; @@ -87,7 +97,6 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan if (channel.type === General.GM_CHANNEL) { return channel.displayName?.split(',').length; } - return 0; }, [channel.type, channel.displayName]); @@ -128,13 +137,11 @@ const ChannelListItem = ({channel, isActive, isOwnDirectMessage, isMuted, myChan > {displayName} - {myChannel.mentionsCount > 0 && - - } - + 0} + value={myChannel.mentionsCount} + style={[styles.badge, isMuted && styles.mutedBadge]} + />