verdnatura-chat/app/views/ThreadMessagesView/Dropdown/index.js

106 lines
2.9 KiB
JavaScript
Raw Normal View History

[NEW] Threads (#2567) * [IMPROVEMENT] Mentions layout without background * Fix RoomItem * Fix tests * Smaller messagebox * Messagebox colors tweak * Beginning header buttons refactor * Add HeaderButtons * item with title * Refactor * Remove lib * Refactor * Update snapshot * Send to channel on messagebox * Add tshow * Add showMessageInMainThread to login.user reducer * Filter threads on main channel based on user setting * Send tshow * Add tunread * Move unread colors logic away from UnreadBadge component so it can be used on other components * Export UnreadBadge on index * Add empty test * Refactor * Update tests * Lint * Thread unread user and group on RoomItem * Thread badge working * Started ThreadMessagesView.Item * Fix separator * Reactivity working * Lint * custom emojis aren't necessary * Basic filter layout * Filtering layout * Refactor * apply filter * DropdownItemHeader * default all * few fixes * No data found * Fixes list performance issues * Use locale on date formats * Fixed minor styles * Thread badge * Refactor getBadgeColor * Fix send to channel background color * starting search threads * Fix lint and tests * Bump to 4.12.0 just for testing :) * Search input layout * query * starting threads header * fix unnecessary tlm on tmid messages * Fix thread header * lint * Fix thread header on ShareView * Add e2e tests * Fix subscriptions sort * Update stories and minor fixes * Fix button sizes on Messagebox * Remove comment * Unnecessary conditional * Add showMessageInMainThread to user collection * Fix thread header * Fix thread messages not working on tablet * Reset Messagebox.tshow after sending a message * Allow to send to channel when replying to a thread from main channel * Unnecessary theme prop * Address comments * Remove re-render * Fix scroll indicator bug * Fix style * Minor i18n fix * Fix dropdown height * I18n ptbr * I18n
2020-10-30 17:35:07 +00:00
import React from 'react';
import PropTypes from 'prop-types';
import {
Animated, Easing, TouchableWithoutFeedback
} from 'react-native';
import { withSafeAreaInsets } from 'react-native-safe-area-context';
import styles from '../styles';
import { themes } from '../../../constants/colors';
import { withTheme } from '../../../theme';
import { headerHeight } from '../../../containers/Header';
import * as List from '../../../containers/List';
import { FILTER } from '../filters';
import DropdownItemFilter from './DropdownItemFilter';
import DropdownItemHeader from './DropdownItemHeader';
const ANIMATION_DURATION = 200;
class Dropdown extends React.Component {
static propTypes = {
isMasterDetail: PropTypes.bool,
theme: PropTypes.string,
insets: PropTypes.object,
currentFilter: PropTypes.string,
onClose: PropTypes.func,
onFilterSelected: PropTypes.func
}
constructor(props) {
super(props);
this.animatedValue = new Animated.Value(0);
}
componentDidMount() {
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
}
).start();
}
close = () => {
const { onClose } = this.props;
Animated.timing(
this.animatedValue,
{
toValue: 0,
duration: ANIMATION_DURATION,
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
}
).start(() => onClose());
}
render() {
const {
isMasterDetail, insets, theme, currentFilter, onFilterSelected
} = this.props;
const statusBarHeight = insets?.top ?? 0;
const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0;
const translateY = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-300, heightDestination] // approximated height of the component when closed/open
});
const backdropOpacity = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.3]
});
return (
<>
<TouchableWithoutFeedback onPress={this.close}>
<Animated.View style={[styles.backdrop,
{
backgroundColor: themes[theme].backdropColor,
opacity: backdropOpacity,
top: heightDestination
}]}
/>
</TouchableWithoutFeedback>
<Animated.View
style={[
styles.dropdownContainer,
{
transform: [{ translateY }],
backgroundColor: themes[theme].backgroundColor,
borderColor: themes[theme].separatorColor
}
]}
>
<DropdownItemHeader currentFilter={currentFilter} onPress={this.close} />
<List.Separator />
<DropdownItemFilter currentFilter={currentFilter} value={FILTER.ALL} onPress={onFilterSelected} />
<DropdownItemFilter currentFilter={currentFilter} value={FILTER.FOLLOWING} onPress={onFilterSelected} />
<DropdownItemFilter currentFilter={currentFilter} value={FILTER.UNREAD} onPress={onFilterSelected} />
</Animated.View>
</>
);
}
}
export default withTheme(withSafeAreaInsets(Dropdown));