123 lines
3.4 KiB
JavaScript
123 lines
3.4 KiB
JavaScript
import React, { PureComponent } from 'react';
|
|
import {
|
|
View, Text, Animated, Easing, TouchableWithoutFeedback, Switch
|
|
} from 'react-native';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import Touch from '../../utils/touch';
|
|
import styles from './styles';
|
|
import { CustomIcon } from '../../lib/Icons';
|
|
import Check from '../../containers/Check';
|
|
import I18n from '../../i18n';
|
|
import { SWITCH_TRACK_COLOR } from '../../constants/colors';
|
|
|
|
const ANIMATION_DURATION = 200;
|
|
const ANIMATION_PROPS = {
|
|
duration: ANIMATION_DURATION,
|
|
easing: Easing.inOut(Easing.quad),
|
|
useNativeDriver: true
|
|
};
|
|
|
|
export default class DirectoryOptions extends PureComponent {
|
|
static propTypes = {
|
|
type: PropTypes.string,
|
|
globalUsers: PropTypes.bool,
|
|
isFederationEnabled: PropTypes.bool,
|
|
close: PropTypes.func,
|
|
changeType: PropTypes.func,
|
|
toggleWorkspace: PropTypes.func
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.animatedValue = new Animated.Value(0);
|
|
}
|
|
|
|
componentDidMount() {
|
|
Animated.timing(
|
|
this.animatedValue,
|
|
{
|
|
toValue: 1,
|
|
...ANIMATION_PROPS
|
|
}
|
|
).start();
|
|
}
|
|
|
|
close = () => {
|
|
const { close } = this.props;
|
|
Animated.timing(
|
|
this.animatedValue,
|
|
{
|
|
toValue: 0,
|
|
...ANIMATION_PROPS
|
|
}
|
|
).start(() => close());
|
|
}
|
|
|
|
renderItem = (itemType) => {
|
|
const { changeType, type: propType } = this.props;
|
|
let text = 'Users';
|
|
let icon = 'user';
|
|
if (itemType === 'channels') {
|
|
text = 'Channels';
|
|
icon = 'hashtag';
|
|
}
|
|
|
|
return (
|
|
<Touch style={styles.dropdownItemButton} onPress={() => changeType(itemType)}>
|
|
<View style={styles.dropdownItemContainer}>
|
|
<CustomIcon style={styles.dropdownItemIcon} size={22} name={icon} />
|
|
<Text style={styles.dropdownItemText}>{I18n.t(text)}</Text>
|
|
{propType === itemType ? <Check /> : null}
|
|
</View>
|
|
</Touch>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const translateY = this.animatedValue.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [-326, 0]
|
|
});
|
|
const backdropOpacity = this.animatedValue.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [0, 0.3]
|
|
});
|
|
const { globalUsers, toggleWorkspace, isFederationEnabled } = this.props;
|
|
return (
|
|
<>
|
|
<TouchableWithoutFeedback onPress={this.close}>
|
|
<Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]} />
|
|
</TouchableWithoutFeedback>
|
|
<Animated.View style={[styles.dropdownContainer, { transform: [{ translateY }] }]}>
|
|
<Touch
|
|
onPress={this.close}
|
|
style={styles.dropdownContainerHeader}
|
|
>
|
|
<View style={styles.dropdownItemContainer}>
|
|
<Text style={styles.dropdownToggleText}>{I18n.t('Search_by')}</Text>
|
|
<CustomIcon style={[styles.dropdownItemIcon, styles.inverted]} size={22} name='arrow-down' />
|
|
</View>
|
|
</Touch>
|
|
{this.renderItem('channels')}
|
|
{this.renderItem('users')}
|
|
{isFederationEnabled
|
|
? (
|
|
<>
|
|
<View style={styles.dropdownSeparator} />
|
|
<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
|
|
<View style={styles.globalUsersTextContainer}>
|
|
<Text style={styles.dropdownItemText}>{I18n.t('Search_global_users')}</Text>
|
|
<Text style={styles.dropdownItemDescription}>{I18n.t('Search_global_users_description')}</Text>
|
|
</View>
|
|
<Switch value={globalUsers} onValueChange={toggleWorkspace} trackColor={SWITCH_TRACK_COLOR} />
|
|
</View>
|
|
</>
|
|
)
|
|
: null}
|
|
</Animated.View>
|
|
</>
|
|
);
|
|
}
|
|
}
|