SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove unused component. This was moved to selected_users in another pr

Browse Source 
(CreateDirectMessage)
This commit is contained in:
Jason Frerich
2022-12-04 21:54:41 -06:00
parent f9ff339133
commit 1e5a32cd1c
2 changed files with 0 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
app/components/selected_users_panel/index.tsx
View File

@@ -1,138 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useMemo} from 'react';
import {View} from 'react-native';
import FormattedText from '@components/formatted_text';
import {useTheme} from '@context/theme';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import SelectedUser from './selected_user';
type Props = {
/*
* An object mapping user ids to a falsey value indicating whether or not they've been selected.
*/
selectedIds: {[id: string]: UserProfile};
/*
* How to display the names of users.
*/
teammateNameDisplay: string;
/*
* The number of users that will be selected when we start to display a message indicating
* the remaining number of users that can be selected.
*/
warnCount: number;
/*
* The maximum number of users that can be selected.
*/
maxCount: number;
/*
* A handler function that will deselect a user when clicked on.
*/
onRemove: (id: string) => void;
}
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
container: {
marginHorizontal: 12,
},
users: {
alignItems: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
},
message: {
color: changeOpacity(theme.centerChannelColor, 0.6),
fontSize: 12,
marginRight: 5,
marginTop: 10,
marginBottom: 2,
},
};
});
export default function SelectedUsers({
selectedIds,
teammateNameDisplay,
warnCount,
maxCount,
onRemove,
}: Props) {
const theme = useTheme();
const style = getStyleFromTheme(theme);
const users = useMemo(() => {
const u = [];
for (const id of Object.keys(selectedIds)) {
if (!selectedIds[id]) {
continue;
}
u.push(
<SelectedUser
key={id}
user={selectedIds[id]}
teammateNameDisplay={teammateNameDisplay}
onRemove={onRemove}
testID='create_direct_message.selected_user'
/>,
);
}
return u;
}, [selectedIds, teammateNameDisplay, onRemove]);
const showWarn = users.length >= warnCount && users.length < maxCount;
const message = useMemo(() => {
if (users.length >= maxCount) {
return (
<FormattedText
style={style.message}
id='mobile.create_direct_message.cannot_add_more'
defaultMessage='You cannot add more users'
/>
);
} else if (users.length >= warnCount) {
const remaining = maxCount - users.length;
if (remaining === 1) {
return (
<FormattedText
style={style.message}
id='mobile.create_direct_message.one_more'
defaultMessage='You can add 1 more user'
/>
);
}
return (
<FormattedText
style={style.message}
id='mobile.create_direct_message.add_more'
defaultMessage='You can add {remaining, number} more users'
values={{
remaining,
}}
/>
);
}
return null;
}, [users.length >= maxCount, showWarn && users.length, theme, maxCount]);
return (
<View style={style.container}>
<View style={style.users}>
{users}
</View>
{message}
</View>
);
}

126
app/components/selected_users_panel/selected_user.tsx
View File

@@ -1,126 +0,0 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {useCallback} from 'react';
import {useIntl} from 'react-intl';
import {
Text,
TouchableOpacity,
View,
} from 'react-native';
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
import CompassIcon from '@components/compass_icon';
import ProfilePicture from '@components/profile_picture';
import {useTheme} from '@context/theme';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {typography} from '@utils/typography';
import {displayUsername} from '@utils/user';
type Props = {
/*
* How to display the names of users.
*/
teammateNameDisplay: string;
/*
* The user that this component represents.
*/
user: UserProfile;
/*
* A handler function that will deselect a user when clicked on.
*/
onRemove: (id: string) => void;
/*
* The test ID.
*/
testID?: string;
}
export const USER_CHIP_HEIGHT = 32;
export const USER_CHIP_BOTTOM_MARGIN = 8;
const FADE_DURATION = 100;
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
container: {
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
borderRadius: 16,
height: USER_CHIP_HEIGHT,
backgroundColor: changeOpacity(theme.centerChannelColor, 0.08),
marginBottom: USER_CHIP_BOTTOM_MARGIN,
marginRight: 8,
paddingHorizontal: 7,
},
remove: {
justifyContent: 'center',
marginLeft: 7,
},
profileContainer: {
flexDirection: 'row',
alignItems: 'center',
marginRight: 8,
color: theme.centerChannelColor,
},
text: {
color: theme.centerChannelColor,
...typography('Body', 100, 'SemiBold'),
},
};
});
export default function SelectedUser({
teammateNameDisplay,
user,
onRemove,
testID,
}: Props) {
const theme = useTheme();
const style = getStyleFromTheme(theme);
const intl = useIntl();
const onPress = useCallback(() => {
onRemove(user.id);
}, [onRemove, user.id]);
const userItemTestID = `${testID}.${user.id}`;
return (
<Animated.View
entering={FadeIn.duration(FADE_DURATION)}
exiting={FadeOut.duration(FADE_DURATION)}
style={style.container}
testID={`${testID}.${user.id}`}
>
<View style={style.profileContainer}>
<ProfilePicture
author={user}
size={20}
iconSize={20}
testID={`${userItemTestID}.profile_picture`}
/>
</View>
<Text
style={style.text}
testID={`${testID}.${user.id}.display_name`}
>
{displayUsername(user, intl.locale, teammateNameDisplay)}
</Text>
<TouchableOpacity
style={style.remove}
onPress={onPress}
testID={`${testID}.${user.id}.remove.button`}
>
<CompassIcon
name='close-circle'
size={18}
color={changeOpacity(theme.centerChannelColor, 0.32)}
/>
</TouchableOpacity>
</Animated.View>
);
}