feat(a11y): turn dropdowns into action sheets (#5798)

app/actions/actionsTypes.ts

@@ -16,8 +16,6 @@ export const ROOMS = createRequestTypes('ROOMS', [
 	...defaultTypes,
 	'REFRESH',
 	'SET_SEARCH',
-	'CLOSE_SERVER_DROPDOWN',
-	'TOGGLE_SERVER_DROPDOWN',
 	'OPEN_SEARCH_HEADER',
 	'CLOSE_SEARCH_HEADER'
 ]);

app/actions/rooms.ts

@@ -53,18 +53,6 @@ export function setSearch(searchText: string): ISetSearch {
 	};
 }
 
-export function closeServerDropdown(): Action {
-	return {
-		type: ROOMS.CLOSE_SERVER_DROPDOWN
-	};
-}
-
-export function toggleServerDropdown(): Action {
-	return {
-		type: ROOMS.TOGGLE_SERVER_DROPDOWN
-	};
-}
-
 export function openSearchHeader(): Action {
 	return {
 		type: ROOMS.OPEN_SEARCH_HEADER

app/i18n/locales/en.json

@@ -740,9 +740,6 @@
   "This_will_remove_all_data_from_this_server": "This will remove all data from this workspace.",
   "Thread": "Thread",
   "Threads": "Threads",
-  "Threads_displaying_all": "Displaying all",
-  "Threads_displaying_following": "Displaying following",
-  "Threads_displaying_unread": "Displaying unread",
   "Timezone": "Timezone",
   "To_continue_using_RocketChat": "To continue using the mobile app, you need to change your password.",
   "Token_expired": "Your session has expired. Please log in again.",

app/lib/methods/helpers/log/events.ts

@@ -54,7 +54,6 @@ export default {
 	SET_STATUS_FAIL: 'set_status_fail',
 
 	// ROOMS LIST VIEW
-	RL_TOGGLE_SERVER_DROPDOWN: 'rl_toggle_server_dropdown',
 	RL_ADD_SERVER: 'rl_add_server',
 	RL_CHANGE_SERVER: 'rl_change_server',
 	RL_GO_NEW_MSG: 'rl_go_new_msg',

app/lib/methods/helpers/navigation/index.ts

@@ -3,7 +3,6 @@ import { DarkTheme, DefaultTheme } from '@react-navigation/native';
 
 import { themes } from '../../../constants';
 import { TSupportedThemes } from '../../../../theme';
-import { isIOS } from '../deviceInfo';
 import sharedStyles from '../../../../views/Styles';
 
 export * from './animations';
@@ -29,9 +28,6 @@ export const drawerStyle = {
 	width: 320
 };
 
-// TODO: Remove it once we migrate dropdowns to action sheet
-export const headerHeight = isIOS ? 50 : 56;
-
 export const themedHeader = (theme: TSupportedThemes) => ({
 	headerStyle: {
 		...borderBottom(theme),

app/reducers/rooms.test.ts

@@ -1,13 +1,11 @@
 import {
 	closeSearchHeader,
-	closeServerDropdown,
 	openSearchHeader,
 	roomsFailure,
 	roomsRefresh,
 	roomsRequest,
 	roomsSuccess,
-	setSearch,
-	toggleServerDropdown
+	setSearch
 } from '../actions/rooms';
 import { mockedStore } from './mockedStore';
 import { initialState } from './rooms';
@@ -45,18 +43,6 @@ describe('test selectedUsers reducer', () => {
 		expect(state.searchText).toEqual('dog');
 	});
 
-	it('should return modified store after call closeServerDropdown', () => {
-		mockedStore.dispatch(closeServerDropdown());
-		const state = mockedStore.getState().rooms;
-		expect(state.closeServerDropdown).toEqual(!initialState.closeServerDropdown);
-	});
-
-	it('should return modified store after call toggleServerDropdown', () => {
-		mockedStore.dispatch(toggleServerDropdown());
-		const state = mockedStore.getState().rooms;
-		expect(state.showServerDropdown).toEqual(!initialState.showServerDropdown);
-	});
-
 	it('should return modified store after call openSearchHeader', () => {
 		mockedStore.dispatch(openSearchHeader());
 		const state = mockedStore.getState().rooms;

app/reducers/rooms.ts

@@ -7,8 +7,6 @@ export interface IRooms {
 	failure: boolean;
 	errorMessage: Record<string, any> | string;
 	searchText: string;
-	showServerDropdown: boolean;
-	closeServerDropdown: boolean;
 	showSearchHeader: boolean;
 }
 
@@ -18,8 +16,6 @@ export const initialState: IRooms = {
 	failure: false,
 	errorMessage: {},
 	searchText: '',
-	showServerDropdown: false,
-	closeServerDropdown: false,
 	showSearchHeader: false
 };
 
@@ -57,16 +53,6 @@ export default function rooms(state = initialState, action: IRoomsAction): IRoom
 				...state,
 				searchText: action.searchText
 			};
-		case ROOMS.CLOSE_SERVER_DROPDOWN:
-			return {
-				...state,
-				closeServerDropdown: !state.closeServerDropdown
-			};
-		case ROOMS.TOGGLE_SERVER_DROPDOWN:
-			return {
-				...state,
-				showServerDropdown: !state.showServerDropdown
-			};
 		case ROOMS.OPEN_SEARCH_HEADER:
 			return {
 				...state,

app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { ILivechatDepartment } from '../../../definitions/ILivechatDepartment';
+import { useTheme } from '../../../theme';
+import Touch from '../../../containers/Touch';
+import { CustomIcon } from '../../../containers/CustomIcon';
+import sharedStyles from '../../Styles';
+
+interface IDepartmentItemFilter {
+	currentDepartment: ILivechatDepartment;
+	value: ILivechatDepartment;
+	onPress: (value: ILivechatDepartment) => void;
+}
+
+export const ROW_HEIGHT = 44;
+
+const styles = StyleSheet.create({
+	container: {
+		paddingVertical: 11,
+		height: ROW_HEIGHT,
+		paddingHorizontal: 16,
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	text: {
+		flex: 1,
+		fontSize: 16,
+		...sharedStyles.textRegular
+	}
+});
+
+const DepartmentItemFilter = ({ currentDepartment, value, onPress }: IDepartmentItemFilter): JSX.Element => {
+	const { colors } = useTheme();
+	const iconName = currentDepartment?._id === value?._id ? 'check' : null;
+
+	return (
+		<Touch onPress={() => onPress(value)} style={{ backgroundColor: colors.surfaceRoom }}>
+			<View style={styles.container}>
+				<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{value?.name}</Text>
+				{iconName ? <CustomIcon name={iconName} size={22} color={colors.fontSecondaryInfo} /> : null}
+			</View>
+		</Touch>
+	);
+};
+
+export default DepartmentItemFilter;

app/views/CannedResponsesListView/DepartmentFilter/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { FlatList, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTheme } from '../../../theme';
+import * as List from '../../../containers/List';
+import DepartmentItemFilter, { ROW_HEIGHT } from './DepartmentItemFilter';
+import { ILivechatDepartment } from '../../../definitions/ILivechatDepartment';
+
+const MAX_ROWS = 5;
+
+interface IDepartmentFilterProps {
+	currentDepartment: ILivechatDepartment;
+	onDepartmentSelected: (value: ILivechatDepartment) => void;
+	departments: ILivechatDepartment[];
+}
+
+const DepartmentFilter = ({ currentDepartment, onDepartmentSelected, departments }: IDepartmentFilterProps) => {
+	const { colors } = useTheme();
+	const insets = useSafeAreaInsets();
+
+	return (
+		<View
+			style={{
+				backgroundColor: colors.surfaceRoom,
+				borderColor: colors.strokeLight,
+				marginBottom: insets.bottom
+			}}>
+			<FlatList
+				style={{ maxHeight: MAX_ROWS * ROW_HEIGHT }}
+				data={departments}
+				keyExtractor={item => item._id}
+				renderItem={({ item }) => (
+					<DepartmentItemFilter onPress={onDepartmentSelected} currentDepartment={currentDepartment} value={item} />
+				)}
+				ItemSeparatorComponent={List.Separator}
+			/>
+		</View>
+	);
+};
+
+export default DepartmentFilter;