toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace lottie loading spinner for activity indicator (#6266)

Browse source
This commit is contained in:
Elias Nahum 2022-05-12 12:54:43 -04:00 committed by GitHub
parent 3f3e0e76db
commit 08d80e6236
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 64 additions and 713 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
android/app/build.gradle
View file

@ -288,7 +288,6 @@ dependencies {
implementation "com.facebook.react:react-native:+" // From node_modules
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.5.2'
implementation project(':lottie-react-native')
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

2
android/app/src/main/java/com/mattermost/rnbeta/MainApplication.java
View file

@ -12,7 +12,6 @@ import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.airbnb.android.react.lottie.LottiePackage;
import com.mattermost.helpers.RealPathUtil;
import com.wix.reactnativenotifications.RNNotificationsPackage;
@ -62,7 +61,6 @@ public class MainApplication extends NavigationApplication implements INotificat
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new RNNotificationsPackage(MainApplication.this));
packages.add(new LottiePackage());
packages.add(

2
android/settings.gradle
View file

@ -6,8 +6,6 @@ if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true")
project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')
}
include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
include ':reactnativenotifications'
project(':reactnativenotifications').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-notifications/lib/android/app')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

40
app/components/loading/__snapshots__/index.test.tsx.snap
View file

@ -2,44 +2,6 @@
exports[`Loading should match snapshot 1`] = `
<View>
<View
style={
Array [
Object {
"aspectRatio": 1,
},
undefined,
Array [
Object {
"height": 32,
"width": 32,
},
undefined,
],
]
}
>
<View
autoPlay={true}
cacheComposition={true}
collapsable={false}
enableMergePathsAndroidForKitKatAndAbove={false}
forwardedRef={[Function]}
loop={true}
onAnimationFinish={[Function]}
onLayout={[Function]}
progress={0}
resizeMode="contain"
sourceJson="{\\"v\\":\\"5.5.7\\",\\"meta\\":{\\"g\\":\\"LottieFiles AE 0.1.20\\",\\"a\\":\\"\\",\\"k\\":\\"\\",\\"d\\":\\"\\",\\"tc\\":\\"\\"},\\"fr\\":60,\\"ip\\":0,\\"op\\":40,\\"w\\":32,\\"h\\":32,\\"nm\\":\\"Spinner - white\\",\\"ddd\\":0,\\"assets\\":[],\\"layers\\":[{\\"ddd\\":0,\\"ind\\":1,\\"ty\\":4,\\"nm\\":\\"Shape Layer 2\\",\\"sr\\":1,\\"ks\\":{\\"o\\":{\\"a\\":0,\\"k\\":100,\\"ix\\":11},\\"r\\":{\\"a\\":1,\\"k\\":[{\\"i\\":{\\"x\\":[0.833],\\"y\\":[0.833]},\\"o\\":{\\"x\\":[0.167],\\"y\\":[0.167]},\\"t\\":0,\\"s\\":[0]},{\\"t\\":40,\\"s\\":[360]}],\\"ix\\":10},\\"p\\":{\\"a\\":0,\\"k\\":[16,16,0],\\"ix\\":2},\\"a\\":{\\"a\\":0,\\"k\\":[0,0,0],\\"ix\\":1},\\"s\\":{\\"a\\":0,\\"k\\":[100,100,100],\\"ix\\":6}},\\"ao\\":0,\\"shapes\\":[{\\"ty\\":\\"gr\\",\\"it\\":[{\\"d\\":1,\\"ty\\":\\"el\\",\\"s\\":{\\"a\\":0,\\"k\\":[27,27],\\"ix\\":2},\\"p\\":{\\"a\\":0,\\"k\\":[0,0],\\"ix\\":3},\\"nm\\":\\"Ellipse Path 1\\",\\"mn\\":\\"ADBE Vector Shape - Ellipse\\",\\"hd\\":false},{\\"ty\\":\\"gs\\",\\"o\\":{\\"a\\":0,\\"k\\":100,\\"ix\\":9},\\"w\\":{\\"a\\":0,\\"k\\":3,\\"ix\\":10},\\"g\\":{\\"p\\":3,\\"k\\":{\\"a\\":0,\\"k\\":[0.001,1,1,1,0.5,1,1,1,1,1,1,1,0,1,0.5,0.5,1,0],\\"ix\\":8}},\\"s\\":{\\"a\\":0,\\"k\\":[2.423,11.896],\\"ix\\":4},\\"e\\":{\\"a\\":0,\\"k\\":[1.431,-12.387],\\"ix\\":5},\\"t\\":1,\\"lc\\":1,\\"lj\\":1,\\"ml\\":4,\\"ml2\\":{\\"a\\":0,\\"k\\":4,\\"ix\\":13},\\"bm\\":0,\\"nm\\":\\"Gradient Stroke 1\\",\\"mn\\":\\"ADBE Vector Graphic - G-Stroke\\",\\"hd\\":false},{\\"ty\\":\\"tr\\",\\"p\\":{\\"a\\":0,\\"k\\":[0.05,0],\\"ix\\":2},\\"a\\":{\\"a\\":0,\\"k\\":[0,0],\\"ix\\":1},\\"s\\":{\\"a\\":0,\\"k\\":[100,100],\\"ix\\":3},\\"r\\":{\\"a\\":0,\\"k\\":0,\\"ix\\":6},\\"o\\":{\\"a\\":0,\\"k\\":100,\\"ix\\":7},\\"sk\\":{\\"a\\":0,\\"k\\":0,\\"ix\\":4},\\"sa\\":{\\"a\\":0,\\"k\\":0,\\"ix\\":5},\\"nm\\":\\"Transform\\"}],\\"nm\\":\\"Ellipse 1\\",\\"np\\":3,\\"cix\\":2,\\"bm\\":0,\\"ix\\":1,\\"mn\\":\\"ADBE Vector Group\\",\\"hd\\":false}],\\"ip\\":0,\\"op\\":1800,\\"st\\":0,\\"bm\\":0},{\\"ddd\\":0,\\"ind\\":2,\\"ty\\":4,\\"nm\\":\\"Shape Layer 1\\",\\"parent\\":1,\\"sr\\":1,\\"ks\\":{\\"o\\":{\\"a\\":0,\\"k\\":100,\\"ix\\":11},\\"r\\":{\\"a\\":0,\\"k\\":0,\\"ix\\":10},\\"p\\":{\\"a\\":0,\\"k\\":[0,0,0],\\"ix\\":2},\\"a\\":{\\"a\\":0,\\"k\\":[0,0,0],\\"ix\\":1},\\"s\\":{\\"a\\":0,\\"k\\":[100,100,100],\\"ix\\":6}},\\"ao\\":0,\\"hasMask\\":true,\\"masksProperties\\":[{\\"inv\\":false,\\"mode\\":\\"a\\",\\"pt\\":{\\"a\\":0,\\"k\\":{\\"i\\":[[0,0],[0,0],[0,0],[0,0]],\\"o\\":[[0,0],[0,0],[0,0],[0,0]],\\"v\\":[[-15.95,-15.938],[-15.963,16],[-0.025,16],[-0.013,-15.938]],\\"c\\":true},\\"ix\\":1},\\"o\\":{\\"a\\":0,\\"k\\":100,\\"ix\\":3},\\"x\\":{\\"a\\":0,\\"k\\":0,\\"ix\\":4},\\"nm\\":\\"Mask 1\\"}],\\"shapes\\":[{\\"ty\\":\\"gr\\",\\"it\\":[{\\"d\\":1,\\"ty\\":\\"el\\",\\"s\\":{\\"a\\":0,\\"k\\":[27,27],\\"ix\\":2},\\"p\\":{\\"a\\":0,\\"k\\":[0,0],\\"ix\\":3},\\"nm\\":\\"Ellipse Path 1\\",\\"mn\\":\\"ADBE Vector Shape - Ellipse\\",\\"hd\\":false},{\\"ty\\":\\"st\\",\\"c\\":{\\"a\\":0,\\"k\\":[1,1,1,1],\\"ix\\":3},\\"o\\":{\\"a\\":0,\\"k\\":100,\\"ix\\":4},\\"w\\":{\\"a\\":0,\\"k\\":3,\\"ix\\":5},\\"lc\\":1,\\"lj\\":1,\\"ml\\":4,\\"bm\\":0,\\"nm\\":\\"Stroke 1\\",\\"mn\\":\\"ADBE Vector Graphic - Stroke\\",\\"hd\\":false},{\\"ty\\":\\"tr\\",\\"p\\":{\\"a\\":0,\\"k\\":[0.05,0],\\"ix\\":2},\\"a\\":{\\"a\\":0,\\"k\\":[0,0],\\"ix\\":1},\\"s\\":{\\"a\\":0,\\"k\\":[100,100],\\"ix\\":3},\\"r\\":{\\"a\\":0,\\"k\\":0,\\"ix\\":6},\\"o\\":{\\"a\\":0,\\"k\\":100,\\"ix\\":7},\\"sk\\":{\\"a\\":0,\\"k\\":0,\\"ix\\":4},\\"sa\\":{\\"a\\":0,\\"k\\":0,\\"ix\\":5},\\"nm\\":\\"Transform\\"}],\\"nm\\":\\"Ellipse 1\\",\\"np\\":3,\\"cix\\":2,\\"bm\\":0,\\"ix\\":1,\\"mn\\":\\"ADBE Vector Group\\",\\"hd\\":false}],\\"ip\\":0,\\"op\\":1800,\\"st\\":0,\\"bm\\":0}],\\"markers\\":[]}"
speed={1}
style={
Object {
"aspectRatio": 1,
"height": 32,
"width": 32,
}
}
/>
</View>
<ActivityIndicator />
</View>
`;

43
app/components/loading/index.tsx
View file

@ -1,49 +1,30 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import LottieView from 'lottie-react-native';
import React, {useEffect, useRef} from 'react';
import {StyleSheet, View, ViewStyle} from 'react-native';
import React from 'react';
import {ActivityIndicator, View, ViewStyle} from 'react-native';
import {useTheme} from '@context/theme';
type LoadingProps = {
containerStyle?: ViewStyle;
style?: ViewStyle;
size?: number | 'small' | 'large';
color?: string;
themeColor?: keyof Theme;
}
const Loading = ({containerStyle, style, color}: LoadingProps) => {
const lottieRef = useRef<LottieView|null>(null);
// This is a workaround as it seems that autoPlay does not work properly on
// newer versions of RN
useEffect(() => {
const animationFrame = requestAnimationFrame(() => {
lottieRef.current?.reset();
lottieRef.current?.play();
});
return () => cancelAnimationFrame(animationFrame);
}, []);
const Loading = ({containerStyle, size, color, themeColor}: LoadingProps) => {
const theme = useTheme();
const indicatorColor = themeColor ? theme[themeColor] : color;
return (
<View style={containerStyle}>
<LottieView
autoPlay={true}
colorFilters={color ? [{color, keypath: 'Shape Layer 1'}] : undefined}
loop={true}
ref={lottieRef}
source={require('./spinner.json')}
style={[styles.lottie, style]}
<ActivityIndicator
color={indicatorColor}
size={size}
/>
</View>
);
};
const styles = StyleSheet.create({
lottie: {
height: 32,
width: 32,
},
});
export default Loading;

501
app/components/loading/spinner.json
View file

@ -1,501 +0,0 @@
{
"v": "5.5.7",
"meta": {
"g": "LottieFiles AE 0.1.20",
"a": "",
"k": "",
"d": "",
"tc": ""
},
"fr": 60,
"ip": 0,
"op": 40,
"w": 32,
"h": 32,
"nm": "Spinner - white",
"ddd": 0,
"assets": [],
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "Shape Layer 2",
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 1,
"k": [
{
"i": {
"x": [
0.833
],
"y": [
0.833
]
},
"o": {
"x": [
0.167
],
"y": [
0.167
]
},
"t": 0,
"s": [
0
]
},
{
"t": 40,
"s": [
360
]
}
],
"ix": 10
},
"p": {
"a": 0,
"k": [
16,
16,
0
],
"ix": 2
},
"a": {
"a": 0,
"k": [
0,
0,
0
],
"ix": 1
},
"s": {
"a": 0,
"k": [
100,
100,
100
],
"ix": 6
}
},
"ao": 0,
"shapes": [
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": {
"a": 0,
"k": [
27,
27
],
"ix": 2
},
"p": {
"a": 0,
"k": [
0,
0
],
"ix": 3
},
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "gs",
"o": {
"a": 0,
"k": 100,
"ix": 9
},
"w": {
"a": 0,
"k": 3,
"ix": 10
},
"g": {
"p": 3,
"k": {
"a": 0,
"k": [
0.001,
1,
1,
1,
0.5,
1,
1,
1,
1,
1,
1,
1,
0,
1,
0.5,
0.5,
1,
0
],
"ix": 8
}
},
"s": {
"a": 0,
"k": [
2.423,
11.896
],
"ix": 4
},
"e": {
"a": 0,
"k": [
1.431,
-12.387
],
"ix": 5
},
"t": 1,
"lc": 1,
"lj": 1,
"ml": 4,
"ml2": {
"a": 0,
"k": 4,
"ix": 13
},
"bm": 0,
"nm": "Gradient Stroke 1",
"mn": "ADBE Vector Graphic - G-Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [
0.05,
0
],
"ix": 2
},
"a": {
"a": 0,
"k": [
0,
0
],
"ix": 1
},
"s": {
"a": 0,
"k": [
100,
100
],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}
],
"nm": "Ellipse 1",
"np": 3,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1800,
"st": 0,
"bm": 0
},
{
"ddd": 0,
"ind": 2,
"ty": 4,
"nm": "Shape Layer 1",
"parent": 1,
"sr": 1,
"ks": {
"o": {
"a": 0,
"k": 100,
"ix": 11
},
"r": {
"a": 0,
"k": 0,
"ix": 10
},
"p": {
"a": 0,
"k": [
0,
0,
0
],
"ix": 2
},
"a": {
"a": 0,
"k": [
0,
0,
0
],
"ix": 1
},
"s": {
"a": 0,
"k": [
100,
100,
100
],
"ix": 6
}
},
"ao": 0,
"hasMask": true,
"masksProperties": [
{
"inv": false,
"mode": "a",
"pt": {
"a": 0,
"k": {
"i": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"o": [
[
0,
0
],
[
0,
0
],
[
0,
0
],
[
0,
0
]
],
"v": [
[
-15.95,
-15.938
],
[
-15.963,
16
],
[
-0.025,
16
],
[
-0.013,
-15.938
]
],
"c": true
},
"ix": 1
},
"o": {
"a": 0,
"k": 100,
"ix": 3
},
"x": {
"a": 0,
"k": 0,
"ix": 4
},
"nm": "Mask 1"
}
],
"shapes": [
{
"ty": "gr",
"it": [
{
"d": 1,
"ty": "el",
"s": {
"a": 0,
"k": [
27,
27
],
"ix": 2
},
"p": {
"a": 0,
"k": [
0,
0
],
"ix": 3
},
"nm": "Ellipse Path 1",
"mn": "ADBE Vector Shape - Ellipse",
"hd": false
},
{
"ty": "st",
"c": {
"a": 0,
"k": [
1,
1,
1,
1
],
"ix": 3
},
"o": {
"a": 0,
"k": 100,
"ix": 4
},
"w": {
"a": 0,
"k": 3,
"ix": 5
},
"lc": 1,
"lj": 1,
"ml": 4,
"bm": 0,
"nm": "Stroke 1",
"mn": "ADBE Vector Graphic - Stroke",
"hd": false
},
{
"ty": "tr",
"p": {
"a": 0,
"k": [
0.05,
0
],
"ix": 2
},
"a": {
"a": 0,
"k": [
0,
0
],
"ix": 1
},
"s": {
"a": 0,
"k": [
100,
100
],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "Transform"
}
],
"nm": "Ellipse 1",
"np": 3,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}
],
"ip": 0,
"op": 1800,
"st": 0,
"bm": 0
}
],
"markers": []
}

2
app/components/post_list/post/body/content/message_attachments/action_button/index.tsx
View file

@ -19,7 +19,7 @@ type Props = {
id: string;
name: string;
postId: string;
theme: Theme;
theme: ExtendedTheme;
}
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {

7
app/screens/browse_channels/browse_channels.tsx
View file

@ -67,11 +67,6 @@ const style = StyleSheet.create({
justifyContent: 'center' as const,
alignItems: 'center' as const,
},
loading: {
height: 32,
width: 32,
justifyContent: 'center' as const,
},
});
type Props = {
@ -198,7 +193,7 @@ export default function BrowseChannels(props: Props) {
content = (
<Loading
containerStyle={style.loadingContainer}
style={style.loading}
size='large'
color={theme.buttonBg}
/>
);

9
app/screens/browse_channels/channel_list.tsx
View file

@ -32,11 +32,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
justifyContent: 'center' as const,
alignItems: 'center' as const,
},
loading: {
height: 32,
width: 32,
justifyContent: 'center' as const,
},
listContainer: {
paddingHorizontal: 20,
flexGrow: 1,
@ -87,9 +82,9 @@ export default function ChannelList({
return (
<Loading
containerStyle={style.loadingContainer}
style={style.loading}
color={theme.buttonBg}
containerStyle={style.loadingContainer}
size='large'
/>
);

9
app/screens/create_direct_message/user_list.tsx
View file

@ -80,11 +80,6 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
justifyContent: 'center' as const,
alignItems: 'center' as const,
},
loading: {
height: 32,
width: 32,
justifyContent: 'center' as const,
},
noResultContainer: {
flexGrow: 1,
alignItems: 'center' as const,
@ -167,9 +162,9 @@ export default function UserList({
return (
<Loading
containerStyle={style.loadingContainer}
style={style.loading}
color={theme.buttonBg}
containerStyle={style.loadingContainer}
size='large'
/>
);
}, [loading, theme]);

10
app/screens/create_or_edit_channel/channel_info_form.tsx
View file

@ -56,9 +56,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => ({
paddingHorizontal: 15,
},
loading: {
height: 20,
width: 20,
color: theme.centerChannelBg,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
textInput: {
marginTop: 30,
@ -195,7 +195,9 @@ export default function ChannelInfoForm({
<View style={styles.container}>
<StatusBar/>
<Loading
style={styles.loading}
containerStyle={styles.loading}
color={theme.centerChannelColor}
size='large'
/>
</View>
);

2
app/screens/edit_server/form.tsx
View file

@ -140,7 +140,7 @@ const EditServerForm = ({
buttonIcon = (
<Loading
containerStyle={styles.loadingContainerStyle}
style={styles.loading}
color={theme.buttonColor}
/>
);
}

2
app/screens/find_channels/filtered_list/filtered_list.tsx
View file

@ -186,7 +186,7 @@ const FilteredList = ({
return (
<Loading
containerStyle={style.noResultContainer}
style={style.loading}
size='large'
color={theme.buttonBg}
/>
);

10
app/screens/home/channel_list/categories_list/categories/categories.tsx
View file

@ -35,11 +35,6 @@ const styles = StyleSheet.create({
justifyContent: 'center',
flex: 1,
},
loading: {
justifyContent: 'center',
height: 32,
width: 32,
},
});
const extractKey = (item: CategoryModel | 'UNREADS') => (item === 'UNREADS' ? 'UNREADS' : item.id);
@ -115,7 +110,10 @@ const Categories = ({categories, onlyUnreads, unreadsOnTop}: Props) => {
)}
{switchingTeam && (
<View style={styles.loadingView}>
<Loading style={styles.loading}/>
<Loading
size='large'
themeColor='sidebarText'
/>
</View>
)}
</>

3
app/screens/home/channel_list/servers/servers_list/server_item/server_item.tsx
View file

@ -405,8 +405,9 @@ const ServerItem = ({
}
{switching &&
<Loading
style={styles.switching}
containerStyle={styles.switching}
color={theme.buttonBg}
size='large'
/>
}
<View style={styles.details}>

6
app/screens/login/form.tsx
View file

@ -68,10 +68,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
loginButton: {
marginTop: 25,
},
loading: {
height: 20,
width: 20,
},
}));
const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayName, launchError, launchType, license, serverUrl, theme}: LoginProps) => {
@ -304,7 +300,7 @@ const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayNa
buttonIcon = (
<Loading
containerStyle={styles.loadingContainerStyle}
style={styles.loading}
color={theme.buttonColor}
/>
);
}

2
app/screens/mfa/index.tsx
View file

@ -247,7 +247,7 @@ const MFA = ({config, goToHome, license, loginId, password, serverDisplayName, s
{isLoading &&
<Loading
containerStyle={styles.loadingContainerStyle}
style={styles.loading}
color={theme.buttonColor}
/>
}
<FormattedText

28
app/screens/saved_posts/saved_posts.tsx
View file

@ -3,7 +3,7 @@
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {useIntl} from 'react-intl';
import {DeviceEventEmitter, FlatList, StyleSheet, View} from 'react-native';
import {BackHandler, DeviceEventEmitter, FlatList, StyleSheet, View} from 'react-native';
import {EventSubscription, Navigation} from 'react-native-navigation';
import {Edge, SafeAreaView} from 'react-native-safe-area-context';
@ -40,7 +40,7 @@ const styles = StyleSheet.create({
},
empty: {
alignItems: 'center',
minHeight: '100%',
flex: 1,
justifyContent: 'center',
},
list: {
@ -69,6 +69,15 @@ function SavedMessages({
const data = useMemo(() => selectOrderedPosts(posts, 0, false, '', '', false, isTimezoneEnabled, currentTimezone, false).reverse(), [posts]);
const close = () => {
if (componentId) {
dismissModal({componentId});
return true;
}
return false;
};
useEffect(() => {
fetchSavedPosts(serverUrl).finally(() => {
setLoading(false);
@ -82,7 +91,7 @@ function SavedMessages({
navigationButtonPressed: ({buttonId}: { buttonId: string }) => {
switch (buttonId) {
case closeButtonId:
dismissModal({componentId});
close();
break;
}
},
@ -94,6 +103,15 @@ function SavedMessages({
};
}, [componentId, closeButtonId]);
useEffect(() => {
let listener: EventSubscription|undefined;
if (!isTablet && componentId) {
listener = BackHandler.addEventListener('hardwareBackPress', close);
}
return () => listener?.remove();
}, [componentId, isTablet]);
const onViewableItemsChanged = useCallback(({viewableItems}: ViewableItemsChanged) => {
if (!viewableItems.length) {
return;
@ -120,7 +138,7 @@ function SavedMessages({
{loading ? (
<Loading
color={theme.buttonBg}
style={styles.loading}
size='large'
/>
) : (
<EmptyState/>
@ -163,7 +181,7 @@ function SavedMessages({
style={styles.flex}
>
<FlatList
contentContainerStyle={styles.list}
contentContainerStyle={data.length ? styles.list : [styles.empty]}
ListEmptyComponent={emptyList}
data={data}
onRefresh={handleRefresh}

6
app/screens/server/form.tsx
View file

@ -68,10 +68,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
padding: 0,
top: -2,
},
loading: {
height: 20,
width: 20,
},
}));
const ServerForm = ({
@ -154,7 +150,7 @@ const ServerForm = ({
buttonIcon = (
<Loading
containerStyle={styles.loadingContainerStyle}
style={styles.loading}
color={theme.buttonColor}
/>
);
}

4
app/utils/theme/index.ts
View file

@ -218,8 +218,8 @@ const themeTypeMap: ThemeTypeMap = {
};
// setThemeDefaults will set defaults on the theme for any unset properties.
export function setThemeDefaults(theme: Theme): Theme {
const themes = Preferences.THEMES as Record<ThemeKey, Theme>;
export function setThemeDefaults(theme: ExtendedTheme): Theme {
const themes = Preferences.THEMES as Record<ThemeKey, ExtendedTheme>;
const defaultTheme = themes.denim;
const processedTheme = {...theme};

1
ios/Podfile
View file

@ -31,7 +31,6 @@ target 'Mattermost' do
# TODO: Remove this once upstream PR https://github.com/daltoniam/Starscream/pull/871 is merged
pod 'Starscream', :git => 'https://github.com/mattermost/Starscream.git', :commit => 'cb83dd247339ff6c155f0e749d6fe2cc145f5283'
pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'
end

14
ios/Podfile.lock
View file

@ -91,10 +91,6 @@ PODS:
- libwebp/mux (1.2.1):
- libwebp/demux
- libwebp/webp (1.2.1)
- lottie-ios (3.2.3)
- lottie-react-native (5.0.1):
- lottie-ios (~> 3.2.3)
- React-Core
- OpenSSL-Universal (1.1.1100)
- Permission-Camera (3.3.1):
- RNPermissions
@ -568,8 +564,6 @@ DEPENDENCIES:
- hermes-engine (~> 0.11.0)
- jail-monkey (from `../node_modules/jail-monkey`)
- libevent (~> 2.1.12)
- lottie-ios (from `../node_modules/lottie-ios`)
- lottie-react-native (from `../node_modules/lottie-react-native`)
- OpenSSL-Universal (= 1.1.1100)
- Permission-Camera (from `../node_modules/react-native-permissions/ios/Camera`)
- Permission-PhotoLibrary (from `../node_modules/react-native-permissions/ios/PhotoLibrary`)
@ -689,10 +683,6 @@ EXTERNAL SOURCES:
:podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
jail-monkey:
:path: "../node_modules/jail-monkey"
lottie-ios:
:path: "../node_modules/lottie-ios"
lottie-react-native:
:path: "../node_modules/lottie-react-native"
Permission-Camera:
:path: "../node_modules/react-native-permissions/ios/Camera"
Permission-PhotoLibrary:
@ -865,8 +855,6 @@ SPEC CHECKSUMS:
jail-monkey: 07b83767601a373db876e939b8dbf3f5eb15f073
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc
lottie-ios: c058aeafa76daa4cf64d773554bccc8385d0150e
lottie-react-native: a029a86e1689c86a07169c520ae770e84348cd20
OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
Permission-Camera: bae27a8503530770c35aadfecbb97ec71823382a
Permission-PhotoLibrary: ddb5a158725b29cb12e9e477e8a5f5151c66cc3c
@ -947,6 +935,6 @@ SPEC CHECKSUMS:
Yoga: 6671cf077f614314c22fd09ddf87d7abeee64e96
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
PODFILE CHECKSUM: bb161ae7bf12d0d04e6c9584b673aeeee5bf3639
PODFILE CHECKSUM: f02af9f9635e939cc75998e2f4c943a59e23940a
COCOAPODS: 1.11.3

68
package-lock.json generated
View file

@ -40,8 +40,6 @@
"emoji-regex": "10.1.0",
"fuse.js": "6.5.3",
"jail-monkey": "2.6.0",
"lottie-ios": "3.2.3",
"lottie-react-native": "5.0.1",
"mime-db": "1.52.0",
"moment-timezone": "0.5.34",
"react": "17.0.2",
@ -15755,26 +15753,6 @@
"loose-envify": "cli.js"
}
},
"node_modules/lottie-ios": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/lottie-ios/-/lottie-ios-3.2.3.tgz",
"integrity": "sha512-mubYMN6+1HXa8z3EJKBvNBkl4UoVM4McjESeB2PgvRMSngmJtC5yUMRdhbbrIAn5Liu3hFGao/14s5hQIgtkRQ=="
},
"node_modules/lottie-react-native": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-5.0.1.tgz",
"integrity": "sha512-V+ODPqiHOSRzEWg8VsfrJBicgc2k0ZPlCjk3J7ULUkh94smL1nrsF/n4OGukj4MLZwonpv+frVK7pPh5U7t3rQ==",
"dependencies": {
"invariant": "^2.2.2",
"prop-types": "^15.5.10",
"react-native-safe-modules": "^1.0.3"
},
"peerDependencies": {
"lottie-ios": "^3.2.3",
"react": "*",
"react-native": ">=0.46"
}
},
"node_modules/lowlight": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
@ -19459,22 +19437,6 @@
"react-native": "*"
}
},
"node_modules/react-native-safe-modules": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/react-native-safe-modules/-/react-native-safe-modules-1.0.3.tgz",
"integrity": "sha512-DUxti4Z+AgJ/ZsO5U7p3uSCUBko8JT8GvFlCeOXk9bMd+4qjpoDvMYpfbixXKgL88M+HwmU/KI1YFN6gsQZyBA==",
"dependencies": {
"dedent": "^0.6.0"
},
"peerDependencies": {
"react-native": "*"
}
},
"node_modules/react-native-safe-modules/node_modules/dedent": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.6.0.tgz",
"integrity": "sha1-Dm2o8M5Sg471zsXI+TlrDBtko8s="
},
"node_modules/react-native-screens": {
"version": "3.13.1",
"resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.13.1.tgz",
@ -35448,21 +35410,6 @@
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
"lottie-ios": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/lottie-ios/-/lottie-ios-3.2.3.tgz",
"integrity": "sha512-mubYMN6+1HXa8z3EJKBvNBkl4UoVM4McjESeB2PgvRMSngmJtC5yUMRdhbbrIAn5Liu3hFGao/14s5hQIgtkRQ=="
},
"lottie-react-native": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-5.0.1.tgz",
"integrity": "sha512-V+ODPqiHOSRzEWg8VsfrJBicgc2k0ZPlCjk3J7ULUkh94smL1nrsF/n4OGukj4MLZwonpv+frVK7pPh5U7t3rQ==",
"requires": {
"invariant": "^2.2.2",
"prop-types": "^15.5.10",
"react-native-safe-modules": "^1.0.3"
}
},
"lowlight": {
"version": "1.20.0",
"resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
@ -38499,21 +38446,6 @@
"integrity": "sha512-OOX+W2G4YYufvryonn6Kw6YnyT8ZThkxPHZBD04NLHaZmicUaaDVII/PZ3M5fD1o5N62+T+8K4bCS5Un2ggvkA==",
"requires": {}
},
"react-native-safe-modules": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/react-native-safe-modules/-/react-native-safe-modules-1.0.3.tgz",
"integrity": "sha512-DUxti4Z+AgJ/ZsO5U7p3uSCUBko8JT8GvFlCeOXk9bMd+4qjpoDvMYpfbixXKgL88M+HwmU/KI1YFN6gsQZyBA==",
"requires": {
"dedent": "^0.6.0"
},
"dependencies": {
"dedent": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.6.0.tgz",
"integrity": "sha1-Dm2o8M5Sg471zsXI+TlrDBtko8s="
}
}
},
"react-native-screens": {
"version": "3.13.1",
"resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.13.1.tgz",

2
package.json
View file

@ -38,8 +38,6 @@
"emoji-regex": "10.1.0",
"fuse.js": "6.5.3",
"jail-monkey": "2.6.0",
"lottie-ios": "3.2.3",
"lottie-react-native": "5.0.1",
"mime-db": "1.52.0",
"moment-timezone": "0.5.34",
"react": "17.0.2",

3
types/api/preferences.d.ts vendored
View file

@ -10,7 +10,6 @@ type ThemeKey = 'denim' | 'sapphire' | 'quartz' | 'indigo' | 'onyx' | 'custom';
type ThemeType = 'Denim' | 'Sapphire' | 'Quartz' | 'Indigo' | 'Onyx' | 'custom';
type Theme = {
[key: string]: string | undefined;
type?: ThemeType | LegacyThemeType;
sidebarBg: string;
sidebarText: string;
@ -38,4 +37,6 @@ type Theme = {
codeTheme: string;
};
type ExtendedTheme = Theme & {[key: string]: string | undefined};
type ThemeTypeMap = Record<ThemeType | LegacyThemeType, ThemeKey>;