Uses existing badge
This commit is contained in:
Shaz MJ
parent
735e9a3925
commit
ab45851e19
7 changed files with 28 additions and 137 deletions
|
|
@ -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 {
|
|||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flexDirection": "row",
|
||||
"marginBottom": 8,
|
||||
"height": 40,
|
||||
"paddingLeft": 2,
|
||||
"paddingVertical": 4,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const CategoryBody = ({currentChannelId, sortedIds, category, hiddenChannelIds,
|
|||
collapsed={category.collapsed}
|
||||
/>
|
||||
);
|
||||
}, [currentChannelId]);
|
||||
}, [currentChannelId, category.collapsed]);
|
||||
|
||||
return (
|
||||
<FlatList
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/channel_list/categories/body/channel/badge should match snapshot 1`] = `
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"backgroundColor": "#ffffff",
|
||||
"borderRadius": 10,
|
||||
"height": 20,
|
||||
"justifyContent": "center",
|
||||
"marginTop": 5,
|
||||
"paddingHorizontal": 8,
|
||||
"textAlignVertical": "center",
|
||||
},
|
||||
false,
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "#1e325c",
|
||||
"fontFamily": "OpenSans",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "400",
|
||||
"lineHeight": 16,
|
||||
},
|
||||
false,
|
||||
]
|
||||
}
|
||||
>
|
||||
10
|
||||
</Text>
|
||||
</View>
|
||||
`;
|
||||
|
|
@ -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
|
|||
<View
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flexDirection": "row",
|
||||
"marginBottom": 8,
|
||||
"height": 40,
|
||||
"paddingLeft": 2,
|
||||
"paddingVertical": 4,
|
||||
}
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
<Badge
|
||||
count={10}
|
||||
muted={false}
|
||||
/>,
|
||||
);
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -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 (
|
||||
<View style={viewStyle}>
|
||||
<Text style={textStyle}>
|
||||
{`${count}`}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Badge;
|
||||
|
|
@ -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}
|
||||
</Text>
|
||||
{myChannel.mentionsCount > 0 &&
|
||||
<Badge
|
||||
count={myChannel.mentionsCount}
|
||||
muted={isMuted}
|
||||
/>
|
||||
}
|
||||
|
||||
<Badge
|
||||
visible={myChannel.mentionsCount > 0}
|
||||
value={myChannel.mentionsCount}
|
||||
style={[styles.badge, isMuted && styles.mutedBadge]}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
|
|
|
|||
Loading…
Reference in a new issue