127 lines
3.8 KiB
TypeScript
127 lines
3.8 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native';
|
|
|
|
import Touch from '../../containers/Touch';
|
|
import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
|
|
import Check from '../../containers/Check';
|
|
import I18n from '../../i18n';
|
|
import { SWITCH_TRACK_COLOR } from '../../lib/constants';
|
|
import styles from './styles';
|
|
import { useTheme } from '../../theme';
|
|
|
|
const ANIMATION_DURATION = 200;
|
|
const ANIMATION_PROPS = {
|
|
duration: ANIMATION_DURATION,
|
|
easing: Easing.inOut(Easing.quad),
|
|
useNativeDriver: true
|
|
};
|
|
|
|
interface IDirectoryOptionsProps {
|
|
type: string;
|
|
globalUsers: boolean;
|
|
isFederationEnabled: boolean;
|
|
close: Function;
|
|
changeType: Function;
|
|
toggleWorkspace(): void;
|
|
}
|
|
|
|
const DirectoryOptions = ({
|
|
type: propType,
|
|
globalUsers,
|
|
isFederationEnabled,
|
|
close: onClose,
|
|
changeType,
|
|
toggleWorkspace
|
|
}: IDirectoryOptionsProps) => {
|
|
const animatedValue = useRef(new Animated.Value(0)).current;
|
|
const { colors } = useTheme();
|
|
|
|
useEffect(() => {
|
|
Animated.timing(animatedValue, {
|
|
toValue: 1,
|
|
...ANIMATION_PROPS
|
|
}).start();
|
|
}, [animatedValue]);
|
|
|
|
const close = () => {
|
|
Animated.timing(animatedValue, {
|
|
toValue: 0,
|
|
...ANIMATION_PROPS
|
|
}).start(() => onClose());
|
|
};
|
|
|
|
const renderItem = (itemType: string) => {
|
|
let text = 'Users';
|
|
let icon: TIconsName = 'user';
|
|
if (itemType === 'channels') {
|
|
text = 'Channels';
|
|
icon = 'channel-public';
|
|
}
|
|
|
|
if (itemType === 'teams') {
|
|
text = 'Teams';
|
|
icon = 'teams';
|
|
}
|
|
|
|
return (
|
|
<Touch onPress={() => changeType(itemType)} style={styles.dropdownItemButton} accessibilityLabel={I18n.t(text)}>
|
|
<View style={styles.dropdownItemContainer}>
|
|
<CustomIcon name={icon} size={22} color={colors.bodyText} style={styles.dropdownItemIcon} />
|
|
<Text style={[styles.dropdownItemText, { color: colors.bodyText }]}>{I18n.t(text)}</Text>
|
|
{propType === itemType ? <Check /> : null}
|
|
</View>
|
|
</Touch>
|
|
);
|
|
};
|
|
|
|
const translateY = animatedValue.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [-326, 0]
|
|
});
|
|
|
|
const backdropOpacity = animatedValue.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [0, colors.backdropOpacity]
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<TouchableWithoutFeedback onPress={close}>
|
|
<Animated.View style={[styles.backdrop, { backgroundColor: colors.backdropColor, opacity: backdropOpacity }]} />
|
|
</TouchableWithoutFeedback>
|
|
<Animated.View style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: colors.backgroundColor }]}>
|
|
<Touch onPress={close} accessibilityLabel={I18n.t('Search_by')}>
|
|
<View style={[styles.dropdownContainerHeader, styles.dropdownItemContainer, { borderColor: colors.separatorColor }]}>
|
|
<Text style={[styles.dropdownToggleText, { color: colors.auxiliaryText }]}>{I18n.t('Search_by')}</Text>
|
|
<CustomIcon
|
|
style={[styles.dropdownItemIcon, styles.inverted]}
|
|
size={22}
|
|
name='chevron-down'
|
|
color={colors.auxiliaryTintColor}
|
|
/>
|
|
</View>
|
|
</Touch>
|
|
{renderItem('channels')}
|
|
{renderItem('users')}
|
|
{renderItem('teams')}
|
|
{isFederationEnabled ? (
|
|
<>
|
|
<View style={[styles.dropdownSeparator, { backgroundColor: colors.separatorColor }]} />
|
|
<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
|
|
<View style={styles.globalUsersTextContainer}>
|
|
<Text style={[styles.dropdownItemText, { color: colors.infoText }]}>{I18n.t('Search_global_users')}</Text>
|
|
<Text style={[styles.dropdownItemDescription, { color: colors.infoText }]}>
|
|
{I18n.t('Search_global_users_description')}
|
|
</Text>
|
|
</View>
|
|
<Switch value={globalUsers} onValueChange={toggleWorkspace} trackColor={SWITCH_TRACK_COLOR} />
|
|
</View>
|
|
</>
|
|
) : null}
|
|
</Animated.View>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DirectoryOptions;
|