verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge 4.26.1 into single-server (#3981)

This commit is contained in:
Diego Mello 2022-03-29 15:53:27 -03:00 committed by GitHub
parent fc9e9a4f2a
commit 9d2175485c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
400 changed files with 7918 additions and 5349 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -64,5 +64,6 @@ artifacts
.vscode/
e2e/docker/rc_test_env/docker-compose.yml
e2e/docker/data/db
e2e/e2e_account.js
*.p8

20
__tests__/Storyshots.test.js
View File

@ -20,6 +20,26 @@ jest.mock('react-native-file-viewer', () => ({
jest.mock('../app/lib/database', () => jest.fn(() => null));
global.Date.now = jest.fn(() => new Date('2019-10-10').getTime());
jest.mock('react-native-mmkv-storage', () => {
return {
Loader: jest.fn().mockImplementation(() => {
return {
setProcessingMode: jest.fn().mockImplementation(() => {
return {
withEncryption: jest.fn().mockImplementation(() => {
return {
initialize: jest.fn()
};
})
};
})
};
}),
create: jest.fn(),
MODES: { MULTI_PROCESS: '' }
};
});
const converter = new Stories2SnapsConverter();
initStoryshots({

2
android/app/build.gradle
View File

@ -144,7 +144,7 @@ android {
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode VERSIONCODE as Integer
versionName "4.25.0"
versionName "4.26.1"
vectorDrawables.useSupportLibrary = true
if (!isFoss) {
manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]

3
android/app/src/main/java/chat/rocket/reactnative/MainApplication.java
View File

@ -12,7 +12,6 @@ import com.facebook.soloader.SoLoader;
import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
import com.facebook.react.bridge.JSIModulePackage;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;
import org.unimodules.adapters.react.ModuleRegistryAdapter;
import org.unimodules.adapters.react.ReactModuleRegistryProvider;
@ -54,7 +53,7 @@ public class MainApplication extends Application implements ReactApplication {
@Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage(); // <- add
return new ReanimatedJSIModulePackage();
}
@Override

12
android/app/src/play/java/chat/rocket/reactnative/Ejson.java
View File

@ -53,16 +53,8 @@ public class Ejson {
String alias = Utils.toHex("com.MMKV.default");
// Retrieve container password
secureKeystore.getSecureKey(alias, new RNCallback() {
@Override
public void invoke(Object... args) {
String error = (String) args[0];
if (error == null) {
String password = (String) args[1];
mmkv = MMKV.mmkvWithID("default", MMKV.SINGLE_PROCESS_MODE, password);
}
}
});
String password = secureKeystore.getSecureKey(alias);
mmkv = MMKV.mmkvWithID("default", MMKV.SINGLE_PROCESS_MODE, password);
}
public String getAvatarUri() {

2
app/actions/actionsTypes.ts
View File

@ -11,7 +11,7 @@ function createRequestTypes(base = {}, types = defaultTypes): Record<string, str
// Login events
export const LOGIN = createRequestTypes('LOGIN', [...defaultTypes, 'SET_SERVICES', 'SET_PREFERENCE', 'SET_LOCAL_AUTHENTICATED']);
export const SHARE = createRequestTypes('SHARE', ['SELECT_SERVER', 'SET_USER', 'SET_SETTINGS', 'SET_SERVER_INFO']);
export const USER = createRequestTypes('USER', ['SET']);
export const USER = createRequestTypes('USER', ['SET', 'CLEAR']);
export const ROOMS = createRequestTypes('ROOMS', [
...defaultTypes,
'REFRESH',

6
app/actions/login.ts
View File

@ -93,6 +93,12 @@ export function setUser(user: Partial<IUser>): ISetUser {
};
}
export function clearUser(): Action {
return {
type: types.USER.CLEAR
};
}
export function setLoginServices(data: Record<string, any>): ISetServices {
return {
type: types.LOGIN.SET_SERVICES,

2
app/actions/room.ts
View File

@ -4,7 +4,7 @@ import { ERoomType } from '../definitions/ERoomType';
import { ROOM } from './actionsTypes';
// TYPE RETURN RELATED
type ISelected = Record<string, string>;
type ISelected = string[];
export interface ITransferData {
roomId: string;

10
app/actions/settings.ts
View File

@ -1,26 +1,26 @@
import { Action } from 'redux';
import { ISettings, TSettings } from '../reducers/settings';
import { TSettingsState, TSupportedSettings, TSettingsValues } from '../reducers/settings';
import { SETTINGS } from './actionsTypes';
interface IAddSettings extends Action {
payload: ISettings;
payload: TSettingsState;
}
interface IUpdateSettings extends Action {
payload: { id: string; value: TSettings };
payload: { id: TSupportedSettings; value: TSettingsValues };
}
export type IActionSettings = IAddSettings & IUpdateSettings;
export function addSettings(settings: ISettings): IAddSettings {
export function addSettings(settings: TSettingsState): IAddSettings {
return {
type: SETTINGS.ADD,
payload: settings
};
}
export function updateSettings(id: string, value: TSettings): IUpdateSettings {
export function updateSettings(id: TSupportedSettings, value: TSettingsValues): IUpdateSettings {
return {
type: SETTINGS.UPDATE,
payload: { id, value }

4
app/commands.ts
View File

@ -143,8 +143,8 @@ export const deleteKeyCommands = (): void => KeyCommands.deleteKeyCommands(keyCo
export const KEY_COMMAND = 'KEY_COMMAND';
interface IKeyCommandEvent extends NativeSyntheticEvent<typeof KeyCommand> {
input: string;
export interface IKeyCommandEvent extends NativeSyntheticEvent<typeof KeyCommand> {
input: number & string;
modifierFlags: string | number;
}

9
app/constants/colors.ts
View File

@ -37,6 +37,7 @@ export const themes: any = {
infoText: '#6d6d72',
tintColor: '#1d74f5',
tintActive: '#549df9',
tintDisabled: '#88B4F5',
auxiliaryTintColor: '#6C727A',
actionTintColor: '#1d74f5',
separatorColor: '#cbcbcc',
@ -66,6 +67,8 @@ export const themes: any = {
previewTintColor: '#ffffff',
backdropOpacity: 0.3,
attachmentLoadingOpacity: 0.7,
collapsibleQuoteBorder: '#CBCED1',
collapsibleChevron: '#6C727A',
...mentions
},
dark: {
@ -85,6 +88,7 @@ export const themes: any = {
infoText: '#6D6D72',
tintColor: '#1d74f5',
tintActive: '#549df9',
tintDisabled: '#88B4F5',
auxiliaryTintColor: '#f9f9f9',
actionTintColor: '#1d74f5',
separatorColor: '#2b2b2d',
@ -114,6 +118,8 @@ export const themes: any = {
previewTintColor: '#ffffff',
backdropOpacity: 0.9,
attachmentLoadingOpacity: 0.3,
collapsibleQuoteBorder: '#CBCED1',
collapsibleChevron: '#6C727A',
...mentions
},
black: {
@ -133,6 +139,7 @@ export const themes: any = {
infoText: '#6d6d72',
tintColor: '#1e9bfe',
tintActive: '#76b7fc',
tintDisabled: '#88B4F5', // TODO: Evaluate this with design team
auxiliaryTintColor: '#f9f9f9',
actionTintColor: '#1e9bfe',
separatorColor: '#272728',
@ -162,6 +169,8 @@ export const themes: any = {
previewTintColor: '#ffffff',
backdropOpacity: 0.9,
attachmentLoadingOpacity: 0.3,
collapsibleQuoteBorder: '#CBCED1',
collapsibleChevron: '#6C727A',
...mentions
}
};

10
app/constants/messageTypeLoad.ts
View File

@ -1,5 +1,7 @@
export const MESSAGE_TYPE_LOAD_MORE = 'load_more';
export const MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK = 'load_previous_chunk';
export const MESSAGE_TYPE_LOAD_NEXT_CHUNK = 'load_next_chunk';
export enum MessageTypeLoad {
MORE = 'load_more',
PREVIOUS_CHUNK = 'load_previous_chunk',
NEXT_CHUNK = 'load_next_chunk'
}
export const MESSAGE_TYPE_ANY_LOAD = [MESSAGE_TYPE_LOAD_MORE, MESSAGE_TYPE_LOAD_PREVIOUS_CHUNK, MESSAGE_TYPE_LOAD_NEXT_CHUNK];
export const MESSAGE_TYPE_ANY_LOAD = [MessageTypeLoad.MORE, MessageTypeLoad.PREVIOUS_CHUNK, MessageTypeLoad.NEXT_CHUNK];

2
app/constants/settings.ts
View File

@ -206,4 +206,4 @@ export default {
Canned_Responses_Enable: {
type: 'valueAsBoolean'
}
};
} as const;

77
app/containers/ActionSheet/ActionSheet.tsx
View File

@ -1,30 +1,29 @@
import { useBackHandler } from '@react-native-community/hooks';
import * as Haptics from 'expo-haptics';
import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Keyboard, Text } from 'react-native';
import { HandlerStateChangeEventPayload, State, TapGestureHandler } from 'react-native-gesture-handler';
import Animated, { Easing, Extrapolate, interpolateNode, Value } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { State, TapGestureHandler } from 'react-native-gesture-handler';
import ScrollBottomSheet from 'react-native-scroll-bottom-sheet';
import Animated, { Easing, Extrapolate, Value, interpolateNode } from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';
import { useBackHandler } from '@react-native-community/hooks';
import { Item } from './Item';
import { Handle } from './Handle';
import { Button } from './Button';
import { themes } from '../../constants/colors';
import styles, { ITEM_HEIGHT } from './styles';
import { useDimensions, useOrientation } from '../../dimensions';
import I18n from '../../i18n';
import { useTheme } from '../../theme';
import { isIOS, isTablet } from '../../utils/deviceInfo';
import * as List from '../List';
import I18n from '../../i18n';
import { IDimensionsContextProps, useDimensions, useOrientation } from '../../dimensions';
import { Button } from './Button';
import { Handle } from './Handle';
import { IActionSheetItem, Item } from './Item';
import { TActionSheetOptions, TActionSheetOptionsItem } from './Provider';
import styles, { ITEM_HEIGHT } from './styles';
interface IActionSheetData {
options: any;
headerHeight?: number;
hasCancel?: boolean;
customHeader: any;
}
const getItemLayout = (data: any, index: number) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index });
const getItemLayout = (data: TActionSheetOptionsItem[] | null | undefined, index: number) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * index,
index
});
const HANDLE_HEIGHT = isIOS ? 40 : 56;
const MAX_SNAP_HEIGHT = 16;
@ -39,16 +38,17 @@ const ANIMATION_CONFIG = {
};
const ActionSheet = React.memo(
forwardRef(({ children, theme }: { children: JSX.Element; theme: string }, ref) => {
const bottomSheetRef: any = useRef();
const [data, setData] = useState<IActionSheetData>({} as IActionSheetData);
forwardRef(({ children }: { children: React.ReactElement }, ref) => {
const { theme } = useTheme();
const bottomSheetRef = useRef<ScrollBottomSheet<TActionSheetOptionsItem>>(null);
const [data, setData] = useState<TActionSheetOptions>({} as TActionSheetOptions);
const [isVisible, setVisible] = useState(false);
const { height }: Partial<IDimensionsContextProps> = useDimensions();
const { height } = useDimensions();
const { isLandscape } = useOrientation();
const insets = useSafeAreaInsets();
const maxSnap = Math.max(
height! -
height -
// Items height
ITEM_HEIGHT * (data?.options?.length || 0) -
// Handle height
@ -69,7 +69,7 @@ const ActionSheet = React.memo(
* we'll provide more one snap
* that point 50% of the whole screen
*/
const snaps: any = height! - maxSnap > height! * 0.6 && !isLandscape ? [maxSnap, height! * 0.5, height] : [maxSnap, height];
const snaps = height - maxSnap > height * 0.6 && !isLandscape ? [maxSnap, height * 0.5, height] : [maxSnap, height];
const openedSnapIndex = snaps.length > 2 ? 1 : 0;
const closedSnapIndex = snaps.length - 1;
@ -79,12 +79,12 @@ const ActionSheet = React.memo(
bottomSheetRef.current?.snapTo(closedSnapIndex);
};
const show = (options: any) => {
const show = (options: TActionSheetOptions) => {
setData(options);
toggleVisible();
};
const onBackdropPressed = ({ nativeEvent }: any) => {
const onBackdropPressed = ({ nativeEvent }: { nativeEvent: HandlerStateChangeEventPayload }) => {
if (nativeEvent.oldState === State.ACTIVE) {
hide();
}
@ -117,7 +117,7 @@ const ActionSheet = React.memo(
const renderHandle = () => (
<>
<Handle theme={theme} />
<Handle />
{isValidElement(data?.customHeader) ? data.customHeader : null}
</>
);
@ -127,21 +127,23 @@ const ActionSheet = React.memo(
<Button
onPress={hide}
style={[styles.button, { backgroundColor: themes[theme].auxiliaryBackground }]}
// TODO: Remove when migrate Touch
theme={theme}
accessibilityLabel={I18n.t('Cancel')}>
<Text style={[styles.text, { color: themes[theme].bodyText }]}>{I18n.t('Cancel')}</Text>
</Button>
) : null;
const renderItem = ({ item }: any) => <Item item={item} hide={hide} theme={theme} />;
const renderItem = ({ item }: { item: IActionSheetItem['item'] }) => <Item item={item} hide={hide} />;
const animatedPosition = React.useRef(new Value(0));
// TODO: Similar to https://github.com/wcandillon/react-native-redash/issues/307#issuecomment-827442320
const opacity = interpolateNode(animatedPosition.current, {
inputRange: [0, 1],
outputRange: [0, themes[theme].backdropOpacity],
extrapolate: Extrapolate.CLAMP
}) as any;
}) as any; // The function's return differs from the expected type of opacity, however this problem is something related to lib, maybe when updating the types will be fixed.
const bottomSheet = isLandscape || isTablet ? styles.bottomSheet : {};
return (
<>
@ -160,7 +162,7 @@ const ActionSheet = React.memo(
]}
/>
</TapGestureHandler>
<ScrollBottomSheet
<ScrollBottomSheet<TActionSheetOptionsItem>
testID='action-sheet'
ref={bottomSheetRef}
componentType='FlatList'
@ -169,18 +171,11 @@ const ActionSheet = React.memo(
renderHandle={renderHandle}
onSettle={index => index === closedSnapIndex && toggleVisible()}
animatedPosition={animatedPosition.current}
containerStyle={
[
styles.container,
{ backgroundColor: themes[theme].focusedBackground },
(isLandscape || isTablet) && styles.bottomSheet
] as any
}
containerStyle={{ ...styles.container, ...bottomSheet, backgroundColor: themes[theme].focusedBackground }}
animationConfig={ANIMATION_CONFIG}
// FlatList props
data={data?.options}
data={data.options}
renderItem={renderItem}
keyExtractor={(item: any) => item.title}
keyExtractor={item => item.title}
style={{ backgroundColor: themes[theme].focusedBackground }}
contentContainerStyle={styles.content}
ItemSeparatorComponent={List.Separator}

14
app/containers/ActionSheet/Handle.tsx
View File

@ -3,9 +3,13 @@ import { View } from 'react-native';
import styles from './styles';
import { themes } from '../../constants/colors';
import { useTheme } from '../../theme';
export const Handle = React.memo(({ theme }: { theme: string }) => (
<View style={[styles.handle, { backgroundColor: themes[theme].focusedBackground }]} testID='action-sheet-handle'>
<View style={[styles.handleIndicator, { backgroundColor: themes[theme].auxiliaryText }]} />
</View>
));
export const Handle = React.memo(() => {
const { theme } = useTheme();
return (
<View style={[styles.handle, { backgroundColor: themes[theme].focusedBackground }]} testID='action-sheet-handle'>
<View style={[styles.handleIndicator, { backgroundColor: themes[theme].auxiliaryText }]} />
</View>
);
});

15
app/containers/ActionSheet/Item.tsx
View File

@ -3,23 +3,24 @@ import { Text, View } from 'react-native';
import { themes } from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons';
import { useTheme } from '../../theme';
import { Button } from './Button';
import styles from './styles';
interface IActionSheetItem {
export interface IActionSheetItem {
item: {
title: string;
icon: string;
danger: boolean;
testID: string;
onPress(): void;
right: Function;
danger?: boolean;
testID?: string;
onPress: () => void;
right?: Function;
};
theme: string;
hide(): void;
}
export const Item = React.memo(({ item, hide, theme }: IActionSheetItem) => {
export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
const { theme } = useTheme();
const onPress = () => {
hide();
item?.onPress();

30
app/containers/ActionSheet/Provider.tsx
View File

@ -1,14 +1,21 @@
import React, { ForwardedRef, forwardRef, useContext, useRef } from 'react';
import ActionSheet from './ActionSheet';
import { useTheme } from '../../theme';
export type TActionSheetOptionsItem = { title: string; icon: string; onPress: () => void };
export type TActionSheetOptions = {
options: TActionSheetOptionsItem[];
headerHeight: number;
customHeader: React.ReactElement | null;
hasCancel?: boolean;
};
interface IActionSheetProvider {
Provider: any;
Consumer: any;
showActionSheet: (item: TActionSheetOptions) => void;
hideActionSheet: () => void;
}
const context: IActionSheetProvider = React.createContext({
const context = React.createContext<IActionSheetProvider>({
showActionSheet: () => {},
hideActionSheet: () => {}
});
@ -17,17 +24,16 @@ export const useActionSheet = () => useContext(context);
const { Provider, Consumer } = context;
export const withActionSheet = (Component: any): any =>
forwardRef((props: any, ref: ForwardedRef<any>) => (
<Consumer>{(contexts: any) => <Component {...props} {...contexts} ref={ref} />}</Consumer>
export const withActionSheet = (Component: React.ComponentType<any>): typeof Component =>
forwardRef((props: typeof React.Component, ref: ForwardedRef<IActionSheetProvider>) => (
<Consumer>{(contexts: IActionSheetProvider) => <Component {...props} {...contexts} ref={ref} />}</Consumer>
));
export const ActionSheetProvider = React.memo(({ children }: { children: JSX.Element | JSX.Element[] }) => {
const ref: ForwardedRef<any> = useRef();
const { theme }: any = useTheme();
export const ActionSheetProvider = React.memo(({ children }: { children: React.ReactElement | React.ReactElement[] }) => {
const ref: ForwardedRef<IActionSheetProvider> = useRef(null);
const getContext = () => ({
showActionSheet: (options: any) => {
showActionSheet: (options: TActionSheetOptions) => {
ref.current?.showActionSheet(options);
},
hideActionSheet: () => {
@ -37,7 +43,7 @@ export const ActionSheetProvider = React.memo(({ children }: { children: JSX.Ele
return (
<Provider value={getContext()}>
<ActionSheet ref={ref} theme={theme}>
<ActionSheet ref={ref}>
<>{children}</>
</ActionSheet>
</Provider>

14
app/containers/ActivityIndicator.tsx
View File

@ -1,14 +1,11 @@
import React from 'react';
import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native';
import { useTheme } from '../theme';
import { themes } from '../constants/colors';
type TTheme = 'light' | 'dark' | 'black' | string;
interface IActivityIndicator extends ActivityIndicatorProps {
theme?: TTheme;
absolute?: boolean;
props?: object;
}
const styles = StyleSheet.create({
@ -27,8 +24,11 @@ const styles = StyleSheet.create({
}
});
const RCActivityIndicator = ({ theme = 'light', absolute, ...props }: IActivityIndicator) => (
<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
);
const RCActivityIndicator = ({ absolute, ...props }: IActivityIndicator): React.ReactElement => {
const { theme } = useTheme();
return (
<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
);
};
export default RCActivityIndicator;

15
app/containers/Avatar/index.tsx
View File

@ -37,6 +37,21 @@ class AvatarContainer extends React.Component<IAvatar, any> {
}
}
shouldComponentUpdate(nextProps: IAvatar, nextState: { avatarETag: string }) {
const { avatarETag } = this.state;
const { text, type } = this.props;
if (nextState.avatarETag !== avatarETag) {
return true;
}
if (nextProps.text !== text) {
return true;
}
if (nextProps.type !== type) {
return true;
}
return false;
}
componentWillUnmount() {
if (this.subscription?.unsubscribe) {
this.subscription.unsubscribe();

4
app/containers/Avatar/interfaces.ts
View File

@ -1,3 +1,5 @@
import React from 'react';
import { TGetCustomEmoji } from '../../definitions/IEmoji';
export interface IAvatar {
@ -9,7 +11,7 @@ export interface IAvatar {
size?: number;
borderRadius?: number;
type?: string;
children?: JSX.Element;
children?: React.ReactElement | null;
user?: {
id?: string;
token?: string;

22
app/containers/BackgroundContainer/index.tsx
View File

@ -1,13 +1,12 @@
import React from 'react';
import { ActivityIndicator, ImageBackground, StyleSheet, Text, View } from 'react-native';
import { withTheme } from '../../theme';
import { useTheme } from '../../theme';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
interface IBackgroundContainer {
text?: string;
theme?: string;
loading?: boolean;
}
@ -32,12 +31,15 @@ const styles = StyleSheet.create({
}
});
const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => (
<View style={styles.container}>
<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
{text && !loading ? <Text style={[styles.text, { color: themes[theme!].auxiliaryTintColor }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={styles.text} color={themes[theme!].auxiliaryTintColor} /> : null}
</View>
);
const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.ReactElement => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
{text && !loading ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
</View>
);
};
export default withTheme(BackgroundContainer);
export default BackgroundContainer;

12
app/containers/Check.tsx
View File

@ -3,11 +3,8 @@ import { StyleSheet } from 'react-native';
import { CustomIcon } from '../lib/Icons';
import { themes } from '../constants/colors';
import { useTheme } from '../theme';
interface ICheck {
style?: object;
theme: string;
}
const styles = StyleSheet.create({
icon: {
width: 22,
@ -16,8 +13,9 @@ const styles = StyleSheet.create({
}
});
const Check = React.memo(({ theme, style }: ICheck) => (
<CustomIcon style={[styles.icon, style]} color={themes[theme].tintColor} size={22} name='check' />
));
const Check = React.memo(() => {
const { theme } = useTheme();
return <CustomIcon style={styles.icon} color={themes[theme].tintColor} size={22} name='check' />;
});
export default Check;

46
app/containers/FormContainer.tsx
View File

@ -5,15 +5,15 @@ import { themes } from '../constants/colors';
import sharedStyles from '../views/Styles';
import scrollPersistTaps from '../utils/scrollPersistTaps';
import KeyboardView from '../presentation/KeyboardView';
import { useTheme } from '../theme';
import StatusBar from './StatusBar';
import AppVersion from './AppVersion';
import { isTablet } from '../utils/deviceInfo';
import SafeAreaView from './SafeAreaView';
interface IFormContainer extends ScrollViewProps {
theme: string;
testID: string;
children: React.ReactNode;
children: React.ReactElement | React.ReactElement[] | null;
}
const styles = StyleSheet.create({
@ -22,27 +22,31 @@ const styles = StyleSheet.create({
}
});
export const FormContainerInner = ({ children }: { children: React.ReactNode }): JSX.Element => (
export const FormContainerInner = ({ children }: { children: (React.ReactElement | null)[] }) => (
<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>{children}</View>
);
const FormContainer = ({ children, theme, testID, ...props }: IFormContainer): JSX.Element => (
<KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}>
<StatusBar />
<ScrollView
style={sharedStyles.container}
contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
{...scrollPersistTaps}
{...props}>
<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
{children}
<AppVersion theme={theme} />
</SafeAreaView>
</ScrollView>
</KeyboardView>
);
const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
const { theme } = useTheme();
return (
<KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }}
contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128}>
<StatusBar />
<ScrollView
style={sharedStyles.container}
contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
{...scrollPersistTaps}
{...props}>
<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
{children}
<AppVersion theme={theme} />
</SafeAreaView>
</ScrollView>
</KeyboardView>
);
};
export default FormContainer;

43
app/containers/Header/index.tsx
View File

@ -5,12 +5,11 @@ import { StyleSheet, View } from 'react-native';
import { themes } from '../../constants/colors';
import { themedHeader } from '../../utils/navigation';
import { isIOS, isTablet } from '../../utils/deviceInfo';
import { withTheme } from '../../theme';
import { useTheme } from '../../theme';
// Get from https://github.com/react-navigation/react-navigation/blob/master/packages/stack/src/views/Header/HeaderSegment.tsx#L69
export const headerHeight = isIOS ? 44 : 56;
export const getHeaderHeight = (isLandscape: boolean) => {
export const getHeaderHeight = (isLandscape: boolean): number => {
if (isIOS) {
if (isLandscape && !isTablet) {
return 32;
@ -28,7 +27,13 @@ interface IHeaderTitlePosition {
numIconsRight: number;
}
export const getHeaderTitlePosition = ({ insets, numIconsRight }: IHeaderTitlePosition) => ({
export const getHeaderTitlePosition = ({
insets,
numIconsRight
}: IHeaderTitlePosition): {
left: number;
right: number;
} => ({
left: insets.left + 60,
right: insets.right + Math.max(45 * numIconsRight, 15)
});
@ -43,20 +48,22 @@ const styles = StyleSheet.create({
});
interface IHeader {
theme: string;
headerLeft(): void;
headerTitle(): void;
headerRight(): void;
headerLeft: () => React.ReactElement | null;
headerTitle: () => React.ReactElement;
headerRight: () => React.ReactElement | null;
}
const Header = ({ theme, headerLeft, headerTitle, headerRight }: IHeader) => (
<SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}>
<View style={[styles.container, { ...themedHeader(theme).headerStyle }]}>
{headerLeft ? headerLeft() : null}
{headerTitle ? headerTitle() : null}
{headerRight ? headerRight() : null}
</View>
</SafeAreaView>
);
const Header = ({ headerLeft, headerTitle, headerRight }: IHeader): React.ReactElement => {
const { theme } = useTheme();
return (
<SafeAreaView style={{ backgroundColor: themes[theme].headerBackground }} edges={['top', 'left', 'right']}>
<View style={[styles.container, { ...themedHeader(theme).headerStyle }]}>
{headerLeft ? headerLeft() : null}
{headerTitle ? headerTitle() : null}
{headerRight ? headerRight() : null}
</View>
</SafeAreaView>
);
};
export default withTheme(Header);
export default Header;

40
app/containers/HeaderButton/Common.tsx
View File

@ -6,20 +6,22 @@ import Container from './HeaderButtonContainer';
import Item from './HeaderButtonItem';
interface IHeaderButtonCommon {
navigation: any;
onPress?(): void;
navigation?: any; // TODO: Evaluate proper type
onPress?: () => void;
testID?: string;
}
// Left
export const Drawer = React.memo(({ navigation, testID, ...props }: Partial<IHeaderButtonCommon>) => (
<Container left>
<Item iconName='hamburguer' onPress={() => navigation.toggleDrawer()} testID={testID} {...props} />
</Container>
));
export const Drawer = React.memo(
({ navigation, testID, onPress = () => navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => (
<Container left>
<Item iconName='hamburguer' onPress={onPress} testID={testID} {...props} />
</Container>
)
);
export const CloseModal = React.memo(
({ navigation, testID, onPress = () => navigation.pop(), ...props }: IHeaderButtonCommon) => (
({ navigation, testID, onPress = () => navigation?.pop(), ...props }: IHeaderButtonCommon) => (
<Container left>
<Item iconName='close' onPress={onPress} testID={testID} {...props} />
</Container>
@ -29,9 +31,9 @@ export const CloseModal = React.memo(
export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
<Container left>
{isIOS ? (
<Item title={I18n.t('Cancel')} onPress={onPress!} testID={testID} />
<Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
) : (
<Item iconName='close' onPress={onPress!} testID={testID} />
<Item iconName='close' onPress={onPress} testID={testID} />
)}
</Container>
));
@ -39,22 +41,24 @@ export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButto
// Right
export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
<Container>
<Item iconName='kebab' onPress={onPress!} testID={testID} />
<Item iconName='kebab' onPress={onPress} testID={testID} />
</Container>
));
export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
export const Download = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
<Container>
<Item iconName='download' onPress={onPress!} testID={testID} {...props} />
<Item iconName='download' onPress={onPress} testID={testID} {...props} />
</Container>
));
export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
export const Preferences = React.memo(({ onPress, testID, ...props }: IHeaderButtonCommon) => (
<Container>
<Item iconName='settings' onPress={onPress!} testID={testID} {...props} />
<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
</Container>
));
export const Legal = React.memo(({ navigation, testID }: Partial<IHeaderButtonCommon>) => (
<More onPress={() => navigation.navigate('LegalView')} testID={testID} />
));
export const Legal = React.memo(
({ navigation, testID, onPress = () => navigation?.navigate('LegalView') }: IHeaderButtonCommon) => (
<More onPress={onPress} testID={testID} />
)
);

4
app/containers/HeaderButton/HeaderButtonContainer.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { StyleSheet, View } from 'react-native';
interface IHeaderButtonContainer {
children: React.ReactNode;
children?: React.ReactElement | (React.ReactElement | null)[] | null;
left?: boolean;
}
@ -20,7 +20,7 @@ const styles = StyleSheet.create({
}
});
const Container = ({ children, left = false }: IHeaderButtonContainer) => (
const Container = ({ children, left = false }: IHeaderButtonContainer): React.ReactElement => (
<View style={[styles.container, left ? styles.left : styles.right]}>{children}</View>
);

34
app/containers/HeaderButton/HeaderButtonItem.tsx
View File

@ -3,16 +3,15 @@ import { Platform, StyleSheet, Text } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import { CustomIcon } from '../../lib/Icons';
import { withTheme } from '../../theme';
import { useTheme } from '../../theme';
import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
interface IHeaderButtonItem {
title?: string;
iconName?: string;
onPress: <T>(arg: T) => void;
onPress?: <T>(arg: T) => void;
testID?: string;
theme?: string;
badge?(): void;
}
@ -40,19 +39,22 @@ const styles = StyleSheet.create({
}
});
const Item = ({ title, iconName, onPress, testID, theme, badge }: IHeaderButtonItem) => (
<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
<>
{iconName ? (
<CustomIcon name={iconName} size={24} color={themes[theme!].headerTintColor} />
) : (
<Text style={[styles.title, { color: themes[theme!].headerTintColor }]}>{title}</Text>
)}
{badge ? badge() : null}
</>
</Touchable>
);
const Item = ({ title, iconName, onPress, testID, badge }: IHeaderButtonItem): React.ReactElement => {
const { theme } = useTheme();
return (
<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
<>
{iconName ? (
<CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
) : (
<Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
)}
{badge ? badge() : null}
</>
</Touchable>
);
};
Item.displayName = 'HeaderButton.Item';
export default withTheme(Item);
export default Item;

2
app/containers/HeaderButton/HeaderButtonItemBadge.tsx
View File

@ -15,6 +15,6 @@ const styles = StyleSheet.create({
}
});
export const Badge = ({ ...props }) => <UnreadBadge {...props} style={styles.badgeContainer} small />;
export const Badge = ({ ...props }): React.ReactElement => <UnreadBadge {...props} style={styles.badgeContainer} small />;
export default Badge;

21
app/containers/InAppNotification/NotifierComponent.tsx
View File

@ -14,9 +14,18 @@ import { ROW_HEIGHT } from '../../presentation/RoomItem';
import { goRoom } from '../../utils/goRoom';
import Navigation from '../../lib/Navigation';
import { useOrientation } from '../../dimensions';
import { IApplicationState, ISubscription, SubscriptionType } from '../../definitions';
interface INotifierComponent {
notification: object;
export interface INotifierComponent {
notification: {
text: string;
payload: {
sender: { username: string };
type: SubscriptionType;
} & Pick<ISubscription, '_id' | 'name' | 'rid' | 'prid'>;
title: string;
avatar: string;
};
isMasterDetail: boolean;
}
@ -67,15 +76,15 @@ const styles = StyleSheet.create({
const hideNotification = () => Notifier.hideNotification();
const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifierComponent) => {
const { theme }: any = useTheme();
const { theme } = useTheme();
const insets = useSafeAreaInsets();
const { isLandscape } = useOrientation();
const { text, payload }: any = notification;
const { text, payload } = notification;
const { type, rid } = payload;
const name = type === 'd' ? payload.sender.username : payload.name;
// if sub is not on local database, title and avatar will be null, so we use payload from notification
const { title = name, avatar = name }: any = notification;
const { title = name, avatar = name } = notification;
const onPress = () => {
const { prid, _id } = payload;
@ -133,7 +142,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
);
});
const mapStateToProps = (state: any) => ({
const mapStateToProps = (state: IApplicationState) => ({
isMasterDetail: state.app.isMasterDetail
});

10
app/containers/InAppNotification/index.tsx
View File

@ -3,16 +3,18 @@ import { Easing, Notifier, NotifierRoot } from 'react-native-notifier';
import { connect } from 'react-redux';
import { dequal } from 'dequal';
import NotifierComponent from './NotifierComponent';
import NotifierComponent, { INotifierComponent } from './NotifierComponent';
import EventEmitter from '../../utils/events';
import Navigation from '../../lib/Navigation';
import { getActiveRoute } from '../../utils/navigation';
import { IApplicationState } from '../../definitions';
import { IRoom } from '../../reducers/room';
export const INAPP_NOTIFICATION_EMITTER = 'NotificationInApp';
const InAppNotification = memo(
({ rooms, appState }: { rooms: any; appState: string }) => {
const show = (notification: any) => {
({ rooms, appState }: { rooms: IRoom['rooms']; appState: string }) => {
const show = (notification: INotifierComponent['notification']) => {
if (appState !== 'foreground') {
return;
}
@ -46,7 +48,7 @@ const InAppNotification = memo(
(prevProps, nextProps) => dequal(prevProps.rooms, nextProps.rooms)
);
const mapStateToProps = (state: any) => ({
const mapStateToProps = (state: IApplicationState) => ({
rooms: state.room.rooms,
appState: state.app.ready && state.app.foreground ? 'foreground' : 'background'
});

2
app/containers/List/ListContainer.tsx
View File

@ -11,7 +11,7 @@ const styles = StyleSheet.create({
});
interface IListContainer {
children: React.ReactNode;
children: (React.ReactElement | null)[] | React.ReactElement | null;
testID?: string;
}
const ListContainer = React.memo(({ children, ...props }: IListContainer) => (

23
app/containers/List/ListHeader.tsx
View File

@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
import I18n from '../../i18n';
import { withTheme } from '../../theme';
import { useTheme } from '../../theme';
import { PADDING_HORIZONTAL } from './constants';
const styles = StyleSheet.create({
@ -20,18 +20,21 @@ const styles = StyleSheet.create({
interface IListHeader {
title: string;
theme?: string;
translateTitle?: boolean;
}
const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
<View style={styles.container}>
<Text style={[styles.title, { color: themes[theme!].infoText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
</View>
));
const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
</View>
);
});
ListHeader.displayName = 'List.Header';
export default withTheme(ListHeader);
export default ListHeader;

19
app/containers/List/ListIcon.tsx
View File

@ -3,11 +3,10 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { themes } from '../../constants/colors';
import { CustomIcon } from '../../lib/Icons';
import { withTheme } from '../../theme';
import { useTheme } from '../../theme';
import { ICON_SIZE } from './constants';
interface IListIcon {
theme?: string;
name: string;
color?: string;
style?: StyleProp<ViewStyle>;
@ -21,12 +20,16 @@ const styles = StyleSheet.create({
}
});
const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => (
<View style={[styles.icon, style]}>
<CustomIcon name={name} color={color ?? themes[theme!].auxiliaryText} size={ICON_SIZE} testID={testID} />
</View>
));
const ListIcon = React.memo(({ name, color, style, testID }: IListIcon) => {
const { theme } = useTheme();
return (
<View style={[styles.icon, style]}>
<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={ICON_SIZE} testID={testID} />
</View>
);
});
ListIcon.displayName = 'List.Icon';
export default withTheme(ListIcon);
export default ListIcon;

20
app/containers/List/ListInfo.tsx
View File

@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
import { useTheme } from '../../theme';
import { PADDING_HORIZONTAL } from './constants';
import I18n from '../../i18n';
@ -18,18 +18,20 @@ const styles = StyleSheet.create({
}
});
interface IListHeader {
interface IListInfo {
info: string;
theme?: string;
translateInfo?: boolean;
}
const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme!].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View>
));
const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View>
);
});
ListInfo.displayName = 'List.Info';
export default withTheme(ListInfo);
export default ListInfo;

92
app/containers/List/ListItem.tsx
View File

@ -4,11 +4,11 @@ import { I18nManager, StyleSheet, Text, View } from 'react-native';
import Touch from '../../utils/touch';
import { themes } from '../../constants/colors';
import sharedStyles from '../../views/Styles';
import { withTheme } from '../../theme';
import { useTheme } from '../../theme';
import I18n from '../../i18n';
import { Icon } from '.';
import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
import { withDimensions } from '../../dimensions';
import { useDimensions } from '../../dimensions';
import { CustomIcon } from '../../lib/Icons';
const styles = StyleSheet.create({
@ -59,13 +59,12 @@ interface IListItemContent {
left?: () => JSX.Element | null;
right?: () => JSX.Element | null;
disabled?: boolean;
theme: string;
testID?: string;
theme?: string;
color?: string;
translateTitle?: boolean;
translateSubtitle?: boolean;
showActionIndicator?: boolean;
fontScale?: number;
alert?: boolean;
}
@ -78,78 +77,85 @@ const Content = React.memo(
left,
right,
color,
theme,
fontScale,
alert,
translateTitle = true,
translateSubtitle = true,
showActionIndicator = false
}: IListItemContent) => (
<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale! }]} testID={testID}>
{left ? <View style={styles.leftContainer}>{left()}</View> : null}
<View style={styles.textContainer}>
<View style={styles.textAlertContainer}>
<Text style={[styles.title, { color: color || themes[theme!].titleText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
{alert ? (
<CustomIcon style={[styles.alertIcon, { color: themes[theme!].dangerColor }]} size={ICON_SIZE} name='info' />
showActionIndicator = false,
theme
}: IListItemContent) => {
const { fontScale } = useDimensions();
return (
<View style={[styles.container, disabled && styles.disabled, { height: BASE_HEIGHT * fontScale }]} testID={testID}>
{left ? <View style={styles.leftContainer}>{left()}</View> : null}
<View style={styles.textContainer}>
<View style={styles.textAlertContainer}>
<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title}
</Text>
{alert ? (
<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
) : null}
</View>
{subtitle ? (
<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
{translateSubtitle ? I18n.t(subtitle) : subtitle}
</Text>
) : null}
</View>
{subtitle ? (
<Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
{translateSubtitle ? I18n.t(subtitle) : subtitle}
</Text>
{right || showActionIndicator ? (
<View style={styles.rightContainer}>
{right ? right() : null}
{showActionIndicator ? <Icon name='chevron-right' style={styles.actionIndicator} /> : null}
</View>
) : null}
</View>
{right || showActionIndicator ? (
<View style={styles.rightContainer}>
{right ? right() : null}
{showActionIndicator ? <Icon name='chevron-right' style={styles.actionIndicator} /> : null}
</View>
) : null}
</View>
)
);
}
);
interface IListButtonPress {
onPress?: Function;
interface IListButtonPress extends IListItemButton {
onPress: Function;
}
interface IListItemButton extends IListButtonPress {
interface IListItemButton {
title?: string;
disabled?: boolean;
theme?: string;
theme: string;
backgroundColor?: string;
underlayColor?: string;
}
const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
<Touch
onPress={() => onPress!(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme!].backgroundColor }}
onPress={() => onPress(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
underlayColor={underlayColor}
enabled={!props.disabled}
theme={props.theme!}>
theme={props.theme}>
<Content {...props} />
</Touch>
));
interface IListItem extends IListItemContent, IListButtonPress {
interface IListItem extends Omit<IListItemContent, 'theme'>, Omit<IListItemButton, 'theme'> {
backgroundColor?: string;
onPress?: Function;
}
const ListItem = React.memo<IListItem>(({ ...props }: IListItem) => {
const ListItem = React.memo(({ ...props }: IListItem) => {
const { theme } = useTheme();
if (props.onPress) {
return <Button {...props} />;
const { onPress } = props;
return <Button {...props} theme={theme} onPress={onPress} />;
}
return (
<View style={{ backgroundColor: props.backgroundColor || themes[props.theme!].backgroundColor }}>
<Content {...props} />
<View style={{ backgroundColor: props.backgroundColor || themes[theme].backgroundColor }}>
<Content {...props} theme={theme} />
</View>
);
});
ListItem.displayName = 'List.Item';
export default withTheme(withDimensions(ListItem));
export default ListItem;

5
app/containers/List/ListSection.tsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { withTheme } from '../../theme';
import { Header } from '.';
const styles = StyleSheet.create({
@ -11,7 +10,7 @@ const styles = StyleSheet.create({
});
interface IListSection {
children: React.ReactNode;
children: (React.ReactElement | null)[] | React.ReactElement | null;
title?: string;
translateTitle?: boolean;
}
@ -25,4 +24,4 @@ const ListSection = React.memo(({ children, title, translateTitle }: IListSectio
ListSection.displayName = 'List.Section';
export default withTheme(ListSection);
export default ListSection;

13
app/containers/List/ListSeparator.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { StyleSheet, View, ViewStyle } from 'react-native';
import { themes } from '../../constants/colors';
import { withTheme } from '../../theme';
import { useTheme } from '../../theme';
const styles = StyleSheet.create({
separator: {
@ -12,13 +12,14 @@ const styles = StyleSheet.create({
interface IListSeparator {
style?: ViewStyle;
theme?: string;
}
const ListSeparator = React.memo(({ style, theme }: IListSeparator) => (
<View style={[styles.separator, style, { backgroundColor: themes[theme!].separatorColor }]} />
));
const ListSeparator = React.memo(({ style }: IListSeparator) => {
const { theme } = useTheme();
return <View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />;
});
ListSeparator.displayName = 'List.Separator';
export default withTheme(ListSeparator);
export default ListSeparator;

16
app/containers/Loading.tsx
View File

@ -22,15 +22,20 @@ interface ILoadingProps {
theme?: string;
}
class Loading extends React.PureComponent<ILoadingProps, any> {
interface ILoadingState {
scale: Animated.Value;
opacity: Animated.Value;
}
class Loading extends React.PureComponent<ILoadingProps, ILoadingState> {
state = {
scale: new Animated.Value(1),
opacity: new Animated.Value(0)
};
private opacityAnimation: any;
private opacityAnimation?: Animated.CompositeAnimation;
private scaleAnimation: any;
private scaleAnimation?: Animated.CompositeAnimation;
componentDidMount() {
const { opacity, scale } = this.state;
@ -61,7 +66,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
}
}
componentDidUpdate(prevProps: any) {
componentDidUpdate(prevProps: ILoadingProps) {
const { visible } = this.props;
if (visible && visible !== prevProps.visible) {
this.startAnimations();
@ -107,8 +112,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
<Animated.View
style={[
{
// @ts-ignore
...StyleSheet.absoluteFill,
...StyleSheet.absoluteFillObject,
backgroundColor: themes[theme!].backdropColor,
opacity: opacityAnimation
}

89
app/containers/LoginServices.tsx
View File

@ -3,6 +3,7 @@ import { Animated, Easing, Linking, StyleSheet, Text, View } from 'react-native'
import { connect } from 'react-redux';
import { Base64 } from 'js-base64';
import * as AppleAuthentication from 'expo-apple-authentication';
import { StackNavigationProp } from '@react-navigation/stack';
import { withTheme } from '../theme';
import sharedStyles from '../views/Styles';
@ -15,6 +16,9 @@ import random from '../utils/random';
import { events, logEvent } from '../utils/log';
import RocketChat from '../lib/rocketchat';
import { CustomIcon } from '../lib/Icons';
import { IServices } from '../selectors/login';
import { OutsideParamList } from '../stacks/types';
import { IApplicationState } from '../definitions';
const BUTTON_HEIGHT = 48;
const SERVICE_HEIGHT = 58;
@ -58,31 +62,40 @@ const styles = StyleSheet.create({
});
interface IOpenOAuth {
url?: string;
url: string;
ssoToken?: string;
authType?: string;
}
interface IService {
interface IItemService {
name: string;
service: string;
authType: string;
buttonColor: string;
buttonLabelColor: string;
clientConfig: { provider: string };
serverURL: string;
authorizePath: string;
clientId: string;
scope: string;
}
interface IOauthProvider {
[key: string]: () => void;
facebook: () => void;
github: () => void;
gitlab: () => void;
google: () => void;
linkedin: () => void;
'meteor-developer': () => void;
twitter: () => void;
wordpress: () => void;
}
interface ILoginServicesProps {
navigation: any;
navigation: StackNavigationProp<OutsideParamList>;
server: string;
services: {
facebook: { clientId: string };
github: { clientId: string };
gitlab: { clientId: string };
google: { clientId: string };
linkedin: { clientId: string };
'meteor-developer': { clientId: string };
wordpress: { clientId: string; serverURL: string };
};
services: IServices;
Gitlab_URL: string;
CAS_enabled: boolean;
CAS_login_url: string;
@ -90,12 +103,13 @@ interface ILoginServicesProps {
theme: string;
}
class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
private _animation: any;
interface ILoginServicesState {
collapsed: boolean;
servicesHeight: Animated.Value;
}
static defaultProps = {
separator: true
};
class LoginServices extends React.PureComponent<ILoginServicesProps, ILoginServicesState> {
private _animation?: Animated.CompositeAnimation | void;
state = {
collapsed: true,
@ -194,7 +208,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
this.openOAuth({ url: `${endpoint}${params}` });
};
onPressCustomOAuth = (loginService: any) => {
onPressCustomOAuth = (loginService: IItemService) => {
logEvent(events.ENTER_WITH_CUSTOM_OAUTH);
const { server } = this.props;
const { serverURL, authorizePath, clientId, scope, service } = loginService;
@ -207,7 +221,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
this.openOAuth({ url });
};
onPressSaml = (loginService: any) => {
onPressSaml = (loginService: IItemService) => {
logEvent(events.ENTER_WITH_SAML);
const { server } = this.props;
const { clientConfig } = loginService;
@ -234,7 +248,6 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
AppleAuthentication.AppleAuthenticationScope.EMAIL
]
});
await RocketChat.loginOAuthOrSso({ fullName, email, identityToken });
} catch {
logEvent(events.ENTER_WITH_APPLE_F);
@ -243,7 +256,12 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
getOAuthState = (loginStyle = LOGIN_STYPE_POPUP) => {
const credentialToken = random(43);
let obj: any = { loginStyle, credentialToken, isCordova: true };
let obj: {
loginStyle: string;
credentialToken: string;
isCordova: boolean;
redirectUrl?: string;
} = { loginStyle, credentialToken, isCordova: true };
if (loginStyle === LOGIN_STYPE_REDIRECT) {
obj = {
...obj,
@ -263,12 +281,11 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
if (this._animation) {
this._animation.stop();
}
// @ts-ignore
this._animation = Animated.timing(servicesHeight, {
toValue: height,
duration: 300,
// @ts-ignore
easing: Easing.easeOutCubic
easing: Easing.inOut(Easing.quad),
useNativeDriver: true
}).start();
};
@ -281,11 +298,11 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
} else {
this.transitionServicesTo(SERVICES_COLLAPSED_HEIGHT);
}
this.setState((prevState: any) => ({ collapsed: !prevState.collapsed }));
this.setState((prevState: ILoginServicesState) => ({ collapsed: !prevState.collapsed }));
};
getSocialOauthProvider = (name: string) => {
const oauthProviders: any = {
const oauthProviders: IOauthProvider = {
facebook: this.onPressFacebook,
github: this.onPressGithub,
gitlab: this.onPressGitlab,
@ -324,7 +341,7 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
return null;
};
renderItem = (service: IService) => {
renderItem = (service: IItemService) => {
const { CAS_enabled, theme } = this.props;
let { name } = service;
name = name === 'meteor-developer' ? 'meteor' : name;
@ -401,26 +418,28 @@ class LoginServices extends React.PureComponent<ILoginServicesProps, any> {
if (length > 3 && separator) {
return (
<>
<Animated.View style={style}>{Object.values(services).map((service: any) => this.renderItem(service))}</Animated.View>
<Animated.View style={style}>
{Object.values(services).map((service: IItemService) => this.renderItem(service))}
</Animated.View>
{this.renderServicesSeparator()}
</>
);
}
return (
<>
{Object.values(services).map((service: any) => this.renderItem(service))}
{Object.values(services).map((service: IItemService) => this.renderItem(service))}
{this.renderServicesSeparator()}
</>
);
}
}
const mapStateToProps = (state: any) => ({
const mapStateToProps = (state: IApplicationState) => ({
server: state.server.server,
Gitlab_URL: state.settings.API_Gitlab_URL,
CAS_enabled: state.settings.CAS_enabled,
CAS_login_url: state.settings.CAS_login_url,
services: state.login.services
Gitlab_URL: state.settings.API_Gitlab_URL as string,
CAS_enabled: state.settings.CAS_enabled as boolean,
CAS_login_url: state.settings.CAS_login_url as string,
services: state.login.services as IServices
});
export default connect(mapStateToProps)(withTheme(LoginServices)) as any;
export default connect(mapStateToProps)(withTheme(LoginServices));

26
app/containers/MessageActions/index.tsx
View File

@ -15,19 +15,12 @@ import { showConfirmationAlert } from '../../utils/info';
import { useActionSheet } from '../ActionSheet';
import Header, { HEADER_HEIGHT } from './Header';
import events from '../../utils/log/events';
import { TMessageModel } from '../../definitions/IMessage';
import { ILoggedUser, TAnyMessageModel, TSubscriptionModel } from '../../definitions';
interface IMessageActions {
room: {
rid: string;
autoTranslateLanguage: any;
autoTranslate: any;
reactWhenReadOnly: any;
};
tmid: string;
user: {
id: string | number;
};
export interface IMessageActions {
room: TSubscriptionModel;
tmid?: string;
user: Pick<ILoggedUser, 'id'>;
editInit: Function;
reactionInit: Function;
onReactionPress: Function;
@ -270,8 +263,11 @@ const MessageActions = React.memo(
}
};
const handleToggleTranslation = async (message: TMessageModel) => {
const handleToggleTranslation = async (message: TAnyMessageModel) => {
try {
if (!room.autoTranslateLanguage) {
return;
}
const db = database.active;
await db.write(async () => {
await message.update(m => {
@ -321,7 +317,7 @@ const MessageActions = React.memo(
});
};
const getOptions = (message: TMessageModel) => {
const getOptions = (message: TAnyMessageModel) => {
let options: any = [];
// Reply
@ -447,7 +443,7 @@ const MessageActions = React.memo(
return options;
};
const showMessageActions = async (message: TMessageModel) => {
const showMessageActions = async (message: TAnyMessageModel) => {
logEvent(events.ROOM_SHOW_MSG_ACTIONS);
await getPermissions();
showActionSheet({

2
app/containers/MessageBox/CommandsPreview/Item.tsx
View File

@ -34,7 +34,7 @@ const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
resizeMode={FastImage.resizeMode.cover}
onLoadStart={() => setLoading(true)}
onLoad={() => setLoading(false)}>
{loading ? <ActivityIndicator theme={theme} /> : null}
{loading ? <ActivityIndicator /> : null}
</FastImage>
) : (
<CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} />

3
app/containers/MessageBox/CommandsPreview/index.tsx
View File

@ -6,9 +6,10 @@ import Item from './Item';
import styles from '../styles';
import { themes } from '../../../constants/colors';
import { withTheme } from '../../../theme';
import { IPreviewItem } from '../../../definitions';
interface IMessageBoxCommandsPreview {
commandPreview: [];
commandPreview: IPreviewItem[];
showCommandPreview: boolean;
theme?: string;
}

56
app/containers/MessageBox/getMentionRegexp.test.js Normal file
View File

@ -0,0 +1,56 @@
import getMentionRegexp from './getMentionRegexp';
const regexp = getMentionRegexp();
describe('getMentionRegexpUser', function () {
test('removing query text on user suggestion autocomplete (latin)', () => {
const message = 'Hey @test123';
expect(message.replace(regexp, '')).toBe('Hey @');
});
test('removing query text on user suggestion autocomplete (arabic)', () => {
const message = 'Hey @اختبار123';
expect(message.replace(regexp, '')).toBe('Hey @');
});
test('removing query text on user suggestion autocomplete (russian)', () => {
const message = 'Hey @тест123';
expect(message.replace(regexp, '')).toBe('Hey @');
});
test('removing query text on user suggestion autocomplete (chinese trad)', () => {
const message = 'Hey @測試123';
expect(message.replace(regexp, '')).toBe('Hey @');
});
test('removing query text on user suggestion autocomplete (japanese)', () => {
const message = 'Hey @テスト123';
expect(message.replace(regexp, '')).toBe('Hey @');
});
test('removing query text on user suggestion autocomplete (special characters in query)', () => {
const message = "Hey @'=test123";
expect(message.replace(regexp, '')).toBe('Hey @');
});
});
describe('getMentionRegexpEmoji', function () {
test('removing query text on emoji suggestion autocomplete ', () => {
const message = 'Hey :smiley';
expect(message.replace(regexp, '')).toBe('Hey :');
});
});
describe('getMentionRegexpCommand', function () {
test('removing query text on emoji suggestion autocomplete ', () => {
const message = '/archive';
expect(message.replace(regexp, '')).toBe('/');
});
});
describe('getMentionRegexpRoom', function () {
test('removing query text on emoji suggestion autocomplete ', () => {
const message = 'Check #general';
expect(message.replace(regexp, '')).toBe('Check #');
});
});

4
app/containers/MessageBox/getMentionRegexp.ts Normal file
View File

@ -0,0 +1,4 @@
// Match query string from the message to replace it with the suggestion
const getMentionRegexp = (): any => /[^@:#/!]*$/;
export default getMentionRegexp;

36
app/containers/MessageBox/index.tsx
View File

@ -9,7 +9,7 @@ import { Q } from '@nozbe/watermelondb';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { generateTriggerId } from '../../lib/methods/actions';
import TextInput from '../../presentation/TextInput';
import TextInput, { IThemedTextInput } from '../../presentation/TextInput';
import { userTyping as userTypingAction } from '../../actions/room';
import RocketChat from '../../lib/rocketchat';
import styles from './styles';
@ -31,6 +31,7 @@ import { isAndroid, isTablet } from '../../utils/deviceInfo';
import { canUploadFile } from '../../utils/media';
import EventEmiter from '../../utils/events';
import { KEY_COMMAND, handleCommandShowUpload, handleCommandSubmit, handleCommandTyping } from '../../commands';
import getMentionRegexp from './getMentionRegexp';
import Mentions from './Mentions';
import MessageboxContext from './Context';
import {
@ -49,6 +50,7 @@ import { sanitizeLikeString } from '../../lib/database/utils';
import { CustomIcon } from '../../lib/Icons';
import { IMessage } from '../../definitions/IMessage';
import { forceJpgExtension } from './forceJpgExtension';
import { IPreviewItem, IUser } from '../../definitions';
if (isAndroid) {
require('./EmojiKeyboard');
@ -72,7 +74,7 @@ const videoPickerConfig = {
mediaType: 'video'
};
interface IMessageBoxProps {
export interface IMessageBoxProps {
rid: string;
baseUrl: string;
message: IMessage;
@ -80,12 +82,7 @@ interface IMessageBoxProps {
editing: boolean;
threadsEnabled: boolean;
isFocused(): boolean;
user: {
id: string;
_id: string;
username: string;
token: string;
};
user: IUser;
roomType: string;
tmid: string;
replyWithMention: boolean;
@ -118,7 +115,7 @@ interface IMessageBoxState {
showSend: any;
recording: boolean;
trackingType: string;
commandPreview: [];
commandPreview: IPreviewItem[];
showCommandPreview: boolean;
command: {
appId?: any;
@ -493,7 +490,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
const msg = this.text;
const { start, end } = this.selection;
const cursor = Math.max(start, end);
const regexp = /([a-z0-9._-]+)$/im;
const regexp = getMentionRegexp();
let result = msg.substr(0, cursor).replace(regexp, '');
// Remove the ! after select the canned response
if (trackingType === MENTIONS_TRACKING_TYPE_CANNED) {
@ -609,7 +606,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
getCannedResponses = debounce(async (text?: string) => {
const res = await RocketChat.getListCannedResponse({ text });
this.setState({ mentions: res?.cannedResponses || [], mentionLoading: false });
this.setState({ mentions: res.success ? res.cannedResponses : [], mentionLoading: false });
}, 500);
focus = () => {
@ -642,12 +639,12 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
}, 1000);
};
setCommandPreview = async (command: any, name: string, params: any) => {
setCommandPreview = async (command: any, name: string, params: string) => {
const { rid } = this.props;
try {
const { success, preview } = await RocketChat.getCommandPreview(name, rid, params);
if (success) {
return this.setState({ commandPreview: preview?.items, showCommandPreview: true, command });
const response = await RocketChat.getCommandPreview(name, rid, params);
if (response.success) {
return this.setState({ commandPreview: response.preview?.items || [], showCommandPreview: true, command });
}
} catch (e) {
log(e);
@ -891,7 +888,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
const messageWithoutCommand = message.replace(/([^\s]+)/, '').trim();
const [{ appId }] = slashCommand;
const triggerId = generateTriggerId(appId);
RocketChat.runSlashCommand(command, roomId, messageWithoutCommand, triggerId, tmid || messageTmid);
await RocketChat.runSlashCommand(command, roomId, messageWithoutCommand, triggerId, tmid || messageTmid);
replyCancel();
} catch (e) {
logEvent(events.COMMAND_RUN_F);
@ -926,8 +923,8 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
let msg = `[ ](${permalink}) `;
// if original message wasn't sent by current user and neither from a direct room
if (user.username !== replyingMessage.u.username && roomType !== 'd' && replyWithMention) {
msg += `@${replyingMessage.u.username} `;
if (user.username !== replyingMessage?.u?.username && roomType !== 'd' && replyWithMention) {
msg += `@${replyingMessage?.u?.username} `;
}
msg = `${msg} ${message}`;
@ -1041,7 +1038,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
tmid
} = this.props;
const isAndroidTablet =
const isAndroidTablet: Partial<IThemedTextInput> =
isTablet && isAndroid
? {
multiline: false,
@ -1093,7 +1090,6 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
<TextInput
ref={component => (this.component = component)}
style={[styles.textBoxInput, { color: themes[theme].bodyText }]}
// @ts-ignore
returnKeyType='default'
keyboardType='twitter'
blurOnSubmit={false}

21
app/containers/MessageErrorActions.tsx
View File

@ -1,4 +1,5 @@
import { forwardRef, useImperativeHandle } from 'react';
import Model from '@nozbe/watermelondb/Model';
import RocketChat from '../lib/rocketchat';
import database from '../lib/database';
@ -6,18 +7,20 @@ import protectedFunction from '../lib/methods/helpers/protectedFunction';
import { useActionSheet } from './ActionSheet';
import I18n from '../i18n';
import log from '../utils/log';
import { TMessageModel } from '../definitions';
const MessageErrorActions = forwardRef(({ tmid }: any, ref): any => {
const MessageErrorActions = forwardRef(({ tmid }: { tmid: string }, ref) => {
// TODO - remove this any after merge ActionSheet evaluate
const { showActionSheet }: any = useActionSheet();
const handleResend = protectedFunction(async (message: any) => {
const handleResend = protectedFunction(async (message: TMessageModel) => {
await RocketChat.resendMessage(message, tmid);
});
const handleDelete = async (message: any) => {
const handleDelete = async (message: TMessageModel) => {
try {
const db = database.active;
const deleteBatch: any = [];
const deleteBatch: Model[] = [];
const msgCollection = db.get('messages');
const threadCollection = db.get('threads');
@ -38,7 +41,7 @@ const MessageErrorActions = forwardRef(({ tmid }: any, ref): any => {
const msg = await msgCollection.find(tmid);
if (msg?.tcount && msg.tcount <= 1) {
deleteBatch.push(
msg.prepareUpdate((m: any) => {
msg.prepareUpdate(m => {
m.tcount = null;
m.tlm = null;
})
@ -53,8 +56,10 @@ const MessageErrorActions = forwardRef(({ tmid }: any, ref): any => {
}
} else {
deleteBatch.push(
msg.prepareUpdate((m: any) => {
m.tcount -= 1;
msg.prepareUpdate(m => {
if (m.tcount) {
m.tcount -= 1;
}
})
);
}
@ -70,7 +75,7 @@ const MessageErrorActions = forwardRef(({ tmid }: any, ref): any => {
}
};
const showMessageErrorActions = (message: any) => {
const showMessageErrorActions = (message: TMessageModel) => {
showActionSheet({
options: [
{

6
app/containers/Passcode/Base/Button.tsx
View File

@ -5,16 +5,18 @@ import styles from './styles';
import { themes } from '../../../constants/colors';
import Touch from '../../../utils/touch';
import { CustomIcon } from '../../../lib/Icons';
import { useTheme } from '../../../theme';
interface IPasscodeButton {
text?: string;
icon?: string;
theme: string;
disabled?: boolean;
onPress?: Function;
}
const Button = React.memo(({ text, disabled, theme, onPress, icon }: IPasscodeButton) => {
const Button = React.memo(({ text, disabled, onPress, icon }: IPasscodeButton) => {
const { theme } = useTheme();
const press = () => onPress && onPress(text);
return (

70
app/containers/Passcode/Base/Dots.tsx
View File

@ -4,47 +4,51 @@ import range from 'lodash/range';
import styles from './styles';
import { themes } from '../../../constants/colors';
import { useTheme } from '../../../theme';
const SIZE_EMPTY = 12;
const SIZE_FULL = 16;
interface IPasscodeDots {
passcode: string;
theme: string;
length: number;
}
const Dots = React.memo(({ passcode, theme, length }: IPasscodeDots) => (
<View style={styles.dotsContainer}>
{range(length).map(val => {
const lengthSup = passcode.length >= val + 1;
const height = lengthSup ? SIZE_FULL : SIZE_EMPTY;
const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
let backgroundColor = '';
if (lengthSup && passcode.length > 0) {
backgroundColor = themes[theme].passcodeDotFull;
} else {
backgroundColor = themes[theme].passcodeDotEmpty;
}
const borderRadius = lengthSup ? SIZE_FULL / 2 : SIZE_EMPTY / 2;
const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
const marginLeft = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
return (
<View style={styles.dotsView}>
<View
style={{
height,
width,
borderRadius,
backgroundColor,
marginRight,
marginLeft
}}
/>
</View>
);
})}
</View>
));
const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
const { theme } = useTheme();
return (
<View style={styles.dotsContainer}>
{range(length).map(val => {
const lengthSup = passcode.length >= val + 1;
const height = lengthSup ? SIZE_FULL : SIZE_EMPTY;
const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
let backgroundColor = '';
if (lengthSup && passcode.length > 0) {
backgroundColor = themes[theme].passcodeDotFull;
} else {
backgroundColor = themes[theme].passcodeDotEmpty;
}
const borderRadius = lengthSup ? SIZE_FULL / 2 : SIZE_EMPTY / 2;
const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
const marginLeft = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
return (
<View style={styles.dotsView}>
<View
style={{
height,
width,
borderRadius,
backgroundColor,
marginRight,
marginLeft
}}
/>
</View>
);
})}
</View>
);
});
export default Dots;

19
app/containers/Passcode/Base/LockIcon.tsx
View File

@ -5,13 +5,18 @@ import { Row } from 'react-native-easy-grid';
import styles from './styles';
import { themes } from '../../../constants/colors';
import { CustomIcon } from '../../../lib/Icons';
import { useTheme } from '../../../theme';
const LockIcon = React.memo(({ theme }: { theme: string }) => (
<Row style={styles.row}>
<View style={styles.iconView}>
<CustomIcon name='auth' size={40} color={themes[theme].passcodeLockIcon} />
</View>
</Row>
));
const LockIcon = React.memo(() => {
const { theme } = useTheme();
return (
<Row style={styles.row}>
<View style={styles.iconView}>
<CustomIcon name='auth' size={40} color={themes[theme].passcodeLockIcon} />
</View>
</Row>
);
});
export default LockIcon;

26
app/containers/Passcode/Base/Locked.tsx
View File

@ -6,36 +6,35 @@ import { resetAttempts } from '../../../utils/localAuthentication';
import { TYPE } from '../constants';
import { getDiff, getLockedUntil } from '../utils';
import I18n from '../../../i18n';
import { useTheme } from '../../../theme';
import styles from './styles';
import Title from './Title';
import Subtitle from './Subtitle';
import LockIcon from './LockIcon';
interface IPasscodeTimer {
time: string;
theme: string;
time: Date | null;
setStatus: Function;
}
interface IPasscodeLocked {
theme: string;
setStatus: Function;
}
const Timer = React.memo(({ time, theme, setStatus }: IPasscodeTimer) => {
const Timer = React.memo(({ time, setStatus }: IPasscodeTimer) => {
const calcTimeLeft = () => {
const diff = getDiff(time);
const diff = getDiff(time || 0);
if (diff > 0) {
return Math.floor((diff / 1000) % 60);
}
};
const [timeLeft, setTimeLeft] = useState<any>(calcTimeLeft());
const [timeLeft, setTimeLeft] = useState(calcTimeLeft());
useEffect(() => {
setTimeout(() => {
setTimeLeft(calcTimeLeft());
if (timeLeft <= 1) {
if (timeLeft && timeLeft <= 1) {
resetAttempts();
setStatus(TYPE.ENTER);
}
@ -46,11 +45,12 @@ const Timer = React.memo(({ time, theme, setStatus }: IPasscodeTimer) => {
return null;
}
return <Subtitle text={I18n.t('Passcode_app_locked_subtitle', { timeLeft })} theme={theme} />;
return <Subtitle text={I18n.t('Passcode_app_locked_subtitle', { timeLeft })} />;
});
const Locked = React.memo(({ theme, setStatus }: IPasscodeLocked) => {
const [lockedUntil, setLockedUntil] = useState<any>(null);
const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
const [lockedUntil, setLockedUntil] = useState<Date | null>(null);
const { theme } = useTheme();
const readItemFromStorage = async () => {
const l = await getLockedUntil();
@ -63,9 +63,9 @@ const Locked = React.memo(({ theme, setStatus }: IPasscodeLocked) => {
return (
<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
<LockIcon theme={theme} />
<Title text={I18n.t('Passcode_app_locked_title')} theme={theme} />
<Timer theme={theme} time={lockedUntil} setStatus={setStatus} />
<LockIcon />
<Title text={I18n.t('Passcode_app_locked_title')} />
<Timer time={lockedUntil} setStatus={setStatus} />
</Grid>
);
});

20
app/containers/Passcode/Base/Subtitle.tsx
View File

@ -4,18 +4,22 @@ import { Row } from 'react-native-easy-grid';
import styles from './styles';
import { themes } from '../../../constants/colors';
import { useTheme } from '../../../theme';
interface IPasscodeSubtitle {
text: string;
theme: string;
}
const Subtitle = React.memo(({ text, theme }: IPasscodeSubtitle) => (
<Row style={styles.row}>
<View style={styles.subtitleView}>
<Text style={[styles.textSubtitle, { color: themes[theme].passcodeSecondary }]}>{text}</Text>
</View>
</Row>
));
const Subtitle = React.memo(({ text }: IPasscodeSubtitle) => {
const { theme } = useTheme();
return (
<Row style={styles.row}>
<View style={styles.subtitleView}>
<Text style={[styles.textSubtitle, { color: themes[theme].passcodeSecondary }]}>{text}</Text>
</View>
</Row>
);
});
export default Subtitle;

20
app/containers/Passcode/Base/Title.tsx
View File

@ -4,18 +4,22 @@ import { Row } from 'react-native-easy-grid';
import styles from './styles';
import { themes } from '../../../constants/colors';
import { useTheme } from '../../../theme';
interface IPasscodeTitle {
text: string;
theme: string;
}
const Title = React.memo(({ text, theme }: IPasscodeTitle) => (
<Row style={styles.row}>
<View style={styles.titleView}>
<Text style={[styles.textTitle, { color: themes[theme].passcodePrimary }]}>{text}</Text>
</View>
</Row>
));
const Title = React.memo(({ text }: IPasscodeTitle) => {
const { theme } = useTheme();
return (
<Row style={styles.row}>
<View style={styles.titleView}>
<Text style={[styles.textTitle, { color: themes[theme].passcodePrimary }]}>{text}</Text>
</View>
</Row>
);
});
export default Title;

54
app/containers/Passcode/Base/index.tsx
View File

@ -1,6 +1,7 @@
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { Col, Grid, Row } from 'react-native-easy-grid';
import range from 'lodash/range';
import { View } from 'react-native';
import * as Animatable from 'react-native-animatable';
import * as Haptics from 'expo-haptics';
@ -10,12 +11,12 @@ import Dots from './Dots';
import { TYPE } from '../constants';
import { themes } from '../../../constants/colors';
import { PASSCODE_LENGTH } from '../../../constants/localAuthentication';
import { useTheme } from '../../../theme';
import LockIcon from './LockIcon';
import Title from './Title';
import Subtitle from './Subtitle';
interface IPasscodeBase {
theme: string;
type: string;
previousPasscode?: string;
title: string;
@ -26,25 +27,30 @@ interface IPasscodeBase {
onBiometryPress?(): void;
}
const Base = forwardRef(
(
{ theme, type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }: IPasscodeBase,
ref
) => {
const rootRef = useRef<any>();
const dotsRef = useRef<any>();
export interface IBase {
clearPasscode: () => void;
wrongPasscode: () => void;
animate: (animation: Animatable.Animation, duration?: number) => void;
}
const Base = forwardRef<IBase, IPasscodeBase>(
({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => {
const { theme } = useTheme();
const rootRef = useRef<Animatable.View & View>(null);
const dotsRef = useRef<Animatable.View & View>(null);
const [passcode, setPasscode] = useState('');
const clearPasscode = () => setPasscode('');
const wrongPasscode = () => {
clearPasscode();
dotsRef?.current?.shake(500);
dotsRef?.current?.shake?.(500);
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
};
const animate = (animation: string, duration = 500) => {
rootRef?.current?.[animation](duration);
const animate = (animation: Animatable.Animation, duration = 500) => {
rootRef?.current?.[animation]?.(duration);
};
const onPressNumber = (text: string) =>
@ -90,48 +96,48 @@ const Base = forwardRef(
return (
<Animatable.View ref={rootRef} style={styles.container}>
<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
<LockIcon theme={theme} />
<Title text={title} theme={theme} />
<Subtitle text={subtitle!} theme={theme} />
<LockIcon />
<Title text={title} />
{subtitle ? <Subtitle text={subtitle} /> : null}
<Row style={styles.row}>
<Animatable.View ref={dotsRef}>
<Dots passcode={passcode} theme={theme} length={PASSCODE_LENGTH} />
<Dots passcode={passcode} length={PASSCODE_LENGTH} />
</Animatable.View>
</Row>
<Row style={[styles.row, styles.buttonRow]}>
{range(1, 4).map((i: any) => (
{range(1, 4).map(i => (
<Col key={i} style={styles.colButton}>
<Button text={i} theme={theme} onPress={onPressNumber} />
<Button text={i.toString()} onPress={onPressNumber} />
</Col>
))}
</Row>
<Row style={[styles.row, styles.buttonRow]}>
{range(4, 7).map((i: any) => (
{range(4, 7).map(i => (
<Col key={i} style={styles.colButton}>
<Button text={i} theme={theme} onPress={onPressNumber} />
<Button text={i.toString()} onPress={onPressNumber} />
</Col>
))}
</Row>
<Row style={[styles.row, styles.buttonRow]}>
{range(7, 10).map((i: any) => (
{range(7, 10).map(i => (
<Col key={i} style={styles.colButton}>
<Button text={i} theme={theme} onPress={onPressNumber} />
<Button text={i.toString()} onPress={onPressNumber} />
</Col>
))}
</Row>
<Row style={[styles.row, styles.buttonRow]}>
{showBiometry ? (
<Col style={styles.colButton}>
<Button icon='fingerprint' theme={theme} onPress={onBiometryPress} />
<Button icon='fingerprint' onPress={onBiometryPress} />
</Col>
) : (
<Col style={styles.colButton} />
)}
<Col style={styles.colButton}>
<Button text='0' theme={theme} onPress={onPressNumber} />
<Button text='0' onPress={onPressNumber} />
</Col>
<Col style={styles.colButton}>
<Button icon='backspace' theme={theme} onPress={onPressDelete} />
<Button icon='backspace' onPress={onPressDelete} />
</Col>
</Row>
</Grid>

15
app/containers/Passcode/PasscodeChoose.tsx
View File

@ -2,24 +2,23 @@ import React, { useRef, useState } from 'react';
import * as Haptics from 'expo-haptics';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import Base from './Base';
import Base, { IBase } from './Base';
import { TYPE } from './constants';
import I18n from '../../i18n';
interface IPasscodeChoose {
theme: string;
force?: boolean;
finishProcess: Function;
}
const PasscodeChoose = ({ theme, finishProcess, force = false }: IPasscodeChoose) => {
const chooseRef = useRef<any>(null);
const confirmRef = useRef<any>(null);
const PasscodeChoose = ({ finishProcess, force = false }: IPasscodeChoose) => {
const chooseRef = useRef<IBase>(null);
const confirmRef = useRef<IBase>(null);
const [subtitle, setSubtitle] = useState(null);
const [status, setStatus] = useState(TYPE.CHOOSE);
const [previousPasscode, setPreviouPasscode] = useState<any>(null);
const [previousPasscode, setPreviouPasscode] = useState('');
const firstStep = (p: any) => {
const firstStep = (p: string) => {
setTimeout(() => {
setStatus(TYPE.CONFIRM);
setPreviouPasscode(p);
@ -43,7 +42,6 @@ const PasscodeChoose = ({ theme, finishProcess, force = false }: IPasscodeChoose
return (
<Base
ref={confirmRef}
theme={theme}
type={TYPE.CONFIRM}
onEndProcess={changePasscode}
previousPasscode={previousPasscode}
@ -56,7 +54,6 @@ const PasscodeChoose = ({ theme, finishProcess, force = false }: IPasscodeChoose
return (
<Base
ref={chooseRef}
theme={theme}
type={TYPE.CHOOSE}
onEndProcess={firstStep}
title={I18n.t('Passcode_choose_title')}

32
app/containers/Passcode/PasscodeEnter.tsx
View File

@ -4,35 +4,29 @@ import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import * as Haptics from 'expo-haptics';
import { sha256 } from 'js-sha256';
import Base from './Base';
import Base, { IBase } from './Base';
import Locked from './Base/Locked';
import { TYPE } from './constants';
import { ATTEMPTS_KEY, LOCKED_OUT_TIMER_KEY, MAX_ATTEMPTS, PASSCODE_KEY } from '../../constants/localAuthentication';
import { biometryAuth, resetAttempts } from '../../utils/localAuthentication';
import { getDiff, getLockedUntil } from './utils';
import UserPreferences from '../../lib/userPreferences';
import { useUserPreferences } from '../../lib/userPreferences';
import I18n from '../../i18n';
interface IPasscodePasscodeEnter {
theme: string;
hasBiometry: boolean;
finishProcess: Function;
}
const PasscodeEnter = ({ theme, hasBiometry, finishProcess }: IPasscodePasscodeEnter) => {
const ref = useRef(null);
let attempts: any = 0;
const PasscodeEnter = ({ hasBiometry, finishProcess }: IPasscodePasscodeEnter) => {
const ref = useRef<IBase>(null);
let attempts = 0;
let lockedUntil: any = false;
const [passcode, setPasscode] = useState(null);
const [status, setStatus] = useState(null);
const { getItem: getAttempts, setItem: setAttempts } = useAsyncStorage(ATTEMPTS_KEY);
const [passcode] = useUserPreferences(PASSCODE_KEY);
const [status, setStatus] = useState<TYPE | null>(null);
const { setItem: setAttempts } = useAsyncStorage(ATTEMPTS_KEY);
const { setItem: setLockedUntil } = useAsyncStorage(LOCKED_OUT_TIMER_KEY);
const fetchPasscode = async () => {
const p: any = await UserPreferences.getStringAsync(PASSCODE_KEY);
setPasscode(p);
};
const biometry = async () => {
if (hasBiometry && status === TYPE.ENTER) {
const result = await biometryAuth();
@ -50,13 +44,11 @@ const PasscodeEnter = ({ theme, hasBiometry, finishProcess }: IPasscodePasscodeE
await resetAttempts();
setStatus(TYPE.ENTER);
} else {
attempts = await getAttempts();
setStatus(TYPE.LOCKED);
}
} else {
setStatus(TYPE.ENTER);
}
await fetchPasscode();
biometry();
};
@ -64,7 +56,7 @@ const PasscodeEnter = ({ theme, hasBiometry, finishProcess }: IPasscodePasscodeE
readStorage();
}, [status]);
const onEndProcess = (p: any) => {
const onEndProcess = (p: string) => {
setTimeout(() => {
if (sha256(p) === passcode) {
finishProcess();
@ -75,8 +67,7 @@ const PasscodeEnter = ({ theme, hasBiometry, finishProcess }: IPasscodePasscodeE
setLockedUntil(new Date().toISOString());
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
} else {
// @ts-ignore
ref.current.wrongPasscode();
ref?.current?.wrongPasscode();
setAttempts(attempts?.toString());
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
}
@ -85,13 +76,12 @@ const PasscodeEnter = ({ theme, hasBiometry, finishProcess }: IPasscodePasscodeE
};
if (status === TYPE.LOCKED) {
return <Locked theme={theme} setStatus={setStatus} />;
return <Locked setStatus={setStatus} />;
}
return (
<Base
ref={ref}
theme={theme}
type={TYPE.ENTER}
title={I18n.t('Passcode_enter_title')}
showBiometry={hasBiometry}

12
app/containers/Passcode/constants.ts
View File

@ -1,6 +1,6 @@
export const TYPE: any = {
CHOOSE: 'choose',
CONFIRM: 'confirm',
ENTER: 'enter',
LOCKED: 'locked'
};
export enum TYPE {
CHOOSE = 'choose',
CONFIRM = 'confirm',
ENTER = 'enter',
LOCKED = 'locked'
}

8
app/containers/Passcode/utils.ts
View File

@ -4,11 +4,11 @@ import moment from 'moment';
import { LOCKED_OUT_TIMER_KEY, TIME_TO_LOCK } from '../../constants/localAuthentication';
export const getLockedUntil = async () => {
const t: any = await AsyncStorage.getItem(LOCKED_OUT_TIMER_KEY);
const t = await AsyncStorage.getItem(LOCKED_OUT_TIMER_KEY);
if (t) {
return moment(t).add(TIME_TO_LOCK);
return moment(t).add(TIME_TO_LOCK).toDate();
}
return null;
};
// @ts-ignore
export const getDiff = t => new Date(t) - new Date();
export const getDiff = (t: string | number | Date) => new Date(t).getTime() - new Date().getTime();

11
app/containers/ReactionsModal.tsx
View File

@ -10,6 +10,7 @@ import sharedStyles from '../views/Styles';
import { themes } from '../constants/colors';
import { withTheme } from '../theme';
import { TGetCustomEmoji } from '../definitions/IEmoji';
import { TMessageModel, ILoggedUser } from '../definitions';
import SafeAreaView from './SafeAreaView';
const styles = StyleSheet.create({
@ -65,23 +66,25 @@ interface IItem {
usernames: any;
emoji: string;
};
user?: { username: any };
user?: Pick<ILoggedUser, 'username'>;
baseUrl?: string;
getCustomEmoji?: TGetCustomEmoji;
theme?: string;
}
interface IModalContent {
message?: {
reactions: any;
};
message?: TMessageModel;
onClose: Function;
theme: string;
}
interface IReactionsModal {
message?: any;
user?: Pick<ILoggedUser, 'username'>;
isVisible: boolean;
onClose(): void;
baseUrl: string;
getCustomEmoji?: TGetCustomEmoji;
theme: string;
}

3
app/containers/RoomHeader/RoomHeader.tsx
View File

@ -7,6 +7,7 @@ import { themes } from '../../constants/colors';
import { MarkdownPreview } from '../markdown';
import RoomTypeIcon from '../RoomTypeIcon';
import { withTheme } from '../../theme';
import { TUserStatus } from '../../definitions';
const HIT_SLOP = {
top: 5,
@ -67,7 +68,7 @@ interface IRoomHeader {
prid: string;
tmid: string;
teamMain: boolean;
status: string;
status: TUserStatus;
theme?: string;
usersTyping: [];
isGroupChat: boolean;

6
app/containers/RoomHeader/index.tsx
View File

@ -2,7 +2,7 @@ import { dequal } from 'dequal';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { IApplicationState } from '../../definitions';
import { IApplicationState, TUserStatus } from '../../definitions';
import { withDimensions } from '../../dimensions';
import I18n from '../../i18n';
import RoomHeader from './RoomHeader';
@ -15,7 +15,7 @@ interface IRoomHeaderContainerProps {
tmid: string;
teamMain: boolean;
usersTyping: [];
status: string;
status: TUserStatus;
statusText: string;
connecting: boolean;
connected: boolean;
@ -140,7 +140,7 @@ const mapStateToProps = (state: IApplicationState, ownProps: any) => {
connecting: state.meteor.connecting || state.server.loading,
connected: state.meteor.connected,
usersTyping: state.usersTyping,
status,
status: status as TUserStatus,
statusText
};
};

10
app/containers/RoomTypeIcon.tsx
View File

@ -5,6 +5,7 @@ import { CustomIcon } from '../lib/Icons';
import { STATUS_COLORS, themes } from '../constants/colors';
import Status from './Status/Status';
import { withTheme } from '../theme';
import { TUserStatus } from '../definitions';
const styles = StyleSheet.create({
icon: {
@ -17,7 +18,7 @@ interface IRoomTypeIcon {
type: string;
isGroupChat?: boolean;
teamMain?: boolean;
status?: string;
status?: TUserStatus;
size?: number;
style?: ViewStyle;
}
@ -31,9 +32,10 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, team
const iconStyle = [styles.icon, { color }, style];
if (type === 'd' && !isGroupChat) {
return (
<Status style={[iconStyle, { color: STATUS_COLORS[status!] ?? STATUS_COLORS.offline }]} size={size} status={status!} />
);
if (!status) {
status = 'offline';
}
return <Status style={[iconStyle, { color: STATUS_COLORS[status] }]} size={size} status={status} />;
}
// TODO: move this to a separate function

103
app/containers/SearchBox.tsx
View File

@ -1,22 +1,14 @@
import React from 'react';
import {
NativeSyntheticEvent,
StyleSheet,
TextInput as RNTextInput,
Text,
TextInputFocusEventData,
TextInputProps,
View
} from 'react-native';
import { StyleSheet, Text, TextInput as RNTextInput, TextInputProps, View } from 'react-native';
import Touchable from 'react-native-platform-touchable';
import TextInput from '../presentation/TextInput';
import { themes } from '../constants/colors';
import I18n from '../i18n';
import { CustomIcon } from '../lib/Icons';
import sharedStyles from '../views/Styles';
import { withTheme } from '../theme';
import { themes } from '../constants/colors';
import TextInput from '../presentation/TextInput';
import { useTheme } from '../theme';
import { isIOS } from '../utils/deviceInfo';
import sharedStyles from '../views/Styles';
const styles = StyleSheet.create({
container: {
@ -52,60 +44,49 @@ const styles = StyleSheet.create({
}
});
interface ISearchBox {
interface ISearchBox extends TextInputProps {
value?: string;
onChangeText: TextInputProps['onChangeText'];
onSubmitEditing?: () => void;
hasCancel?: boolean;
onCancelPress?: Function;
theme?: string;
inputRef?: React.Ref<RNTextInput>;
testID?: string;
onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
}
const CancelButton = (onCancelPress: Function, theme: string) => (
<Touchable onPress={onCancelPress} style={styles.cancel}>
<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
</Touchable>
);
const CancelButton = ({ onCancelPress }: { onCancelPress?: Function }) => {
const { theme } = useTheme();
return (
<Touchable onPress={onCancelPress} style={styles.cancel}>
<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
</Touchable>
);
};
const SearchBox = ({
onChangeText,
onSubmitEditing,
testID,
hasCancel,
onCancelPress,
inputRef,
theme,
...props
}: ISearchBox) => (
<View
style={[
styles.container,
{ backgroundColor: isIOS ? themes[theme!].headerBackground : themes[theme!].headerSecondaryBackground }
]}>
<View style={[styles.searchBox, { backgroundColor: themes[theme!].searchboxBackground }]}>
<CustomIcon name='search' size={14} color={themes[theme!].auxiliaryText} />
<TextInput
ref={inputRef}
autoCapitalize='none'
autoCorrect={false}
blurOnSubmit
clearButtonMode='while-editing'
placeholder={I18n.t('Search')}
returnKeyType='search'
style={styles.input}
testID={testID}
underlineColorAndroid='transparent'
onChangeText={onChangeText}
onSubmitEditing={onSubmitEditing}
theme={theme!}
{...props}
/>
const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox): React.ReactElement => {
const { theme } = useTheme();
return (
<View
style={[
styles.container,
{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
]}>
<View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
<CustomIcon name='search' size={14} color={themes[theme].auxiliaryText} />
<TextInput
ref={inputRef}
autoCapitalize='none'
autoCorrect={false}
blurOnSubmit
clearButtonMode='while-editing'
placeholder={I18n.t('Search')}
returnKeyType='search'
style={styles.input}
underlineColorAndroid='transparent'
theme={theme}
{...props}
/>
</View>
{hasCancel ? <CancelButton onCancelPress={onCancelPress} /> : null}
</View>
{hasCancel ? CancelButton(onCancelPress!, theme!) : null}
</View>
);
);
};
export default withTheme(SearchBox);
export default SearchBox;

10
app/containers/Status/Status.tsx
View File

@ -3,15 +3,9 @@ import { StyleProp, TextStyle } from 'react-native';
import { CustomIcon } from '../../lib/Icons';
import { STATUS_COLORS } from '../../constants/colors';
import { IStatus } from './definition';
interface IStatus {
status: string;
size: number;
style?: StyleProp<TextStyle>;
testID?: string;
}
const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: IStatus) => {
const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: Omit<IStatus, 'id'>) => {
const name = `status-${status}`;
const isNameValid = CustomIcon.hasIcon(name);
const iconName = isNameValid ? name : 'status-offline';

9
app/containers/Status/definition.ts Normal file
View File

@ -0,0 +1,9 @@
import { TextProps } from 'react-native';
import { TUserStatus } from '../../definitions';
export interface IStatus extends TextProps {
id: string;
size: number;
status: TUserStatus;
}

27
app/containers/Status/index.tsx
View File

@ -1,20 +1,15 @@
import React, { memo } from 'react';
import { connect } from 'react-redux';
import React from 'react';
import { useSelector } from 'react-redux';
import { IApplicationState, TUserStatus } from '../../definitions';
import Status from './Status';
import { IStatus } from './definition';
interface IStatusContainer {
style: any;
size: number;
status: string;
}
const StatusContainer = ({ id, style, size = 32, ...props }: Omit<IStatus, 'status'>): React.ReactElement => {
const status = useSelector((state: IApplicationState) =>
state.meteor.connected ? state.activeUsers[id] && state.activeUsers[id].status : 'loading'
) as TUserStatus;
return <Status size={size} style={style} status={status} {...props} />;
};
const StatusContainer = memo(({ style, size = 32, status }: IStatusContainer) => (
<Status size={size} style={style} status={status} />
));
const mapStateToProps = (state: any, ownProps: any) => ({
status: state.meteor.connected ? state.activeUsers[ownProps.id] && state.activeUsers[ownProps.id].status : 'loading'
});
export default connect(mapStateToProps)(StatusContainer);
export default StatusContainer;

17
app/containers/StatusBar.tsx
View File

@ -2,22 +2,27 @@ import React from 'react';
import { StatusBar as StatusBarRN } from 'react-native';
import { themes } from '../constants/colors';
import { withTheme } from '../theme';
import { useTheme } from '../theme';
const supportedStyles = {
'light-content': 'light-content',
'dark-content': 'dark-content'
};
interface IStatusBar {
theme?: string;
barStyle?: any;
barStyle?: keyof typeof supportedStyles;
backgroundColor?: string;
}
const StatusBar = React.memo(({ theme, barStyle, backgroundColor }: IStatusBar) => {
const StatusBar = React.memo(({ barStyle, backgroundColor }: IStatusBar) => {
const { theme } = useTheme();
if (!barStyle) {
barStyle = 'light-content';
if (theme === 'light') {
barStyle = 'dark-content';
}
}
return <StatusBarRN backgroundColor={backgroundColor ?? themes[theme!].headerBackground} barStyle={barStyle} animated />;
return <StatusBarRN backgroundColor={backgroundColor ?? themes[theme].headerBackground} barStyle={barStyle} animated />;
});
export default withTheme(StatusBar);
export default StatusBar;

16
app/containers/TextInput.tsx
View File

@ -52,10 +52,7 @@ const styles = StyleSheet.create({
export interface IRCTextInputProps extends TextInputProps {
label?: string;
error?: {
error: any;
reason: any;
};
error?: any;
loading?: boolean;
containerStyle?: StyleProp<ViewStyle>;
inputStyle?: StyleProp<TextStyle>;
@ -68,7 +65,11 @@ export interface IRCTextInputProps extends TextInputProps {
theme: string;
}
export default class RCTextInput extends React.PureComponent<IRCTextInputProps, any> {
interface IRCTextInputState {
showPassword: boolean;
}
export default class RCTextInput extends React.PureComponent<IRCTextInputProps, IRCTextInputState> {
static defaultProps = {
error: {},
theme: 'light'
@ -116,12 +117,11 @@ export default class RCTextInput extends React.PureComponent<IRCTextInputProps,
get loading() {
const { theme } = this.props;
// @ts-ignore
return <ActivityIndicator style={[styles.iconContainer, styles.iconRight, { color: themes[theme].bodyText }]} />;
return <ActivityIndicator style={[styles.iconContainer, styles.iconRight]} color={themes[theme].bodyText} />;
}
tooglePassword = () => {
this.setState((prevState: any) => ({ showPassword: !prevState.showPassword }));
this.setState(prevState => ({ showPassword: !prevState.showPassword }));
};
render() {

22
app/containers/ThreadDetails.tsx
View File

@ -41,7 +41,7 @@ const styles = StyleSheet.create({
});
interface IThreadDetails {
item: Partial<TThreadModel>;
item: Pick<TThreadModel, 'tcount' | 'replies' | 'id'>;
user: {
id: string;
};
@ -52,9 +52,9 @@ interface IThreadDetails {
const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IThreadDetails): JSX.Element => {
const { theme } = useTheme();
let { tcount } = item;
if (tcount && tcount >= 1000) {
tcount = '+999';
let count: string | number | undefined | null = item.tcount;
if (count && count >= 1000) {
count = '+999';
}
let replies: number | string = item?.replies?.length ?? 0;
@ -62,21 +62,21 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
replies = '+999';
}
const isFollowing = item.replies?.find((u: any) => u === user?.id);
const isFollowing = item.replies?.find((u: string) => u === user?.id);
return (
<View style={[styles.container, style]}>
<View style={styles.detailsContainer}>
<View style={styles.detailContainer}>
<CustomIcon name='threads' size={24} color={themes[theme!].auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
{tcount}
<CustomIcon name='threads' size={24} color={themes[theme].auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
{count}
</Text>
</View>
<View style={styles.detailContainer}>
<CustomIcon name='user' size={24} color={themes[theme!].auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
<CustomIcon name='user' size={24} color={themes[theme].auxiliaryText} />
<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
{replies}
</Text>
</View>
@ -87,7 +87,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
<CustomIcon
size={24}
name={isFollowing ? 'notification' : 'notification-disabled'}
color={themes[theme!].auxiliaryTintColor}
color={themes[theme].auxiliaryTintColor}
/>
</Touchable>
</View>

12
app/containers/Toast.tsx
View File

@ -26,9 +26,9 @@ interface IToastProps {
}
class Toast extends React.Component<IToastProps, any> {
private listener: any;
private listener?: Function;
private toast: any;
private toast: EasyToast | null | undefined;
componentDidMount() {
this.listener = EventEmitter.addEventListener(LISTENER, this.showToast);
@ -43,12 +43,14 @@ class Toast extends React.Component<IToastProps, any> {
}
componentWillUnmount() {
EventEmitter.removeListener(LISTENER, this.listener);
if (this.listener) {
EventEmitter.removeListener(LISTENER, this.listener);
}
}
getToastRef = (toast: any) => (this.toast = toast);
getToastRef = (toast: EasyToast | null) => (this.toast = toast);
showToast = ({ message }: any) => {
showToast = ({ message }: { message: string }) => {
if (this.toast && this.toast.show) {
this.toast.show(message, 1000);
}

62
app/containers/TwoFactor/index.tsx
View File

@ -9,21 +9,36 @@ import { connect } from 'react-redux';
import TextInput from '../TextInput';
import I18n from '../../i18n';
import EventEmitter from '../../utils/events';
import { withTheme } from '../../theme';
import { useTheme } from '../../theme';
import { themes } from '../../constants/colors';
import Button from '../Button';
import sharedStyles from '../../views/Styles';
import RocketChat from '../../lib/rocketchat';
import styles from './styles';
import { IApplicationState } from '../../definitions';
export const TWO_FACTOR = 'TWO_FACTOR';
interface ITwoFactor {
theme?: string;
isMasterDetail: boolean;
interface IMethodsProp {
text: string;
keyboardType: 'numeric' | 'default';
title?: string;
secureTextEntry?: boolean;
}
interface IMethods {
totp: IMethodsProp;
email: IMethodsProp;
password: IMethodsProp;
}
const methods: any = {
interface EventListenerMethod {
method?: keyof IMethods;
submit?: (param: string) => void;
cancel?: () => void;
invalid?: boolean;
}
const methods: IMethods = {
totp: {
text: 'Open_your_authentication_app_and_enter_the_code',
keyboardType: 'numeric'
@ -40,14 +55,14 @@ const methods: any = {
}
};
const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) => {
const { theme } = useTheme();
const [visible, setVisible] = useState(false);
const [data, setData] = useState<any>({});
const [code, setCode] = useState<any>('');
const [data, setData] = useState<EventListenerMethod>({});
const [code, setCode] = useState<string>('');
const method = methods[data.method];
const method = data.method ? methods[data.method] : null;
const isEmail = data.method === 'email';
const sendEmail = () => RocketChat.sendEmailCode();
useDeepCompareEffect(() => {
@ -59,7 +74,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
}
}, [data]);
const showTwoFactor = (args: any) => setData(args);
const showTwoFactor = (args: EventListenerMethod) => setData(args);
useEffect(() => {
const listener = EventEmitter.addEventListener(TWO_FACTOR, showTwoFactor);
@ -87,26 +102,19 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
setData({});
};
const color = themes[theme!].titleText;
const color = themes[theme].titleText;
return (
<Modal
// @ts-ignore
transparent
avoidKeyboard
useNativeDriver
isVisible={visible}
hideModalContentWhileAnimating>
<Modal avoidKeyboard useNativeDriver isVisible={visible} hideModalContentWhileAnimating>
<View style={styles.container} testID='two-factor'>
<View
style={[
styles.content,
isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
{ backgroundColor: themes[theme!].backgroundColor }
{ backgroundColor: themes[theme].backgroundColor }
]}>
<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
<TextInput
/* @ts-ignore*/
value={code}
theme={theme}
inputRef={(e: any) => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())}
@ -116,19 +124,19 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
onSubmitEditing={onSubmit}
keyboardType={method?.keyboardType}
secureTextEntry={method?.secureTextEntry}
error={data.invalid && { error: 'totp-invalid', reason: I18n.t('Code_or_password_invalid') }}
error={data.invalid ? { error: 'totp-invalid', reason: I18n.t('Code_or_password_invalid') } : undefined}
testID='two-factor-input'
/>
{isEmail && (
{isEmail ? (
<Text style={[styles.sendEmail, { color }]} onPress={sendEmail}>
{I18n.t('Send_me_the_code_again')}
</Text>
)}
) : null}
<View style={styles.buttonContainer}>
<Button
title={I18n.t('Cancel')}
type='secondary'
backgroundColor={themes[theme!].chatComponentBackground}
backgroundColor={themes[theme].chatComponentBackground}
style={styles.button}
onPress={onCancel}
theme={theme}
@ -148,8 +156,8 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
);
});
const mapStateToProps = (state: any) => ({
const mapStateToProps = (state: IApplicationState) => ({
isMasterDetail: state.app.isMasterDetail
});
export default connect(mapStateToProps)(withTheme(TwoFactor));
export default connect(mapStateToProps)(TwoFactor);

19
app/containers/UIKit/Actions.tsx
View File

@ -3,25 +3,18 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import Button from '../Button';
import I18n from '../../i18n';
interface IActions {
blockId: string;
appId: string;
elements: any[];
parser: any;
theme: string;
}
import { IActions } from './interfaces';
export const Actions = ({ blockId, appId, elements, parser, theme }: IActions) => {
const [showMoreVisible, setShowMoreVisible] = useState(() => elements.length > 5);
const renderedElements = showMoreVisible ? elements.slice(0, 5) : elements;
const [showMoreVisible, setShowMoreVisible] = useState(() => elements && elements.length > 5);
const renderedElements = showMoreVisible ? elements?.slice(0, 5) : elements;
const Elements = () =>
renderedElements.map((element: any) => parser.renderActions({ blockId, appId, ...element }, BLOCK_CONTEXT.ACTION, parser));
const Elements = () => (
<>{renderedElements?.map(element => parser?.renderActions({ blockId, appId, ...element }, BLOCK_CONTEXT.ACTION, parser))}</>
);
return (
<>
{/* @ts-ignore*/}
<Elements />
{showMoreVisible && <Button theme={theme} title={I18n.t('Show_more')} onPress={() => setShowMoreVisible(false)} />}
</>

14
app/containers/UIKit/Context.tsx
View File

@ -1,8 +1,9 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import PropTypes from 'prop-types';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import { IContext } from './interfaces';
const styles = StyleSheet.create({
container: {
minHeight: 36,
@ -11,13 +12,6 @@ const styles = StyleSheet.create({
}
});
export const Context = ({ elements, parser }: any) => (
<View style={styles.container}>
{elements.map((element: any) => parser.renderContext(element, BLOCK_CONTEXT.CONTEXT, parser))}
</View>
export const Context = ({ elements, parser }: IContext) => (
<View style={styles.container}>{elements?.map(element => parser?.renderContext(element, BLOCK_CONTEXT.CONTEXT, parser))}</View>
);
Context.propTypes = {
elements: PropTypes.array,
parser: PropTypes.object
};

19
app/containers/UIKit/DatePicker.tsx
View File

@ -12,6 +12,7 @@ import sharedStyles from '../../views/Styles';
import { CustomIcon } from '../../lib/Icons';
import { isAndroid } from '../../utils/deviceInfo';
import ActivityIndicator from '../ActivityIndicator';
import { IDatePicker } from './interfaces';
const styles = StyleSheet.create({
input: {
@ -35,23 +36,11 @@ const styles = StyleSheet.create({
}
});
interface IDatePicker {
element: {
initial_date: any;
placeholder: string;
};
language: string;
action: Function;
context: number;
loading: boolean;
theme: string;
value: string;
error: string;
}
export const DatePicker = ({ element, language, action, context, theme, loading, value, error }: IDatePicker) => {
const [show, onShow] = useState(false);
const { initial_date, placeholder } = element;
const initial_date = element?.initial_date;
const placeholder = element?.placeholder;
const [currentDate, onChangeDate] = useState(new Date(initial_date || value));
const onChange = ({ nativeEvent: { timestamp } }: any, date: any) => {

35
app/containers/UIKit/Image.tsx
View File

@ -5,6 +5,8 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import ImageContainer from '../message/Image';
import Navigation from '../../lib/Navigation';
import { IThumb, IImage, IElement } from './interfaces';
import { TThemeMode } from '../../definitions/ITheme';
const styles = StyleSheet.create({
image: {
@ -15,44 +17,25 @@ const styles = StyleSheet.create({
}
});
interface IThumb {
element: {
imageUrl: string;
};
size?: number;
}
interface IMedia {
element: {
imageUrl: string;
};
theme: string;
}
interface IImage {
element: any;
context: any;
theme: string;
}
const ThumbContext = (args: any) => (
const ThumbContext = (args: IThumb) => (
<View style={styles.mediaContext}>
<Thumb size={20} {...args} />
</View>
);
export const Thumb = ({ element, size = 88 }: IThumb) => (
<FastImage style={[{ width: size, height: size }, styles.image]} source={{ uri: element.imageUrl }} />
<FastImage style={[{ width: size, height: size }, styles.image]} source={{ uri: element?.imageUrl }} />
);
export const Media = ({ element, theme }: IMedia) => {
export const Media = ({ element, theme }: IImage) => {
const showAttachment = (attachment: any) => Navigation.navigate('AttachmentView', { attachment });
const { imageUrl } = element;
const imageUrl = element?.imageUrl ?? '';
// @ts-ignore
// TODO: delete ts-ignore after refactor Markdown and ImageContainer
return <ImageContainer file={{ image_url: imageUrl }} imageUrl={imageUrl} showAttachment={showAttachment} theme={theme} />;
};
const genericImage = (element: any, context: any, theme: string) => {
const genericImage = (theme: TThemeMode, element: IElement, context?: number) => {
switch (context) {
case BLOCK_CONTEXT.SECTION:
return <Thumb element={element} />;
@ -63,4 +46,4 @@ const genericImage = (element: any, context: any, theme: string) => {
}
};
export const Image = ({ element, context, theme }: IImage) => genericImage(element, context, theme);
export const Image = ({ element, context, theme }: IImage) => genericImage(theme, element, context);

11
app/containers/UIKit/Input.tsx
View File

@ -4,6 +4,7 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import sharedStyles from '../../views/Styles';
import { themes } from '../../constants/colors';
import { IInput } from './interfaces';
const styles = StyleSheet.create({
container: {
@ -31,16 +32,6 @@ const styles = StyleSheet.create({
}
});
interface IInput {
element: object;
parser: any;
label: string;
description: string;
error: string;
hint: string;
theme: string;
}
export const Input = ({ element, parser, label, description, error, hint, theme }: IInput) => (
<View style={styles.container}>
{label ? (

2
app/containers/UIKit/MultiSelect/Items.tsx
View File

@ -41,7 +41,7 @@ const Item = ({ item, selected, onSelect, theme }: IItem) => {
<>
{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
<Text style={{ color: themes[theme].titleText }}>{textParser([item.text])}</Text>
{selected ? <Check theme={theme} /> : null}
{selected ? <Check /> : null}
</>
</Touchable>
);

3
app/containers/UIKit/MultiSelect/index.tsx
View File

@ -24,7 +24,7 @@ interface IMultiSelect {
multiselect?: boolean;
onSearch?: () => void;
onClose?: () => void;
inputStyle: object;
inputStyle?: object;
value?: any[];
disabled?: boolean | object;
theme: string;
@ -126,7 +126,6 @@ export const MultiSelect = React.memo(
<View style={[styles.content, { backgroundColor: themes[theme].backgroundColor }]}>
<TextInput
testID='multi-select-search'
/* @ts-ignore*/
onChangeText={onSearch || onSearchChange}
placeholder={I18n.t('Search')}
theme={theme}

37
app/containers/UIKit/Overflow.tsx
View File

@ -8,32 +8,7 @@ import ActivityIndicator from '../ActivityIndicator';
import { themes } from '../../constants/colors';
import { BUTTON_HIT_SLOP } from '../message/utils';
import * as List from '../List';
interface IOption {
option: {
text: string;
value: string;
};
onOptionPress: Function;
parser: any;
theme: string;
}
interface IOptions {
options: [];
onOptionPress: Function;
parser: object;
theme: string;
}
interface IOverflow {
element: any;
action: Function;
loading: boolean;
parser: object;
theme: string;
context: any;
}
import { IOption, IOptions, IOverflow } from './interfaces';
const keyExtractor = (item: any) => item.value;
@ -68,10 +43,11 @@ const Options = ({ options, onOptionPress, parser, theme }: IOptions) => (
/>
);
const touchable = {};
const touchable: { [key: string]: any } = {};
export const Overflow = ({ element, loading, action, parser, theme }: IOverflow) => {
const { options, blockId } = element;
const options = element?.options || [];
const blockId = element?.blockId || '';
const [show, onShow] = useState(false);
const onOptionPress = ({ value }: any) => {
@ -82,8 +58,7 @@ export const Overflow = ({ element, loading, action, parser, theme }: IOverflow)
return (
<>
<Touchable
/* @ts-ignore*/
ref={ref => (touchable[blockId] = ref)}
ref={(ref: any) => (touchable[blockId] = ref)}
background={Touchable.Ripple(themes[theme].bannerBackground)}
onPress={() => onShow(!show)}
hitSlop={BUTTON_HIT_SLOP}
@ -91,7 +66,7 @@ export const Overflow = ({ element, loading, action, parser, theme }: IOverflow)
{!loading ? (
<CustomIcon size={18} name='kebab' color={themes[theme].bodyText} />
) : (
<ActivityIndicator style={styles.loading} theme={theme} />
<ActivityIndicator style={styles.loading} />
)}
</Touchable>
<Popover

39
app/containers/UIKit/Section.tsx
View File

@ -3,6 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import { themes } from '../../constants/colors';
import { IAccessoryComponent, IFields, ISection } from './interfaces';
const styles = StyleSheet.create({
content: {
@ -23,36 +24,16 @@ const styles = StyleSheet.create({
}
});
interface IAccessory {
blockId?: string;
appId?: string;
element: any;
parser: any;
}
const Accessory = ({ element, parser }: IAccessoryComponent) =>
parser.renderAccessories({ ...element }, BLOCK_CONTEXT.SECTION, parser);
interface IFields {
fields: any;
parser: any;
theme: string;
}
interface ISection {
blockId: string;
appId: string;
text: object;
fields: [];
accessory: any;
theme: string;
parser: any;
}
const Accessory = ({ blockId, appId, element, parser }: IAccessory) =>
parser.renderAccessories({ blockId, appId, ...element }, BLOCK_CONTEXT.SECTION, parser);
const Fields = ({ fields, parser, theme }: IFields) =>
fields.map((field: any) => (
<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>{parser.text(field)}</Text>
));
const Fields = ({ fields, parser, theme }: IFields) => (
<>
{fields.map(field => (
<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>{parser.text(field)}</Text>
))}
</>
);
const accessoriesRight = ['image', 'overflow'];

31
app/containers/UIKit/index.tsx
View File

@ -20,6 +20,7 @@ import { Input } from './Input';
import { DatePicker } from './DatePicker';
import { Overflow } from './Overflow';
import { ThemeContext } from '../../theme';
import { BlockContext, IButton, IInputIndex, IParser, IText } from './interfaces';
const styles = StyleSheet.create({
input: {
@ -42,8 +43,12 @@ const styles = StyleSheet.create({
const plainText = ({ text } = { text: '' }) => text;
class MessageParser extends UiKitParserMessage {
text({ text, type }: any = { text: '' }, context: any) {
const { theme }: any = useContext(ThemeContext);
get current() {
return this as unknown as IParser;
}
text({ text, type }: Partial<IText> = { text: '' }, context: BlockContext) {
const { theme } = useContext(ThemeContext);
if (type !== 'mrkdwn') {
return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{text}</Text>;
}
@ -55,9 +60,9 @@ class MessageParser extends UiKitParserMessage {
return <Markdown msg={text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
}
button(element: any, context: any) {
button(element: IButton, context: BlockContext) {
const { text, value, actionId, style } = element;
const [{ loading }, action]: any = useBlockContext(element, context);
const [{ loading }, action] = useBlockContext(element, context);
const { theme } = useContext(ThemeContext);
return (
<Button
@ -73,7 +78,7 @@ class MessageParser extends UiKitParserMessage {
}
divider() {
const { theme }: any = useContext(ThemeContext);
const { theme } = useContext(ThemeContext);
// @ts-ignore
return <Divider theme={theme} />;
}
@ -91,7 +96,7 @@ class MessageParser extends UiKitParserMessage {
overflow(element: any, context: any) {
const [{ loading }, action]: any = useBlockContext(element, context);
const { theme }: any = useContext(ThemeContext);
return <Overflow element={element} context={context} loading={loading} action={action} theme={theme} parser={this} />;
return <Overflow element={element} context={context} loading={loading} action={action} theme={theme} parser={this.current} />;
}
datePicker(element: any, context: any) {
@ -150,12 +155,16 @@ class ModalParser extends UiKitParserModal {
});
}
input({ element, blockId, appId, label, description, hint }: any, context: any) {
get current() {
return this as unknown as IParser;
}
input({ element, blockId, appId, label, description, hint }: IInputIndex, context: number) {
const [{ error }]: any = useBlockContext({ ...element, appId, blockId }, context);
const { theme }: any = useContext(ThemeContext);
return (
<Input
parser={this}
parser={this.current}
element={{ ...element, appId, blockId }}
label={plainText(label)}
description={plainText(description)}
@ -178,16 +187,14 @@ class ModalParser extends UiKitParserModal {
return (
// @ts-ignore
<TextInput
id={actionId}
key={actionId}
placeholder={plainText(placeholder)}
onInput={action}
multiline={multiline}
loading={loading}
onChangeText={(text: any) => action({ value: text })}
onChangeText={text => action({ value: text })}
inputStyle={multiline && styles.multiline}
containerStyle={styles.input}
value={value}
// @ts-ignore
error={{ error }}
theme={theme}
/>

273
app/containers/UIKit/interfaces.ts Normal file
View File

@ -0,0 +1,273 @@
import { TThemeMode } from '../../definitions/ITheme';
export enum ElementTypes {
IMAGE = 'image',
BUTTON = 'button',
STATIC_SELECT = 'static_select',
MULTI_STATIC_SELECT = 'multi_static_select',
CONVERSATION_SELECT = 'conversations_select',
CHANNEL_SELECT = 'channels_select',
USER_SELECT = 'users_select',
OVERFLOW = 'overflow',
DATEPICKER = 'datepicker',
PLAIN_TEXT_INPUT = 'plain_text_input',
SECTION = 'section',
DIVIDER = 'divider',
ACTIONS = 'actions',
CONTEXT = 'context',
FIELDS = 'fields',
INPUT = 'input',
PLAIN_TEXT = 'plain_text',
TEXT = 'text',
MARKDOWN = 'mrkdwn'
}
export enum BlockContext {
BLOCK,
SECTION,
ACTION,
FORM,
CONTEXT
}
export enum ActionTypes {
ACTION = 'blockAction',
SUBMIT = 'viewSubmit',
CLOSED = 'viewClosed'
}
export enum ContainerTypes {
VIEW = 'view',
MESSAGE = 'message'
}
export enum ModalActions {
MODAL = 'modal',
OPEN = 'modal.open',
CLOSE = 'modal.close',
UPDATE = 'modal.update',
ERRORS = 'errors'
}
export interface IStateView {
[key: string]: { [settings: string]: string | number };
}
export interface IView {
appId: string;
type: ModalActions;
id: string;
title: IText;
submit: IButton;
close: IButton;
blocks: Block[];
showIcon: boolean;
state?: IStateView;
}
export interface Block {
type: ElementTypes;
blockId: string;
element?: IElement;
label?: string;
appId: string;
optional?: boolean;
elements?: IElement[];
}
export interface IElement {
type: ElementTypes;
placeholder?: IText;
actionId: string;
initialValue?: string;
options?: Option[];
text?: IText;
value?: string;
initial_date?: any;
imageUrl?: string;
appId?: string;
blockId?: string;
}
export interface IText {
type: ElementTypes;
text: string;
emoji?: boolean;
}
export interface Option {
text: IText;
value: string;
}
export interface IButton {
type: ElementTypes;
text: IText;
actionId: string;
value?: any;
style?: any;
}
export interface IContainer {
type: ContainerTypes;
id: string;
}
// methods/actions
export interface IUserInteraction {
triggerId: string;
appId?: string;
viewId?: string;
view: IView;
}
export interface IEmitUserInteraction extends IUserInteraction {
type: ModalActions;
}
export interface ITriggerAction {
type: ActionTypes;
actionId?: string;
appId?: string;
container?: IContainer;
value?: number;
blockId?: string;
rid?: string;
mid?: string;
viewId?: string;
payload?: any;
view?: IView;
}
export interface ITriggerBlockAction {
container: IContainer;
actionId: string;
appId: string;
value: number;
blockId?: string;
mid?: string;
rid?: string;
}
export interface ITriggerSubmitView {
viewId: string;
appId: string;
payload: {
view: {
id: string;
state: IStateView;
};
};
}
export interface ITriggerCancel {
view: IView;
appId: string;
viewId: string;
isCleared: boolean;
}
// UiKit components
export interface IParser {
renderAccessories: (data: TElementAccessory, context: BlockContext, parser: IParser) => JSX.Element;
renderActions: (data: Block, context: BlockContext, parser: IParser) => JSX.Element;
renderContext: (data: IElement, context: BlockContext, parser: IParser) => JSX.Element;
renderInputs: (data: Partial<IElement>, context: BlockContext, parser: IParser) => JSX.Element;
text: (data: IText) => JSX.Element;
}
export interface IActions extends Block {
parser?: IParser;
theme: TThemeMode;
}
export interface IContext extends Block {
parser: IParser;
}
export interface IDatePicker extends Partial<Block> {
language: string;
action: Function;
context: number;
loading: boolean;
value: string;
error: string;
theme: TThemeMode;
}
export interface IInput extends Partial<Block> {
parser: IParser;
description: string;
error: string;
hint: string;
theme: TThemeMode;
}
export interface IInputIndex {
element: IElement;
blockId: string;
appId: string;
label: IText;
description: IText;
hint: IText;
}
export interface IThumb {
element: IElement;
size?: number;
}
export interface IImage {
element: IElement;
theme: TThemeMode;
context?: number;
}
// UiKit/Overflow
export interface IOverflow extends Partial<Block> {
action: Function;
loading: boolean;
parser: IParser;
theme: TThemeMode;
context: number;
}
interface PropsOption {
onOptionPress: Function;
parser: IParser;
theme: TThemeMode;
}
export interface IOptions extends PropsOption {
options: Option[];
}
export interface IOption extends PropsOption {
option: Option;
}
// UiKit/Section
interface IAccessory {
type: ElementTypes;
actionId: string;
value: number;
text: IText;
}
type TElementAccessory = IAccessory & { blockId: string; appId: string };
export interface IAccessoryComponent {
element: TElementAccessory;
parser: IParser;
}
export interface ISection {
blockId: string;
appId: string;
text?: IText;
accessory?: IAccessory;
parser: IParser;
theme: TThemeMode;
fields?: any[];
}
export interface IFields {
parser: IParser;
theme: TThemeMode;
fields: any[];
}

16
app/containers/UIKit/utils.ts
View File

@ -2,6 +2,8 @@
import React, { useContext, useState } from 'react';
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import { BlockContext } from './interfaces';
export const textParser = ([{ text }]: any) => text;
export const defaultContext: any = {
@ -13,7 +15,19 @@ export const defaultContext: any = {
export const KitContext = React.createContext(defaultContext);
export const useBlockContext = ({ blockId, actionId, appId, initialValue }: any, context: any) => {
type TObjectReturn = {
loading: boolean;
setLoading: React.Dispatch<React.SetStateAction<boolean>>;
error: any;
value: any;
language: any;
};
type TFunctionReturn = (value: any) => Promise<void>;
type TReturn = [TObjectReturn, TFunctionReturn];
export const useBlockContext = ({ blockId, actionId, appId, initialValue }: any, context: BlockContext): TReturn => {
const { action, appId: appIdFromContext, viewId, state, language, errors, values = {} } = useContext(KitContext);
const { value = initialValue } = values[actionId] || {};
const [loading, setLoading] = useState(false);

15
app/containers/markdown/AtMention.tsx
View File

@ -1,18 +1,19 @@
import React from 'react';
import { Text } from 'react-native';
import { StyleProp, Text, TextStyle } from 'react-native';
import { useTheme } from '../../theme';
import { themes } from '../../constants/colors';
import styles from './styles';
import { events, logEvent } from '../../utils/log';
import { IUserMention } from './interfaces';
interface IAtMention {
mention: string;
username?: string;
navToRoomInfo?: Function;
style?: any;
style?: StyleProp<TextStyle>[];
useRealName?: boolean;
mentions: any;
mentions?: IUserMention[];
}
const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => {
@ -23,7 +24,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
style={[
styles.mention,
{
color: themes[theme!].mentionGroupColor
color: themes[theme].mentionGroupColor
},
...style
]}>
@ -35,11 +36,11 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
let mentionStyle = {};
if (mention === username) {
mentionStyle = {
color: themes[theme!].mentionMeColor
color: themes[theme].mentionMeColor
};
} else {
mentionStyle = {
color: themes[theme!].mentionOtherColor
color: themes[theme].mentionOtherColor
};
}
@ -64,7 +65,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
);
}
return <Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]}>{`@${mention}`}</Text>;
return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`@${mention}`}</Text>;
});
export default AtMention;

2
app/containers/markdown/BlockQuote.tsx
View File

@ -5,7 +5,7 @@ import { themes } from '../../constants/colors';
import styles from './styles';
interface IBlockQuote {
children: JSX.Element;
children: React.ReactElement | null;
theme: string;
}

8
app/containers/markdown/Hashtag.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Text, TextStyle, StyleProp } from 'react-native';
import { StyleProp, Text, TextStyle } from 'react-native';
import { themes } from '../../constants/colors';
import { useTheme } from '../../theme';
@ -18,7 +18,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
const handlePress = () => {
const index = channels?.findIndex(channel => channel.name === hashtag);
if (index && navToRoomInfo) {
if (typeof index !== 'undefined' && navToRoomInfo) {
const navParam = {
t: 'c',
rid: channels?.[index]._id
@ -33,7 +33,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
style={[
styles.mention,
{
color: themes[theme!].mentionOtherColor
color: themes[theme].mentionOtherColor
},
...style
]}
@ -42,7 +42,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
</Text>
);
}
return <Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
});
export default Hashtag;

2
app/containers/markdown/Link.tsx
View File

@ -10,7 +10,7 @@ import openLink from '../../utils/openLink';
import { TOnLinkPress } from './interfaces';
interface ILink {
children: JSX.Element;
children: React.ReactElement | null;
link: string;
theme: string;
onLinkPress?: TOnLinkPress;

7
app/containers/markdown/List.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
interface IList {
children: JSX.Element;
children: React.ReactElement[] | null;
ordered: boolean;
start: number;
tight: boolean;
@ -11,9 +11,8 @@ interface IList {
const List = React.memo(({ children, ordered, tight, start = 1, numberOfLines = 0 }: IList) => {
let bulletWidth = 15;
if (ordered) {
// @ts-ignore
const lastNumber = start + children.length - 1;
if (ordered && children) {
const lastNumber = start + children?.length - 1;
bulletWidth = 9 * lastNumber.toString().length + 7;
}

2
app/containers/markdown/ListItem.tsx
View File

@ -18,7 +18,7 @@ const style = StyleSheet.create({
});
interface IListItem {
children: JSX.Element;
children: React.ReactElement | null;
bulletWidth: number;
level: number;
ordered: boolean;

6
app/containers/markdown/Preview.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { StyleProp, Text, TextStyle } from 'react-native';
import { Text, TextStyle } from 'react-native';
import removeMarkdown from 'remove-markdown';
import shortnameToUnicode from '../../utils/shortnameToUnicode';
@ -13,10 +13,10 @@ interface IMarkdownPreview {
msg?: string;
numberOfLines?: number;
testID?: string;
style?: StyleProp<TextStyle>[];
style?: TextStyle[];
}
const MarkdownPreview = ({ msg, numberOfLines = 1, testID, style = [] }: IMarkdownPreview): React.ReactElement | null => {
const MarkdownPreview = ({ msg, numberOfLines = 1, testID, style = [] }: IMarkdownPreview) => {
if (!msg) {
return null;
}

6
app/containers/markdown/Table.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
import { CELL_WIDTH } from './TableCell';
import styles from './styles';
@ -8,7 +8,7 @@ import I18n from '../../i18n';
import { themes } from '../../constants/colors';
interface ITable {
children: JSX.Element;
children: React.ReactElement | null;
numColumns: number;
theme: string;
}
@ -19,7 +19,7 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => {
const getTableWidth = () => numColumns * CELL_WIDTH;
const renderRows = (drawExtraBorders = true) => {
const tableStyle = [styles.table, { borderColor: themes[theme].borderColor }];
const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].borderColor }];
if (drawExtraBorders) {
tableStyle.push(styles.tableExtraBorders);
}

6
app/containers/markdown/TableCell.tsx
View File

@ -1,12 +1,12 @@
import React from 'react';
import { Text, View } from 'react-native';
import { Text, View, ViewStyle } from 'react-native';
import { themes } from '../../constants/colors';
import styles from './styles';
interface ITableCell {
align: '' | 'left' | 'center' | 'right';
children: JSX.Element;
children: React.ReactElement | null;
isLastCell: boolean;
theme: string;
}
@ -14,7 +14,7 @@ interface ITableCell {
export const CELL_WIDTH = 100;
const TableCell = React.memo(({ isLastCell, align, children, theme }: ITableCell) => {
const cellStyle = [styles.cell, { borderColor: themes[theme].borderColor }];
const cellStyle: ViewStyle[] = [styles.cell, { borderColor: themes[theme].borderColor }];
if (!isLastCell) {
cellStyle.push(styles.cellRightBorder);
}

8
app/containers/markdown/TableRow.tsx
View File

@ -1,22 +1,22 @@
import React from 'react';
import { View } from 'react-native';
import { View, ViewStyle } from 'react-native';
import { themes } from '../../constants/colors';
import styles from './styles';
interface ITableRow {
children: JSX.Element;
children: React.ReactElement | null;
isLastRow: boolean;
theme: string;
}
const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRow) => {
const rowStyle = [styles.row, { borderColor: themes[theme].borderColor }];
const rowStyle: ViewStyle[] = [styles.row, { borderColor: themes[theme].borderColor }];
if (!isLastRow) {
rowStyle.push(styles.rowBottomBorder);
}
const children: any = React.Children.toArray(_children);
const children = React.Children.toArray(_children) as React.ReactElement[];
children[children.length - 1] = React.cloneElement(children[children.length - 1], {
isLastCell: true
});

1
app/containers/markdown/index.tsx
View File

@ -280,6 +280,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
renderHeading = ({ children, level }: any) => {
const { numberOfLines, theme } = this.props;
// @ts-ignore
const textStyle = styles[`heading${level}Text`];
return (
<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].bodyText }]}>

1
app/containers/markdown/interfaces.ts
View File

@ -2,6 +2,7 @@ export interface IUserMention {
_id: string;
username: string;
name?: string;
type?: string;
}
export interface IUserChannel {

2
app/containers/markdown/new/BigEmoji.tsx
View File

@ -14,7 +14,7 @@ const styles = StyleSheet.create({
}
});
const BigEmoji = ({ value }: IBigEmojiProps): JSX.Element => (
const BigEmoji = ({ value }: IBigEmojiProps) => (
<View style={styles.container}>
{value.map(block => (
<Emoji value={block.value} isBigEmoji />

2
app/containers/markdown/new/Bold.tsx
View File

@ -18,7 +18,7 @@ const styles = StyleSheet.create({
}
});
const Bold = ({ value }: IBoldProps): JSX.Element => (
const Bold = ({ value }: IBoldProps) => (
<Text style={styles.text}>
{value.map(block => {
switch (block.type) {

8
app/containers/markdown/new/Code.tsx
View File

@ -11,7 +11,7 @@ interface ICodeProps {
value: CodeProps['value'];
}
const Code = ({ value }: ICodeProps): JSX.Element => {
const Code = ({ value }: ICodeProps) => {
const { theme } = useTheme();
return (
@ -19,9 +19,9 @@ const Code = ({ value }: ICodeProps): JSX.Element => {
style={[
styles.codeBlock,
{
color: themes[theme!].bodyText,
backgroundColor: themes[theme!].bannerBackground,
borderColor: themes[theme!].borderColor
color: themes[theme].bodyText,
backgroundColor: themes[theme].bannerBackground,
borderColor: themes[theme].borderColor
}
]}>
{value.map(block => {

2
app/containers/markdown/new/CodeLine.tsx
View File

@ -6,7 +6,7 @@ interface ICodeLineProps {
value: CodeLineProps['value'];
}
const CodeLine = ({ value }: ICodeLineProps): JSX.Element | null => {
const CodeLine = ({ value }: ICodeLineProps) => {
if (value.type !== 'PLAIN_TEXT') {
return null;
}

4
app/containers/markdown/new/Emoji.tsx
View File

@ -14,7 +14,7 @@ interface IEmojiProps {
isBigEmoji?: boolean;
}
const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => {
const Emoji = ({ value, isBigEmoji }: IEmojiProps) => {
const { theme } = useTheme();
const { baseUrl, getCustomEmoji } = useContext(MarkdownContext);
const emojiUnicode = shortnameToUnicode(`:${value.value}:`);
@ -23,7 +23,7 @@ const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => {
if (emoji) {
return <CustomEmoji baseUrl={baseUrl} style={[isBigEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
}
return <Text style={[{ color: themes[theme!].bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{emojiUnicode}</Text>;
return <Text style={[{ color: themes[theme].bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{emojiUnicode}</Text>;
};
export default Emoji;

4
app/containers/markdown/new/Heading.tsx
View File

@ -11,12 +11,12 @@ interface IHeadingProps {
level: HeadingProps['level'];
}
const Heading = ({ value, level }: IHeadingProps): JSX.Element => {
const Heading = ({ value, level }: IHeadingProps) => {
const { theme } = useTheme();
const textStyle = styles[`heading${level}`];
return (
<Text style={[textStyle, { color: themes[theme!].bodyText }]}>
<Text style={[textStyle, { color: themes[theme].bodyText }]}>
{value.map(block => {
switch (block.type) {
case 'PLAIN_TEXT':

Some files were not shown because too many files have changed in this diff Show More