verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

several minor changes

This commit is contained in:
Sathurshan 2024-02-24 00:44:08 +05:30 committed by Diego Mello
parent 6bd1e95657
commit 175d9329ac
7 changed files with 137 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/views/CannedResponsesListView/Dropdown/index.tsx
View File

@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
import { Animated, Easing, FlatList, TouchableWithoutFeedback } from 'react-native';
import styles from '../styles';
import { themes } from '../../../lib/constants';
import { useTheme } from '../../../theme';
import * as List from '../../../containers/List';
import DropdownItemFilter from './DropdownItemFilter';
@ -11,6 +10,8 @@ import { ROW_HEIGHT } from './DropdownItem';
import { ILivechatDepartment } from '../../../definitions/ILivechatDepartment';
const ANIMATION_DURATION = 200;
const HEIGHT_DESTINATION = 0;
const MAX_ROWS = 5;
interface IDropdownProps {
currentDepartment: ILivechatDepartment;
@ -21,7 +22,7 @@ interface IDropdownProps {
const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, departments }: IDropdownProps) => {
const animatedValue = useRef(new Animated.Value(0)).current;
const { theme } = useTheme();
const { colors } = useTheme();
useEffect(() => {
Animated.timing(animatedValue, {
@ -41,17 +42,14 @@ const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, department
}).start(() => onClose());
};
const heightDestination = 0;
const maxRows = 5;
const translateY = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-300, heightDestination] // approximated height of the component when closed/open
outputRange: [-300, HEIGHT_DESTINATION] // approximated height of the component when closed/open
});
const backdropOpacity = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, themes[theme!].backdropOpacity]
outputRange: [0, colors.backdropOpacity]
});
return (
@ -61,9 +59,9 @@ const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, department
style={[
styles.backdrop,
{
backgroundColor: themes[theme!].backdropColor,
backgroundColor: colors.backdropColor,
opacity: backdropOpacity,
top: heightDestination
top: HEIGHT_DESTINATION
}
]}
/>
@ -73,15 +71,15 @@ const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, department
styles.dropdownContainer,
{
transform: [{ translateY }],
backgroundColor: themes[theme!].backgroundColor,
borderColor: themes[theme!].separatorColor
backgroundColor: colors.backgroundColor,
borderColor: colors.separatorColor
}
]}
>
<DropdownItemHeader department={currentDepartment} onPress={close} />
<List.Separator />
<FlatList
style={{ maxHeight: maxRows * ROW_HEIGHT }}
style={{ maxHeight: MAX_ROWS * ROW_HEIGHT }}
data={departments}
keyExtractor={item => item._id}
renderItem={({ item }) => (

199
app/views/DirectoryView/Options.tsx
View File

@ -1,13 +1,13 @@
import React, { memo, useEffect, useRef } from 'react';
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, themes } from '../../lib/constants';
import { SWITCH_TRACK_COLOR } from '../../lib/constants';
import styles from './styles';
import { TSupportedThemes } from '../../theme';
import { useTheme } from '../../theme';
const ANIMATION_DURATION = 200;
const ANIMATION_PROPS = {
@ -23,117 +23,104 @@ interface IDirectoryOptionsProps {
close: Function;
changeType: Function;
toggleWorkspace(): void;
theme: TSupportedThemes;
}
const DirectoryOptions = memo(
({
type: propType,
globalUsers,
isFederationEnabled,
close: onClose,
changeType,
toggleWorkspace,
theme
}: IDirectoryOptionsProps) => {
const animatedValue = useRef(new Animated.Value(0)).current;
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]);
useEffect(() => {
Animated.timing(animatedValue, {
toValue: 1,
...ANIMATION_PROPS
}).start();
}, [animatedValue]);
const close = () => {
Animated.timing(animatedValue, {
toValue: 0,
...ANIMATION_PROPS
}).start(() => onClose());
};
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';
}
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={themes[theme].bodyText} style={styles.dropdownItemIcon} />
<Text style={[styles.dropdownItemText, { color: themes[theme].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, themes[theme].backdropOpacity]
});
if (itemType === 'teams') {
text = 'Teams';
icon = 'teams';
}
return (
<>
<TouchableWithoutFeedback onPress={close}>
<Animated.View style={[styles.backdrop, { backgroundColor: themes[theme].backdropColor, opacity: backdropOpacity }]} />
</TouchableWithoutFeedback>
<Animated.View
style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: themes[theme].backgroundColor }]}
>
<Touch onPress={close} accessibilityLabel={I18n.t('Search_by')}>
<View
style={[
styles.dropdownContainerHeader,
styles.dropdownItemContainer,
{ borderColor: themes[theme].separatorColor }
]}
>
<Text style={[styles.dropdownToggleText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Search_by')}</Text>
<CustomIcon
style={[styles.dropdownItemIcon, styles.inverted]}
size={22}
name='chevron-down'
color={themes[theme].auxiliaryTintColor}
/>
</View>
</Touch>
{renderItem('channels')}
{renderItem('users')}
{renderItem('teams')}
{isFederationEnabled ? (
<>
<View style={[styles.dropdownSeparator, { backgroundColor: themes[theme].separatorColor }]} />
<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
<View style={styles.globalUsersTextContainer}>
<Text style={[styles.dropdownItemText, { color: themes[theme].infoText }]}>
{I18n.t('Search_global_users')}
</Text>
<Text style={[styles.dropdownItemDescription, { color: themes[theme].infoText }]}>
{I18n.t('Search_global_users_description')}
</Text>
</View>
<Switch value={globalUsers} onValueChange={toggleWorkspace} trackColor={SWITCH_TRACK_COLOR} />
</View>
</>
) : null}
</Animated.View>
</>
<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;

1
app/views/DirectoryView/index.tsx
View File

@ -315,7 +315,6 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
/>
{showOptionsDropdown ? (
<Options
theme={theme}
type={type}
globalUsers={globalUsers}
close={this.toggleDropdown}

57
app/views/RoomsListView/ServerDropdown.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import { View, Text, Animated, Easing, TouchableWithoutFeedback, TouchableOpacity, FlatList, Linking } from 'react-native';
import { batch, connect, useDispatch } from 'react-redux';
import { batch, useDispatch } from 'react-redux';
import { Subscription } from 'rxjs';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
@ -13,7 +13,7 @@ import I18n from '../../i18n';
import EventEmitter from '../../lib/methods/helpers/events';
import ServerItem from '../../containers/ServerItem';
import database from '../../lib/database';
import { themes, TOKEN_KEY } from '../../lib/constants';
import { TOKEN_KEY } from '../../lib/constants';
import { useTheme } from '../../theme';
import { localAuthenticate } from '../../lib/methods/helpers/localAuthentication';
import { showConfirmationAlert } from '../../lib/methods/helpers/info';
@ -21,30 +21,26 @@ import log, { events, logEvent } from '../../lib/methods/helpers/log';
import { headerHeight } from '../../lib/methods/helpers/navigation';
import { goRoom } from '../../lib/methods/helpers/goRoom';
import UserPreferences from '../../lib/methods/userPreferences';
import { IApplicationState, IBaseScreen, RootEnum, TServerModel } from '../../definitions';
import { RootEnum, TServerModel } from '../../definitions';
import styles from './styles';
import { ChatsStackParamList } from '../../stacks/types';
import { removeServer } from '../../lib/methods';
import { useAppSelector } from '../../lib/hooks';
const ROW_HEIGHT = 68;
const ANIMATION_DURATION = 200;
const MAX_ROWS = 4;
interface IServerDropdownProps extends IBaseScreen<ChatsStackParamList, 'RoomsListView'> {
closeServerDropdown: boolean;
server: string;
isMasterDetail: boolean;
}
const ServerDropdown = ({ closeServerDropdown, server, isMasterDetail }: IServerDropdownProps) => {
const ServerDropdown = () => {
const animatedValue = useRef(new Animated.Value(0)).current;
const subscription = useRef<Subscription>();
const newServerTimeout = useRef<ReturnType<typeof setTimeout> | false>();
const isMounted = useRef(false);
const [servers, setServers] = useState<TServerModel[]>([]);
const dispatch = useDispatch();
const { theme } = useTheme();
const closeServerDropdown = useAppSelector(state => state.rooms.closeServerDropdown);
const server = useAppSelector(state => state.server.server);
const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
const { colors } = useTheme();
const insets = useSafeAreaInsets();
useEffect(() => {
@ -151,7 +147,7 @@ const ServerDropdown = ({ closeServerDropdown, server, isMasterDetail }: IServer
}
});
const renderServer = ({ item }: { item: { id: string; iconURL: string; name: string; version: string } }) => (
const renderItem = ({ item }: { item: { id: string; iconURL: string; name: string; version: string } }) => (
<ServerItem
item={item}
onPress={() => select(item.id, item.version)}
@ -160,8 +156,7 @@ const ServerDropdown = ({ closeServerDropdown, server, isMasterDetail }: IServer
/>
);
const maxRows = 4;
const initialTop = 87 + Math.min(servers.length, maxRows) * ROW_HEIGHT;
const initialTop = 87 + Math.min(servers.length, MAX_ROWS) * ROW_HEIGHT;
const statusBarHeight = insets?.top ?? 0;
const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0;
@ -172,7 +167,7 @@ const ServerDropdown = ({ closeServerDropdown, server, isMasterDetail }: IServer
const backdropOpacity = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, themes[theme].backdropOpacity]
outputRange: [0, colors.backdropOpacity]
});
return (
@ -182,7 +177,7 @@ const ServerDropdown = ({ closeServerDropdown, server, isMasterDetail }: IServer
style={[
styles.backdrop,
{
backgroundColor: themes[theme].backdropColor,
backgroundColor: colors.backdropColor,
opacity: backdropOpacity,
top: heightDestination
}
@ -194,23 +189,23 @@ const ServerDropdown = ({ closeServerDropdown, server, isMasterDetail }: IServer
styles.dropdownContainer,
{
transform: [{ translateY }],
backgroundColor: themes[theme].backgroundColor,
borderColor: themes[theme].separatorColor
backgroundColor: colors.backgroundColor,
borderColor: colors.separatorColor
}
]}
testID='rooms-list-header-server-dropdown'
>
<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: themes[theme].separatorColor }]}>
<Text style={[styles.serverHeaderText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Server')}</Text>
<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: colors.separatorColor }]}>
<Text style={[styles.serverHeaderText, { color: colors.auxiliaryText }]}>{I18n.t('Server')}</Text>
<TouchableOpacity onPress={addServer} testID='rooms-list-header-server-add'>
<Text style={[styles.serverHeaderAdd, { color: themes[theme].tintColor }]}>{I18n.t('Add_Server')}</Text>
<Text style={[styles.serverHeaderAdd, { color: colors.tintColor }]}>{I18n.t('Add_Server')}</Text>
</TouchableOpacity>
</View>
<FlatList
style={{ maxHeight: maxRows * ROW_HEIGHT }}
style={{ maxHeight: MAX_ROWS * ROW_HEIGHT }}
data={servers}
keyExtractor={item => item.id}
renderItem={renderServer}
renderItem={renderItem}
ItemSeparatorComponent={List.Separator}
keyboardShouldPersistTaps='always'
/>
@ -221,7 +216,7 @@ const ServerDropdown = ({ closeServerDropdown, server, isMasterDetail }: IServer
onPress={createWorkspace}
testID='rooms-list-header-create-workspace-button'
style={styles.buttonCreateWorkspace}
color={themes[theme].tintColor}
color={colors.tintColor}
styleText={[styles.serverHeaderAdd, { textAlign: 'center' }]}
/>
</Animated.View>
@ -229,10 +224,4 @@ const ServerDropdown = ({ closeServerDropdown, server, isMasterDetail }: IServer
);
};
const mapStateToProps = (state: IApplicationState) => ({
closeServerDropdown: state.rooms.closeServerDropdown,
server: state.server.server,
isMasterDetail: state.app.isMasterDetail
});
export default connect(mapStateToProps)(ServerDropdown);
export default ServerDropdown;

6
app/views/RoomsListView/index.tsx
View File

@ -986,16 +986,14 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
render = () => {
console.count(`${this.constructor.name}.render calls`);
const { showServerDropdown, theme, navigation } = this.props;
const { showServerDropdown, theme } = this.props;
return (
<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
<StatusBar />
{this.renderHeader()}
{this.renderScroll()}
{/* TODO - this ts-ignore is here because the route props, on IBaseScreen*/}
{/* @ts-ignore*/}
{showServerDropdown ? <ServerDropdown navigation={navigation} theme={theme} /> : null}
{showServerDropdown ? <ServerDropdown /> : null}
</SafeAreaView>
);
};

18
app/views/ThreadMessagesView/Dropdown/index.tsx
View File

@ -3,26 +3,25 @@ import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import styles from '../styles';
import { themes } from '../../../lib/constants';
import { TSupportedThemes } from '../../../theme';
import { headerHeight } from '../../../lib/methods/helpers/navigation';
import * as List from '../../../containers/List';
import { Filter } from '../filters';
import DropdownItemFilter from './DropdownItemFilter';
import DropdownItemHeader from './DropdownItemHeader';
import { useTheme } from '../../../theme';
const ANIMATION_DURATION = 200;
interface IDropdownProps {
isMasterDetail?: boolean;
theme: TSupportedThemes;
currentFilter: Filter;
onClose: () => void;
onFilterSelected: (value: Filter) => void;
}
const Dropdown = ({ isMasterDetail, theme, currentFilter, onClose, onFilterSelected }: IDropdownProps) => {
const Dropdown = ({ isMasterDetail, currentFilter, onClose, onFilterSelected }: IDropdownProps) => {
const animatedValue = useRef(new Animated.Value(0)).current;
const { colors } = useTheme();
const insets = useSafeAreaInsets();
useEffect(() => {
@ -43,8 +42,7 @@ const Dropdown = ({ isMasterDetail, theme, currentFilter, onClose, onFilterSelec
}).start(() => onClose());
};
const statusBarHeight = insets?.top ?? 0;
const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0;
const heightDestination = isMasterDetail ? headerHeight + insets.top : 0;
const translateY = animatedValue.interpolate({
inputRange: [0, 1],
@ -53,7 +51,7 @@ const Dropdown = ({ isMasterDetail, theme, currentFilter, onClose, onFilterSelec
const backdropOpacity = animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, themes[theme].backdropOpacity]
outputRange: [0, colors.backdropOpacity]
});
return (
@ -63,7 +61,7 @@ const Dropdown = ({ isMasterDetail, theme, currentFilter, onClose, onFilterSelec
style={[
styles.backdrop,
{
backgroundColor: themes[theme].backdropColor,
backgroundColor: colors.backdropColor,
opacity: backdropOpacity,
top: heightDestination
}
@ -75,8 +73,8 @@ const Dropdown = ({ isMasterDetail, theme, currentFilter, onClose, onFilterSelec
styles.dropdownContainer,
{
transform: [{ translateY }],
backgroundColor: themes[theme].backgroundColor,
borderColor: themes[theme].separatorColor
backgroundColor: colors.backgroundColor,
borderColor: colors.separatorColor
}
]}
>

8
app/views/ThreadMessagesView/index.tsx
View File

@ -516,19 +516,13 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
render() {
console.count(`${this.constructor.name}.render calls`);
const { showFilterDropdown, currentFilter } = this.state;
const { theme } = this.props;
return (
<SafeAreaView testID='thread-messages-view'>
<StatusBar />
{this.renderContent()}
{showFilterDropdown ? (
<Dropdown
currentFilter={currentFilter}
onFilterSelected={this.onFilterSelected}
onClose={this.closeFilterDropdown}
theme={theme}
/>
<Dropdown currentFilter={currentFilter} onFilterSelected={this.onFilterSelected} onClose={this.closeFilterDropdown} />
) : null}
</SafeAreaView>
);